/*
 Theme Name:   Arimeda Theme Child
 Template:     arimeda-theme
 Version:      1.0
*/

@import url("../arimeda-theme/style.css");
/* 親テーマのCSSを読み込む */

/* ------------------------------
   ❁ CART PAGE STYLE (Arimeda)
   ------------------------------ */
/* 全体の余白や雰囲気 */
.woocommerce-cart {
    margin-top: 150px;
}

.woocommerce-cart-title {
    display: block;
    color: var(--color-primary);
    text-align: center;
    font-weight: 600;
    background-color: var(--color-bg-light);
    box-shadow: 0 4px 12px var(--color-shadow);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 15px;
}

.woocommerce-cart-form,
.cart-collaterals {
    margin: 40px auto;
    padding: 0 20px;
}

/* カートテーブル全体 */
.woocommerce-cart table.cart {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-light);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--color-shadow);
    overflow: hidden;
}

/* ヘッダー */
.woocommerce-cart table.cart th {
    background: var(--color-primary);
    color: var(--color-text-light);
    padding: 16px;
    font-weight: bold;
    text-align: left;
}

/* 各行 */
.woocommerce-cart table.cart td {
    padding: 16px;
    border-bottom: 1px solid var(--color-accent);
    color: var(--color-text-main);
}

/* 商品名リンク */
.woocommerce-cart table.cart .product-name a {
    color: var(--color-primary);
    font-weight: 600;
}

/* 数量ボタン */
.woocommerce .quantity input.qty {
    width: 60px;
    padding: 8px;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
}

/* 削除ボタン（×） */
.woocommerce a.remove {
    color: var(--color-secondary) !important;
    font-size: 25px;
    transition: all 0.3s ease;
}

.woocommerce a.remove:hover {
    background-color: var(--color-secondary);
    transition: all 0.3s ease;
}

/* 更新ボタンやクーポンエリア */
.woocommerce-cart .cart-actions button,
.woocommerce-cart .actions .button {
    background: var(--color-primary);
    color: var(--color-text-light);
    padding: 12px 20px;
    border-radius: 10px;
    transition: 0.3s;
}

.woocommerce-cart .cart-actions button:hover {
    background: var(--color-secondary);
}

/* 合計金額ボックス */
.cart_totals {
    background: var(--color-primary);
    color: var(--color-text-light);
    padding: 24px;
    border-radius: 14px;
    box-shadow: 0 4px 12px var(--color-shadow);
}

.cart_totals h2 {
    margin-bottom: 16px;
}


/* 合計テーブル */
.cart_totals table th,
.cart_totals table td {
    background-color: var(--color-bg-light);
    color: var(--color-text-sub);
    padding: 12px 0;
    border-top: none;
}

/* チェックアウトボタン */
.wc-proceed-to-checkout a.checkout-button {
    background: var(--color-secondary) !important;
    border-radius: 10px;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--color-text-sub) !important;
    transition: all 0.3s ease;
}


/* ==========================================
   ❁ Arimeda CHECKOUT PAGE STYLE
   ========================================== */

.woocommerce-checkout {
    margin-top: 20px;
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.wc-block-components-form {
    background: var(--color-bg-light);
    color: var(--color-text-main);
    margin-bottom: 20px;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--color-shadow);
}

/* ------------------------------
   タイトル
------------------------------ */
.wc-block-components-title.wc-block-components-title {
    display: block;
    color: var(--color-bg-light);
    text-align: center;
    font-weight: 600;
    background-color: var(--color-primary);
    border-radius: 12px !important;
    padding: 10px !important;
    margin-bottom: 15px !important;
}

/* ------------------------------
   注文内容（order review）
------------------------------ */
.wp-block-woocommerce-checkout-order-summary-block {
    background: var(--color-bg-light);
    color: var(--color-text-main);
    margin-bottom: 20px;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--color-shadow);
}


/* ------------------------------
   注文ボタン
------------------------------ */
.wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
    width: 100%;
    padding: 16px;
    margin-top: 20px;
    background: var(--color-secondary);
    color: var(--color-text-light);
    border-radius: 10px;
    border: none;
    font-size: 18px;
    font-weight: 700;
    transition: 0.3s ease;
    text-align: center;
}

.wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
    background: var(--color-text-sub);
    cursor: pointer;
}

.wc-block-components-checkout-return-to-cart-button {
    transition: all 0.3s ease;
}

.wc-block-components-checkout-return-to-cart-button:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.woocommerce-message {
    border-top-color: var(--color-primary);
    background-color: var(--color-bg-light) !important;
    margin-top: 10px;
}

.woocommerce-message::before {
    color: var(--color-primary);
}

/* ==========================================
   ❁ Arimeda CART-EMPTY PAGE STYLE
   ========================================== */
/* ===== 空カート画面 カスタム ===== */

.woocommerce-cart .cart-empty,
.woocommerce-cart .return-to-shop {
    text-align: center;
}

/* 空メッセージのラップ */
.woocommerce-cart .cart-empty {
    background: var(--color-bg-light);
    padding: 60px 20px;
    border-top: var(--color-primary) solid 5px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(64, 224, 208, 0.15);
    max-width: 680px;
    margin: 20px auto 30px;
}

/* 空メッセージの文字 */
.woocommerce-cart .cart-empty h1,
.woocommerce-cart .cart-empty p {
    color: var(--color-text-main);
    font-weight: 600;
    margin: 6px 0;
}

.woocommerce-info::before {
    color: var(--color-primary);
}

/* “ショップに戻る” ボタンデザイン */
.return-to-shop .button,
.return-to-shop .wc-backward {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary) !important;
    color: var(--color-text-light) !important;
    padding: 12px 22px;
    margin-bottom: 20px !important;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: none;
    box-shadow: 0 3px 6px rgba(64, 224, 208, 0.3);
    transition: 0.3s ease;
}

/* ホバー */
.return-to-shop .button:hover,
.return-to-shop .wc-backward:hover {
    background: var(--color-secondary) !important;
    color: var(--color-text-light) !important;
    box-shadow: 0 4px 12px rgba(205, 175, 0, 0.35);
    transform: translateY(-2px);
}

/* スマホ調整 */
@media screen and (max-width: 768px) {
    .woocommerce-cart .cart-empty {
        padding: 40px 16px;
        margin: 30px 10px;
    }
}


/* ===============================
   Thankyou Page Styling
   =============================== */

.woocommerce-order {
    max-width: var(--max-width);
    margin: 40px auto;
    padding: 20px 20px 60px;
}

/* ★ 上部メッセージ（order-received.php の thank you テキストに効く） */
.woocommerce .woocommerce-order-received,
.woocommerce .woocommerce-thankyou-order-received,
.woocommerce .woocommerce-notice,
.woocommerce .woocommerce-thankyou-order-failed {
    background: var(--color-primary);
    padding: 18px 22px;
    border-radius: 12px;
    font-weight: 700;
    color: var(--color-text-light) !important;
    margin-bottom: 30px;
    box-shadow: 0 3px 10px var(--color-shadow);
}

/* ★ 失敗メッセージだけ別色 */
.woocommerce .woocommerce-thankyou-order-failed {
    background: var(--color-secondary);
    color: var(--color-text-main) !important;
}

/* 注文概要ボックス */
.woocommerce .woocommerce-thankyou-order-details {
    background: var(--color-bg-light);
    padding: 22px 24px;
    border-radius: 14px;
    box-shadow: 0 3px 10px var(--color-shadow);
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 30px;
}

.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details {
    background: var(--color-bg-light);
    padding: 22px 24px;
    border-radius: 14px;
    box-shadow: 0 3px 10px var(--color-shadow);
}

/* ラベルの見え方 */
.woocommerce .woocommerce-thankyou-order-details li {
    list-style: none;
    font-size: 14px;
    color: var(--color-text-sub);
}

.woocommerce .woocommerce-thankyou-order-details strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-top: 4px;
}

/* ボタン（Return to shop / Pay / My account） */
.woocommerce .return-to-shop a,
.woocommerce .woocommerce-thankyou-order-failed-actions a,
.woocommerce .woocommerce-order a.button {
    background: var(--color-primary);
    color: var(--color-text-light) !important;
    padding: 10px 18px;
    border-radius: 10px;
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    margin-top: 10px;
    transition: 0.3s ease;
    box-shadow: 0 2px 6px var(--color-shadow);
}

/* ★ Hover */
.woocommerce .return-to-shop a:hover,
.woocommerce .woocommerce-thankyou-order-failed-actions a:hover,
.woocommerce .woocommerce-order a.button:hover {
    background: var(--color-secondary) !important;
    color: var(--color-text-main) !important;
    border-color: var(--color-secondary);
}

/* 空状態 / 再購入促し用のpタグ */
.woocommerce .return-to-shop {
    text-align: center;
    margin-top: 30px;
}

/* 画面幅が狭いとき */
@media screen and (max-width: 768px) {
    .woocommerce .woocommerce-order {
        padding: 10px 15px 40px;
    }

    .woocommerce .woocommerce-thankyou-order-details {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .woocommerce .woocommerce-thankyou-order-details strong {
        font-size: 15px;
    }
}

/* ===============================
   Thankyou Page 問い合わせフォーム
   =============================== */
.order-inquiry-section {
    margin-top: 40px;
    padding: 24px;
    background: var(--color-bg-light);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--color-shadow);
}

.order-inquiry-section h2 {
    font-size: 20px;
    margin-bottom: 16px;
    color: var(--color-text-main);
    font-weight: 700;
}

.order-inquiry-form textarea,
.order-inquiry-form input[type="email"] {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-text-sub);
    font-size: 14px;
    margin-top: 4px;
}

.order-inquiry-form .button.inquiry-submit {
    background: var(--color-primary);
    color: var(--color-text-light);
    font-weight: bold;
    padding: 10px 18px;
    border-radius: 8px;
    margin-top: 12px;
    transition: 0.3s;
}

.order-inquiry-form .button.inquiry-submit:hover {
    color: var(--color-text-light);
    background: var(--color-secondary);
}

.order-inquiry-success {
    background: var(--color-primary);
    color: var(--color-text-light);
    padding: 12px 16px;
    margin-top: 20px;
    border-radius: 8px;
    font-weight: 600;
}