/* マイページ。共通ナビ (旧 mypage_navbar.php) + 退会ページ + 簡素ヘッダ。
 * フォーム行の様式は register.css (reg-*) を共用し、本ファイルはマイページ固有分のみ持つ。
 * モバイルファースト + @media (width >= 1000px) は既存 shop CSS の慣例。 */

.mypage-page,
.withdraw-page {
    padding-block: 24px 48px;
}

.mypage-title {
    margin-bottom: 16px;
    font-size: 1.4rem;
}

/* ===== タブナビ (旧 mypage_navbar のリンク列踏襲) ===== */
.mypage-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0 0 20px;
    list-style: none;
}

.mypage-tab a,
.mypage-tab .mypage-tab-disabled {
    display: block;
    padding: 10px 14px;
    font-size: 0.8rem;
    background: #eee;
    color: #555;
}

.mypage-tab a:hover {
    background: #ddd;
}

.mypage-tab.is-active a,
.mypage-tab.is-active .mypage-tab-disabled {
    background: #3a3a3a;
    color: #fff;
}

.mypage-tab-disabled {
    cursor: default;
    opacity: 0.6;
}

/* ===== ランク / ポイントの 3 カード ===== */
.mypage-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
}

.mypage-card {
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}

.mypage-card-title {
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 700;
}

.mypage-card-main {
    font-size: 0.85rem;
    line-height: 1.8;
}

.mypage-card-note {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.8;
}

/* 進捗メーター (旧 .line-fill 踏襲・width % は view が設定) */
.mypage-meter {
    height: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #eee;
    border-radius: 5px;
}

.mypage-meter-fill {
    height: 100%;
    background: var(--genre-color, #9c8b5e);
}

/* ===== セクション見出し + 退会ボタン ===== */
.mypage-section-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--genre-color, #9c8b5e);
}

.mypage-section-title {
    font-size: 1.1rem;
}

.mypage-complete .mypage-section-title {
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--genre-color, #9c8b5e);
}

/* 退会ボタンは共通 `.btn .btn-sm` (common.css) を使用。 */

.mypage-password-note {
    margin: 8px 0;
    font-size: 0.8rem;
    color: #666;
}

.mypage-complete-note {
    margin-bottom: 24px;
    line-height: 1.9;
}

.mypage-actions {
    display: flex;
    gap: 12px;
}

/* ===== お気に入り一覧 (旧 mypage_favorite.php 踏襲) ===== */
.favorite-nodata {
    padding: 32px 0;
    color: #555;
}

/* 表示できない商品 (掲載停止・削除済み・不在) のプレースホルダ。
 * 旧は一覧から落としており解除する導線が無かった。
 * 商品名・価格・画像は出さず、解除に必要な商品番号だけを見せる。 */
.favorite-unavailable {
    margin-top: 32px;
}

/* 見出しと「すべて削除する」を横並びにする (プレースホルダは最大 264 件になりうるため、
 * 1 件ずつ消させない導線を見出しの高さに置く) */
.favorite-unavailable-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

.favorite-unavailable-title {
    font-size: 1rem;
    font-weight: 700;
}

.favorite-unavailable-remove-all {
    padding: 6px 16px;
    font-size: 0.8rem;
    color: #555;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #997e5d;
    border-radius: 14px;
}

.favorite-unavailable-remove-all:hover {
    background: #f7f3ec;
}

.favorite-unavailable-remove-all:disabled {
    cursor: default;
    opacity: 0.5;
}

.favorite-unavailable-note {
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: #666;
}

.favorite-unavailable-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.favorite-unavailable-item {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.favorite-unavailable-text {
    font-size: 0.85rem;
    color: #555;
}

.favorite-unavailable-no {
    margin-left: 4px;
    font-size: 0.8rem;
    color: #888;
}

.favorite-unavailable-remove {
    padding: 6px 16px;
    font-size: 0.8rem;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    background: #997e5d;
    border: 0;
    border-radius: 14px;
}

.favorite-unavailable-remove:hover {
    opacity: 0.85;
}

/* ===== 配送先の管理 (旧 mypage_delivery.php 踏襲) ===== */
.delivery-flash-done {
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: #2e6b30;
    background: #eef7ee;
    border: 1px solid #bcdcbd;
    border-radius: 4px;
}

.delivery-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 20px;
}

.delivery-toolbar-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.delivery-toolbar-label {
    font-size: 0.75rem;
    color: #333;
}

/* 旧実測: select w98 h34 border #707070 r5 / 絞込 input w224 h34 */
.delivery-sort,
.delivery-keyword,
.delivery-search-button {
    height: 34px;
    font-size: 0.85rem;
    border: 1px solid #707070;
    border-radius: 5px;
}

/* 旧実測: select 幅 98px (padding 8px 11px 込み)。
 * 右側は共通のセレクト (common.css) が描く矢印の分を空ける (旧はネイティブの矢印が同じ位置を占めていた)。 */
.delivery-sort {
    width: 98px;
    padding-inline: 8px 28px;
}

.delivery-keyword {
    width: 224px;
    max-width: 100%;
    padding-inline: 10px;
}

.delivery-search-button {
    padding-inline: 14px;
    background: #fff;
    cursor: pointer;
}

/* 配送先の新規登録/編集ボタンは共通 `.btn .btn-primary` (common.css) を使用。
 * ツールバー内の新規登録ボタンだけは右端寄せにする。 */
.delivery-toolbar .btn {
    margin-left: auto;
}

.delivery-nodata {
    padding: 24px 0;
    color: #555;
}

/* SP はテーブル側を横スクロール (ページ全体は横スクロールさせない) */
.delivery-table-wrap {
    margin-bottom: 16px;
    overflow-x: auto;
}

/* 旧実測: ヘッダ bg #f2f2f2 / 罫線 #ccc / セル 14.4px */
.delivery-table {
    width: 100%;
    font-size: 0.9rem;
    border-collapse: collapse;
}

.delivery-table th {
    padding: 10px 15px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    background: #f2f2f2;
    border-bottom: 1px solid #ccc;
}

/* 旧実測: セル padding 2px 15px (ボタン h34 + 上下 2px + 罫線 = 行高 39px) */
.delivery-table td {
    padding: 2px 15px;
    border-bottom: 1px solid #ccc;
}

.delivery-table tr.is-editing td {
    background: #f7f3ec;
}

.delivery-col-postcode,
.delivery-col-tel,
.delivery-col-edit,
.delivery-col-delete {
    white-space: nowrap;
}

td.delivery-col-edit,
td.delivery-col-delete {
    text-align: center;
}

.delivery-delete-button {
    padding: 4px 8px;
    font-size: 1rem;
    line-height: 1;
    color: #c0392b;
    cursor: pointer;
    background: none;
    border: 0;
}

.delivery-delete-button:hover {
    opacity: 0.7;
}

.delivery-form-section {
    margin-top: 32px;
}

.delivery-form-title {
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--genre-color, #9c8b5e);
}

/* ===== 退会ページ (旧 leave.php 踏襲) ===== */
.withdraw-title {
    margin-bottom: 20px;
    font-size: 1.15rem;
    font-weight: 700;
}

.withdraw-lead {
    margin-bottom: 24px;
    line-height: 1.9;
}

.withdraw-survey {
    margin-bottom: 32px;
    border: 0;
}

.withdraw-survey-label {
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #555;
}

.withdraw-reason {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
    font-size: 0.9rem;
    cursor: pointer;
}

.withdraw-actions {
    display: flex;
    gap: 16px;
}

/* ===== 簡素ヘッダ (旧 leave.php のロゴ + タイトルバー) ===== */
.site-header-simple .simple-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 10px;
}

.simple-header-titlebar {
    background: #eee;
}

.simple-header-title {
    padding-block: 12px;
    font-size: 1.05rem;
    font-weight: 700;
}

@media (width >= 1000px) {
    .mypage-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .mypage-tab a,
    .mypage-tab .mypage-tab-disabled {
        font-size: 0.85rem;
        padding: 12px 20px;
    }

    .withdraw-page {
        max-width: 800px;
    }
}

/* ============================================================
 * 注文照会
 * ツールバー・テーブルは配送先一覧 (delivery-*) と同じ視覚系を踏襲
 * (ヘッダ bg #f2f2f2 / 罫線 #ccc / セレクト h34 border #707070 r5)。
 * ============================================================ */

/* --- 一覧 --- */
.order-history-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.order-history-toolbar-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-history-toolbar-label {
    font-size: 0.75rem;
    color: #333;
}

.order-history-select {
    height: 34px;
    min-width: 130px;
    padding-inline: 8px 28px;
    font-size: 0.85rem;
    border: 1px solid #707070;
    border-radius: 5px;
}

.order-history-search-button {
    height: 34px;
    padding-inline: 14px;
    font-size: 0.85rem;
    cursor: pointer;
    background: #fff;
    border: 1px solid #707070;
    border-radius: 5px;
}

.order-history-annotation {
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    color: #c0392b;
    background: #fdf3f2;
    border: 1px solid #f0c8c3;
    border-radius: 4px;
}

.order-history-annotation a {
    color: #c0392b;
    text-decoration: underline;
}

.order-history-nodata {
    padding: 24px 0;
    color: #555;
}

/* 1000px 未満は 1 伝票 = 1 カード。tr を flex 化し、order で見出し 3 項目を先頭へ寄せる。
 * ラベルは td の data-label を ::before で出す。1000px 以上でテーブルに戻す。 */
.order-history-table-wrap {
    margin-bottom: 16px;
}

.order-history-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
}

.order-history-table thead {
    display: none;
}

.order-history-table tbody {
    display: block;
}

.order-history-table tr {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.order-history-table td {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 4px 8px;
    justify-content: space-between;
    order: 4;
    padding: 3px 0;
}

.order-history-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #666;
}

/* カード見出し: 注文日 (左) + 伝票番号 (右)、その下に注文状況。
 * 基底が `.order-history-table td` (要素付き) のため、上書き側も要素付きで詳細度を揃える。 */
td.order-history-col-date {
    flex-basis: calc(50% - 8px);
    order: 1;
}

td.order-history-col-slipno {
    flex-basis: calc(50% - 8px);
    order: 2;
}

td.order-history-col-status {
    order: 3;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

/* カードフッタ (ラベルは不要 — ボタン自体が用途を示す) */
td.order-history-col-select {
    justify-content: center;
    order: 5;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid #ddd;
}

td.order-history-col-select::before {
    content: none;
}

/* クレジット確定待ちは赤字で強調 (カードでも維持) */
.order-history-table tr.is-credit-pending,
.order-history-table tr.is-credit-pending td,
.order-history-table tr.is-credit-pending td::before {
    color: #c0392b;
}

/* 展開中の行 / カードは濃灰反転 */
.order-history-table tr.is-open,
.order-history-table tr.is-open td,
.order-history-table tr.is-open td::before,
.order-history-table tr.is-open a {
    color: #fff;
}

.order-history-table tr.is-open {
    background: #696969;
}

.order-history-selected {
    height: 34px;
    font-size: 0.8rem;
    line-height: 34px;
    text-align: center;
}

.order-history-slipno-link {
    text-decoration: underline;
}

.order-history-invoice-link {
    display: block;
    color: #1a6bb5;
    text-decoration: underline;
}

.order-history-open-link {
    height: 34px;
    padding: 0 30px;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* 注文用紙は表の右下・右寄せ (SP は幅いっぱい) */
.order-history-fax-slip {
    margin-bottom: 16px;
}

.order-history-fax-slip .btn {
    width: 100%;
}

/* --- 展開パネル --- */
.order-expand {
    margin-top: 24px;
}

.order-expand-block {
    margin-bottom: 24px;
}

.order-expand-title {
    padding-bottom: 6px;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
}

.order-expand-note {
    margin-bottom: 12px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.order-expand-address {
    width: 100%;
    max-width: 193px;
    height: 34px;
    padding: 8px 11px;
    font-size: 0.85rem;
    border: 1px solid #707070;
    border-radius: 5px;
}

.order-expand-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 16px;
}

.order-expand-button {
    height: 34px;
    padding: 0 30px;
    font-size: 0.85rem;
}

.order-expand-reorder-note {
    margin-top: 12px;
    font-size: 0.85rem;
    color: #2b7a2b;
}

.order-expand-reorder-note.is-error {
    color: #c0392b;
}

.order-expand-nodata {
    padding: 16px 0;
    color: #555;
}

.order-expand-product {
    display: flex;
    flex-direction: column;
}

.order-expand-count {
    margin-top: 4px;
    font-size: 0.8rem;
    color: #555;
    text-align: right;
}

.order-expand-unavailable {
    font-size: 0.9rem;
    color: #555;
}

@media (width >= 1000px) {
    /* --- 一覧をテーブルに戻す --- */
    .order-history-table-wrap {
        overflow-x: auto;
    }

    .order-history-table thead {
        display: table-header-group;
    }

    .order-history-table tbody {
        display: table-row-group;
    }

    .order-history-table tr {
        display: table-row;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .order-history-table th {
        padding: 8px 10px;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
        background: #f2f2f2;
        border-bottom: 1px solid #ccc;
    }

    .order-history-table td {
        display: table-cell;
        padding: 8px 10px;
        white-space: nowrap;
        border-bottom: 1px solid #ccc;
    }

    .order-history-table td::before {
        content: none;
    }

    /* カードの見出し区切りを落とす */
    td.order-history-col-status {
        margin-bottom: 0;
    }

    /* 金額・ポイントは右寄せ */
    .order-history-col-sliptotal,
    .order-history-col-ordertotal,
    .order-history-col-point {
        text-align: right;
    }

    .order-history-col-status,
    .order-history-col-zone,
    .order-history-col-payment,
    .order-history-col-select {
        text-align: center;
    }

    td.order-history-col-select {
        margin-top: 0;
        border-top: 0;
    }

    .order-history-open-link {
        display: inline-flex;
        padding: 0 20px;
    }

    .order-history-fax-slip {
        text-align: right;
    }

    .order-history-fax-slip .btn {
        width: auto;
    }
}

/* ============================================================
 * FAX 注文用紙の商品選択
 * テーブル・モーダルは注文照会 (order-history-*) と同じ視覚系を踏襲。
 * ============================================================ */

.fax-slip-note {
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: #555;
}

.fax-slip-actions {
    margin-bottom: 20px;
}

.fax-slip-subtitle {
    padding: 6px 0;
    font-size: 0.95rem;
    font-weight: 700;
}

/* 1000px 未満は 1 商品 = 1 カード。5 列は 390px に収まらず、商品名が数文字ずつ折り返される。
 * 注文履歴の一覧と同じ方式 (tr を flex 化・td の data-label を ::before でラベルにする)。 */
.fax-slip-table-wrap {
    margin-bottom: 16px;
}

.fax-slip-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
}

.fax-slip-table thead {
    display: none;
}

.fax-slip-table tbody {
    display: block;
}

.fax-slip-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.fax-slip-table td {
    display: flex;
    flex: 1 1 100%;
    gap: 4px 8px;
    justify-content: space-between;
    padding: 3px 0;
}

.fax-slip-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #666;
}

/* 商品名は最も長い情報なので全幅を使い、ラベルを付けない */
td.fax-slip-col-name {
    display: block;
    order: 1;
    padding-bottom: 6px;
    line-height: 1.5;
}

td.fax-slip-col-name::before {
    content: none;
}

td.fax-slip-col-itemno {
    order: 2;
}

td.fax-slip-col-price {
    order: 3;
}

td.fax-slip-col-count {
    order: 4;
}

/* チェックボックス・削除はカードの右上に置く */
td.fax-slip-col-check,
td.fax-slip-col-remove {
    flex: 0 0 auto;
    order: 0;
    justify-content: flex-end;
    width: 100%;
}

.fax-slip-empty {
    padding: 16px 0;
    color: #555;
}

.fax-slip-submit {
    margin-top: 20px;
    text-align: center;
}

/* --- 検索モーダル --- */
.fax-search-dialog {
    width: min(900px, 96vw);
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

@media (width >= 1000px) {
    .fax-search-dialog {
        width: min(900px, 92vw);
        padding: 20px;
    }
}

.fax-search-dialog::backdrop {
    background: rgb(0 0 0 / 40%);
}

.fax-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.fax-search-header h2 {
    font-size: 1rem;
    font-weight: 700;
}

.fax-search-close {
    padding: 4px 8px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: 0;
}

.fax-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.fax-search-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fax-search-label {
    font-size: 0.75rem;
    color: #333;
}

.fax-search-field select,
.fax-search-field input {
    height: 34px;
    padding-inline: 8px;
    font-size: 0.85rem;
    border: 1px solid #707070;
    border-radius: 5px;
}

.fax-search-period {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.85rem;
}

.fax-search-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

/* SP は横幅が足りず `.btn` の padding 32px で文字が折り返し、ボタンの高さが 3 倍に膨らむ */
.fax-search-footer .btn,
.fax-search-form .btn {
    padding-inline: 16px;
}

@media (width >= 1000px) {
    /* --- 一覧をテーブルに戻す --- */
    .fax-slip-table-wrap {
        overflow-x: auto;
    }

    .fax-slip-table thead {
        display: table-header-group;
    }

    .fax-slip-table tbody {
        display: table-row-group;
    }

    .fax-slip-table tr {
        display: table-row;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .fax-slip-table th {
        padding: 8px 10px;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
        background: #f2f2f2;
        border-bottom: 1px solid #ccc;
    }

    .fax-slip-table td {
        display: table-cell;
        padding: 8px 10px;
        border-bottom: 1px solid #ccc;
    }

    .fax-slip-table td::before {
        content: none;
    }

    td.fax-slip-col-check,
    td.fax-slip-col-remove {
        width: 48px;
        text-align: center;
    }

    td.fax-slip-col-itemno {
        width: 120px;
        white-space: nowrap;
    }

    td.fax-slip-col-price,
    td.fax-slip-col-count {
        width: 100px;
        text-align: right;
        white-space: nowrap;
    }

    td.fax-slip-col-name {
        padding-bottom: 8px;
    }

    .fax-search-footer .btn,
    .fax-search-form .btn {
        padding-inline: 32px;
    }
}