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

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

:root {
    --primary-teal: #4db1b3;
    --light-teal: #e0f2f1;
    --accent-gold: #e9c35d;
    --white: #ffffff;
    --text-brown: #622d18;
    --bg-light-yellow: #fff9e6;
    --header-height: 100px;
    --footer-height: 200px;
    --max-width: 1200px;
}

* {
    transition: background-color 0.3s, color 0.3s, transform 0.3s, opacity 0.3s;
}

a {
    text-decoration: none;
    color: var(--primary-teal);
}

/* ============================================================
   WooCommerce Cart Page - Arimeda Theme Colors
   ============================================================ */

.woocommerce {
    margin: calc(var(--header-height) + 30px) auto 0;
    max-width: var(--max-width);
    padding: 10px;
}

.woocommerce-cart-title {
    text-align: center;
    color: var(--white);
    border-bottom: var(--accent-gold) 3px solid;
    font-size: 2rem;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

/* 1. テーブル全体の枠組み */
.woocommerce-cart-form {
    margin-bottom: 40px;
}

table.shop_table.cart {
    width: 100% !important;
    /* 横幅を100%に強制 */
    table-layout: fixed;
    /* これを入れると列の幅を固定しやすくなります（お好みで） */
    display: table;
    /* blockではなく、本来のtableに戻す */
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--white);
    border: none;
}

form.woocommerce-cart-form {
    width: 100%;
}

/* ヘッダー部分（PC） */
table.cart thead tr,
table.cart tbody tr {
    display: table-row;
    /* デフォルトに戻す */
    width: auto;
}

table.cart thead th {
    background-color: var(--primary-teal);
    text-align: center;
    color: var(--white);
    padding: 20px 15px;
    font-weight: bold;
    border: none !important;
}

/* 2. 商品行のスタイル */
table.cart tbody td {
    text-align: center;
    padding: 20px 15px;
    vertical-align: middle;
    border-bottom: 1px solid var(--bg-light-yellow);
    color: var(--text-brown);
}

/* 商品画像（正方形に強制） */
.product-thumbnail img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 8px;
    border: 1px solid var(--bg-light-yellow);
}

/* 商品名 */
.product-name a {
    color: var(--primary-teal);
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-name a:hover {
    color: var(--accent-gold);
}

/* 削除ボタン (×) */
.product-remove a.remove {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold) !important;
    font-size: 18px;
    transition: all 0.3s;
}

.product-remove a.remove:hover {
    background-color: #e74c3c;
    /* 削除は警告色として赤系を維持 */
    color: var(--white) !important;
    border-color: #e74c3c;
}

/* 3. 数量入力とボタン */
.product-quantity .quantity input {
    width: 60px;
    padding: 8px;
    border: 1px solid var(--light-teal);
    border-radius: 4px;
    text-align: center;
    color: var(--text-brown);
}

/* アクションエリア（クーポンなど） */
table.cart td.actions {
    background-color: var(--white);
    padding: 20px;
}

.coupon {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.coupon input.input-text {
    width: 160px !important;
    border: 1px solid var(--accent-gold);
    border-radius: 4px;
    padding: 8px 12px;
}

/* ボタン共通設定 */
.woocommerce .button,
button[name="update_cart"] {
    background-color: var(--accent-gold) !important;
    color: var(--white) !important;
    border-radius: 4px;
    padding: 10px 20px !important;
    font-weight: bold;
    border: none;
}

.woocommerce .button:hover,
button[name="update_cart"]:hover {
	opacity:0.8 !important;
}

/* 4. カート合計エリア（右下） */
.cart-collaterals {
    display: flex;
    justify-content: flex-end;
    margin: 30px 0;
}

.cart_totals {
    width: 100%;
    max-width: 450px;
    background-color: var(--bg-light-yellow);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--accent-gold);
}

.cart_totals h2 {
    font-size: 1.4rem;
    color: var(--text-brown);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--accent-gold);
    display: inline-block;
}

.cart_totals table {
    width: 100%;
}

.cart_totals th {
    color: var(--text-brown);
    font-weight: bold;
}

.cart_totals td {
    text-align: right;
    color: var(--text-brown);
}

/* お支払いへ進むボタン */
.checkout-button {
    color: var(--white) !important;
    display: block;
    text-align: center;
    padding: 18px !important;
    border-radius: 50px !important;
    font-size: 1.1rem !important;
    font-weight: bold;
    margin-top: 25px;
    transition: all 0.3s !important;
}

.checkout-button:hover {
    background-color: var(--primary-teal) !important;
    transform: translateY(-3px);
}

.cart_totals a {
    text-decoration: none;
    color: var(--primary-teal);
}

.cart_totals a:hover {
    transform: translateY(-3px);
}

/* --- スマホ表示用 --- */
@media (max-width: 768px) {
    :root {
        --header-height: 30px;
        --max-width: 100%;
        /* 90%だと左右に隙間が空きすぎる場合があるため */
    }

    /* テーブルをブロック要素にして、画面内に収める */
    table.shop_table.cart,
    table.shop_table.cart thead,
    table.shop_table.cart tbody,
    table.shop_table.cart tr,
    table.shop_table.cart td {
        display: block !important;
        width: 100% !important;
        table-layout: auto !important;
        /* fixedを解除 */
    }

    /* ヘッダー（項目名）を隠す */
    table.shop_table.cart thead {
        display: none !important;
    }

    table.cart tbody td {
        text-align: right !important;
        /* ラベルを左、内容を右にするため */
        padding: 12px 15px !important;
        position: relative;
        border-bottom: 1px solid var(--light-teal);
    }

    /* 1. 商品画像のブロック調整 */
    table.cart td.product-thumbnail {
        text-align: center !important;
        padding-top: 30px !important;
        /* 上に少し余白 */
    }

    table.cart td.product-thumbnail::before {
        display: none;
        /* 画像のところには「商品：」ラベルを出さない */
    }

    /* 2. 各行のラベルと中身の配置を整える */
    table.cart tbody td {
        display: flex !important;
        /* 横並びにする */
        justify-content: space-between;
        /* ラベルを左、中身を右に */
        align-items: center;
        /* 垂直方向を中央に */
        text-align: right !important;
        padding: 15px !important;
        border-bottom: 1px solid var(--light-teal);
    }

    /* 3. ラベル（before要素）のスタイル */
    table.shop_table_responsive.cart td::before {
        content: attr(data-title);
        font-weight: bold;
        color: var(--primary-teal) !important;
        flex-shrink: 0;
        /* ラベルが潰れないように */
        margin-right: 10px;
    }

    /* 4. 数量入力欄の崩れを直す */
    .product-quantity .quantity {
        display: inline-block;
    }

    .product-quantity input.qty {
        width: 50px !important;
        height: 40px;
        padding: 0 !important;
        text-align: center;
        border: 1px solid var(--light-teal);
        border-radius: 4px;
        margin-left: auto;
        /* 右に寄せる */
    }

    /* 5. 商品名が長すぎる場合の調整 */
    .product-name a {
        white-space: normal;
        /* 改行を許可して崩れを防ぐ */
        font-size: 0.9rem;
        display: block;
        max-width: 200px;
        /* 必要に応じて調整 */
    }

    /* 6. 削除ボタンの配置（右上に固定する場合） */
    td.product-remove {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        justify-content: flex-end !important;
        /* ラベルがないので右寄せ */
    }

    td.product-remove::before {
        display: none;
    }

    .coupon {
        flex-direction: column;
    }

    .coupon>* {
        width: 100% !important;
    }

    /* カート合計エリアの調整 */
    .cart-collaterals {
        justify-content: center;
    }
}

/* ============================================================
   WooCommerce Checkout Page - Arimeda Theme
   ============================================================ */

/* 1. 全体レイアウト（PCでは2カラム、スマホで1カラム） */

.wc-block-checkout {
    margin: var(--header-height) auto 0;
    max-width: var(--max-width);
    padding: 10px;
    color: var(--text-brown);
}

.wc-block-components-main {
    background-color: var(--bg-light-yellow);
    border-radius: 20px;
    padding: 20px;
}

.wp-block-woocommerce-checkout-order-summary-block {
    background-color: var(--light-teal);
    border: none;
    border-radius: 20px;
    padding: 20px;
}

/* 2. セクション見出し (H3) */
.woocommerce-checkout h2 {
    color: var(--primary-teal) !important;
    font-weight: bold !important;
}

.woocommerce-checkout h3 {
    color: var(--text-brown);
    border-bottom: 2px solid var(--accent-gold);
    margin-bottom: 20px;
    font-size: 1.4rem;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
    font-weight: bold;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
    background-color: var(--accent-gold);
}

/* ============================================================
   Responsive Adjustments (Mobile)
   ============================================================ */
@media (max-width: 768px) {
    .woocommerce-checkout {
        flex-direction: column;
        gap: 20px;
    }

    .woocommerce-checkout .col2-set {
        min-width: 100%;
    }

    #order_review,
    #order_review_heading {
        flex: 1 1 auto;
        width: 100%;
    }

    /* スマホでは入力欄の余白を少し調整 */
    .woocommerce-checkout input.input-text {
        padding: 15px;
    }
}

/* ============================================================
   WooCommerce Order Received (Thank You) Page - Arimeda Theme
   ============================================================ */

/* 1. 全体のコンテナ調整 */
.woocommerce-order-received .woocommerce {
    max-width: 800px; /* サンクスページは少しスリムな幅が見やすい */
    margin: calc(var(--header-height) + 40px) auto 0;
    padding: 20px;
}

/* 2. 完了メッセージ（一番上のテキスト） */
.woocommerce-order-received .woocommerce-notice--success {
    background-color: var(--light-teal);
    color: var(--text-brown);
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 40px;
    border: 1px solid var(--primary-teal);
    box-shadow: 0 4px 10px rgba(77, 177, 179, 0.1);
}

/* 3. 注文概要（はみ出し・長いメアド対策版） */
ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap; /* 画面幅が狭くなったら自動で下段に落ちるように設定 */
    justify-content: flex-start; /* 均等ではなく左詰めに（崩れ防止） */
    list-style: none;
    padding: 20px !important;
    background-color: var(--white);
    border: 2px dashed var(--accent-gold);
    border-radius: 12px;
    margin-bottom: 40px;
    gap: 20px; /* 項目間の適度な隙間 */
}

ul.woocommerce-order-overview li {
    font-size: 0.9rem;
    color: var(--text-brown);
    text-transform: uppercase;
    /* 区切り線を縦位置ではなく、少し余白に馴染む形へ変更（レスポンシブでバグりにくくするため） */
    padding-right: 15px;
    flex: 1 1 calc(20% - 20px); /* 基本は5カラム、狭くなると自動調整 */
    min-width: 140px; /* 各項目の最低幅を少し広げてメアドを入りやすく */
    box-sizing: border-box;
}

ul.woocommerce-order-overview li strong {
    display: block;
    font-size: 1.05rem;
    color: var(--primary-teal);
    margin-top: 5px;
    
    /* 【超重要】長い文字列（英数字）が枠を突き抜けないように強制改行させる */
    word-break: break-all;
    overflow-wrap: break-word;
}

/* 決済方法の画像入りstrongタグの微調整 */
ul.woocommerce-order-overview li.method strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.wc-payment-gateway-method-logo-wrapper img {
    height: 16px;
    vertical-align: middle;
}

/* 4. 注文内容の詳細テーブル（Order Details） */
.woocommerce-order-received h2.woocommerce-order-details__title,
.woocommerce-order-received h2.woocommerce-column__title {
    color: var(--text-brown) !important;
    font-size: 1.4rem;
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--accent-gold);
    padding-bottom: 8px;
    display: inline-block;
}

/* テーブル全体の飾り付け */
table.woocommerce-table--order-details {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--white);
    border: 1px solid var(--light-teal);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 40px;
}

table.woocommerce-table--order-details th {
    background-color: var(--light-teal);
    color: var(--text-brown);
    padding: 15px 20px;
    font-weight: bold;
}

table.woocommerce-table--order-details td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--bg-light-yellow);
    color: var(--text-brown);
    vertical-align: middle;
}

/* 合計や支払方法の行の背景を少し優しく */
table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
    background-color: var(--bg-light-yellow);
    font-weight: bold;
    font-size: 1.1rem;
}

table.woocommerce-table--order-details tfoot tr:last-child td {
    color: var(--primary-teal);
}

/* 商品名のリンク */
table.woocommerce-table--order-details .product-name a {
    color: var(--text-brown);
    text-decoration: none;
    font-weight: bold;
}
table.woocommerce-table--order-details .product-name a:hover {
    color: var(--primary-teal);
}

/* 5. お客様情報・請求先住所（Customer Details） */
section.woocommerce-customer-details {
    background-color: var(--bg-light-yellow);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--accent-gold);
    margin-bottom: 40px;
}

address {
    font-style: normal;
    color: var(--text-brown);
    line-height: 1.8;
    background-color: var(--white);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(233, 195, 93, 0.4); /* --accent-goldの薄い線 */
    margin-top: 10px;
}

/* ============================================================
   Mobile Adjustments (スマホ対応)
   ============================================================ */
@media (max-width: 768px) {
    /* 概要リストを縦並びベースに */
ul.woocommerce-order-overview {
        flex-direction: column; /* スマホでは1列の縦並びにカチッと固定 */
        gap: 15px;
    }

    ul.woocommerce-order-overview li {
        width: 100% !important;
        flex: none;
        padding-right: 0;
        border-bottom: 1px dashed rgba(98, 45, 24, 0.1); /* 縦並び用の区切り線 */
        padding-bottom: 12px;
    }

    ul.woocommerce-order-overview li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    /* スマホの時は「ラベル: 値」を横並び、またはスマートな縦並びにする */
    ul.woocommerce-order-overview li strong {
        display: block;
        margin-top: 3px;
        font-size: 1.1rem;
    }

    /* テーブルの余白を少しタイトに */
    table.woocommerce-table--order-details th,
    table.woocommerce-table--order-details td {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
}

/* ============================================================
   WooCommerce Order Received - Inquiry Section
   ============================================================ */

/* 1. セクション全体の箱 */
.order-inquiry-section {
    background-color: var(--white);
    border: 2px solid var(--light-teal);
    border-radius: 15px;
    padding: 35px;
    margin-top: 50px;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(77, 177, 179, 0.05);
}

/* 2. 見出し */
.order-inquiry-section h2.inquiry-title {
    color: var(--text-brown);
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-gold);
    display: inline-block;
}

/* 3. フォーム内の各入力ブロック */
.order-inquiry-form p {
    margin-bottom: 20px;
}

.order-inquiry-form label {
    display: block;
    color: var(--text-brown);
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

/* 4. テキストエリア・入力欄の共通スタイル */
.order-inquiry-form textarea,
.order-inquiry-form input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--light-teal);
    border-radius: 8px;
    background-color: var(--bg-light-yellow); /* ほんのり黄色で入力しやすく */
    color: var(--text-brown);
    font-size: 1rem;
    box-sizing: border-box;
    transition: all 0.3s;
}

/* テキストエリアの高さ */
.order-inquiry-form textarea {
    height: 120px;
    resize: vertical; /* ユーザーが上下にだけ高さを変えられるように */
}

/* プレースホルダー（薄い文字）の色 */
.order-inquiry-form textarea::placeholder,
.order-inquiry-form input[type="email"]::placeholder {
    color: rgba(98, 45, 24, 0.4);
}

/* 入力欄にカーソルが当たった時（フォーカス時） */
.order-inquiry-form textarea:focus,
.order-inquiry-form input[type="email"]:focus {
    background-color: var(--white); /* フォーカスしたら白背景に切り替え */
    border-color: var(--primary-teal);
    outline: none;
    box-shadow: 0 0 8px rgba(77, 177, 179, 0.2);
}

/* 5. 送信ボタン */
.order-inquiry-form button.inquiry-submit {
    background-color: var(--text-brown) !important; /* 他の通常ボタンと統一 */
    color: var(--white) !important;
    width: 100%;
    max-width: 250px; /* ボタンが広がりすぎないように制限 */
    padding: 14px 0 !important;
    font-size: 1.05rem;
    font-weight: bold;
    border-radius: 50px !important; /* 丸っこい可愛いボタンに */
    border: none;
    cursor: pointer;
    margin: 10px auto 0;
    display: block; /* 中央寄せ */
    box-shadow: 0 4px 10px rgba(98, 45, 24, 0.15);
}

.order-inquiry-form button.inquiry-submit:hover {
    background-color: var(--primary-teal) !important; /* ホバーでティールに変化 */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(77, 177, 179, 0.3);
}

/* ============================================================
   Mobile Adjustments (スマホ対応)
   ============================================================ */
@media (max-width: 768px) {
    .order-inquiry-section {
        padding: 25px 20px;
        margin-top: 35px;
    }

    .order-inquiry-section h2.inquiry-title {
        font-size: 1.15rem;
        margin-bottom: 20px;
    }

    .order-inquiry-form button.inquiry-submit {
        max-width: 100%; /* スマホでは押しやすいように横いっぱいに */
    }
}

.woocommerce-message {
    border-top-color: var(--accent-gold);
}

.woocommerce-message::before {
    content: "\e015";
    color: var(--accent-gold);
}

.woocommerce-message a{
	margin-top:20px !important;
	text-align:center;
}

.woocommerce-info {
    border-top-color: var(--accent-gold);
}

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

.button.wc-backward{
	text-align:center;
	margin:0 auto !important;
	display:block !important;
	width: fit-content !important;
	padding:20px !important;
	margin-bottom:100px !important;
}