/**
 * EXIM — My Account styles
 *
 * Brand colours:
 *   primary   #005daa  (corporate blue)
 *   secondary #78D648  (lime green)
 *
 * Scoped under `.woocommerce-account` so no selector leaks into the
 * rest of the storefront. Responsive: sidebar collapses into a drawer
 * below 900px, activated by the burger button added in myaccount.php.
 */

/* ------------------------------------------------------------------------
 * HEADING SIZE RESET
 *
 * The active parent theme (Elementor-based) hard-codes oversized type
 * on every heading tag via `.elementor-kit-NNN h1 { font-size: 50px; }`
 * which has higher specificity than our single-class selectors like
 * `.exim-ma__title`. We re-assert the sizes here with `!important` so
 * the account UI reads at the intended hierarchy regardless of which
 * kit / theme is active.
 *
 * Only the final size matters — weight / line-height / color continue
 * to come from each component's own rule below.
 * ---------------------------------------------------------------------- */
.woocommerce-account .exim-ma__title            { font-size: 20px !important; line-height: 1.25 !important; }
.woocommerce-account .exim-auth__hero h2        { font-size: 26px !important; line-height: 1.2 !important; }
.woocommerce-account .exim-auth__panel h2       { font-size: 18px !important; line-height: 1.3 !important; }
.woocommerce-account .exim-stub__headline       { font-size: 18px !important; line-height: 1.3 !important; }
.woocommerce-account .exim-section__title       { font-size: 15px !important; line-height: 1.3 !important; }
.woocommerce-account .exim-acct-section__title  { font-size: 15px !important; line-height: 1.3 !important; }
.woocommerce-account .exim-addr-card__title     { font-size: 14px !important; line-height: 1.25 !important; }
.woocommerce-account .exim-vo-hero__number      { font-size: 24px !important; line-height: 1.15 !important; }
.woocommerce-account .exim-vo-section-title     { font-size: 14px !important; line-height: 1.3 !important; }
.woocommerce-account .exim-vo-failstate__title  { font-size: 15px !important; line-height: 1.3 !important; }
.woocommerce-account .exim-addr-edit__title     { font-size: 15px !important; line-height: 1.3 !important; }
.woocommerce-account .exim-lostpwd__title       { font-size: 18px !important; line-height: 1.3 !important; }

/* Below 480px, drop the VO hero one notch further */
@media (max-width: 480px) {
    .woocommerce-account .exim-vo-hero__number  { font-size: 22px !important; }
}

/* ------------------------------------------------------------------------
 * Design tokens (scoped to the account page)
 * ---------------------------------------------------------------------- */
.woocommerce-account {
    --ema-primary:         #005daa;
    --ema-primary-dark:    #00467f;
    --ema-primary-50:      #e6f0f7;
    --ema-primary-100:     #cce1ef;
    --ema-secondary:       #78D648;
    --ema-secondary-dark:  #5fb82b;
    --ema-secondary-50:    #eef9e3;
    --ema-bg:              #f6f7f9;
    --ema-card:            #ffffff;
    --ema-border:          #e5e7eb;
    --ema-border-strong:   #d1d5db;
    --ema-text:            #1f2937;
    --ema-text-muted:      #6b7280;
    --ema-success:         #78D648;
    --ema-warning:         #f59e0b;
    --ema-danger:          #ef4444;
    --ema-info:            #005daa;
    --ema-radius:          10px;
    --ema-radius-sm:       6px;
    --ema-shadow:          0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    --ema-shadow-hi:       0 4px 10px rgba(0,0,0,0.06), 0 18px 32px rgba(0,0,0,0.06);
    --ema-focus:           0 0 0 3px rgba(0,93,170,0.15);
}

/* ------------------------------------------------------------------------
 * Page chrome — kill the legacy WC layout (2-column with tiny sidebar)
 * and install our full-width frame.
 * ---------------------------------------------------------------------- */
.woocommerce-account .woocommerce {
    display: block;
    max-width: 1260px;
    margin: 30px auto 60px;
    padding: 0 20px;
    color: var(--ema-text);
    font-size: 14px;
    line-height: 1.55;
}

/* Kill the default page H1 "My account" if the theme prints one —
 * we render our own branded page header inside the content area.
 * Covers the theme's page.php (woocommerce-products-header wrapper)
 * and any other generic entry-title / page-title print. */
.woocommerce-account h1.entry-title,
.woocommerce-account .page-title,
.woocommerce-account .woocommerce-products-header {
    display: none !important;
}

/* ------------------------------------------------------------------------
 * Frame: sidebar + content
 * ---------------------------------------------------------------------- */
.exim-ma {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

/* Sidebar ---------------------------------------------------------------- */
.exim-ma__sidebar {
    background: var(--ema-card);
    border: 1px solid var(--ema-border);
    border-radius: var(--ema-radius);
    padding: 20px;
    box-shadow: var(--ema-shadow);
    position: sticky;
    top: 20px;
}

.exim-ma__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ema-border);
}
.exim-ma__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ema-primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: 0 0 46px;
    letter-spacing: 0.5px;
    background-image: linear-gradient(135deg, var(--ema-primary) 0%, var(--ema-primary-dark) 100%);
}
.exim-ma__profile-text { min-width: 0; }
.exim-ma__profile-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--ema-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.exim-ma__profile-email {
    font-size: 12px;
    color: var(--ema-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Sidebar nav (grouped) ------------------------------------------------- */
.exim-nav { display: flex; flex-direction: column; gap: 6px; }
.exim-nav__top {
    list-style: none;
    margin: 0 0 14px 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--ema-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.exim-nav__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.exim-nav__group + .exim-nav__group { margin-top: 14px; }
.exim-nav__group-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--ema-text-muted);
    padding: 2px 12px 6px;
    margin: 0;
}
.exim-nav__logout-wrap {
    list-style: none;
    margin: 14px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--ema-border);
}

.woocommerce-MyAccount-navigation ul,
.exim-ma__nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.exim-nav__item,
.woocommerce-MyAccount-navigation ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.exim-nav__item a,
.woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--ema-radius-sm);
    color: var(--ema-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease;
    border: none;
    position: relative;
}
.exim-nav__item a:hover,
.woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--ema-primary-50);
    color: var(--ema-primary-dark);
}
.exim-nav__item.is-active a,
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--ema-primary);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 93, 170, 0.25);
}

.exim-nav__icon {
    font-size: 18px;
    width: 20px;
    height: 20px;
    color: inherit;
    flex: 0 0 20px;
    line-height: 1;
}

/* Specialise the logout row: muted + danger-on-hover. */
.exim-nav__item--customer-logout a {
    color: var(--ema-text-muted);
}
.exim-nav__item--customer-logout a:hover {
    color: var(--ema-danger);
    background: #fef2f2;
}
.exim-nav__item--customer-logout a:hover .exim-nav__icon { color: var(--ema-danger); }

/* ------------------------------------------------------------------------
 * Stub "coming soon" card (for endpoints not yet implemented)
 * ---------------------------------------------------------------------- */
.exim-stub {
    text-align: center;
    padding: 48px 40px;
    position: relative;
}
.exim-stub__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--ema-primary-50);
    color: var(--ema-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.exim-stub__icon .dashicons {
    font-size: 36px;
    width: 36px; height: 36px;
    line-height: 1;
}
.exim-stub__headline {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ema-text);
    line-height: 1.3;
}
.exim-stub__body {
    margin: 0 auto 20px;
    max-width: 520px;
    color: var(--ema-text-muted);
    font-size: 13px;
    line-height: 1.6;
}
.exim-stub__badge {
    display: inline-block;
    padding: 4px 14px;
    background: var(--ema-secondary-50);
    color: #2f7711;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 999px;
}

/* Content area ---------------------------------------------------------- */
.exim-ma__content {
    min-width: 0; /* allow children to shrink inside grid */
}
.exim-ma__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px 0;
}
.exim-ma__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ema-text);
    line-height: 1.25;
    letter-spacing: -0.2px;
}
.exim-ma__subtitle {
    margin: 4px 0 0 0;
    color: var(--ema-text-muted);
    font-size: 13px;
    font-weight: 400;
}

/* Burger button for mobile drawer --------------------------------------- */
.exim-ma__burger {
    display: none;
    width: 40px; height: 40px;
    border-radius: var(--ema-radius-sm);
    border: 1px solid var(--ema-border);
    background: var(--ema-card);
    color: var(--ema-text);
    cursor: pointer;
    font-size: 18px;
    align-items: center;
    justify-content: center;
}
.exim-ma__burger:hover { border-color: var(--ema-primary); color: var(--ema-primary); }

/* ------------------------------------------------------------------------
 * Cards, KPI, order list
 * ---------------------------------------------------------------------- */
.exim-card {
    background: var(--ema-card);
    border: 1px solid var(--ema-border);
    border-radius: var(--ema-radius);
    box-shadow: var(--ema-shadow);
    padding: 20px;
}
.exim-card + .exim-card { margin-top: 16px; }

/* KPI grid -------------------------------------------------------------- */
.exim-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 0 24px 0;
}
.exim-kpi {
    background: var(--ema-card);
    border: 1px solid var(--ema-border);
    border-radius: var(--ema-radius);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--ema-shadow);
}
.exim-kpi__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ema-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 6px 0;
}
.exim-kpi__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--ema-text);
    line-height: 1;
}
.exim-kpi__unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--ema-text-muted);
    margin-left: 4px;
}
.exim-kpi--primary::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--ema-primary);
}
.exim-kpi--warning::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--ema-warning);
}
.exim-kpi--success::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--ema-secondary);
}

/* Section header -------------------------------------------------------- */
.exim-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 12px 0;
}
.exim-section__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ema-text);
    line-height: 1.3;
}
.exim-section__link {
    color: var(--ema-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.exim-section__link:hover { color: var(--ema-primary-dark); text-decoration: underline; }

/* Order list (dashboard preview + full orders page) --------------------- */
.exim-orders {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.exim-order {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 16px;
    align-items: center;
    background: var(--ema-card);
    border: 1px solid var(--ema-border);
    border-radius: var(--ema-radius);
    padding: 14px 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.exim-order:hover {
    border-color: var(--ema-primary-100);
    box-shadow: var(--ema-shadow-hi);
}
.exim-order__number {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ema-primary);
    text-decoration: none;
}
.exim-order__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.exim-order__date {
    font-size: 13px;
    color: var(--ema-text);
}
.exim-order__items {
    font-size: 12px;
    color: var(--ema-text-muted);
}
.exim-order__tracking {
    font-size: 12px;
    color: var(--ema-primary);
    text-decoration: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.exim-order__tracking:hover { text-decoration: underline; }
.exim-order__total {
    font-size: 14px;
    font-weight: 700;
    color: var(--ema-text);
    white-space: nowrap;
}
.exim-order__status {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.exim-order__status--success { background: var(--ema-secondary-50); color: #2f7711; }
.exim-order__status--active  { background: var(--ema-primary-50);   color: var(--ema-primary-dark); }
.exim-order__status--pending { background: #fff4d6;                 color: #7c4a03; }
.exim-order__status--failed  { background: #fde2e4;                 color: #991b1b; }

/* Full orders list variant (orders page) — adds an actions column
 * and stacks the action buttons on the right side of each card. */
.exim-orders--full .exim-order {
    grid-template-columns: auto 1fr auto auto auto;
    padding: 16px 18px;
}
.exim-order__tracking .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    margin-right: 2px;
}
.exim-order__tracking-status {
    color: var(--ema-text-muted);
    font-family: inherit;
    font-size: 11px;
    margin-left: 4px;
}
.exim-order__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.exim-order__action {
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: auto !important;
}
.exim-order__action.exim-btn-primary { padding: 6px 14px !important; }

/* Pagination bar below the orders list ---------------------------------- */
.exim-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.exim-pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ema-text);
    background: var(--ema-card);
    border: 1px solid var(--ema-border-strong);
    border-radius: var(--ema-radius-sm);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.exim-pagination__btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}
.exim-pagination__btn:hover {
    color: var(--ema-primary);
    border-color: var(--ema-primary);
    background: var(--ema-primary-50);
}
.exim-pagination__btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--ema-text-muted);
}
.exim-pagination__info {
    font-size: 13px;
    color: var(--ema-text-muted);
    font-weight: 500;
}

/* Empty state ----------------------------------------------------------- */
.exim-empty {
    text-align: center;
    padding: 36px 20px;
    color: var(--ema-text-muted);
    font-size: 14px;
}
.exim-empty .dashicons {
    font-size: 32px;
    width: 32px; height: 32px;
    color: var(--ema-border-strong);
    margin-bottom: 8px;
}
.exim-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--ema-primary);
    color: #fff;
    border: none;
    border-radius: var(--ema-radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 4px rgba(0,93,170,0.25);
}
.exim-btn-primary:hover  { background: var(--ema-primary-dark); color: #fff; }
.exim-btn-primary:active { transform: translateY(1px); }
.exim-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #fff;
    color: var(--ema-text);
    border: 1px solid var(--ema-border-strong);
    border-radius: var(--ema-radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.exim-btn-secondary:hover { border-color: var(--ema-primary); color: var(--ema-primary); }

/* ========================================================================
 * RETURNS & ORDER ISSUES PAGE  (/my-account/returns/)
 *
 * Stacked cards:
 *   1. Invoice lookup (primary entry) — icon header + floating-label
 *      input + Continue/Browse-orders button row + inline error banner
 *      when the submitted invoice can't be found.
 *   2. "How returns work" — numbered 3-step guide so first-time users
 *      know what to expect after hitting Continue.
 *   3. "Need more help" — email + phone strip as an explicit fallback
 *      for users who can't locate their invoice number.
 * ==================================================================== */

/* --- Card spacing (match Tracking page cadence) */
.woocommerce-view-returns .exim-card + .exim-card,
.woocommerce-account .exim-ret-lookup + .exim-card,
.woocommerce-account .exim-ret-how + .exim-card,
.woocommerce-account .exim-ret-lookup + .exim-ret-how,
.woocommerce-account .exim-ret-how + .exim-ret-help {
    margin-top: 16px;
}

/* --- 1. Invoice lookup card */
.exim-ret-lookup { padding: 0; overflow: hidden; }
.exim-ret-lookup__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px 18px;
    background: linear-gradient(135deg, #f6f9fc 0%, #ffffff 60%);
    border-bottom: 1px solid var(--ema-border);
    position: relative;
}
.exim-ret-lookup__head::before {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 180px;
    height: 180px;
    background: var(--ema-primary-50);
    opacity: 0.6;
    border-radius: 50%;
    z-index: 0;
}
.exim-ret-lookup__head > * { position: relative; z-index: 1; }

.exim-ret-lookup__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    background: var(--ema-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 93, 170, 0.25);
}
.exim-ret-lookup__icon.dashicons {
    font-size: 24px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
}
.exim-ret-lookup__title {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ema-text);
    line-height: 1.3;
}
.exim-ret-lookup__desc {
    margin: 0;
    font-size: 13px;
    color: var(--ema-text-muted);
    line-height: 1.55;
    max-width: 620px;
}
.exim-ret-lookup__link {
    color: var(--ema-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed var(--ema-primary-100);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.exim-ret-lookup__link:hover {
    color: var(--ema-primary-dark);
    border-bottom-color: var(--ema-primary);
}

.exim-ret-lookup__form { padding: 22px 24px 24px; }

.exim-ret-lookup__error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--ema-radius-sm);
    color: #991b1b;
    font-size: 13px;
    line-height: 1.45;
}
.exim-ret-lookup__error .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    flex: 0 0 16px;
    color: #dc2626;
}

.exim-ret-lookup__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
}
.exim-ret-lookup__row .exim-field { margin: 0; }

.exim-ret-lookup__actions {
    display: flex;
    flex-shrink: 0;
    align-items: stretch;
    padding-top: 1px; /* align with input visual baseline */
}
.exim-ret-lookup__actions .exim-btn-primary {
    height: 48px;
    padding: 0 20px;
    font-size: 14px;
    white-space: nowrap;
}
.exim-ret-lookup__actions .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* --- 2. How returns work (3-step guide) */
.exim-ret-how { padding: 22px 24px; }

.exim-ret-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.exim-ret-step {
    list-style: none;
    margin: 0;
    padding: 18px;
    background: #fafbfc;
    border: 1px solid var(--ema-border);
    border-radius: var(--ema-radius-sm);
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.exim-ret-step:hover {
    border-color: var(--ema-primary-100);
    box-shadow: 0 2px 8px rgba(0, 93, 170, 0.06);
}
.exim-ret-step__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ema-primary);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 93, 170, 0.2);
}
.exim-ret-step__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ema-text);
    margin-bottom: 4px;
    line-height: 1.3;
}
.exim-ret-step__body {
    font-size: 12px;
    color: var(--ema-text-muted);
    line-height: 1.55;
}

/* --- 3. Need help contact strip */
.exim-ret-help {
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    align-items: stretch;
}
.exim-ret-help__content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--ema-primary-50) 0%, #ffffff 100%);
    border-right: 1px solid var(--ema-border);
}
.exim-ret-help__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--ema-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ema-primary-100);
}
.exim-ret-help__icon.dashicons {
    font-size: 18px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.exim-ret-help__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ema-text);
    margin-bottom: 2px;
}
.exim-ret-help__body {
    font-size: 12px;
    color: var(--ema-text-muted);
    line-height: 1.5;
}

.exim-ret-help__channels {
    display: flex;
    align-items: stretch;
}
.exim-ret-help__channel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    color: var(--ema-text);
    text-decoration: none;
    border-left: 1px solid var(--ema-border);
    transition: background 0.15s ease, color 0.15s ease;
}
.exim-ret-help__channel:first-child { border-left: none; }
.exim-ret-help__channel:hover {
    background: var(--ema-primary-50);
    color: var(--ema-primary);
}
.exim-ret-help__channel > .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 1;
    color: var(--ema-primary);
    flex-shrink: 0;
}
.exim-ret-help__channel-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ema-text-muted);
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1;
}
.exim-ret-help__channel-value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    line-height: 1;
}

@media (max-width: 760px) {
    .exim-ret-lookup__head { flex-direction: column; }
    .exim-ret-lookup__icon { margin-bottom: 4px; }
    .exim-ret-lookup__row { grid-template-columns: 1fr; }
    .exim-ret-lookup__actions .exim-btn-primary { width: 100%; justify-content: center; }

    .exim-ret-steps { grid-template-columns: 1fr; }

    .exim-ret-help {
        grid-template-columns: 1fr;
    }
    .exim-ret-help__content {
        border-right: none;
        border-bottom: 1px solid var(--ema-border);
    }
    .exim-ret-help__channels { flex-direction: column; }
    .exim-ret-help__channel {
        border-left: none;
        border-top: 1px solid var(--ema-border);
    }
    .exim-ret-help__channel:first-child { border-top: none; }
}

/* ========================================================================
 * TRACKING PAGE  (/my-account/tracking/)
 *
 * Unified shipment tracker: one card per order that has a DHL tracking
 * number. Each card mirrors the layout of DHL's own tracking tool
 * (tracking #, progress steps, event history) so the user has one
 * place to look instead of bouncing between individual order pages.
 * ==================================================================== */
.exim-tracking-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.exim-trk-card {
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.exim-trk-card.is-refreshing {
    opacity: 0.7;
    pointer-events: none;
}
.exim-trk-card.is-refreshed {
    box-shadow: 0 0 0 3px rgba(120, 214, 72, 0.35), var(--ema-shadow-hi);
}

/* Top strip: tracking # on left, order ref + status pill on right */
.exim-trk-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: #fafbfc;
    border-bottom: 1px solid var(--ema-border);
}
.exim-trk-card__id {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.exim-trk-card__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ema-text-muted);
    text-transform: uppercase;
}
.exim-trk-card__num {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    font-weight: 700;
    color: #D40511; /* DHL red */
    text-decoration: none;
    letter-spacing: 0.4px;
    transition: color 0.15s ease;
}
.exim-trk-card__num:hover { color: #AA040E; }
.exim-trk-card__num .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

.exim-trk-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.exim-trk-card__order {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ema-primary);
    text-decoration: none;
}
.exim-trk-card__order:hover { color: var(--ema-primary-dark); text-decoration: underline; }

/* --- 5-step progress bar (Label → Picked up → In transit → Out → Delivered) */
.exim-trk-progress {
    list-style: none;
    margin: 0;
    padding: 22px 20px 14px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
    background: #ffffff;
}
.exim-trk-progress__step {
    list-style: none;
    margin: 0;
    padding: 0 6px;
    text-align: center;
    position: relative;
}
.exim-trk-progress__step + .exim-trk-progress__step::before {
    content: '';
    position: absolute;
    left: calc(-50% + 16px);
    right: calc(50% + 16px);
    top: 14px;
    height: 2px;
    background: var(--ema-border);
    z-index: 0;
}
.exim-trk-progress__step.is-done + .exim-trk-progress__step::before {
    background: var(--ema-secondary);
}
.exim-trk-progress__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ema-card);
    border: 2px solid var(--ema-border);
    color: var(--ema-text-muted);
    position: relative;
    z-index: 1;
    margin-bottom: 6px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.exim-trk-progress__dot .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}
.exim-trk-progress__step.is-done .exim-trk-progress__dot {
    background: var(--ema-secondary);
    border-color: var(--ema-secondary);
    color: #fff;
}
.exim-trk-progress__step.is-active .exim-trk-progress__dot {
    background: var(--ema-primary);
    border-color: var(--ema-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 93, 170, 0.15);
    animation: exim-vo-pulse 2s ease-in-out infinite;
}
.exim-trk-progress__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ema-text);
    line-height: 1.3;
    display: block;
}
.exim-trk-progress__step.is-pending .exim-trk-progress__label { color: var(--ema-text-muted); }

/* --- Events timeline (vertical) */
.exim-trk-events {
    padding: 14px 20px 8px;
    border-top: 1px solid var(--ema-border);
}
.exim-trk-events__title {
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--ema-text);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.exim-trk-events__count {
    color: var(--ema-text-muted);
    font-weight: 600;
    margin-left: 4px;
}
.exim-trk-events__list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0 0 0 16px;
    border-left: 2px solid var(--ema-border);
}
.exim-trk-event {
    list-style: none;
    margin: 0;
    padding: 8px 0 10px 14px;
    position: relative;
    font-size: 13px;
    color: var(--ema-text);
}
.exim-trk-event.is-hidden { display: none; }
.exim-trk-event__dot {
    position: absolute;
    left: -23px;
    top: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ema-card);
    border: 2px solid var(--ema-border-strong);
    z-index: 1;
}
.exim-trk-event:first-child .exim-trk-event__dot {
    background: var(--ema-primary);
    border-color: var(--ema-primary);
    box-shadow: 0 0 0 3px rgba(0, 93, 170, 0.15);
}
.exim-trk-event__date {
    font-size: 11px;
    color: var(--ema-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.exim-trk-event__desc {
    font-size: 13px;
    color: var(--ema-text);
    line-height: 1.45;
}
.exim-trk-event:first-child .exim-trk-event__desc {
    font-weight: 600;
    color: var(--ema-primary-dark);
}
.exim-trk-event__loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--ema-text-muted);
}
.exim-trk-event__loc .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    line-height: 1;
}

.exim-trk-events__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--ema-border);
    color: var(--ema-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--ema-radius-sm);
    cursor: pointer;
    margin-top: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.exim-trk-events__toggle:hover {
    background: var(--ema-primary-50);
    border-color: var(--ema-primary-100);
}
.exim-trk-events__toggle .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}

.exim-trk-events--empty {
    padding: 14px 20px;
    text-align: center;
    color: var(--ema-text-muted);
    font-size: 13px;
    border-top: 1px solid var(--ema-border);
}
.exim-trk-events--empty p { margin: 0; }

/* --- Card footer (last sync + actions) */
.exim-trk-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: #fafbfc;
    border-top: 1px solid var(--ema-border);
    flex-wrap: wrap;
}
.exim-trk-card__sync {
    font-size: 11px;
    color: var(--ema-text-muted);
    font-weight: 500;
}
.exim-trk-card__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.exim-trk-card__actions .exim-btn-secondary {
    padding: 6px 12px;
    font-size: 12px;
}
.exim-trk-card__actions .exim-btn-secondary .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}
.exim-trk-card__refresh-spin {
    animation: exim-trk-spin 1s linear infinite;
    display: inline-block;
}
@keyframes exim-trk-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 720px) {
    .exim-trk-card__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .exim-trk-progress {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px 18px;
    }
    .exim-trk-progress__step {
        display: grid;
        grid-template-columns: 34px 1fr;
        align-items: center;
        text-align: left;
        padding: 0;
        gap: 10px;
    }
    .exim-trk-progress__step + .exim-trk-progress__step::before {
        left: 15px;
        right: auto;
        top: -12px;
        bottom: 50%;
        width: 2px;
        height: auto;
    }
    .exim-trk-progress__dot { margin-bottom: 0; grid-row: 1 / span 2; }
    .exim-trk-progress__label { font-size: 13px; }

    .exim-trk-card__foot { flex-direction: column; align-items: stretch; }
    .exim-trk-card__actions { justify-content: flex-end; }
}

/* ========================================================================
 * VIEW ORDER PAGE  (/my-account/view-order/{id}/)
 *
 * Stacked card sections: hero → timeline → items → totals → actions →
 * addresses → updates. Each card extends `.exim-card` for consistency
 * with Dashboard / Orders. Timeline is a horizontal 4-step flex that
 * collapses to vertical below 640px.
 * ==================================================================== */

/* Shared section title used across view-order cards. */
.exim-vo-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ema-text);
    line-height: 1.3;
}
.exim-vo-section-title .dashicons {
    color: var(--ema-primary);
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* Stack the view-order cards with consistent spacing. */
.woocommerce-view-order .exim-card + .exim-card,
.woocommerce-view-order .exim-card + .exim-addr-grid,
.woocommerce-view-order .exim-addr-grid + .exim-card {
    margin-top: 16px;
}

/* ------------------------------------------------------------------------
 * 1. Hero card — compact reference strip
 *    Order number is the visual anchor; status pill is a corner ribbon
 *    (not a dominant right-side stack); DHL tracking becomes an inline
 *    link next to the date so the whole card reads as a single meta
 *    block. Stats strip has moved out to its own Summary card below
 *    the timeline.
 * ---------------------------------------------------------------------- */
.exim-vo-hero {
    background: linear-gradient(135deg, #f6f9fc 0%, #ffffff 60%);
    padding: 20px 24px;
    overflow: hidden;
    position: relative;
}
.exim-vo-hero::before { /* subtle accent arc top-right */
    content: '';
    position: absolute;
    right: -120px;
    top: -120px;
    width: 260px;
    height: 260px;
    background: var(--ema-primary-50);
    opacity: 0.55;
    border-radius: 50%;
    z-index: 0;
}
.exim-vo-hero__lead {
    min-width: 0;
    position: relative;
    z-index: 1;
    padding-right: 120px; /* reserve space so the status pill never collides with long order numbers */
}
.exim-vo-hero__kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ema-text-muted);
    margin-bottom: 4px;
}
.exim-vo-hero__number {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--ema-primary);
    line-height: 1.15;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: -0.3px;
}

/* Meta row: Date · DHL tracking inline link */
.exim-vo-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 13px;
    color: var(--ema-text-muted);
}
.exim-vo-hero__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.exim-vo-hero__date .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    color: var(--ema-text-muted);
}
.exim-vo-hero__meta-sep { color: var(--ema-border-strong); }

.exim-vo-hero__track-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ema-primary);
    text-decoration: none;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--ema-radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}
.exim-vo-hero__track-link:hover {
    background: var(--ema-primary-50);
    color: var(--ema-primary-dark);
}
.exim-vo-hero__track-link .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}
.exim-vo-hero__track-link .dashicons-external {
    font-size: 12px;
    width: 12px;
    height: 12px;
    opacity: 0.7;
}
.exim-vo-hero__track-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* Status pill — top-right ribbon; does not affect lead width */
.exim-vo-hero__status-pill {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 2;
    font-size: 11px;
    padding: 5px 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* --- Summary card: product rows + stats strip ------------------ */
.exim-vo-summary {
    padding: 0;
    overflow: hidden;
}
.exim-vo-summary__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Stats strip — sits below product rows, 4 tiles with hairline dividers. */
.exim-vo-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--ema-border);
    border-top: 1px solid var(--ema-border);
}
.exim-vo-stat {
    background: #fff;
    padding: 14px 18px;
}
.exim-vo-stat__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ema-text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.exim-vo-stat__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--ema-text);
    line-height: 1.2;
}
.exim-vo-stat__value--sm {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    /* Cap at 2 lines and ellipsise — full text available in the tooltip
     * via the cell's title attribute (set in view-order.php). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* ------------------------------------------------------------------------
 * 2. Progress timeline
 * ---------------------------------------------------------------------- */
.exim-vo-timeline-card { padding: 22px; }
.exim-vo-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    counter-reset: vo-step;
}
.exim-vo-timeline__step {
    list-style: none;
    margin: 0;
    padding: 0 8px;
    text-align: center;
    position: relative;
    counter-increment: vo-step;
}
/* Connector line between steps — drawn from the dot of the previous step
 * to the dot of the current one. Hidden on the first step. */
.exim-vo-timeline__step + .exim-vo-timeline__step::before {
    content: '';
    position: absolute;
    left: calc(-50% + 18px);
    right: calc(50% + 18px);
    top: 16px;
    height: 2px;
    background: var(--ema-border);
    z-index: 0;
}
.exim-vo-timeline__step.is-done + .exim-vo-timeline__step::before,
.exim-vo-timeline__step.is-done + .exim-vo-timeline__step.is-done::before {
    background: var(--ema-secondary);
}

.exim-vo-timeline__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ema-card);
    border: 2px solid var(--ema-border);
    color: var(--ema-text-muted);
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.exim-vo-timeline__dot .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
}
.exim-vo-timeline__step.is-done .exim-vo-timeline__dot {
    background: var(--ema-secondary);
    border-color: var(--ema-secondary);
    color: #fff;
}
.exim-vo-timeline__step.is-active .exim-vo-timeline__dot {
    background: var(--ema-primary);
    border-color: var(--ema-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 93, 170, 0.15);
    animation: exim-vo-pulse 2s ease-in-out infinite;
}
@keyframes exim-vo-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 93, 170, 0.15); }
    50%      { box-shadow: 0 0 0 8px rgba(0, 93, 170, 0.08); }
}

.exim-vo-timeline__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ema-text);
    line-height: 1.3;
    margin-bottom: 2px;
}
.exim-vo-timeline__step.is-pending .exim-vo-timeline__label { color: var(--ema-text-muted); }
.exim-vo-timeline__date {
    display: block;
    font-size: 11px;
    color: var(--ema-text-muted);
    line-height: 1.3;
}
/* Inline informational hint under a timeline step — used for
 * "Label created — awaiting DHL pickup" between Confirmed and Shipped. */
.exim-vo-timeline__hint {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    background: var(--ema-primary-50);
    color: var(--ema-primary-dark);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    letter-spacing: 0.2px;
}

/* ------------------------------------------------------------------------
 * 2b. Terminal fail state (cancelled / refunded / failed)
 * ---------------------------------------------------------------------- */
.exim-vo-failstate {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-left: 4px solid var(--ema-danger);
    background: #fef7f7;
}
.exim-vo-failstate--failed { border-left-color: var(--ema-danger); background: #fef7f7; }
.exim-vo-failstate__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fde2e4;
    color: var(--ema-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
}
.exim-vo-failstate__icon.dashicons {
    font-size: 22px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
}
.exim-vo-failstate__title {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ema-danger);
    line-height: 1.3;
}
.exim-vo-failstate__desc {
    margin: 0;
    font-size: 13px;
    color: var(--ema-text);
    line-height: 1.55;
}

/* ------------------------------------------------------------------------
 * 3. Order summary line items — rendered inside .exim-vo-summary
 *
 * Each <li> holds a 4-column grid: thumbnail | name+meta+badges | qty | total.
 * No card header anymore — the product rows are the summary's opening
 * content, with the stats strip as a hairline-separated footer below.
 * ---------------------------------------------------------------------- */
.exim-vo-line {
    display: grid;
    grid-template-columns: 64px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--ema-border);
}
.exim-vo-summary__items > .exim-vo-line:first-child { border-top: none; }
.exim-vo-line__img {
    width: 64px;
    height: 64px;
    border: 1px solid var(--ema-border);
    border-radius: var(--ema-radius-sm);
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ema-border-strong);
}
.exim-vo-line__img img,
.exim-vo-line__img-el {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.exim-vo-line__img .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    line-height: 1;
}
.exim-vo-line__body { min-width: 0; }
.exim-vo-line__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ema-text);
    line-height: 1.35;
    margin-bottom: 4px;
}
.exim-vo-line__name a {
    color: var(--ema-text);
    text-decoration: none;
    transition: color 0.15s ease;
}
.exim-vo-line__name a:hover { color: var(--ema-primary); }
.exim-vo-line__meta {
    font-size: 12px;
    color: var(--ema-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.4;
}
.exim-vo-line__sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.exim-vo-line__unit {
    color: var(--ema-text-muted);
}
.exim-vo-line__sep { color: var(--ema-border-strong); }
.exim-vo-line__itemmeta { display: inline; }

.exim-vo-line__qty {
    text-align: right;
    color: var(--ema-text);
    font-size: 13px;
    min-width: 60px;
}
.exim-vo-line__qty-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ema-text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}
.exim-vo-line__qty-num {
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.exim-vo-line__total {
    font-size: 15px;
    font-weight: 700;
    color: var(--ema-text);
    white-space: nowrap;
    min-width: 90px;
    text-align: right;
}

/* ------------------------------------------------------------------------
 * 4. Actions card
 * ---------------------------------------------------------------------- */
.exim-vo-actions-card { padding: 20px; }
.exim-vo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------------
 * 6. Addresses grid — contact rows (phone / email) below each address
 * ---------------------------------------------------------------------- */
.exim-vo-addresses { margin-top: 16px; }
.exim-vo-addr-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ema-text-muted);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--ema-border);
}
.exim-vo-addr-contact:first-of-type { margin-top: 12px; }
.exim-vo-addr-contact .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    color: var(--ema-primary);
    flex: 0 0 14px;
}
.exim-vo-addr-contact a {
    color: var(--ema-text);
    text-decoration: none;
    transition: color 0.15s ease;
}
.exim-vo-addr-contact a:hover { color: var(--ema-primary); text-decoration: underline; }

/* ------------------------------------------------------------------------
 * 7. Order updates (customer-visible admin notes)
 * ---------------------------------------------------------------------- */
.exim-vo-updates { padding: 20px; }
.exim-vo-updates__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.exim-vo-update {
    padding: 12px 14px;
    background: #fafbfc;
    border: 1px solid var(--ema-border);
    border-left: 3px solid var(--ema-primary);
    border-radius: var(--ema-radius-sm);
}
.exim-vo-update__meta {
    font-size: 11px;
    color: var(--ema-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-bottom: 6px;
}
.exim-vo-update__body {
    font-size: 13px;
    color: var(--ema-text);
    line-height: 1.55;
}
.exim-vo-update__body p { margin: 0 0 8px 0; }
.exim-vo-update__body p:last-child { margin-bottom: 0; }

/* ========================================================================
 * VIEW ORDER — responsive
 * ==================================================================== */
@media (max-width: 780px) {
    .exim-vo-stats { grid-template-columns: repeat(2, 1fr); }
    .exim-vo-hero__lead { padding-right: 0; }
    .exim-vo-hero__status-pill {
        position: static;
        display: inline-block;
        margin-bottom: 10px;
    }

    .exim-vo-timeline { grid-template-columns: 1fr; gap: 14px; }
    .exim-vo-timeline__step { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; text-align: left; padding: 0; }
    .exim-vo-timeline__step + .exim-vo-timeline__step::before {
        left: 17px;
        right: auto;
        top: -14px;
        bottom: 50%;
        width: 2px;
        height: auto;
    }
    .exim-vo-timeline__dot { margin-bottom: 0; grid-row: 1 / span 2; }
    .exim-vo-timeline__label { margin-bottom: 0; }

    .exim-vo-line {
        grid-template-columns: 56px 1fr;
        gap: 12px;
        padding: 14px;
    }
    .exim-vo-line__img { width: 56px; height: 56px; }
    .exim-vo-line__qty   { grid-column: 2; grid-row: 2; text-align: left; min-width: 0; }
    .exim-vo-line__total { grid-column: 2; grid-row: 3; text-align: left; }
}

@media (max-width: 480px) {
    .exim-vo-hero { padding: 16px 18px; }
    .exim-vo-stats { grid-template-columns: 1fr; }
    .exim-vo-hero__number { font-size: 22px; }
    .exim-vo-line { padding: 14px; }
}

/* ------------------------------------------------------------------------
 * WooCommerce notices inside the account pages
 *
 * Success / error / info banners shown after form submits (e.g. "Account
 * details changed successfully", "Address saved"). Restyled so they sit
 * nicely above the card UI instead of using the default WC blue box.
 * ---------------------------------------------------------------------- */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notice {
    position: relative;
    padding: 12px 18px 12px 44px;
    border-radius: var(--ema-radius-sm);
    border: 1px solid transparent;
    font-size: 13px;
    margin: 0 0 16px 0;
    list-style: none;
    background-color: var(--ema-primary-50);
    color: var(--ema-primary-dark);
    border-color: var(--ema-primary-100);
    line-height: 1.5;
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-notice::before {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: dashicons;
    font-size: 18px;
    line-height: 1;
    content: "\f348"; /* info */
}
.woocommerce-account .woocommerce-message {
    background-color: var(--ema-secondary-50);
    color: #2f7711;
    border-color: #c7ecb0;
}
.woocommerce-account .woocommerce-message::before { content: "\f147"; /* yes */ color: #2f7711; }
.woocommerce-account .woocommerce-error {
    background-color: #fde2e4;
    color: #991b1b;
    border-color: #f6c1c4;
}
.woocommerce-account .woocommerce-error::before { content: "\f534"; /* warning */ color: #991b1b; }
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button { display: none; } /* declutter — button is decorative */

/* ------------------------------------------------------------------------
 * Login & Security page — sectioned form with card blocks
 *
 * The Edit Account template is rebuilt as two card sections (Profile /
 * Password) with iconified headers and floating-label inputs. Field
 * names remain unchanged so WC's native save handler still works.
 * ---------------------------------------------------------------------- */
.exim-acct-form { display: flex; flex-direction: column; gap: 16px; }
.exim-acct-section { padding: 0; }
.exim-acct-section__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ema-border);
    background: #fafbfc;
}
.exim-acct-section__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ema-primary-50);
    color: var(--ema-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    font-size: 20px;
}
.exim-acct-section__icon.dashicons {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.exim-acct-section__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ema-text);
    line-height: 1.3;
}
.exim-acct-section__desc {
    margin: 3px 0 0 0;
    font-size: 12px;
    color: var(--ema-text-muted);
    line-height: 1.45;
}
.exim-acct-section__body { padding: 20px; }
.exim-acct-section__body .exim-field:last-child { margin-bottom: 0; }

.exim-field__hint {
    display: block;
    margin: 6px 2px 0;
    font-size: 12px;
    color: var(--ema-text-muted);
    line-height: 1.4;
}

.exim-acct-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
}
.exim-acct-save {
    min-width: 180px;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
}
.exim-acct-save .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
}

/* When a required marker is inside a floating label, keep it the same
 * danger colour regardless of float state. */
.exim-field label .required {
    color: var(--ema-danger);
    margin-left: 2px;
    font-weight: 700;
}

/* ------------------------------------------------------------------------
 * Addresses page — 2-card grid (billing + shipping)
 *
 * WC default stacks the two blocks vertically and uses <h3> headings
 * that look out of place next to our KPI/order cards. We render each
 * address as its own card with an icon, edit link, and a friendly
 * empty-state when the user hasn't saved one yet.
 * ---------------------------------------------------------------------- */
.exim-addr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.exim-addr-card {
    background: var(--ema-card);
    border: 1px solid var(--ema-border);
    border-radius: var(--ema-radius);
    box-shadow: var(--ema-shadow);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.exim-addr-card:hover {
    border-color: var(--ema-primary-100);
    box-shadow: var(--ema-shadow-hi);
}
.exim-addr-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ema-border);
    background: #fafbfc;
}
.exim-addr-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ema-primary-50);
    color: var(--ema-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 32px;
}
.exim-addr-card__icon.dashicons { /* dashicons add their own width — normalise */
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
}
.exim-addr-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ema-text);
    flex: 1;
    line-height: 1.25;
}
.exim-addr-card__edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ema-primary);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--ema-radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}
.exim-addr-card__edit:hover {
    background: var(--ema-primary-50);
    color: var(--ema-primary-dark);
}
.exim-addr-card__edit .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}
.exim-addr-card__body {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.exim-addr-card__body address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ema-text);
    margin: 0;
}
.exim-addr-card__empty {
    text-align: center;
    padding: 6px 4px;
    color: var(--ema-text-muted);
}
.exim-addr-card__empty p {
    margin: 0 0 14px 0;
    font-size: 13px;
}
.exim-addr-card__empty .exim-btn-primary {
    padding: 8px 16px;
    font-size: 13px;
}
.exim-addr-card__empty .exim-btn-primary .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* ------------------------------------------------------------------------
 * Lost Password page  (/my-account/lost-password/)
 *
 * The request-reset-link flow shown to both logged-in and logged-out
 * users. We render it as a small centered card so the visual weight
 * matches the task (one email field + one button).
 * ---------------------------------------------------------------------- */
.exim-lostpwd {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}
.exim-lostpwd__card {
    width: 100%;
    max-width: 440px;
    background: var(--ema-card);
    border: 1px solid var(--ema-border);
    border-radius: var(--ema-radius);
    box-shadow: var(--ema-shadow);
    padding: 32px 28px 24px;
    text-align: center;
}
.exim-lostpwd__head { margin-bottom: 20px; }
.exim-lostpwd__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ema-primary-50);
    color: var(--ema-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.exim-lostpwd__icon.dashicons {
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: 26px;
    text-align: center;
}
.exim-lostpwd__title {
    margin: 0 0 6px 0;
    font-weight: 700;
    color: var(--ema-text);
}
.exim-lostpwd__desc {
    margin: 0;
    font-size: 13px;
    color: var(--ema-text-muted);
    line-height: 1.55;
}

.exim-lostpwd__form {
    text-align: left;
    margin-bottom: 18px;
}
.exim-lostpwd__submit {
    width: 100%;
    justify-content: center;
    padding: 12px 22px;
    font-size: 14px;
    margin-top: 4px;
}
.exim-lostpwd__submit .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

.exim-lostpwd__foot {
    padding-top: 14px;
    border-top: 1px solid var(--ema-border);
    font-size: 13px;
}
.exim-lostpwd__foot a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ema-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease, transform 0.05s ease;
}
.exim-lostpwd__foot a:hover {
    color: var(--ema-primary-dark);
    transform: translateX(-2px);
}
.exim-lostpwd__foot .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}

/* ------------------------------------------------------------------------
 * Edit Address page  (/my-account/edit-address/billing|shipping/)
 *
 * Child page: clicking "Edit" on the Addresses list lands here. We wrap
 * WooCommerce's default form in our own card UI, add a breadcrumb-style
 * back link, a small icon header, and a proper footer action row with
 * Save + Cancel buttons.
 * ---------------------------------------------------------------------- */

/* Top-of-page back link */
.exim-addr-edit__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ema-primary);
    text-decoration: none;
    margin: 0 0 14px 0;
    padding: 6px 10px 6px 6px;
    border-radius: var(--ema-radius-sm);
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.exim-addr-edit__back:hover {
    background: var(--ema-primary-50);
    color: var(--ema-primary-dark);
    transform: translateX(-2px);
}
.exim-addr-edit__back .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* Card frame around the form — limit width so it doesn't stretch full. */
.exim-addr-edit {
    max-width: 720px;
    margin: 0;
}
.exim-addr-edit__card {
    padding: 0;
    overflow: hidden;
}

/* Header strip with icon + title + subtitle */
.exim-addr-edit__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    background: #fafbfc;
    border-bottom: 1px solid var(--ema-border);
}
.exim-addr-edit__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ema-primary-50);
    color: var(--ema-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    font-size: 20px;
}
.exim-addr-edit__icon.dashicons {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.exim-addr-edit__title {
    margin: 0;
    font-weight: 700;
    color: var(--ema-text);
}
.exim-addr-edit__subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--ema-text-muted);
    line-height: 1.45;
}

/* Body (form fields) */
.exim-addr-edit__body {
    padding: 22px;
    background: var(--ema-card);
    border: none !important; /* remove the default pseudo-border we used before */
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Footer actions row */
.exim-addr-edit__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--ema-border);
    margin-top: 18px;
}
.exim-addr-edit__save {
    padding: 10px 22px;
    font-size: 14px;
}
.exim-addr-edit__save .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* ------------------------------------------------------------------------
 * WooCommerce form-field styling (shared by edit-address + add-payment)
 *
 * Normalises the raw `woocommerce_form_field()` output so inputs, selects
 * and labels match our design tokens instead of inheriting theme default.
 * Uses 2-column grid on wide screens for first/last name + city/postcode
 * pairs, collapses to 1-column below 560px.
 * ---------------------------------------------------------------------- */

/* 2-column row for first-name/last-name + town/postcode etc. */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 16px;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide,
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-first,
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-last,
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row {
    margin: 0;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1;
}

/* Label */
.woocommerce-account .woocommerce-address-fields label,
.woocommerce-account .woocommerce-form__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ema-text);
    margin-bottom: 4px;
    line-height: 1.3;
}
.woocommerce-account .woocommerce-address-fields .required,
.woocommerce-account .woocommerce-form__label .required { color: var(--ema-danger); }
.woocommerce-account .woocommerce-address-fields .optional {
    font-size: 11px;
    color: var(--ema-text-muted);
    font-weight: 500;
    font-style: normal;
}

/* Inputs, selects, textarea */
.woocommerce-account .woocommerce-address-fields input[type="text"],
.woocommerce-account .woocommerce-address-fields input[type="tel"],
.woocommerce-account .woocommerce-address-fields input[type="email"],
.woocommerce-account .woocommerce-address-fields input[type="number"],
.woocommerce-account .woocommerce-address-fields select,
.woocommerce-account .woocommerce-address-fields textarea {
    width: 100%;
    height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--ema-border-strong);
    border-radius: var(--ema-radius-sm);
    font-size: 14px;
    background: var(--ema-card);
    color: var(--ema-text);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.3;
    box-sizing: border-box;
}
.woocommerce-account .woocommerce-address-fields textarea {
    height: auto;
    min-height: 82px;
    padding-top: 10px;
    resize: vertical;
}
.woocommerce-account .woocommerce-address-fields input:focus,
.woocommerce-account .woocommerce-address-fields select:focus,
.woocommerce-account .woocommerce-address-fields textarea:focus {
    outline: none;
    border-color: var(--ema-primary);
    box-shadow: var(--ema-focus);
}

/* Select2 (country dropdown) — tame the default height so it matches
 * other inputs and uses our primary border on focus. */
.woocommerce-account .select2-container .select2-selection--single {
    height: 42px;
    border: 1px solid var(--ema-border-strong);
    border-radius: var(--ema-radius-sm);
    background: var(--ema-card);
}
.woocommerce-account .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--ema-text);
}
.woocommerce-account .select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px;
}
.woocommerce-account .select2-container--focus .select2-selection--single,
.woocommerce-account .select2-container--open .select2-selection--single {
    border-color: var(--ema-primary) !important;
    box-shadow: var(--ema-focus);
}

/* Field description (helper text below input) */
.woocommerce-account .woocommerce-address-fields .description {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--ema-text-muted);
    line-height: 1.45;
}

@media (max-width: 560px) {
    .woocommerce-account .woocommerce-address-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------------
 * Payment methods page — credit-card inspired cards
 *
 * Each saved method renders as a visa-style gradient card with chip,
 * masked number, expiry, default badge, and delete action. Actions
 * live in a footer strip below the card body so the "card" itself
 * stays visually clean.
 * ---------------------------------------------------------------------- */
.exim-pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.exim-pm-card {
    position: relative;
    background: linear-gradient(135deg, var(--ema-primary) 0%, var(--ema-primary-dark) 100%);
    color: #fff;
    border-radius: var(--ema-radius);
    box-shadow: var(--ema-shadow-hi);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.exim-pm-card::before { /* decorative arc for flair */
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 180px;
    height: 180px;
    background: var(--ema-secondary);
    opacity: 0.15;
    border-radius: 50%;
}
.exim-pm-card__chip {
    position: absolute;
    top: 18px;
    left: 20px;
    width: 42px;
    height: 30px;
    background: linear-gradient(135deg, #f7d87b 0%, #d4a52c 100%);
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.4);
}
.exim-pm-card__chip .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
}
.exim-pm-card__body {
    padding: 64px 22px 18px;
    position: relative;
}
.exim-pm-card__brand {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 10px;
}
.exim-pm-card__number {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 14px;
    word-spacing: 4px;
}
.exim-pm-card__expires {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.exim-pm-card__expires-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.exim-pm-card__expires-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.exim-pm-card__badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--ema-secondary);
    color: #163903;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 1;
}
.exim-pm-card__actions {
    background: rgba(0, 0, 0, 0.12);
    padding: 10px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.exim-pm-card__actions .exim-btn-secondary {
    background: rgba(255, 255, 255, 0.95);
    color: var(--ema-text);
    padding: 6px 14px;
    font-size: 12px;
    border-color: transparent;
}
.exim-pm-card__actions .exim-btn-secondary:hover {
    background: #fff;
    border-color: transparent;
    color: var(--ema-primary);
}
.exim-pm-card__action--danger { color: var(--ema-danger) !important; }
.exim-pm-card__action--danger:hover { color: #fff !important; background: var(--ema-danger) !important; }
.exim-pm-card__action--danger .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}

/* Brand-specific tints (fallback for cards we don't explicitly theme).
 * This way a Mastercard renders slightly differently from Visa so the
 * user can tell them apart at a glance. */
.exim-pm-card__brand--mastercard ~ .exim-pm-card__body,
.exim-pm-card:has(.exim-pm-card__brand--mastercard) {
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
}
.exim-pm-card:has(.exim-pm-card__brand--amex) {
    background: linear-gradient(135deg, #0078a0 0%, #005b7a 100%);
}

.exim-pm-empty { margin-bottom: 16px; }
.exim-pm-add {
    margin-top: 16px;
    display: flex;
    justify-content: flex-start;
}
.exim-pm-add .exim-btn-primary .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* ------------------------------------------------------------------------
 * Login + Register page — split card layout
 * ---------------------------------------------------------------------- */
.exim-auth {
    min-height: 520px;
    background: var(--ema-card);
    border: 1px solid var(--ema-border);
    border-radius: var(--ema-radius);
    box-shadow: var(--ema-shadow);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.exim-auth__hero {
    padding: 48px 44px;
    background: linear-gradient(135deg, var(--ema-primary) 0%, var(--ema-primary-dark) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
/* Subtle green accent arc on hero */
.exim-auth__hero::before {
    content: '';
    position: absolute;
    right: -80px; bottom: -80px;
    width: 240px; height: 240px;
    background: var(--ema-secondary);
    opacity: 0.18;
    border-radius: 50%;
}
.exim-auth__hero h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 14px 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
    position: relative;
}
.exim-auth__hero p {
    color: rgba(255,255,255,0.82);
    margin: 0 0 22px 0;
    font-size: 14px;
    line-height: 1.65;
    position: relative;
}
.exim-auth__hero-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.exim-auth__hero-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    color: rgba(255,255,255,0.95);
    font-size: 13px;
}
.exim-auth__hero-list .dashicons {
    color: var(--ema-secondary);
    font-size: 18px;
    width: 18px; height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
}

.exim-auth__form-wrap { padding: 40px 44px; }
.exim-auth__tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 22px 0;
    border-bottom: 1px solid var(--ema-border);
}
.exim-auth__tab {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ema-text-muted);
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.exim-auth__tab:hover { color: var(--ema-primary); }
.exim-auth__tab.is-active {
    color: var(--ema-primary);
    border-bottom-color: var(--ema-primary);
}
.exim-auth__panel { display: none; }
.exim-auth__panel.is-active { display: block; }
.exim-auth__panel h2 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ema-text);
    line-height: 1.3;
}
.exim-auth__panel p.lead {
    margin: 0 0 18px 0;
    color: var(--ema-text-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* Form fields (floating label look) ------------------------------------- */
.exim-field {
    position: relative;
    margin-bottom: 14px;
}
.exim-field input[type="text"],
.exim-field input[type="email"],
.exim-field input[type="password"],
.exim-field input[type="tel"] {
    width: 100%;
    height: 48px;
    padding: 18px 14px 6px;
    font-size: 14px;
    border: 1px solid var(--ema-border-strong);
    border-radius: var(--ema-radius-sm);
    background: var(--ema-card);
    color: var(--ema-text);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.3;
}
.exim-field input:focus {
    outline: none;
    border-color: var(--ema-primary);
    box-shadow: var(--ema-focus);
}
.exim-field label {
    position: absolute;
    left: 14px; top: 14px;
    font-size: 13px;
    color: var(--ema-text-muted);
    pointer-events: none;
    transition: transform 0.15s ease, color 0.15s ease, font-size 0.15s ease;
    background: transparent;
    padding: 0 4px;
    line-height: 1;
    z-index: 1;
}
/* Float when the input is focused OR has content. The :has() selector
 * covers the case where WooCommerce wraps the password input in
 * <span class="password-input">, breaking the direct `input + label`
 * sibling relationship. Modern browsers (Chrome/Edge/Safari/Firefox ≥ 121)
 * support :has well; older ones fall back to the direct-sibling rule. */
.exim-field input:focus + label,
.exim-field input:not(:placeholder-shown) + label,
.exim-field:focus-within label,
.exim-field:has(input:not(:placeholder-shown)) label {
    transform: translateY(-10px);
    font-size: 11px;
    color: var(--ema-primary);
    background: var(--ema-card);
}
.exim-field .required { color: var(--ema-danger); }

/* ------------------------------------------------------------------------
 * Password field — show / hide toggle button
 *
 * WooCommerce injects this structure:
 *   <span class="password-input">
 *     <input type="password" …>
 *     <button class="show-password-input [display-password]">…</button>
 *   </span>
 *
 * The button has no visible content — we render the eye icon with a
 * ::before pseudo-element using Dashicons. Class `display-password`
 * is toggled by WC's own JS when the password is revealed, so we
 * swap the glyph accordingly.
 * ---------------------------------------------------------------------- */
.exim-field .password-input {
    position: relative;
    display: block;
    width: 100%;
}
.exim-field .password-input > input {
    /* Reserve space for the absolute-positioned eye button on the right. */
    padding-right: 48px;
}
.exim-field .show-password-input {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--ema-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
    line-height: 1;
}
.exim-field .show-password-input:hover,
.exim-field .show-password-input:focus-visible {
    color: var(--ema-primary);
    background: var(--ema-primary-50);
    outline: none;
}
.exim-field .show-password-input::before {
    /* Default: password hidden → eye icon ("click to reveal") */
    font-family: dashicons, sans-serif;
    font-size: 20px;
    line-height: 1;
    content: "\f177"; /* dashicons-visibility */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    speak: never;
}
.exim-field .show-password-input.display-password::before {
    /* Revealed: eye-slash ("click to hide") */
    content: "\f530"; /* dashicons-hidden */
}

.exim-field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 520px) { .exim-field-group { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------
 * Section divider inside auth forms — a subtle label + rule combo that
 * groups related fields (e.g. "Shipping address") without the weight
 * of a full h2/h3.
 * ---------------------------------------------------------------------- */
.exim-form-divider {
    position: relative;
    text-align: center;
    margin: 18px 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ema-text-muted);
    text-transform: uppercase;
}
.exim-form-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ema-border);
    z-index: 0;
}
.exim-form-divider span {
    position: relative;
    z-index: 1;
    background: var(--ema-card);
    padding: 0 12px;
}

/* Select variant of exim-field — same visual weight as text inputs.
 * Uses native <select> (no Select2) to keep the form snappy without
 * extra JS. Arrow is drawn with a background SVG to match primary tint. */
.exim-field--select select {
    width: 100%;
    height: 48px;
    padding: 18px 36px 6px 14px;
    font-size: 14px;
    border: 1px solid var(--ema-border-strong);
    border-radius: var(--ema-radius-sm);
    background: var(--ema-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23005daa' d='M1.41 0L6 4.59 10.59 0 12 1.41 6 7.41 0 1.41z'/></svg>") no-repeat right 14px center;
    color: var(--ema-text);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.3;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.exim-field--select select:focus {
    outline: none;
    border-color: var(--ema-primary);
    box-shadow: var(--ema-focus);
}
/* Select floating label — selects always have a value (pre-selected
 * or placeholder), so keep the label in the floated position by
 * default. Toggling via state is unreliable without JS. */
.exim-field--select > label {
    transform: translateY(-10px);
    font-size: 11px;
    color: var(--ema-text-muted);
    background: var(--ema-card);
}
.exim-field--select:focus-within > label {
    color: var(--ema-primary);
}
.exim-field--select select option[value=""] { color: var(--ema-text-muted); }

.exim-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 12px;
    flex-wrap: wrap;
}
.exim-form__remember { font-size: 13px; color: var(--ema-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.exim-form__forgot {
    font-size: 13px;
    color: var(--ema-primary);
    text-decoration: none;
    font-weight: 600;
}
.exim-form__forgot:hover { text-decoration: underline; color: var(--ema-primary-dark); }
.exim-auth .exim-form__submit,
button.exim-form__submit,
input.exim-form__submit {
    width: 100%;
    margin-top: 10px;
    padding: 12px 20px;
    background: var(--ema-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--ema-radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 4px rgba(0,93,170,0.25);
    text-transform: none;
    line-height: 1.3;
}
.exim-auth .exim-form__submit:hover,
button.exim-form__submit:hover { background: var(--ema-primary-dark) !important; }
.exim-form__foot {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--ema-text-muted);
}
.exim-form__foot a { color: var(--ema-primary); font-weight: 600; text-decoration: none; }
.exim-form__foot a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------------
 * Override raw WooCommerce form elements inside our frame
 * (some themes/plugins render their own markup that bypasses our classes)
 * ---------------------------------------------------------------------- */
.exim-auth .woocommerce-form-row { margin-bottom: 14px; }
.exim-auth .woocommerce-form-row label { display: none; }    /* we use floating labels */
.exim-auth .woocommerce-form-row input {
    width: 100%;
    height: 48px;
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid var(--ema-border-strong);
    border-radius: var(--ema-radius-sm);
    background: var(--ema-card);
    color: var(--ema-text);
}
.exim-auth .woocommerce-form-row input:focus { border-color: var(--ema-primary); box-shadow: var(--ema-focus); outline: none; }
.exim-auth .woocommerce-privacy-policy-text { font-size: 11px; color: var(--ema-text-muted); margin: 8px 0 0; }
.exim-auth .woocommerce-privacy-policy-text a { color: var(--ema-primary); }

/* ------------------------------------------------------------------------
 * Mobile drawer
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
    .exim-ma { grid-template-columns: 1fr; }
    .exim-ma__burger { display: inline-flex; }

    .exim-ma__sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        z-index: 9999;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        border-radius: 0;
        overflow-y: auto;
    }
    body.exim-ma-drawer-open .exim-ma__sidebar { transform: translateX(0); }
    body.exim-ma-drawer-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(17,24,39,0.5);
        z-index: 9998;
    }

    .exim-kpis { grid-template-columns: 1fr; }

    .exim-addr-grid { grid-template-columns: 1fr; }

    .exim-auth { grid-template-columns: 1fr; }
    .exim-auth__hero { padding: 28px 28px; }
    .exim-auth__form-wrap { padding: 28px 28px; }

    .exim-order { grid-template-columns: 1fr auto; }
    .exim-order__status { grid-column: 2; grid-row: 1; }
    .exim-order__total  { grid-column: 2; grid-row: 2; }
    .exim-order__meta   { grid-column: 1; grid-row: 1 / span 2; }
    .exim-order__number { grid-column: 1; grid-row: 1; }

    .exim-orders--full .exim-order {
        grid-template-columns: 1fr auto;
        row-gap: 8px;
    }
    .exim-orders--full .exim-order__actions {
        grid-column: 1 / span 2;
        grid-row: 3;
        justify-content: flex-start;
    }

    /* Login & Security: stretch save button full-width on narrow screens. */
    .exim-acct-actions { justify-content: stretch; }
    .exim-acct-save    { width: 100%; min-width: 0; }
}

@media (max-width: 560px) {
    .woocommerce-account .woocommerce { padding: 0 12px; margin-top: 20px; }
    .exim-card { padding: 16px; }
    .exim-kpi  { padding: 14px 16px; }
    .exim-kpi__value { font-size: 24px; }

    /* Section card internals keep a tighter padding on tiny screens. */
    .exim-acct-section__head { padding: 14px 16px; gap: 10px; }
    .exim-acct-section__body { padding: 16px; }
    .exim-acct-section__icon,
    .exim-acct-section__icon.dashicons {
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 17px;
        flex-basis: 32px;
    }

    /* Payment cards compact on mobile so the masked number still fits
     * without horizontal scroll. */
    .exim-pm-card__body    { padding: 56px 18px 16px; }
    .exim-pm-card__number  { font-size: 16px; letter-spacing: 1.5px; }
    .exim-pm-card__chip    { top: 14px; left: 16px; }

    /* Address card body a bit tighter. */
    .exim-addr-card__header { padding: 12px 14px; }
    .exim-addr-card__body   { padding: 14px; }

    /* Pagination controls stack vertically on tiny screens. */
    .exim-pagination { flex-direction: column; align-items: stretch; }
    .exim-pagination__btn { justify-content: center; }
    .exim-pagination__info { text-align: center; }
}