/* ----------------------------------------------------
   DESIGN SYSTEM & CUSTOM VARIABLES (OKLCH PALETTE)
   ---------------------------------------------------- */
:root {
    /* Color Palette */
    --color-navy: oklch(38.03% 0.2313 284.1); /* #003ea2 - Logo typography Blue */
    --color-navy-light: oklch(46% 0.18 284.1); /* Lighter Blue for borders/states */
    --color-gold: oklch(67.75% 0.1821 85.3);  /* #be962d - Logo Gold Shipping-speed icon */
    --color-gold-dark: oklch(50% 0.15 85.3);  /* Darker Gold for text contrast */
    --color-gold-light: oklch(93% 0.04 85.3); /* Subtle gold tints */
    --color-canvas: oklch(99% 0.005 240);    /* #f9fafb - Off-White Canvas */
    --color-white: #ffffff;
    --color-ink: oklch(28% 0.02 240);        /* #1f2937 - High Contrast Body Text */
    --color-ink-muted: oklch(38% 0.01 240);  /* Darker Muted Gray for WCAG AA compliance */
    --color-border: oklch(89% 0.01 240);      /* #e5e7eb - Fine Layout Dividers */
    --color-border-hover: oklch(78% 0.02 240);
    --color-success: oklch(62% 0.16 140);    /* Premium Logistical Success Green */

    /* Typography Scales */
    --font-display: 'Outfit', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --font-body: 'Outfit', 'IBM Plex Sans Arabic', system-ui, sans-serif;

    /* Structural Spacing & Border Radii */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px; /* Capped at 16px for premium, professional aesthetic */
    
    /* Easing Constants */
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-standard: 0.3s var(--ease-expo);
}

/* ----------------------------------------------------
   GLOBAL RESETS & ACCESSIBILITY
   ---------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background-color: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* Helper Class: Hidden */
.hide {
    display: none !important;
}

/* ----------------------------------------------------
   TYPOGRAPHY HIERARCHY
   ---------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-navy);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.1;
}

h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.2;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

p {
    font-size: 1rem;
    color: var(--color-ink);
    text-wrap: pretty;
    max-width: 65ch;
}

/* ----------------------------------------------------
   LAYOUT SKELETON
   ---------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ----------------------------------------------------
   HEADER & NAVIGATION
   ---------------------------------------------------- */
.main-header {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    color: var(--color-navy);
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-navy);
    line-height: 1;
}

.logo-subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gold-dark);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-link {
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-ink);
    transition: var(--transition-standard);
}

.nav-link:hover, .nav-link.active {
    color: var(--color-navy);
}

.lang-btn {
    background: var(--color-navy);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition-standard);
}

.lang-btn:hover {
    background: var(--color-gold);
    color: var(--color-navy);
}

.lang-icon {
    width: 16px;
    height: 16px;
}

/* ----------------------------------------------------
   HERO SECTION
   ---------------------------------------------------- */
.hero-section {
    position: relative;
    padding: 100px 0 80px;
    background-color: var(--color-canvas);
    overflow: hidden;
}

/* Graphic structural gridlines behind Hero */
.hero-bg-lines {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, var(--color-border) 1px, transparent 1px),
        linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.15;
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    position: relative;
    z-index: 1;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 750px;
}

.badge-eyebrow {
    align-self: flex-start;
    background-color: var(--color-gold-light);
    color: var(--color-gold-dark);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    text-transform: uppercase;
}

.hero-title {
    margin-bottom: 24px;
}

.hero-desc {
    font-size: 1.125rem;
    color: var(--color-ink-muted);
    margin-bottom: 40px;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.hero-feat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-navy);
}

.feat-icon {
    width: 20px;
    height: 20px;
    color: var(--color-gold-dark);
}

/* ----------------------------------------------------
   BUSINESS SOLUTIONS HUB SECTION
   ---------------------------------------------------- */
.solutions-hub-section {
    padding: 100px 0;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

.solutions-hub-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
}

.hub-title {
    margin-bottom: 24px;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    color: var(--color-navy);
    font-weight: 800;
}

.hub-desc {
    font-size: 0.975rem;
    line-height: 1.8;
    color: var(--color-ink-muted);
    margin-bottom: 20px;
    max-width: 100%;
}

.pillars-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 36px;
}

.pillar-card {
    display: flex;
    gap: 16px;
    background: var(--color-canvas);
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: var(--transition-standard);
}

.pillar-card-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.btn-cta-secondary.hero-contact-cta {
    background: #ffffff !important;
    color: var(--color-navy) !important;
    border: 1px solid rgba(0, 62, 162, 0.28) !important;
    box-shadow: 0 8px 18px rgba(0, 62, 162, 0.08) !important;
}

.btn-cta-secondary.hero-contact-cta:hover {
    border-color: var(--color-navy) !important;
    background: #f8faff !important;
    color: var(--color-navy) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 62, 162, 0.15) !important;
}

.public-tracking-section {
    padding: 72px 0;
    background: var(--color-canvas);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.public-tracking-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
    gap: 36px;
    align-items: start;
}

.public-tracking-copy h2 {
    margin: 0 0 12px;
    color: var(--color-navy);
    font-size: 2rem;
    font-weight: 800;
}

.public-tracking-copy p {
    margin: 0;
    max-width: 62ch;
    color: var(--color-ink-muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

.public-tracking-tool {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    padding: 22px;
}

.public-tracking-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-navy);
    font-size: 0.9rem;
    font-weight: 800;
}

.public-tracking-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.public-tracking-input-row input {
    min-height: 46px;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-canvas);
    color: var(--color-ink);
    padding: 0 14px;
    font: inherit;
    outline: none;
}

.public-tracking-input-row input::placeholder {
    color: color-mix(in srgb, var(--color-ink) 64%, var(--color-white));
}

.public-tracking-input-row input:focus {
    border-color: var(--color-gold);
    background: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-gold-light);
}

.public-tracking-input-row button {
    min-height: 46px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-navy);
    color: var(--color-white);
    padding: 0 18px;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s var(--ease-expo), transform 0.2s var(--ease-expo);
    white-space: nowrap;
}

.public-tracking-input-row button:hover:not(:disabled) {
    background: var(--color-navy-dark);
    transform: translateY(-1px);
}

.public-tracking-input-row button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.public-tracking-error {
    margin-top: 14px;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    background: #fef2f2;
    color: #991b1b;
    padding: 12px 14px;
    font-size: 0.9rem;
    font-weight: 700;
}

.public-tracking-result {
    margin-top: 18px;
    border-top: 1px solid var(--color-border);
    padding-top: 18px;
}

.public-tracking-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.public-tracking-label,
.public-tracking-meta span {
    display: block;
    margin-bottom: 4px;
    color: var(--color-ink-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.public-tracking-result-head strong {
    display: block;
    color: var(--color-navy);
    font-size: 1.35rem;
    font-weight: 900;
}

.public-tracking-source {
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--color-canvas);
    color: var(--color-ink-muted);
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 800;
}

.public-tracking-source.is-live {
    background: #ecfdf5;
    color: #047857;
}

.public-tracking-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.public-tracking-meta > div {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-canvas);
    padding: 12px;
}

.public-tracking-meta strong {
    color: var(--color-ink);
    font-size: 0.95rem;
}

.public-tracking-message {
    margin: 14px 0 0;
    color: var(--color-ink-muted);
    font-size: 0.9rem;
}

.public-tracking-timeline {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.public-tracking-event {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.public-tracking-event > span {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--color-gold);
}

.public-tracking-event strong {
    color: var(--color-navy);
    font-size: 0.9rem;
}

.public-tracking-event p {
    margin: 3px 0;
    color: var(--color-ink-muted);
    font-size: 0.86rem;
}

.public-tracking-event small {
    color: var(--color-ink-muted);
    font-size: 0.78rem;
}

.pillar-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-navy-light);
    box-shadow: 0 12px 30px rgba(0, 62, 162, 0.08);
}

.pillar-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pillar-icon {
    width: 24px;
    height: 24px;
}

.pillar-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pillar-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
}

.pillar-text {
    font-size: 0.825rem;
    color: var(--color-ink-muted);
    line-height: 1.4;
    margin: 0;
}

/* Image Collage Styling */
.solutions-hub-visuals {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-collage-container {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 420px;
}

.collage-bg-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(190, 150, 45, 0.15) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
}

.collage-img-wrap {
    position: absolute;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 4px solid var(--color-white);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s var(--ease-expo), box-shadow 0.4s var(--ease-expo), z-index 0.4s var(--ease-expo);
}

.collage-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.collage-caption {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 26, 94, 0.85);
    backdrop-filter: blur(4px);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 100px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.primary-img {
    width: 78%;
    top: 0;
    left: 0;
    z-index: 2;
    transform: rotate(-1.5deg);
}

.secondary-img {
    width: 72%;
    bottom: 0;
    right: 0;
    z-index: 3;
    transform: rotate(1.5deg);
}

.collage-img-wrap:hover {
    transform: scale(1.04) translateY(-8px);
    z-index: 10;
    box-shadow: 0 30px 60px rgba(0, 62, 162, 0.2);
    border-color: var(--color-navy-light);
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .solutions-hub-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
    .public-tracking-grid {
        grid-template-columns: 1fr;
    }
    .image-collage-container {
        height: 380px;
        max-width: 380px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .pillars-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .image-collage-container {
        height: 300px;
        max-width: 300px;
    }
    .public-tracking-input-row,
    .public-tracking-meta {
        grid-template-columns: 1fr;
    }
    .public-tracking-input-row button {
        width: 100%;
    }
    .public-tracking-result-head {
        flex-direction: column;
    }
}

/* RTL Styles */
html[dir="rtl"] .primary-img {
    left: auto;
    right: 0;
    transform: rotate(1.5deg);
}

html[dir="rtl"] .secondary-img {
    right: auto;
    left: 0;
    transform: rotate(-1.5deg);
}

html[dir="rtl"] .collage-caption {
    left: auto;
    right: 12px;
}

/* ----------------------------------------------------
   BOOK & INQUIRY SECTION (TABBED CARD SKELETON)
   ---------------------------------------------------- */
.calculator-section {
    padding: 80px 0;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-white);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    margin-bottom: 12px;
}

.section-subtitle {
    color: var(--color-ink-muted);
    margin: 0 auto;
}

.booking-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.dashboard-booking-hub .calculator-section {
    padding: 0;
    border-top: 0;
    background-color: transparent;
}

.dashboard-booking-hub .container {
    max-width: none;
    padding-inline: 0;
}

.dashboard-booking-hub .section-header {
    display: none;
}

.dashboard-booking-hub .booking-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 32px;
}

.dashboard-booking-hub .booking-card {
    padding: 24px;
}

.dashboard-booking-hub .freight-visual-card {
    display: none;
}

/* Base Card Styles */
.card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 32px;
    transition: var(--transition-standard);
}

/* Tabs styles */
.tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 32px;
    gap: 8px;
}

.tab-btn {
    background: none;
    border: none;
    padding: 12px 24px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    cursor: pointer;
    position: relative;
    transition: var(--transition-standard);
}

.tab-btn:hover {
    color: var(--color-navy);
}

.tab-btn.active {
    color: var(--color-navy);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-gold);
}

/* Form Styles */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-grid-three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

label {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-navy);
}

input, select, textarea {
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    background-color: var(--color-canvas);
    outline: none;
    transition: var(--transition-standard);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--color-gold);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-gold-light);
}

/* Buttons Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-standard);
    border: none;
}

.btn-primary {
    background-color: var(--color-navy);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-gold);
    color: var(--color-navy);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 62, 162, 0.1);
}

.btn-full {
    width: 100%;
}

/* Loading Spinners */
.loader-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-white);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: rotation 1s linear infinite;
    margin-left: 8px;
}

.loader-spinner.micro {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
    border-color: var(--color-navy);
    border-bottom-color: transparent;
    margin: 0;
}

.field-helper {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.field-helper.is-warning {
    color: #9a6a00;
}

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ----------------------------------------------------
   3D BOX VISUALIZER
   ---------------------------------------------------- */
.visualizer-column {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.visualizer-card {
    text-align: center;
    padding: 24px;
}

.visualizer-title {
    margin-bottom: 24px;
    font-size: 1.15rem;
}

.visualizer-container {
    height: 240px;
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px; /* Crucial for 3D depth perception */
    overflow: hidden;
    margin-bottom: 24px;
}

.visualizer-scene {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

/* Dynamic Box container */
.package-3d {
    width: 120px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(45deg);
    transition: width 0.4s var(--ease-expo), height 0.4s var(--ease-expo), transform 0.4s var(--ease-expo);
}

/* Box face styles with mathematically aligned dimensions */
.face {
    position: absolute;
    border: 2px solid var(--color-navy);
    background-color: var(--color-gold-light);
    opacity: 0.92;
    box-shadow: inset 0 0 10px rgba(0, 62, 162, 0.05);
}

/* Front & Back: Match container width and height */
.face.front, .face.back {
    width: 100%;
    height: 100%;
}

/* Left & Right: Depth x Height */
.face.left, .face.right {
    width: calc(2 * var(--box-depth-half));
    height: 100%;
    left: calc(50% - var(--box-depth-half));
}

/* Top & Bottom: Width x Depth */
.face.top, .face.bottom {
    width: 100%;
    height: calc(2 * var(--box-depth-half));
    top: calc(50% - var(--box-depth-half));
}

/* Precise CSS transforms to locate faces in 3D space */
.face.front  { transform: translateZ(var(--box-depth-half)); }
.face.back   { transform: rotateY(180deg) translateZ(var(--box-depth-half)); }
.face.right  { transform: rotateY(90deg) translateZ(var(--box-width-half)); }
.face.left   { transform: rotateY(-90deg) translateZ(var(--box-width-half)); }
.face.top    { transform: rotateX(90deg) translateZ(var(--box-height-half)); }
.face.bottom { transform: rotateX(-90deg) translateZ(var(--box-height-half)); }


.visualizer-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100px;
    align-items: center;
}

.meta-label {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
}

.meta-val {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-navy);
}

.badge-tag {
    background-color: var(--color-gold-light);
    color: var(--color-gold-dark);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.quote-history-card {
    text-align: start;
    padding: 18px;
}

.quote-history-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.quote-history-title {
    margin: 0;
    color: var(--color-navy);
    font-size: 0.98rem;
    font-weight: 800;
}

.quote-history-subtitle {
    margin: 4px 0 0;
    color: var(--color-ink-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.quote-history-count {
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--color-navy);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
}

.quote-history-empty {
    display: grid;
    gap: 4px;
    margin-top: 14px;
    border: 1px dashed rgba(0, 62, 162, 0.2);
    border-radius: var(--radius-sm);
    background: var(--color-canvas);
    padding: 14px;
    color: var(--color-ink-muted);
    font-size: 0.82rem;
}

.quote-history-empty strong {
    color: var(--color-navy);
}

.quote-history-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    max-height: 430px;
    overflow-y: auto;
    padding-inline-end: 2px;
}

.quote-history-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-canvas);
    padding: 12px;
}

.quote-history-route {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-navy);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.35;
    flex-wrap: wrap;
}

.quote-history-arrow {
    color: var(--color-gold-dark);
}

[dir="rtl"] .quote-history-arrow {
    transform: scaleX(-1);
}

.quote-history-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.quote-history-meta-line span,
.quote-history-carrier {
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-ink-muted);
    border: 1px solid rgba(0, 62, 162, 0.08);
    padding: 3px 7px;
    font-size: 0.7rem;
    font-weight: 700;
}

.quote-history-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.quote-history-price-label {
    display: block;
    color: var(--color-ink-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.quote-history-price-row strong {
    display: block;
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 900;
}

.quote-history-carrier {
    color: var(--color-navy);
    background: rgba(190, 150, 45, 0.12);
    border-color: rgba(190, 150, 45, 0.2);
}

.quote-history-carriers,
.quote-history-time {
    display: block;
    margin: 8px 0 0;
    color: var(--color-ink-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.quote-history-quotes {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.quote-history-quote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(0, 62, 162, 0.08);
    border-radius: 7px;
    background: var(--color-white);
    padding: 8px 9px;
}

.quote-history-quote-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.quote-history-quote-main strong {
    color: var(--color-navy);
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quote-history-quote-main span {
    color: var(--color-ink-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.quote-history-quote-price {
    text-align: end;
}

.quote-history-quote-price strong {
    color: var(--color-navy);
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
}

.quote-history-quote-price span {
    border-radius: 999px;
    background: #fff1f2;
    color: #b91c1c;
    padding: 3px 7px;
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.quote-history-quote.is-available {
    border-color: rgba(0, 62, 162, 0.12);
}

.quote-history-quote.is-unavailable {
    background: rgba(255, 255, 255, 0.72);
}

/* ----------------------------------------------------
   CARRIER COMPARISON RESULTS
   ---------------------------------------------------- */
.quote-card {
    border-color: var(--color-gold);
    animation: slideUp 0.5s var(--ease-expo);
}

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

.quote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 12px;
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-ink-muted);
    cursor: pointer;
}

.quotes-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quote-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: var(--transition-standard);
}

.quote-item:hover {
    border-color: var(--color-navy);
    box-shadow: 0 4px 12px rgba(0, 62, 162, 0.05);
}

.quote-carrier {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.carrier-badge {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-navy);
}

.carrier-badge.dhl-text { color: #d00000; }
.carrier-badge.fedex-text { color: #4d148c; }
.carrier-badge.aramex-text { color: #e11919; }
.carrier-badge.smsa-text { color: #0056b3; }

.carrier-delivery {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
}

.quote-price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-gold-dark);
}

/* ----------------------------------------------------
   SIMULATED TRACKING SECTION
   ---------------------------------------------------- */
.tracking-section {
    padding: 80px 0;
    background-color: var(--color-canvas);
    border-top: 1px solid var(--color-border);
}

.tracking-card {
    padding: 40px;
}

.tracking-search-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.input-with-icon {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    color: var(--color-ink-muted);
}

.input-with-icon input {
    width: 100%;
    padding-left: 48px;
}

.tracking-helper {
    font-size: 0.85rem;
    color: var(--color-ink-muted);
    margin-bottom: 32px;
}

.tracking-display-area {
    border-top: 1px solid var(--color-border);
    padding-top: 32px;
    animation: slideUp 0.6s var(--ease-expo);
}

.tracking-grid-inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 40px;
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    padding: 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
}

.status-badge {
    background-color: var(--color-navy);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.milestones-stepper {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Stepper vertical line */
.milestones-stepper::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background-color: var(--color-border);
    z-index: 1;
}

.step {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    color: var(--color-ink-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    transition: var(--transition-standard);
}

.step.completed .step-circle {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

.step.active .step-circle {
    border-color: var(--color-gold);
    color: var(--color-gold-dark);
    box-shadow: 0 0 0 3px var(--color-gold-light);
}

.step-details {
    display: flex;
    flex-direction: column;
}

.step-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.step-time {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
}

/* MAP PANEL & ANIME PATH */
.tracking-map-panel {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.map-container {
    width: 100%;
    height: 100%;
    padding: 16px;
}

.vector-world-map {
    width: 100%;
    height: 100%;
    max-height: 360px;
}

/* Advanced SVG Route flight path styling */
.route-arc {
    stroke-dasharray: 8, 8;
}

.route-arc-flow {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 3s linear;
}

.animate-route .route-arc-flow {
    animation: flightFlow 4s infinite linear;
}

@keyframes flightFlow {
    0% { stroke-dashoffset: 200; }
    100% { stroke-dashoffset: 0; }
}

/* Plane flight motion along SVG coordinate path */
#plane-indicator {
    transform-origin: center;
    opacity: 0;
}

.animate-route #plane-indicator {
    animation: planeFly 4s infinite linear;
    opacity: 1;
}

@keyframes planeFly {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

/* ----------------------------------------------------
   CONNECTED CARRIERS GRID
   ---------------------------------------------------- */
.partners-section {
    padding: 60px 0;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
}

.partners-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.partners-title {
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-navy);
}

.partners-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.partner-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-standard);
}

.partner-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-4px);
}

.partner-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.75rem;
}

.partner-logo.dhl { color: #d00000; }
.partner-logo.fedex { color: #4d148c; }
.partner-logo.aramex { color: #e11919; text-transform: lowercase; }
.partner-logo.smsa { color: #0056b3; font-style: italic; }

.partner-service {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
}

/* ----------------------------------------------------
   FOOTER
   ---------------------------------------------------- */
.main-footer {
    background-color: var(--color-canvas);
    color: var(--color-ink);
    padding: 80px 0 40px;
    border-top: 1px solid var(--color-border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.text-light {
    color: var(--color-white) !important;
}

.text-gold {
    color: var(--color-gold) !important;
}

.footer-desc {
    color: var(--color-ink-muted);
    font-size: 0.9rem;
    max-width: 320px;
}

.footer-title {
    color: var(--color-navy);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links-col a {
    color: var(--color-ink-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition-standard);
}

.footer-links-col a:hover {
    color: var(--color-gold-dark);
    padding-left: 4px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--color-border);
    padding-top: 30px;
    font-size: 0.8rem;
    color: var(--color-ink-muted);
}

/* ----------------------------------------------------
   BILINGUAL RTL DIRECTIONS & TRANSLATIONS
   ---------------------------------------------------- */
html[dir="rtl"] {
    font-family: var(--font-body);
}

html[dir="rtl"] .logo-title {
    font-size: 1.4rem;
}

/* Horizontal alignment swaps for RTL */
html[dir="rtl"] .lang-btn {
    flex-direction: row-reverse;
}

html[dir="rtl"] .search-icon {
    left: auto;
    right: 16px;
}

html[dir="rtl"] .input-with-icon input {
    padding-left: 16px;
    padding-right: 48px;
}

html[dir="rtl"] .milestones-stepper::before {
    left: auto;
    right: 18px;
}

html[dir="rtl"] .step {
    flex-direction: row-reverse;
}

html[dir="rtl"] .step-details {
    text-align: right;
}

html[dir="rtl"] .footer-links-col a:hover {
    padding-left: 0;
    padding-right: 4px;
}

html[dir="rtl"] .package-3d {
    transform: rotateX(-20deg) rotateY(-45deg); /* Mirror 3D box scene angle */
}

/* ----------------------------------------------------
   RESPONSIVE MEDIA QUERIES
   ---------------------------------------------------- */
@media (max-width: 992px) {
    .booking-grid {
        grid-template-columns: 1fr;
    }
    
    .tracking-grid-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header-inner {
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        flex-direction: column;
        gap: 20px;
    }
    
    .nav-links {
        gap: 20px;
    }

    .form-grid, .form-grid-three {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* ----------------------------------------------------
   PREMIUM LOADER SCREEN
   ---------------------------------------------------- */
.premium-loader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, oklch(24% 0.03 240) 0%, oklch(14% 0.04 240) 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s var(--ease-expo), visibility 0.8s var(--ease-expo);
    opacity: 1;
    visibility: visible;
    overflow: hidden;
}

.premium-loader.loader-fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Highly-refined structural grid overlay */
.loader-bg-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center;
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
}

.loader-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 480px;
    padding: 24px;
}

.loader-logo-area {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.loader-logo-icon {
    width: 44px;
    height: 44px;
    color: var(--color-gold); /* #be962d */
}

.loader-logo-text {
    display: flex;
    flex-direction: column;
}

.loader-logo-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--color-white);
    line-height: 1;
}

.loader-logo-subtitle {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Route Animation container */
.loader-animation-container {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.loader-route-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Dynamic self-drawing path based on progress custom property */
#loader-route-path-flow {
    stroke-dashoffset: calc(318 * (1 - var(--loader-progress-decimal, 0)));
    transition: stroke-dashoffset 0.1s linear;
}

/* Telemetry coordinate ring pulsing */
.telemetry-ring-1 {
    animation: telemetryRingPulse 2.5s infinite ease-out;
}
.telemetry-ring-2 {
    animation: telemetryRingPulse 2.5s infinite ease-out;
    animation-delay: 0.8s;
}

#origin-telemetry .telemetry-ring-1,
#origin-telemetry .telemetry-ring-2 {
    transform-origin: 50px 100px;
}

#dest-telemetry .telemetry-ring-1,
#dest-telemetry .telemetry-ring-2 {
    transform-origin: 350px 100px;
}

@keyframes telemetryRingPulse {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* Moving Cargo Plane */
.loader-plane {
    offset-path: path("M 50 100 Q 200 20 350 100");
    offset-distance: var(--loader-progress, 0%);
    offset-rotate: auto; /* Aligns automatically as custom vector jet points rightward */
    transition: offset-distance 0.1s linear;
}

/* Progress Tracking Styles */
.loader-progress-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loader-status-container {
    height: 48px;
    margin-bottom: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.loader-status-en, .loader-status-ar {
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.loader-status-en {
    font-size: 0.95rem;
    color: var(--color-white);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.loader-status-ar {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-gold);
    font-weight: 500;
}

.loader-progress-bar-container {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}

/* Optimized GPU-accelerated Progress Bar scaling */
.loader-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--color-gold);
    transform: scaleX(var(--loader-progress-decimal, 0));
    transform-origin: left;
    transition: transform 0.1s linear;
}

/* RTL translation for scale growth origin */
html[dir="rtl"] .loader-progress-bar {
    transform-origin: right;
}

.loader-percentage-container {
    display: flex;
    justify-content: center;
}

.loader-percentage {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-white);
    font-variant-numeric: tabular-nums; /* Prevents text width shifting on digit changes */
}

/* Lock scroll while loader is active */
body.loader-active {
    overflow: hidden !important;
}

/* Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
    .loader-plane {
        transition: none !important;
        offset-distance: 100% !important; /* Lock plane at destination */
    }
    #loader-route-path-flow {
        transition: none !important;
        stroke-dashoffset: 0 !important; /* Draw path instantly */
    }
    .telemetry-ring-1, .telemetry-ring-2 {
        animation: none !important;
        opacity: 0.2 !important;
        transform: scale(1) !important;
    }
    .loader-progress-bar {
        transition: none !important;
    }
}

/* ----------------------------------------------------
   WORKING STEPS SECTION (TIMELINE WORKFLOW)
   ---------------------------------------------------- */
.working-steps-section {
    padding: 80px 0;
    background-color: var(--color-canvas);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.working-steps-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}
.working-steps-section .timeline-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
}
/* Horizontal connector path */
.working-steps-section .timeline-container::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 40px;
    right: 40px;
    height: 2px;
    background-image: linear-gradient(to right, var(--color-gold) 50%, transparent 50%);
    background-size: 16px 2px;
    z-index: 1;
    opacity: 0.4;
}
.working-steps-section .timeline-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}
.working-steps-section .step-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    color: var(--color-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 62, 162, 0.03);
    transition: var(--transition-standard);
}
.working-steps-section .timeline-step:hover .step-badge {
    border-color: var(--color-gold);
    color: var(--color-gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 0 0 4px var(--color-gold-light);
}
.working-steps-section .step-icon-wrap {
    display: none; /* Hide icon wrapper by default since show-numbers is true */
}
.working-steps-section .step-icon-svg {
    width: 24px;
    height: 24px;
}
.working-steps-section .step-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-navy);
}
.working-steps-section .step-desc {
    font-size: 0.9rem;
    color: var(--color-ink-muted);
    line-height: 1.5;
    max-width: 240px;
}

/* Responsive Stack */
@media (max-width: 768px) {
    .working-steps-section .timeline-container {
        flex-direction: column;
        gap: 40px;
    }
    .working-steps-section .timeline-container::before {
        top: 28px;
        bottom: 28px;
        left: 28px;
        right: auto;
        width: 2px;
        height: auto;
        background-image: linear-gradient(to bottom, var(--color-gold) 50%, transparent 50%);
        background-size: 2px 16px;
    }
    .working-steps-section .timeline-step {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: 20px;
    }
    .working-steps-section .step-badge {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .working-steps-section .step-desc {
        max-width: none;
    }
    html[dir="rtl"] .working-steps-section .timeline-container::before {
        left: auto;
        right: 28px;
    }
    html[dir="rtl"] .working-steps-section .timeline-step {
        text-align: right;
        flex-direction: row-reverse;
    }
}

/* ----------------------------------------------------
   HERO RADAR TELEMETRY ILLUSTRATION (VARIANT 1)
   ---------------------------------------------------- */
.hero-section > .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}
.hero-section .hero-content {
    max-width: 650px;
}
.hero-section .hero-illustration {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-section .hero-video-panel {
    justify-content: flex-end;
}
.hero-section .hero-video {
    display: block;
    width: min(100%, 520px);
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(0, 62, 162, 0.14);
    border-radius: 12px;
    background: #000000;
    object-fit: cover;
}
.hero-section .radar-svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    overflow: visible;
}
/* Sweeping radar effect */
.hero-section .radar-sweep-beam {
    transform-origin: 200px 200px;
    animation: radarSweep 8s infinite linear;
}
@keyframes radarSweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Waypoints pulsing */
.hero-section .radar-waypoint {
    transform-origin: center;
    animation: waypointPulse 3s infinite ease-out;
}
@keyframes waypointPulse {
    0% { transform: scale(0.8); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.3; }
}
/* Jet flight corridor dash */
.hero-section .flight-corridor-flow {
    stroke-dasharray: 10, 10;
    animation: routeDashFlow 30s infinite linear;
}
@keyframes routeDashFlow {
    from { stroke-dashoffset: 500; }
    to { stroke-dashoffset: 0; }
}

@media (max-width: 992px) {
    .hero-section > .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hero-section .hero-illustration {
        margin-top: 20px;
    }
    .hero-section .hero-video-panel {
        justify-content: center;
    }
    .hero-section .hero-video {
        width: min(100%, 680px);
    }
}

/* ----------------------------------------------------
   WHY CHOOSE US: THE FLOWING LOGISTICS PILLARS (VARIANT 2)
   ---------------------------------------------------- */
.why-choose-section {
    padding: 80px 0;
    background-color: var(--color-canvas);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.why-choose-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}
.why-choose-section .why-pillars {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}
.why-choose-section .why-pillar {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 28px;
    transition: var(--transition-standard);
}
.why-choose-section .why-pillar:hover {
    border-color: var(--color-gold);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 62, 162, 0.04);
}
html[dir="rtl"] .why-choose-section .why-pillar:hover {
    transform: translateX(-4px);
}
.why-choose-section .why-pillar-num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gold);
    line-height: 1;
    opacity: 0.8;
}
.why-choose-section .why-pillar-body {
    flex: 1;
}
.why-choose-section .why-pillar-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 4px;
}
.why-choose-section .why-pillar-desc {
    font-size: 0.9rem;
    color: var(--color-ink-muted);
    line-height: 1.5;
}

/* ----------------------------------------------------
   CONNECTED CARRIER LOGOS (ACCEPTED VARIANT 1)
   ---------------------------------------------------- */
.partners-section .partners-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.partners-section .partners-title {
    margin-bottom: 40px;
    text-align: center;
}
.partners-section .partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    width: 100%;
}
.partners-section .partner-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: var(--transition-standard);
}
.partners-section .partner-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 62, 162, 0.04);
}
.partners-section .carrier-logo-svg,
.partners-section .partner-logo-img {
    height: 36px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    margin-bottom: 0;
}
.partners-section .partner-service {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ----------------------------------------------------
   AUTHENTICATION UI PORTAL (BILINGUAL)
   ---------------------------------------------------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-signin-btn {
    background: var(--color-navy);
    color: var(--color-white) !important;
    border: 1.5px solid var(--color-navy);
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-standard);
    box-shadow: 0 2px 6px rgba(0, 62, 162, 0.15);
}

.nav-signin-btn:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy) !important;
    box-shadow: 0 4px 10px rgba(190, 150, 45, 0.3);
}

.nav-register-btn {
    background: var(--color-white);
    color: var(--color-navy) !important;
    border-color: var(--color-gold);
    box-shadow: none;
}

.nav-register-btn:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy) !important;
}

/* Premium High-Contrast CTA Buttons for dark/colored sections */
.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gold) !important;
    color: var(--color-navy) !important;
    border: 1.5px solid var(--color-gold) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 28px !important;
    font-family: var(--font-body);
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: var(--transition-standard);
    box-shadow: 0 4px 12px rgba(190, 150, 45, 0.35) !important;
}

.btn-cta-primary:hover {
    background-color: var(--color-white) !important;
    border-color: var(--color-white) !important;
    color: var(--color-navy) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.4) !important;
}

.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-white) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 28px !important;
    font-family: var(--font-body);
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: var(--transition-standard);
}

.btn-cta-secondary:hover {
    background: var(--color-white) !important;
    border-color: var(--color-white) !important;
    color: var(--color-navy) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.2) !important;
}

.auth-split-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 100vh;
    background-color: var(--color-canvas);
}

.auth-visual-side {
    background-color: var(--color-navy);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.auth-visual-inner {
    max-width: 500px;
    z-index: 2;
}

.auth-visual-side .badge-eyebrow {
    color: var(--color-gold);
    border-color: rgba(190, 150, 45, 0.3);
    margin-bottom: 24px;
}

.auth-visual-side h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

.auth-visual-side p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 32px;
}

.auth-visual-telemetry {
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    padding-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    font-family: var(--font-body);
}

.auth-telemetry-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-telemetry-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-gold);
    letter-spacing: 0.05em;
}

.auth-telemetry-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
}

.auth-bg-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 1;
}

.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    position: relative;
    z-index: 2;
}

.auth-form-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(0, 62, 162, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 62, 162, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 1;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 62, 162, 0.02);
    position: relative;
    z-index: 2;
    animation: authCardEntrance 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.auth-card-logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.auth-card-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 8px;
}

.auth-card-desc {
    font-size: 0.9rem;
    color: var(--color-ink-muted);
    margin-bottom: 24px;
}

.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    position: relative;
}

.auth-form-group label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-navy);
}

.auth-form-group input {
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    width: 100%;
    background: var(--color-canvas);
    transition: var(--transition-standard);
    box-sizing: border-box;
    font-family: var(--font-body);
}

.auth-form-group input:focus {
    outline: none;
    border-color: var(--color-gold);
    background: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-gold-light);
}

.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 48px;
}

html[dir="rtl"] .password-wrapper input {
    padding-left: 48px;
    padding-right: 16px;
}

.eye-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--color-ink-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--radius-xs);
    transition: var(--transition-standard);
}

.eye-toggle-btn:hover {
    color: var(--color-navy);
}

html[dir="rtl"] .eye-toggle-btn {
    right: auto;
    left: 12px;
}

.eye-toggle-btn:focus-visible {
    outline: 2px solid var(--color-gold);
}

.eye-icon-svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Password Strength Indicator */
.strength-meter {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.strength-segment {
    flex: 1;
    height: 4px;
    border-radius: var(--radius-xs);
    background-color: var(--color-border);
    transition: background-color 200ms cubic-bezier(0.25, 1, 0.5, 1), transform 200ms cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center;
}

.strength-text {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 6px;
    display: block;
}

.strength-segment.active-weak {
    background-color: #d00000;
    transform: scaleY(1.3);
}

.strength-segment.active-medium {
    background-color: var(--color-gold);
    transform: scaleY(1.3);
}

.strength-segment.active-strong {
    background-color: var(--color-navy);
    transform: scaleY(1.3);
}

/* Validation states & visual banners */
.input-invalid {
    border-color: #d00000 !important;
}

.input-invalid:focus {
    box-shadow: 0 0 0 3px rgba(208, 0, 0, 0.15) !important;
}

.error-message {
    font-size: 0.8rem;
    color: #d00000;
    margin-top: 4px;
    font-weight: 500;
}

.alert-banner {
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin-bottom: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: alertEntrancePulse 350ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes alertEntrancePulse {
    0% {
        transform: scale(0.96) translateY(-4px);
        opacity: 0;
    }
    70% {
        transform: scale(1.01) translateY(1px);
        opacity: 0.9;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.alert-error {
    background-color: rgba(208, 0, 0, 0.03);
    border-color: rgba(208, 0, 0, 0.15);
    color: #d00000;
}

.alert-success {
    background-color: rgba(190, 150, 45, 0.05);
    border-color: var(--color-gold-light);
    color: var(--color-gold-dark);
}

/* Navigation Utilities for Auth Page */
.auth-nav-link {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-gold-dark);
    text-decoration: none;
    transition: var(--transition-standard);
}

.auth-nav-link:hover {
    color: var(--color-navy);
}

.auth-footer-links {
    margin-top: 24px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-ink-muted);
}

.auth-footer-links a {
    font-weight: 600;
    color: var(--color-navy);
    text-decoration: none;
    margin-left: 4px;
    transition: var(--transition-standard);
}

.auth-footer-links a:hover {
    color: var(--color-gold-dark);
}

/* Logistics-themed animations & details */
.auth-stamp-overlay {
    position: absolute;
    bottom: -30px;
    right: -30px;
    opacity: 0.03;
    pointer-events: none;
    color: var(--color-navy);
    transform: rotate(-15deg);
}

html[dir="rtl"] .auth-stamp-overlay {
    right: auto;
    left: -30px;
    transform: rotate(15deg);
}

.btn-auth-submit {
    position: relative;
    overflow: hidden;
    transition: background-color 250ms ease, opacity 250ms ease;
}

.btn-auth-submit .loader-spinner {
    margin-left: 0;
    margin-right: 0;
    position: absolute;
    right: 20px;
    top: calc(50% - 10px);
}

html[dir="rtl"] .btn-auth-submit .loader-spinner {
    right: auto;
    left: 20px;
}

.btn-auth-submit[disabled]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--color-gold);
    width: 100%;
    transform: translateX(-100%);
    animation: btnProgressSweep 1.5s infinite linear;
}

@keyframes btnProgressSweep {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.btn-auth-submit[disabled] {
    opacity: 0.9;
    cursor: not-allowed;
    background-image: linear-gradient(
        90deg, 
        rgba(0, 62, 162, 0) 0%, 
        rgba(190, 150, 45, 0.08) 50%, 
        rgba(0, 62, 162, 0) 100%
    );
    background-size: 200% 100%;
    animation: btnScanGlow 1.5s infinite linear;
}

@keyframes btnScanGlow {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .auth-split-layout {
        grid-template-columns: 1fr;
    }
    .auth-visual-side {
        display: none;
    }
    .auth-form-side {
        background-color: var(--color-canvas);
        min-height: 100vh;
    }
}

/* Animated route lines & parcel flow in auth portal */
.auth-route-flow {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
    animation: authFlowDash 6s infinite linear;
}

@keyframes authFlowDash {
    0% {
        stroke-dashoffset: 350;
    }
    50% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -350;
    }
}

.auth-telemetry-visual {
    animation: telemetryVisualFloat 8s ease-in-out infinite;
}

@keyframes telemetryVisualFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.auth-active-parcel {
    offset-path: path("M 60 170 C 130 60, 270 60, 340 170");
    animation: authParcelMove 6s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
    will-change: transform;
}

@keyframes authParcelMove {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

.loader-pin-group circle {
    transform-origin: center;
    transform-box: fill-box;
}

.loader-pin-group .telemetry-ring-1 {
    animation: telemetryPulse 2s infinite ease-out;
}

.loader-pin-group .telemetry-ring-2 {
    animation: telemetryPulse 2s infinite ease-out;
    animation-delay: 0.5s;
}

@keyframes telemetryPulse {
    0% {
        transform: scale(0.6);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Prefers-reduced-motion safety overrides */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: scroll !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
    
    .auth-route-flow {
        stroke-dashoffset: 0 !important;
        animation: none !important;
    }
    
    .auth-active-parcel {
        offset-distance: 100% !important;
        animation: none !important;
    }
    
    .auth-telemetry-visual {
        animation: none !important;
    }

    .air-plane-vessel {
        offset-distance: 55% !important;
        animation: none !important;
    }
    
    .radar-sweep-circle {
        animation: none !important;
        opacity: 0.25 !important;
        r: 50px !important;
    }
    
    .air-flow-corridor {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
    
    .ocean-wave-line-1, .ocean-wave-line-2, .ocean-wave-line-3 {
        animation: none !important;
    }
    
    .sea-vessel-container {
        transform: translate(150px, 118px) !important;
        animation: none !important;
    }
    
    html[dir="rtl"] .sea-vessel-container {
        transform: translate(150px, 118px) scaleX(-1) !important;
        animation: none !important;
    }

    .radar-waypoint-pulse {
        animation: none !important;
        opacity: 0.3 !important;
        r: 6px !important;
    }
}

/* ----------------------------------------------------
   AIR & SEA FREIGHT VISUALIZER
   ---------------------------------------------------- */
.freight-visual-card {
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.freight-visual-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 62, 162, 0.18), 0 0 15px rgba(190, 150, 45, 0.15);
    border-color: rgba(190, 150, 45, 0.5) !important;
}

.freight-visual-card .visualizer-container {
    background-color: #131f32; /* Deep Navy Control Deck */
    border: 1px solid rgba(190, 150, 45, 0.25); /* Refined Gold Border */
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s ease;
}

.freight-visual-card:hover .visualizer-container {
    border-color: rgba(190, 150, 45, 0.5);
}

/* Scoped flex container paddings */
.freight-air-visual, .freight-sea-visual {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

/* Telemetry Text Polish */
.freight-visual-card text {
    font-family: var(--font-mono, monospace) !important;
    text-shadow: 0 0 4px rgba(190, 150, 45, 0.4);
    transition: fill 0.3s ease, text-shadow 0.3s ease;
}

.freight-visual-card:hover text {
    fill: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Vector Asset Colors and Highlights */
.freight-visual-card .air-plane-vessel path,
.freight-visual-card .sea-vessel-container path {
    transition: fill 0.3s ease;
}

.freight-visual-card:hover .air-plane-vessel path,
.freight-visual-card:hover .sea-vessel-container path {
    fill: #ffffff !important;
}

.freight-visual-card .ocean-wave-line-2 {
    transition: stroke 0.3s ease;
}

.freight-visual-card:hover .ocean-wave-line-2 {
    stroke: rgba(190, 150, 45, 0.25) !important;
}

/* Route dots / dashes and coordinates glow */
.freight-visual-card .air-flow-corridor {
    transition: stroke 0.3s ease, filter 0.3s ease;
}

.freight-visual-card:hover .air-flow-corridor {
    stroke: #ffffff !important;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.freight-visual-card .radar-waypoint {
    transition: fill 0.3s ease, filter 0.3s ease;
}

.freight-visual-card:hover .radar-waypoint {
    fill: #ffffff !important;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}

.freight-visual-card .radar-waypoint-pulse {
    transition: stroke 0.3s ease;
}

.freight-visual-card:hover .radar-waypoint-pulse {
    stroke: #ffffff !important;
}

/* Ship Container Details Highlight */
.freight-visual-card .cargo-container-box {
    transition: fill 0.3s ease, filter 0.3s ease;
}

.freight-visual-card:hover .cargo-container-box {
    fill: #be962d !important;
    filter: drop-shadow(0 0 2px rgba(190, 150, 45, 0.8));
}

/* Toggle visibility based on data-mode */
.freight-visual-card[data-mode="air"] .freight-air-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.freight-visual-card[data-mode="air"] .freight-sea-visual {
    display: none !important;
}

.freight-visual-card[data-mode="sea"] .freight-sea-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.freight-visual-card[data-mode="sea"] .freight-air-visual {
    display: none !important;
}

/* Radar scope decorators */
.radar-scope-dec, .radar-scope-dec-rtl {
    position: absolute;
    top: 12px;
    left: 14px;
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(190, 150, 45, 0.45);
    pointer-events: none;
    text-transform: uppercase;
}

html[dir="rtl"] .radar-scope-dec {
    display: none;
}
html[dir="ltr"] .radar-scope-dec-rtl {
    display: none;
}
html[dir="rtl"] .radar-scope-dec-rtl {
    left: auto;
    right: 14px;
}

/* Radar Concentric Pulsing */
.radar-sweep-circle {
    transform-origin: 150px 80px;
    animation: radarSweep 4s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.freight-visual-card:hover .radar-sweep-circle {
    animation-duration: 2s;
}

@keyframes radarSweep {
    0% {
        r: 5px;
        opacity: 0.9;
    }
    100% {
        r: 95px;
        opacity: 0;
    }
}

/* Pulsing Beacons keyframe */
.radar-waypoint-pulse {
    animation: waypointPulse 3s infinite ease-out;
}

@keyframes waypointPulse {
    0% {
        r: 3.5px;
        opacity: 0.9;
    }
    100% {
        r: 12px;
        opacity: 0;
    }
}

/* Flight Path & Air Flow Corridor */
.air-flow-corridor {
    stroke-dasharray: 8, 8;
    animation: corridorFlow 12s infinite linear;
}

.freight-visual-card:hover .air-flow-corridor {
    animation-duration: 6s;
}

@keyframes corridorFlow {
    to {
        stroke-dashoffset: -160px;
    }
}

/* Animated Air Plane Vessel */
.air-plane-vessel {
    offset-path: path("M 40 120 Q 150 20 260 120");
    offset-rotate: auto;
    animation: planeMove 7s infinite linear;
    transform-box: fill-box;
    transform-origin: center;
}

.freight-visual-card:hover .air-plane-vessel {
    animation-duration: 4s;
}

html[dir="rtl"] .air-plane-vessel {
    offset-path: path("M 260 120 Q 150 20 40 120");
}

@keyframes planeMove {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

/* Ocean Wave Animations */
.ocean-wave-line-1 {
    animation: waveDrift1 12s infinite linear;
}
.ocean-wave-line-2 {
    animation: waveDrift2 9s infinite linear;
}
.ocean-wave-line-3 {
    animation: waveDrift3 15s infinite linear;
}

.freight-visual-card:hover .ocean-wave-line-1 { animation-duration: 6s; }
.freight-visual-card:hover .ocean-wave-line-2 { animation-duration: 4.5s; }
.freight-visual-card:hover .ocean-wave-line-3 { animation-duration: 7.5s; }

@keyframes waveDrift1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(40px); }
}
@keyframes waveDrift2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}
@keyframes waveDrift3 {
    0% { transform: translateX(0); }
    100% { transform: translateX(25px); }
}

/* RTL Wave Mirroring */
html[dir="rtl"] .ocean-wave-line-1 {
    animation: waveDrift1RTL 12s infinite linear;
}
html[dir="rtl"] .ocean-wave-line-2 {
    animation: waveDrift2RTL 9s infinite linear;
}
html[dir="rtl"] .ocean-wave-line-3 {
    animation: waveDrift3RTL 15s infinite linear;
}

html[dir="rtl"] .freight-visual-card:hover .ocean-wave-line-1 { animation-duration: 6s; }
html[dir="rtl"] .freight-visual-card:hover .ocean-wave-line-2 { animation-duration: 4.5s; }
html[dir="rtl"] .freight-visual-card:hover .ocean-wave-line-3 { animation-duration: 7.5s; }

@keyframes waveDrift1RTL {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}
@keyframes waveDrift2RTL {
    0% { transform: translateX(0); }
    100% { transform: translateX(40px); }
}
@keyframes waveDrift3RTL {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25px); }
}

/* Sea Cargo Vessel Container & Floating Motion */
.sea-vessel-container {
    transform: translate(150px, 118px);
    transform-origin: center;
    animation: vesselFloat 5s infinite ease-in-out;
}

.freight-visual-card:hover .sea-vessel-container {
    animation-duration: 2.5s;
}

html[dir="rtl"] .sea-vessel-container {
    animation: vesselFloatRTL 5s infinite ease-in-out;
}

@keyframes vesselFloat {
    0%, 100% {
        transform: translate(150px, 118px) rotate(0deg);
    }
    25% {
        transform: translate(148px, 116px) rotate(-1.5deg);
    }
    50% {
        transform: translate(150px, 120px) rotate(0deg);
    }
    75% {
        transform: translate(152px, 117px) rotate(1.5deg);
    }
}

@keyframes vesselFloatRTL {
    0%, 100% {
        transform: translate(150px, 118px) scaleX(-1) rotate(0deg);
    }
    25% {
        transform: translate(152px, 116px) scaleX(-1) rotate(-1.5deg);
    }
    50% {
        transform: translate(150px, 120px) scaleX(-1) rotate(0deg);
    }
    75% {
        transform: translate(148px, 117px) scaleX(-1) rotate(1.5deg);
    }
}

/* Mobile Responsiveness Scales and Simplification overrides */
@media (max-width: 768px) {
    .freight-visual-card .visualizer-container {
        height: 180px; /* Slightly more compact to preserve vertical page space */
    }
    .freight-air-visual, .freight-sea-visual {
        padding: 8px;
    }
    .freight-visual-card .radar-grid-line,
    .freight-visual-card .radar-sweep-circle,
    .freight-visual-card .radar-waypoint-pulse {
        display: none !important; /* Simplify detail on mobile */
    }
}

/* Bilingual Text Display Toggles */
html[dir="rtl"] .en-only {
    display: none !important;
}
html[dir="ltr"] .ar-only {
    display: none !important;
}

/* --------------------------------------------------
   TACTICAL RADAR NETWORK FREIGHT VISUALIZER (CONSOLIDATED)
   -------------------------------------------------- */
.freight-visual-card {
    --glow-intensity: 0.5;
    --plane-dur: 7s;
    --wave-dur: 12s;
    --vessel-dur: 5s;
    
    background: var(--color-navy);
    transition: transform var(--transition-standard), box-shadow var(--transition-standard), border-color var(--transition-standard);
    border: 1px solid var(--color-border);
}

.freight-visual-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 62, 162, 0.15), 0 0 10px rgba(190, 150, 45, 0.1);
    border-color: rgba(190, 150, 45, 0.4) !important;
}

.v1-visualizer-container {
    background-color: #0b1320;
    border: 1px solid rgba(190, 150, 45, 0.15);
    position: relative;
    overflow: hidden;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: border-color var(--transition-standard);
}

.freight-visual-card:hover .v1-visualizer-container {
    border-color: rgba(190, 150, 45, 0.3);
}

.v1-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Subtle glow on hover */
.v1-route-line, .v1-wave-2 {
    transition: stroke 0.3s ease, filter 0.3s ease;
}

.freight-visual-card:hover .v1-route-line {
    stroke: #ffffff !important;
    filter: drop-shadow(0 0 calc(5px * var(--glow-intensity)) #ffffff);
}

.freight-visual-card:hover .v1-wave-2 {
    stroke: var(--color-gold) !important;
    filter: drop-shadow(0 0 calc(5px * var(--glow-intensity)) var(--color-gold));
}

/* Radar sweeping line */
.v1-radar-sweep {
    transform-origin: 150px 85px;
    animation: v1-radarSweep 4s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.freight-visual-card:hover .v1-radar-sweep {
    animation-duration: 2s;
}

@keyframes v1-radarSweep {
    0% { r: 5px; opacity: 0.9; }
    100% { r: 90px; opacity: 0; }
}

/* Pulsing waypoint pins */
.v1-waypoint-pulse {
    animation: v1-waypointPulse 3s infinite ease-out;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes v1-waypointPulse {
    0% { r: 3.5px; opacity: 0.9; }
    100% { r: 12px; opacity: 0; }
}

/* Plane flight path and offset-path movement */
.v1-plane-vessel {
    offset-path: path("M 40 90 Q 150 20 260 90");
    offset-rotate: auto;
    animation: v1-planeMove var(--plane-dur) infinite linear;
    transform-box: fill-box;
    transform-origin: center;
}

.freight-visual-card:hover .v1-plane-vessel {
    animation-duration: calc(var(--plane-dur) * 0.6);
}

@keyframes v1-planeMove {
    0% { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}

/* Ocean waves horizontal drift */
.v1-wave-1 { animation: v1-waveDrift1 var(--wave-dur) infinite linear; }
.v1-wave-2 { animation: v1-waveDrift2 calc(var(--wave-dur) * 0.75) infinite linear; }
.v1-wave-3 { animation: v1-waveDrift3 calc(var(--wave-dur) * 1.25) infinite linear; }

@keyframes v1-waveDrift1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(30px); }
}
@keyframes v1-waveDrift2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-30px); }
}
@keyframes v1-waveDrift3 {
    0% { transform: translateX(0); }
    100% { transform: translateX(20px); }
}

/* Cargo Vessel floating and scale transitions */
.v1-ship-vessel {
    transform: translate(150px, 140px);
    transform-origin: center;
    animation: v1-vesselFloat var(--vessel-dur) infinite ease-in-out;
}

.freight-visual-card:hover .v1-ship-vessel {
    animation-duration: calc(var(--vessel-dur) * 0.5);
}

@keyframes v1-vesselFloat {
    0%, 100% { transform: translate(150px, 140px) rotate(0deg); }
    25% { transform: translate(148px, 138px) rotate(-1.5deg); }
    50% { transform: translate(150px, 142px) rotate(0deg); }
    75% { transform: translate(152px, 139px) rotate(1.5deg); }
}

/* Ship container boxes highlights */
.v1-cargo-box {
    transition: fill 0.3s ease, filter 0.3s ease;
}

.freight-visual-card:hover .v1-cargo-box {
    fill: #ffffff !important;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
}

/* Active highlighting based on mode (Air vs Sea) */
.freight-visual-card[data-mode="air"] .v1-air-group {
    opacity: 1;
    stroke: var(--color-gold);
    filter: drop-shadow(0 0 calc(6px * var(--glow-intensity)) var(--color-gold));
}

.freight-visual-card[data-mode="air"] .v1-sea-group {
    opacity: 0.35;
}

.freight-visual-card[data-mode="sea"] .v1-sea-group {
    opacity: 1;
    stroke: var(--color-gold);
    filter: drop-shadow(0 0 calc(6px * var(--glow-intensity)) var(--color-gold));
}

.freight-visual-card[data-mode="sea"] .v1-air-group {
    opacity: 0.35;
}

.v1-telemetry {
    font-family: var(--font-mono, monospace) !important;
    text-shadow: 0 0 3px rgba(190, 150, 45, 0.3);
    fill: #be962d !important;
}

.freight-visual-card:hover .v1-telemetry {
    fill: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* Reduced motion adaptations */
@media (prefers-reduced-motion: reduce) {
    .v1-plane-vessel {
        animation: none !important;
        offset-distance: 50% !important;
    }
    .v1-ship-vessel {
        animation: none !important;
        transform: translate(150px, 140px) !important;
    }
    .v1-wave-1, .v1-wave-2, .v1-wave-3 {
        animation: none !important;
    }
    .v1-radar-sweep {
        animation: none !important;
        r: 60px !important;
        opacity: 0.25 !important;
    }
}


/* ============================================================
   EXPRESS BOOKING PAGE — FULL MULTI-STEP WIZARD STYLES
   ============================================================ */

/* ---- Page Layout ---- */
.eb-page {
    min-height: 100vh;
    background-color: var(--color-canvas);
}

/* ---- Title Bar ---- */
.eb-title-bar {
    padding: 48px 0 32px;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.eb-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--color-ink-muted);
}

.eb-breadcrumb a {
    color: var(--color-gold-dark);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-standard);
}

.eb-breadcrumb a:hover {
    color: var(--color-navy);
}

.eb-page-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 8px;
}

.eb-page-desc {
    color: var(--color-ink-muted);
    font-size: 1rem;
    max-width: 600px;
}

/* ---- Step Progress Bar ---- */
.eb-progress-bar-section {
    padding: 24px 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 80px;
    z-index: 50;
}

.eb-steps-track {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.eb-steps-track::-webkit-scrollbar {
    height: 5px;
}

.eb-steps-track::-webkit-scrollbar-track {
    background: transparent;
}

.eb-steps-track::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 10px;
}

.eb-steps-track::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-navy-light);
}

.eb-step-indicator {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    transition: var(--transition-standard);
    position: relative;
    flex-shrink: 0;
}

.eb-step-indicator.clickable {
    cursor: pointer;
}

.eb-step-indicator.clickable:not(.active):hover {
    background-color: rgba(0, 62, 162, 0.06);
    color: var(--color-navy);
}

.eb-step-indicator.clickable:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.eb-step-indicator.locked {
    cursor: not-allowed;
    opacity: 0.58;
}

.eb-step-indicator:not(:last-child)::after {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--color-border);
    margin-inline-start: 8px;
}

.eb-step-indicator.active {
    background-color: var(--color-gold-light);
    color: var(--color-navy);
}

.eb-step-indicator.completed {
    color: var(--color-navy);
}

.eb-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-ink-muted);
    transition: var(--transition-standard);
    flex-shrink: 0;
}

.eb-step-indicator.active .eb-step-dot {
    border-color: var(--color-gold);
    background-color: var(--color-gold);
    color: var(--color-navy);
}

.eb-step-indicator.completed .eb-step-dot {
    border-color: var(--color-navy);
    background-color: var(--color-navy);
    color: var(--color-white);
}

.eb-step-label {
    white-space: nowrap;
}

/* ---- Main Content Grid ---- */
.eb-main-grid {
    padding: 40px 24px 80px;
    max-width: 900px;
    margin: 0 auto;
}

/* ---- Step Sections ---- */
.eb-step-section {
    animation: ebFadeIn 0.4s var(--ease-expo);
}

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

/* ---- Section Blocks ---- */
.eb-section-block {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 32px;
    margin-bottom: 24px;
    transition: var(--transition-standard);
}

.eb-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.eb-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-dark);
    flex-shrink: 0;
}

.eb-icon-success {
    background-color: oklch(90% 0.08 140);
    color: oklch(40% 0.16 140);
}

.eb-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-navy);
    flex: 1;
}

.eb-section-subtitle {
    grid-column: 1 / -1;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-top: 16px;
    margin-bottom: 4px;
    border-bottom: 1.5px solid var(--color-border);
    padding-bottom: 6px;
}

/* ---- Validation Badges ---- */
.eb-validation-badge {
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: var(--transition-standard);
}

.eb-v-not_validated {
    background-color: var(--color-canvas);
    color: var(--color-ink-muted);
    border: 1px solid var(--color-border);
}

.eb-v-ready {
    background-color: oklch(92% 0.06 250);
    color: oklch(40% 0.12 250);
    border: 1px solid oklch(82% 0.08 250);
}

.eb-v-valid {
    background-color: oklch(92% 0.06 140);
    color: oklch(40% 0.16 140);
    border: 1px solid oklch(82% 0.08 140);
}

.eb-v-needs_review {
    background-color: oklch(92% 0.08 85);
    color: oklch(50% 0.14 85);
    border: 1px solid oklch(82% 0.08 85);
}

/* ---- Address Form Grid ---- */
.eb-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.eb-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eb-field-full {
    grid-column: 1 / -1;
}

.eb-field label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-navy);
}

.eb-field input,
.eb-field select,
.eb-field textarea {
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    background-color: var(--color-canvas);
    outline: none;
    transition: var(--transition-standard);
    width: 100%;
    box-sizing: border-box;
}

.eb-field input:focus,
.eb-field select:focus,
.eb-field textarea:focus {
    border-color: var(--color-gold);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-gold-light);
}

.eb-address-mode-row {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr);
    gap: 14px;
    align-items: end;
    margin: 16px 0 28px !important;
}

.eb-segmented-control {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 8px;
    align-items: center;
    width: fit-content;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
}

.eb-segmented-control button {
    min-height: 40px !important;
    padding: 0 16px !important;
    border: 1px solid color-mix(in srgb, var(--color-navy) 20%, var(--color-border)) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--color-white) !important;
    color: var(--color-navy) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    transition: background-color 0.2s var(--ease-expo), border-color 0.2s var(--ease-expo), color 0.2s var(--ease-expo), transform 0.2s var(--ease-expo) !important;
    white-space: nowrap !important;
}

.eb-segmented-control button:hover:not(:disabled) {
    border-color: var(--color-navy) !important;
    transform: translateY(-1px) !important;
}

.eb-segmented-control button.active {
    border-color: var(--color-navy) !important;
    background-color: var(--color-navy) !important;
    color: var(--color-white) !important;
    box-shadow: 0 2px 6px rgba(0, 62, 162, 0.18) !important;
}

.eb-segmented-control button:disabled {
    cursor: not-allowed !important;
    opacity: 0.55 !important;
    background-color: var(--color-canvas) !important;
}

.eb-address-picker {
    min-width: 0;
}

.eb-identity-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-canvas) 72%, var(--color-white));
}

.eb-identity-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.eb-identity-header label {
    display: block;
    margin-bottom: 4px;
}

.eb-identity-header p,
.eb-identity-body span {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.eb-identity-body {
    padding-top: 2px;
}

.eb-file-input {
    background-color: var(--color-white) !important;
}

.eb-saved-id-note {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--color-gold) 42%, var(--color-border));
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    color: var(--color-navy);
    font-size: 0.92rem;
    font-weight: 700;
}

/* ---- Info Notice ---- */
.eb-info-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background-color: oklch(95% 0.03 85);
    border: 1px solid oklch(88% 0.06 85);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: oklch(45% 0.1 85);
    margin-bottom: 24px;
    font-weight: 500;
}

/* ---- Navigation Buttons ---- */
.eb-nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
}

.eb-btn-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.eb-btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.eb-btn-back {
    background: transparent;
    color: var(--color-ink-muted);
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-standard);
}

.eb-btn-back:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
}

/* ---- Box Cards ---- */
.eb-box-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 16px;
    background-color: var(--color-canvas);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    animation: ebBoxSlideIn 0.35s var(--ease-expo);
}

@keyframes ebBoxSlideIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.eb-box-card:hover {
    border-color: var(--color-gold);
}

.eb-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.eb-box-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
}

.eb-box-num {
    color: var(--color-gold-dark);
}

.eb-box-actions {
    display: flex;
    gap: 8px;
}

.eb-btn-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-ink-muted);
    transition: var(--transition-standard);
}

.eb-btn-icon:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
}

.eb-btn-icon:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.eb-btn-duplicate:hover {
    border-color: var(--color-gold);
    color: var(--color-gold-dark);
    background-color: var(--color-gold-light);
}

.eb-btn-remove:hover:not(:disabled) {
    border-color: #d00000;
    color: #d00000;
    background-color: rgba(208, 0, 0, 0.04);
}

/* ---- Box Field Grids ---- */
.eb-dim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.eb-weight-qty-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.eb-box-fields .eb-field input {
    background-color: var(--color-white);
}

/* ---- Box Meta (per-box weights) ---- */
.eb-box-meta {
    display: flex;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
}

.eb-box-meta-item {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
    display: flex;
    gap: 6px;
    align-items: center;
}

.eb-box-meta-item strong {
    color: var(--color-navy);
    font-weight: 700;
}

/* ---- Add Box Button ---- */
.eb-add-box-btn {
    width: 100%;
    padding: 16px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: var(--transition-standard);
}

.eb-add-box-btn:hover {
    border-color: var(--color-gold);
    color: var(--color-gold-dark);
    background-color: var(--color-gold-light);
}

/* ---- Summary Bar ---- */
.eb-summary-bar {
    background-color: var(--color-navy);
    border-radius: var(--radius-md);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.eb-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    min-width: 100px;
}

.eb-summary-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.eb-summary-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
}

.eb-summary-highlight .eb-summary-value {
    color: var(--color-gold);
}

.eb-summary-divider {
    width: 1px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

/* ---- Carrier Selection Grid ---- */
.eb-carrier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.eb-carrier-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-standard);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background-color: var(--color-white);
}

.eb-carrier-card:hover {
    border-color: var(--color-navy);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 62, 162, 0.06);
}

.eb-carrier-selected {
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 0 3px var(--color-gold-light), 0 4px 16px rgba(190, 150, 45, 0.12) !important;
    background-color: oklch(98% 0.02 85);
}

.eb-carrier-logo-wrap {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.eb-carrier-logo-svg {
    height: 38px;
    width: auto;
}

.eb-carrier-logo-img {
    display: block;
    width: auto;
    max-width: 112px;
    height: 38px;
    object-fit: contain;
}

.eb-carrier-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-navy);
}

.eb-carrier-speed {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
    margin-bottom: 4px;
}

.eb-discount-badge {
    display: inline-flex;
    padding: 3px 10px;
    background-color: var(--color-gold-light);
    color: var(--color-gold-dark);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.eb-carrier-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy);
    animation: ebCheckPop 0.3s var(--ease-expo);
}

html[dir="rtl"] .eb-carrier-check {
    right: auto;
    left: 12px;
}

@keyframes ebCheckPop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.eb-carrier-select-btn {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: var(--transition-standard);
    margin-top: 4px;
}

.eb-carrier-select-btn:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
}

.eb-carrier-select-btn.selected {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

/* ---- Pickup Block ---- */
.eb-pickup-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.eb-pickup-block .eb-field label {
    margin-bottom: 0;
}

/* ---- Get Price Loading ---- */
.eb-btn-get-price {
    min-width: 200px;
}

.eb-loading-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.eb-loading-content .loader-spinner {
    border-color: var(--color-white);
    border-bottom-color: transparent;
    width: 18px;
    height: 18px;
    margin: 0;
}

/* ---- Price Result Card ---- */
.eb-price-result-block {
    animation: ebPriceReveal 0.6s var(--ease-expo);
    padding: 8px 0 0;
}

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

.eb-price-card {
    border: 1px solid rgba(0, 62, 162, 0.08);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    background-color: var(--color-white);
    width: 100%;
    box-shadow: 0 10px 30px -5px rgba(0, 43, 73, 0.06), 0 4px 12px -4px rgba(0, 43, 73, 0.02);
    transition: var(--transition-standard);
}

.eb-price-card:hover {
    box-shadow: 0 16px 36px -4px rgba(0, 43, 73, 0.08), 0 8px 20px -6px rgba(0, 43, 73, 0.04);
}

.eb-price-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-bottom: 1px solid rgba(0, 62, 162, 0.06);
}

.eb-price-carrier-info {
    min-width: 200px;
}

.eb-price-carrier-label,
.eb-price-final-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    display: block;
    margin-bottom: 8px;
}

.eb-price-carrier-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-navy);
    min-width: 0;
    overflow-wrap: anywhere;
}

.eb-price-carrier-logo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.eb-price-logo-wrap {
    width: 72px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    flex-shrink: 0;
}

.eb-price-route-wrap {
    text-align: right;
    min-width: 240px;
}

html[dir="rtl"] .eb-price-route-wrap {
    text-align: left;
}

.eb-route-summary-inline {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
}

html[dir="rtl"] .eb-route-summary-inline {
    justify-content: flex-start;
}

.eb-route-city {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
}

.eb-route-separator {
    color: var(--color-gold);
    display: flex;
    align-items: center;
}

/* ---- Body Layout ---- */
.eb-price-card-body {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    padding: 24px;
}

@media (max-width: 768px) {
    .eb-price-card-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ---- Specs Column ---- */
.eb-price-specs-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.eb-price-spec-item {
    padding: 14px 18px;
    background-color: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: var(--transition-standard);
}

.eb-price-spec-item:hover {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
    transform: translateY(-1px);
}

.eb-highlight-spec {
    background-color: oklch(98% 0.01 85);
    border-color: oklch(94% 0.02 85);
    grid-column: span 2;
}

.eb-highlight-spec:hover {
    background-color: oklch(96% 0.02 85);
    border-color: oklch(90% 0.03 85);
}

.eb-spec-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.eb-spec-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-navy);
}

/* ---- Invoice Breakdown ---- */
.eb-price-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    background-color: #fafbfc;
    border: 1px solid rgba(0, 62, 162, 0.04);
    border-radius: 12px;
    justify-content: center;
}

.eb-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    color: var(--color-ink-muted);
}

.eb-breakdown-row span:last-child {
    font-weight: 600;
    color: var(--color-navy);
}

.eb-breakdown-row.text-green-600 {
    color: oklch(55% 0.16 140);
}

.eb-breakdown-row.text-green-600 span:last-child {
    color: oklch(55% 0.16 140);
    font-weight: 700;
}

.eb-breakdown-divider {
    height: 1px;
    background-color: #e2e8f0;
    margin: 4px 0;
}

.eb-total-row {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
}

.eb-total-row span:first-child {
    color: var(--color-navy);
}

.eb-final-price-value {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--color-navy) !important;
    letter-spacing: -0.02em;
}

/* ---- Checkout Area ---- */
.eb-checkout-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 8px;
}

.eb-checkout-notice {
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 8px;
    background: oklch(98% 0.01 85);
    border: 1px solid oklch(93% 0.02 85);
    border-radius: 12px;
    text-align: start;
    color: var(--color-navy);
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 2px 6px rgba(0, 43, 73, 0.02);
}

.eb-checkout-notice-icon {
    background: var(--color-gold);
    color: var(--color-navy);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
    box-shadow: 0 2px 4px rgba(190, 150, 45, 0.2);
}

.eb-btn-checkout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 0.95rem;
    background-color: var(--color-gold);
    color: var(--color-navy);
    border: 1px solid var(--color-gold);
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-standard);
    box-shadow: 0 4px 12px rgba(190, 150, 45, 0.2);
}

.eb-btn-checkout:hover {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 43, 73, 0.18);
}

.eb-btn-checkout:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    background-color: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-ink-muted);
    transform: none;
    box-shadow: none;
}

.eb-btn-recalc {
    font-size: 0.85rem;
    padding: 14px 24px;
    border-radius: 8px;
}

/* ---- Checkout Dialog (Native <dialog> styled inline) ---- */
dialog.eb-checkout-dialog {
    display: none !important;
}

dialog.eb-checkout-dialog[open] {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid rgba(0, 62, 162, 0.08) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    margin-top: 24px !important;
    background-color: var(--color-white) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 43, 73, 0.06) !important;
    animation: ebPriceReveal 0.4s var(--ease-expo) !important;
    overflow: visible !important;
}

dialog.eb-checkout-dialog::backdrop {
    display: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

dialog.eb-checkout-dialog .eb-dialog-content {
    padding: 0 !important;
    text-align: start !important;
}

dialog.eb-checkout-dialog .eb-dialog-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: oklch(92% 0.06 140);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px 0;
    color: oklch(40% 0.16 140);
}

html[dir="rtl"] dialog.eb-checkout-dialog .eb-dialog-icon {
    margin: 0 0 16px 0;
}

dialog.eb-checkout-dialog .eb-dialog-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 8px;
}

dialog.eb-checkout-dialog .eb-dialog-desc {
    font-size: 0.9rem;
    color: var(--color-ink-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

dialog.eb-checkout-dialog .eb-dialog-details {
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9rem;
}

dialog.eb-checkout-dialog .eb-dialog-details strong {
    color: var(--color-navy);
}

.eb-dialog-close-btn {
    width: 100%;
}

/* ============================================================
   EXPRESS BOOKING — RTL OVERRIDES
   ============================================================ */
html[dir="rtl"] .eb-breadcrumb svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .eb-btn-next svg,
html[dir="rtl"] .eb-btn-back svg {
    transform: scaleX(-1);
}

/* ============================================================
   EXPRESS BOOKING — RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 768px) {
    .eb-main-grid {
        padding: 24px 16px 60px;
    }

    .eb-section-block {
        padding: 20px;
    }

    .eb-address-grid {
        grid-template-columns: 1fr;
    }

    .eb-dim-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    .eb-weight-qty-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .eb-carrier-grid {
        grid-template-columns: 1fr;
    }

    .eb-pickup-block {
        grid-template-columns: 1fr;
    }

    .eb-summary-bar {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 20px;
    }

    .eb-summary-divider {
        width: 60px;
        height: 1px;
    }

    .eb-price-details-grid {
        grid-template-columns: 1fr 1fr;
    }

    .eb-price-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .eb-price-amount {
        text-align: start;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
    }

    .eb-price-value-stack {
        align-items: flex-start;
    }

    .eb-steps-track {
        gap: 4px;
        flex-wrap: wrap;
    }

    .eb-step-indicator {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .eb-step-indicator:not(:last-child)::after {
        width: 16px;
        margin-inline-start: 4px;
    }

    .eb-step-dot {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }

    .eb-step-label {
        display: none;
    }

    .eb-route-summary {
        flex-direction: column;
        gap: 8px;
    }

    .eb-nav-buttons {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .eb-nav-buttons .eb-btn-next,
    .eb-nav-buttons .eb-btn-back {
        width: 100%;
        justify-content: center;
    }

    .eb-box-meta {
        flex-direction: column;
        gap: 8px;
    }

    .eb-checkout-area {
        flex-direction: column;
    }

    .eb-btn-checkout {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .eb-dim-grid {
        grid-template-columns: 1fr;
    }

    .eb-price-specs-list {
        grid-template-columns: 1fr;
    }
    .eb-highlight-spec {
        grid-column: span 1;
    }

    .eb-route-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .eb-route-line {
        transform: rotate(90deg);
        margin-inline-start: 6px;
    }
}

/* ============================================================
   EXPRESS BOOKING — FLAGSHIP POLISH ADDITIONS
   ============================================================ */

/* 1. Active Box Card Highlight */
.eb-box-card.eb-box-active {
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 0 1px var(--color-gold);
    background-color: var(--color-gold-light) !important;
}

/* 2. Validation Wrapper & Triggers */
.eb-validation-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.eb-validation-trigger {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-navy);
    border: 1px solid var(--color-navy);
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-standard);
}

.eb-validation-trigger:hover {
    background-color: var(--color-navy);
    color: var(--color-white);
    transform: translateY(-1px);
}

.eb-validation-trigger:active {
    transform: translateY(0);
}

.eb-validation-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-gold-light);
}

/* 3. Validation Loader State & Micro Spinner */
.eb-v-validating {
    background-color: oklch(93% 0.03 240);
    color: var(--color-navy);
    border: 1px solid oklch(80% 0.04 240);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.eb-validation-badge .loader-spinner.micro {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-width: 1.5px;
    border-color: var(--color-navy);
    border-bottom-color: transparent;
    margin: 0;
    animation: rotation 0.8s linear infinite;
}

/* 4. Accessibility and Keyboard focus outlines */
.eb-carrier-card:focus-visible {
    outline: none;
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 0 3px var(--color-gold-light), 0 4px 16px rgba(190, 150, 45, 0.12) !important;
}

.eb-btn-icon:focus-visible {
    outline: none;
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 0 2px var(--color-gold-light);
}

.eb-btn-checkout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-gold-light), 0 8px 24px rgba(190, 150, 45, 0.3) !important;
}

.eb-field input:focus-visible,
.eb-field select:focus-visible,
.eb-field textarea:focus-visible {
    outline: none;
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 0 2px var(--color-gold-light);
}

/* 5. Micro-interactions: hover lifts and scaling */
.eb-btn-icon:active {
    transform: scale(0.95);
}

.eb-btn-next:active:not(:disabled),
.eb-btn-back:active:not(:disabled),
.eb-btn-checkout:active {
    transform: translateY(0) scale(0.98);
}

/* NILESHIP Premium Logo Sizing & Layout */
.nav-logo-img {
    height: 52px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: var(--transition-standard);
}

@media (max-width: 768px) {
    .nav-logo-img {
        height: 38px;
    }
}

/* Unavailable Carrier Styling */
.eb-carrier-card.eb-carrier-unavailable {
    opacity: 0.65;
    cursor: not-allowed;
    background-color: var(--color-canvas);
    border-color: var(--color-border);
}

.eb-carrier-card.eb-carrier-unavailable:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-border);
}

.eb-carrier-error-msg {
    font-size: 0.75rem;
    color: #d00000;
    margin-top: 4px;
    font-weight: 500;
    line-height: 1.4;
    padding: 4px 8px;
    background-color: rgba(208, 0, 0, 0.05);
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(208, 0, 0, 0.2);
}

/* Responsive Contact Section Grid */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}



/* ---- Service Type Selector (ONP / OND) ---- */
.eb-service-type-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.eb-service-type-selector .eb-service-card {
    position: relative;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    min-height: 92px;
    padding: 16px 52px 16px 18px;
    cursor: pointer;
    background-color: var(--color-canvas);
    transition: border-color 0.25s var(--ease-expo), background-color 0.25s var(--ease-expo), box-shadow 0.25s var(--ease-expo), transform 0.25s var(--ease-expo);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

.eb-service-type-selector .eb-service-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(190, 150, 45, 0.08);
}

.eb-service-type-selector .eb-service-card:focus-visible {
    outline: 3px solid var(--color-gold-light);
    outline-offset: 2px;
}

.eb-service-type-selector .eb-service-card.selected {
    border-color: var(--color-gold);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px rgba(190, 150, 45, 0.14), 0 4px 10px rgba(0, 62, 162, 0.05);
}

.eb-service-type-selector .eb-hidden-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    display: none !important;
}

.eb-service-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eb-service-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-ink);
    line-height: 1.2;
}

.eb-service-desc {
    font-size: 0.85rem;
    color: var(--color-ink-muted);
    line-height: 1.35;
}

.eb-service-type-selector .eb-service-card.selected .eb-service-name {
    color: var(--color-navy);
}

.eb-service-type-selector .eb-service-card.selected .eb-service-desc {
    color: var(--color-ink-muted);
}

.eb-service-check {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--color-gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
    transition: opacity 0.25s var(--ease-expo), transform 0.25s var(--ease-expo);
}

[dir="rtl"] .eb-service-check {
    right: auto;
    left: 18px;
}

.eb-service-type-selector .eb-service-card.selected .eb-service-check {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

[dir="rtl"] .eb-service-type-selector .eb-service-card {
    padding: 16px 18px 16px 52px;
}

@media (max-width: 640px) {
    .eb-service-type-selector {
        grid-template-columns: 1fr;
    }

    .eb-address-mode-row,
    .eb-identity-header {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .eb-segmented-control {
        width: 100%;
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr;
    }

    .eb-segmented-control button {
        width: 100%;
    }
}

/* ---- Contact Section Styling ---- */
.contact-section {
    padding: 80px 0;
    background-color: #f9fafb;
    border-top: 1px solid var(--color-border);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    margin-top: 40px;
}

.contact-form-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.contact-info-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

.contact-info-title {
    font-size: 1.5rem;
    color: var(--color-navy);
    font-weight: 700;
    margin-bottom: 24px;
    border-bottom: 2px solid rgba(190, 150, 45, 0.2);
    padding-bottom: 12px;
}

.contact-form-el {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 640px) {
    .form-row-2 {
        grid-template-columns: 1fr;
    }
}

.contact-label {
    display: block;
    font-weight: 600;
    color: var(--color-navy);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.required-star {
    color: #ef4444;
}

.contact-input,
.contact-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: #fafbfc;
    color: var(--color-text);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s ease;
}

.contact-input:focus,
.contact-textarea:focus {
    border-color: var(--color-gold);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px rgba(190, 150, 45, 0.15);
}

.contact-submit-btn {
    align-self: flex-start;
    padding: 12px 28px;
    font-weight: 600;
    background-color: var(--color-navy);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.contact-submit-btn:hover {
    background-color: #002d75;
    transform: translateY(-1px);
}

.contact-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-info-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(190, 150, 45, 0.1);
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-text-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-info-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-ink-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.contact-info-value {
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: 500;
}

.contact-info-value a {
    color: var(--color-navy);
    text-decoration: none;
    transition: color 0.15s;
}

.contact-info-value a:hover {
    color: var(--color-gold);
    text-decoration: underline;
}

.contact-alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
}

.success-alert {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #065f46;
}

.error-alert {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #991b1b;
}

[dir="rtl"] .contact-submit-btn {
    align-self: flex-start;
}

/* ---- Floating Chatbot Widget Styles ---- */
.floating-chatbot-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 2000;
    font-family: var(--font-family, sans-serif);
}

[dir="rtl"] .floating-chatbot-container {
    right: auto;
    left: 30px;
}

.chatbot-trigger {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #25D366;
    color: var(--color-white);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.25s var(--ease-expo);
}

.chatbot-trigger:hover {
    transform: scale(1.08);
}

.chatbot-trigger.active {
    background-color: var(--color-navy);
    box-shadow: 0 4px 16px rgba(0, 62, 162, 0.2);
}

.chatbot-pulse-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: chatbot-pulse 2s infinite;
    pointer-events: none;
}

@keyframes chatbot-pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.chatbot-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 360px;
    height: 500px;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[dir="rtl"] .chatbot-window {
    right: auto;
    left: 0;
}

@media (max-width: 480px) {
    .chatbot-window {
        width: 320px;
        height: 440px;
        bottom: 75px;
    }
}

.chatbot-header {
    background-color: #128c7e;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-white);
}

.chatbot-avatar-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot-avatar-img {
    width: 28px;
    height: auto;
    object-fit: contain;
}

.chatbot-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #25D366;
    border: 2px solid #128c7e;
}

.chatbot-header-text {
    display: flex;
    flex-direction: column;
}

.chatbot-bot-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-white);
}

.chatbot-bot-status {
    font-size: 0.75rem;
    opacity: 0.85;
    color: rgba(255, 255, 255, 0.8);
}

.chatbot-messages {
    flex-grow: 1;
    padding: 16px;
    overflow-y: auto;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chatbot-message-row {
    display: flex;
    width: 100%;
}

.row-bot {
    justify-content: flex-start;
}

.row-user {
    justify-content: flex-end;
}

.chatbot-message-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.bubble-bot {
    background-color: var(--color-white);
    color: var(--color-text);
    border-top-left-radius: 2px;
    border-top-right-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.07);
}

[dir="rtl"] .bubble-bot {
    border-top-left-radius: 12px;
    border-top-right-radius: 2px;
}

.bubble-user {
    background-color: var(--color-navy);
    color: var(--color-white);
    border-top-right-radius: 2px;
    border-top-left-radius: 12px;
}

[dir="rtl"] .bubble-user {
    border-top-right-radius: 12px;
    border-top-left-radius: 2px;
}

.chatbot-message-time {
    display: block;
    font-size: 0.68rem;
    opacity: 0.5;
    text-align: right;
    margin-top: 4px;
}

.chatbot-suggestions {
    padding: 12px 16px 14px;
    background-color: var(--color-white);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.chatbot-suggestion-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f8fafc;
    color: var(--color-navy);
    border: 1px solid rgba(0, 62, 162, 0.16);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 36px;
}

.chatbot-suggestion-btn small {
    border-radius: 999px;
    background-color: rgba(190, 150, 45, 0.14);
    color: #7a5a0a;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-weight: 800;
}

.chatbot-suggestion-btn:hover {
    background-color: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
    transform: translateY(-1px);
}

.chatbot-suggestion-btn:hover small {
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--color-white);
}

.chatbot-reset-btn {
    color: #475569;
    border-color: rgba(71, 85, 105, 0.2);
}

.chatbot-language {
    padding: 14px 16px 16px;
    background-color: var(--color-white);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.chatbot-language button {
    min-height: 42px;
    border: 1px solid rgba(0, 62, 162, 0.18);
    border-radius: 8px;
    background-color: #f8fafc;
    color: var(--color-navy);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chatbot-language button:hover {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
    transform: translateY(-1px);
}

.chatbot-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: var(--color-gold);
    color: var(--color-navy);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.chatbot-action-link:hover {
    background-color: var(--color-navy);
    color: var(--color-white);
}

.chatbot-tracking-panel {
    padding: 12px 16px 16px;
    background-color: var(--color-white);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.chatbot-tracking-panel input {
    min-width: 0;
    min-height: 40px;
    border: 1px solid rgba(0, 62, 162, 0.18);
    border-radius: 8px;
    background-color: #f8fafc;
    color: var(--color-text);
    padding: 0 12px;
    font-size: 0.84rem;
    outline: none;
}

.chatbot-tracking-panel input:focus {
    border-color: var(--color-gold);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

.chatbot-tracking-panel button {
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    background-color: var(--color-navy);
    color: var(--color-white);
    padding: 0 14px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.chatbot-tracking-panel button:hover {
    background-color: var(--color-gold);
    color: var(--color-navy);
}

@media (max-width: 420px) {
    .chatbot-tracking-panel {
        grid-template-columns: 1fr;
    }
}

.chatbot-input-area {
    padding: 12px 16px;
    background-color: #f0f0f0;
    display: flex;
    gap: 10px;
    align-items: center;
    border-top: 1px solid var(--color-border);
}

.chatbot-input-el {
    flex-grow: 1;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9rem;
    outline: none;
    background-color: var(--color-white);
    color: var(--color-text);
}

.chatbot-send-btn {
    background: none;
    border: none;
    color: #128c7e;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Typing bubble dots animation */
.typing-bubble {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: #8b959a;
    border-radius: 50%;
    animation: typing-dot-bounce 1.4s infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-dot-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.recaptcha-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 16px;
}

.recaptcha-field .g-recaptcha {
    max-width: 100%;
}

.recaptcha-error {
    color: #dc2626;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0;
}

.freight-recaptcha {
    margin: 0 0 18px;
}