/* ===================================================
   メールマガジン配信カード
   =================================================== */
.bsfine-ec .newsletter-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bsfine-ec .newsletter-card--in-form {
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.bsfine-ec .newsletter-card__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bsfine-ec .newsletter-card__title {
    font-size: 14px;
    font-weight: 700;
    color: #444;
}

.bsfine-ec .newsletter-card__desc {
    font-size: 12px;
    color: #666;
}

/* ===================================================
   トグルスイッチ（純 CSS で :checked と連動）
   =================================================== */

.bsfine-ec .toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.bsfine-ec .toggle {
    width: 48px;
    height: 28px;
    border-radius: 14px;
    background: #ccc;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.bsfine-ec .toggle__knob {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: left 0.2s ease;
}

.bsfine-ec .toggle-label input:checked ~ .toggle {
    background: #ef4f41;
}

    .bsfine-ec .toggle-label input:checked ~ .toggle .toggle__knob {
        left: 23px;
    }

/* ===================================================
   ユーティリティ
   =================================================== */

.bsfine-ec .is-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===================================================
   Cart/Index.cshtml 表示調整
   =================================================== */

/* 削除ボタンを商品カード左下に配置 */
.bsfine-ec .product-card.product-card--in-card {
    position: relative;
    padding-bottom: 40px;
}

    .bsfine-ec .product-card.product-card--in-card .delete-btn--inline {
        position: absolute;
        left: 16px;
        bottom: 8px;
        margin-top: 0;
    }

/* 数量欄: モック準拠の無枠 + 1 文字分のコンパクト幅 */
.bsfine-ec .qty-num {
    width: 32px;
    border: 0;
    background: transparent;
    padding: 0;
}

/* 商品説明（.product-card__note）のフォントサイズを強制
   TODO: bs-form.css:960 の 11px 指定が継承で上書きされる
   現象の根本原因（カスケード元）を特定後、!important を撤去する */
.bsfine-ec .product-card__note {
    font-size: 11px !important;
}

/* CTA ボタン（<a>/<button> 両対応）の文字色を白に強制 */
.bsfine-ec a.btn--primary,
.bsfine-ec a.btn--primary:hover,
.bsfine-ec a.btn--primary:focus,
.bsfine-ec a.btn--primary:active,
.bsfine-ec button.btn--primary,
.bsfine-ec button.btn--primary:hover,
.bsfine-ec button.btn--primary:focus,
.bsfine-ec button.btn--primary:active {
    color: #fff;
    text-decoration: none;
}

/* <a> に href なしの link-subtle / btn--primary 系でカーソルを pointer に。
   Confirm 画面の reCAPTCHA ボタンは <button> 要素のため button.btn--primary / button.btn--fixed も両対応にする */
.bsfine-ec a.link-subtle,
.bsfine-ec a.btn--primary,
.bsfine-ec a.btn--fixed,
.bsfine-ec button.btn--primary,
.bsfine-ec button.btn--fixed {
    cursor: pointer;
}

/* #cms_info 内の不可視メッセージ要素は領域を確保しない（page-alert の padding で空の 28px 余白が出るのを防ぐ） */
.bsfine-ec #cms_info #cart_msg.invisible {
    display: none;
}

.bsfine-ec #cms_info #cms_coupon_err_msg:empty,
.bsfine-ec #cms_info #cms_point_err_msg:empty {
    display: none;
}

/* コース選択 bootstrap-select の dropdown-toggle ボタン文字サイズを調整 */
.bsfine-ec .bootstrap-select .btn.dropdown-toggle {
    font-size: 14px;
    height: auto;
    padding: 6px 12px;
}

/* コース選択 selectpicker の表示文字サイズと背景色を bsfine-ec スコープで上書き。
   user_data/css/ec8_system.css の .filter-option-inner-inner ルール（font-size: 18px / margin-bottom: 1rem）が
   詳細度で勝つため、内側要素に同等以上の詳細度で当てる。 */
.bsfine-ec .bootstrap-select button .filter-option .filter-option-inner .filter-option-inner-inner {
    font-size: 14px;
    margin-bottom: 0;
}

.bsfine-ec .bootstrap-select .btn.dropdown-toggle {
    background-color: #f5f5f5;
}

/* AmazonPay SDK ボタンコンテナは Amazon ブランドガイドライン準拠で SDK の自然サイズを尊重。max-width のみで「細長すぎ」防止、min-height は SDK 側に任せる */
.bsfine-ec #AmazonPayButton {
    max-width: 480px;
    margin: 0 auto;
}

/* 送料無料告知 .order-row--note のテキスト開始位置を合計行と揃える（flex 左寄せを明示） */
.bsfine-ec .order-row.order-row--note {
    justify-content: flex-start;
    padding-left: 0;
    text-indent: 0;
}

.bsfine-ec .order-row--note .order-row__label {
    flex: 1;
    padding-left: 0;
    margin-left: 0;
    text-align: left;
    text-indent: 0;
}

/* ===================================================
   Order/Index.cshtml 新デザイン適用
   =================================================== */

.bsfine-ec .rank-up-notice {
    border-left: 4px solid #d94232;
}

.bsfine-ec .delivery-info-card,
.bsfine-ec .receipt-card,
.bsfine-ec .order-summary-column .card {
    width: 100%;
}

.bsfine-ec .order-page-flow,
.bsfine-ec .order-main-column,
.bsfine-ec .order-summary-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.bsfine-ec .order-summary-column {
    gap: 4px;
}

.bsfine-ec .section-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bsfine-ec .section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bsfine-ec .section-hdr__title,
.bsfine-ec .text-strong {
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.bsfine-ec .section-edit-link,
.bsfine-ec .text-link-button {
    border: 0;
    background: transparent;
    color: #2468b2;
    font-size: 13px;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.bsfine-ec .text-link-blue {
    color: #2468b2;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
}

.bsfine-ec .text-link-blue--center {
    align-self: center;
}

.bsfine-ec .text-link-blue--padded {
    padding-top: 4px;
}

.bsfine-ec .addr-box {
    background: #f7f7f7;
    border-radius: 8px;
    padding: 12px;
}

    .bsfine-ec .addr-box p {
        margin: 0 0 4px;
        line-height: 1.5;
    }

        .bsfine-ec .addr-box p:last-child {
            margin-bottom: 0;
        }

.bsfine-ec .addr-box__name {
    font-weight: 700;
}

.bsfine-ec .divider {
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin: 16px 0;
}

.bsfine-ec .clickable-label {
    display: block;
    cursor: pointer;
}

.bsfine-ec .radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.bsfine-ec .radio-option--selected {
    border-color: #d94232;
    background: #fff7f5;
}

.bsfine-ec .clickable-label input[type="radio"]:checked + .radio-option {
    border-color: #d94232;
    background: #fff7f5;
}

.bsfine-ec .radio-dot {
    width: 16px;
    height: 16px;
    border: 2px solid #aaa;
    border-radius: 50%;
    flex: 0 0 auto;
}

.bsfine-ec .radio-dot--selected {
    border-color: #d94232;
    box-shadow: inset 0 0 0 3px #fff;
    background: #d94232;
}

.bsfine-ec .clickable-label input[type="radio"]:checked + .radio-option .radio-dot {
    border-color: #d94232;
    box-shadow: inset 0 0 0 3px #fff;
    background: #d94232;
}

.bsfine-ec .delivery-method-option input[type="radio"]:not(:checked) + .radio-option {
    border-color: #ddd;
    background: #fff;
}

    .bsfine-ec .delivery-method-option input[type="radio"]:not(:checked) + .radio-option .radio-dot {
        border-color: #aaa;
        box-shadow: none;
        background: transparent;
    }

.bsfine-ec .radio-option__label {
    font-size: 14px;
    color: #333;
}

.bsfine-ec .radio-option__note {
    margin: 4px 0 10px 26px;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

.bsfine-ec .payment-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bsfine-ec .payment-option-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bsfine-ec .payment-option__edit {
    align-self: flex-start;
    margin-left: 26px;
}

.bsfine-ec .payment-detail {
    margin-left: 26px;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
}

    .bsfine-ec .payment-detail.paymentdd {
        max-height: none;
        overflow: visible;
        opacity: 1;
        padding: 8px 0 0;
    }

.bsfine-ec .payment-detail__text {
    margin: 0;
}

.bsfine-ec .payment-detail__text--red {
    color: #d94232;
}

/* 適用中ボックスを v4 モック準拠（common.css L1953-1973）に揃える */
.bsfine-ec .coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #f4caca;
    border-radius: 6px;
    background: #fff8f8;
}

.bsfine-ec .coupon-applied__code {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

.bsfine-ec .coupon-control-row {
    align-items: center;
}

    .bsfine-ec .coupon-control-row .form-input {
        height: 48px;
    }

    .bsfine-ec .coupon-control-row .btn {
        height: 48px;
        margin: 0;
        border-radius: 6px;
        font-size: 13px;
    }

    .bsfine-ec .coupon-control-row .btn--postal,
    .bsfine-ec .coupon-control-row .btn--outline-red {
        width: auto;
        min-width: 112px;
        padding: 0 12px;
        white-space: nowrap;
    }

.bsfine-ec .coupon-note {
    margin: 0 0 4px;
    line-height: 1.6;
}

.bsfine-ec .card-note--red {
    color: #d94232;
}

.bsfine-ec .setting-panel {
    background: #f7f7f7;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.bsfine-ec .delivery-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.bsfine-ec .delivery-card__head,
.bsfine-ec .delivery-card__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bsfine-ec .delivery-card__title {
    font-weight: 700;
}

.bsfine-ec .delivery-card__note {
    font-size: 12px;
    color: #666;
}

.bsfine-ec .delivery-items {
    margin-top: 12px;
}

.bsfine-ec .mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 6px;
    background: #333;
    color: #fff;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

    .bsfine-ec .mini-btn:hover,
    .bsfine-ec .mini-btn:focus {
        color: #fff;
        text-decoration: none;
    }

.bsfine-ec .mini-btn--outline {
    background: #fff;
    border: 1px solid #333;
    color: #333;
}

    .bsfine-ec .mini-btn--outline:hover,
    .bsfine-ec .mini-btn--outline:focus {
        color: #333;
    }

.bsfine-ec .mini-btn--muted {
    background: #fff;
    border: 1px solid #ccc;
    color: #555;
}

    .bsfine-ec .mini-btn--muted:hover,
    .bsfine-ec .mini-btn--muted:focus {
        color: #555;
    }

.bsfine-ec .mini-btn.wrapping-btn {
    background: #fff;
    border: 1px solid #d7d7d7;
    color: #333;
}

    .bsfine-ec .mini-btn.wrapping-btn:hover,
    .bsfine-ec .mini-btn.wrapping-btn:focus {
        background: #f7f7f7;
        color: #333;
    }

.bsfine-ec .item-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.bsfine-ec .item-card__img {
    width: 88px;
    height: 88px;
    object-fit: cover;
}

.bsfine-ec .item-card__body {
    min-width: 0;
}

.bsfine-ec .item-card__title,
.bsfine-ec .item-card__meta {
    margin: 0 0 4px;
    line-height: 1.5;
}

.bsfine-ec .item-card__title {
    font-weight: 700;
}

.bsfine-ec .item-card__note {
    margin: 0 0 4px;
    font-size: 12px;
    color: #666;
}

.bsfine-ec .item-card__actions {
    margin-top: 8px;
}

.bsfine-ec .item-card:last-child {
    border-bottom: 0;
}

.bsfine-ec .confirm-row--delivery-fee {
    margin-top: 12px;
}

.bsfine-ec .confirm-row__price {
    flex-shrink: 0;
    font-weight: 700;
}

.bsfine-ec .card__header--checkbox {
    cursor: pointer;
    gap: 8px;
}

.bsfine-ec .receipt-body--accordion,
.bsfine-ec .receipt-fields--accordion {
    display: none;
}

    .bsfine-ec .receipt-body--accordion.is-open,
    .bsfine-ec .receipt-fields--accordion.is-open {
        display: block;
    }

.bsfine-ec .accordion-trigger {
    margin-top: 12px;
}

.bsfine-ec .order-summary-column > .accordion-trigger {
    margin-top: 0;
}

.bsfine-ec .order-summary-column > .accordion-content.is-open {
    padding-top: 8px;
    padding-bottom: 8px;
}

.bsfine-ec .accordion-content .form-field:last-child {
    margin-bottom: 0;
}

/* クーポンアコーディオン展開時、説明文・注意文がスマホ幅で見切れないように上限を緩める */
.bsfine-ec #coupon-content.accordion-content.is-open {
    max-height: 480px;
}

.bsfine-ec .bootstrap-select.form-input,
.bsfine-ec .bootstrap-select.form-control {
    width: 100% !important;
}

    .bsfine-ec .bootstrap-select.form-input .btn.dropdown-toggle,
    .bsfine-ec .bootstrap-select.form-control .btn.dropdown-toggle {
        min-height: 40px;
        border: 1px solid #d7d7d7;
        border-radius: 6px;
        background: #fff;
    }

.bsfine-ec .notesList--native.form-input {
    height: 48px;
    min-height: 48px;
    margin-bottom: 0;
    padding: 0 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #444;
    font-size: 14px !important;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

@media (max-width: 767px) {
    /* .section-hdr は SP でも横並びを維持（モック準拠）。SP メディアクエリの縦並び指定対象から除外 */
    .bsfine-ec .delivery-card__head,
    .bsfine-ec .delivery-card__title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .bsfine-ec .item-card {
        grid-template-columns: 72px 1fr;
    }

    .bsfine-ec .item-card__img {
        width: 72px;
        height: 72px;
    }
}

/* ===================================================
   CSS-based modal styles
   =================================================== */

.bsfine-ec .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

    .bsfine-ec .modal-overlay.is-hidden {
        display: none;
    }

.bsfine-ec .modal-panel {
    background: #fff;
    border-radius: 8px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.bsfine-ec .modal-panel__header {
    padding: 16px 16px 8px;
    border-bottom: 1px solid #eee;
}

.bsfine-ec .modal-panel__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #444;
}

.bsfine-ec .modal-panel__desc {
    font-size: 13px;
    color: #666;
    margin: 4px 0 0;
}

.bsfine-ec .modal-panel__body {
    padding: 16px;
}

.bsfine-ec .modal-actions {
    display: flex;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid #eee;
}

.bsfine-ec .modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    padding: 4px 8px;
}

    .bsfine-ec .modal-close:hover {
        color: #444;
    }

.bsfine-ec .btn--modal-cancel,
.bsfine-ec .btn--modal-primary {
    flex: 1;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

.bsfine-ec .btn--modal-cancel {
    background: #f0f0f0;
    color: #444;
}

    .bsfine-ec .btn--modal-cancel:hover {
        background: #e0e0e0;
    }

.bsfine-ec .btn--modal-primary {
    background: #ef4f41;
    color: #fff;
}

    .bsfine-ec .btn--modal-primary:hover {
        background: #d8473b;
    }

/* ============================================================ */
/* 注文内容確認画面（Order/Confirm） */
/* ============================================================ */

/* 決済エラー表示エリア: 空要素時は非表示（外部 JS が .append() で内容追加すると自動表示） */
.bsfine-ec #cms_payment_err_msg:empty {
    display: none;
}

/* 読み取り専用ラジオ表示（border + padding、操作不可の見た目） */
.bsfine-ec .radio-option.is-readonly,
.bsfine-ec .radio-option--readonly {
    cursor: default;
    background: #fff;
    pointer-events: none;
}

/* Pay 払い注意書き（赤系・小フォント・左寄せ） */
.bsfine-ec .pay-caution {
    margin: 8px 0 0;
    color: #d8473b;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
}

/* 定期総額表示コンテンツの囲み（マスタ HTML の周囲余白を整える） */
.bsfine-ec .subscription-grossamount-content {
    margin: 12px 0;
}

/* 有効期限の月/年 select 縦並びレイアウト（実機確認#5 指摘1 対応・モック準拠で縦並び） */
.bsfine-ec .expiry-row {
    display: block;
}

    .bsfine-ec .expiry-row > select {
        display: block;
        width: 100%;
        max-width: 240px;
        margin-bottom: 4px;
    }

.bsfine-ec .expiry-row__unit {
    display: block;
    margin-bottom: 8px;
    color: #444;
    font-size: 14px;
}

/* 個人情報の第三者提供 textarea（実機確認#5 指摘2 対応）: form-input の height:48px override し
   rows 属性での高さ指定が効くようにする */
.bsfine-ec textarea.form-input {
    height: auto;
    min-height: 48px;
    padding: 8px 12px;
    line-height: 1.5;
    resize: vertical;
}

/* セキュリティコード説明画像（実機確認#5 指摘3 対応）: order.css の id 直接指定 width:596px が
   .bsfine-ec.page-wrapper の max-width:640px - card__body padding を超えて横にはみ出すのを防ぐ。
   max-width:100% で container 内に収め、background-size:contain で画像を要素内にアスペクト維持で表示。
   align は左寄せ。 */
.bsfine-ec #imgSecurityCode {
    max-width: 100%;
    background-size: contain !important;
    background-position: left top !important;
}

/* ============================================================ */
/* 決済 UI 統合 */
/* ============================================================ */

/* setting-panel 白背景 variant（クレジットカード情報フィールド群の囲み） */
.bsfine-ec .setting-panel--white {
    background: #fff;
    border: 1px solid #e5e5e5;
}

.bsfine-ec .setting-panel__title {
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 8px;
}

/* reCAPTCHA エリア（cta-stack 内に縦並び配置するための隙間調整） */
.bsfine-ec .recap-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

    .bsfine-ec .recap-area > #recap_widget:empty {
        display: none;
    }

/* privacy-policy-box（今後の ZEUS 同意ブロック移行先として定義のみ。本 Issue では未使用） */
.bsfine-ec .privacy-policy-box {
    background: #f7f7f7;
    border-radius: 8px;
    padding: 12px;
    max-height: 240px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.6;
}