/*!
 * WooKit — My Account page widget.
 * Tabbed layout: Detalii cont / Adrese / Comenzi. Consumes the canonical
 * --wookit-* design tokens; aspect properties carry !important so a host
 * theme cannot restyle the panel chrome or form fields.
 */

.wookit-account-page {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    font-family: var(--wookit-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    color: var(--wookit-body, #334155) !important;
    box-sizing: border-box !important;
}
.wookit-account-page * { box-sizing: border-box !important; }


/* ── Inline notice (success / error after form submit) ─────────────────── */
.wookit-account-notice {
    display: block !important;
    margin: 0 0 16px !important;
    padding: 10px 14px !important;
    border-radius: var(--wookit-radius-sm, 4px) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border: 1px solid transparent !important;
}
.wookit-account-notice--success {
    background: var(--wookit-success-soft, #d1fae5) !important;
    color: var(--wookit-success-text, #047857) !important;
    border-color: color-mix(in srgb, var(--wookit-success, #10b981) 30%, transparent) !important;
}
.wookit-account-notice--error {
    background: var(--wookit-danger-soft, #fee2e2) !important;
    color: var(--wookit-danger-text, #b91c1c) !important;
    border-color: color-mix(in srgb, var(--wookit-danger, #ef4444) 30%, transparent) !important;
}


/* ── Tabs ───────────────────────────────────────────────────────────────
   Horizontal at the top; on narrow screens they wrap onto two rows rather
   than horizontal-scrolling so a thumb can hit any tab without panning. */
.wookit-account-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--wookit-border, #e2e8f0) !important;
    list-style: none !important;
}

.wookit-account-tab,
.wookit-account-tab:visited,
.wookit-account-tab:hover,
.wookit-account-tab:focus,
.wookit-account-tab:active {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--wookit-muted, #64748b) !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: color 150ms ease, border-color 150ms ease !important;
    /* The tab sits flush on the panel border-bottom so the active border can
       visually consume the panel's line. */
    margin-bottom: -1px !important;
}
.wookit-account-tab:hover {
    color: var(--wookit-text, #0f172a) !important;
}
.wookit-account-tab.is-active {
    color: var(--wookit-accent, #6366f1) !important;
    border-bottom-color: var(--wookit-accent, #6366f1) !important;
}
.wookit-account-tab:focus-visible {
    outline: 2px solid var(--wookit-accent, #6366f1) !important;
    outline-offset: 2px !important;
}


/* ── Panels ───────────────────────────────────────────────────────────── */
.wookit-account-panels {
    display: block !important;
    width: 100% !important;
}

.wookit-account-panel {
    display: none !important;
    width: 100% !important;
}
.wookit-account-panel.is-active {
    display: block !important;
}


/* ── Section card ─────────────────────────────────────────────────────── */
.wookit-account-section {
    display: block !important;
    padding: 18px !important;
    margin: 0 0 16px !important;
    background: var(--wookit-surface, #ffffff) !important;
    border: 1px solid var(--wookit-border, #e2e8f0) !important;
    border-radius: var(--wookit-radius-md, 8px) !important;
    box-sizing: border-box !important;
}

.wookit-account-section__title {
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: var(--wookit-text, #0f172a) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}

.wookit-account-section__hint,
.wookit-account-hint {
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: var(--wookit-muted, #64748b) !important;
    line-height: 1.45 !important;
}


/* ── Form grid ────────────────────────────────────────────────────────── */
.wookit-account-form {
    display: block !important;
    width: 100% !important;
}

.wookit-account-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    width: 100% !important;
}
@media (max-width: 600px) {
    .wookit-account-grid {
        grid-template-columns: 1fr !important;
    }
}

.wookit-account-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}
.wookit-account-field--wide {
    grid-column: 1 / -1 !important;
}

.wookit-account-field label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--wookit-text, #0f172a) !important;
    line-height: 1.3 !important;
}

.wookit-account-field input[type="text"],
.wookit-account-field input[type="email"],
.wookit-account-field input[type="password"],
.wookit-account-field input[type="tel"],
.wookit-account-field input[type="number"],
.wookit-account-field select,
.wookit-account-field textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    background: var(--wookit-surface, #ffffff) !important;
    color: var(--wookit-text, #0f172a) !important;
    border: 1.5px solid var(--wookit-border-input, #cbd5e1) !important;
    border-radius: var(--wookit-radius-sm, 4px) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.wookit-account-field input:focus,
.wookit-account-field select:focus,
.wookit-account-field textarea:focus {
    border-color: var(--wookit-accent, #6366f1) !important;
    box-shadow: 0 0 0 3px var(--wookit-accent-soft) !important;
}


/* ── Address form rows (rendered via woocommerce_form_field) ─────────── */
.wookit-account-form--address .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    min-width: 0 !important;
}
.wookit-account-form--address .form-row label {
    display: block !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--wookit-text, #0f172a) !important;
    line-height: 1.3 !important;
}
.wookit-account-form--address .form-row label .optional {
    color: var(--wookit-muted, #64748b) !important;
    font-weight: 400 !important;
}
.wookit-account-form--address .form-row label abbr {
    color: var(--wookit-danger, #ef4444) !important;
    text-decoration: none !important;
}
.wookit-account-form--address .form-row input[type="text"],
.wookit-account-form--address .form-row input[type="email"],
.wookit-account-form--address .form-row input[type="tel"],
.wookit-account-form--address .form-row input[type="number"],
.wookit-account-form--address .form-row select,
.wookit-account-form--address .form-row textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    background: var(--wookit-surface, #ffffff) !important;
    color: var(--wookit-text, #0f172a) !important;
    border: 1.5px solid var(--wookit-border-input, #cbd5e1) !important;
    border-radius: var(--wookit-radius-sm, 4px) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
}
.wookit-account-form--address .form-row input:focus,
.wookit-account-form--address .form-row select:focus,
.wookit-account-form--address .form-row textarea:focus {
    border-color: var(--wookit-accent, #6366f1) !important;
    box-shadow: 0 0 0 3px var(--wookit-accent-soft) !important;
}

/* Two-column row pairs from WC's classes (form-row-first / -last). */
.wookit-account-form--address .form-row-first,
.wookit-account-form--address .form-row-last {
    display: inline-flex !important;
    flex-direction: column !important;
    width: calc(50% - 7px) !important;
    vertical-align: top !important;
}
.wookit-account-form--address .form-row-first { margin-right: 14px !important; }
@media (max-width: 600px) {
    .wookit-account-form--address .form-row-first,
    .wookit-account-form--address .form-row-last {
        display: flex !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
}

/* Select2 (country/state) — match input chrome. */
.wookit-account-form--address .select2-container .select2-selection--single {
    height: auto !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    background: var(--wookit-surface, #ffffff) !important;
    border: 1.5px solid var(--wookit-border-input, #cbd5e1) !important;
    border-radius: var(--wookit-radius-sm, 4px) !important;
}
.wookit-account-form--address .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wookit-text, #0f172a) !important;
    line-height: 1.3 !important;
    padding: 0 !important;
}
.wookit-account-form--address .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
}


/* ── Form actions row ─────────────────────────────────────────────────── */
.wookit-account-actions {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 4px 0 0 !important;
}
.wookit-account-actions .wookit-btn-primary {
    width: auto !important;
    min-width: 200px !important;
}
@media (max-width: 600px) {
    .wookit-account-actions .wookit-btn-primary {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* ── Addresses container — stack billing + shipping with breathing room
   between the two forms so the visual separation is clear. The .section
   inside each form already carries its own card chrome, so the gap is
   pure whitespace between cards. ─────────────────────────────────────── */
.wookit-account-addresses {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}
.wookit-account-addresses .wookit-account-form--address {
    margin: 0 !important;
}


/* ── Orders list ──────────────────────────────────────────────────────── */
.wookit-account-orders-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wookit-account-order {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    margin: 0 !important;
    background: var(--wookit-surface, #ffffff) !important;
    border: 1px solid var(--wookit-border, #e2e8f0) !important;
    border-radius: var(--wookit-radius-md, 8px) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.wookit-account-order:hover {
    border-color: color-mix(in srgb, var(--wookit-border, #e2e8f0) 40%, var(--wookit-muted, #64748b)) !important;
}

.wookit-account-order__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.wookit-account-order__meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.wookit-account-order__number {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--wookit-text, #0f172a) !important;
    font-variant-numeric: tabular-nums;
}
.wookit-account-order__date {
    font-size: 11px !important;
    color: var(--wookit-muted, #64748b) !important;
}

/* Status pill — colors derived from WC's status slug.
   We keep a neutral default and overlay accent/success/danger soft tints
   for the 4 most common slugs. */
.wookit-account-order__status {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    background: var(--wookit-surface-alt, #f8fafc) !important;
    color: var(--wookit-muted, #64748b) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
}
.wookit-account-order__status--completed {
    background: var(--wookit-success-soft, #d1fae5) !important;
    color: var(--wookit-success-text, #047857) !important;
}
/* Processing — distinct light blue so it doesn't read the same as completed. */
.wookit-account-order__status--processing {
    background: #dbeafe !important;
    color: #1e40af !important;
}
.wookit-account-order__status--on-hold,
.wookit-account-order__status--pending {
    background: var(--wookit-warning-soft, #fef3c7) !important;
    color: var(--wookit-warning-text, #b45309) !important;
}
.wookit-account-order__status--failed,
.wookit-account-order__status--cancelled,
.wookit-account-order__status--refunded {
    background: var(--wookit-danger-soft, #fee2e2) !important;
    color: var(--wookit-danger-text, #b91c1c) !important;
}

.wookit-account-order__body {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 10px !important;
    border-top: 1px dashed var(--wookit-border, #e2e8f0) !important;
}
.wookit-account-order__items {
    font-size: 12px !important;
    color: var(--wookit-muted, #64748b) !important;
}
.wookit-account-order__total {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--wookit-text, #0f172a) !important;
    font-variant-numeric: tabular-nums;
    margin-left: auto !important;
}
.wookit-account-order__view {
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
}

@media (max-width: 600px) {
    .wookit-account-order__body {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .wookit-account-order__total {
        margin-left: 0 !important;
    }
    .wookit-account-order__view {
        text-align: center !important;
    }
}


/* ── Empty state (no orders, not logged in) ──────────────────────────── */
.wookit-account-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 36px 18px !important;
    background: var(--wookit-surface-alt, #f8fafc) !important;
    border-radius: var(--wookit-radius-md, 8px) !important;
    text-align: center !important;
}
.wookit-account-empty p {
    margin: 0 !important;
    color: var(--wookit-muted, #64748b) !important;
    font-size: 14px !important;
}
.wookit-account-empty .wookit-btn-primary {
    width: auto !important;
    min-width: 200px !important;
}


/* ── Guest variant of the page (not logged in) ───────────────────────── */
.wookit-account-page--guest {
    padding: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE ORDER VIEW (?wookit_view_order=ID)
   Replaces the tabbed UI with a self-contained order detail view: status
   header, item list, totals table, billing + shipping address cards.
   ═══════════════════════════════════════════════════════════════════════ */
.wookit-account-page--order {
    display: block !important;
}

.wookit-account-order-back,
.wookit-account-order-back:visited {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--wookit-muted, #64748b) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 150ms ease !important;
}
.wookit-account-order-back:hover,
.wookit-account-order-back:focus-visible {
    color: var(--wookit-accent, #6366f1) !important;
    text-decoration: none !important;
}

.wookit-account-order-detail__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--wookit-border, #e2e8f0) !important;
}
.wookit-account-order-detail__title {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--wookit-text, #0f172a) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}
.wookit-account-order-detail__date {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: var(--wookit-muted, #64748b) !important;
}
.wookit-account-order-detail__date strong {
    color: var(--wookit-body, #334155) !important;
    font-weight: 600 !important;
}
.wookit-account-order-detail__subtitle {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--wookit-muted, #64748b) !important;
}


/* ── Order items list ─────────────────────────────────────────────────── */
.wookit-account-order-items {
    list-style: none !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.wookit-account-order-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--wookit-border, #e2e8f0) !important;
}
.wookit-account-order-item:last-child {
    border-bottom: 0 !important;
}
.wookit-account-order-item__thumb {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--wookit-radius-sm, 4px) !important;
    overflow: hidden !important;
    background: var(--wookit-surface-alt, #f8fafc) !important;
    box-shadow: 0 0 0 1px var(--wookit-border, #e2e8f0) !important;
}
.wookit-account-order-item__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    margin: 0 !important;
}
.wookit-account-order-item__info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Name row: title + accent-soft qty pill (mirrors the checkout cart_item
   layout so all three views — cart popup, cart page, order details —
   read with the same density). */
.wookit-account-order-item__name-row {
    display: inline-flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.wookit-account-order-item__name,
.wookit-account-order-item__name:visited {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--wookit-text, #0f172a) !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}
.wookit-account-order-item__name[href]:hover {
    color: var(--wookit-accent, #6366f1) !important;
    text-decoration: none !important;
}
.wookit-account-order-item__qty {
    display: inline-block !important;
    padding: 1px 7px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--wookit-accent, #6366f1) !important;
    background: color-mix(in srgb, var(--wookit-accent, #6366f1) 12%, transparent) !important;
    border-radius: 999px !important;
    vertical-align: middle !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
}

/* Variation attributes + custom item meta (wc_display_item_meta output).
   WC wraps each entry in <ul class="wc-item-meta">. Style as a compact,
   muted block under the title. */
.wookit-account-order-item__meta {
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: var(--wookit-muted, #64748b) !important;
}
.wookit-account-order-item__meta ul,
.wookit-account-order-item__meta ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wookit-account-order-item__meta li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}
.wookit-account-order-item__meta li + li::before {
    content: " · " !important;
    color: var(--wookit-border, #e2e8f0) !important;
    padding: 0 2px !important;
}
.wookit-account-order-item__meta strong,
.wookit-account-order-item__meta .wc-item-meta-label {
    font-weight: 500 !important;
    color: var(--wookit-body, #334155) !important;
}
.wookit-account-order-item__meta p {
    display: inline !important;
    margin: 0 !important;
}

/* Unit-price breakdown shown when qty > 1 — "$32 × 2". */
.wookit-account-order-item__unit {
    font-size: 11px !important;
    color: var(--wookit-muted, #64748b) !important;
    font-variant-numeric: tabular-nums;
}
.wookit-account-order-item__unit bdi {
    color: inherit !important;
}
.wookit-account-order-item__unit-mult {
    color: var(--wookit-body, #334155) !important;
    margin-left: 2px !important;
}

/* Per-line tax info. */
.wookit-account-order-item__tax {
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: var(--wookit-muted, #64748b) !important;
    font-variant-numeric: tabular-nums;
}
.wookit-account-order-item__tax bdi {
    color: inherit !important;
}

.wookit-account-order-item__total {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--wookit-text, #0f172a) !important;
    font-variant-numeric: tabular-nums;
}


/* ── Order totals (WC's get_order_item_totals) ───────────────────────── */
.wookit-account-order-totals {
    list-style: none !important;
    margin: 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--wookit-border, #e2e8f0) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.wookit-account-order-totals__row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    font-size: 13px !important;
    color: var(--wookit-body, #334155) !important;
    font-variant-numeric: tabular-nums;
}
.wookit-account-order-totals__row strong {
    color: var(--wookit-text, #0f172a) !important;
    font-weight: 600 !important;
}
.wookit-account-order-totals__row--order_total {
    margin-top: 4px !important;
    padding-top: 10px !important;
    border-top: 1px dashed var(--wookit-border, #e2e8f0) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--wookit-text, #0f172a) !important;
}
.wookit-account-order-totals__row--order_total strong {
    font-size: 16px !important;
    font-weight: 700 !important;
}


/* ── Address cards (two columns on desktop, stacked on mobile) ──────── */
.wookit-account-order-addresses {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}
@media (max-width: 600px) {
    .wookit-account-order-addresses {
        grid-template-columns: 1fr !important;
    }
}
.wookit-account-order-addresses .wookit-account-section {
    margin: 0 !important;
}
.wookit-account-order-address {
    margin: 0 !important;
    padding: 0 !important;
    font-style: normal !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--wookit-body, #334155) !important;
}
.wookit-account-order-address br {
    display: block !important;
    content: "" !important;
    margin-top: 2px !important;
}
.wookit-account-order-payment {
    margin: 14px 0 0 !important;
    padding-top: 12px !important;
    border-top: 1px dashed var(--wookit-border, #e2e8f0) !important;
    font-size: 12px !important;
    color: var(--wookit-muted, #64748b) !important;
}
.wookit-account-order-payment strong {
    color: var(--wookit-text, #0f172a) !important;
    font-weight: 600 !important;
}