@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* VPC 適用時の商品ページ内ボタンのレイアウト調整 */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.woocommerce div.product form.cart .vpc-configure-button {
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

/* VPC の金額を非表示にする */
.VPC_ln_Skin.left-sidebar #vpc-price-container,
.vpc-options .amount {
  display: none;
}

/* VPC のページネーション：無効ステップを非表示にする */
#bx-pager a.disableClick {
  display: none !important;
}

/* VPC のプレビュー画像のアニメーションを無効化 */
#vpc-container.VPC_ln_Skin #vpc-preview img.current, #vpc-container.VPC_ln_Skin .vpc-preview img.current {
  animation: unset !important;
}

/* VPC のテキストエリアではフォントサイズを明示指定 */
.vpc-component-content .textfield-box textarea {
  font-size: 1rem;
  height: 80px;
  resize: vertical;
}

/* STEP4: 上記 textarea 用スタイルを残したまま、
   input 要素の product_name_back 系も非表示対象に追加する */
.vpc-single-option-wrap.textfield:has(
    input[id^='product_name_'][id*='_back-'][id$='-field']
  ) {
  display: none !important;
}

.vpc-single-option-wrap.textfield:has(
    input[id*='_product_name_back-'][id$='-field']
  ) {
  display: none !important;
}

/* STEP6 の back 用 Upload Component（ユーザー操作UI）を非表示にする
 * data-name が "logo_◯◯_back" または "◯◯_logo_◯◯_back" 形式の Upload Component を非表示にする
 *   例: logo_horizontal_back, logo_vertical_back, example_logo_horizontal_back など
 */
 form.userfile_upload_form[data-name*="logo_"][data-name$="_back"] {
  display: none !important;
}

/* VPC のアップロード画像を領域内に収める */
.vpc-options .acd-upload-info img {
  object-fit: contain;
}

/* VPC 必須ラベルのレイアウト／見た目 */
.VPC_ln_Skin #vpc-components .component-name {
  column-gap: 8px;
  display: flex;
  align-items: center;
}

.VPC_ln_Skin #vpc-components label:has(> .vpc-required-label) {
  column-gap: 4px;
  display: flex;
  align-items: center;
}

.VPC_ln_Skin #vpc-components .vpc-required-label {
  align-items: center;
  background-color: #e0245e;
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  padding: .25em;
}

/* 必須未入力時に表示するトースト */
#vpc-required-toast {
  position: fixed;
  top: 5dvh;
  left: calc(50% + 210px);
  /* 初期状態は少し上にオフセットしてフェードアウト */
  transform: translate(-50%, -5dvh);
  z-index: 100000;
  background-color: rgba(224, 36, 94, 0.95);
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  /* フェード＋上下移動の両方をアニメーション（スピードを調整） */
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  white-space: pre-line;
}
@media (max-width: 850px) {
  #vpc-required-toast {
    font-size: 12px;
    left: 50%;
    width: 95%;
  }
  #vpc-required-toast.is-focus {
    top: auto;
    bottom: 45dvh;
  }
}

#vpc-required-toast.is-visible {
  opacity: 1;
  /* 表示時は元の位置まで下にスライドしてくる */
  transform: translate(-50%, 0);
}

/* ADD TO CART / SAVE FOR LATER 後の success メッセージ */
@keyframes vpc-success-slide-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -5dvh);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

#vpc-form-builder-wrap .vpc-success {
  position: fixed;
  top: 5dvh;
  left: calc(50% + 210px);
  z-index: 100000;
  padding: 8px 16px;
  margin: 0;
  background-color: rgba(34, 197, 94, 0.95);
  color: #fff;
  font-size: 14px;
  white-space: pre-line;
  border-radius: 4px;
  float: none;
  animation: vpc-success-slide-in 0.4s ease-in-out forwards;
}

@media (max-width: 850px) {
  #vpc-form-builder-wrap .vpc-success {
    font-size: 12px;
    left: 50%;
    width: 95%;
  }
}

/* VPC のアクションボタンをPCでは左下部に固定 */
@media screen and (min-width: 850px) {
  .VPC_ln_Skin.left-sidebar #components-slider-nav-desktop {
    background-color: #f4f5f7;
    float: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
  #vpc-loader-container {
    position: fixed;
  }
}

/* VPC コンフィグ画面下部のアクションボタンを2カラム2行にレイアウト */
/* #components-slider-nav-desktop .vpc-action-buttons {　
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 8px;
} */

/* DOWNLOAD IMAGE と数量コンテナは従来どおり1列フル幅にする */
/* #components-slider-nav-desktop .vpc-action-buttons .download_container,
#components-slider-nav-desktop .vpc-action-buttons #vpc-qty-container {
  grid-column: 1 / -1;
} */

/* 4つのボタンを2カラム内に収める */
/* #components-slider-nav-desktop .vpc-action-buttons > button {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
} */

/* @media (max-width: 850px) {
  #components-slider-nav-desktop .vpc-action-buttons > button {
    font-size: 12px;
  }
} */

/* VPC のSAVEボタンのレイアウト調整 */
#sfla-modal .btn {
  align-items: center;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  padding: 0 !important;
  width: 55px;
  height: 55px;
}

#sfla-modal .vpc-sfla-button {
  background-color: var(--cocoon-custom-background-color, #333);
  border: 0;
  color: #fff;
  cursor: pointer;
  margin: 0;
  font-family: 'FontAwesome';
  font-size: 14px;
  height: inherit;
  letter-spacing: normal;
  display: inline-block;
  top: 2px;
  width: inherit;
  position: relative;
}

#sfla-modal .vpc-sfla-button.disabledClick {
  background-color: inherit !important;
}

/* VPC のLINEボタン（#vpc-line-btn）にLINEアイコンを表示 */
#vpc-line-btn::after {
  content: url('assets/images/line.svg');
  margin-left: 5px;
  font-family: 'FontAwesome';
  font-size: 14px;
  letter-spacing: normal;
  width: 14px;
  display: inline-block;
  top: 2px;
  position: relative;
}

/* VPC のアクションボタンの背景色を変更 */
#vpc-add-to-cart {
  background-color: #d26ea0;
}

#vpc-save-btn {
  background-color: #2882C8;
}

#vpc-line-btn {
  background-color: #00B900;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}