/* ============================================================
   famfam チェックアウト UI カスタマイズ v3
   適用場所: WordPress管理画面 > 外観 > カスタマイズ > 追加CSS
   ============================================================ */

/* ----------------------------------------------------------
   既存Elementorカスタムから移行（Elementor側は削除してOK）
   ---------------------------------------------------------- */
.wpg-button.wpg-button-login.line { display: none; }
header.tg-page-header.tg-page-header--both-left { padding-top: 10px; }

/* ----------------------------------------------------------
   1. クーポン・ポイントエリア
   ---------------------------------------------------------- */

/* 「クーポンをお持ちですか？ここをクリック〜」行を非表示 */
.woocommerce-form-coupon-toggle {
    display: none !important;
}

/* クーポンフォーム（常時展開・説明文非表示） */
.woocommerce-form-coupon {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    margin-bottom: 0 !important;
}

/* 「クーポンコードをお持ちの場合は〜」説明文を非表示 */
.woocommerce-form-coupon > p:first-of-type {
    display: none !important;
}

/* クーポンフォーム内のform-row（姓名グリッドと干渉しないよう個別指定） */
.woocommerce-form-coupon .form-row {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
}
.woocommerce-form-coupon .form-row-first,
.woocommerce-form-coupon .form-row-last {
    grid-column: unset !important;
}

input#coupon_code {
    background-color: #fff !important;
    width: 180px !important;
    height: 44px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.woocommerce-form-coupon button[name="apply_coupon"] {
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
}

/* .clear divを非表示 */
.woocommerce-form-coupon .clear { display: none !important; }

/* ポイントエリア */
.custom_point_checkout.woocommerce-info.wps_wpr_checkout_points_class {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background-color: transparent !important;
    border: none !important;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
}

/* ポイントエリアの余計なbr・p要素を隠す */
.custom_point_checkout.woocommerce-info.wps_wpr_checkout_points_class br {
    display: none !important;
}
.custom_point_checkout.woocommerce-info.wps_wpr_checkout_points_class > p:empty {
    display: none !important;
}

/* 「25ポイント = ¥25」の説明を1行で表示 */
.custom_point_checkout.woocommerce-info.wps_wpr_checkout_points_class > p {
    width: 100%;
    font-size: 12px;
    color: #888;
    margin: 0;
    padding: 0;
}

/* ポイントのbeforeアイコン消去 */
.custom_point_checkout.woocommerce-info.wps_wpr_checkout_points_class::before,
.woocommerce-info.wps_wpr_checkout_points_class::before {
    display: none !important;
    font-size: 0 !important;
    content: '' !important;
}

input#wps_cart_points {
    width: 180px !important;
    max-width: 180px !important;
    height: 44px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}
input#wps_cart_points::placeholder { color: #aaa !important; }

button#wps_cart_points_apply {
    width: auto !important;
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
}

/* クーポン・ポイント全体をカードで囲む */
.woocommerce-checkout .woocommerce-form-coupon,
.woocommerce-checkout .custom_point_checkout.woocommerce-info {
    background: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
}

/* ----------------------------------------------------------
   2. 姓・名を横並びに
      クーポンの form-row-first/last と干渉しないよう
      billing/shipping フィールドのみに限定
   ---------------------------------------------------------- */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
}

/* 姓・名は1カラムずつ */
.woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-shipping-fields__field-wrapper > .form-row-first,
.woocommerce-shipping-fields__field-wrapper > .form-row-last {
    grid-column: span 1 !important;
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    clear: none !important;
    box-sizing: border-box !important;
}

/* それ以外は全幅 */
.woocommerce-billing-fields__field-wrapper > p:not(.form-row-first):not(.form-row-last),
.woocommerce-shipping-fields__field-wrapper > p:not(.form-row-first):not(.form-row-last) {
    grid-column: span 2 !important;
    float: none !important;
    width: 100% !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* clearfix無効化 */
.woocommerce-billing-fields__field-wrapper::after,
.woocommerce-shipping-fields__field-wrapper::after {
    content: none !important;
}

/* 郵便番号・都道府県も横並びに */
#billing_postcode_field,
#shipping_postcode_field {
    grid-column: span 1 !important;
    float: none !important;
    width: 100% !important;
}
#billing_state_field,
#shipping_state_field {
    grid-column: span 1 !important;
    float: none !important;
    width: 100% !important;
}

/* 360px以下は縦積み */
@media (max-width: 360px) {
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: 1fr !important;
    }
    .woocommerce-billing-fields__field-wrapper > p,
    .woocommerce-shipping-fields__field-wrapper > p {
        grid-column: span 1 !important;
    }
}

/* ----------------------------------------------------------
   3. 国フィールドを非表示（日本固定）
   ---------------------------------------------------------- */
#billing_country_field,
#shipping_country_field {
    display: none !important;
}

/* ----------------------------------------------------------
   4. フォームフィールド全体のスタイル
   ---------------------------------------------------------- */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row select {
    height: 46px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 15px;
    line-height: 1;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row input[type="text"]:focus,
.woocommerce-checkout .form-row input[type="email"]:focus,
.woocommerce-checkout .form-row input[type="tel"]:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: #6ec1e4 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px #6ec1e41c !important;
}

/* ラベル */
.woocommerce-checkout .form-row label {
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-bottom: 5px;
    display: block;
}
.woocommerce-checkout .form-row label .required { color: #e44; }

/* スマホ: iOSズーム防止 */
@media (max-width: 768px) {
    .woocommerce-checkout .form-row input.input-text,
    .woocommerce-checkout .form-row input[type="text"],
    .woocommerce-checkout .form-row input[type="email"],
    .woocommerce-checkout .form-row input[type="tel"],
    .woocommerce-checkout .form-row input[type="number"],
    .woocommerce-checkout .form-row select,
    input#coupon_code,
    input#wps_cart_points {
        font-size: 16px !important;
        height: 48px !important;
    }
}

/* ----------------------------------------------------------
   5. セクション見出し
   ---------------------------------------------------------- */
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-checkout #payment > h3,
.woocommerce-additional-fields > h3,
h3#ship-to-different-address,
h3#order_review_heading {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* ----------------------------------------------------------
   6. セクションをカード風に
   ---------------------------------------------------------- */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-checkout #payment,
.woocommerce-additional-fields {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px 20px 12px !important;
    margin-bottom: 14px;
}

@media (max-width: 768px) {
    .woocommerce-billing-fields,
    .woocommerce-shipping-fields,
    .woocommerce-checkout #payment,
    .woocommerce-additional-fields {
        padding: 16px 14px 10px !important;
    }
}

/* ----------------------------------------------------------
   7. 支払い方法
   ---------------------------------------------------------- */
.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.woocommerce-checkout #payment ul.payment_methods li {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 6px;
    transition: border-color 0.2s, background 0.2s;
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
    border-color: #6ec1e4;
    background: #6ec1e42e;
}
.woocommerce-checkout #payment ul.payment_methods li label {
    font-size: 14px;
    font-weight: 500;
}

/* ----------------------------------------------------------
   8. 注文ボタン
   ---------------------------------------------------------- */
.woocommerce-checkout #payment #place_order {
    width: 100%;
    height: 54px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    background-color: #6ec1e4 !important;
    border-color: #6ec1e4 !important;
    letter-spacing: 0.03em;
    transition: background-color 0.2s, transform 0.1s;
}
.woocommerce-checkout #payment #place_order:hover {
    background-color: #59a7c9 !important;
    border-color: #59a7c9 !important;
}
.woocommerce-checkout #payment #place_order:active { transform: scale(0.98); }

.woocommerce-privacy-policy-text {
    font-size: 10px !important;
}

/* ----------------------------------------------------------
   9. スマホ: 元の表示順を維持
      ご注文者様の詳細 → 配送先 → 配達希望日時 → ご注文
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .woocommerce-checkout .col2-set {
        display: flex !important;
        flex-direction: column !important;
    }
    .woocommerce-checkout .col2-set .col-1 { order: 1 !important; }
    .woocommerce-checkout .col2-set .col-2 { order: 2 !important; }
    .woocommerce-checkout #customer_details { order: 1 !important; }
    .woocommerce-checkout #order_review {
        order: 2 !important;
        display: block !important;
    }
}


/* ----------------------------------------------------------
   10. ご注文内容テーブル
   ---------------------------------------------------------- */
.woocommerce-checkout-review-order-table {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
}
.woocommerce-checkout-review-order-table thead th {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.06em;
    padding: 0 0 10px;
    border-bottom: 1px solid #eee;
}
.woocommerce-checkout-review-order-table .cart_item td {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    vertical-align: top;
}
.woocommerce-checkout-review-order-table .order-total td strong {
    font-size: 17px;
    font-weight: 700;
}