/* Green Theme for Eserviss.Pumity.lv */

/* Homepage value panel — replaces the generic clip-art next to the calculator
   with a branded green gradient carrying three trust points. */
/* Light card, not a green slab. Green-on-green tiles had almost no contrast
   and the panel read as one heavy block next to the white calculator. */
.home-value-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    color: var(--neutral-800);
}

.home-value-title {
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1.25;
    margin-bottom: 1.5rem;
    color: var(--action-brand);
}

.home-value-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.25rem;
}

.home-value-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* The green now lives in the icon chips, where it reads as an accent rather
   than swallowing the whole panel. */
.home-value-list li i {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-50);
    color: var(--action-brand);
    border-radius: var(--radius-md);
    font-size: 1.05rem;
}

.home-value-list li strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 0.15rem;
}

.home-value-list li span {
    display: block;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Carrier strip — real marks the calculator actually quotes. A recognisable
   DHL or UPS logo is a stronger trust signal than any number we could print. */
.home-carriers {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.home-carriers-label {
    margin: 0 0 0.85rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.home-carriers-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

/* Each mark sits in its own tile. The logos are a mix of wide wordmarks and
   square badges, so a shared box keeps them optically level instead of letting
   a square one shrink to nothing next to a wide one. Full colour: a recognised
   DHL or UPS mark is the entire point of the strip. */
.home-carriers-row img {
    height: 44px;
    width: 76px;
    object-fit: contain;
    padding: 0.4rem 0.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

.home-carriers-row img:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-sm);
}

/* Step-1 "Additional information" disclosure: rotate the chevron when expanded. */
.additional-info-toggle .additional-info-chevron {
    transition: transform 0.2s ease;
}
.additional-info-toggle:not(.collapsed) .additional-info-chevron {
    transform: rotate(180deg);
}
.additional-info-toggle {
    color: var(--primary-800);
}

/* Skip-to-content link — visually hidden until keyboard focus, then revealed
   at the top-left so keyboard users can bypass the header/nav. */
.skip-to-content {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--primary-700, #388e3c);
    color: #fff;
    border-radius: 0 0 6px 0;
    text-decoration: none;
}

.skip-to-content:focus {
    left: 0;
}

/* ===============================================
   ACTION BUTTONS STYLING (MODERN DESIGN)
   =============================================== */

/* Base action button styling */
.action-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: 2px solid transparent !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.action-btn:hover::before {
    left: 100%;
}

/* Cancel button — destructive role */
.cancel-btn {
    background: var(--action-destructive) !important;
    border-color: var(--action-destructive) !important;
    color: var(--text-on-primary) !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}

.cancel-btn:hover {
    background: var(--action-destructive-hover) !important;
    border-color: var(--action-destructive-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important;
}

.cancel-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
}

/* Repeat button — brand role */
.repeat-btn {
    background: var(--action-brand) !important;
    border-color: var(--action-brand) !important;
    color: var(--text-on-primary) !important;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3) !important;
}

.repeat-btn:hover {
    background: var(--action-brand-hover) !important;
    border-color: var(--action-brand-hover) !important;
    color: var(--text-on-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.4) !important;
}

.repeat-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.3) !important;
}

/* Details button — neutral */
.details-btn {
    background: var(--neutral-600) !important;
    border-color: var(--neutral-600) !important;
    color: var(--text-on-primary) !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(117, 117, 117, 0.3) !important;
}

.details-btn:hover {
    background: var(--neutral-700) !important;
    border-color: var(--neutral-700) !important;
    color: var(--text-on-primary) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(117, 117, 117, 0.4) !important;
}

.details-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(117, 117, 117, 0.3) !important;
}

/* Cargobus specific styling — destructive role */
.cargobus-cancel {
    background: var(--action-destructive) !important;
    border: 2px solid var(--action-destructive) !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4) !important;
}

.cargobus-cancel:hover {
    background: var(--action-destructive-hover) !important;
    border-color: var(--action-destructive-hover) !important;
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.5) !important;
}

/* Status refresh button styling — info role */
.refresh-status-btn {
    background: var(--info) !important;
    border: 2px solid var(--info) !important;
    color: var(--text-on-primary) !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3) !important;
}

.refresh-status-btn:hover {
    background: var(--action-primary-hover) !important;
    border-color: var(--action-primary-hover) !important;
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4) !important;
}

.refresh-status-btn:disabled {
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2) !important;
}

/* Pulse animation for important actions */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.cancel-btn:focus {
    animation: pulse 1.5s infinite;
}

/* Loading state */
.action-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.action-btn .spinner-border-sm {
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .action-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
}

/* Accessibility improvements */
.action-btn:focus {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .action-btn {
        border-width: 3px !important;
    }
}

/* Enhanced Design System Variables */
:root {
    /* Primary Colors - Professional Green Palette */
    --primary-50: #e8f5e8;
    --primary-100: #c8e6c8;
    --primary-200: #a5d6a5;
    --primary-300: #81c681;
    --primary-400: #66bb6a;
    --primary-500: #4caf50;  /* Main brand color */
    --primary-600: #43a047;
    --primary-700: #388e3c;
    --primary-800: #2e7d32;  /* Current primary-green */
    --primary-900: #1b5e20;  /* Current primary-green-dark */

    /* Blue Colors for Send Parcel Button */
    --blue-send-parcel: #1976d2;
    --blue-send-parcel-hover: #1565c0;
    --blue-send-parcel-active: #0d47a1;

    /* Secondary Colors - Professional Accent */
    --secondary-50: #fff8e1;
    --secondary-100: #ffecb3;
    --secondary-200: #ffe082;
    --secondary-300: #ffd54f;  /* Current yellow-accent */
    --secondary-400: #ffca28;
    --secondary-500: #ffc107;

    /* Neutral Colors - Extended Gray Scale */
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;  /* Current gray-light */
    --neutral-200: #eeeeee;
    --neutral-300: #e0e0e0;
    --neutral-400: #bdbdbd;
    --neutral-500: #9e9e9e;
    --neutral-600: #757575;
    --neutral-700: #616161;
    --neutral-800: #424242;
    --neutral-900: #212121;

    /* Semantic Colors */
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --info: #2196f3;

    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #e3f2fd;  /* Changed to blue background */
    --bg-tertiary: #f0f8f0;
    --bg-cabinet: #e3f2fd;  /* Light blue background for cabinet */

    /* Typography Scale */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-display: var(--font-family-primary); /* Inter 800 = display face; no extra font load */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */

    /* Spacing Scale (4px based) */
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */

    /* Border Radius */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Legacy variable compatibility */
    --primary-green: var(--primary-800);
    --primary-green-dark: var(--primary-900);
    --primary-green-light: var(--primary-500);
    --yellow-accent: var(--secondary-300);
    --yellow-accent-dark: var(--secondary-400);
    --text-light: #ffffff;
    --text-dark: var(--neutral-800);
    --gray-light: var(--neutral-100);

    /* Blue Button Color Palette - Strategic Integration */
    --blue-primary: #1976d2;         /* Primary blue for action buttons */
    --blue-primary-hover: #1565c0;   /* Hover state */
    --blue-primary-active: #0d47a1;  /* Active/pressed state */
    --blue-focus: #2196f3;           /* Focus rings and form outlines */
    --blue-light: rgba(33, 150, 243, 0.1); /* Focus shadow color */

    /* ---- Semantic action roles (single source of truth for component color) ---- */
    /* action-primary = BLUE: the one primary CTA color on every screen (locked decision) */
    --action-primary: var(--blue-primary);
    --action-primary-hover: var(--blue-primary-hover);
    --action-primary-active: var(--blue-primary-active);
    /* action-brand = GREEN: brand actions only (find offers, select carrier) */
    --action-brand: var(--primary-800);      /* 5.13:1 white-on-green, WCAG AA */
    --action-brand-hover: var(--primary-900);
    --action-brand-active: var(--primary-700);
    /* action-destructive = RED: delete/cancel only */
    --action-destructive: var(--error);
    --action-destructive-hover: #c62828;
    /* Content roles */
    --price-color: var(--neutral-900);
    --text-muted: var(--neutral-700);        /* 5.9:1 on white, ~4.9:1 on --bg-cabinet */
    --text-on-primary: #ffffff;
    --border: var(--neutral-200);
    --hairline: 1px solid var(--neutral-200);
    /* Form roles — labels are content, not links, so they read neutral-dark.
       Green stays for section headings, where it carries brand meaning. */
    --field-label: var(--neutral-800);       /* 12.6:1 on white */
    --field-border: var(--neutral-300);      /* visible against the white card */
    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
    /* Focus */
    --focus-ring: 0 0 0 3px var(--blue-light);

    /* Bootstrap 5.3 theme-variable sync — CDN helpers (text-success, btn-outline-*,
       bg-danger, form-valid, ...) now resolve to our scales. -rgb must be static. */
    --bs-primary: var(--action-primary);
    --bs-primary-rgb: 25, 118, 210;
    --bs-success: var(--action-brand);
    --bs-success-rgb: 46, 125, 50;
    --bs-danger: var(--action-destructive);
    --bs-danger-rgb: 244, 67, 54;
    --bs-body-font-family: var(--font-family-primary);
}

/* ------------------------------------------------------------------ */
/* Dark-mode-ready token structure (stub)                              */
/* Every component colors through the semantic role tokens above, so   */
/* this one override block re-themes the whole app. The palette is a   */
/* first-pass stub: neutral scale inverted, tinted surfaces darkened,  */
/* brand/action roles lifted for contrast on dark. Refine per-surface  */
/* before shipping dark mode. Activate by setting data-theme="dark"    */
/* on <html>.                                                          */
/* ------------------------------------------------------------------ */
[data-theme="dark"] {
    /* Inverted neutral scale: -50 is now the darkest surface */
    --neutral-50: #1a1d1a;
    --neutral-100: #212521;
    --neutral-200: #2c312c;
    --neutral-300: #3a403a;
    --neutral-400: #565d56;
    --neutral-500: #7a817a;
    --neutral-600: #9aa19a;
    --neutral-700: #b6bcb6;
    --neutral-800: #d6dad6;
    --neutral-900: #eef1ee;

    /* Light brand tints become dark tints */
    --primary-50: #16281a;
    --primary-100: #1d3622;
    --primary-200: #27482d;

    /* Surface + content roles */
    --bg-primary: #1c1f1c;
    --bg-secondary: #14181b;
    --bg-tertiary: #1a211a;
    --bg-cabinet: #14181b;
    --text-muted: var(--neutral-600);
    --border: var(--neutral-300);
    --hairline: 1px solid var(--neutral-300);

    /* Action roles lifted for dark-surface contrast */
    --action-primary: #5aa2e0;
    --action-primary-hover: #7db7e8;
    --action-primary-active: #3f88c8;
    --action-brand: var(--primary-400);
    --action-brand-hover: var(--primary-300);
    --action-brand-active: var(--primary-500);
    --blue-light: rgba(90, 162, 224, 0.25);

    /* Deeper shadows read on dark */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

/* Header Styles */
.header-top {
    background-color: #ffffff;
    border-bottom: 1px solid var(--neutral-300);
}

/* Navigation Bar */
.navbar.bg-success {
    background-color: var(--primary-green) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Single merged navbar (logo + menu + language + account + CTA on one green bar) */
.main-navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.main-navbar .navbar-brand .brand-text {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}
.main-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}
.main-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Account links: light outline on the green bar. Crisper edge + faint fill so
   they read clearly against the mid-green without competing with the CTA. */
.main-navbar .account-links .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.main-navbar .account-links .btn-outline-light:hover {
    background-color: #fff;
    color: var(--primary-800);
    border-color: #fff;
}
.main-navbar .account-links .btn-outline-light i {
    opacity: 0.95;
}
.main-navbar .languages-block .nav-link {
    color: #fff !important;
}
/* Send-parcel CTA. Blue-on-green was the only blue in the bar and read as a
   third-party widget dropped into the header. A white pill on the green bar is
   the highest-contrast thing available and still clearly the primary action. */
.main-navbar .send-parcel-cta {
    white-space: nowrap;
    background: #fff !important;
    border-color: #fff !important;
    color: var(--primary-900) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

.main-navbar .send-parcel-cta:hover,
.main-navbar .send-parcel-cta:focus {
    background: var(--primary-50) !important;
    border-color: var(--primary-50) !important;
    color: var(--primary-900) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18) !important;
}

.main-navbar .send-parcel-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.navbar-nav .nav-link {
    color: var(--text-light) !important;
    transition: all 0.3s ease;
    font-weight: 500;
}

.navbar-nav .nav-link:hover {
    background-color: var(--primary-green-dark);
    color: var(--text-light) !important;
}

/* Enhanced Button System */
.btn {
    font-family: var(--font-family-primary);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: var(--font-size-sm);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid transparent;
    min-height: 44px; /* Touch-friendly minimum */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Disabled state — applies to all public buttons (e.g. the spinner-disabled
   submit while a request is in flight) so "disabled" reads visually. */
.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn:disabled:hover,
.btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Account-type toggle (registration): the bare .btn-check + .btn labels had no
   visible selected state. Give the unchecked label an outline look and fill the
   checked one green so the active account type is unmistakable. */
.btn-check + .btn {
    border: 1px solid var(--primary-800);
    color: var(--primary-800);
    background-color: var(--bg-primary);
}

.btn-check:checked + .btn {
    /* white-on-green must clear 4.5:1 — primary-800 = 5.13:1 */
    background-color: var(--primary-800);
    border-color: var(--primary-800);
    color: var(--text-light);
    font-weight: 600;
}

.btn-check:focus-visible + .btn {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Primary Button (Success) — action-primary role (blue).
   Base layer; the primary-action rule below remains the authority. */
.btn-success {
    background-color: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--text-on-primary);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.btn-success:hover {
    background-color: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-success:active {
    background-color: var(--action-primary-active);
    border-color: var(--action-primary-active);
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Secondary Buttons */
.btn-outline-success {
    background-color: transparent;
    border-color: var(--primary-600);
    color: var(--primary-600);
    font-weight: 500;
}

.btn-outline-success:hover {
    background-color: var(--primary-50);
    border-color: var(--primary-700);
    color: var(--primary-700);
}

/* Warning Button */
.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--text-light);
    font-weight: 500;
}

.btn-warning:hover {
    background-color: #f57c00;
    border-color: #f57c00;
    color: var(--text-light);
}

/* Danger Button */
.btn-danger {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--text-light);
    font-weight: 500;
}

.btn-danger:hover {
    background-color: var(--action-destructive-hover);
    border-color: var(--action-destructive-hover);
    color: var(--text-light);
}

/* Button Sizes */
.btn-sm {
    font-size: var(--font-size-xs);
    padding: var(--spacing-2) var(--spacing-3);
    min-height: 36px;
}

/* Order Single Button Overrides for Compact Layout */
.order-single .btn-sm {
    font-size: 0.9rem !important;
    padding: 0.25rem 0.35rem !important;
    min-height: 28px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    width: 32px !important;
    max-width: 32px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 0.25rem !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Button Container Adjustments */
.order-single .ms-auto {
    max-width: 150px !important;
    flex-wrap: nowrap !important;
    gap: 0.2rem !important;
}

.order-single .ms-auto form,
.order-single .ms-auto a {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* CRITICAL: Override old style.css layout rules that break our flexbox design */
@media (min-width: 1200px) {
    .order-single > div:nth-child(1),
    .order-single > div:nth-child(2),
    .order-single > div:nth-child(3),
    .order-single > div:nth-child(4),
    .order-single > div:last-child {
        width: auto !important;
        max-width: none !important;
    }
}

/* Force our new flexbox layout to display properly */
.order-single .d-flex.align-items-center.justify-content-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.order-single .d-flex.justify-content-between.align-items-center.px-3.flex-grow-1 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-grow: 1 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Increase overall page width to accommodate buttons */
.container,
.container-fluid {
    max-width: 1400px !important;
}

/* Increase width of main content areas */
@media (min-width: 1200px) {
    .container {
        max-width: 1320px !important;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px !important;
    }
}

/* Ensure cabinet pages have more width */
body .container {
    max-width: 1400px !important;
    width: 100% !important;
}

/* Increase navbar and header widths */
.navbar .container,
.navbar-nav .container,
header .container {
    max-width: 1400px !important;
    width: 100% !important;
}

/* Make sure navigation elements also expand */
.navbar,
.navbar-expand-lg {
    width: 100% !important;
}

.navbar .container-fluid {
    max-width: 1400px !important;
    margin: 0 auto;
}

/* Fix homepage hero image scaling for wider layout */
.delivery-illustration-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 400px !important;
    background-color: transparent !important;
}

.delivery-illustration-section img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 500px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Fill the pre-search void: let the illustration panel grow to fill the
   stretched right column. Gated with :has() so it ONLY applies while the
   illustration is present (pre-search). Once #offers is replaced by the
   offers grid (main.js wraps it in .row), this rule stops matching and
   the grid renders normally — no regression. */
@media (min-width: 992px) {
    .home-offers-col {
        position: relative;
    }
    .home-offers-col #offers:has(.delivery-illustration-section) > .delivery-illustration-section {
        position: absolute;
        inset: 0;
        width: 100%;
        min-height: 0 !important;
        background: linear-gradient(135deg, var(--primary-50) 0%, #ffffff 100%);
        border-radius: 12px;
        border: 1px solid var(--neutral-300);
    }
}

/* Ensure #offers container works properly */
#offers {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    display: block !important;
}

/* Fix Bootstrap grid layout for wider container.
   Guarded to >=992px: col-lg-* means "large and up", so these column widths
   must NOT apply on mobile, or two-column layouts (e.g. step-2 offers +
   order summary) can never stack. */
@media (min-width: 992px) {
    .row > .col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    .row > .col-lg-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
}

/* Ensure the row stays horizontal */
.container > .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Make sure both columns stay side by side on large screens */
@media (min-width: 992px) {
    .col-lg-4,
    .col-lg-8 {
        display: block !important;
        float: none !important;
    }

    .row {
        display: flex !important;
    }
}

/* Reverted font sizes - using original sizes */

.order-single .d-flex.flex-shrink-0 {
    display: flex !important;
    flex-shrink: 0 !important;
    gap: 0.2rem !important;
    justify-content: flex-end !important;
    width: 110px !important;
    min-width: 110px !important;
}

/* Ensure buttons stay within card boundaries */
.order-single {
    overflow: hidden !important;
}

.order-single > div {
    max-width: 100% !important;
    overflow: hidden !important;
}

.btn-lg {
    font-size: var(--font-size-base);
    padding: var(--spacing-4) var(--spacing-6);
    min-height: 52px;
}
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-warning {
    background-color: var(--yellow-accent);
    border-color: var(--yellow-accent);
    color: var(--text-dark);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-warning:hover {
    background-color: var(--yellow-accent-dark);
    border-color: var(--yellow-accent-dark);
    color: var(--text-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-outline-success {
    /* outline buttons sit on the pale-blue page bg (#e3f2fd) where primary-800 is
       only 4.48; primary-900 clears AA there. */
    color: var(--primary-900);
    border-color: var(--primary-900);
}

.btn-outline-success:hover {
    background-color: var(--primary-900);
    border-color: var(--primary-900);
    color: var(--text-light);
}

.btn-primary {
    background-color: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--text-on-primary);
}

.btn-primary:hover {
    background-color: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
}

/* Form Styles */
.form-control:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.25);
}

/* .form-wrap is the canonical card; see the single definition further down. */

/* Hero Section / Carousel Replacement */
.delivery-hero {
    background-color: var(--primary-green);
    color: var(--text-light);
    padding: 60px 20px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delivery-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.delivery-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.delivery-hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.delivery-illustration {
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 20px auto;
    display: block;
}

/* Promotional Section */
.promo-section {
    background-color: var(--primary-green);
    color: var(--text-light);
    padding: 40px 0;
    margin-top: 60px;
}

.promo-section h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.promo-feature {
    text-align: center;
    padding: 20px;
}

.promo-feature i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--yellow-accent);
}

.promo-feature h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.promo-feature p {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Offer Cards - Disable hover effects to prevent disappearing */
.offer {
    border: 2px solid transparent;
    cursor: pointer;
}

.offer:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

.offer .bg-success {
    background-color: var(--primary-green) !important;
}

/* Line Styles — hairline token authoritative (style.css .line-dotted) */
.line-dotted {
    border-bottom-color: var(--neutral-200);
}

/* Input Groups */
.input-group-text {
    background-color: var(--primary-green);
    color: var(--text-light);
    border-color: var(--primary-green);
}

/* Tracking Steps */
.tracking-step .tracking-step-dot:after {
    background-color: var(--primary-green);
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* Was a flat green block with three unlabelled columns floating in it. */
/* ------------------------------------------------------------------ */
footer.footer {
    position: relative;
    background: linear-gradient(180deg, var(--primary-800) 0%, var(--primary-900) 100%);
    color: rgba(255, 255, 255, 0.82);
    padding: 3.5rem 0 0;
    margin-top: 5rem;
}

/* Hairline that picks up the brand green, so the footer starts deliberately
   rather than the page just turning green. */
footer.footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-400) 0%, var(--primary-600) 50%, var(--primary-400) 100%);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: 3rem;
    padding-bottom: 2.5rem;
}

@media (max-width: 991.98px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* No filter: the mark is already a white badge with a green parcel and white
   wordmark, drawn for a green bar. Inverting it flattened the badge into a
   solid white blob. */
.footer-logo {
    display: block;
    margin-bottom: 1rem;
}

.footer-about {
    max-width: 34ch;
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* !important because a blanket mobile rule sets every h1-h6 to 1.2rem, which
   blew these eyebrow labels up larger than the links they head. */
.footer-heading {
    margin: 0 0 1.15rem;
    color: #fff;
    font-size: 0.78rem !important;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.footer-links,
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
    font-size: 0.92rem;
}

footer.footer a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

footer.footer a:hover,
footer.footer a:focus-visible {
    color: #fff;
}

/* Links shift instead of fading — reads as responsive rather than washed out. */
.footer-links a {
    display: inline-block;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    transform: translateX(3px);
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    line-height: 1.5;
}

.footer-contact i {
    margin-top: 0.15rem;
    color: var(--primary-300);
    font-size: 0.85rem;
}

/* Social buttons: real tap targets, not bare glyphs. */
.footer-social {
    display: flex;
    gap: 0.6rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.9rem;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--primary-900);
    transform: translateY(-2px);
}

.footer-bottom {
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
}

footer.footer :focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .delivery-hero h1 {
        font-size: 2rem;
    }

    .delivery-hero p {
        font-size: 1rem;
    }

    .promo-feature {
        margin-bottom: 30px;
    }

    .delivery-hero {
        padding: 40px 15px;
        min-height: 350px;
    }

    .delivery-illustration {
        max-width: 300px;
    }

    .form-sticky {
        position: relative;
        top: 0;
        margin-bottom: 30px;
    }

    footer .row > div {
        margin-bottom: 30px;
    }
}

/* Additional Enhancements */
.shadow-sm {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.rounded {
    border-radius: 8px !important;
}

/* Success Messages */
.alert-success {
    background-color: rgba(46, 125, 50, 0.1);
    border-color: var(--primary-green);
    color: var(--primary-green-dark);
}

/* Form Labels */
.form-group label {
    color: var(--primary-green-dark);
    font-weight: 600;
}

/* Service Features List */
.service-features {
    list-style: none;
    padding: 0;
}

.service-features li {
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
}

.service-features li:before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--primary-green);
}

/* Form Enhancements */
.inner-label label {
    color: var(--primary-green-dark);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-wrap h4 {
    color: var(--primary-green-dark);
    font-weight: 700;
    font-size: 1.3rem;
}

/* Icon Enhancements */
.fa-search, .fa-truck {
    margin-right: 8px;
}

/* Dropdown Styles */
.dropdown-menu {
    border: 1px solid var(--primary-green);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-green);
}

.dropdown-item:hover {
    background-color: rgba(46, 125, 50, 0.1);
}

/* Select Styles */
select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232e7d32' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

/* Tracking Form Enhancement */
#tracking {
    border: 2px solid var(--neutral-300);
    transition: all 0.3s ease;
}

#tracking:focus {
    border-color: var(--yellow-accent);
    box-shadow: 0 0 0 0.2rem rgba(255, 213, 79, 0.25);
}

/* Offer Results Section */
#offers .delivery-hero {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sticky Form Enhancement */
.form-sticky {
    z-index: 100;
}

/* Country From Field */
#id_country_from.selectized {
    background-color: #f0f0f0;
}

/* Main Logo Hover */
.main-logo a {
    transition: transform 0.3s ease;
}

.main-logo a:hover {
    transform: scale(1.05);
}

/* Navbar Brand */
.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
}

/* Page Title Section */
.page-title {
    background-color: var(--primary-green);
    color: var(--text-light);
    padding: 40px 0;
    margin-bottom: 40px;
}

.page-title h1 {
    margin: 0;
    font-weight: 700;
}

/* Breadcrumb for inner pages */
.breadcrumb {
    background-color: transparent;
    margin: 0;
    padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.7);
}

.breadcrumb-item a {
    /* breadcrumb sits on pale-blue bg-secondary (#e3f2fd); primary-900 = 6.89:1 (AA).
       #198754 was 3.96. */
    color: var(--primary-900) !important;
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--neutral-700, #616161);
}

/* Bootstrap's .text-success (#198754) is 4.11:1 on white / 3.96 on pale-blue —
   both fail WCAG AA. Darken the green text utility to primary-800 (5.13 on white). */
.text-success {
    color: var(--primary-800) !important;
}

/* Offer price (partials/offer.blade.php): text-warning amber (#ffc107) was 1.63:1
   and text-danger red (#f44336) 3.68:1 on white — both fail. Scoped to the price
   so the amber/red "cheapest vs rest" signal survives at AA. */
.price-info .text-warning {
    color: #8a5a00 !important; /* dark amber, 5.93:1 */
}
.price-info .text-danger {
    color: #c62828 !important; /* dark red, 5.62:1 */
}

/* Feature Icons Animation */
.delivery-hero .fa-clock,
.delivery-hero .fa-shield-alt,
.delivery-hero .fa-euro-sign {
    color: var(--yellow-accent);
    transition: all 0.3s ease;
}

.delivery-hero .text-center:hover .fa-clock,
.delivery-hero .text-center:hover .fa-shield-alt,
.delivery-hero .text-center:hover .fa-euro-sign {
    transform: scale(1.2) rotate(5deg);
}

/* Promo Feature Hover */
.promo-feature {
    transition: all 0.3s ease;
}

.promo-feature:hover {
    transform: translateY(-10px);
}

.promo-feature:hover i {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

/* Form Field Animation - Removed transitions to fix flickering */
.form-control {
    /* transition: all 0.3s ease; - Removed to fix flickering issue */
}

.form-control:hover {
    /* border-color: var(--primary-green-light); - Removed to fix flickering */
}

/* Button Loading State */
.btn.loading {
    position: relative;
    color: transparent;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Print Styles */
/* Enhanced Typography System */
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-secondary);
    /* Ambient layered base — quiet depth, not decoration */
    background-image:
        radial-gradient(55rem 38rem at 115% -12%, rgba(76, 175, 80, 0.08), transparent 60%),
        radial-gradient(45rem 32rem at -18% -5%, rgba(25, 118, 210, 0.07), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 24rem);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary);
    font-weight: 600;
    line-height: 1.3;
    color: var(--neutral-900);
    margin-bottom: var(--spacing-4);
}

.h1, h1 { font-size: var(--font-size-4xl); }
.h2, h2 { font-size: var(--font-size-3xl); }
.h3, h3 { font-size: var(--font-size-2xl); }
.h4, h4 { font-size: var(--font-size-xl); }
.h5, h5 { font-size: var(--font-size-lg); }
.h6, h6 { font-size: var(--font-size-base); }

/* Display hierarchy — Inter 800 for primary headings, tight tracking at display sizes */
h1, .h1, h2, .h2, h3, .h3 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
h4, .h4 { font-weight: 700; letter-spacing: -0.01em; }

/* Type utilities */
.font-display { font-weight: 800; letter-spacing: -0.02em; }
.price-display { font-weight: 800; letter-spacing: -0.01em; color: var(--price-color); }
.text-caption { font-size: var(--font-size-xs); font-weight: 500; color: var(--text-muted); }

/* One focus ring everywhere (keyboard navigation). Form-control mouse focus
   keeps its dedicated rule below; both share --focus-ring. */
:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring) !important;
}

/* Enhanced Form System */
.form-control {
    border: 2px solid var(--neutral-300) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    font-size: var(--font-size-base) !important;
    font-family: var(--font-family-primary) !important;
    background-color: var(--bg-primary) !important;
    min-height: 44px !important; /* Touch-friendly */
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus {
    border-color: var(--primary-600) !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
    outline: none !important;
}

.form-control:hover:not(:focus) {
    border-color: var(--neutral-400) !important;
}

.form-control.is-invalid {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1) !important;
}

.form-control.is-valid {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
}

/* Form Labels */
.form-label,
.text-success.fw-semibold {
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    color: var(--primary-800) !important; /* primary-800 = 5.13:1 on white (AA); primary-700 was 4.11 */
    margin-bottom: var(--spacing-2) !important;
}

/* Select Controls */
select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2343a047' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--spacing-3) center !important;
    background-size: 16px 12px !important;
    /* reserve room for the chevron so long options (e.g. "Kaste ar precēm") don't
       run under it and clip mid-word */
    padding-right: 2.25rem !important;
    text-overflow: ellipsis !important;
}

/* THE card component. Three competing .form-wrap definitions used to fight
   over this; the last one won and applied a translucent background with a
   backdrop blur and a near-invisible white border, which is why cards read as
   edgeless. This is now the only one. */
.form-wrap {
    background-color: var(--bg-primary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border) !important;
    padding: var(--spacing-6) !important;
    margin-bottom: var(--spacing-6) !important;
    transition: box-shadow var(--dur-base) var(--ease-out) !important;
}

.form-wrap:hover {
    box-shadow: var(--shadow-lg) !important;
}

/* Alert Components */
.alert {
    border-radius: var(--radius-md) !important;
    border: none !important;
    padding: var(--spacing-4) !important;
    font-size: var(--font-size-sm) !important;
}

.alert-danger {
    background-color: #ffebee !important;
    color: #c62828 !important;
    border-left: 4px solid var(--error) !important;
}

.alert-success {
    background-color: var(--primary-50) !important;
    color: var(--primary-800) !important;
    border-left: 4px solid var(--success) !important;
}

.alert-warning {
    background-color: #fff3e0 !important;
    color: #ef6c00 !important;
    border-left: 4px solid var(--warning) !important;
}

/* Loading States - Blue Theme */
.spinner-border {
    color: var(--blue-primary) !important;
}

.btn .spinner-border {
    width: 1rem !important;
    height: 1rem !important;
    color: white !important;
}

/* Cabinet-specific Loading Indicators */
.submit-loading .spinner-border {
    color: white !important;
    width: 1rem !important;
    height: 1rem !important;
}

/* Badge Components */
.badge {
    font-size: var(--font-size-xs) !important;
    font-weight: 500 !important;
    padding: var(--spacing-1) var(--spacing-2) !important;
    border-radius: var(--radius-sm) !important;
}

.bg-success-subtle {
    background-color: var(--primary-50) !important;
}

.text-success-emphasis {
    color: var(--primary-800) !important;
}

.bg-danger-subtle {
    background-color: #ffebee !important;
}

.text-danger-emphasis {
    color: #c62828 !important;
}

/* Navigation Enhancements */
.navbar {
    box-shadow: var(--shadow-md) !important;
    border-bottom: 1px solid var(--neutral-200) !important;
}

.dropdown-menu {
    border: 1px solid var(--neutral-200) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: var(--spacing-2) !important;
}

.dropdown-item {
    border-radius: var(--radius-sm) !important;
    padding: var(--spacing-2) var(--spacing-3) !important;
    font-size: var(--font-size-sm) !important;
}

.dropdown-item:hover {
    background-color: var(--primary-50) !important;
    color: var(--primary-700) !important;
}

/* Accessibility Improvements */
.btn:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--primary-500) !important;
    outline-offset: 2px !important;
}

/* Required Field Indicators */
.text-danger {
    color: var(--error) !important;
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1, .h1 { font-size: var(--font-size-3xl); }
    h2, .h2 { font-size: var(--font-size-2xl); }
    h3, .h3 { font-size: var(--font-size-xl); }

    .form-wrap {
        padding: var(--spacing-4) !important;
        margin-bottom: var(--spacing-4) !important;
    }
}

/* Print Styles */
@media print {
    .navbar, footer, .promo-section {
        display: none;
    }

    .delivery-hero {
        background-color: var(--neutral-100);
        color: #333;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .btn {
        border: 1px solid #333 !important;
        background-color: transparent !important;
        color: #333 !important;
    }
}

/* Cabinet Page Blue Background - Override default background */
body {
    background-color: var(--bg-cabinet) !important;
}

/* Enhanced Form Focus States - Blue Theme */
.form-control:focus {
    border-color: var(--blue-focus) !important;
    box-shadow: 0 0 0 3px var(--blue-light) !important;
    outline: none !important;
}

/* Override any existing green focus states */
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--blue-focus) !important;
    box-shadow: 0 0 0 3px var(--blue-light) !important;
}

/* Radio Button and Checkbox Focus States */
.form-check-input:focus {
    border-color: var(--blue-focus) !important;
    box-shadow: 0 0 0 0.25rem var(--blue-light) !important;
}

.form-check-input:checked {
    background-color: var(--action-primary) !important;
    border-color: var(--action-primary) !important;
}

/* Required Field Asterisk Styling - More Prominent */
.text-danger,
label .text-danger,
.form-label .text-danger {
    color: var(--error) !important;
    font-weight: 600 !important;
    font-size: 1.1em !important;
    margin-left: 2px !important;
}

/* Company Field Labels - From Screenshots */
label[for*="company"] {
    font-weight: 600 !important;
    color: var(--primary-700) !important;
    margin-bottom: var(--spacing-2) !important;
}

/* Improve Form Section Headers - Keep Green */
.text-success.fw-semibold,
h5.text-success,
.form-section-header {
    color: var(--primary-800) !important; /* green section headers; primary-800 = 5.13:1 on white (AA) */
    font-weight: 600 !important;
    font-size: var(--font-size-base) !important;
    margin-bottom: var(--spacing-3) !important;
}

/* Primary Action Buttons — one primary action color (role: --action-primary).
   All .btn-success / .btn-primary / plain submits draw from this single role.
   Brand-green CTAs opt out via their own selectors (#find-offers, .set-delivery). */
.btn-success,
.btn-primary,
button[type="submit"]:not(.btn-warning):not(.btn-danger) {
    background-color: var(--action-primary) !important;
    border-color: var(--action-primary) !important;
    color: var(--text-on-primary) !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--dur-base) var(--ease-out) !important;
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2) !important;
}

.btn-success:hover,
.btn-primary:hover,
button[type="submit"]:not(.btn-warning):not(.btn-danger):hover {
    background-color: var(--action-primary-hover) !important;
    border-color: var(--action-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3) !important;
}

.btn-success:active,
.btn-primary:active,
button[type="submit"]:not(.btn-warning):not(.btn-danger):active {
    background-color: var(--action-primary-active) !important;
    border-color: var(--action-primary-active) !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2) !important;
}

/* Ghost submit — neutral secondary action (tracking lookups).
   Doubled class ties the master primary rule at (0,3,1); this block sits
   later in the file, so it wins. Keep it below the master rule. */
button[type="submit"].btn-ghost.btn-ghost {
    background-color: #fff !important;
    border: 1px solid var(--border) !important;
    color: var(--neutral-800) !important;
    box-shadow: none !important;
}
button[type="submit"].btn-ghost.btn-ghost:hover,
button[type="submit"].btn-ghost.btn-ghost:focus-visible {
    background-color: var(--primary-50) !important;
    border-color: var(--primary-300) !important;
    color: var(--primary-900) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Add Package Buttons — primary action role */
.btn.add-package,
.add-package,
.btn[class*="Different"] {
    background-color: var(--action-primary) !important;
    border-color: var(--action-primary) !important;
    color: var(--text-on-primary) !important;
    font-weight: 600 !important;
    transition: all var(--dur-base) var(--ease-out) !important;
}

.btn.add-package:hover,
.add-package:hover,
.btn[class*="Different"]:hover {
    background-color: var(--action-primary-hover) !important;
    border-color: var(--action-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3) !important;
}

/* Remove Package Buttons — destructive role (delete/cancel only) */
.btn.remove-package {
    background-color: var(--action-destructive) !important;
    border-color: var(--action-destructive) !important;
    color: var(--text-on-primary) !important;
}

.btn.remove-package:hover {
    background-color: var(--action-destructive-hover) !important;
    border-color: var(--action-destructive-hover) !important;
}

/* Address Section Styling */
.col-lg-6:has(h5:contains("Pick Up")),
.col-lg-6:has(h5:contains("Delivery")) {
    padding: var(--spacing-4) !important;
}

/* Cabinet Parcel Type Selection - Keep Green for Brand */
.type-container.selected {
    background-color: var(--primary-50) !important;
    border-color: var(--primary-600) !important;
}

/* Offer Cards - Enhanced Selection States */
.offer.selected,
.offer:hover {
    background-color: rgba(25, 118, 210, 0.05) !important;
    border-color: var(--blue-primary) !important;
}

/* On the pale-blue hover/selected offer card, the green service name (primary-800
   = 4.23) and the blue "info" link (#0d6efd = 3.71) fall just under AA. Darken
   both for that context. */
.offer .text-success {
    color: var(--primary-900) !important; /* ~6:1 on the pale-blue tint */
}
.offer .offer-info.text-primary,
.offer .text-primary {
    color: #0a58ca !important; /* darker blue, clears 4.5:1 on the tint */
}

/* Placeholder Text Color */
.form-control::placeholder {
    color: #9e9e9e !important;
    opacity: 1 !important;
}

/* Enhanced Required Field Styling */
.text-danger,
label .text-danger,
.form-label .text-danger {
    color: var(--error) !important;
    font-weight: 700 !important;
    font-size: 1.2em !important;
    margin-left: 3px !important;
}

/* COLOR SYSTEM — one source of truth (see :root semantic action roles).
   --action-primary (blue): main CTAs (.btn-success / .btn-primary / submit).
   --action-brand (green): brand CTAs only (#find-offers, .set-delivery/.this-delivery).
   --action-destructive (red): delete/cancel only (.btn-danger, .remove-package).
   Green stays the brand color for nav, section headers, labels, parcel-type cards. */

/* Address Form Layout Improvements */
.pickup_address .form-wrap,
.delivery_address .form-wrap {
    border: 1px solid var(--neutral-200) !important;
    border-radius: var(--radius-lg) !important;
    background-color: var(--bg-primary) !important;
    padding: var(--spacing-4) !important;
    margin-bottom: var(--spacing-4) !important;
}

.pickup_address .row.address,
.delivery_address .row.address {
    margin-top: var(--spacing-3) !important;
    gap: var(--spacing-2) !important;
}

.pickup_address .form-group,
.delivery_address .form-group {
    margin-bottom: var(--spacing-3) !important;
}

.pickup_address .text-success,
.delivery_address .text-success {
    color: var(--primary-600) !important;
    font-weight: 600 !important;
    font-size: var(--font-size-sm) !important;
    margin-bottom: var(--spacing-2) !important;
}

.pickup_address .form-control,
.delivery_address .form-control {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--neutral-300) !important;
    padding: var(--spacing-2) var(--spacing-3) !important;
    font-size: var(--font-size-sm) !important;
    transition: all 0.2s ease !important;
}

.pickup_address .form-control:focus,
.delivery_address .form-control:focus {
    border-color: var(--action-primary) !important;
    box-shadow: var(--focus-ring) !important;
    outline: 0 !important;
}

/* Send Parcel CTA (.prld) — layout only; color comes from --action-primary via the
   primary-action rule above. The .prld class is also the JS loading-state hook. */
.btn.btn-primary.prld {
    font-weight: 600 !important;
    padding: var(--spacing-2) var(--spacing-4) !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-2) !important;
}

.btn.btn-primary.prld:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3) !important;
}

/* Order Page Button Consistency */
.order-single .btn {
    width: 90px;
    height: 34px;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 6px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid;
}

.order-single .btn-sm {
    width: 90px;
    height: 34px;
    font-size: 0.875rem;
    padding: 6px 8px;
}

/* Order Action Buttons — primary action role */
.order-single .btn-success {
    background-color: var(--action-primary) !important;
    border-color: var(--action-primary) !important;
    color: var(--text-on-primary) !important;
    font-weight: 500 !important;
}

.order-single .btn-success:hover {
    background-color: var(--action-primary-hover) !important;
    border-color: var(--action-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3);
}

.order-single .btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: var(--text-on-primary) !important;
    font-weight: 500 !important;
}

.order-single .btn-warning:hover {
    background-color: #f57c00 !important;
    border-color: #f57c00 !important;
    color: var(--text-on-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
}

/* Destructive role — delete/cancel only */
.order-single .btn-danger,
.order-single button.btn-danger,
.order-single .cancel-form .btn-danger,
.order-single .cancel-form button[type="submit"],
button.btn-danger,
.btn-danger {
    background-color: var(--action-destructive) !important;
    border-color: var(--action-destructive) !important;
    color: var(--text-on-primary) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.order-single .btn-danger:hover,
.order-single button.btn-danger:hover,
.order-single .cancel-form .btn-danger:hover,
.order-single .cancel-form button[type="submit"]:hover,
button.btn-danger:hover,
.btn-danger:hover {
    background-color: var(--action-destructive-hover) !important;
    border-color: var(--action-destructive-hover) !important;
    color: var(--text-on-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

/* Button gap consistency */
.order-single .d-flex.gap-1 {
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Ensure button container alignment */
.order-single .d-flex:last-child {
    min-height: 34px;
    align-items: center;
}

/* Brand CTAs — green role (--action-brand). These are the ONLY green buttons. */

/* Find Offers Search Button — brand role */
#find-offers {
    background-color: var(--action-brand) !important;
    border-color: var(--action-brand) !important;
    color: var(--text-on-primary) !important;
}

#find-offers:hover {
    background-color: var(--action-brand-hover) !important;
    border-color: var(--action-brand-hover) !important;
}

/* Select Carrier Button — brand role */
.set-delivery,
.this-delivery {
    background-color: var(--action-brand) !important;
    border-color: var(--action-brand) !important;
    color: var(--text-on-primary) !important;
    transition: all var(--dur-base) var(--ease-out) !important;
}

.set-delivery:hover,
.this-delivery:hover {
    background-color: var(--action-brand-hover) !important;
    border-color: var(--action-brand-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3) !important;
}

.set-delivery:active,
.this-delivery:active {
    background-color: var(--action-brand-active) !important;
    border-color: var(--action-brand-active) !important;
    transform: translateY(0) !important;
}

.add-package:active {
    background-color: var(--blue-primary-active) !important;
    border-color: var(--blue-primary-active) !important;
    transform: translateY(0) !important;
}

/* CRITICAL FIX: Check Parcel Button - FORCE YELLOW */
.btn-warning,
button[type="submit"].btn-warning {
    background-color: var(--yellow-accent) !important;
    border-color: var(--yellow-accent) !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-warning:hover,
button[type="submit"].btn-warning:hover {
    background-color: var(--yellow-accent-dark) !important;
    border-color: var(--yellow-accent-dark) !important;
    color: var(--text-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.4) !important;
}

.btn-warning:active,
button[type="submit"].btn-warning:active {
    background-color: #ffb300 !important;
    border-color: #ffb300 !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3) !important;
}

/* ============================
   RESPONSIVE DESIGN
   ============================ */

/* Tablet and below (768px and down) */
@media (max-width: 768px) {
    .order-single {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .order-single > div {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Logo and Service Section */
    .order-single > div > div:first-child {
        width: 100% !important;
        margin-bottom: 1rem;
        justify-content: center !important;
    }

    /* Center Info Section */
    .order-single .flex-grow-1 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 1rem;
    }

    .order-single .flex-grow-1 > div {
        flex-direction: column !important;
        gap: 1rem;
    }

    .order-single .flex-grow-1 > div > div {
        min-width: auto !important;
        text-align: left !important;
        padding: 0.5rem;
        background-color: rgba(0,0,0,0.02);
        border-radius: 0.375rem;
    }

    /* Buttons Section */
    .order-single .ms-auto {
        margin-left: 0 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .order-single .btn-sm {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        min-width: 90px;
    }
}

/* Mobile phones (576px and down) */
@media (max-width: 576px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .order-single {
        padding: 0.75rem !important;
        border-radius: 0.5rem !important;
    }

    /* Logo section */
    .order-single > div > div:first-child img {
        width: 40px !important;
        margin-right: 0.75rem !important;
    }

    .order-single h6 {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* Info sections */
    .order-single .flex-grow-1 > div > div {
        padding: 0.375rem !important;
        margin-bottom: 0.5rem;
    }

    .order-single .small {
        font-size: 0.75rem !important;
    }

    /* Button adjustments for mobile */
    .order-single .ms-auto {
        gap: 0.25rem !important;
    }

    .order-single .btn-sm {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        min-width: 70px;
    }

    /* Search section */
    .input-group {
        flex-direction: column !important;
        gap: 0.5rem;
    }

    .input-group .form-control {
        border-radius: 0.5rem !important;
    }

    .input-group .btn,
    .input-group .btn-outline-secondary {
        border-radius: 0.5rem !important;
        width: 100%;
    }
}

/* Large screens (1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    .order-single {
        padding: 1.5rem !important;
    }

    .order-single .flex-grow-1 > div > div {
        min-width: 180px !important;
    }

    .order-single .ms-auto {
        gap: 0.75rem !important;
    }
}

/* ============================
   PREMIUM ADDRESS FORM STYLING
   ============================ */

/* Address Card Container */
.pickup_address,
.delivery_address {
    position: relative;
}

.pickup_address .h3,
.delivery_address .h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--primary-800) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.pickup_address .h3::before {
    content: "📍";
    font-size: 1.1rem;
}

.delivery_address .h3::before {
    content: "🏁";
    font-size: 1.1rem;
}

/* Address Book Button Enhancement */
.pickup_address .btn-outline-secondary,
.delivery_address .btn-outline-secondary {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
    border-radius: 8px !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.pickup_address .btn-outline-secondary:hover,
.delivery_address .btn-outline-secondary:hover {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%) !important;
    border-color: var(--primary-500) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(76, 175, 80, 0.3) !important;
}

/* Saved Address Dropdown Enhancement */
.pickup_address select[name="from"],
.delivery_address select[name="to"] {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) !important;
    border: 2px dashed var(--neutral-300) !important;
    border-radius: 10px !important;
    color: #666 !important;
    font-size: 0.875rem !important;
    padding: 0.75rem 1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.pickup_address select[name="from"]:hover,
.delivery_address select[name="to"]:hover {
    border-color: var(--primary-500) !important;
    background: linear-gradient(135deg, var(--primary-50) 0%, #fff 100%) !important;
}

.pickup_address select[name="from"]:focus,
.delivery_address select[name="to"]:focus {
    border-color: var(--primary-500) !important;
    border-style: solid !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15) !important;
}

/* Form Wrap Card Enhancement */
.pickup_address .form-wrap,
.delivery_address .form-wrap {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 1.5rem !important;
    transition: all 0.3s ease !important;
}

.pickup_address .form-wrap:hover,
.delivery_address .form-wrap:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* Section Titles (Sender/Receiver) */
.pickup_address .text-success.fw-semibold,
.delivery_address .text-success.fw-semibold {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--primary-800) !important;
    padding: 0.5rem 0.75rem !important;
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.1) 0%, transparent 100%) !important;
    border-left: 3px solid var(--primary-500) !important;
    border-radius: 0 6px 6px 0 !important;
    margin-bottom: 1rem !important;
}

/* Readonly Fields (City locked to Rīga) */
.pickup_address .form-control[readonly],
.delivery_address .form-control[readonly] {
    background-color: var(--neutral-100) !important;
    cursor: not-allowed !important;
    color: var(--primary-800) !important;
    font-weight: 600 !important;
}

/* Country Select Enhancement */
.pickup_address .select-country,
.delivery_address .select-country {
    border-radius: 10px !important;
    border: 1px solid var(--neutral-300) !important;
    padding: 0.75rem !important;
    font-size: 0.95rem !important;
    background-color: #fafafa !important;
    min-height: 48px !important;
}

/* Phone Validation Feedback */
.pickup_address .phone-preview,
.delivery_address .phone-preview {
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.1) 0%, transparent 100%) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
    margin-top: 0.5rem !important;
}

.pickup_address .phone-validation-feedback,
.delivery_address .phone-validation-feedback {
    background: linear-gradient(90deg, rgba(244, 67, 54, 0.1) 0%, transparent 100%) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
    margin-top: 0.5rem !important;
}

/* Save Address Checkbox */
.pickup_address label:has(input[type="checkbox"]),
.delivery_address label:has(input[type="checkbox"]) {
    background: linear-gradient(135deg, var(--neutral-100) 0%, #fff 100%) !important;
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
    border: 1px dashed #dee2e6 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-top: 0.5rem !important;
}

.pickup_address label:has(input[type="checkbox"]):hover,
.delivery_address label:has(input[type="checkbox"]):hover {
    border-color: var(--primary-500) !important;
    background: linear-gradient(135deg, var(--primary-50) 0%, #fff 100%) !important;
}

.pickup_address label input[type="checkbox"],
.delivery_address label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--primary-500) !important;
}

/* Address Row Decorative Elements */
.pickup_address .row.address,
.delivery_address .row.address {
    position: relative !important;
    padding-top: 1rem !important;
    margin-top: 0.5rem !important;
}

.pickup_address .row.address::before,
.delivery_address .row.address::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neutral-300), transparent);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .pickup_address .form-wrap,
    .delivery_address .form-wrap {
        padding: 1rem !important;
    }
    
    .pickup_address .h3,
    .delivery_address .h3 {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 576px) {
    .pickup_address .d-flex.justify-content-between,
    .delivery_address .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .pickup_address .btn-outline-secondary,
    .delivery_address .btn-outline-secondary {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ===============================================
   PARCEL BOOKING STEPPER — semantic <ol class="stepper">
   Markup: <nav.parcel-stepper><ol.stepper><li.step .is-active|.is-done|.is-todo>
   Real connector lines between nodes via li::before; done = brand check,
   active = aria-current="step". Back-nav JS (step2 setstep) binds .this-step
   inside the step-1 <li> — keep that class + data-step on the button.
   =============================================== */
.parcel-stepper {
    margin-bottom: var(--spacing-5);
}
.stepper {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.stepper .step {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
}
/* Connector line between nodes (neutral; green once the prior step is done) */
.stepper .step:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 19px;
    left: calc(-50% + 28px);
    right: calc(50% + 28px);
    height: 2px;
    background: var(--neutral-300);
}
.stepper .step.is-done:not(:first-child)::before {
    background: var(--primary-500);
}
.stepper .step-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 var(--spacing-2);
    text-align: center;
}
/* Back-nav button (step 1 done) — transparent, hover affordance on the label */
.stepper button.step-inner {
    background: none;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-md);
    font: inherit;
}
.stepper button.step-inner:hover .step-label,
.stepper button.step-inner:focus-visible .step-label {
    color: var(--primary-900);
    text-decoration: underline;
}
.stepper .step-num {
    position: relative; /* sit above the connector line */
    z-index: 1;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    font-weight: 700;
    background: #fff;
    border: 2px solid var(--neutral-300);
    color: var(--neutral-600); /* 4.61:1 on white (AA) */
}
.stepper .step-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.25;
    color: var(--neutral-600);
    max-width: 120px;
}
/* Done: solid brand circle + check */
.stepper .step.is-done .step-num {
    background: var(--action-brand);
    border-color: var(--action-brand);
    color: var(--text-on-primary);
}
.stepper .step.is-done .step-label {
    color: var(--primary-900); /* 5.9:1 on white (AA) */
}
/* Active: brand ring around the number */
.stepper .step.is-active .step-num {
    border-color: var(--action-brand);
    color: var(--action-brand);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.15);
}
.stepper .step.is-active .step-label {
    color: var(--neutral-900);
    font-weight: 700;
}
@media (max-width: 575.98px) {
    .stepper .step-num {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
    }
    .stepper .step:not(:first-child)::before {
        top: 15px;
        left: calc(-50% + 22px);
        right: calc(50% + 22px);
    }
    .stepper .step-inner {
        padding: 0 2px;
        gap: 6px;
    }
    .stepper .step-label {
        font-size: 0.6875rem;
        max-width: 84px;
    }
}

/* ===============================================
   PROCESS INDICATORS — replace waiting.gif / done.gif
   Spinner + success check + styled ETA progress (step3/step4).
   Motion gated by the global prefers-reduced-motion reset.
   =============================================== */
.process-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
}
.process-spinner {
    width: 44px;
    height: 44px;
    border-width: 4px;
    color: var(--action-brand);
}
.process-done-icon {
    font-size: 3rem;
    color: var(--action-brand);
}
.process-error {
    background: rgba(255, 152, 0, 0.12);
    border-color: rgba(255, 152, 0, 0.4);
}
.process-error-icon {
    font-size: 3rem;
    color: var(--warning);
}
/* Indeterminate-but-styled progress cue with ETA text below it */
.process-progress {
    width: 100%;
    max-width: 320px;
    height: 6px;
    border-radius: 3px;
    background: var(--neutral-200);
    overflow: hidden;
}
.process-progress-bar {
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background: var(--action-brand);
    animation: process-sweep 1.6s var(--ease-in-out) infinite;
}
@keyframes process-sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
/* ------------------------------------------------------------------ */
/* Orders page: aligned card grid (desktop ≥992px)                     */
/* Identity column (logo + service + tracking) fixed; the five data    */
/* columns share the remaining width equally so labels line up card    */
/* to card.                                                            */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .order-service-info {
        width: 190px !important;
        padding-right: 1rem;
        border-right: 1px solid var(--neutral-300, #dee2e6);
    }

    /* Equal columns: override the legacy inline min-widths */
    .order-data-cols > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* Tracking numbers now live inside the identity column: left-aligned */
    .order-service-info .tracking-number {
        text-align: left;
    }
}

/* ------------------------------------------------------------------ */
/* Address cards: align the two columns (desktop ≥992px)               */
/* The sender header carries an "address book" button that inflates    */
/* its row ~12px above the recipient's plain heading, staggering every */
/* field across the columns. Float the button out of the flex line so  */
/* both headers collapse to the same height and the fields line up.    */
/* Scoped to desktop: below 992px the columns stack (col-lg-6) and the */
/* existing mobile rules govern the button.                            */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .pickup_address > .d-flex.justify-content-between {
        position: relative;
        padding-right: 150px; /* keep a long localized heading clear of the button */
    }
    .pickup_address > .d-flex.justify-content-between .btn-outline-secondary {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    .pickup_address > .d-flex.justify-content-between .btn-outline-secondary:hover {
        transform: translateY(calc(-50% - 1px));
    }
}

/* ===============================================
   OFFER SKELETON — shown in #offers while getOffers is in flight,
   replaced by the real cards (which stagger in via .reveal).
   Shimmer is a transform sweep; the global prefers-reduced-motion
   reset freezes it to a static bar.
   =============================================== */
.offer-skeleton {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-3);
}
.offer-skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: var(--neutral-200);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}
.offer-skeleton-line:last-child { margin-bottom: 0; }
.offer-skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: skeleton-shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}

/* ===============================================
   SCROLL / STAGGER REVEAL — elements start hidden and gain
   .is-visible (JS IntersectionObserver or post-AJAX). Instant
   under reduced-motion (global reset zeroes the transition).
   =============================================== */
/* Scroll-reveal. The hidden state only applies once JS has marked the
   element .is-prepared — with JS disabled the content stays visible. */
.reveal {
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-prepared:not(.is-visible) {
    opacity: 0;
    transform: translateY(14px);
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------------ */
/* Registration: account-type segmented control                       */
/* Radios keep their .btn-check class (main.js queries                */
/* input[name="account_type"]); only the adjacent labels re-skin.     */
/* ------------------------------------------------------------------ */
.segmented-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--neutral-100);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.segmented-toggle .btn {
    border: 0;
    border-radius: 999px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    color: var(--neutral-600);
    background: transparent;
    box-shadow: none;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.segmented-toggle .btn:hover {
    color: var(--primary-900);
}
.segmented-toggle .btn-check:checked + .btn {
    background: var(--action-brand);
    color: var(--text-on-primary);
}
.segmented-toggle .btn-check:focus-visible + .btn {
    box-shadow: var(--focus-ring);
}

/* step2 sticky summary: total row on the brand tint, price in the
   single price role (never blue, never warning yellow). */
.order-total-summary {
    background: var(--primary-50);
    border-top: 1px solid var(--border);
}

/* ===============================================
   CMS HOME BLOCK — wrapper around the settings.text_{lang} echo.
   The DB HTML carries rogue inline styles (hardcoded green spans,
   centered h2); restyle from the outside so any DB content reads
   as intentional. Inline color is beaten with a scoped !important.
   =============================================== */
.cms-home-block {
    max-width: 46rem;
    margin: 0 auto;
    padding: var(--spacing-6) var(--spacing-4);
    text-align: center;
}
.cms-home-block h2 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--neutral-900);
    margin-bottom: var(--spacing-4);
}
/* Override the inline color: rgb(47, 148, 89) the CMS injects on spans */
.cms-home-block h2 span {
    color: var(--primary-800) !important;
}
.cms-home-block p {
    color: var(--neutral-700);
    font-size: var(--font-size-base);
    line-height: 1.7;
}

/* Pre-search: grow the value panel to fill the stretched right column so the
   homepage's right half reads as a full-height brand rail, not an empty void.
   Once #offers is swapped for the offers grid the panel is gone and the grid
   renders normally. Scoped to the two-column hero layout (>=992px). */
/* The panel sizes to its own content. It used to be stretched to the full
   column height, which left three list items floating in ~800px of flat green. */

/* ================================================================== */
/* FORM REFINEMENT LAYER                                              */
/* Last in source order on purpose: it settles the label/field/section */
/* hierarchy that the older per-screen rules above fight over.         */
/* ================================================================== */

/* --- Labels ------------------------------------------------------- */
/* Every field label rendered green made the form read as a wall of
   links and flattened the hierarchy — heading, label and value all
   competed. Labels are neutral-dark; green is reserved for section
   headings and brand actions. */
.form-wrap .form-label,
.form-wrap label.form-label,
.form-wrap .form-check-label,
form .form-label,
form label.fs-6 {
    color: var(--field-label) !important;
    font-weight: 600 !important;
    font-size: var(--font-size-sm) !important;
    letter-spacing: 0.01em;
    margin-bottom: var(--spacing-2) !important;
}

/* The required marker is a marker, not a shout. */
.form-label .text-danger,
label .text-danger,
legend .text-danger {
    color: var(--action-destructive) !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    margin-left: 1px !important;
}

/* --- Section headings inside a form ------------------------------- */
/* Gives a long form rhythm: a green, slightly larger heading with a
   hairline above it, so "pickup address" reads as a new chapter. */
.form-wrap h5,
.form-wrap h6,
form > fieldset > legend:not(.form-label) {
    color: var(--action-brand) !important;
    font-weight: 700 !important;
    font-size: var(--font-size-lg) !important;
    margin-bottom: var(--spacing-4) !important;
}

.form-section + .form-section {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-6);
    border-top: var(--hairline);
}

/* --- Controls ----------------------------------------------------- */
.form-wrap .form-control,
.form-wrap .form-select,
form .form-control,
form .form-select {
    border-color: var(--field-border) !important;
    border-radius: var(--radius-lg) !important;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out) !important;
}

.form-wrap .form-control:hover:not(:focus):not([readonly]),
form .form-control:hover:not(:focus):not([readonly]) {
    border-color: var(--neutral-400) !important;
}

.form-wrap .form-control:focus,
.form-wrap .form-select:focus,
form .form-control:focus,
form .form-select:focus {
    border-color: var(--action-primary) !important;
    box-shadow: var(--focus-ring) !important;
}

/* Readonly fields (pallet width/depth) should look derived, not broken. */
.form-wrap .form-control[readonly],
form .form-control[readonly] {
    background-color: var(--neutral-100) !important;
    color: var(--text-muted) !important;
    cursor: default;
}

/* --- Field sizing ------------------------------------------------- */
/* A weight or postcode input stretched to full column width tells the
   user to expect a long value. Cap the short ones to their content. */
@media (min-width: 768px) {
    input[name="total_weight"],
    input[name="postcode"],
    input[name*="postcode"],
    input[type="number"].form-control {
        max-width: 22ch;
    }
    input[type="date"].form-control,
    select[name="pickup_window"] {
        max-width: 28ch;
    }
}

/* --- Help text ---------------------------------------------------- */
.form-text,
.form-wrap .small.text-muted {
    color: var(--text-muted) !important;
    font-size: var(--font-size-xs) !important;
}

/* --- Checkbox / radio -------------------------------------------- */
.form-check-input {
    border-color: var(--neutral-400) !important;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out) !important;
}

.form-check-input:focus-visible {
    box-shadow: var(--focus-ring) !important;
}

/* A fieldset used purely for grouping shouldn't inherit the browser's
   default border/inset — the legend already carries the grouping. */
fieldset.border-0 > legend {
    float: none;
    width: auto;
}

/* Carrier logo fallback — shown when public/logos/{code}.png is absent.
   Was three inline style attributes duplicating the same box. */
.carrier-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 50px;
    flex-shrink: 0;
    padding: var(--spacing-1);
    background-color: var(--primary-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--primary-800);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
}

.carrier-logo-fallback.d-none {
    display: none;
}

/* Quantity select in a package row — was an inline width:70px. */
.field-qty {
    width: 70px;
    min-width: 70px;
}

/* ------------------------------------------------------------------ */
/* Home calculator: dimension row                                      */
/* Three width/height/depth fields plus a unit chip were laid out as   */
/* one non-wrapping flex row. In the narrow lg column (~300px) the     */
/* third field and its label ran past the card edge. A grid lets them  */
/* share the row evenly and drop to two columns when there is no room, */
/* instead of overflowing.                                             */
/* ------------------------------------------------------------------ */
.home-dims {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: end;
}

.home-dims > div {
    min-width: 0;
}

.home-dims .form-control {
    width: 100%;
    min-width: 0;
    /* Square off the seam between the last field and its cm chip only. */
    border-radius: var(--radius-lg);
}

.home-dims .form-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The depth field keeps its attached unit chip. */
.home-dims .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Below ~1200px the lg column is at its narrowest; two per row reads
   better than three cramped ones. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-dims {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* On a phone the three fields get a full-width row each — the old markup
   carried .flex-nowrap, which mobile-responsive.css stacked to a column for
   exactly this reason. */
@media (max-width: 575.98px) {
    .home-dims {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Calculator top row: type / weight / quantity. Same reasoning as .home-dims —
   fixed Bootstrap column widths could not hold their own labels once the
   column narrowed. */
.home-fields-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
}

.home-fields-row > .form-group {
    min-width: 0;
    margin-bottom: 0;
}

.home-fields-row .form-control,
.home-fields-row .form-select {
    width: 100%;
    min-width: 0;
}

.home-fields-row .form-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-fields-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .home-fields-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Keep the unit chip attached to its input inside the calculator grids. The
   cells are narrow at the lg breakpoint, so without this the chip wraps below
   the field it belongs to. */
.home-fields-row .input-group,
.home-dims .input-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

.home-fields-row .input-group > .form-control,
.home-dims .input-group > .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.home-fields-row .input-group > .input-group-text,
.home-dims .input-group > .input-group-text {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Read-only account details                                           */
/* ------------------------------------------------------------------ */
.account-details {
    margin: 0;
}

.account-details dt {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.account-details dd {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    color: var(--neutral-900);
    /* IBANs and long addresses must not push the card wider. */
    overflow-wrap: anywhere;
}

.account-details dd:last-child {
    margin-bottom: 0;
}

.account-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0 2rem;
}