/**
 * Checkout Prep Drawer — Styles
 *
 * Desktop: right-side panel (420px) with backdrop.
 * Mobile: full-screen bottom sheet.
 */

/* ------------------------------------------------------------------ */
/* Drawer overlay + panel                                             */
/* ------------------------------------------------------------------ */

.lje-drawer {
    position: fixed;
    /* #832: the overlay ties #wpadminbar's z-index (99999) and, rendering
       later in the DOM, wins — so on a logged-in session the desktop panel's
       header and Close button covered the toolbar. Starting the whole overlay
       below the bar fixes both surfaces at once: the panel is absolute
       top:0/bottom:0 inside it, and the backdrop is absolute inset:0, so the
       toolbar stays visible and clickable above the scrim. The theme token is
       0px whenever no bar is on screen (logged out, and at or below 600px
       where core stops fixing it), so customers are unaffected; the mobile
       bottom sheet (top:auto; bottom:0) is unaffected either way. */
    inset: var(--lj-admin-bar-h, var(--wp-admin--admin-bar--height, 0px)) 0 0 0;
    z-index: 99999;
    pointer-events: none;
    /* #346: the closed drawer must be genuinely hidden, not just parked
       off-canvas — otherwise its controls sit outside the viewport while
       still keyboard-focusable and visible to hit-testing. The delay keeps
       the panel visible for the 0.3s slide-out transition on close. */
    visibility: hidden;
    transition: visibility 0s 0.35s;
}

.lje-drawer[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}

.lje-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.lje-drawer[aria-hidden="false"] .lje-drawer__backdrop {
    opacity: 1;
}

.lje-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100%;
    background: var(--lj-color-bg, #fff);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.lje-drawer[aria-hidden="false"] .lje-drawer__panel {
    transform: translateX(0);
}

/* Prevent background scroll */
body.lje-drawer-open {
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

.lje-drawer__header {
    padding: 1.2em 1.5em 0.8em;
    border-bottom: 1px solid var(--lj-color-border, #e2e2e2);
    flex-shrink: 0;
}

.lje-drawer__title {
    margin: 0 0 0.6em;
    font-size: 1.2em;
    font-weight: 700;
}

.lje-drawer__close {
    position: absolute;
    top: 0.8em;
    right: 0.8em;
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lj-color-surface-subtle, #f5f5f5) !important;
    border: 1px solid var(--lj-color-border, #e2e2e2) !important;
    border-radius: 50%;
    font-size: 1.1em;
    cursor: pointer;
    color: var(--lj-color-text-muted, #6b6b66) !important;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.lje-drawer__close:hover {
    background: var(--lj-color-border, #e2e2e2) !important;
    color: var(--lj-color-ink, #32322c) !important;
}



/* ------------------------------------------------------------------ */
/* Body                                                                */
/* ------------------------------------------------------------------ */

.lje-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5em;
}

/* ------------------------------------------------------------------ */
/* Accordion sections                                                  */
/* ------------------------------------------------------------------ */

/* Each section reads as a distinct panel (#684): bordered card, collapsed
   panels carry a one-line summary of their current value in the header.
   QA round 2: panel body = light gray, header = white (open and closed),
   so the white address cards/fields pop against the panel. */
.lje-accordion {
    border: 1px solid var(--lj-color-border, #e2e2e2);
    border-radius: 8px;
    background: var(--lj-color-bg-funnel, #f7f7f6);
    margin-bottom: 0.9em;
}

/* #800: two rows inside the same white box — the title and the chevron share
   the first line, the collapsed summary gets the full width of the second.
   `order` does the reordering so the markup (title, preview, chevron) is
   untouched. */
.lje-accordion__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em 0.6em;
    padding: 0.9em 1.1em;
    cursor: pointer;
    background: var(--lj-color-bg, #ffffff);
    border-radius: 7px;
    transition: background 0.15s;
}

.lje-accordion--open .lje-accordion__header {
    border-radius: 7px 7px 0 0;
    border-bottom: 1px solid var(--lj-color-border, #e2e2e2);
}

.lje-accordion__header:hover {
    background: var(--lj-color-bg-funnel, #f7f7f6);
}

/* #876: the header is where focus lands when the previous step completes
   (revealSection). Only :focus-visible, so a mouse-driven advance shows no
   ring at all and a keyboard one gets a deliberate teal outline instead of
   whatever the UA improvises on a div. Inset offset — the header sits flush
   inside the panel's rounded border and an outward ring would clip. */
.lje-accordion__header:focus-visible {
    outline: 2px solid var(--lj-color-primary, #00a5b2);
    outline-offset: -2px;
}

.lje-accordion__title {
    font-weight: 700;
    font-size: 0.82em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lj-color-ink, #32322c);
    flex-shrink: 0;
    order: 0;
}

/* Second row, full width. Single-line summaries (billing "same as shipping",
   the order-options digest) keep the #684 ellipsis so a long note can't stretch
   the header; the multi-line address variant below opts out of it. */
.lje-accordion__preview {
    order: 2;
    /* Basis 100% claims the whole second row; shrink stays ENABLED so it can
       give width back when the row is narrower than that — with shrink off, the
       box itself overflowed the header on a narrow viewport and the ellipsis
       never engaged, because the text was not what was too wide. */
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 0.85em;
    color: var(--lj-color-text-muted, #6b6b66);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* #800: the selected address renders complete — one line per address line,
   never truncated. */
.lje-accordion__preview--lines {
    white-space: normal;
    overflow: visible;
}

.lje-accordion__preview-line {
    display: block;
}

.lje-accordion__placeholder {
    color: var(--lj-color-text-muted, #6b6b66);
    font-style: italic;
}

.lje-accordion__chevron {
    flex-shrink: 0;
    font-size: 1em;
    color: var(--lj-color-text-muted, #6b6b66);
    transition: transform 0.25s ease;
    margin-left: auto;
    order: 1;
}

.lje-accordion--open .lje-accordion__chevron {
    transform: rotate(180deg);
}

.lje-accordion--open .lje-accordion__preview {
    display: none;
}

.lje-accordion__body {
    display: none;
    padding: 1em 1.1em 1.1em;
}

.lje-accordion--open .lje-accordion__body {
    display: block;
}

/* Checkout CTA button — the drawer's primary action: teal (see theme STYLEGUIDE.md). */
.lje-accordion__checkout {
    display: block;
    width: 100%;
    padding: 0.8em 1.4em;
    margin-top: 1.2em;
    border-radius: 4px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    background: var(--lj-color-primary, #00a5b2) !important;
    border: 1px solid var(--lj-color-primary, #00a5b2) !important;
    color: var(--lj-color-text-inverse, #fff) !important;
    transition: background 0.2s, opacity 0.2s;
}

.lje-accordion__checkout:hover {
    background: var(--lj-color-primary-hover, #008a96) !important;
    border-color: var(--lj-color-primary-hover, #008a96) !important;
}

.lje-accordion__checkout:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}



/* ------------------------------------------------------------------ */
/* Address cards (radio-select style)                                  */
/* ------------------------------------------------------------------ */

.lje-cp-address-cards {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    margin-bottom: 1em;
}

.lje-cp-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    padding: 0.8em 1em;
    border: 2px solid var(--lj-color-border, #e2e2e2);
    border-radius: 6px;
    background: var(--lj-color-bg, #ffffff);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.lje-cp-card:hover {
    border-color: var(--lj-color-text-muted, #6b6b66);
}

/* Selection reads in the brand accent (#684 mockup): teal border + teal radio. */
.lje-cp-card--selected {
    border-color: var(--lj-color-primary, #00a5b2);
    background: var(--lj-color-bg, #ffffff);
}

.lje-cp-card__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--lj-color-border, #e2e2e2);
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
}

.lje-cp-card--selected .lje-cp-card__radio {
    border-color: var(--lj-color-primary, #00a5b2);
}

.lje-cp-card--selected .lje-cp-card__radio::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lj-color-primary, #00a5b2);
}

.lje-cp-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.lje-cp-card__info strong {
    font-size: 0.95em;
}

/* Direct children only (#434): the address line is muted, but the badge
   chips nested under __badges keep their own declared colors — the old
   descendant selector (0,1,1) silently beat every .lje-cp-badge--* color
   (0,1,0), so all badge text rendered muted regardless of its rule. */
.lje-cp-card__info > span {
    font-size: 0.85em;
    color: var(--lj-color-text-muted, #6b6b66);
}

.lje-cp-card__badges {
    display: flex;
    gap: 0.3em;
    margin-top: 0.2em;
}

.lje-cp-badge {
    display: inline-block;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: 600;
}

.lje-cp-badge--biz {
    background: var(--lj-color-success-bg, #e7f4ea);
    color: var(--lj-color-success, #1c7c33);
}

.lje-cp-badge--res {
    background: var(--lj-color-warning-bg, #fdf3d7);
    color: var(--lj-color-warning, #8a6d00);
}

/* Navy on purpose (#434 field pass, round 5): "No Dock" is information
   about the address, not a problem with it — red is reserved for genuine
   restrictions (see --pobox below), and the gray pass read as "dock
   disabled". Navy is the system's secondary/informational color; same
   chip in the My Account address book. */
.lje-cp-badge--nodock {
    background: var(--lj-color-navy, #4c6085);
    color: var(--lj-color-text-inverse, #ffffff);
}

/* #434: PO Box rows are visible but never selectable in the SHIPPING
   list (the billing list renders them normally) — muted card, hidden
   radio, badge explains why. */
.lje-cp-card--noship {
    cursor: not-allowed;
    background: var(--lj-color-bg-funnel, #f7f7f6);
}

.lje-cp-card--noship:hover {
    border-color: var(--lj-color-border, #e2e2e2);
}

.lje-cp-card--noship .lje-cp-card__radio {
    visibility: hidden;
}

.lje-cp-badge--pobox {
    background: var(--lj-color-danger-bg, #f8d7da);
    color: var(--lj-color-danger, #721c24);
}

/* "Add New Address" button */
.lje-cp-add-new-btn {
    background: none !important;
    border: 2px dashed var(--lj-color-border, #e2e2e2) !important;
    border-radius: 6px;
    padding: 0.7em 1em;
    color: var(--lj-color-text-muted, #6b6b66) !important;
    cursor: pointer;
    width: 100%;
    font-size: 0.9em;
    margin-bottom: 1em;
    transition: border-color 0.15s, color 0.15s;
}

.lje-cp-add-new-btn:hover {
    border-color: var(--lj-color-text-muted, #6b6b66) !important;
    color: var(--lj-color-ink, #32322c) !important;
}

/* ------------------------------------------------------------------ */
/* Skeleton cards + drawer busy state (#434)                           */
/* ------------------------------------------------------------------ */

/* Ghost cards keep the real card chrome (#684: white card on the gray
   panel body) so the list doesn't reflow when data arrives. */
.lje-cp-card--skeleton {
    pointer-events: none;
}

.lje-cp-card--skeleton .lje-cp-card__info {
    flex: 1;
}

.lje-cp-skeleton-line {
    display: block;
    height: 0.8em;
    border-radius: 4px;
    background: var(--lj-color-border, #e2e2e2);
    animation: lje-cp-skeleton-pulse 1.2s ease-in-out infinite;
}

.lje-cp-skeleton-line--name {
    width: 45%;
    margin-bottom: 0.45em;
}

.lje-cp-skeleton-line--addr {
    width: 80%;
}

@keyframes lje-cp-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .lje-cp-skeleton-line {
        animation: none;
    }
}

/* While any save round trip is in flight the whole drawer is locked:
   headers, cards, radios and form fields stop reacting so a second save
   can't fire over the first and the open section can't switch
   mid-transition. The JS capture guard is the real gate (keyboard
   included); these rules are the visual affordance. Close/backdrop stay
   live — cancelling out is always allowed. */
.lje-drawer--busy .lje-drawer__body {
    cursor: progress;
}

.lje-drawer--busy .lje-accordion__header,
.lje-drawer--busy .lje-cp-card,
.lje-drawer--busy .lje-cp-add-new-btn,
.lje-drawer--busy .lje-cp-edit-actions button,
.lje-drawer--busy .lje-accordion__body input,
.lje-drawer--busy .lje-accordion__body select,
.lje-drawer--busy .lje-accordion__body textarea {
    pointer-events: none;
}

.lje-drawer--busy .lje-accordion__header,
.lje-drawer--busy .lje-cp-card,
.lje-drawer--busy .lje-cp-add-new-btn {
    opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* Inline forms                                                        */
/* ------------------------------------------------------------------ */

.lje-cp-form-wrap {
    margin-top: 0.5em;
}

.lje-cp-form-row {
    display: flex;
    gap: 0.75em;
    margin-bottom: 0.75em;
}

.lje-cp-form-col {
    flex: 1;
}

.lje-cp-form-col--full {
    flex-basis: 100%;
}

.lje-cp-form-col label {
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 0.25em;
    color: var(--lj-color-ink, #32322c);
}

.lje-cp-form-col input[type="text"],
.lje-cp-form-col input[type="tel"],
.lje-cp-form-col input[type="email"],
.lje-cp-form-col select,
.lje-cp-form-col textarea {
    width: 100%;
    padding: 0.5em 0.6em;
    border: 1px solid var(--lj-color-border, #e2e2e2);
    border-radius: 4px;
    font-size: 0.9em;
    font-family: inherit;
}

.lje-cp-form-col input:focus,
.lje-cp-form-col textarea:focus,
.lje-cp-form-col select:focus {
    outline: none;
    border-color: var(--lj-color-text-muted, #6b6b66);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.lje-cp-radio-group {
    display: flex;
    gap: 1em;
    padding-top: 0.4em;
}

.lje-cp-radio-group label {
    font-weight: normal;
    font-size: 0.9em;
}

.lje-cp-radio-group--inline {
    flex-wrap: wrap;
}

.lje-cp-disclaimer {
    font-size: 0.8em;
    color: var(--lj-color-text-muted, #6b6b66);
    margin: 0.5em 0 0;
    line-height: 1.4;
}

.lje-cp-disclaimer--reorder {
    color: var(--lj-color-accent-hover, #d92a33);
    font-weight: 600;
}

.lje-cp-field-label {
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 0.25em;
    color: var(--lj-color-ink, #32322c);
}

/* The asterisk marking a question that has to be answered — it was emitted by
   the markup with no rule of its own until the dock question joined the set
   (#803) and the "required" signal had to actually read as one. */
.lje-cp-required {
    color: var(--lj-color-accent-hover, #d92a33);
}

.lje-cp-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.95em;
    cursor: pointer;
}

.lje-cp-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* ------------------------------------------------------------------ */
/* Step messages                                                       */
/* ------------------------------------------------------------------ */

.lje-cp-step-message {
    display: none;
    padding: 0.6em 0.8em;
    border-radius: 4px;
    font-size: 0.9em;
    margin-top: 1em;
}

.lje-cp-step-message--error {
    background: var(--lj-color-danger-bg, #f8d7da);
    color: var(--lj-color-danger, #721c24);
    border-left: 4px solid var(--lj-color-accent, #fb3640);
}

.lje-cp-step-message--success {
    background: var(--lj-color-success-bg, #e7f4ea);
    color: var(--lj-color-success, #1c7c33);
    border-left: 4px solid var(--lj-color-success-border, #bfe3c8);
}

/* showStepMsg() defaults to 'info' (e.g. "Address saved."), which had no rule
   at all and rendered as bare unstyled text (#725). */
.lje-cp-step-message--info {
    background: var(--lj-color-surface-soft, #f0f0ee);
    color: var(--lj-color-ink, #32322c);
    border-left: 4px solid var(--lj-color-primary, #00a5b2);
}

/* ------------------------------------------------------------------ */
/* Mobile — bottom sheet                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
    .lje-drawer__panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .lje-drawer[aria-hidden="false"] .lje-drawer__panel {
        transform: translateY(0);
    }

    .lje-drawer__body {
        padding: 1em;
    }

    .lje-drawer__header {
        padding: 1em 1em 0.6em;
    }

    .lje-cp-form-row {
        flex-direction: column;
        gap: 0;
    }

    .lje-cp-form-col {
        margin-bottom: 0.6em;
    }

    .lje-accordion__header:hover {
        margin: 0;
        padding: 0.8em 0;
    }
}

/* AvaTax address suggestion (#288) */
.lje-cp-avatax {
    margin: 0.8em 0;
    padding: 0.9em 1em;
    border: 1px solid var(--lj-color-border, #e2e2e2);
    border-left: 3px solid var(--lj-color-primary, #3fa8a0);
    background: var(--lj-color-bg-alt, #f7f7f5);
    border-radius: 4px;
}

.lje-cp-avatax__title {
    margin: 0 0 0.3em;
    font-weight: 600;
}

.lje-cp-avatax__address {
    margin: 0 0 0.7em;
}

.lje-cp-avatax__actions {
    display: flex;
    gap: 0.6em;
    flex-wrap: wrap;
}

.lje-cp-avatax__use,
.lje-cp-avatax__keep {
    cursor: pointer;
    padding: 0.45em 0.9em;
    border-radius: 4px;
    font-size: 0.92em;
}

.lje-cp-avatax__use {
    background: var(--lj-color-primary, #3fa8a0);
    border: 1px solid var(--lj-color-primary, #3fa8a0);
    color: var(--lj-color-text-inverse, #fff);
}

.lje-cp-avatax__keep {
    background: transparent;
    border: 1px solid var(--lj-color-border, #bbb);
    color: inherit;
}

/* Guest account nudge (#290) */
.lje-cp-account-nudge {
    margin: 0.8em 0 0;
    font-size: 0.85em;
    color: var(--lj-color-text-muted, #6a6a6a);
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* In-place edit of saved addresses (#371)                             */
/* ------------------------------------------------------------------ */

.lje-cp-card__edit {
    background: none !important;
    border: 0 !important;
    color: var(--lj-color-primary, #00a5b2) !important;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    padding: 0.1em 0.3em;
    margin-left: auto;
    align-self: flex-start;
    flex-shrink: 0;
    line-height: 1.4;
}

.lje-cp-card__edit:hover {
    text-decoration: underline;
    color: var(--lj-color-primary-hover, #008a96) !important;
}

.lje-cp-edit-banner {
    display: flex;
    gap: 0.5em;
    align-items: center;
    background: var(--lj-color-info-bg, #eef6f7);
    border: 1px solid var(--lj-color-info-border, #cdeaec);
    border-radius: 4px;
    padding: 0.6em 0.9em;
    font-size: 0.85em;
    color: var(--lj-color-ink, #32322c);
    margin-bottom: 1em;
}

.lje-cp-edit-banner[hidden],
.lje-cp-edit-actions[hidden] {
    display: none !important;
}

.lje-cp-edit-actions {
    display: flex;
    gap: 0.7em;
    margin-top: 1em;
}

/* Save = primary action: teal (see theme STYLEGUIDE.md). */
.lje-cp-edit-save {
    background: var(--lj-color-primary, #00a5b2) !important;
    border: 0 !important;
    color: var(--lj-color-text-inverse, #fff) !important;
    border-radius: 4px;
    padding: 0.7em 1.3em;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.lje-cp-edit-save:hover {
    background: var(--lj-color-primary-hover, #008a96) !important;
}

.lje-cp-edit-cancel {
    background: none !important;
    border: 1px solid var(--lj-color-border, #e2e2e2) !important;
    color: var(--lj-color-text-muted, #6b6b66) !important;
    border-radius: 4px;
    padding: 0.7em 1.3em;
    font-size: 0.9em;
    cursor: pointer;
}

.lje-cp-edit-cancel:hover {
    color: var(--lj-color-ink, #32322c) !important;
}

/* ------------------------------------------------------------------ */
/* Focused mode (#371) — arrival from a Review & Pay Edit link         */
/* ------------------------------------------------------------------ */

/* One section, presented as a dedicated edit screen. The cart behind
   recedes further so the arrival doesn't read as "back to the Cart". */

.lje-drawer--focused .lje-drawer__backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.lje-drawer--focused .lje-accordion {
    display: none;
}

.lje-drawer--focused[data-focused-section="shipping"] .lje-accordion[data-section="shipping"],
.lje-drawer--focused[data-focused-section="billing"] .lje-accordion[data-section="billing"],
.lje-drawer--focused[data-focused-section="options"] .lje-accordion[data-section="options"] {
    display: block;
}

.lje-drawer--focused .lje-accordion__header {
    display: none;
}

.lje-drawer--focused .lje-accordion .lje-accordion__body {
    display: block;
    padding: 1.1em;
}

.lje-drawer__back {
    display: inline-block;
    margin: 0 0 0.6em;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--lj-color-primary, #00a5b2);
    text-decoration: none;
}

.lje-drawer__back:hover {
    text-decoration: underline;
    color: var(--lj-color-primary-hover, #008a96);
}

.lje-drawer__back[hidden] {
    display: none !important;
}

/* Legal notices — always visible below the CTA, never buried in a
   collapsed accordion (#371). Same treatment as the review page's note
   above Place order (.woocommerce-privacy-policy-text). */
.lje-cp-legal {
    margin-top: 1em;
}

.lje-cp-legal .lje-cp-disclaimer {
    font-size: var(--lj-text-xs, 0.75rem);
    text-align: center;
    margin: 0 0 0.5em;
}