/* =======================================================
   AnyGift ELC 7ブランド向けカスタムCSS
   構成:
   0) 変数
   1) 7ブランド共通：テキスト置換 (::before)
   2) 7ブランド共通：その他
   3) ブランド固有：レイアウト/ボタン/モーダル/フォーム
   ======================================================= */

/* ========== 0) 変数（必要に応じて） ========== */
:root {
    --ag-bg-faint: 248 246 244;
    --ag-black: #221f20;
    --ag-br-font: 12px; /* cta font-size */
    --ag-brand: #221f20;
    --ag-cta-hover-bc: #221f20;
    --ag-cta-hover-color: white;
    --ag-gray-300: 169 165 160;
    --ag-gray-500: 121 121 121;
    --ag-green-500: 65 195 149; /* rgb(var(--ag-green-500)) */
    --ag-white: #ffffff;;
}

/* 共通で使う便利な :is() で7ブランドを束ねる */
.anygift-gift-ui__container:is(
  .ag-store-aveda,
  .ag-store-esteelauder,
  .ag-store-delamer,
  .ag-store-maccosmetics,
  .ag-store-bobbibrown,
  .ag-store-clinique,
  .ag-store-jomalone
) {
    /* スコープ用ブロック（何も指定しない） */
}

/* =======================================================
   1) 7ブランド共通：テキスト置換 (::before)
   ======================================================= */
/* メインボタンのテキストを差し替え */
.anygift-gift-ui__container:is(
  .ag-store-aveda,
  .ag-store-esteelauder,
  .ag-store-delamer,
  .ag-store-maccosmetics,
  .ag-store-bobbibrown,
  .ag-store-clinique,
  .ag-store-jomalone
) .anygift-gift-ui__main-button {
    font-size: 0 !important; /* 既存テキストを非表示 */
}

.anygift-gift-ui__container:is(
  .ag-store-aveda,
  .ag-store-esteelauder,
  .ag-store-delamer,
  .ag-store-maccosmetics,
  .ag-store-bobbibrown,
  .ag-store-clinique,
  .ag-store-jomalone
) .anygift-gift-ui__main-button::before {
    content: "LINEやメールでeギフトを贈る";
    display: block;
    font-size: var(--ag-br-font);
}

/* カラーチェックボタンのテキストを差し替え */
.anygift-gift-ui__container:is(
  .ag-store-aveda,
  .ag-store-esteelauder,
  .ag-store-delamer,
  .ag-store-maccosmetics,
  .ag-store-bobbibrown,
  .ag-store-clinique,
  .ag-store-jomalone
) .anygift-child-product-modal__check-button {
    font-size: 0 !important; /* 既存テキストを非表示 */
}

.anygift-gift-ui__container:is(
  .ag-store-aveda,
  .ag-store-esteelauder,
  .ag-store-delamer,
  .ag-store-maccosmetics,
  .ag-store-bobbibrown,
  .ag-store-clinique,
  .ag-store-jomalone
) .anygift-child-product-modal__check-button::before {
    content: "eギフトで選べるカラーを見る";
    display: block;
    font-size: var(--ag-br-font);
}

/* 説明モーダルのテキストを差し替え */
.anygift-gift-ui__container:is(
  .ag-store-aveda,
  .ag-store-esteelauder,
  .ag-store-delamer,
  .ag-store-maccosmetics,
  .ag-store-bobbibrown,
  .ag-store-clinique,
  .ag-store-jomalone
) .anygift-explain-modal__section__text {
    font-size: 0 !important; /* 既存テキストを非表示 */
}

.anygift-gift-ui__container:is(
  .ag-store-aveda,
  .ag-store-esteelauder,
  .ag-store-delamer,
  .ag-store-maccosmetics,
  .ag-store-bobbibrown,
  .ag-store-clinique,
  .ag-store-jomalone
) .anygift-explain-modal__section__text::before {
    content: "eギフトURLの期限は7日間です。お相手が入力し忘れた場合、注文はキャンセル・返金されます。";
    display: block;
    font-size: 1rem;
}

/* 注意モーダルのテキストを差し替え */
.anygift-gift-ui__container:is(
  .ag-store-aveda,
  .ag-store-esteelauder,
  .ag-store-delamer,
  .ag-store-maccosmetics,
  .ag-store-bobbibrown,
  .ag-store-clinique,
  .ag-store-jomalone
) .anygift-about-modal__caution__text {
    font-size: 0 !important; /* 既存テキストを非表示 */
}

.anygift-gift-ui__container:is(
  .ag-store-aveda,
  .ag-store-esteelauder,
  .ag-store-delamer,
  .ag-store-maccosmetics,
  .ag-store-bobbibrown,
  .ag-store-clinique,
  .ag-store-jomalone
) .anygift-about-modal__caution__text::before {
    content: "※ お相手が配送先住所を入力し忘れた場合、注文はキャンセル・返金されます。";
    display: block;
    font-size: 1rem;
}

/* =======================================================
   2) 7ブランド共通：その他（見た目の共通化）
   ======================================================= */
/* メインボタン角丸0（該当ブランドをまとめる） */
.anygift-gift-ui__container:is(
  .ag-store-aveda,
  .ag-store-delamer,
  .ag-store-jomalone,
  .ag-store-esteelauder,
  .ag-store-clinique,
  .ag-store-bobbibrown
) .anygift-gift-ui__main-button {
    border-radius: 0 !important;
}

/* 幅100%適用（該当ブランドをまとめる） */
.anygift-gift-ui__container:is(
  .ag-store-aveda,
  .ag-store-delamer,
  .ag-store-jomalone,
  .ag-store-bobbibrown
) {
    width: 100% !important;
}

/* =======================================================
   3) ブランド固有
   ======================================================= */
.anygift-gift-ui__container.ag-store-maccosmetics label.anygift-order-form__gift-area__check-box {
    display: block !important;
}

/* elc original */
button.anygift-step-modal__close-button:hover, button.anygift-step-modal__back-button:hover {
    background-color: inherit;
}

button.ag-bg-anygift-gray-100 {
    background: #120e02;
    border: 1px solid black;
    border-radius: inherit;
    color: #ffffff;
    font-size: var(--ag-br-font);
    height: auto;
}

button.anygift-order-form__main-button[disabled], button.anygift-order-form__main-button[disabled]:hover {
    background-color: #e5e5e5;
    border-color: #e5e5e5;
    border-radius: inherit;
    color: white;
    cursor: not-allowed;
}

img.ag-object-cover {
    object-fit: contain;
}

button.anygift-payment-form__preview__confirm-button, button.anygift-payment-form__main-button, button.anygift-order-form__main-button, button.anygift-button {
    border-radius: inherit;
    --tw-gradient-to: inherit;
}

button.anygift-payment-form__preview__confirm-button, button.anygift-payment-form__main-button, button.anygift-order-form__main-button, button.anygift-preview-modal-receive-button, button.anygift-message-card-preview-modal__e-gift-button {
    background-color: var(--ag-brand);
}

button.anygift-payment-form__preview__confirm-button:hover, button.anygift-payment-form__main-button:hover, button.anygift-order-form__main-button:hover, button.anygift-preview-modal-receive-button:hover, button.anygift-message-card-preview-modal__e-gift-button:hover {
    background: white;
    border: 2px solid var(--ag-brand);
    color: var(--ag-brand);
    --tw-gradient-to: inherit;
}

div[data-anygift] {
    margin: 1em 0;
    width: 100%;
}

div.anygift-gift-ui__container {
    width: 100%;
}

button.hover\:ag-opacity-75:hover {
    opacity: inherit;
}

button.ag-bg-anygift-gray-100:hover {
    background: white;
    border: 1px solid black;
    color: black;
}

.ag-fixed div {
    bottom: 2px;
    font-size: .7em;
    line-height: 1;
    position: relative;
    text-transform: lowercase;
}

.ag-fixed img {
    bottom: 3px;
    position: relative;
}

.ag-fixed {
    bottom: 60px;
    height: 50px;
    right: 20px;
    width: 50px;
    z-index: 1;
}

button.ag-to-anygift-darkgrad-green {
    background-color: var(--ag-brand);
    border-radius: 50px;
    font-size: var(--ag-br-font);
    font-weight: inherit; /*mcjp specific*/
    --tw-gradient-from: inherit;
    --tw-gradient-to: inherit;
}

button.ag-to-anygift-darkgrad-green:hover {
    background-color: var(--ag-cta-hover-bc);
    border: 1px solid;
    border-color: var(--ag-cta-hover-color);
    border-radius: 50px;
    border-style: inherit;
    color: var(--ag-cta-hover-color);
}

button.anygift-child-product-modal__check-button {
    border-color: var(--ag-brand);
    border-radius: inherit;
    border-radius: 50px;
    color: var(--ag-brand);
}

button[disabled], html input[disabled] {
    border-radius: inherit;
}

textarea.anygift-order-form__massage-field__text-area {
    border: 1px solid gray;
    color: black;
}

textarea.anygift-order-form__massage-field__text-area::placeholder {
    background: inherit;
    color: #777777;
}

.anygift-step-modal__back-button__icon:hover, .anygift-step-modal__back-button__icon, button.anygift-explain-modal__close-button__top:hover, button.anygift-explain-modal__close-button__top, button.anygift-step-modal__close-button:hover, button.anygift-step-modal__close-button {
    background: inherit;
    color: #000000;
}

.ag-justify-between {
    align-items: center;
}

.anygift-step-modal__back-button, button.anygift-step-modal__close-button {
    height: 50px;
}


label.chakra-checkbox {
    align-items: center;
    -webkit-box-align: center;
    cursor: pointer;
    display: inline-flex;
    position: relative;
    vertical-align: top;
}

button.anygift-child-product-modal__preview-close-button, button.anygift-about-modal__close-button__bottom, button.ag-border-anygift-gray-300, .anygift-preview-modal-close-button, button.ag-border-anygift-gray-300, .anygift-preview-modal-close-button:hover, button.anygift-message-card-preview-modal__close-button, button.anygift-message-card-preview-modal__close-button:hover, button.anygift-preview-modal-close-button, button.anygift-about-modal__close-button__bottom, button.anygift-about-modal__close-button__bottom:hover {
    background-color: inherit;
    border-color: gray;
    border-radius: inherit;
    border-width: 0 0 1px 0;
    color: gray;
    line-height: 1;
    --tw-gradient-from: inherit;
    --tw-gradient-to: inherit;
    width: 100%;
}

button.anygift-product-box-detail-toggle-button:hover, button.anygift-product-box-detail-toggle-button {
    color: black;
}

span.anygift-step-modal__header__title {
    font-feature-settings: "palt" 1;
    font-size: 1rem;
}

button.anygift-floating-cart__button {
    background-color: var(--ag-brand);
    --tw-gradient-from: inherit;
}

/* 「eギフトで選べるカラー」内の非表示設定 */
.ag-text-left.ag-flex.ag-flex-col.ag-gap-7.ag-bg-anygift-gray-100.ag-px-2\.5.ag-pt-2.ag-pb-6.ag-rounded-3xl.anygift-child-product-modal__wrapper:before {
    border-bottom: thin solid gray;
    color: gray;
    content: "eギフトで選べるカラー";
    display: block;
    font-weight: 700;
    padding: 1em;
    text-align: center;
}

.ag-text-left.ag-text-sm.ag-flex.ag-flex-col.ag-gap-3.ag-px-5.anygift-child-product-modal__select-message-wrapper {
    display: none;
}

.ag-text-left.ag-flex.ag-h-\[30px\].ag-justify-center.ag-gap-6.ag-text-\[15px\].ag-font-bold {
    display: none;
}

/*svg*/
.ag-text-left.ag-flex.ag-flex-col.ag-items-center.anygift-explain-modal__section img {
    filter: invert(0) sepia(0) saturate(0) hue-rotate(0) brightness(95%) contrast(95%);
}

@media screen and (max-width: 768px) {
    button.ag-to-anygift-darkgrad-green, button.anygift-child-product-modal__check-button {
        display: block;
        margin: 0 6px;
        max-width: 97%;
        width: 100%;
    }
}