/*--------------------------------------
  AnyGift 全体のコンテナ
--------------------------------------*/
.anygift-gift-ui__container {
    width: 100% !important;
    margin: 0.5em 0 !important;
}

/*--------------------------------------
  共通：AnyGift メインボタン（赤の基本形）
--------------------------------------*/
button.anygift-gift-ui__main-button {
    border-radius: 3px !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 10px !important;

    /* 元テキストを透明化（::before で差し替えるため） */
    color: transparent !important;

    /* 通常ボタンは赤（あなた指定） */
    background-color: #eb6465 !important;
    border-color: #eb6465 !important;

    /* テキスト中央揃え */
    /*display: flex !important;*/
    /*display: inline-flex !important;*/
    align-items: center !important;
    justify-content: center !important;
}

/*--------------------------------------
  共通の擬似テキスト
--------------------------------------*/
button.anygift-gift-ui__main-button::before {
    font-family: FontAwesome, sans-serif !important;
    content: "\f003  LINEやSNSで贈る";
    color: #fff !important;
    font-size: .93em;
    font-weight: bold;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}
/*--------------------------------------
  Tailwind グラデーション無効化
--------------------------------------*/
button.anygift-gift-ui__main-button.ag-from-anygift-darkgrad-blue,
button.anygift-gift-ui__main-button.ag-to-anygift-darkgrad-green {
    background-image: none !important;
    --tw-gradient-from: none !important;
    --tw-gradient-to: none !important;
    --tw-gradient-stops: none !important;
}
button.anygift-order-form__main-button,
button.anygift-payment-form__main-button,
button.anygift-payment-form__preview__confirm-button {
    background-color: #da393f !important;
    background-image: none !important;
    --tw-gradient-from: none !important;
    --tw-gradient-to: none !important;
    --tw-gradient-stops: none !important;
}
.ag-to-anygift-darkgrad-green {
    background-image: none !important;
    background-color: #da393f !important;
    border-color: #da393f !important;

    /* グラデーション変数も無効化 */
    --tw-gradient-from: #da393f !important;
    --tw-gradient-to: #da393f !important;
    --tw-gradient-stops: none !important;
}
.ag-from-anygift-darkgrad-blue{
    background-image: none !important;

    /* グラデーション変数も無効化 */
    --tw-gradient-from: #da393f !important;
    --tw-gradient-to: #da393f !important;
    --tw-gradient-stops: none !important;
}
/*--------------------------------------
  AnyGift のアクセントカラー（赤系）
--------------------------------------*/
.ag-text-anygift-key-green,
.ag-text-anygift-key {
    --tw-text-opacity: 1;
    color: rgb(235 100 101 / var(--tw-text-opacity, 1)) !important;
}
.ag-border-anygift-key-green {
    --tw-border-opacity: 1;
    border-color: rgb(235 100 101 / var(--tw-border-opacity, 1)) !important;
}
.ag-bg-anygift-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(235 100 101 / var(--tw-bg-opacity, 1)) !important;
}

/*--------------------------------------
  トグル（Chakra UI）の ON 色
--------------------------------------*/
.css-b0wmxn[aria-checked="true"],
.css-b0wmxn[data-checked] {
    background: #eb6465 !important;
    border-color: #eb6465 !important;
    color: #ffffff !important;
}

/*--------------------------------------
  ★ 特定ボタンのみ「元の薄ピンク」に戻す
--------------------------------------*/
.ag-text-left.ag-flex.ag-flex-col.ag-gap-2\.5 
    > button.anygift-gift-ui__main-button {
    background-color: #eecfcf !important;
    border-color: #eecfcf !important;
    /*display: flex !important;*/
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative;
}
.ag-text-left.ag-flex.ag-flex-col.ag-gap-2\.5 
    > button.anygift-gift-ui__main-button::before {
    display: block !important;
    width: 100% !important; 
    text-align: center !important;
    margin: 0 auto !important;
    position: relative !important;
    left: 0 !important;
}
.ag-bottom-\[20px\] {
    bottom: 100px !important;
}
/*--------------------------------------
  PC 用調整
--------------------------------------*/
@media screen and (min-width:641px), print {
    .anygift-gift-ui__container {
        margin: 10px 0 !important;
    }
    .sm\:ag-bottom-\[20px\] {
        bottom: 150px !important;
    }
}
