/* ============================================================
   COH Auth Modal & Account Page styles
   ============================================================ */

/* ── Scroll lock ──────────────────────────────────────────────────────────── */
body.coh-auth-open {
    overflow: hidden;
}

/* ── Backdrop ─────────────────────────────────────────────────────────────── */
.coh-auth-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
}
.coh-auth-backdrop--open {
    display: block;
}

/* ── Modal dialog ─────────────────────────────────────────────────────────── */
.coh-auth-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    width: min(540px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px 32px 32px;
    box-sizing: border-box;
}
.coh-auth-modal--open {
    display: block;
}

/* Close button */
.coh-auth-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.coh-auth-modal__close:hover {
    color: #333;
    background: #f0f0f0;
}

/* Heading */
.coh-auth-modal__heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: #222;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.coh-auth-modal__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e8e8e8;
    padding-bottom: 0;
}
.coh-auth-modal__tab {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: #888;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    transition: color 0.15s, border-color 0.15s;
}
.coh-auth-modal__tab:hover {
    color: #333;
}
.coh-auth-modal__tab--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* ── Messages ─────────────────────────────────────────────────────────────── */
.coh-auth-modal__message {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.4;
    display: none;
}
.coh-auth-modal__message:not(:empty) {
    display: block;
}
.coh-auth-modal__message--success {
    background: #edfbe9;
    color: #1a5a14;
    border: 1px solid #b2dfa8;
}
.coh-auth-modal__message--error {
    background: #fdf0f0;
    color: #a31414;
    border: 1px solid #f0b8b8;
}

/* ── Form fields ──────────────────────────────────────────────────────────── */
.coh-auth-modal__section-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    margin: 20px 0 8px;
}
.coh-auth-modal__label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #444;
    margin-bottom: 10px;
}
.coh-auth-modal__input,
.coh-auth-modal__textarea {
    font-size: 0.95rem;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    background: #fafafa;
    transition: border-color 0.15s;
}
.coh-auth-modal__input:focus,
.coh-auth-modal__textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: #fff;
}
.coh-auth-modal__textarea {
    resize: vertical;
    min-height: 60px;
}
.coh-auth-modal__checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #555;
    margin-bottom: 14px;
    cursor: pointer;
}
.coh-auth-modal__checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.coh-auth-modal__submit {
    width: 100%;
    margin-top: 6px;
}

/* Forgot password link + hint */
.coh-auth-modal__forgot {
    margin: 14px 0 0;
    text-align: center;
}
.coh-auth-modal__link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-accent);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.coh-auth-modal__link:hover {
    color: var(--color-accent-dark);
}
.coh-auth-modal__hint {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 16px;
}

/* ── Account page: guest state ────────────────────────────────────────────── */
.coh-account__guest {
    max-width: 480px;
    margin: 40px auto;
    text-align: center;
}
.coh-account__guest-text {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 20px;
}
.coh-account__guest-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Account page: notices ────────────────────────────────────────────────── */
.coh-account__notice {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 0.95rem;
}
.coh-account__notice--success {
    background: #edfbe9;
    color: #1a5a14;
    border: 1px solid #b2dfa8;
}
.coh-account__notice--error {
    background: #fdf0f0;
    color: #a31414;
    border: 1px solid #f0b8b8;
}

/* ── Account page: header ─────────────────────────────────────────────────── */
.coh-account__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.coh-account__heading {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: #222;
}

/* ── Account page: tabs ───────────────────────────────────────────────────── */
.coh-account__tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e8e8e8;
    margin-bottom: 24px;
}
.coh-account__tab {
    background: none;
    border: none;
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: #888;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.coh-account__tab:hover { color: #333; }
.coh-account__tab--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.coh-account__tab-count {
    background: #e8e8e8;
    color: #555;
    border-radius: 12px;
    padding: 1px 7px;
    font-size: 0.78rem;
    font-weight: 700;
}

/* ── Tab panels ───────────────────────────────────────────────────────────── */
.coh-account__tab-panel { display: none; }
.coh-account__tab-panel--active { display: block; }

/* ── Profile form ─────────────────────────────────────────────────────────── */
.coh-account__profile-notice {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    display: none;
}
.coh-account__profile-notice:not(:empty) { display: block; }
.coh-account__profile-notice.coh-account__notice--success {
    background: #edfbe9;
    color: #1a5a14;
    border: 1px solid #b2dfa8;
}
.coh-account__profile-notice.coh-account__notice--error {
    background: #fdf0f0;
    color: #a31414;
    border: 1px solid #f0b8b8;
}

.coh-account__form-section {
    margin-bottom: 28px;
    padding: 20px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}
.coh-account__form-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #555;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.coh-account__optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #999;
    font-size: 0.8rem;
}

.coh-account__label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #444;
    margin-bottom: 12px;
}
.coh-account__input,
.coh-account__textarea {
    font-size: 0.95rem;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    background: #fff;
    transition: border-color 0.15s;
}
.coh-account__input:focus,
.coh-account__textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}
.coh-account__input:disabled {
    background: #f0f0f0;
    color: #777;
    cursor: not-allowed;
}
.coh-account__textarea {
    resize: vertical;
    min-height: 60px;
}

.coh-account__form-actions {
    margin-top: 8px;
}

/* ── Order history ────────────────────────────────────────────────────────── */
.coh-account__empty {
    color: #888;
    font-style: italic;
    margin: 20px 0;
}

.coh-account__order {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 24px;
    overflow: hidden;
}
.coh-account__order-header {
    padding: 14px 18px;
    background: #f7f7f7;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: space-between;
}
.coh-account__order-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #222;
}
.coh-account__order-num {
    font-weight: 400;
    color: #666;
}
.coh-account__order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.85rem;
    color: #666;
}
.coh-account__delivery-status {
    background: #e8f0fe;
    color: #1a3a8a;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    font-weight: 600;
}
.coh-account__order-date { color: #999; }
.coh-account__portal-link {
    font-size: 0.8rem;
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}
.coh-account__portal-link:hover { text-decoration: underline; }

.coh-account__items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.coh-account__items-table th,
.coh-account__items-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.coh-account__items-table th {
    background: #fafafa;
    font-weight: 700;
    color: #555;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.coh-account__items-table tfoot td {
    font-weight: 700;
    background: #f7f7f7;
    border-top: 2px solid #e0e0e0;
}
.coh-account__total-label { color: #555; }
.coh-account__total-note {
    font-weight: 400;
    font-style: italic;
    color: #777;
    font-size: 0.82rem;
    margin-top: 2px;
}

/* ── Orders tab: statistics block ────────────────────────────────────────── */
.coh-account__stats {
    background: #f6f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #444;
}
.coh-account__stats-row {
    margin: 0;
    line-height: 1.6;
}
.coh-account__stats-row + .coh-account__stats-row {
    margin-top: 4px;
}

/* ── Orders tab: grand-total summary ─────────────────────────────────────── */
.coh-account__summary {
    width: 100%;
    border-collapse: collapse;
    margin-top: 24px;
    font-size: 0.95rem;
}
.coh-account__summary-row th,
.coh-account__summary-row td {
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}
.coh-account__summary-row:last-child th,
.coh-account__summary-row:last-child td {
    border-bottom: none;
}
.coh-account__summary-label {
    font-weight: 600;
    color: #1d2327;
    text-align: left;
    white-space: nowrap;
    width: 1%;
}
.coh-account__summary-value {
    font-weight: 700;
    color: #1d2327;
    text-align: right;
}
.coh-account__summary-row--remaining th,
.coh-account__summary-row--remaining td {
    background: #f6f7f7;
}

/* ── Cancel / Restore buttons ─────────────────────────────────────────────── */
.coh-btn--danger {
    background: var(--color-accent);
    color: #fff;
    border: none;
}
.coh-btn--danger:hover {
    background: var(--color-accent-dark, #135e96);
    color: #fff;
}
.coh-btn--restore {
    background: var(--color-accent);
    color: #fff;
    border: none;
}
.coh-btn--restore:hover {
    background: var(--color-accent-dark, #135e96);
    color: #fff;
}
.coh-order-action-form {
    display: inline-block;
}
.coh-account__order-actions,
.coh-my-orders__order-actions {
    padding: 10px 0 4px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.coh-portal__section--cancel {
    margin-top: 4px;
    padding-top: 0;
    border-top: none;
}

/* ── Sub-tabs (cancelled orders inside Orders panel) ─────────────────────── */
.coh-account__subtabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 18px;
}
.coh-account__subtab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 8px 18px;
    font-size: 0.95rem;
    color: #555;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.coh-account__subtab:hover {
    color: #222;
}
.coh-account__subtab--active {
    color: #222;
    border-bottom-color: #4caf50;
    font-weight: 600;
}
.coh-account__subtab-panel {
    display: none;
}
.coh-account__subtab-panel--active {
    display: block;
}
.coh-account__tab--cancelled {
    /* styled same as other tabs; no extra rule needed */
}

/* ── Tabs for CustomerOrdersPage ──────────────────────────────────────────── */
.coh-my-orders__tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 18px;
}
.coh-my-orders__tab {
    display: inline-block;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 8px 18px;
    font-size: 0.95rem;
    color: #555;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.coh-my-orders__tab:hover {
    color: #222;
    text-decoration: none;
}
.coh-my-orders__tab--active {
    color: #222;
    border-bottom-color: #4caf50;
    font-weight: 600;
}
.coh-my-orders__tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e0e0e0;
    color: #444;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 5px;
    vertical-align: middle;
}
.coh-my-orders__tab-panel {
    display: none;
}
.coh-my-orders__tab-panel--active {
    display: block;
}
.coh-my-orders__notice {
    padding: 10px 14px;
    border-radius: 5px;
    margin-bottom: 14px;
    font-size: 0.95rem;
}
.coh-my-orders__notice--success {
    background: #eaf7ea;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.coh-my-orders__notice--error {
    background: #fdecea;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

/* ── Collapsible items toggle ─────────────────────────────────────────────── */
.coh-items-toggle-row td {
    padding: 0 !important;
    border: none !important;
}
.coh-items-toggle-cell {
    text-align: center;
    padding: 8px 0 !important;
    background: #fafafa;
    border-top: 1px solid #e8e8e8 !important;
}
.coh-items-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-accent);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.coh-items-toggle-btn:hover {
    color: var(--color-accent-dark);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .coh-auth-modal {
        padding: 20px 16px 24px;
        border-radius: 0;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-height: 92vh;
    }

    .coh-account__items-table thead { display: none; }
    .coh-account__items-table tbody tr {
        display: block;
        border-bottom: 1px solid #e0e0e0;
        padding: 8px 0;
    }
    .coh-account__items-table td {
        display: flex;
        justify-content: space-between;
        padding: 4px 14px;
        border: none;
    }
    .coh-account__items-table td::before {
        content: attr( data-label );
        font-weight: 700;
        color: #888;
    }
    .coh-account__items-table tfoot td {
        display: flex;
        justify-content: space-between;
        padding: 8px 14px;
    }
    .coh-items-toggle-row,
    .coh-items-toggle-row td {
        display: table-row !important;
    }
    .coh-items-toggle-cell {
        display: block !important;
        text-align: center;
    }
    .coh-items-toggle-cell::before { display: none !important; }
}