/* ============================================================
   Organical Botanical — Account & Order Lookup Styles
   ============================================================ */

/* ── Account page ── */
.ob-account-page {
    padding: 64px 0;
    min-height: 60vh;
}

.ob-account-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ob-rule, #e0ddd6);
}

.ob-account-title {
    font-family: var(--ob-font-display, 'Cormorant Garamond', serif);
    font-size: 2.2rem;
    color: var(--ob-forest, #1e3a0f);
    margin: 0 0 6px;
}

.ob-account-welcome {
    font-size: 0.88rem;
    color: var(--ob-muted, #888);
    margin: 0;
}

/* ── Tab nav ── */
.ob-account-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ob-rule, #e0ddd6);
    margin-bottom: 40px;
}

.ob-account-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 20px;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ob-muted, #888);
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: -1px;
}

.ob-account-tab:hover {
    color: var(--ob-forest, #1e3a0f);
}

.ob-account-tab.is-active {
    color: var(--ob-forest, #1e3a0f);
    border-bottom-color: var(--ob-forest, #1e3a0f);
    font-weight: 600;
}

/* ── Panels ── */
.ob-account-panel {
    display: none;
}

.ob-account-panel.is-active {
    display: block;
    animation: ob-fade-in 0.2s ease;
}

.ob-account-empty {
    text-align: center;
    padding: 48px 0;
    font-size: 0.88rem;
    color: var(--ob-muted, #888);
}

.ob-account-section-heading {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ob-muted, #888);
    margin-bottom: 16px;
}

/* ── Order cards ── */
.ob-order-card {
    background: #fff;
    border: 1px solid var(--ob-rule, #e0ddd6);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 12px;
}

.ob-order-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ob-order-card__number {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ob-forest, #1e3a0f);
    margin-right: 10px;
    font-family: var(--ob-font-body, sans-serif);
    letter-spacing: 0.04em;
}

.ob-order-card__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 0.82rem;
    color: var(--ob-muted, #888);
}

.ob-order-card__meta strong {
    color: var(--ob-forest, #1e3a0f);
}

.ob-order-card__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ob-order-item {
    font-size: 0.78rem;
    color: var(--ob-muted, #666);
    background: var(--ob-lite, #edf5e5);
    padding: 4px 10px;
    border-radius: 2px;
}

/* ── Booking cards ── */
.ob-booking-card {
    background: #fff;
    border: 1px solid var(--ob-rule, #e0ddd6);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 12px;
}

.ob-booking-card.is-past {
    opacity: 0.7;
}

.ob-booking-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ob-booking-card__service {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ob-forest, #1e3a0f);
    margin-right: 10px;
    font-family: var(--ob-font-display, serif);
}

.ob-booking-card__ref {
    font-size: 0.72rem;
    color: var(--ob-muted, #aaa);
    font-family: monospace;
}

.ob-booking-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--ob-muted, #666);
}

/* ── Loyalty card ── */
.ob-loyalty-card {
    background: var(--ob-forest, #1e3a0f);
    color: #fff;
    border-radius: 8px;
    padding: 28px 24px;
    text-align: center;
}

.ob-loyalty-points {
    font-family: var(--ob-font-display, serif);
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 8px;
}

.ob-loyalty-label {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 12px;
}

.ob-loyalty-value {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.ob-loyalty-rules {
    font-size: 0.78rem;
    opacity: 0.55;
    line-height: 1.8;
}

.ob-loyalty-rules p { margin: 0; }

/* ── Profile table ── */
.ob-profile-table {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--ob-rule, #e0ddd6);
    border-radius: 4px;
    overflow: hidden;
}

.ob-profile-table th,
.ob-profile-table td {
    padding: 14px 20px;
    font-size: 0.88rem;
    text-align: left;
    border: none !important;
    border-bottom: 1px solid var(--ob-rule, #f5f3ef) !important;
}

.ob-profile-table tr:last-child th,
.ob-profile-table tr:last-child td {
    border-bottom: none !important;
}

.ob-profile-table th {
    width: 100px;
    color: var(--ob-muted, #888);
    font-weight: normal;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: none;
}

.ob-profile-table td {
    color: var(--ob-forest, #1e3a0f);
    font-weight: 500;
    background: none;
}

/* ── Order confirmation inline styles ── */
.ob-conf-box {
    background: #fff;
    border: 1px solid var(--ob-rule, #e0ddd6);
    border-radius: 4px;
    padding: 24px;
    margin: 16px 0 24px;
}

.ob-conf-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ob-rule, #f5f3ef);
    font-size: 0.85rem;
}

.ob-conf-item:last-child { border-bottom: none; }

.ob-conf-item__name {
    flex: 1;
    color: var(--ob-black, #222);
}

.ob-conf-item__qty {
    color: var(--ob-muted, #888);
    font-size: 0.78rem;
}

.ob-conf-item__price {
    font-weight: 500;
    color: var(--ob-forest, #1e3a0f);
    min-width: 60px;
    text-align: right;
}

.ob-conf-totals {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ob-rule, #e0ddd6);
}

.ob-conf-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--ob-muted, #666);
    padding: 4px 0;
}

.ob-conf-total-row--grand {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ob-forest, #1e3a0f);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ob-rule, #e0ddd6);
}

.ob-conf-track {
    margin-top: 16px;
    font-size: 0.82rem;
    text-align: right;
}

/* ── Order lookup page ── */
.ob-lookup-page {
    padding: 64px 0;
    min-height: 50vh;
}

.ob-lookup-form-wrap {
    max-width: 520px;
}

.ob-lookup-intro {
    font-size: 0.9rem;
    color: var(--ob-muted, #666);
    margin-bottom: 24px;
    line-height: 1.7;
}

.ob-lookup-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ob-forest, #1e3a0f);
    margin-bottom: 8px;
}

.ob-lookup-row {
    display: flex;
    gap: 12px;
}

.ob-lookup-row .ob-input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--ob-rule, #ddd);
    border-radius: 3px;
    font-size: 0.9rem;
    font-family: monospace;
}

.ob-lookup-row .ob-input:focus {
    outline: none;
    border-color: var(--ob-forest, #1e3a0f);
}

.ob-lookup-error {
    text-align: center;
    padding: 48px 0;
}

.ob-lookup-result {
    max-width: 600px;
}

.ob-lookup-result__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ob-rule, #e0ddd6);
}

.ob-lookup-order-num {
    font-family: var(--ob-font-display, serif);
    font-size: 1.6rem;
    color: var(--ob-forest, #1e3a0f);
    margin: 0 0 8px;
}

.ob-lookup-date {
    font-size: 0.82rem;
    color: var(--ob-muted, #888);
}

.ob-lookup-section-heading {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ob-muted, #888);
    margin: 24px 0 12px;
}

.ob-lookup-items {
    background: #fff;
    border: 1px solid var(--ob-rule, #e0ddd6);
    border-radius: 4px;
    padding: 0 16px;
    margin-bottom: 4px;
}

.ob-lookup-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ob-rule, #f5f3ef);
    font-size: 0.85rem;
}

.ob-lookup-item:last-child { border-bottom: none; }

.ob-lookup-item__name { flex: 1; color: var(--ob-black, #222); }
.ob-lookup-item__qty  { color: var(--ob-muted, #888); font-size: 0.78rem; }
.ob-lookup-item__price { font-weight: 500; color: var(--ob-forest, #1e3a0f); min-width: 60px; text-align: right; }

.ob-lookup-totals {
    background: #fff;
    border: 1px solid var(--ob-rule, #e0ddd6);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 24px;
}

.ob-lookup-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--ob-muted, #666);
    padding: 4px 0;
}

.ob-lookup-total-row--grand {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ob-forest, #1e3a0f);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ob-rule, #e0ddd6);
}

.ob-lookup-address address {
    font-style: normal;
    font-size: 0.85rem;
    color: var(--ob-muted, #555);
    line-height: 1.7;
}

.ob-lookup-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
}

/* ── Responsive ── */
@media ( max-width: 768px ) {
    .ob-account-header { flex-direction: column; gap: 16px; }
    #ob-tab-profile > div[style*='grid'] { grid-template-columns: 1fr !important; }
    .ob-account-nav { overflow-x: auto; }
    .ob-account-tab { white-space: nowrap; padding: 12px 14px; }
    .ob-order-card__header { flex-direction: column; gap: 8px; align-items: flex-start; }
    .ob-loyalty-card { padding: 28px 20px; }
    .ob-lookup-row { flex-direction: column; }
    .ob-lookup-actions { flex-direction: column; }
    .ob-lookup-result__header { flex-direction: column; gap: 8px; }
}

/* ── Invoice layout ── */
.ob-invoice {
    border-top: 1px solid var(--ob-rule, #e0ddd6);
    padding-top: 16px;
    margin-top: 12px;
}

.ob-invoice__header {
    display: flex !important;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ob-rule, #f0ede8);
    flex-wrap: wrap;
}

.ob-invoice__header button {
    margin-left: auto;
}

.ob-invoice__label {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ob-muted, #aaa);
    margin-bottom: 3px;
}

.ob-invoice__value {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ob-forest, #1e3a0f);
}

.ob-invoice__cols {
    display: grid !important;
    grid-template-columns: 56px 1fr 60px 80px 80px !important;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ob-rule, #e0ddd6);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ob-muted, #aaa);
}

.ob-invoice-line {
    display: grid !important;
    grid-template-columns: 56px 1fr 60px 80px 80px !important;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--ob-rule, #f5f3ef);
}

.ob-invoice-line__img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--ob-rule, #e0ddd6);
    display: block;
}

.ob-invoice-line__img--placeholder {
    background: var(--ob-lite, #edf5e5);
    display: block;
}

.ob-invoice-line__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ob-invoice-line__name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ob-forest, #1e3a0f);
}

a.ob-invoice-line__name:hover {
    text-decoration: underline;
}

.ob-invoice-line__variant {
    font-size: 0.75rem;
    color: var(--ob-muted, #888);
}

.ob-invoice-line__qty {
    text-align: center;
    font-size: 0.82rem;
    color: var(--ob-muted, #666);
}

.ob-invoice-line__price {
    text-align: right;
    font-size: 0.82rem;
    color: var(--ob-muted, #888);
}

.ob-invoice-line__total {
    text-align: right;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ob-forest, #1e3a0f);
}

.ob-invoice__totals {
    margin-top: 12px;
    max-width: 280px;
    margin-left: auto;
}

.ob-invoice__total-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--ob-muted, #666);
    padding: 5px 0;
    border-bottom: 1px solid var(--ob-rule, #f5f3ef);
}

.ob-invoice__total-row--discount {
    color: var(--ob-forest, #1e3a0f);
}

.ob-invoice__total-row--grand {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ob-forest, #1e3a0f);
    border-top: 2px solid var(--ob-forest, #1e3a0f);
    border-bottom: none;
    padding-top: 10px;
    margin-top: 4px;
}

/* ── Print styles ── */
@media print {
    .ob-account-nav,
    .ob-account-header,
    .ob-order-card__header button,
    header, footer, nav {
        display: none !important;
    }

    .ob-invoice {
        display: block !important;
    }

    .ob-order-card {
        border: none;
        box-shadow: none;
    }
}

/* ── Responsive invoice ── */
@media ( max-width: 600px ) {
    .ob-invoice__cols { display: none; }
    .ob-invoice-line {
        grid-template-columns: 48px 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .ob-invoice-line__img { grid-row: 1 / 3; }
    .ob-invoice-line__price { display: none; }
    .ob-invoice-line__total { text-align: right; }
}

/* ── Print invoice header (hidden on screen, visible on print) ── */
.ob-invoice__print-header {
    display: none;
}

.ob-invoice__ship-to {
    display: none;
}

@media print {
    .ob-no-print { display: none !important; }

    .ob-invoice__print-header {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 32px;
        padding-bottom: 20px;
        border-bottom: 2px solid #1e3a0f;
    }

    .ob-invoice__brand {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ob-invoice__logo {
        max-height: 48px;
        width: auto;
    }

    .ob-invoice__brand-name {
        font-size: 1.2rem;
        letter-spacing: 0.15em;
        font-weight: 700;
        color: #1e3a0f;
    }

    .ob-invoice__seller {
        font-size: 11px;
        color: #555;
        line-height: 1.8;
        margin-top: 4px;
    }

    .ob-invoice__meta {
        text-align: right;
    }

    .ob-invoice__meta-title {
        font-size: 28px;
        font-weight: 700;
        color: #1e3a0f;
        letter-spacing: 0.12em;
        margin-bottom: 12px;
    }

    .ob-invoice__meta-table {
        font-size: 11px;
        color: #555;
    }

    .ob-invoice__meta-table td:first-child {
        padding-right: 16px;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 10px;
    }

    .ob-invoice__meta-table td:last-child {
        font-weight: 600;
        color: #1e3a0f;
    }

    .ob-invoice__ship-to {
        display: block !important;
        margin-bottom: 24px;
        font-size: 12px;
        line-height: 1.7;
        color: #333;
    }

    .ob-invoice__ship-label {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #aaa;
        margin-bottom: 4px;
    }

    .ob-invoice__ship-name {
        font-weight: 600;
        font-size: 13px;
        color: #1e3a0f;
    }

    /* Hide everything except the current invoice */
    body * { visibility: hidden; }
    .ob-invoice, .ob-invoice * { visibility: visible; }
    .ob-invoice {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 40px;
    }

    /* Footer on print */
    .ob-invoice::after {
        content: 'Thank you for your order! Questions? Contact us at tanya@organicalbotanical.com or (401) 451-6000.';
        display: block;
        margin-top: 40px;
        padding-top: 16px;
        border-top: 1px solid #e0ddd6;
        font-size: 11px;
        color: #888;
        text-align: center;
    }
}

/* ── Booking detail expanded ── */
.ob-booking-detail {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
}

.ob-booking-detail__row {
    display: flex;
    align-items: baseline;
    padding: 6px 0;
    font-size: 0.85rem;
    border: none;
}

.ob-booking-detail__label {
    width: 90px;
    flex-shrink: 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ob-muted, #aaa);
}

.ob-booking-detail__value {
    color: var(--ob-forest, #1e3a0f);
    font-weight: 500;
}

/* ── Order filters ── */
.ob-order-filters {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ob-rule, #e0ddd6);
}

.ob-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ob-filter-label {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ob-muted, #aaa);
}

.ob-filter-select {
    padding: 8px 12px;
    border: 1px solid var(--ob-rule, #ddd);
    border-radius: 3px;
    font-size: 0.82rem;
    color: var(--ob-forest, #1e3a0f);
    background: #fff;
    cursor: pointer;
}

.ob-filter-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ob-filter-date {
    padding: 8px 10px;
    border: 1px solid var(--ob-rule, #ddd);
    border-radius: 3px;
    font-size: 0.82rem;
    color: var(--ob-forest, #1e3a0f);
    background: #fff;
    width: 140px;
}

/* ── Booking sub-tabs ── */
.ob-booking-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ob-rule, #e0ddd6);
}

.ob-booking-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 18px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ob-muted, #888);
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: -1px;
}

.ob-booking-tab:hover { color: var(--ob-forest, #1e3a0f); }

.ob-booking-tab.is-active {
    color: var(--ob-forest, #1e3a0f);
    border-bottom-color: var(--ob-forest, #1e3a0f);
    font-weight: 600;
}

@media ( max-width: 600px ) {
    .ob-order-filters { flex-direction: column; align-items: flex-start; }
    .ob-filter-date-range { flex-wrap: wrap; }
    .ob-filter-date { width: 120px; }
    .ob-booking-tabs { overflow-x: auto; }
    .ob-booking-tab { white-space: nowrap; }
}

/* ── Gift card account layout ── */
.ob-gc-account-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    align-items: start;
}

.ob-gc-card__bar {
    height: 4px;
    background: var(--ob-lite, #edf5e5);
    border-radius: 2px;
    overflow: hidden;
}

.ob-gc-card__bar-fill {
    height: 100%;
    background: var(--ob-forest, #1e3a0f);
    border-radius: 2px;
}

@media ( max-width: 700px ) {
    .ob-gc-account-layout { grid-template-columns: 1fr; }
}