/* =========================================================
   NEXORA EXPRESS
   Global Styles
========================================================= */

/* =========================================================
   GLOBAL RESPONSIVE SAFETY
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

/* =========================
   CSS VARIABLES
========================= */


:root {
    --primary: #7357ff;
    --primary-light: #9c86ff;
    --primary-dark: #4f35d8;

    --cyan: #15d9ff;
    --cyan-soft: #7cecff;

    --orange: #ff6b2c;
    --orange-light: #ff9f43;

    --success: #17d898;
    --danger: #ff5370;

    --dark: #070b17;
    --dark-secondary: #0d1324;
    --dark-card: #11192d;
    --dark-card-light: #17213a;

    --white: #ffffff;
    --off-white: #f8faff;

    --text-dark: #101828;
    --text-body: #667085;
    --text-muted: #98a2b3;

    --border-light: rgba(255, 255, 255, 0.1);
    --light-border: #e7ebf3;

    --gradient-primary:
        linear-gradient(
            135deg,
            #7357ff 0%,
            #15d9ff 52%,
            #ff6b2c 100%
        );

    --gradient-button:
        linear-gradient(
            135deg,
            #7357ff 0%,
            #5977ff 45%,
            #15d9ff 100%
        );

    --gradient-orange:
        linear-gradient(
            135deg,
            #ff6b2c,
            #ff9f43
        );

    --shadow-soft:
        0 20px 50px rgba(6, 12, 30, 0.1);

    --shadow-dark:
        0 35px 90px rgba(0, 0, 0, 0.38);

    --container-width: 1240px;

    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 30px;

    --transition: 0.35s ease;
}


/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", sans-serif;
    color: var(--text-dark);
    background: var(--off-white);
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: none;
    cursor: pointer;
}

ul {
    list-style: none;
}

.container {
    width: min(calc(100% - 40px), var(--container-width));
    margin-inline: auto;
}


/* =========================
   PRELOADER
========================= */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(115, 87, 255, 0.2),
            transparent 34%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(21, 217, 255, 0.13),
            transparent 32%
        ),
        var(--dark);
    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(115, 87, 255, 0.2),
            transparent 34%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(21, 217, 255, 0.13),
            transparent 32%
        ),
        var(--dark);

    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}

.loader-content {
    width: min(320px, calc(100% - 50px));
    text-align: center;
}

.loader-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.loader-logo-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--white);
    background: var(--gradient-primary);
    box-shadow: 0 12px 35px rgba(115, 87, 255, 0.45);
    animation: loaderFloat 1.3s ease-in-out infinite alternate;
}

.loader-logo-text {
    color: var(--white);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -1px;
}

.loader-logo-text span {
    color: var(--cyan);
}

.loader-line {
    height: 4px;
    margin-top: 28px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
}

.loader-line span {
    display: block;
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-primary);
    animation: loaderProgress 1.2s ease-in-out infinite;
}

.loader-content p {
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    letter-spacing: 0.5px;
}

@keyframes loaderProgress {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(235%);
    }
}

@keyframes loaderFloat {
    to {
        transform: translateY(-6px) rotate(4deg);
    }
}


/* =========================
   HEADER
========================= */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition:
        padding var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.main-header.scrolled {
    padding: 11px 0;
    background: rgba(7, 11, 23, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-logo {
    position: relative;
    z-index: 1002;
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.brand-icon {
    position: relative;
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--white);
    background: var(--gradient-primary);
    box-shadow: 0 12px 35px rgba(115, 87, 255, 0.35);
    overflow: hidden;
}

.brand-icon::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 75px;
    top: -22px;
    left: -35px;
    background: rgba(255, 255, 255, 0.28);
    transform: rotate(35deg);
    animation: logoShine 4s ease-in-out infinite;
}

@keyframes logoShine {
    0%,
    65% {
        left: -35px;
    }

    85%,
    100% {
        left: 65px;
    }
}

.brand-name {
    color: var(--white);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.9px;
}

.brand-name span {
    margin-left: 3px;
    color: var(--cyan);
}

.nav-panel {
    display: flex;
    align-items: center;
    gap: 45px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 31px;
}

.nav-link {
    position: relative;
    display: inline-flex;
    padding: 10px 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 13px;
    font-weight: 600;
    transition: color var(--transition);
}

.nav-link::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 10px;
    background: var(--gradient-primary);
    transition: width var(--transition);
}

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

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 23px;
}

.nav-login {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 700;
    transition: color var(--transition);
}

.nav-login:hover {
    color: var(--cyan);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 13px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(12px);
    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition);
}

.nav-cta i {
    color: var(--cyan);
    transition: transform var(--transition);
}

.nav-cta:hover {
    transform: translateY(-2px);
    border-color: rgba(21, 217, 255, 0.4);
    background: rgba(21, 217, 255, 0.12);
}

.nav-cta:hover i {
    transform: translateX(4px);
}

.menu-toggle {
    position: relative;
    z-index: 1002;
    width: 45px;
    height: 45px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
}

.menu-toggle span {
    width: 20px;
    height: 2px;
    border-radius: 5px;
    background: var(--white);
    transition:
        transform var(--transition),
        opacity var(--transition);
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    visibility: hidden;
    opacity: 0;
    background: rgba(3, 6, 15, 0.65);
    backdrop-filter: blur(8px);
    transition:
        opacity var(--transition),
        visibility var(--transition);
}

.menu-overlay.active {
    visibility: visible;
    opacity: 1;
}


/* =========================
   HERO
========================= */

.hero-section {
    position: relative;
    min-height: 100vh;
    padding: 165px 0 0;
    overflow: hidden;
    color: var(--white);
    background:
        linear-gradient(
            145deg,
            #070b17 0%,
            #0c1328 47%,
            #090e1d 100%
        );
}

.hero-background,
.hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-grid {
    opacity: 0.26;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 60px 60px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.95),
            transparent 88%
        );
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
}

.hero-glow-one {
    width: 540px;
    height: 540px;
    top: -220px;
    right: 4%;
    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, 0.22),
            transparent 68%
        );
}

.hero-glow-two {
    width: 530px;
    height: 530px;
    bottom: 4%;
    left: -230px;
    background:
        radial-gradient(
            circle,
            rgba(21, 217, 255, 0.12),
            transparent 68%
        );
}

.hero-glow-three {
    width: 320px;
    height: 320px;
    top: 40%;
    left: 42%;
    background:
        radial-gradient(
            circle,
            rgba(255, 107, 44, 0.1),
            transparent 68%
        );
}

.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    animation: orbFloat 7s ease-in-out infinite alternate;
}

.orb-one {
    width: 9px;
    height: 9px;
    top: 24%;
    left: 10%;
    background: var(--cyan);
    box-shadow: 0 0 25px var(--cyan);
}

.orb-two {
    width: 7px;
    height: 7px;
    top: 65%;
    right: 8%;
    background: var(--orange);
    box-shadow: 0 0 22px var(--orange);
    animation-delay: -3s;
}

@keyframes orbFloat {
    to {
        transform: translateY(35px) translateX(15px);
    }
}

.hero-container {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 75px;
    align-items: center;
}

.hero-content {
    padding-bottom: 38px;
}

.hero-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    margin-bottom: 24px;
    border: 1px solid rgba(21, 217, 255, 0.18);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(21, 217, 255, 0.07);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    backdrop-filter: blur(12px);
}

.hero-badge i {
    color: var(--cyan);
}

.badge-pulse {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
}

.badge-pulse::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid var(--success);
    border-radius: inherit;
    animation: badgePulse 1.7s ease-out infinite;
}

@keyframes badgePulse {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.hero-content h1 {
    max-width: 680px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(45px, 5.1vw, 77px);
    line-height: 1.04;
    letter-spacing: -4.4px;
    font-weight: 800;
}

.gradient-text {
    display: inline-block;
    color: transparent;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
}

.hero-description {
    max-width: 610px;
    margin-top: 26px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 16px;
    line-height: 1.85;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 34px;
}

.primary-button,
.secondary-button {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 800;
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.primary-button {
    gap: 17px;
    padding: 8px 9px 8px 24px;
    color: var(--white);
    background: var(--gradient-button);
    box-shadow: 0 17px 40px rgba(88, 92, 255, 0.3);
}

.button-icon {
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
}

.primary-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 23px 48px rgba(88, 92, 255, 0.42);
}

.primary-button:hover .button-icon i {
    animation: buttonArrow 0.7s ease;
}

@keyframes buttonArrow {
    50% {
        transform: translateX(5px);
    }
}

.secondary-button {
    gap: 11px;
    padding: 8px 21px 8px 9px;
    color: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
}

.play-icon {
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--orange-light);
    background: rgba(255, 107, 44, 0.12);
}

.secondary-button:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 107, 44, 0.35);
    background: rgba(255, 107, 44, 0.09);
}

.hero-trust-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 36px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 11px;
}

.trust-icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(255, 255, 255, 0.05);
}

.trust-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.trust-item strong {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
}

.trust-item span:not(.trust-icon) {
    color: rgba(255, 255, 255, 0.43);
    font-size: 9px;
}

.trust-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
}


/* =========================
   HERO VISUAL
========================= */

.hero-visual {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.visual-orbit {
    position: absolute;
    border: 1px solid rgba(21, 217, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.orbit-one {
    width: 570px;
    height: 570px;
    animation: orbitSpin 28s linear infinite;
}

.orbit-two {
    width: 440px;
    height: 440px;
    border-color: rgba(115, 87, 255, 0.1);
    animation: orbitSpin 22s linear infinite reverse;
}

.visual-orbit::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: 12%;
    left: 18%;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 19px var(--cyan);
}

.orbit-two::after {
    top: auto;
    left: auto;
    right: 12%;
    bottom: 16%;
    background: var(--orange);
    box-shadow: 0 0 19px var(--orange);
}

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

.logistics-dashboard {
    position: relative;
    z-index: 3;
    width: min(100%, 560px);
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.105),
            rgba(255, 255, 255, 0.04)
        );
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow-dark);
    transform: rotateY(-5deg) rotateX(2deg);
    animation: dashboardFloat 5.5s ease-in-out infinite alternate;
}

.logistics-dashboard::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.42),
            transparent 30%,
            transparent 65%,
            rgba(21, 217, 255, 0.3)
        );
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
}

@keyframes dashboardFloat {
    to {
        transform:
            rotateY(-3deg)
            rotateX(1deg)
            translateY(-11px);
    }
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.dashboard-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-label {
    color: rgba(255, 255, 255, 0.43);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.dashboard-header h3 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
}

.dashboard-menu-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}

.delivery-map {
    position: relative;
    height: 245px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 21px;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(115, 87, 255, 0.16),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(8, 15, 31, 0.9),
            rgba(12, 22, 43, 0.86)
        );
}

.map-grid {
    position: absolute;
    inset: 0;
    opacity: 0.38;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 29px 29px;
}

.route-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.route-path {
    fill: none;
    stroke: url("#routeGradient");
    stroke-width: 2.3;
    stroke-dasharray: 8 9;
    filter: url("#routeGlow");
    animation: routeDash 10s linear infinite;
}

.route-path-two {
    animation-direction: reverse;
}

@keyframes routeDash {
    to {
        stroke-dashoffset: -170;
    }
}

.map-location {
    position: absolute;
    z-index: 5;
}

.location-one {
    left: 8%;
    bottom: 24%;
}

.location-two {
    left: 65%;
    top: 42%;
}

.location-three {
    right: 4%;
    top: 17%;
}

.location-pulse {
    position: relative;
    width: 10px;
    height: 10px;
    display: block;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 16px var(--cyan);
}

.location-pulse::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid var(--cyan);
    border-radius: inherit;
    animation: locationPulse 2s ease-out infinite;
}

.location-two .location-pulse {
    background: var(--primary-light);
    box-shadow: 0 0 16px var(--primary-light);
}

.location-two .location-pulse::after {
    border-color: var(--primary-light);
}

.location-three .location-pulse {
    background: var(--orange);
    box-shadow: 0 0 16px var(--orange);
}

.location-three .location-pulse::after {
    border-color: var(--orange);
}

@keyframes locationPulse {
    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

.location-label {
    position: absolute;
    left: 16px;
    top: -15px;
    min-width: 82px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.location-label strong {
    font-size: 9px;
}

.location-label span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 7px;
}

.location-three .location-label {
    left: auto;
    right: 16px;
    text-align: right;
}

.moving-package {
    position: absolute;
    z-index: 6;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    color: var(--white);
    font-size: 10px;
    background: var(--gradient-button);
    box-shadow: 0 9px 25px rgba(88, 92, 255, 0.42);
}

.package-one {
    left: 28%;
    top: 36%;
    animation: packageMoveOne 7s ease-in-out infinite alternate;
}

.package-two {
    right: 18%;
    top: 49%;
    color: var(--dark);
    background: var(--gradient-orange);
    animation: packageMoveTwo 6s ease-in-out infinite alternate;
}

@keyframes packageMoveOne {
    to {
        transform: translate(83px, -25px) rotate(7deg);
    }
}

@keyframes packageMoveTwo {
    to {
        transform: translate(25px, -48px) rotate(-8deg);
    }
}

.map-status {
    position: absolute;
    left: 14px;
    bottom: 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.53);
    background: rgba(6, 11, 24, 0.65);
    font-size: 7px;
    backdrop-filter: blur(8px);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 10px var(--success);
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
    margin-top: 13px;
}

.metric-card {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.045);
}

.metric-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metric-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 11px;
}

.metric-icon.blue {
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.11);
}

.metric-icon.orange {
    color: var(--orange-light);
    background: rgba(255, 107, 44, 0.11);
}

.metric-change {
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 7px;
    font-weight: 800;
}

.metric-change.positive {
    color: var(--success);
    background: rgba(23, 216, 152, 0.1);
}

.metric-card strong {
    display: block;
    margin-top: 11px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
}

.metric-card > span:last-child {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 8px;
}

.active-shipment {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    margin-top: 13px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.12),
            rgba(21, 217, 255, 0.05)
        );
}

.shipment-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shipment-package-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
}

.shipment-heading div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shipment-heading span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 7px;
}

.shipment-heading strong {
    font-size: 10px;
}

.shipment-status {
    align-self: center;
    padding: 6px 9px;
    border-radius: 7px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
    font-size: 7px;
    font-weight: 800;
}

.shipment-progress {
    grid-column: 1 / -1;
}

.shipment-progress-track {
    height: 4px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
}

.shipment-progress-track span {
    display: block;
    width: 67%;
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-primary);
    box-shadow: 0 0 12px rgba(21, 217, 255, 0.5);
}

.shipment-progress-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 7px;
}

.shipment-progress-labels span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.shipment-progress-labels i {
    color: var(--cyan);
}

.floating-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;
    background: rgba(17, 25, 45, 0.8);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.floating-card-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
}

.floating-card-icon.success {
    color: var(--success);
    background: rgba(23, 216, 152, 0.1);
}

.floating-card div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.floating-card span:not(.floating-card-icon) {
    color: rgba(255, 255, 255, 0.42);
    font-size: 7px;
}

.floating-card strong {
    font-size: 9px;
}

.delivery-card {
    top: 5%;
    left: -7%;
    animation: cardFloat 4.5s ease-in-out infinite alternate;
}

.success-card {
    right: -8%;
    bottom: 10%;
    animation: cardFloat 4.5s ease-in-out infinite alternate-reverse;
}

@keyframes cardFloat {
    to {
        transform: translateY(-12px);
    }
}


/* =========================
   HERO TRACKER
========================= */

.hero-tracker-container {
    position: relative;
    z-index: 8;
    margin-top: 33px;
}

.hero-tracker {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(360px, 1fr) auto;
    align-items: center;
    gap: 30px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.105),
            rgba(255, 255, 255, 0.06)
        );
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(24px);
}

.hero-tracker::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            rgba(115, 87, 255, 0.05),
            transparent 40%,
            rgba(21, 217, 255, 0.045)
        );
    pointer-events: none;
}

.tracker-introduction {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
}

.tracker-icon {
    width: 48px;
    height: 48px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 14px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
}

.tracker-introduction div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tracker-small-title {
    color: rgba(255, 255, 255, 0.43);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.tracker-introduction h2 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
}

.tracking-form {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.tracking-input-group {
    min-height: 57px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 15px;
    background: rgba(4, 9, 21, 0.5);
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.tracking-input-group:focus-within {
    border-color: rgba(21, 217, 255, 0.43);
    box-shadow: 0 0 0 4px rgba(21, 217, 255, 0.06);
}

.tracking-input-group i {
    color: var(--cyan);
}

.tracking-input-group input {
    width: 100%;
    border: none;
    outline: none;
    color: var(--white);
    background: transparent;
    font-size: 12px;
}

.tracking-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.34);
}

.tracking-submit {
    min-height: 57px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 0 23px;
    border-radius: 15px;
    color: var(--white);
    background: var(--gradient-button);
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 15px 32px rgba(88, 92, 255, 0.25);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.tracking-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 38px rgba(88, 92, 255, 0.35);
}

.tracking-submit i {
    transition: transform var(--transition);
}

.tracking-submit:hover i {
    transform: translateX(4px);
}

.tracker-help {
    position: relative;
    max-width: 130px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 8px;
    line-height: 1.5;
}

.tracker-help i {
    color: var(--orange-light);
}


/* =========================
   TRACKING RESULT
========================= */

.tracking-result {
    position: relative;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    margin-top: 0;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 24px;
    color: var(--white);
    background:
        linear-gradient(
            145deg,
            rgba(17, 25, 45, 0.98),
            rgba(10, 17, 33, 0.98)
        );
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
    transition:
        max-height 0.65s ease,
        opacity 0.5s ease,
        visibility 0.5s ease,
        margin 0.5s ease,
        padding 0.5s ease,
        border-color 0.5s ease;
}

.tracking-result.show {
    max-height: 900px;
    opacity: 1;
    visibility: visible;
    margin-top: 16px;
    padding: 27px 26px;
    border-color: rgba(255, 255, 255, 0.1);
}

.close-result {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
}

.tracking-result-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 45px;
}

.tracking-result-label {
    color: rgba(255, 255, 255, 0.43);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tracking-result-top h3 {
    margin-top: 5px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 22px;
}

.tracking-result-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
    font-size: 10px;
    font-weight: 800;
}

.tracking-route-summary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 26px;
    margin-top: 25px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
}

.tracking-route-summary > div:not(.route-arrow) {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tracking-route-summary > div:last-child {
    text-align: right;
}

.tracking-route-summary span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 8px;
    text-transform: uppercase;
}

.tracking-route-summary strong {
    font-size: 13px;
}

.tracking-route-summary small {
    color: rgba(255, 255, 255, 0.42);
    font-size: 8px;
}

.route-arrow {
    min-width: 170px;
    display: flex;
    align-items: center;
}

.route-arrow span {
    width: 50%;
    height: 1px;
    background:
        linear-gradient(
            to right,
            transparent,
            var(--cyan)
        );
}

.route-arrow span:last-child {
    background:
        linear-gradient(
            to right,
            var(--cyan),
            transparent
        );
}

.route-arrow i {
    width: 34px;
    height: 34px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    color: var(--dark);
    background: var(--cyan);
    box-shadow: 0 0 23px rgba(21, 217, 255, 0.4);
}

.tracking-timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 24px;
}

.timeline-item {
    position: relative;
    text-align: center;
}

.timeline-item::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.timeline-item:last-child::after {
    display: none;
}

.timeline-item.completed::after {
    background: var(--gradient-button);
}

.timeline-marker {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.35);
    background: var(--dark-card);
    font-size: 9px;
}

.timeline-item.completed .timeline-marker {
    color: var(--white);
    border-color: transparent;
    background: var(--gradient-button);
}

.timeline-item.current .timeline-marker {
    color: var(--dark);
    border-color: var(--cyan);
    background: var(--cyan);
    box-shadow: 0 0 20px rgba(21, 217, 255, 0.35);
}

.timeline-item > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 0 8px;
}

.timeline-item strong {
    font-size: 9px;
}

.timeline-item > div span {
    color: rgba(255, 255, 255, 0.38);
    font-size: 7px;
    line-height: 1.5;
}


/* =========================
   HERO PARTNERS
========================= */

.hero-partners {
    position: relative;
    z-index: 5;
    margin-top: 48px;
    padding: 23px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
}

.partners-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
}

.partners-title {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.34);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.partners-list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.partners-list span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 10px;
    font-weight: 700;
}

.partners-list i {
    color: rgba(21, 217, 255, 0.7);
}


/* =========================
   EXPERIENCE PREVIEW
========================= */

.experience-preview {
    position: relative;
    padding: 115px 0;
    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(115, 87, 255, 0.08),
            transparent 28%
        ),
        var(--off-white);
}

.preview-heading {
    display: grid;
    grid-template-columns: 1fr 0.56fr;
    gap: 75px;
    align-items: end;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-tag i {
    color: var(--orange);
}

.preview-heading h2 {
    max-width: 770px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(35px, 4vw, 56px);
    line-height: 1.13;
    letter-spacing: -2.5px;
}

.preview-heading h2 span {
    color: var(--primary);
}

.preview-heading > p {
    color: var(--text-body);
    font-size: 13px;
    line-height: 1.85;
}

.preview-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 55px;
}

.preview-card {
    position: relative;
    min-height: 355px;
    display: flex;
    flex-direction: column;
    padding: 31px;
    overflow: hidden;
    border: 1px solid var(--light-border);
    border-radius: 25px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.preview-card:hover {
    transform: translateY(-10px);
    border-color: rgba(115, 87, 255, 0.25);
    box-shadow: 0 30px 65px rgba(20, 31, 60, 0.13);
}

.preview-card.featured {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(
            145deg,
            #10192d,
            #0b1122
        );
}

.preview-card-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    top: -150px;
    right: -100px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(21, 217, 255, 0.22),
            transparent 70%
        );
}

.preview-card-number {
    position: absolute;
    top: 25px;
    right: 27px;
    color: #d7ddea;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 34px;
    font-weight: 800;
}

.preview-card.featured .preview-card-number {
    color: rgba(255, 255, 255, 0.1);
}

.preview-service-icon {
    width: 59px;
    height: 59px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--primary);
    background: rgba(115, 87, 255, 0.1);
    font-size: 20px;
}

.preview-card.featured .preview-service-icon {
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
}

.preview-card h3 {
    margin-top: 45px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 22px;
    letter-spacing: -0.7px;
}

.preview-card p {
    margin-top: 13px;
    color: var(--text-body);
    font-size: 12px;
    line-height: 1.8;
}

.preview-card.featured p {
    color: rgba(255, 255, 255, 0.5);
}

.preview-card a {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 23px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
}

.preview-card.featured a {
    color: var(--cyan);
}

.preview-card a i {
    transition: transform var(--transition);
}

.preview-card a:hover i {
    transform: translateX(5px);
}


/* =========================
   TOAST MESSAGE
========================= */

.toast-message {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 3000;
    width: min(390px, calc(100% - 48px));
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255, 83, 112, 0.22);
    border-radius: 16px;
    background: rgba(14, 21, 39, 0.96);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(18px);
    transform: translateY(140%);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.45s ease,
        opacity 0.45s ease,
        visibility 0.45s ease;
}

.toast-message.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.toast-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--danger);
    background: rgba(255, 83, 112, 0.11);
}

.toast-message > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.toast-message strong {
    color: var(--white);
    font-size: 11px;
}

.toast-message > div span {
    color: rgba(255, 255, 255, 0.48);
    font-size: 9px;
}

.toast-message button {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
}

/* =========================================================
   HOW IT WORKS
========================================================= */

.how-it-works {
    position: relative;
    padding: 125px 0;
    overflow: hidden;
    color: var(--white);
    background:
        linear-gradient(
            145deg,
            #070b17 0%,
            #0b1225 55%,
            #080d1b 100%
        );
}

.how-background,
.how-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.how-grid {
    opacity: 0.25;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 58px 58px;
}

.how-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
}

.how-glow-one {
    width: 500px;
    height: 500px;
    top: -220px;
    right: -150px;
    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, 0.18),
            transparent 68%
        );
}

.how-glow-two {
    width: 430px;
    height: 430px;
    bottom: -220px;
    left: -130px;
    background:
        radial-gradient(
            circle,
            rgba(21, 217, 255, 0.12),
            transparent 68%
        );
}

.how-it-works .container {
    position: relative;
    z-index: 3;
}


/* =========================
   SECTION HEADING
========================= */

.how-heading {
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    gap: 75px;
    align-items: end;
}

.light-tag {
    color: var(--cyan);
}

.light-tag i {
    color: var(--orange-light);
}

.how-heading h2 {
    max-width: 770px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(39px, 4vw, 58px);
    line-height: 1.12;
    letter-spacing: -2.7px;
}

.how-heading h2 span {
    color: transparent;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
}

.how-heading-content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}

.how-heading-content p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1.85;
}

.how-heading-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
}

.how-heading-link i {
    transition: transform var(--transition);
}

.how-heading-link:hover i {
    transform: translateX(5px);
}


/* =========================
   DELIVERY PROCESS
========================= */

.delivery-process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 70px;
}

.process-route {
    position: absolute;
    top: 67px;
    left: 10%;
    width: 80%;
    height: 4px;
    z-index: 1;
}

.route-base {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
}

.route-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 20px;
    background: var(--gradient-primary);
    box-shadow:
        0 0 18px rgba(21, 217, 255, 0.45);
    transition: width 1.8s ease;
}

.route-package {
    position: absolute;
    top: 50%;
    left: 0;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--white);
    background: var(--gradient-button);
    box-shadow:
        0 10px 28px rgba(88, 92, 255, 0.45);
    transform: translate(-50%, -50%);
    transition: left 1.8s ease;
}

.delivery-process.active .route-progress {
    width: 100%;
}

.delivery-process.active .route-package {
    left: 100%;
}

.process-step {
    position: relative;
    z-index: 2;
    min-height: 355px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 23px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        );
    backdrop-filter: blur(16px);
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.process-step:hover {
    transform: translateY(-10px);
    border-color: rgba(21, 217, 255, 0.25);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.045)
        );
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.25);
}

.process-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.process-number {
    color: rgba(255, 255, 255, 0.12);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 36px;
    font-weight: 800;
}

.process-icon {
    width: 57px;
    height: 57px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    font-size: 18px;
}

.process-icon.purple {
    color: var(--primary-light);
    background: rgba(115, 87, 255, 0.14);
}

.process-icon.cyan {
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.12);
}

.process-icon.orange {
    color: var(--orange-light);
    background: rgba(255, 107, 44, 0.12);
}

.process-icon.success {
    color: var(--success);
    background: rgba(23, 216, 152, 0.12);
}

.process-step-content {
    margin-top: 47px;
}

.process-label {
    color: var(--cyan);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.process-step-content h3 {
    margin-top: 9px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
    letter-spacing: -0.6px;
}

.process-step-content p {
    margin-top: 13px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 11px;
    line-height: 1.8;
}

.process-step-footer {
    margin-top: auto;
    padding-top: 25px;
}

.process-step-footer span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 8px;
}

.process-step-footer i {
    color: var(--cyan);
}


/* =========================
   DELIVERY EXPERIENCE PANEL
========================= */

.delivery-experience-panel {
    position: relative;
    display: grid;
    grid-template-columns: 0.95fr 1.1fr auto;
    gap: 35px;
    align-items: center;
    margin-top: 42px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.13),
            rgba(21, 217, 255, 0.06)
        );
}

.delivery-experience-panel::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    top: -160px;
    right: 12%;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(21, 217, 255, 0.19),
            transparent 70%
        );
}

.experience-panel-content {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.experience-panel-icon {
    width: 50px;
    height: 50px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 15px;
    color: var(--orange-light);
    background: rgba(255, 107, 44, 0.12);
}

.experience-panel-content > div:last-child {
    display: flex;
    flex-direction: column;
}

.experience-panel-label {
    color: var(--cyan);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.experience-panel-content h3 {
    margin-top: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 19px;
}

.experience-panel-content p {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.44);
    font-size: 10px;
    line-height: 1.65;
}

.delivery-estimate {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(4, 9, 21, 0.4);
}

.estimate-location {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.estimate-location.destination {
    text-align: right;
}

.estimate-location span,
.estimate-duration span {
    color: rgba(255, 255, 255, 0.38);
    font-size: 7px;
    text-transform: uppercase;
}

.estimate-location strong {
    font-size: 10px;
}

.estimate-route {
    display: flex;
    align-items: center;
}

.estimate-point {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow:
        0 0 12px var(--cyan);
}

.estimate-point.end {
    background: var(--orange);
    box-shadow:
        0 0 12px var(--orange);
}

.estimate-line {
    width: 100%;
    display: flex;
    align-items: center;
}

.estimate-line span {
    width: 100%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--primary-light),
            var(--orange)
        );
}

.estimate-line i {
    width: 29px;
    height: 29px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 9px;
    color: var(--dark);
    background: var(--cyan);
    box-shadow:
        0 0 18px rgba(21, 217, 255, 0.35);
}

.estimate-duration {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.estimate-duration strong {
    color: var(--success);
    font-size: 10px;
}

.experience-panel-actions {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 13px;
}

.experience-panel-actions .primary-button {
    min-height: 52px;
    white-space: nowrap;
}

.panel-text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 8px;
}

.panel-text-link i {
    color: var(--cyan);
}


/* =========================
   REVEAL ANIMATION
========================= */

.reveal-item {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.delivery-process .process-step:nth-child(3) {
    transition-delay: 0.1s;
}

.delivery-process .process-step:nth-child(4) {
    transition-delay: 0.2s;
}

.delivery-process .process-step:nth-child(5) {
    transition-delay: 0.3s;
}

.delivery-process .process-step:nth-child(6) {
    transition-delay: 0.4s;
}

/* =========================================================
   COVERAGE SECTION
========================================================= */

.coverage-section {
    position: relative;
    padding: 125px 0;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #f8faff,
            #eef3ff
        );
}

.coverage-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.coverage-glow {
    position: absolute;
    border-radius: 50%;
}

.coverage-glow-one {
    width: 450px;
    height: 450px;
    top: -180px;
    right: -130px;
    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, 0.12),
            transparent 70%
        );
}

.coverage-glow-two {
    width: 380px;
    height: 380px;
    bottom: -170px;
    left: -120px;
    background:
        radial-gradient(
            circle,
            rgba(21, 217, 255, 0.1),
            transparent 70%
        );
}

.coverage-section .container {
    position: relative;
    z-index: 2;
}


/* =========================
   COVERAGE HEADING
========================= */

.coverage-heading {
    display: grid;
    grid-template-columns: 1fr 0.52fr;
    align-items: end;
    gap: 70px;
}

.coverage-heading h2 {
    max-width: 780px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(39px, 4vw, 58px);
    line-height: 1.12;
    letter-spacing: -2.7px;
}

.coverage-heading h2 span {
    color: var(--primary);
}

.coverage-heading > p {
    color: var(--text-body);
    font-size: 13px;
    line-height: 1.85;
}


/* =========================
   COVERAGE LAYOUT
========================= */

.coverage-layout {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 28px;
    align-items: start;
    margin-top: 58px;
}


/* =========================
   MAP CARD
========================= */

.coverage-map-card {
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    color: var(--white);
    background:
        linear-gradient(
            145deg,
            #0c1429,
            #080e1d
        );
    box-shadow:
        0 35px 80px rgba(22, 33, 61, 0.22);
}

.coverage-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.coverage-map-header > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.coverage-map-header > div:first-child span {
    color: rgba(255, 255, 255, 0.42);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.coverage-map-header h3 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 22px;
}

.coverage-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(23, 216, 152, 0.16);
    border-radius: 10px;
    color: var(--success);
    background: rgba(23, 216, 152, 0.08);
    font-size: 8px;
    font-weight: 700;
}

.coverage-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 13px var(--success);
}


/* =========================
   COVERAGE MAP
========================= */

.coverage-map {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(115, 87, 255, 0.16),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #081126,
            #060b17
        );
}

.coverage-map-grid {
    position: absolute;
    inset: 0;
    opacity: 0.33;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );
    background-size: 38px 38px;
}

.world-map-svg,
.coverage-routes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.world-land {
    fill: rgba(255, 255, 255, 0.055);
    stroke: rgba(255, 255, 255, 0.07);
    stroke-width: 2;
}

.coverage-route-path {
    fill: none;
    stroke: url("#coverageRouteGradient");
    stroke-width: 2.3;
    stroke-dasharray: 8 10;
    opacity: 0.8;
    animation: coverageRouteMove 9s linear infinite;
}

.coverage-route-path:nth-child(2) {
    animation-delay: -2s;
}

.coverage-route-path:nth-child(3) {
    animation-delay: -4s;
}

.coverage-route-path:nth-child(4) {
    animation-delay: -6s;
}

@keyframes coverageRouteMove {
    to {
        stroke-dashoffset: -180;
    }
}


/* =========================
   MAP LOCATIONS
========================= */

.coverage-location {
    position: absolute;
    z-index: 4;
}

.amsterdam-location {
    left: 49%;
    top: 57%;
}

.london-location {
    left: 46%;
    top: 31%;
}

.dubai-location {
    left: 66%;
    top: 43%;
}

.new-york-location {
    left: 20%;
    top: 31%;
}

.johannesburg-location {
    left: 54%;
    top: 75%;
}

.coverage-pin {
    position: relative;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    font-size: 12px;
    background: rgba(8, 17, 38, 0.9);
}

.coverage-pin::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid currentColor;
    border-radius: inherit;
    animation: coveragePinPulse 2s ease-out infinite;
}

.primary-pin {
    color: var(--primary-light);
    box-shadow: 0 0 20px rgba(115, 87, 255, 0.45);
}

.cyan-pin {
    color: var(--cyan);
    box-shadow: 0 0 20px rgba(21, 217, 255, 0.4);
}

.orange-pin {
    color: var(--orange);
    box-shadow: 0 0 20px rgba(255, 107, 44, 0.4);
}

.purple-pin {
    color: #ad8cff;
    box-shadow: 0 0 20px rgba(173, 140, 255, 0.4);
}

.success-pin {
    color: var(--success);
    box-shadow: 0 0 20px rgba(23, 216, 152, 0.4);
}

@keyframes coveragePinPulse {
    0% {
        transform: scale(0.55);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.coverage-location-label {
    position: absolute;
    left: 42px;
    top: -4px;
    min-width: 115px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.coverage-location-label strong {
    font-size: 10px;
}

.coverage-location-label span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 7px;
}

.dubai-location .coverage-location-label,
.johannesburg-location .coverage-location-label {
    left: auto;
    right: 42px;
    text-align: right;
}

.coverage-map-legend {
    position: absolute;
    left: 18px;
    bottom: 17px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(5, 10, 21, 0.72);
    backdrop-filter: blur(10px);
}

.coverage-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.44);
    font-size: 7px;
}

.coverage-map-legend i {
    color: var(--cyan);
    font-size: 7px;
}


/* =========================
   COVERAGE STATISTICS
========================= */

.coverage-statistics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    margin-top: 15px;
}

.coverage-stat {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.coverage-stat-icon {
    width: 38px;
    height: 38px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
}

.coverage-stat > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.coverage-stat strong {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
}

.coverage-stat span:last-child {
    color: rgba(255, 255, 255, 0.4);
    font-size: 7px;
}


/* =========================
   COVERAGE INFORMATION
========================= */

.coverage-information {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.coverage-search-card {
    padding: 29px;
    border: 1px solid var(--light-border);
    border-radius: 26px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.coverage-card-label {
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.coverage-search-card h3 {
    margin-top: 9px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -1px;
}

.coverage-search-card > p {
    margin-top: 11px;
    color: var(--text-body);
    font-size: 11px;
    line-height: 1.75;
}


/* =========================
   COVERAGE FORM
========================= */

.coverage-search-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.coverage-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.coverage-form-group label {
    color: var(--text-dark);
    font-size: 9px;
    font-weight: 800;
}

.coverage-input {
    min-height: 55px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 16px;
    border: 1px solid var(--light-border);
    border-radius: 14px;
    background: #f9fbff;
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.coverage-input:focus-within {
    border-color: rgba(115, 87, 255, 0.5);
    box-shadow:
        0 0 0 4px rgba(115, 87, 255, 0.07);
}

.coverage-input i {
    color: var(--primary);
}

.coverage-input input {
    width: 100%;
    border: none;
    outline: none;
    color: var(--text-dark);
    background: transparent;
    font-size: 11px;
}

.coverage-input input::placeholder {
    color: #a4adbd;
}

.coverage-form-switch {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin: -4px auto;
    border: 1px solid var(--light-border);
    border-radius: 10px;
    color: var(--primary);
    background: var(--white);
    box-shadow: 0 8px 20px rgba(28, 42, 73, 0.08);
    transform: rotate(90deg);
}

.coverage-search-button {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 2px;
    border-radius: 15px;
    color: var(--white);
    background: var(--gradient-button);
    font-size: 11px;
    font-weight: 800;
    box-shadow:
        0 16px 34px rgba(88, 92, 255, 0.25);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.coverage-search-button:hover {
    transform: translateY(-3px);
    box-shadow:
        0 22px 42px rgba(88, 92, 255, 0.35);
}

.coverage-result {
    display: none;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: center;
    margin-top: 17px;
    padding: 13px;
    border: 1px solid rgba(23, 216, 152, 0.2);
    border-radius: 13px;
    background: rgba(23, 216, 152, 0.07);
}

.coverage-result.show {
    display: grid;
    animation: coverageResultIn 0.4s ease;
}

@keyframes coverageResultIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.coverage-result-icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--success);
    background: rgba(23, 216, 152, 0.11);
}

.coverage-result > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.coverage-result strong {
    color: #137b58;
    font-size: 10px;
}

.coverage-result span:last-child {
    color: var(--text-body);
    font-size: 8px;
    line-height: 1.5;
}


/* =========================
   DELIVERY ZONES
========================= */

.delivery-zones {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.delivery-zone {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    align-items: flex-start;
    padding: 19px;
    border: 1px solid var(--light-border);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 15px 35px rgba(30, 42, 70, 0.06);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.delivery-zone:hover {
    transform: translateX(7px);
    border-color: rgba(115, 87, 255, 0.25);
    box-shadow:
        0 20px 40px rgba(30, 42, 70, 0.1);
}

.delivery-zone-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 16px;
}

.local-zone {
    color: var(--primary);
    background: rgba(115, 87, 255, 0.1);
}

.national-zone {
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.11);
}

.global-zone {
    color: var(--orange);
    background: rgba(255, 107, 44, 0.1);
}

.delivery-zone > div {
    display: flex;
    flex-direction: column;
}

.delivery-zone-label {
    color: var(--primary);
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.delivery-zone h4 {
    margin-top: 4px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
}

.delivery-zone p {
    margin-top: 6px;
    color: var(--text-body);
    font-size: 9px;
    line-height: 1.65;
}

/* =========================================================
   SHIPPING CALCULATOR
========================================================= */

.shipping-calculator-section {
    position: relative;
    padding: 125px 0;
    overflow: hidden;
    color: var(--white);
    background:
        linear-gradient(
            145deg,
            #070b17,
            #0c1429 58%,
            #080d1b
        );
}

.calculator-background,
.calculator-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.calculator-grid {
    opacity: 0.22;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 60px 60px;
}

.calculator-glow {
    position: absolute;
    border-radius: 50%;
}

.calculator-glow-one {
    width: 500px;
    height: 500px;
    top: -210px;
    right: -150px;
    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, 0.2),
            transparent 70%
        );
}

.calculator-glow-two {
    width: 430px;
    height: 430px;
    bottom: -200px;
    left: -130px;
    background:
        radial-gradient(
            circle,
            rgba(21, 217, 255, 0.13),
            transparent 70%
        );
}

.shipping-calculator-section .container {
    position: relative;
    z-index: 2;
}


/* =========================
   CALCULATOR HEADING
========================= */

.calculator-heading {
    display: grid;
    grid-template-columns: 1fr 0.52fr;
    gap: 70px;
    align-items: end;
}

.calculator-heading h2 {
    max-width: 780px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(39px, 4vw, 58px);
    line-height: 1.12;
    letter-spacing: -2.7px;
}

.calculator-heading h2 span {
    color: transparent;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
}

.calculator-heading > p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    line-height: 1.85;
}


/* =========================
   CALCULATOR LAYOUT
========================= */

.calculator-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 28px;
    align-items: start;
    margin-top: 58px;
}


/* =========================
   CALCULATOR FORM CARD
========================= */

.shipping-calculator-card,
.shipping-estimate-card {
    position: relative;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow: 0 30px 75px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(20px);
}

.calculator-card-header,
.estimate-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calculator-card-header > div,
.estimate-card-header > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.calculator-card-header span,
.estimate-card-header > div span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.calculator-card-header h3,
.estimate-card-header h3 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 23px;
}

.calculator-header-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
}

.shipping-calculator-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 28px;
}


/* =========================
   ROUTE FIELDS
========================= */

.calculator-route-fields {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: end;
}

.calculator-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calculator-form-group label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 9px;
    font-weight: 700;
}

.calculator-input,
.calculator-select {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(4, 9, 21, 0.45);
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.calculator-input:focus-within,
.calculator-select:focus-within {
    border-color: rgba(21, 217, 255, 0.45);
    box-shadow: 0 0 0 4px rgba(21, 217, 255, 0.06);
}

.calculator-input > i,
.calculator-select > i:first-child {
    color: var(--cyan);
}

.calculator-input input,
.calculator-select select {
    width: 100%;
    border: none;
    outline: none;
    color: var(--white);
    background: transparent;
    font-size: 11px;
}

.calculator-input input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.calculator-select {
    position: relative;
}

.calculator-select select {
    appearance: none;
    cursor: pointer;
}

.calculator-select select option {
    color: var(--text-dark);
    background: var(--white);
}

.calculator-select > i:last-child {
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    pointer-events: none;
}

.calculator-route-switch {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 7px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.08);
    transition:
        transform var(--transition),
        background var(--transition);
}

.calculator-route-switch:hover {
    transform: rotate(180deg);
    background: rgba(21, 217, 255, 0.14);
}


/* =========================
   PACKAGE FIELDS
========================= */

.calculator-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.weight-input span {
    color: rgba(255, 255, 255, 0.42);
    font-size: 10px;
}


/* =========================
   DELIVERY SPEED
========================= */

.delivery-speed-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
}

.delivery-speed-card {
    position: relative;
    cursor: pointer;
}

.delivery-speed-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.speed-card-content {
    min-height: 145px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.035);
    transition:
        border-color var(--transition),
        transform var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.delivery-speed-card:hover .speed-card-content {
    transform: translateY(-4px);
    border-color: rgba(21, 217, 255, 0.25);
}

.delivery-speed-card input:checked + .speed-card-content {
    border-color: rgba(21, 217, 255, 0.48);
    background:
        linear-gradient(
            145deg,
            rgba(21, 217, 255, 0.12),
            rgba(115, 87, 255, 0.08)
        );
    box-shadow: 0 0 0 3px rgba(21, 217, 255, 0.05);
}

.speed-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--primary-light);
    background: rgba(115, 87, 255, 0.13);
}

.speed-icon.express {
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.11);
}

.speed-icon.priority {
    color: var(--orange-light);
    background: rgba(255, 107, 44, 0.11);
}

.speed-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
}

.speed-details strong {
    font-size: 11px;
}

.speed-details small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 7px;
}

.speed-price {
    width: fit-content;
    margin-top: auto;
    padding: 5px 7px;
    border-radius: 7px;
    color: var(--success);
    background: rgba(23, 216, 152, 0.09);
    font-size: 7px;
    font-weight: 800;
}


/* =========================
   INSURANCE
========================= */

.insurance-option {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
}

.insurance-option > input {
    position: absolute;
    opacity: 0;
}

.insurance-checkbox {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: transparent;
    background: rgba(255, 255, 255, 0.05);
    font-size: 9px;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.insurance-option input:checked + .insurance-checkbox {
    color: var(--white);
    border-color: transparent;
    background: var(--gradient-button);
}

.insurance-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--success);
    background: rgba(23, 216, 152, 0.1);
}

.insurance-information {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.insurance-information strong {
    font-size: 10px;
}

.insurance-information small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 7px;
    line-height: 1.5;
}

.insurance-price {
    color: var(--success);
    font-size: 9px;
    font-weight: 800;
}

.calculate-shipping-button {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border-radius: 15px;
    color: var(--white);
    background: var(--gradient-button);
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 18px 38px rgba(88, 92, 255, 0.28);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.calculate-shipping-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px rgba(88, 92, 255, 0.38);
}


/* =========================
   ESTIMATE RESULT
========================= */

.shipping-estimate-card {
    overflow: hidden;
}

.estimate-card-glow {
    position: absolute;
    width: 330px;
    height: 330px;
    top: -190px;
    right: -130px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(21, 217, 255, 0.2),
            transparent 70%
        );
}

.estimate-card-header {
    position: relative;
}

.estimate-live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 9px;
    color: var(--success);
    background: rgba(23, 216, 152, 0.08);
    font-size: 7px;
    font-weight: 800;
}

.estimate-live-status span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 11px var(--success);
}

.estimate-price-area {
    position: relative;
    margin-top: 27px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.12),
            rgba(21, 217, 255, 0.06)
        );
}

.estimate-price-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.estimate-price {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 9px;
}

.estimate-price span {
    margin-top: 7px;
    color: var(--cyan);
    font-size: 20px;
    font-weight: 800;
}

.estimate-price strong {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 49px;
    line-height: 1;
    letter-spacing: -2px;
}

.estimate-price-note {
    display: block;
    margin-top: 9px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 7px;
}

.estimate-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
    margin-top: 16px;
}

.estimate-summary-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.summary-icon {
    width: 35px;
    height: 35px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.09);
}

.estimate-summary-item > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.estimate-summary-item span:not(.summary-icon) {
    color: rgba(255, 255, 255, 0.36);
    font-size: 7px;
}

.estimate-summary-item strong {
    font-size: 9px;
}

.estimate-breakdown {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;
    background: rgba(4, 9, 21, 0.38);
}

.breakdown-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.breakdown-heading span {
    font-size: 10px;
    font-weight: 800;
}

.breakdown-heading i {
    color: var(--cyan);
}

.breakdown-row,
.breakdown-total {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.breakdown-row {
    margin-top: 11px;
}

.breakdown-row span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 8px;
}

.breakdown-row strong {
    font-size: 8px;
}

.breakdown-total {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.breakdown-total span {
    font-size: 10px;
    font-weight: 800;
}

.breakdown-total strong {
    color: var(--cyan);
    font-size: 12px;
}

.estimate-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.estimate-actions .primary-button {
    flex: 1;
    min-height: 53px;
}

.save-estimate-button {
    min-height: 53px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.66);
    background: rgba(255, 255, 255, 0.04);
    font-size: 9px;
    font-weight: 700;
}

.save-estimate-button i {
    color: var(--cyan);
}

.estimate-security {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.32);
    font-size: 7px;
}

.estimate-security i {
    color: var(--success);
}

/* =========================================================
   NEXORA EXPRESS — TYPOGRAPHY & READABILITY SYSTEM V2
   Applies consistent, production-ready sizing site-wide.
========================================================= */

body {
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Navigation and global controls */
.nav-link,
.nav-login,
.nav-cta,
.primary-button,
.secondary-button,
.tracking-submit,
.coverage-search-button,
.calculate-shipping-button {
    font-size: 14px;
}

/* Eyebrows, labels and microcopy */
.hero-badge,
.section-tag,
.dashboard-label,
.tracker-small-title,
.tracking-result-label,
.partners-title,
.process-label,
.experience-panel-label,
.coverage-card-label,
.delivery-zone-label,
.calculator-card-header > div > span,
.estimate-card-header > div > span,
.estimate-price-label,
.coverage-map-header > div:first-child span {
    font-size: 11px;
    line-height: 1.45;
}

/* Supporting body copy */
.preview-heading > p,
.how-heading-content p,
.coverage-heading > p,
.calculator-heading > p,
.preview-card p,
.process-step-content p,
.experience-panel-content p,
.coverage-search-card > p,
.delivery-zone p,
.insurance-information small,
.estimate-price-note {
    font-size: 14px;
    line-height: 1.75;
}

/* Hero dashboard and tracker */
.trust-item strong { font-size: 13px; }
.trust-item span:not(.trust-icon) { font-size: 11px; }
.location-label strong { font-size: 11px; }
.location-label span { font-size: 9px; }
.map-status { font-size: 10px; }
.metric-change { font-size: 10px; }
.metric-card > span:last-child { font-size: 11px; }
.shipment-heading span { font-size: 10px; }
.shipment-heading strong { font-size: 12px; }
.shipment-status { font-size: 10px; }
.shipment-progress-labels { font-size: 10px; }
.floating-card span:not(.floating-card-icon) { font-size: 10px; }
.floating-card strong { font-size: 12px; }
.tracker-introduction h2 { font-size: 17px; }
.tracking-input-group input { font-size: 14px; }
.tracker-help { font-size: 11px; max-width: 165px; }
.tracking-route-summary span,
.tracking-route-summary small { font-size: 10px; }
.tracking-route-summary strong { font-size: 14px; }
.timeline-item strong { font-size: 11px; }
.timeline-item > div span { font-size: 10px; }
.partners-list span { font-size: 12px; }

/* Services */
.preview-card h3 { font-size: 24px; }
.preview-card a { font-size: 13px; }

/* How it works */
.how-heading-link { font-size: 13px; }
.process-step-content h3 { font-size: 22px; }
.process-step-footer span { font-size: 11px; }
.experience-panel-content h3 { font-size: 21px; }
.estimate-location span,
.estimate-duration span { font-size: 10px; }
.estimate-location strong,
.estimate-duration strong { font-size: 12px; }
.panel-text-link { font-size: 11px; }

/* Coverage */
.coverage-status { font-size: 10px; }
.coverage-location-label strong { font-size: 11px; }
.coverage-location-label span { font-size: 9px; }
.coverage-map-legend span { font-size: 9px; }
.coverage-stat span:last-child { font-size: 10px; }
.coverage-search-card h3 { font-size: 30px; }
.coverage-form-group label { font-size: 12px; }
.coverage-input input { font-size: 14px; }
.coverage-result strong { font-size: 12px; }
.coverage-result span:last-child { font-size: 10px; }
.delivery-zone h4 { font-size: 18px; }

/* Calculator */
.calculator-form-group label { font-size: 12px; }
.calculator-input input,
.calculator-select select { font-size: 14px; }
.weight-input span { font-size: 12px; }
.speed-details strong { font-size: 15px; }
.speed-details small { font-size: 11px; }
.speed-price { font-size: 10px; }
.insurance-information strong { font-size: 13px; }
.insurance-information small { font-size: 10px; }
.insurance-price { font-size: 12px; }
.estimate-live-status { font-size: 10px; }
.estimate-summary-item span:not(.summary-icon) { font-size: 10px; }
.estimate-summary-item strong { font-size: 12px; }
.breakdown-heading span { font-size: 13px; }
.breakdown-row span,
.breakdown-row strong { font-size: 11px; }
.breakdown-total span { font-size: 13px; }
.breakdown-total strong { font-size: 15px; }
.save-estimate-button { font-size: 11px; }
.estimate-security { font-size: 10px; }

/* Give enlarged text enough breathing room */
.speed-card-content { min-height: 165px; padding: 18px; }
.estimate-summary-item { min-height: 78px; padding: 16px; }
.estimate-breakdown { padding: 21px; }
.breakdown-row { margin-top: 14px; }

/* Accessibility: visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(21, 217, 255, 0.5);
    outline-offset: 3px;
}


/* =========================================================
   TESTIMONIALS & TRUST
========================================================= */

.testimonials-section {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(
            circle at 90% 12%,
            rgba(115, 87, 255, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 88%,
            rgba(21, 217, 255, 0.08),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #07101f 0%,
            #091427 100%
        );
}

.testimonials-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 58px 58px;
}

.testimonials-section .container {
    position: relative;
    z-index: 2;
}


/* =========================
   SECTION HEADING
========================= */

.testimonials-heading {
    max-width: 820px;
    margin: 0 auto 68px;
    text-align: center;
}

.testimonials-heading .section-tag {
    color: var(--cyan);
}

.testimonials-heading .section-tag i {
    color: #ffd54a;
}

.testimonials-heading h2 {
    margin-top: 18px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(42px, 4.5vw, 62px);
    line-height: 1.08;
    letter-spacing: -2.8px;
}

.testimonials-heading h2 span {
    display: block;
    color: transparent;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
}

.testimonials-heading p {
    max-width: 700px;
    margin: 22px auto 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 16px;
    line-height: 1.85;
}


/* =========================
   MAIN LAYOUT
========================= */

.testimonials-layout {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 30px;
    align-items: stretch;
}


/* =========================
   FEATURED TESTIMONIAL
========================= */

.featured-testimonial {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(21, 217, 255, 0.12),
            transparent 34%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(115, 87, 255, 0.14),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.085),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.featured-testimonial::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.42),
            transparent 30%,
            transparent 68%,
            rgba(21, 217, 255, 0.34)
        );
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
}

.featured-testimonial:hover {
    transform: translateY(-8px);
    border-color: rgba(21, 217, 255, 0.22);
    box-shadow:
        0 42px 95px rgba(0, 0, 0, 0.36);
}

.featured-quote {
    position: absolute;
    top: 22px;
    right: 30px;
    color: rgba(255, 255, 255, 0.045);
    font-size: 96px;
    pointer-events: none;
}

.testimonial-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #ffd54a;
    font-size: 17px;
}

.featured-label {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    margin-top: 24px;
    padding: 8px 11px;
    border: 1px solid rgba(21, 217, 255, 0.15);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.07);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.featured-review {
    max-width: 720px;
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    line-height: 1.95;
}

.featured-profile {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: auto;
    padding-top: 36px;
}

.featured-avatar {
    position: relative;
    flex-shrink: 0;
}

.featured-avatar img {
    width: 76px;
    height: 76px;
    display: block;
    object-fit: cover;
    border: 3px solid rgba(115, 87, 255, 0.9);
    border-radius: 50%;
    background: var(--dark-card);
    box-shadow:
        0 0 0 5px rgba(115, 87, 255, 0.08),
        0 14px 35px rgba(0, 0, 0, 0.28);
    transition: transform var(--transition);
}

.featured-testimonial:hover .featured-avatar img {
    transform: scale(1.05);
}

.featured-avatar > span {
    position: absolute;
    right: -2px;
    bottom: 1px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 3px solid #0a1326;
    border-radius: 50%;
    color: var(--white);
    background: var(--success);
    font-size: 9px;
    box-shadow: 0 6px 18px rgba(23, 216, 152, 0.32);
}

.featured-details {
    min-width: 0;
}

.featured-details h3 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 21px;
    line-height: 1.25;
}

.featured-details > p {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}

.company-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 13px;
}

.company-info span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 12px;
}

.company-info i {
    color: var(--cyan);
}


/* =========================
   REVIEW FEED
========================= */

.review-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.review-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 4px 4px;
}

.review-feed-header > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    font-weight: 700;
}

.live-dot {
    position: relative;
    width: 9px;
    height: 9px;
    display: inline-block;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 14px var(--success);
}

.live-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid var(--success);
    border-radius: inherit;
    animation: testimonialLivePulse 1.8s ease-out infinite;
}

@keyframes testimonialLivePulse {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.review-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025)
        );
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.12);
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.review-item:hover {
    transform: translateX(7px);
    border-color: rgba(115, 87, 255, 0.34);
    background:
        linear-gradient(
            145deg,
            rgba(115, 87, 255, 0.11),
            rgba(21, 217, 255, 0.045)
        );
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.18);
}

.review-item > img {
    width: 58px;
    height: 58px;
    display: block;
    object-fit: cover;
    border: 2px solid rgba(21, 217, 255, 0.32);
    border-radius: 50%;
    background: var(--dark-card);
    box-shadow:
        0 0 0 4px rgba(21, 217, 255, 0.05);
    transition: transform var(--transition);
}

.review-item:hover > img {
    transform: scale(1.06);
}

.review-content {
    min-width: 0;
}

.review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.review-top h4 {
    overflow: hidden;
    color: var(--white);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-top small {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.38);
    font-size: 11px;
}

.review-stars {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    color: #ffd54a;
    font-size: 11px;
}

.review-content > p {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1.55;
}


/* =========================
   TRUST METRICS
========================= */

.trust-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 56px;
}

.metric-box {
    position: relative;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    padding: 28px 22px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(115, 87, 255, 0.14),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.025)
        );
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.metric-box::before {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 0;
    height: 2px;
    border-radius: 10px 10px 0 0;
    background: var(--gradient-primary);
    box-shadow: 0 0 18px rgba(21, 217, 255, 0.4);
    transition:
        left var(--transition),
        right var(--transition);
}

.metric-box:hover {
    transform: translateY(-8px);
    border-color: rgba(21, 217, 255, 0.22);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.2);
}

.metric-box:hover::before {
    left: 10%;
    right: 10%;
}

.metric-box h3 {
    display: inline;
    color: var(--white);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -2px;
}

.metric-box > span {
    display: inline;
    margin-top: 9px;
    color: var(--cyan);
    font-size: 15px;
    font-weight: 800;
}

.metric-box > p {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
   TESTIMONIAL REVIEW ANIMATION
========================================================= */

.review-item {
    opacity: 0;
    transform: translateY(18px);
}

.review-item.review-visible {
    opacity: 1;
    transform: translateY(0);
}

.review-item {
    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.review-item.review-visible:hover {
    transform: translateX(7px);
}

/* =========================================================
   FAQ SECTION
========================================================= */

.faq-section {
    position: relative;
    padding: 125px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(115, 87, 255, 0.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 88%,
            rgba(21, 217, 255, 0.08),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #f8faff,
            #eef3ff
        );
}

.faq-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.faq-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
}

.faq-glow-one {
    width: 430px;
    height: 430px;
    top: -180px;
    right: -150px;
    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, 0.12),
            transparent 70%
        );
}

.faq-glow-two {
    width: 380px;
    height: 380px;
    left: -140px;
    bottom: -170px;
    background:
        radial-gradient(
            circle,
            rgba(21, 217, 255, 0.1),
            transparent 70%
        );
}

.faq-section .container {
    position: relative;
    z-index: 2;
}


/* =========================
   FAQ HEADING
========================= */

.faq-heading {
    display: grid;
    grid-template-columns: 1fr 0.56fr;
    gap: 72px;
    align-items: end;
}

.faq-heading h2 {
    max-width: 780px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(42px, 4.4vw, 60px);
    line-height: 1.1;
    letter-spacing: -2.7px;
}

.faq-heading h2 span {
    color: transparent;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
}

.faq-heading-content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
}

.faq-heading-content > p {
    color: var(--text-body);
    font-size: 15px;
    line-height: 1.85;
}

.faq-support-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    align-items: center;
    width: 100%;
    max-width: 390px;
    padding: 15px;
    border: 1px solid rgba(115, 87, 255, 0.14);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(115, 87, 255, 0.07),
            rgba(21, 217, 255, 0.04)
        );
    box-shadow:
        0 16px 36px rgba(26, 38, 70, 0.08);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.faq-support-link:hover {
    transform: translateY(-4px);
    border-color: rgba(115, 87, 255, 0.28);
    box-shadow:
        0 23px 46px rgba(26, 38, 70, 0.13);
}

.faq-support-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--primary);
    background: rgba(115, 87, 255, 0.1);
}

.faq-support-link > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--text-dark);
    font-size: 12px;
    font-weight: 800;
}

.faq-support-link small {
    color: var(--text-body);
    font-size: 10px;
    font-weight: 600;
}

.faq-support-link > i {
    color: var(--primary);
    transition: transform var(--transition);
}

.faq-support-link:hover > i {
    transform: translateX(5px);
}


/* =========================
   FAQ LAYOUT
========================= */

.faq-layout {
    display: grid;
    grid-template-columns: 0.37fr 0.63fr;
    gap: 28px;
    align-items: start;
    margin-top: 58px;
}


/* =========================
   CATEGORY PANEL
========================= */

.faq-category-panel {
    position: sticky;
    top: 105px;
    padding: 27px;
    border: 1px solid var(--light-border);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 25px 60px rgba(25, 39, 72, 0.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.faq-panel-label {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.faq-category-panel > h3 {
    margin-top: 9px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.8px;
}

.faq-category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.faq-category {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 14px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: var(--text-dark);
    background: transparent;
    text-align: left;
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.faq-category:hover {
    transform: translateX(5px);
    border-color: rgba(115, 87, 255, 0.13);
    background: rgba(115, 87, 255, 0.05);
}

.faq-category.active {
    border-color: rgba(115, 87, 255, 0.18);
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.1),
            rgba(21, 217, 255, 0.05)
        );
    box-shadow:
        0 12px 28px rgba(115, 87, 255, 0.1);
}

.faq-category-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: rgba(115, 87, 255, 0.09);
}

.faq-category.active .faq-category-icon {
    color: var(--white);
    background: var(--gradient-button);
    box-shadow:
        0 10px 25px rgba(88, 92, 255, 0.22);
}

.faq-category > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.faq-category strong {
    font-size: 13px;
}

.faq-category small {
    color: var(--text-body);
    font-size: 10px;
}

.faq-contact-card {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid rgba(21, 217, 255, 0.15);
    border-radius: 18px;
    color: var(--white);
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(21, 217, 255, 0.12),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #10192d,
            #0b1122
        );
}

.faq-contact-card-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
}

.faq-contact-card > div {
    margin-top: 15px;
}

.faq-contact-card strong {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
}

.faq-contact-card p {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 11px;
    line-height: 1.6;
}

.faq-contact-card a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 17px;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
}

.faq-contact-card a i {
    transition: transform var(--transition);
}

.faq-contact-card a:hover i {
    transform: translateX(5px);
}


/* =========================
   FAQ ACCORDION
========================= */

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    overflow: hidden;
    border: 1px solid var(--light-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 16px 38px rgba(29, 42, 74, 0.07);
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition),
        opacity 0.35s ease;
}

.faq-item:hover {
    transform: translateY(-2px);
    border-color: rgba(115, 87, 255, 0.18);
    box-shadow:
        0 22px 48px rgba(29, 42, 74, 0.1);
}

.faq-item.active {
    border-color: rgba(115, 87, 255, 0.24);
    box-shadow:
        0 25px 55px rgba(84, 74, 190, 0.12);
}

.faq-item.hidden-by-category {
    display: none;
}

.faq-question {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 22px;
    color: var(--text-dark);
    background: transparent;
    text-align: left;
}

.faq-question-number {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--primary);
    background: rgba(115, 87, 255, 0.08);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 11px;
    font-weight: 800;
    transition:
        color var(--transition),
        background var(--transition);
}

.faq-item.active .faq-question-number {
    color: var(--white);
    background: var(--gradient-button);
}

.faq-question-text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}

.faq-toggle-icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border: 1px solid var(--light-border);
    border-radius: 11px;
    color: var(--primary);
    background: #f9fbff;
    transition:
        transform var(--transition),
        color var(--transition),
        background var(--transition),
        border-color var(--transition);
}

.faq-item.active .faq-toggle-icon {
    color: var(--white);
    border-color: transparent;
    background: var(--gradient-button);
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.48s ease,
        opacity 0.35s ease;
}

.faq-item.active .faq-answer {
    max-height: 320px;
    opacity: 1;
}

.faq-answer-content {
    padding:
        0 22px 22px
        calc(22px + 39px + 16px);
}

.faq-answer-content p {
    color: var(--text-body);
    font-size: 14px;
    line-height: 1.85;
}

/* =========================================================
   FINAL CTA SECTION
========================================================= */

.final-cta-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    color: var(--white);
    background:
        linear-gradient(
            145deg,
            #070b17 0%,
            #0b1327 52%,
            #07101f 100%
        );
}

.final-cta-background,
.final-cta-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.final-cta-grid {
    opacity: 0.2;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 58px 58px;
}

.final-cta-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
}

.final-cta-glow-one {
    width: 520px;
    height: 520px;
    top: -230px;
    right: -150px;
    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, 0.2),
            transparent 68%
        );
}

.final-cta-glow-two {
    width: 450px;
    height: 450px;
    bottom: -210px;
    left: -160px;
    background:
        radial-gradient(
            circle,
            rgba(21, 217, 255, 0.13),
            transparent 68%
        );
}

.final-cta-section .container {
    position: relative;
    z-index: 2;
}


/* =========================
   CTA CARD
========================= */

.final-cta-card {
    position: relative;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 58px;
    align-items: center;
    min-height: 610px;
    padding: 58px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 34px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(21, 217, 255, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 12% 100%,
            rgba(115, 87, 255, 0.16),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow:
        0 38px 95px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.final-cta-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.5),
            transparent 30%,
            transparent 65%,
            rgba(21, 217, 255, 0.36)
        );
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
}


/* =========================
   CTA CONTENT
========================= */

.final-cta-content {
    position: relative;
    z-index: 3;
}

.final-cta-content h2 {
    max-width: 720px;
    margin-top: 19px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(44px, 4.6vw, 64px);
    line-height: 1.06;
    letter-spacing: -3px;
}

.final-cta-content h2 span {
    display: block;
    color: transparent;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
}

.final-cta-content > p {
    max-width: 650px;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 16px;
    line-height: 1.85;
}

.final-cta-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 34px;
}

.final-cta-primary,
.final-cta-secondary {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 800;
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.final-cta-primary {
    gap: 17px;
    padding: 8px 9px 8px 24px;
    color: var(--white);
    background: var(--gradient-button);
    box-shadow:
        0 18px 42px rgba(88, 92, 255, 0.32);
}

.final-cta-primary:hover {
    transform: translateY(-4px);
    box-shadow:
        0 25px 52px rgba(88, 92, 255, 0.42);
}

.final-cta-button-icon {
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
}

.final-cta-primary:hover .final-cta-button-icon i {
    transform: translateX(4px);
}

.final-cta-button-icon i {
    transition: transform var(--transition);
}

.final-cta-secondary {
    gap: 11px;
    padding: 8px 20px 8px 9px;
    color: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.055);
}

.final-cta-secondary:hover {
    transform: translateY(-4px);
    border-color: rgba(21, 217, 255, 0.3);
    background: rgba(21, 217, 255, 0.08);
}

.final-cta-secondary-icon {
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
}

.final-cta-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 31px;
}

.final-cta-trust > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 11px;
}

.final-cta-trust i {
    color: var(--cyan);
}


/* =========================
   CTA VISUAL
========================= */

.final-cta-visual {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-route-orbit {
    position: absolute;
    border: 1px solid rgba(21, 217, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.cta-route-orbit-one {
    width: 470px;
    height: 470px;
    animation: ctaOrbitSpin 28s linear infinite;
}

.cta-route-orbit-two {
    width: 350px;
    height: 350px;
    border-color: rgba(115, 87, 255, 0.1);
    animation: ctaOrbitSpin 22s linear infinite reverse;
}

.cta-route-orbit::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: 12%;
    left: 18%;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 18px var(--cyan);
}

.cta-route-orbit-two::after {
    top: auto;
    left: auto;
    right: 12%;
    bottom: 14%;
    background: var(--orange);
    box-shadow: 0 0 18px var(--orange);
}

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


/* =========================
   PACKAGE CARD
========================= */

.cta-package-card {
    position: relative;
    z-index: 3;
    width: min(100%, 520px);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.04)
        );
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: ctaPackageFloat 5.4s ease-in-out infinite alternate;
}

@keyframes ctaPackageFloat {
    to {
        transform: translateY(-10px);
    }
}

.cta-package-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.cta-package-card-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cta-package-card-header span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.cta-package-card-header strong {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
}

.cta-package-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--success) !important;
    background: rgba(23, 216, 152, 0.09);
    font-size: 9px !important;
    font-weight: 800;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cta-package-route {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 15px;
    align-items: center;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(4, 9, 21, 0.36);
}

.cta-route-location {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cta-route-location.destination {
    text-align: right;
}

.cta-route-location span {
    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.cta-route-location strong {
    font-size: 13px;
}

.cta-route-line {
    display: flex;
    align-items: center;
    gap: 7px;
}

.cta-route-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 13px var(--cyan);
}

.cta-route-dot.destination {
    background: var(--orange);
    box-shadow: 0 0 13px var(--orange);
}

.cta-route-line > div {
    width: 100%;
    display: flex;
    align-items: center;
}

.cta-route-line > div span {
    width: 100%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--primary-light),
            var(--orange)
        );
}

.cta-route-line i {
    width: 34px;
    height: 34px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 10px;
    color: var(--dark);
    background: var(--cyan);
    box-shadow:
        0 0 20px rgba(21, 217, 255, 0.35);
}

.cta-package-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.cta-package-details > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.035);
}

.cta-detail-icon {
    width: 37px;
    height: 37px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.09);
}

.cta-package-details > div > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cta-package-details small {
    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
}

.cta-package-details strong {
    font-size: 11px;
}

.cta-package-progress {
    margin-top: 15px;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.09),
            rgba(21, 217, 255, 0.04)
        );
}

.cta-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cta-progress-heading span {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
}

.cta-progress-heading strong {
    color: var(--success);
    font-size: 11px;
}

.cta-progress-track {
    height: 5px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.cta-progress-track span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-primary);
    box-shadow:
        0 0 14px rgba(21, 217, 255, 0.45);
}


/* =========================
   FLOATING CARDS
========================= */

.cta-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    background: rgba(17, 25, 45, 0.86);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.cta-floating-card > span {
    width: 36px;
    height: 36px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
}

.cta-floating-card > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cta-floating-card small {
    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
}

.cta-floating-card strong {
    font-size: 11px;
}

.cta-floating-card-one {
    top: 8%;
    left: -4%;
    animation: ctaFloatingCard 4.6s ease-in-out infinite alternate;
}

.cta-floating-card-two {
    right: -5%;
    bottom: 9%;
    animation: ctaFloatingCard 4.6s ease-in-out infinite alternate-reverse;
}

@keyframes ctaFloatingCard {
    to {
        transform: translateY(-11px);
    }
}

/* =========================================================
   MAIN FOOTER — PART 1
   Background, Top Layout, Brand, Links, Socials, Newsletter
========================================================= */

.main-footer {
    position: relative;
    overflow: hidden;
    padding: 110px 0 0;
    color: var(--white);
    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(115, 87, 255, 0.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(21, 217, 255, 0.09),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #050914 0%,
            #081123 52%,
            #060b17 100%
        );
}

.footer-background,
.footer-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.footer-grid {
    opacity: 0.2;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px
        );
    background-size: 58px 58px;
}

.footer-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
}

.footer-glow-one {
    width: 500px;
    height: 500px;
    top: -230px;
    right: -170px;
    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, 0.2),
            transparent 68%
        );
}

.footer-glow-two {
    width: 420px;
    height: 420px;
    bottom: -210px;
    left: -150px;
    background:
        radial-gradient(
            circle,
            rgba(21, 217, 255, 0.12),
            transparent 68%
        );
}

.main-footer .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   FOOTER TOP LAYOUT
========================================================= */

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(150px, 0.72fr));
    gap: 48px;
    align-items: start;
}


/* =========================================================
   FOOTER BRAND COLUMN
========================================================= */

.footer-brand-column {
    max-width: 390px;
}

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

.footer-logo-icon {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 15px;
    color: var(--white);
    background: var(--gradient-primary);
    box-shadow:
        0 14px 36px rgba(115, 87, 255, 0.35);
}

.footer-logo-icon::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 80px;
    top: -24px;
    left: -38px;
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(34deg);
    animation: footerLogoShine 4.5s ease-in-out infinite;
}

@keyframes footerLogoShine {
    0%,
    65% {
        left: -38px;
    }

    85%,
    100% {
        left: 72px;
    }
}

.footer-logo-text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -1px;
}

.footer-logo-text span {
    margin-left: 3px;
    color: var(--cyan);
}

.footer-description {
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================================
   FOOTER STATUS
========================================================= */

.footer-status {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 26px;
    padding: 15px;
    border: 1px solid rgba(23, 216, 152, 0.14);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(23, 216, 152, 0.075),
            rgba(255, 255, 255, 0.025)
        );
}

.footer-status-dot {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 15px var(--success);
}

.footer-status-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid var(--success);
    border-radius: inherit;
    animation: footerStatusPulse 1.8s ease-out infinite;
}

@keyframes footerStatusPulse {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.footer-status > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-status strong {
    color: var(--success);
    font-size: 12px;
}

.footer-status > div span {
    color: rgba(255, 255, 255, 0.46);
    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   FOOTER SOCIALS
========================================================= */

.footer-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
}

.footer-socials a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    color: rgba(255, 255, 255, 0.66);
    background: rgba(255, 255, 255, 0.04);
    transition:
        transform var(--transition),
        color var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.footer-socials a:hover {
    transform: translateY(-4px);
    color: var(--white);
    border-color: rgba(21, 217, 255, 0.3);
    background:
        linear-gradient(
            145deg,
            rgba(115, 87, 255, 0.22),
            rgba(21, 217, 255, 0.12)
        );
    box-shadow:
        0 14px 30px rgba(21, 217, 255, 0.12);
}


/* =========================================================
   FOOTER LINK COLUMNS
========================================================= */

.footer-links-column {
    min-width: 0;
}

.footer-column-label {
    color: var(--cyan);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-links-column h3 {
    margin-top: 9px;
    color: var(--white);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.5px;
}

.footer-links-column ul {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 24px;
}

.footer-links-column li {
    position: relative;
}

.footer-links-column a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 13px;
    line-height: 1.5;
    transition:
        color var(--transition),
        transform var(--transition);
}

.footer-links-column a::before {
    content: "";
    width: 0;
    height: 2px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--gradient-primary);
    transition: width var(--transition);
}

.footer-links-column a:hover {
    transform: translateX(4px);
    color: var(--white);
}

.footer-links-column a:hover::before {
    width: 12px;
}


/* =========================================================
   FOOTER NEWSLETTER
========================================================= */

.footer-newsletter {
    position: relative;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 35px;
    align-items: center;
    margin-top: 72px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(21, 217, 255, 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.12),
            rgba(21, 217, 255, 0.05)
        );
    box-shadow:
        0 26px 65px rgba(0, 0, 0, 0.22);
}

.footer-newsletter::before {
    content: "";
    position: absolute;
    width: 270px;
    height: 270px;
    left: -160px;
    bottom: -180px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, 0.22),
            transparent 70%
        );
}

.footer-newsletter-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-newsletter-icon {
    width: 54px;
    height: 54px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 16px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.1);
    font-size: 18px;
    box-shadow:
        0 12px 30px rgba(21, 217, 255, 0.1);
}

.footer-newsletter-content > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-newsletter-content > div > span {
    color: var(--cyan);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-newsletter-content h3 {
    max-width: 520px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 19px;
    line-height: 1.45;
    letter-spacing: -0.5px;
}


/* =========================================================
   NEWSLETTER FORM
========================================================= */

.footer-newsletter-form {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 11px;
}

.footer-newsletter-input {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    background: rgba(4, 9, 21, 0.5);
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.footer-newsletter-input:focus-within {
    border-color: rgba(21, 217, 255, 0.42);
    background: rgba(4, 9, 21, 0.68);
    box-shadow:
        0 0 0 4px rgba(21, 217, 255, 0.06);
}

.footer-newsletter-input i {
    flex-shrink: 0;
    color: var(--cyan);
}

.footer-newsletter-input input {
    width: 100%;
    border: none;
    outline: none;
    color: var(--white);
    background: transparent;
    font-size: 13px;
}

.footer-newsletter-input input::placeholder {
    color: rgba(255, 255, 255, 0.34);
}

.footer-newsletter-form button {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 23px;
    border-radius: 15px;
    color: var(--white);
    background: var(--gradient-button);
    font-size: 12px;
    font-weight: 800;
    box-shadow:
        0 16px 36px rgba(88, 92, 255, 0.26);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.footer-newsletter-form button:hover {
    transform: translateY(-3px);
    box-shadow:
        0 22px 45px rgba(88, 92, 255, 0.36);
}

.footer-newsletter-form button i {
    transition: transform var(--transition);
}

.footer-newsletter-form button:hover i {
    transform: translateX(4px);
}

/* =========================================================
   MAIN FOOTER — PART 2
   Contact Strip, Bottom Bar, Legal Links, Finishing Styles
========================================================= */


/* =========================================================
   FOOTER CONTACT STRIP
========================================================= */

.footer-contact-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        );
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.12);
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.footer-contact-item:hover {
    transform: translateY(-5px);
    border-color: rgba(21, 217, 255, 0.24);
    background:
        linear-gradient(
            145deg,
            rgba(115, 87, 255, 0.1),
            rgba(21, 217, 255, 0.045)
        );
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.18);
}

.footer-contact-item > span {
    width: 45px;
    height: 45px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 14px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.09);
    font-size: 15px;
    box-shadow:
        0 10px 26px rgba(21, 217, 255, 0.08);
}

.footer-contact-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-contact-item small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.footer-contact-item strong {
    overflow-wrap: anywhere;
    color: var(--white);
    font-size: 13px;
    line-height: 1.45;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 34px;
    padding: 26px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    line-height: 1.6;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px 22px;
}

.footer-legal-links a {
    position: relative;
    color: rgba(255, 255, 255, 0.46);
    font-size: 11px;
    transition:
        color var(--transition),
        transform var(--transition);
}

.footer-legal-links a:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -12px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-50%);
}

.footer-legal-links a:hover {
    color: var(--cyan);
    transform: translateY(-2px);
}


/* =========================================================
   FOOTER LINK FOCUS STATES
========================================================= */

.footer-logo:focus-visible,
.footer-socials a:focus-visible,
.footer-links-column a:focus-visible,
.footer-newsletter-form button:focus-visible,
.footer-legal-links a:focus-visible,
.footer-contact-item:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}


/* =========================================================
   NEWSLETTER FEEDBACK STATES
========================================================= */

.footer-newsletter-form.is-loading button {
    pointer-events: none;
    opacity: 0.75;
}

.footer-newsletter-form.is-success .footer-newsletter-input {
    border-color: rgba(23, 216, 152, 0.42);
    box-shadow:
        0 0 0 4px rgba(23, 216, 152, 0.06);
}

.footer-newsletter-form.is-error .footer-newsletter-input {
    border-color: rgba(255, 83, 112, 0.42);
    box-shadow:
        0 0 0 4px rgba(255, 83, 112, 0.06);
}


/* =========================================================
   FOOTER DECORATIVE DETAILS
========================================================= */

.footer-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -36px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent
        );
}

.footer-top {
    position: relative;
}

.main-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: var(--gradient-primary);
    opacity: 0.9;
}


/* =========================================================
   REDUCED MOTION SUPPORT
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .footer-logo-icon::after,
    .footer-status-dot::after {
        animation: none;
    }

    .footer-socials a,
    .footer-links-column a,
    .footer-newsletter-form button,
    .footer-contact-item,
    .footer-legal-links a {
        transition: none;
    }

}

/* =========================================================
   LOGIN PAGE — PART 1
   Page Layout, Loader, Background, Left Panel
========================================================= */


/* =========================================================
   AUTH PAGE BASE
========================================================= */

.auth-page {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text-dark);
    background: #f6f8fc;
}

.auth-page,
.auth-page input,
.auth-page button,
.auth-page a {
    font-family: "Manrope", sans-serif;
}

.auth-page h1,
.auth-page h2,
.auth-page h3,
.auth-page h4,
.auth-brand-name {
    font-family: "Plus Jakarta Sans", sans-serif;
}


/* =========================================================
   AUTH PAGE LOADER
========================================================= */

.auth-page .page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--white);
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(115, 87, 255, 0.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 75%,
            rgba(21, 217, 255, 0.14),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #050914,
            #091429
        );
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}

.auth-page .page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.auth-page .loader-content {
    width: min(100%, 310px);
    text-align: center;
}

.auth-page .loader-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.auth-page .loader-logo-icon {
    position: relative;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    color: var(--white);
    background: var(--gradient-primary);
    box-shadow:
        0 16px 40px rgba(115, 87, 255, 0.36);
}

.auth-page .loader-logo-icon::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 90px;
    top: -26px;
    left: -42px;
    background: rgba(255, 255, 255, 0.28);
    transform: rotate(35deg);
    animation: authLoaderShine 2.2s ease-in-out infinite;
}

@keyframes authLoaderShine {
    0%,
    48% {
        left: -42px;
    }

    78%,
    100% {
        left: 76px;
    }
}

.auth-page .loader-logo-text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -1px;
}

.auth-page .loader-logo-text span {
    margin-left: 3px;
    color: var(--cyan);
}

.auth-page .loader-line {
    height: 4px;
    margin-top: 25px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-page .loader-line span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-primary);
    box-shadow:
        0 0 16px rgba(21, 217, 255, 0.48);
    animation: authLoaderProgress 1.4s ease-in-out infinite;
}

@keyframes authLoaderProgress {
    0% {
        transform: translateX(-115%);
    }

    100% {
        transform: translateX(345%);
    }
}

.auth-page .loader-content > p {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   MAIN AUTH LAYOUT
========================================================= */

.auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(520px, 0.88fr) minmax(620px, 1.12fr);
    background: #f7f9fd;
}


/* =========================================================
   LEFT FORM PANEL
========================================================= */

.auth-form-panel {
    position: relative;
    z-index: 3;
    min-width: 0;
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(115, 87, 255, 0.055),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f8faff
        );
}

.auth-form-panel::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(115, 87, 255, 0.14),
            rgba(21, 217, 255, 0.12),
            transparent
        );
}

.auth-form-panel-inner {
    width: min(100%, 700px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    padding: 34px 58px 28px;
}


/* =========================================================
   AUTH TOPBAR
========================================================= */

.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.auth-brand-icon {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    color: var(--white);
    background: var(--gradient-primary);
    box-shadow:
        0 13px 32px rgba(115, 87, 255, 0.28);
}

.auth-brand-icon::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 72px;
    top: -20px;
    left: -34px;
    background: rgba(255, 255, 255, 0.24);
    transform: rotate(34deg);
    transition: left 0.65s ease;
}

.auth-brand:hover .auth-brand-icon::after {
    left: 66px;
}

.auth-brand-name {
    color: #10182b;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.9px;
}

.auth-brand-name span {
    margin-left: 3px;
    color: var(--primary);
}

.auth-back-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid rgba(27, 39, 69, 0.1);
    border-radius: 12px;
    color: var(--text-body);
    background: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 700;
    box-shadow:
        0 8px 20px rgba(29, 42, 74, 0.05);
    transition:
        transform var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.auth-back-link i {
    color: var(--primary);
    transition: transform var(--transition);
}

.auth-back-link:hover {
    transform: translateY(-2px);
    color: var(--text-dark);
    border-color: rgba(115, 87, 255, 0.22);
    box-shadow:
        0 13px 28px rgba(29, 42, 74, 0.09);
}

.auth-back-link:hover i {
    transform: translateX(-4px);
}


/* =========================================================
   AUTH FORM CONTAINER
========================================================= */

.auth-form-container {
    width: min(100%, 510px);
    margin: auto;
    padding: 68px 0 54px;
}


/* =========================================================
   AUTH HEADING
========================================================= */

.auth-heading-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid rgba(115, 87, 255, 0.14);
    border-radius: 999px;
    color: var(--primary);
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.08),
            rgba(21, 217, 255, 0.04)
        );
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.35px;
}

.auth-heading-badge i {
    color: var(--primary);
}

.auth-heading h1 {
    margin-top: 21px;
    color: #10182b;
    font-size: clamp(41px, 3.8vw, 58px);
    line-height: 1.08;
    letter-spacing: -2.8px;
}

.auth-heading h1 span {
    display: block;
    color: transparent;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
}

.auth-heading > p {
    max-width: 500px;
    margin-top: 19px;
    color: var(--text-body);
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   AUTH COPYRIGHT
========================================================= */

.auth-copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(27, 39, 69, 0.08);
}

.auth-copyright p {
    color: #8a93a5;
    font-size: 10px;
    line-height: 1.5;
}

.auth-copyright > div {
    display: flex;
    align-items: center;
    gap: 15px;
}

.auth-copyright a {
    color: #7c879a;
    font-size: 10px;
    font-weight: 700;
    transition: color var(--transition);
}

.auth-copyright a:hover {
    color: var(--primary);
}


/* =========================================================
   RIGHT VISUAL PANEL BASE
========================================================= */

.auth-visual-panel {
    position: relative;
    min-width: 0;
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(
            circle at 78% 10%,
            rgba(115, 87, 255, 0.23),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(21, 217, 255, 0.14),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #070b17 0%,
            #0b1429 54%,
            #07101f 100%
        );
}

.auth-visual-background,
.auth-visual-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.auth-visual-grid {
    opacity: 0.24;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 54px 54px;
}

.auth-visual-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
}

.auth-visual-glow-one {
    width: 520px;
    height: 520px;
    top: -230px;
    right: -160px;
    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, 0.24),
            transparent 68%
        );
}

.auth-visual-glow-two {
    width: 440px;
    height: 440px;
    left: -180px;
    bottom: -190px;
    background:
        radial-gradient(
            circle,
            rgba(21, 217, 255, 0.15),
            transparent 68%
        );
}

.auth-visual-content {
    position: relative;
    z-index: 3;
    width: min(calc(100% - 80px), 780px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-inline: auto;
    padding: 56px 0;
}

/* =========================================================
   LOGIN PAGE — PART 2
   Form, Inputs, Validation, Buttons, Social Login
========================================================= */


/* =========================================================
   AUTH FORM
========================================================= */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 34px;
}

.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-form-group > label,
.auth-label-row label {
    color: #182238;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.auth-forgot-link {
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    transition:
        color var(--transition),
        transform var(--transition);
}

.auth-forgot-link:hover {
    color: var(--primary-dark);
    transform: translateY(-1px);
}


/* =========================================================
   AUTH INPUT GROUP
========================================================= */

.auth-input-group {
    position: relative;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid rgba(27, 39, 69, 0.11);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 10px 24px rgba(29, 42, 74, 0.05);
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.auth-input-group:hover {
    border-color: rgba(115, 87, 255, 0.2);
}

.auth-input-group:focus-within {
    border-color: rgba(115, 87, 255, 0.48);
    background: var(--white);
    box-shadow:
        0 0 0 4px rgba(115, 87, 255, 0.075),
        0 14px 32px rgba(29, 42, 74, 0.08);
}

.auth-input-icon {
    width: 20px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    color: #8b95a7;
    font-size: 15px;
    transition: color var(--transition);
}

.auth-input-group:focus-within .auth-input-icon {
    color: var(--primary);
}

.auth-input-group input {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    color: #111a2d;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
}

.auth-input-group input::placeholder {
    color: #a0a9b9;
    font-weight: 500;
}

.auth-field-status {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: transparent;
    transition:
        background var(--transition),
        box-shadow var(--transition);
}


/* =========================================================
   VALIDATION STATES
========================================================= */

.auth-form-group.is-valid .auth-input-group {
    border-color: rgba(23, 216, 152, 0.42);
    box-shadow:
        0 0 0 4px rgba(23, 216, 152, 0.055);
}

.auth-form-group.is-valid .auth-field-status {
    background: var(--success);
    box-shadow: 0 0 11px rgba(23, 216, 152, 0.5);
}

.auth-form-group.is-error .auth-input-group {
    border-color: rgba(255, 83, 112, 0.48);
    box-shadow:
        0 0 0 4px rgba(255, 83, 112, 0.055);
}

.auth-form-group.is-error .auth-input-icon {
    color: #ff5370;
}

.auth-form-group.is-error .auth-field-status {
    background: #ff5370;
    box-shadow: 0 0 11px rgba(255, 83, 112, 0.42);
}

.auth-field-error {
    min-height: 17px;
    color: #e44764;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.auth-password-toggle {
    width: 38px;
    height: 38px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 11px;
    color: #7f899b;
    background: transparent;
    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.auth-password-toggle:hover {
    color: var(--primary);
    background: rgba(115, 87, 255, 0.075);
    transform: scale(1.04);
}


/* =========================================================
   OPTIONS ROW
========================================================= */

.auth-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: -2px;
}

.auth-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-body);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.auth-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-checkbox-box {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(27, 39, 69, 0.16);
    border-radius: 7px;
    color: transparent;
    background: var(--white);
    font-size: 8px;
    box-shadow:
        0 6px 14px rgba(29, 42, 74, 0.05);
    transition:
        color var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.auth-checkbox input:checked + .auth-checkbox-box {
    color: var(--white);
    border-color: transparent;
    background: var(--gradient-button);
    box-shadow:
        0 8px 19px rgba(88, 92, 255, 0.22);
}

.auth-checkbox input:focus-visible + .auth-checkbox-box {
    outline: 2px solid rgba(115, 87, 255, 0.55);
    outline-offset: 3px;
}

.auth-security-text {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8390a4;
    font-size: 10px;
    font-weight: 700;
}

.auth-security-text i {
    color: var(--success);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.auth-submit-button {
    position: relative;
    min-height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    margin-top: 4px;
    padding: 8px 9px 8px 24px;
    overflow: hidden;
    border-radius: 16px;
    color: var(--white);
    background: var(--gradient-button);
    font-size: 13px;
    font-weight: 800;
    box-shadow:
        0 18px 42px rgba(88, 92, 255, 0.28);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        opacity var(--transition);
}

.auth-submit-button::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 100px;
    top: -22px;
    left: -52px;
    background: rgba(255, 255, 255, 0.22);
    transform: rotate(34deg);
    transition: left 0.65s ease;
}

.auth-submit-button:hover {
    transform: translateY(-4px);
    box-shadow:
        0 25px 54px rgba(88, 92, 255, 0.38);
}

.auth-submit-button:hover::before {
    left: calc(100% + 28px);
}

.auth-submit-button:active {
    transform: translateY(-1px);
}

.auth-submit-button.is-loading {
    pointer-events: none;
    opacity: 0.78;
}

.auth-submit-button > span:first-child {
    position: relative;
    z-index: 2;
}

.auth-submit-icon {
    position: relative;
    z-index: 2;
    width: 43px;
    height: 43px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.16);
}

.auth-submit-icon i {
    transition: transform var(--transition);
}

.auth-submit-button:hover .auth-submit-icon i {
    transform: translateX(4px);
}


/* =========================================================
   DIVIDER
========================================================= */

.auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 13px;
    align-items: center;
    margin: 2px 0;
}

.auth-divider > span {
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(27, 39, 69, 0.11),
            transparent
        );
}

.auth-divider small {
    color: #9099aa;
    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   SOCIAL LOGIN
========================================================= */

.auth-social-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.auth-social-button {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(27, 39, 69, 0.1);
    border-radius: 14px;
    color: #1a2439;
    background: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 800;
    box-shadow:
        0 10px 24px rgba(29, 42, 74, 0.05);
    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.auth-social-button:hover {
    transform: translateY(-3px);
    border-color: rgba(115, 87, 255, 0.22);
    background: var(--white);
    box-shadow:
        0 15px 32px rgba(29, 42, 74, 0.09);
}

.auth-social-button > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--primary);
    background: rgba(115, 87, 255, 0.075);
    font-size: 14px;
}

.auth-social-button:first-child > span {
    color: #4285f4;
}

.auth-social-button:last-child > span {
    color: #00a4ef;
}


/* =========================================================
   REGISTER PROMPT
========================================================= */

.auth-register-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px;
    color: #7e899c;
    font-size: 11px;
    font-weight: 700;
}

.auth-register-prompt a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary);
    font-weight: 800;
}

.auth-register-prompt a i {
    font-size: 9px;
    transition: transform var(--transition);
}

.auth-register-prompt a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   TRUST NOTE
========================================================= */

.auth-trust-note {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 27px;
    padding-top: 22px;
    border-top: 1px solid rgba(27, 39, 69, 0.075);
}

.auth-trust-note > div {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8a95a7;
    font-size: 10px;
    font-weight: 700;
}

.auth-trust-note i {
    color: var(--success);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.auth-input-group input:focus-visible,
.auth-password-toggle:focus-visible,
.auth-submit-button:focus-visible,
.auth-social-button:focus-visible,
.auth-forgot-link:focus-visible,
.auth-register-prompt a:focus-visible {
    outline: 2px solid rgba(115, 87, 255, 0.6);
    outline-offset: 3px;
}

/* =========================================================
   LOGIN PAGE — PART 3
   Right Visual Panel, Route Map, Shipment Card and Progress
========================================================= */


/* =========================================================
   VISUAL ORBITS
========================================================= */

.auth-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.auth-orbit-one {
    width: 560px;
    height: 560px;
    top: 12%;
    right: -180px;
    animation: authOrbitSpin 34s linear infinite;
}

.auth-orbit-two {
    width: 390px;
    height: 390px;
    left: -120px;
    bottom: 8%;
    border-color: rgba(21, 217, 255, 0.08);
    animation: authOrbitSpin 26s linear infinite reverse;
}

.auth-orbit::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: 12%;
    left: 20%;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 18px var(--cyan);
}

.auth-orbit-two::after {
    top: auto;
    left: auto;
    right: 12%;
    bottom: 18%;
    background: var(--orange);
    box-shadow: 0 0 18px var(--orange);
}

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


/* =========================================================
   NETWORK STATUS
========================================================= */

.auth-network-status {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid rgba(23, 216, 152, 0.15);
    border-radius: 999px;
    color: var(--success);
    background: rgba(23, 216, 152, 0.075);
    font-size: 10px;
    font-weight: 800;
    box-shadow:
        0 12px 28px rgba(23, 216, 152, 0.08);
}

.auth-network-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 13px var(--success);
}

.auth-network-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid var(--success);
    border-radius: inherit;
    animation: authNetworkPulse 1.8s ease-out infinite;
}

@keyframes authNetworkPulse {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.auth-network-status > i {
    margin-left: 2px;
    color: var(--cyan);
}


/* =========================================================
   VISUAL HEADING
========================================================= */

.auth-visual-heading {
    max-width: 720px;
    margin-top: 26px;
}

.auth-visual-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--cyan);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

.auth-visual-heading > span i {
    color: var(--orange-light);
}

.auth-visual-heading h2 {
    margin-top: 15px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(42px, 4.2vw, 62px);
    line-height: 1.08;
    letter-spacing: -2.8px;
}

.auth-visual-heading h2 strong {
    display: block;
    color: transparent;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
}

.auth-visual-heading p {
    max-width: 650px;
    margin-top: 19px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   LOGISTICS CARD
========================================================= */

.auth-logistics-card {
    position: relative;
    width: min(100%, 650px);
    margin-top: 34px;
    padding: 23px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 27px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(21, 217, 255, 0.1),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.085),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow:
        0 30px 78px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: authCardFloat 5.6s ease-in-out infinite alternate;
}

.auth-logistics-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.4),
            transparent 30%,
            transparent 68%,
            rgba(21, 217, 255, 0.32)
        );
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
}

@keyframes authCardFloat {
    to {
        transform: translateY(-9px);
    }
}


/* =========================================================
   LOGISTICS HEADER
========================================================= */

.auth-logistics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.auth-logistics-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-logistics-header span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.auth-logistics-header h3 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 19px;
}

.auth-shipment-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--cyan) !important;
    background: rgba(21, 217, 255, 0.08);
    font-size: 9px !important;
    font-weight: 800;
    text-transform: none !important;
    letter-spacing: normal !important;
}


/* =========================================================
   ROUTE MAP
========================================================= */

.auth-route-map {
    position: relative;
    min-height: 230px;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 19px;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(115, 87, 255, 0.15),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #081126,
            #060b17
        );
}

.auth-route-grid {
    position: absolute;
    inset: 0;
    opacity: 0.34;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );
    background-size: 34px 34px;
}

.auth-route-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.auth-route-svg path {
    fill: none;
    stroke: url("#authRouteGradient");
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 10 12;
    opacity: 0.9;
    animation: authRouteFlow 8s linear infinite;
}

@keyframes authRouteFlow {
    to {
        stroke-dashoffset: -180;
    }
}


/* =========================================================
   ROUTE LOCATIONS
========================================================= */

.auth-location {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-location-one {
    left: 6%;
    bottom: 14%;
}

.auth-location-two {
    right: 6%;
    top: 31%;
    flex-direction: row-reverse;
    text-align: right;
}

.auth-location > span {
    position: relative;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 4px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: var(--primary-light);
    box-shadow:
        0 0 0 6px rgba(115, 87, 255, 0.12),
        0 0 20px rgba(115, 87, 255, 0.45);
}

.auth-location-two > span {
    background: var(--orange);
    box-shadow:
        0 0 0 6px rgba(255, 107, 44, 0.1),
        0 0 20px rgba(255, 107, 44, 0.4);
}

.auth-location > span::after {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid currentColor;
    border-radius: inherit;
    animation: authLocationPulse 2s ease-out infinite;
}

@keyframes authLocationPulse {
    0% {
        transform: scale(0.55);
        opacity: 0.85;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.auth-location > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.auth-location strong {
    font-size: 12px;
}

.auth-location small {
    color: rgba(255, 255, 255, 0.42);
    font-size: 9px;
}


/* =========================================================
   MOVING PACKAGE
========================================================= */

.auth-moving-package {
    position: absolute;
    z-index: 4;
    left: 18%;
    top: 60%;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--white);
    background: var(--gradient-button);
    box-shadow:
        0 12px 30px rgba(88, 92, 255, 0.4);
    animation: authPackageTravel 8s ease-in-out infinite;
}

@keyframes authPackageTravel {
    0% {
        left: 18%;
        top: 60%;
        transform: rotate(-6deg);
    }

    50% {
        left: 49%;
        top: 28%;
        transform: rotate(6deg);
    }

    100% {
        left: 82%;
        top: 42%;
        transform: rotate(-4deg);
    }
}


/* =========================================================
   ROUTE DETAILS
========================================================= */

.auth-route-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.auth-route-details > div {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 70px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.035);
}

.auth-route-detail-icon {
    width: 38px;
    height: 38px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.09);
}

.auth-route-details > div > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.auth-route-details small {
    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
}

.auth-route-details strong {
    font-size: 11px;
}


/* =========================================================
   SHIPMENT PROGRESS
========================================================= */

.auth-shipment-progress {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.09),
            rgba(21, 217, 255, 0.04)
        );
}

.auth-shipment-progress > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.auth-shipment-progress span {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
}

.auth-shipment-progress strong {
    color: var(--success);
    font-size: 11px;
}

.auth-progress-track {
    height: 5px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-progress-track span {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-primary);
    box-shadow:
        0 0 15px rgba(21, 217, 255, 0.45);
    animation: authProgressGlow 2.2s ease-in-out infinite alternate;
}

@keyframes authProgressGlow {
    from {
        filter: brightness(0.9);
    }

    to {
        filter: brightness(1.3);
    }
}

/* =========================================================
   LOGIN PAGE — PART 3
   Right Visual Panel, Route Map, Shipment Card and Progress
========================================================= */


/* =========================================================
   VISUAL ORBITS
========================================================= */

.auth-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.auth-orbit-one {
    width: 560px;
    height: 560px;
    top: 12%;
    right: -180px;
    animation: authOrbitSpin 34s linear infinite;
}

.auth-orbit-two {
    width: 390px;
    height: 390px;
    left: -120px;
    bottom: 8%;
    border-color: rgba(21, 217, 255, 0.08);
    animation: authOrbitSpin 26s linear infinite reverse;
}

.auth-orbit::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: 12%;
    left: 20%;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 18px var(--cyan);
}

.auth-orbit-two::after {
    top: auto;
    left: auto;
    right: 12%;
    bottom: 18%;
    background: var(--orange);
    box-shadow: 0 0 18px var(--orange);
}

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


/* =========================================================
   NETWORK STATUS
========================================================= */

.auth-network-status {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid rgba(23, 216, 152, 0.15);
    border-radius: 999px;
    color: var(--success);
    background: rgba(23, 216, 152, 0.075);
    font-size: 10px;
    font-weight: 800;
    box-shadow:
        0 12px 28px rgba(23, 216, 152, 0.08);
}

.auth-network-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 13px var(--success);
}

.auth-network-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid var(--success);
    border-radius: inherit;
    animation: authNetworkPulse 1.8s ease-out infinite;
}

@keyframes authNetworkPulse {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.auth-network-status > i {
    margin-left: 2px;
    color: var(--cyan);
}


/* =========================================================
   VISUAL HEADING
========================================================= */

.auth-visual-heading {
    max-width: 720px;
    margin-top: 26px;
}

.auth-visual-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--cyan);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

.auth-visual-heading > span i {
    color: var(--orange-light);
}

.auth-visual-heading h2 {
    margin-top: 15px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(42px, 4.2vw, 62px);
    line-height: 1.08;
    letter-spacing: -2.8px;
}

.auth-visual-heading h2 strong {
    display: block;
    color: transparent;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
}

.auth-visual-heading p {
    max-width: 650px;
    margin-top: 19px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   LOGISTICS CARD
========================================================= */

.auth-logistics-card {
    position: relative;
    width: min(100%, 650px);
    margin-top: 34px;
    padding: 23px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 27px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(21, 217, 255, 0.1),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.085),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow:
        0 30px 78px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: authCardFloat 5.6s ease-in-out infinite alternate;
}

.auth-logistics-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.4),
            transparent 30%,
            transparent 68%,
            rgba(21, 217, 255, 0.32)
        );
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
}

@keyframes authCardFloat {
    to {
        transform: translateY(-9px);
    }
}


/* =========================================================
   LOGISTICS HEADER
========================================================= */

.auth-logistics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.auth-logistics-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-logistics-header span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.auth-logistics-header h3 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 19px;
}

.auth-shipment-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--cyan) !important;
    background: rgba(21, 217, 255, 0.08);
    font-size: 9px !important;
    font-weight: 800;
    text-transform: none !important;
    letter-spacing: normal !important;
}


/* =========================================================
   ROUTE MAP
========================================================= */

.auth-route-map {
    position: relative;
    min-height: 230px;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 19px;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(115, 87, 255, 0.15),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #081126,
            #060b17
        );
}

.auth-route-grid {
    position: absolute;
    inset: 0;
    opacity: 0.34;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );
    background-size: 34px 34px;
}

.auth-route-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.auth-route-svg path {
    fill: none;
    stroke: url("#authRouteGradient");
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 10 12;
    opacity: 0.9;
    animation: authRouteFlow 8s linear infinite;
}

@keyframes authRouteFlow {
    to {
        stroke-dashoffset: -180;
    }
}


/* =========================================================
   ROUTE LOCATIONS
========================================================= */

.auth-location {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-location-one {
    left: 6%;
    bottom: 14%;
}

.auth-location-two {
    right: 6%;
    top: 31%;
    flex-direction: row-reverse;
    text-align: right;
}

.auth-location > span {
    position: relative;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 4px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: var(--primary-light);
    box-shadow:
        0 0 0 6px rgba(115, 87, 255, 0.12),
        0 0 20px rgba(115, 87, 255, 0.45);
}

.auth-location-two > span {
    background: var(--orange);
    box-shadow:
        0 0 0 6px rgba(255, 107, 44, 0.1),
        0 0 20px rgba(255, 107, 44, 0.4);
}

.auth-location > span::after {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid currentColor;
    border-radius: inherit;
    animation: authLocationPulse 2s ease-out infinite;
}

@keyframes authLocationPulse {
    0% {
        transform: scale(0.55);
        opacity: 0.85;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.auth-location > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.auth-location strong {
    font-size: 12px;
}

.auth-location small {
    color: rgba(255, 255, 255, 0.42);
    font-size: 9px;
}


/* =========================================================
   MOVING PACKAGE
========================================================= */

.auth-moving-package {
    position: absolute;
    z-index: 4;
    left: 18%;
    top: 60%;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--white);
    background: var(--gradient-button);
    box-shadow:
        0 12px 30px rgba(88, 92, 255, 0.4);
    animation: authPackageTravel 8s ease-in-out infinite;
}

@keyframes authPackageTravel {
    0% {
        left: 18%;
        top: 60%;
        transform: rotate(-6deg);
    }

    50% {
        left: 49%;
        top: 28%;
        transform: rotate(6deg);
    }

    100% {
        left: 82%;
        top: 42%;
        transform: rotate(-4deg);
    }
}


/* =========================================================
   ROUTE DETAILS
========================================================= */

.auth-route-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.auth-route-details > div {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 70px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.035);
}

.auth-route-detail-icon {
    width: 38px;
    height: 38px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.09);
}

.auth-route-details > div > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.auth-route-details small {
    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
}

.auth-route-details strong {
    font-size: 11px;
}


/* =========================================================
   SHIPMENT PROGRESS
========================================================= */

.auth-shipment-progress {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            rgba(115, 87, 255, 0.09),
            rgba(21, 217, 255, 0.04)
        );
}

.auth-shipment-progress > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.auth-shipment-progress span {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
}

.auth-shipment-progress strong {
    color: var(--success);
    font-size: 11px;
}

.auth-progress-track {
    height: 5px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-progress-track span {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-primary);
    box-shadow:
        0 0 15px rgba(21, 217, 255, 0.45);
    animation: authProgressGlow 2.2s ease-in-out infinite alternate;
}

@keyframes authProgressGlow {
    from {
        filter: brightness(0.9);
    }

    to {
        filter: brightness(1.3);
    }
}

/* =========================================================
   AUTH VISUAL METRICS — PREMIUM CARDS
========================================================= */

.auth-visual-metrics {
    width: min(100%, 650px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    margin-top: 22px;
}

.auth-visual-metrics > div {
    position: relative;
    min-height: 112px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(21, 217, 255, 0.12),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.028)
        );
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.16);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.auth-visual-metrics > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: var(--gradient-primary);
    opacity: 0.85;
}

.auth-visual-metrics > div::after {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    top: -30px;
    right: -24px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, 0.2),
            transparent 70%
        );
}

.auth-visual-metrics > div:hover {
    transform: translateY(-6px);
    border-color: rgba(21, 217, 255, 0.25);
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(21, 217, 255, 0.17),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(115, 87, 255, 0.12),
            rgba(21, 217, 255, 0.045)
        );
    box-shadow:
        0 26px 58px rgba(0, 0, 0, 0.24);
}

.auth-visual-metrics strong {
    position: relative;
    z-index: 2;
    color: var(--white);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 27px;
    line-height: 1;
    letter-spacing: -1px;
}

.auth-visual-metrics span {
    position: relative;
    z-index: 2;
    margin-top: 9px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    line-height: 1.45;
}

.auth-visual-metrics > div:nth-child(1) strong {
    color: var(--cyan);
}

.auth-visual-metrics > div:nth-child(2) strong {
    color: var(--success);
}

.auth-visual-metrics > div:nth-child(3) strong {
    color: var(--orange-light);
}

.auth-layout,
.auth-form-panel,
.auth-visual-panel,
.auth-form-panel-inner,
.auth-visual-content,
.auth-logistics-card {
    min-width: 0;
    max-width: 100%;
}
/* =========================================================
   REGISTER PAGE
========================================================= */
.register-layout { grid-template-columns: minmax(620px, .98fr) minmax(560px, 1.02fr); }
.register-panel-inner { width: min(100%, 820px); padding-inline: 48px; }
.register-form-container { width: min(100%, 660px); padding-block: 42px 34px; }
.register-form { gap: 16px; margin-top: 26px; }
.register-name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.auth-select-group select { width: 100%; min-width: 0; border: 0; outline: 0; color: #111a2d; background: transparent; font-size: 13px; font-weight: 600; }
.register-agreement { align-items: flex-start; line-height: 1.55; }
.register-agreement a { color: var(--primary); font-weight: 800; }
.register-terms-error { margin-top: -9px; }
.password-strength { margin-top: -4px; }
.password-strength-track { height: 5px; overflow: hidden; border-radius: 999px; background: #e9edf5; }
.password-strength-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #ff5370; transition: width .3s ease, background .3s ease; }
.password-strength small { display: block; margin-top: 7px; color: #8b95a7; font-size: 10px; line-height: 1.5; }
.register-benefits-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 30px; }
.register-benefit { display: flex; align-items: flex-start; gap: 12px; padding: 17px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); }
.register-benefit > span { width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; color: var(--cyan); background: rgba(21,217,255,.1); }
.register-benefit div { display: flex; flex-direction: column; gap: 5px; }
.register-benefit strong { font-size: 12px; }
.register-benefit small { color: rgba(255,255,255,.43); font-size: 9px; line-height: 1.5; }
.register-preview-card { width: 100%; max-width: 660px; margin-top: 20px; animation: none; }
.register-dashboard-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.register-dashboard-preview > div { min-height: 120px; display: flex; justify-content: center; flex-direction: column; padding: 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(255,255,255,.035); }
.register-dashboard-preview > div > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--cyan); background: rgba(21,217,255,.09); }
.register-dashboard-preview strong { margin-top: 12px; font-size: 11px; }
.register-dashboard-preview small { margin-top: 5px; color: rgba(255,255,255,.4); font-size: 9px; line-height: 1.5; }

/* === NEXORA CUSTOMER DASHBOARD START === */

.customer-dashboard-page {
    min-height: 100vh;
    color: #eaf0ff;
    background: #07101f;
}

.customer-dashboard-page,
.customer-dashboard-page button,
.customer-dashboard-page input,
.customer-dashboard-page select,
.customer-dashboard-page textarea {
    font-family: "Manrope", sans-serif;
}

.customer-dashboard-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}

.customer-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1200;
    width: 280px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 22px 18px;
    border-right: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 10% 0%, rgba(115,87,255,.16), transparent 32%),
        linear-gradient(180deg, #081123, #060b17);
    box-shadow: 18px 0 50px rgba(0,0,0,.18);
}

.customer-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.customer-dashboard-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.customer-dashboard-brand-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: var(--gradient-primary);
    box-shadow: 0 12px 30px rgba(115,87,255,.3);
}

.customer-dashboard-brand-name {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.8px;
}

.customer-dashboard-brand-name span { color: var(--cyan); margin-left: 2px; }

.customer-sidebar-close {
    width: 40px;
    height: 40px;
    display: none;
    place-items: center;
    border-radius: 12px;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.06);
}

.customer-profile-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
    margin-top: 26px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 17px;
    background: rgba(255,255,255,.045);
}

.customer-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 12px;
    font-weight: 800;
}

.customer-avatar.small { width: 38px; height: 38px; border-radius: 12px; }

.customer-profile-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.customer-profile-card strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-profile-card span:not(.customer-avatar) {
    color: rgba(255,255,255,.42);
    font-size: 9px;
}

.customer-profile-card > i { color: var(--success); }

.customer-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 25px;
}

.customer-nav-label {
    margin: 15px 12px 5px;
    color: rgba(255,255,255,.32);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.customer-nav-link {
    min-height: 48px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: rgba(255,255,255,.56);
    font-size: 11px;
    font-weight: 700;
    transition: .3s ease;
}

.customer-nav-link > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: rgba(255,255,255,.58);
    background: rgba(255,255,255,.045);
}

.customer-nav-link small {
    min-width: 24px;
    padding: 4px 6px;
    border-radius: 7px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    text-align: center;
    font-size: 8px;
}

.customer-nav-link:hover,
.customer-nav-link.active {
    color: #fff;
    border-color: rgba(21,217,255,.12);
    background: linear-gradient(135deg, rgba(115,87,255,.12), rgba(21,217,255,.06));
    transform: translateX(4px);
}

.customer-nav-link.active > span {
    color: #fff;
    background: var(--gradient-button);
    box-shadow: 0 8px 18px rgba(88,92,255,.24);
}

.customer-sidebar-support {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    margin-top: auto;
    padding: 15px;
    border: 1px solid rgba(21,217,255,.12);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(21,217,255,.07), rgba(115,87,255,.06));
}

.customer-sidebar-support > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21,217,255,.09);
}

.customer-sidebar-support div { display: flex; flex-direction: column; gap: 5px; }
.customer-sidebar-support strong { font-size: 11px; }
.customer-sidebar-support p { color: rgba(255,255,255,.42); font-size: 9px; line-height: 1.5; }
.customer-sidebar-support a { color: var(--cyan); font-size: 9px; font-weight: 800; }

.customer-logout-link {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 0 12px;
    border-radius: 12px;
    color: #ff7f94;
    background: rgba(255,83,112,.06);
    font-size: 10px;
    font-weight: 800;
}

.customer-sidebar-overlay { display: none; }

.customer-dashboard-main {
    min-width: 0;
    grid-column: 2;
    background:
        radial-gradient(circle at 85% 5%, rgba(115,87,255,.12), transparent 25%),
        linear-gradient(145deg, #091326, #070d19);
}

.customer-dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 28px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(7,13,25,.86);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.customer-topbar-left,
.customer-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customer-topbar-left > div { display: flex; flex-direction: column; gap: 3px; }
.customer-topbar-left span { color: rgba(255,255,255,.38); font-size: 9px; text-transform: uppercase; letter-spacing: .8px; }
.customer-topbar-left h1 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 19px; }

.customer-sidebar-toggle {
    width: 42px;
    height: 42px;
    display: none;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: rgba(255,255,255,.06);
}

.customer-topbar-icon {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    color: rgba(255,255,255,.68);
    background: rgba(255,255,255,.04);
}

.customer-notification-button > span {
    position: absolute;
    top: -4px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #081123;
    border-radius: 999px;
    color: #fff;
    background: var(--danger);
    font-size: 7px;
    font-weight: 800;
}

.customer-user-menu {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 50px;
    padding: 6px 10px 6px 7px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    color: #fff;
    background: rgba(255,255,255,.04);
    text-align: left;
}

.customer-user-menu > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.customer-user-menu strong { font-size: 10px; }
.customer-user-menu small { color: rgba(255,255,255,.38); font-size: 8px; }
.customer-user-menu > i { color: rgba(255,255,255,.42); font-size: 9px; }

.customer-dashboard-content {
    width: min(calc(100% - 48px), 1500px);
    margin-inline: auto;
    padding: 30px 0 46px;
}

.customer-welcome-banner {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 28px;
    align-items: center;
    min-height: 310px;
    overflow: hidden;
    padding: 36px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 10%, rgba(21,217,255,.14), transparent 30%),
        radial-gradient(circle at 10% 100%, rgba(115,87,255,.16), transparent 36%),
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
    box-shadow: 0 28px 70px rgba(0,0,0,.24);
}

.customer-welcome-tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.14);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 9px;
    font-weight: 800;
}

.customer-welcome-content h2 {
    max-width: 720px;
    margin-top: 17px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(34px, 3.5vw, 52px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.customer-welcome-content p {
    max-width: 650px;
    margin-top: 16px;
    color: rgba(255,255,255,.55);
    font-size: 13px;
    line-height: 1.75;
}

.customer-welcome-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.customer-primary-action,
.customer-secondary-action {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    font-size: 11px;
    font-weight: 800;
}

.customer-primary-action {
    padding: 0 18px;
    color: #fff;
    background: var(--gradient-button);
    box-shadow: 0 15px 34px rgba(88,92,255,.28);
}

.customer-secondary-action {
    padding: 0 17px;
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.04);
}

.customer-welcome-visual {
    position: relative;
    min-height: 220px;
    display: grid;
    place-items: center;
}

.customer-welcome-orbit {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(21,217,255,.09);
    border-radius: 50%;
    animation: customerOrbit 20s linear infinite;
}

.customer-welcome-orbit::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: 15%;
    left: 16%;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 16px var(--cyan);
}

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

.customer-welcome-package {
    position: relative;
    z-index: 2;
    width: min(100%, 320px);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    background: rgba(12,20,38,.84);
    box-shadow: 0 22px 50px rgba(0,0,0,.25);
}

.customer-welcome-package > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: var(--gradient-button);
}

.customer-welcome-package > div { display: flex; flex-direction: column; gap: 4px; }
.customer-welcome-package small { color: rgba(255,255,255,.38); font-size: 9px; }
.customer-welcome-package strong { font-size: 13px; }
.customer-welcome-package p { color: var(--success); font-size: 9px; }

.customer-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.customer-stat-card,
.customer-panel {
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
    box-shadow: 0 18px 45px rgba(0,0,0,.14);
}

.customer-stat-card {
    min-height: 176px;
    padding: 19px;
    border-radius: 20px;
}

.customer-stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.customer-stat-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

.customer-stat-icon.blue { color: var(--primary-light); background: rgba(115,87,255,.1); }
.customer-stat-icon.cyan { color: var(--cyan); background: rgba(21,217,255,.09); }
.customer-stat-icon.green { color: var(--success); background: rgba(23,216,152,.09); }
.customer-stat-icon.orange { color: var(--orange-light); background: rgba(255,107,44,.09); }

.customer-stat-change {
    padding: 5px 7px;
    border-radius: 7px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 8px;
    font-weight: 800;
}

.customer-stat-change.positive { color: var(--success); background: rgba(23,216,152,.08); }

.customer-stat-card > strong {
    display: block;
    margin-top: 17px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 30px;
    letter-spacing: -1px;
}

.customer-stat-card > p { margin-top: 5px; font-size: 11px; font-weight: 800; }
.customer-stat-card > small { display: block; margin-top: 4px; color: rgba(255,255,255,.38); font-size: 9px; }

.customer-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr);
    gap: 18px;
    margin-top: 18px;
}

.customer-panel {
    min-width: 0;
    padding: 22px;
    border-radius: 22px;
}

.customer-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.customer-panel-header > div { display: flex; flex-direction: column; gap: 4px; }
.customer-panel-header span { color: rgba(255,255,255,.34); font-size: 8px; text-transform: uppercase; letter-spacing: .8px; }
.customer-panel-header h3 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; }
.customer-panel-header a { color: var(--cyan); font-size: 9px; font-weight: 800; }

.customer-active-shipment-card {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(4,9,21,.3);
}

.customer-shipment-card-top,
.customer-shipment-progress-info > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.customer-shipment-card-top > div { display: flex; flex-direction: column; gap: 4px; }
.customer-shipment-card-top small { color: rgba(255,255,255,.38); font-size: 8px; text-transform: uppercase; letter-spacing: .6px; }
.customer-shipment-card-top strong { font-size: 14px; }

.customer-shipment-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border-radius: 8px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    font-size: 8px;
    font-weight: 800;
}

.customer-shipment-route {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.customer-route-point { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; }
.customer-route-point > span { width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.customer-route-point.destination > span { background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.customer-route-point div { display: flex; flex-direction: column; gap: 3px; }
.customer-route-point small { color: rgba(255,255,255,.34); font-size: 8px; }
.customer-route-point strong { font-size: 11px; }
.customer-route-point p { color: rgba(255,255,255,.35); font-size: 8px; }

.customer-route-progress {
    display: flex;
    align-items: center;
}

.customer-route-progress > span {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--cyan), var(--primary-light), var(--orange));
}

.customer-route-progress > div {
    width: 34px;
    height: 34px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: var(--gradient-button);
}

.customer-shipment-progress-info { margin-top: 15px; }
.customer-shipment-progress-info span { color: rgba(255,255,255,.4); font-size: 9px; }
.customer-shipment-progress-info strong { color: var(--success); font-size: 10px; }

.customer-shipment-progress-track {
    height: 5px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.customer-shipment-progress-track span {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-primary);
}

.customer-shipment-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.customer-shipment-meta > div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.customer-shipment-meta > div > span {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.customer-shipment-meta > div > div { display: flex; flex-direction: column; gap: 3px; }
.customer-shipment-meta small { color: rgba(255,255,255,.35); font-size: 8px; }
.customer-shipment-meta strong { font-size: 9px; }

.customer-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.customer-quick-actions a {
    min-height: 70px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    transition: .3s ease;
}

.customer-quick-actions a:hover { transform: translateX(5px); border-color: rgba(21,217,255,.18); }
.customer-quick-actions a > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; }
.customer-quick-actions a > span.purple { color: var(--primary-light); background: rgba(115,87,255,.1); }
.customer-quick-actions a > span.cyan { color: var(--cyan); background: rgba(21,217,255,.08); }
.customer-quick-actions a > span.orange { color: var(--orange-light); background: rgba(255,107,44,.08); }
.customer-quick-actions a > span.green { color: var(--success); background: rgba(23,216,152,.08); }
.customer-quick-actions a > div { display: flex; flex-direction: column; gap: 3px; }
.customer-quick-actions strong { font-size: 10px; }
.customer-quick-actions small { color: rgba(255,255,255,.35); font-size: 8px; }
.customer-quick-actions a > i { color: rgba(255,255,255,.28); font-size: 9px; }

.customer-recent-shipments { grid-column: 1; }
.customer-activity-panel { grid-column: 2; }

.customer-shipment-table-wrap { overflow-x: auto; margin-top: 18px; }
.customer-shipment-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.customer-shipment-table th { padding: 0 12px 11px; color: rgba(255,255,255,.3); font-size: 8px; text-align: left; text-transform: uppercase; letter-spacing: .7px; }
.customer-shipment-table td { padding: 14px 12px; border-top: 1px solid rgba(255,255,255,.055); color: rgba(255,255,255,.58); font-size: 9px; }
.customer-shipment-table td:first-child { display: flex; flex-direction: column; gap: 3px; }
.customer-shipment-table td:first-child strong { color: #fff; font-size: 10px; }
.customer-shipment-table td:first-child small { color: rgba(255,255,255,.32); font-size: 8px; }
.customer-shipment-table td i { margin-inline: 5px; color: var(--cyan); font-size: 8px; }
.customer-shipment-table button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: rgba(255,255,255,.5); background: rgba(255,255,255,.04); }

.table-status { display: inline-flex; padding: 5px 7px; border-radius: 7px; font-size: 8px; font-weight: 800; }
.table-status.transit { color: var(--cyan); background: rgba(21,217,255,.08); }
.table-status.delivered { color: var(--success); background: rgba(23,216,152,.08); }
.table-status.processing { color: var(--orange-light); background: rgba(255,107,44,.08); }

.customer-activity-list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.customer-activity-item { display: grid; grid-template-columns: auto 1fr; gap: 11px; }
.customer-activity-item > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; }
.customer-activity-item > span.green { color: var(--success); background: rgba(23,216,152,.08); }
.customer-activity-item > span.purple { color: var(--primary-light); background: rgba(115,87,255,.09); }
.customer-activity-item > span.orange { color: var(--orange-light); background: rgba(255,107,44,.08); }
.customer-activity-item > div { display: flex; flex-direction: column; gap: 4px; }
.customer-activity-item strong { font-size: 9px; }
.customer-activity-item p { color: rgba(255,255,255,.4); font-size: 8px; line-height: 1.5; }
.customer-activity-item small { color: rgba(255,255,255,.26); font-size: 7px; }

.customer-dashboard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: min(calc(100% - 48px), 1500px);
    margin-inline: auto;
    padding: 22px 0 28px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.customer-dashboard-footer p,
.customer-dashboard-footer a { color: rgba(255,255,255,.28); font-size: 8px; }
.customer-dashboard-footer > div { display: flex; gap: 16px; }

/* === NEXORA CUSTOMER DASHBOARD END === */

/* === CUSTOMER DASHBOARD V2 TYPOGRAPHY START === */

/* Sidebar readability */
.customer-profile-card {
    min-height: 76px;
    padding: 16px;
}

.customer-profile-card strong {
    font-size: 13px;
    line-height: 1.35;
}

.customer-profile-card span:not(.customer-avatar) {
    font-size: 11px;
    line-height: 1.4;
}

.customer-nav-label {
    font-size: 10px;
}

.customer-nav-link {
    min-height: 54px;
    font-size: 13px;
}

.customer-nav-link > span {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

.customer-nav-link small {
    min-width: 27px;
    font-size: 9px;
}

.customer-sidebar-support strong {
    font-size: 13px;
}

.customer-sidebar-support p,
.customer-sidebar-support a,
.customer-logout-link {
    font-size: 11px;
}

/* Top bar */
.customer-topbar-left > div > span {
    font-size: 10px;
}

.customer-topbar-left h1 {
    font-size: 21px;
}

.customer-user-menu strong {
    font-size: 12px;
}

.customer-user-menu small {
    font-size: 10px;
}

/* Welcome area */
.customer-welcome-tag {
    font-size: 10px;
}

.customer-welcome-content p {
    font-size: 15px;
}

.customer-primary-action,
.customer-secondary-action {
    font-size: 13px;
}

/* Statistics */
.customer-stat-card {
    min-height: 188px;
    padding: 21px;
}

.customer-stat-card > strong {
    font-size: 34px;
}

.customer-stat-card > p {
    font-size: 14px;
}

.customer-stat-card > small {
    font-size: 11px;
}

.customer-stat-change {
    font-size: 10px;
}

/* Panel headings */
.customer-panel-header > div > span {
    font-size: 10px;
}

.customer-panel-header h3 {
    font-size: 20px;
}

.customer-panel-header a {
    font-size: 11px;
}

/* Active shipment */
.customer-shipment-card-top small,
.customer-route-point small,
.customer-route-point p,
.customer-shipment-meta small {
    font-size: 10px;
}

.customer-shipment-card-top strong {
    font-size: 16px;
}

.customer-shipment-status {
    font-size: 10px;
}

.customer-route-point strong {
    font-size: 13px;
}

.customer-shipment-progress-info span,
.customer-shipment-progress-info strong {
    font-size: 11px;
}

.customer-shipment-meta strong {
    font-size: 12px;
}

/* Quick actions */
.customer-quick-actions strong {
    font-size: 13px;
}

.customer-quick-actions small {
    font-size: 10px;
    line-height: 1.45;
}

.customer-quick-actions a > i {
    font-size: 11px;
}

/* Recent shipment table */
.customer-shipment-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(21, 217, 255, .42) rgba(255, 255, 255, .05);
}

.customer-shipment-table-wrap::-webkit-scrollbar {
    height: 7px;
}

.customer-shipment-table-wrap::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
}

.customer-shipment-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #7357ff, #15d9ff);
}

.customer-shipment-table {
    min-width: 700px;
}

.customer-shipment-table th {
    font-size: 10px;
}

.customer-shipment-table td {
    font-size: 11px;
    line-height: 1.5;
}

.customer-shipment-table td:first-child strong {
    font-size: 12px;
}

.customer-shipment-table td:first-child small {
    font-size: 10px;
}

.table-status {
    font-size: 9px;
}

/* Recent activity */
.customer-activity-item {
    gap: 13px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 14px;
    background: rgba(255, 255, 255, .022);
}

.customer-activity-item > span {
    width: 40px;
    height: 40px;
}

.customer-activity-item strong {
    font-size: 12px;
    line-height: 1.4;
}

.customer-activity-item p {
    font-size: 10px;
    line-height: 1.6;
}

.customer-activity-item small {
    font-size: 9px;
}

/* Footer */
.customer-dashboard-footer p,
.customer-dashboard-footer a {
    font-size: 10px;
}

/* Premium hover refinements */
.customer-stat-card,
.customer-panel,
.customer-activity-item {
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.customer-stat-card:hover,
.customer-panel:hover {
    border-color: rgba(21, 217, 255, .16);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .2);
}

.customer-stat-card:hover {
    transform: translateY(-5px);
}

.customer-activity-item:hover {
    transform: translateX(4px);
    border-color: rgba(115, 87, 255, .16);
}

/* === CUSTOMER DASHBOARD V2 TYPOGRAPHY END === */

/* === NEXORA MY SHIPMENTS START === */

.shipments-content {
    padding-top: 30px;
}

.shipments-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.shipments-page-heading > div {
    max-width: 760px;
}

.shipments-page-tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.14);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

.shipments-page-heading h2 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(36px, 3.6vw, 54px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.shipments-page-heading p {
    margin-top: 14px;
    color: rgba(255,255,255,.52);
    font-size: 14px;
    line-height: 1.75;
}

.shipments-new-button {
    flex-shrink: 0;
    padding-inline: 19px;
}

.shipments-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 26px;
}

.shipment-summary-card {
    min-height: 132px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.024));
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
    cursor: pointer;
    transition: .3s ease;
}

.shipment-summary-card:hover,
.shipment-summary-card.active-card {
    transform: translateY(-5px);
    border-color: rgba(21,217,255,.19);
    background: linear-gradient(145deg, rgba(115,87,255,.12), rgba(21,217,255,.045));
}

.shipment-summary-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.shipment-summary-icon.purple { color: var(--primary-light); background: rgba(115,87,255,.1); }
.shipment-summary-icon.cyan { color: var(--cyan); background: rgba(21,217,255,.08); }
.shipment-summary-icon.orange { color: var(--orange-light); background: rgba(255,107,44,.08); }
.shipment-summary-icon.green { color: var(--success); background: rgba(23,216,152,.08); }

.shipment-summary-card > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shipment-summary-card strong {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 26px;
}

.shipment-summary-card p {
    font-size: 12px;
    font-weight: 800;
}

.shipment-summary-card small {
    color: rgba(255,255,255,.36);
    font-size: 10px;
}

.shipments-management-panel {
    margin-top: 18px;
}

.shipments-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.shipments-search-box {
    min-height: 52px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

.shipments-search-box i {
    color: var(--cyan);
}

.shipments-search-box input {
    width: 100%;
    border: none;
    outline: none;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

.shipments-search-box input::placeholder {
    color: rgba(255,255,255,.3);
}

.shipments-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shipments-toolbar-actions select,
.shipments-filter-button {
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    color: rgba(255,255,255,.72);
    background: #0f182b;
    font-size: 11px;
    font-weight: 700;
}

.shipments-toolbar-actions select {
    min-width: 150px;
    outline: none;
}

.shipments-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.shipments-results-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.shipments-results-meta > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shipments-results-meta strong {
    font-size: 13px;
}

.shipments-results-meta span {
    color: rgba(255,255,255,.34);
    font-size: 10px;
}

.shipments-view-switcher {
    display: flex;
    gap: 7px;
}

.shipments-view-switcher button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.03);
}

.shipments-view-switcher button.active {
    color: #fff;
    background: var(--gradient-button);
}

.shipments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.shipment-record {
    padding: 16px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 17px;
    background: rgba(255,255,255,.025);
    transition: .3s ease;
}

.shipment-record:hover {
    transform: translateY(-3px);
    border-color: rgba(21,217,255,.16);
    background: linear-gradient(145deg, rgba(115,87,255,.07), rgba(21,217,255,.025));
}

.shipment-record-main {
    display: grid;
    grid-template-columns: auto minmax(135px,.8fr) minmax(260px,1.45fr) minmax(120px,.7fr) minmax(120px,.7fr) auto;
    gap: 14px;
    align-items: center;
}

.shipment-record-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.shipment-record-icon.transit { color: var(--cyan); background: rgba(21,217,255,.08); }
.shipment-record-icon.delivered { color: var(--success); background: rgba(23,216,152,.08); }
.shipment-record-icon.processing { color: var(--orange-light); background: rgba(255,107,44,.08); }
.shipment-record-icon.pending { color: #ffcc66; background: rgba(255,204,102,.08); }

.shipment-record-identity,
.shipment-record-date,
.shipment-record-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shipment-record-identity span,
.shipment-record-date span,
.shipment-record-route span {
    color: rgba(255,255,255,.3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.shipment-record-identity strong,
.shipment-record-date strong,
.shipment-record-route strong {
    font-size: 11px;
}

.shipment-record-identity small,
.shipment-record-date small,
.shipment-record-status small {
    color: rgba(255,255,255,.34);
    font-size: 9px;
}

.shipment-record-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
}

.shipment-record-route > div:not(.shipment-record-route-line) {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shipment-record-route-line {
    display: flex;
    align-items: center;
}

.shipment-record-route-line span {
    width: 30px;
    height: 1px;
    background: rgba(255,255,255,.12);
}

.shipment-record-route-line i {
    margin-inline: 6px;
    color: var(--cyan);
    font-size: 9px;
}

.shipment-record-menu {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.04);
}

.shipment-record-progress {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.shipment-record-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
}

.shipment-record-progress span {
    color: rgba(255,255,255,.34);
    font-size: 9px;
}

.shipment-record-progress strong {
    color: var(--success);
    font-size: 9px;
}

.shipment-record-progress > div:last-child {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.shipment-record-progress > div:last-child span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-primary);
}

.table-status.pending {
    color: #ffcc66;
    background: rgba(255,204,102,.08);
}

.shipments-list.grid-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.shipments-list.grid-view .shipment-record-main {
    grid-template-columns: auto 1fr auto;
}

.shipments-list.grid-view .shipment-record-route {
    grid-column: 1 / -1;
}

.shipments-list.grid-view .shipment-record-status,
.shipments-list.grid-view .shipment-record-date {
    grid-column: span 1;
}

.shipments-empty-state {
    display: none;
    align-items: center;
    flex-direction: column;
    padding: 56px 20px;
    text-align: center;
}

.shipments-empty-state.show {
    display: flex;
}

.shipments-empty-state > span {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    font-size: 24px;
}

.shipments-empty-state h3 {
    margin-top: 18px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
}

.shipments-empty-state p {
    margin-top: 8px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
}

.shipments-empty-state button {
    min-height: 44px;
    margin-top: 18px;
    padding: 0 16px;
    border-radius: 12px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 10px;
    font-weight: 800;
}

.shipments-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.shipments-pagination > button,
.shipments-pagination > div button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    color: rgba(255,255,255,.56);
    background: rgba(255,255,255,.03);
    font-size: 10px;
    font-weight: 700;
}

.shipments-pagination > div {
    display: flex;
    gap: 7px;
}

.shipments-pagination > div button {
    min-width: 38px;
    padding: 0;
}

.shipments-pagination button.active {
    color: #fff;
    background: var(--gradient-button);
}

.shipments-pagination button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* === NEXORA MY SHIPMENTS END === */

/* === CUSTOMER PORTAL STICKY NAV UPDATE START === */

.customer-sidebar {
    overflow: hidden;
}

.customer-sidebar-sticky-top {
    position: sticky;
    top: 0;
    z-index: 3;
    padding-bottom: 12px;
    background:
        linear-gradient(
            180deg,
            rgba(8, 17, 35, 1) 0%,
            rgba(8, 17, 35, .98) 82%,
            rgba(8, 17, 35, 0) 100%
        );
}

.customer-sidebar-scroll-area {
    min-height: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(21, 217, 255, .34) transparent;
}

.customer-sidebar-scroll-area::-webkit-scrollbar {
    width: 5px;
}

.customer-sidebar-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.customer-sidebar-scroll-area::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(21, 217, 255, .28);
}

.customer-dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* === CUSTOMER PORTAL STICKY NAV UPDATE END === */

/* === NEXORA TRACK SHIPMENT START === */

.tracking-dashboard-content {
    padding-top: 30px;
}

.tracking-dashboard-heading {
    max-width: 780px;
}

.tracking-dashboard-tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.14);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

.tracking-dashboard-heading h2 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(36px,3.6vw,54px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.tracking-dashboard-heading p {
    margin-top: 14px;
    color: rgba(255,255,255,.52);
    font-size: 14px;
    line-height: 1.75;
}

.tracking-search-panel {
    margin-top: 24px;
}

.dashboard-tracking-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.dashboard-tracking-input {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 17px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;
    background: rgba(255,255,255,.035);
}

.dashboard-tracking-input i {
    color: var(--cyan);
}

.dashboard-tracking-input input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.dashboard-tracking-input input::placeholder {
    color: rgba(255,255,255,.3);
    text-transform: none;
    letter-spacing: 0;
}

.dashboard-tracking-form button {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 22px;
    border-radius: 15px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 16px 36px rgba(88,92,255,.25);
}

.tracking-search-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 13px;
}

.tracking-search-help span {
    color: rgba(255,255,255,.38);
    font-size: 10px;
}

.tracking-search-help i {
    color: var(--cyan);
}

.tracking-search-help button {
    color: var(--cyan);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
}

.tracking-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(300px,.75fr);
    gap: 18px;
    margin-top: 18px;
}

.tracking-live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--success);
    font-size: 10px;
    font-weight: 800;
}

.tracking-live-status i {
    font-size: 7px;
    box-shadow: 0 0 12px var(--success);
    border-radius: 50%;
}

.tracking-current-card {
    margin-top: 18px;
}

.tracking-current-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.tracking-current-top > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tracking-current-top span,
.tracking-current-top small {
    color: rgba(255,255,255,.34);
    font-size: 10px;
}

.tracking-current-top strong {
    font-size: 15px;
}

.tracking-current-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--cyan) !important;
    background: rgba(21,217,255,.08);
    font-size: 10px !important;
    font-weight: 800;
}

.tracking-map-card {
    position: relative;
    min-height: 330px;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 45%, rgba(115,87,255,.16), transparent 44%),
        linear-gradient(145deg,#081126,#060b17);
}

.tracking-map-grid {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size: 35px 35px;
}

.tracking-map-card svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.tracking-map-card path {
    fill: none;
    stroke: url("#dashboardRouteGradient");
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 12 13;
    animation: dashboardTrackingRoute 8s linear infinite;
}

@keyframes dashboardTrackingRoute {
    to { stroke-dashoffset: -220; }
}

.tracking-map-point {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tracking-map-point.origin {
    left: 7%;
    bottom: 18%;
}

.tracking-map-point.destination {
    right: 7%;
    top: 36%;
    flex-direction: row-reverse;
    text-align: right;
}

.tracking-map-point > span {
    width: 15px;
    height: 15px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 18px var(--cyan);
}

.tracking-map-point.destination > span {
    background: var(--orange);
    box-shadow: 0 0 18px var(--orange);
}

.tracking-map-point > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tracking-map-point strong {
    font-size: 12px;
}

.tracking-map-point small {
    color: rgba(255,255,255,.4);
    font-size: 9px;
}

.tracking-map-vehicle {
    position: absolute;
    z-index: 4;
    left: 46%;
    top: 36%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: var(--gradient-button);
    box-shadow: 0 12px 30px rgba(88,92,255,.4);
    animation: dashboardTrackingPackage 7s ease-in-out infinite alternate;
}

@keyframes dashboardTrackingPackage {
    to {
        transform: translate(82px,-22px) rotate(6deg);
    }
}

.tracking-map-status-card {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 5;
    width: min(320px,calc(100% - 30px));
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    background: rgba(12,20,38,.86);
    box-shadow: 0 18px 40px rgba(0,0,0,.24);
    transform: translateX(-50%);
    backdrop-filter: blur(14px);
}

.tracking-map-status-card > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21,217,255,.09);
}

.tracking-map-status-card > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tracking-map-status-card small,
.tracking-map-status-card p {
    color: rgba(255,255,255,.38);
    font-size: 9px;
}

.tracking-map-status-card strong {
    font-size: 11px;
}

.tracking-route-summary-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-top: 14px;
}

.tracking-route-summary-grid article {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.tracking-route-summary-grid article > span {
    width: 34px;
    height: 34px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.tracking-route-summary-grid article > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tracking-route-summary-grid small,
.tracking-route-summary-grid p {
    color: rgba(255,255,255,.35);
    font-size: 8px;
}

.tracking-route-summary-grid strong {
    font-size: 10px;
}

.tracking-details-panel {
    display: flex;
    flex-direction: column;
}

.tracking-progress-ring {
    position: relative;
    width: 170px;
    height: 170px;
    display: grid;
    place-items: center;
    margin: 26px auto 18px;
}

.tracking-progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.tracking-progress-ring circle {
    fill: none;
    stroke: rgba(255,255,255,.08);
    stroke-width: 10;
}

.tracking-progress-ring circle.progress {
    stroke: var(--cyan);
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 100;
    filter: drop-shadow(0 0 8px rgba(21,217,255,.55));
}

.tracking-progress-ring > div {
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
}

.tracking-progress-ring strong {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 29px;
}

.tracking-progress-ring span {
    color: rgba(255,255,255,.4);
    font-size: 10px;
}

.tracking-detail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tracking-detail-list > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.tracking-detail-list > div > span {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.tracking-detail-list > div > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tracking-detail-list small {
    color: rgba(255,255,255,.35);
    font-size: 9px;
}

.tracking-detail-list strong {
    font-size: 11px;
}

.tracking-download-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
    border: 1px solid rgba(21,217,255,.15);
    border-radius: 13px;
    color: var(--cyan);
    background: rgba(21,217,255,.06);
    font-size: 10px;
    font-weight: 800;
}

.tracking-history-panel {
    grid-column: 1;
}

.tracking-support-panel {
    grid-column: 2;
}

.tracking-history-list {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.tracking-history-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding-bottom: 22px;
}

.tracking-history-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 35px;
    left: 16px;
    width: 2px;
    height: calc(100% - 20px);
    background: rgba(255,255,255,.07);
}

.tracking-history-marker {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 10px;
}

.tracking-history-item.completed .tracking-history-marker {
    color: var(--success);
    background: rgba(23,216,152,.09);
}

.tracking-history-item.active .tracking-history-marker {
    color: var(--cyan);
    background: rgba(21,217,255,.09);
    box-shadow: 0 0 0 5px rgba(21,217,255,.04);
}

.tracking-history-item.pending .tracking-history-marker {
    color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.04);
}

.tracking-history-item > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tracking-history-item > div > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.tracking-history-item strong {
    font-size: 12px;
}

.tracking-history-item small {
    color: rgba(255,255,255,.3);
    font-size: 9px;
}

.tracking-history-item p {
    color: rgba(255,255,255,.43);
    font-size: 10px;
    line-height: 1.55;
}

.tracking-history-item > div > span {
    color: var(--cyan);
    font-size: 9px;
}

.tracking-support-panel {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.tracking-support-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    font-size: 20px;
}

.tracking-support-panel h3 {
    margin-top: 17px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 18px;
}

.tracking-support-panel p {
    margin-top: 10px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
    line-height: 1.7;
}

.tracking-support-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 18px;
}

.tracking-support-actions a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.03);
    font-size: 9px;
    font-weight: 800;
}

/* === NEXORA TRACK SHIPMENT END === */

/* === TRACK PAGE TYPOGRAPHY POLISH START === */

.tracking-history-panel .customer-panel-header h3,
.tracking-support-panel h3 {
    font-size: 21px;
}

.tracking-history-panel .customer-panel-header > div > span {
    font-size: 10px;
}

.tracking-history-item strong {
    font-size: 14px;
}

.tracking-history-item small {
    font-size: 10px;
}

.tracking-history-item p {
    font-size: 12px;
    line-height: 1.65;
}

.tracking-history-item > div > span {
    font-size: 10px;
}

.tracking-support-panel p {
    font-size: 12px;
    line-height: 1.75;
}

.tracking-support-actions a {
    min-height: 48px;
    font-size: 11px;
}

/* === TRACK PAGE TYPOGRAPHY POLISH END === */

/* === NEXORA BOOK SHIPMENT START === */

.booking-dashboard-content {
    padding-top: 30px;
}

.booking-page-heading {
    max-width: 790px;
}

.booking-page-tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.14);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

.booking-page-heading h2 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: clamp(36px,3.6vw,54px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.booking-page-heading p {
    margin-top: 14px;
    color: rgba(255,255,255,.52);
    font-size: 14px;
    line-height: 1.75;
}

.booking-progress {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    gap: 10px;
    align-items: center;
    margin-top: 25px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 19px;
    background: rgba(255,255,255,.028);
}

.booking-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    color: rgba(255,255,255,.42);
    background: transparent;
    text-align: left;
}

.booking-step > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.05);
    font-size: 10px;
    font-weight: 800;
}

.booking-step > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.booking-step strong {
    font-size: 11px;
}

.booking-step small {
    font-size: 8px;
}

.booking-step.active,
.booking-step.completed {
    color: #fff;
}

.booking-step.active > span {
    background: var(--gradient-button);
    box-shadow: 0 8px 20px rgba(88,92,255,.24);
}

.booking-step.completed > span {
    color: var(--success);
    background: rgba(23,216,152,.09);
}

.booking-progress-line {
    height: 2px;
    background: rgba(255,255,255,.07);
}

.booking-layout {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(300px,.65fr);
    gap: 18px;
    margin-top: 18px;
}

.booking-form-panel {
    min-height: 640px;
}

.booking-form-step {
    display: none;
}

.booking-form-step.active {
    display: block;
}

.booking-section-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: flex-start;
}

.booking-section-heading > span {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.booking-section-heading > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-section-heading small {
    color: var(--cyan);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.booking-section-heading h3 {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 20px;
}

.booking-section-heading p {
    color: rgba(255,255,255,.4);
    font-size: 11px;
}

.booking-form-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
    margin-top: 22px;
}

.booking-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.booking-field label {
    font-size: 11px;
    font-weight: 800;
}

.booking-input {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

.booking-input:focus-within {
    border-color: rgba(21,217,255,.28);
    box-shadow: 0 0 0 4px rgba(21,217,255,.04);
}

.booking-input i {
    color: var(--cyan);
}

.booking-input input,
.booking-input select,
.booking-input textarea {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

.booking-input select option {
    color: #fff;
    background: #0f182b;
}

.booking-input.textarea {
    min-height: 120px;
    align-items: flex-start;
    padding-top: 15px;
}

.booking-input textarea {
    resize: vertical;
}

.booking-field-error {
    min-height: 15px;
    color: #ff6c86;
    font-size: 9px;
}

.booking-field.is-error .booking-input {
    border-color: rgba(255,83,112,.4);
}

.booking-service-options {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 22px;
}

.booking-service-card {
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 17px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
}

.booking-service-card.active {
    border-color: rgba(21,217,255,.24);
    background: linear-gradient(145deg,rgba(115,87,255,.12),rgba(21,217,255,.045));
}

.booking-service-card input {
    position: absolute;
    opacity: 0;
}

.booking-service-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

.booking-service-icon.purple { color: var(--primary-light); background: rgba(115,87,255,.1); }
.booking-service-icon.cyan { color: var(--cyan); background: rgba(21,217,255,.08); }
.booking-service-icon.orange { color: var(--orange-light); background: rgba(255,107,44,.08); }

.booking-service-card > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.booking-service-card strong {
    font-size: 13px;
}

.booking-service-card small,
.booking-service-card p {
    color: rgba(255,255,255,.38);
    font-size: 10px;
}

.booking-service-card > i {
    position: absolute;
    top: 15px;
    right: 15px;
    color: rgba(255,255,255,.2);
}

.booking-service-card.active > i {
    color: var(--success);
}

.booking-protection-option {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 12px;
    align-items: center;
    margin-top: 15px;
    padding: 16px;
    border: 1px solid rgba(23,216,152,.12);
    border-radius: 16px;
    background: rgba(23,216,152,.04);
    cursor: pointer;
}

.booking-protection-option input {
    position: absolute;
    opacity: 0;
}

.booking-protection-check {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 7px;
    color: transparent;
}

.booking-protection-option input:checked + .booking-protection-check {
    color: #fff;
    border-color: transparent;
    background: var(--success);
}

.booking-protection-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--success);
    background: rgba(23,216,152,.08);
}

.booking-protection-option > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-protection-option strong {
    font-size: 11px;
}

.booking-protection-option small {
    color: rgba(255,255,255,.38);
    font-size: 9px;
}

.booking-review-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
    margin-top: 22px;
}

.booking-review-grid article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: center;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
}

.booking-review-grid article > span {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.booking-review-grid article > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-review-grid small,
.booking-review-grid p {
    color: rgba(255,255,255,.36);
    font-size: 9px;
}

.booking-review-grid strong {
    font-size: 11px;
}

.booking-confirmation-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
}

.booking-confirmation-check input {
    position: absolute;
    opacity: 0;
}

.booking-confirmation-check > span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 7px;
    color: transparent;
}

.booking-confirmation-check input:checked + span {
    color: #fff;
    border-color: transparent;
    background: var(--gradient-button);
}

.booking-confirmation-check p {
    color: rgba(255,255,255,.48);
    font-size: 10px;
    line-height: 1.6;
}

.booking-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.booking-back-button,
.booking-next-button,
.booking-submit-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 17px;
    border-radius: 13px;
    font-size: 10px;
    font-weight: 800;
}

.booking-back-button {
    color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.04);
}

.booking-back-button:disabled {
    opacity: .3;
}

.booking-next-button,
.booking-submit-button {
    margin-left: auto;
    color: #fff;
    background: var(--gradient-button);
}

.booking-submit-button {
    display: none;
    background: linear-gradient(135deg,#18c98d,#12b77d);
}

.booking-summary-panel {
    position: sticky;
    top: 100px;
    align-self: start;
}

.booking-summary-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--success) !important;
    font-size: 9px !important;
    font-weight: 800;
}

.booking-summary-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
}

.booking-summary-route > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-summary-route > div:last-child {
    text-align: right;
}

.booking-summary-route small {
    color: rgba(255,255,255,.34);
    font-size: 8px;
}

.booking-summary-route strong {
    font-size: 10px;
}

.booking-summary-route > span {
    color: var(--cyan);
}

.booking-summary-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 18px;
}

.booking-summary-list > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: rgba(255,255,255,.45);
    font-size: 10px;
}

.booking-summary-list strong {
    color: #fff;
}

.booking-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.booking-summary-total > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-summary-total span {
    font-size: 11px;
    font-weight: 800;
}

.booking-summary-total small {
    color: rgba(255,255,255,.32);
    font-size: 8px;
}

.booking-summary-total > strong {
    color: var(--cyan);
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 24px;
}

.booking-summary-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    margin-top: 18px;
    padding: 12px;
    border-radius: 13px;
    color: rgba(255,255,255,.4);
    background: rgba(21,217,255,.04);
}

.booking-summary-note i {
    color: var(--cyan);
}

.booking-summary-note p {
    font-size: 9px;
    line-height: 1.5;
}

/* === NEXORA BOOK SHIPMENT END === */

/* === NEXORA SAVED ADDRESSES START === */

.addresses-dashboard-content { padding-top: 30px; }

.addresses-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.addresses-page-heading > div { max-width: 760px; }

.addresses-page-tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.14);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

.addresses-page-heading h2 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: clamp(36px,3.6vw,54px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.addresses-page-heading p {
    margin-top: 14px;
    color: rgba(255,255,255,.52);
    font-size: 14px;
    line-height: 1.75;
}

.addresses-page-heading > button {
    flex-shrink: 0;
    border: 0;
}

.addresses-summary-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
    margin-top: 26px;
}

.addresses-summary-grid article {
    min-height: 130px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 19px;
    background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.024));
}

.addresses-summary-grid article > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.addresses-summary-grid article > span.purple { color: var(--primary-light); background: rgba(115,87,255,.1); }
.addresses-summary-grid article > span.cyan { color: var(--cyan); background: rgba(21,217,255,.08); }
.addresses-summary-grid article > span.orange { color: var(--orange-light); background: rgba(255,107,44,.08); }
.addresses-summary-grid article > span.green { color: var(--success); background: rgba(23,216,152,.08); }

.addresses-summary-grid article > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.addresses-summary-grid strong {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 25px;
}

.addresses-summary-grid p {
    font-size: 12px;
    font-weight: 800;
}

.addresses-summary-grid small {
    color: rgba(255,255,255,.36);
    font-size: 10px;
}

.addresses-management-panel { margin-top: 18px; }

.addresses-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.addresses-search-box {
    min-height: 52px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

.addresses-search-box i { color: var(--cyan); }

.addresses-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

.addresses-search-box input::placeholder { color: rgba(255,255,255,.3); }

.addresses-toolbar select {
    min-width: 190px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    outline: 0;
    color: rgba(255,255,255,.72);
    background: #0f182b;
    font-size: 11px;
    font-weight: 700;
}

.addresses-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-top: 20px;
}

.saved-address-card {
    position: relative;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
    transition: .3s ease;
}

.saved-address-card:hover {
    transform: translateY(-4px);
    border-color: rgba(21,217,255,.16);
    background: linear-gradient(145deg,rgba(115,87,255,.07),rgba(21,217,255,.025));
}

.saved-address-card.default {
    border-color: rgba(23,216,152,.16);
}

.saved-address-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.saved-address-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.saved-address-icon.home { color: var(--primary-light); background: rgba(115,87,255,.1); }
.saved-address-icon.office { color: var(--cyan); background: rgba(21,217,255,.08); }
.saved-address-icon.warehouse { color: var(--orange-light); background: rgba(255,107,44,.08); }
.saved-address-icon.other { color: var(--success); background: rgba(23,216,152,.08); }

.saved-address-default {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--success);
    background: rgba(23,216,152,.08);
    font-size: 9px;
    font-weight: 800;
}

.saved-address-menu {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-left: auto;
    border-radius: 10px;
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.04);
}

.saved-address-content {
    margin-top: 16px;
}

.saved-address-content > span {
    color: var(--cyan);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.saved-address-content h3 {
    margin-top: 6px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 17px;
}

.saved-address-content p {
    margin-top: 8px;
    color: rgba(255,255,255,.44);
    font-size: 11px;
    line-height: 1.65;
}

.saved-address-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.saved-address-contact span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
}

.saved-address-contact i { color: var(--cyan); }

.saved-address-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    margin-top: 15px;
}

.saved-address-actions button {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
}

.edit-address-button {
    color: rgba(255,255,255,.66);
    background: rgba(255,255,255,.04);
}

.use-address-button {
    color: var(--cyan);
    background: rgba(21,217,255,.07);
}

.addresses-empty-state {
    display: none;
    align-items: center;
    flex-direction: column;
    padding: 56px 20px;
    text-align: center;
}

.addresses-empty-state.show { display: flex; }

.addresses-empty-state > span {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    font-size: 24px;
}

.addresses-empty-state h3 {
    margin-top: 17px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 20px;
}

.addresses-empty-state p {
    margin-top: 8px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
}

.addresses-empty-state button {
    min-height: 43px;
    margin-top: 17px;
    padding: 0 15px;
    border-radius: 12px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 10px;
    font-weight: 800;
}

/* Modal */
.address-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    transition: .3s ease;
}

.address-modal.show {
    visibility: visible;
    opacity: 1;
}

.address-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2,6,15,.72);
    backdrop-filter: blur(8px);
}

.address-modal-card {
    position: relative;
    z-index: 2;
    width: min(720px,calc(100% - 28px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(145deg,#111b30,#0a1223);
    box-shadow: 0 35px 90px rgba(0,0,0,.45);
}

.address-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.address-modal-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.address-modal-header span {
    color: var(--cyan);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.address-modal-header h2 {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 22px;
}

.address-modal-header > button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: rgba(255,255,255,.66);
    background: rgba(255,255,255,.05);
}

.address-form-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
    margin-top: 22px;
}

.address-form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.address-form-field.full-width { grid-column: 1 / -1; }

.address-form-field label {
    font-size: 11px;
    font-weight: 800;
}

.address-form-input {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
}

.address-form-input i { color: var(--cyan); }

.address-form-input input,
.address-form-input select {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

.address-form-input select option {
    color: #fff;
    background: #0f182b;
}

.address-form-error {
    min-height: 14px;
    color: #ff6c86;
    font-size: 9px;
}

.address-form-field.is-error .address-form-input {
    border-color: rgba(255,83,112,.4);
}

.address-default-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: rgba(255,255,255,.56);
    font-size: 10px;
    cursor: pointer;
}

.address-default-check input {
    position: absolute;
    opacity: 0;
}

.address-default-check > span {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 7px;
    color: transparent;
}

.address-default-check input:checked + span {
    color: #fff;
    border-color: transparent;
    background: var(--gradient-button);
}

.address-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.address-modal-actions button {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
}

.address-cancel-button {
    color: rgba(255,255,255,.64);
    background: rgba(255,255,255,.04);
}

.address-save-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: var(--gradient-button);
}

/* === NEXORA SAVED ADDRESSES END === */

/* === NEXORA INVOICES START === */

.invoices-dashboard-content { padding-top: 30px; }

.invoices-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.invoices-page-heading > div { max-width: 760px; }

.invoices-page-tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.14);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

.invoices-page-heading h2 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: clamp(36px,3.6vw,54px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.invoices-page-heading p {
    margin-top: 14px;
    color: rgba(255,255,255,.52);
    font-size: 14px;
    line-height: 1.75;
}

.invoices-page-heading > button {
    flex-shrink: 0;
    border: 0;
}

.invoices-summary-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
    margin-top: 26px;
}

.invoices-summary-grid article {
    min-height: 130px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 19px;
    background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.024));
}

.invoices-summary-grid article > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.invoices-summary-grid article > span.purple { color: var(--primary-light); background: rgba(115,87,255,.1); }
.invoices-summary-grid article > span.green { color: var(--success); background: rgba(23,216,152,.08); }
.invoices-summary-grid article > span.orange { color: var(--orange-light); background: rgba(255,107,44,.08); }
.invoices-summary-grid article > span.cyan { color: var(--cyan); background: rgba(21,217,255,.08); }

.invoices-summary-grid article > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invoices-summary-grid strong {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 24px;
}

.invoices-summary-grid p {
    font-size: 12px;
    font-weight: 800;
}

.invoices-summary-grid small {
    color: rgba(255,255,255,.36);
    font-size: 10px;
}

.invoices-management-panel { margin-top: 18px; }

.invoices-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.invoices-search-box {
    min-height: 52px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

.invoices-search-box i { color: var(--cyan); }

.invoices-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

.invoices-search-box input::placeholder { color: rgba(255,255,255,.3); }

.invoices-toolbar-actions {
    display: flex;
    gap: 10px;
}

.invoices-toolbar-actions select {
    min-width: 155px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    outline: 0;
    color: rgba(255,255,255,.72);
    background: #0f182b;
    font-size: 11px;
    font-weight: 700;
}

.invoices-table-wrap {
    margin-top: 20px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(21,217,255,.38) rgba(255,255,255,.05);
}

.invoices-table-wrap::-webkit-scrollbar { height: 7px; }
.invoices-table-wrap::-webkit-scrollbar-track { border-radius: 999px; background: rgba(255,255,255,.05); }
.invoices-table-wrap::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient(90deg,#7357ff,#15d9ff); }

.invoices-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
}

.invoices-table th {
    padding: 0 12px 12px;
    color: rgba(255,255,255,.3);
    font-size: 10px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.invoices-table td {
    padding: 15px 12px;
    border-top: 1px solid rgba(255,255,255,.055);
    color: rgba(255,255,255,.58);
    font-size: 11px;
}

.invoices-table td:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invoices-table td:first-child strong,
.invoices-table td:nth-child(4) strong {
    color: #fff;
    font-size: 12px;
}

.invoices-table td:first-child small {
    color: rgba(255,255,255,.32);
    font-size: 9px;
}

.invoices-table td i {
    margin-inline: 5px;
    color: var(--cyan);
    font-size: 8px;
}

.invoice-payment-method {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.invoice-payment-method i {
    margin: 0 !important;
    font-size: 16px !important;
}

.invoice-status {
    display: inline-flex;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
}

.invoice-status.paid { color: var(--success); background: rgba(23,216,152,.08); }
.invoice-status.pending { color: var(--orange-light); background: rgba(255,107,44,.08); }
.invoice-status.refunded { color: var(--primary-light); background: rgba(115,87,255,.09); }

.invoice-row-action {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
}

.invoice-pay-button {
    min-height: 34px;
    padding: 0 11px;
    border-radius: 9px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 9px;
    font-weight: 800;
}

.invoices-empty-state {
    display: none;
    align-items: center;
    flex-direction: column;
    padding: 56px 20px;
    text-align: center;
}

.invoices-empty-state.show { display: flex; }

.invoices-empty-state > span {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    font-size: 24px;
}

.invoices-empty-state h3 {
    margin-top: 17px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 20px;
}

.invoices-empty-state p {
    margin-top: 8px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
}

.invoices-empty-state button {
    min-height: 43px;
    margin-top: 17px;
    padding: 0 15px;
    border-radius: 12px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 10px;
    font-weight: 800;
}

.invoices-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr);
    gap: 18px;
    margin-top: 18px;
}

.payment-methods-panel .customer-panel-header > button {
    color: var(--cyan);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
}

.payment-method-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 18px;
}

.payment-method-list article {
    min-height: 68px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.payment-method-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 18px;
}

.payment-method-icon.visa { color: #6ea4ff; background: rgba(66,133,244,.09); }
.payment-method-icon.mastercard { color: #ff9966; background: rgba(255,153,102,.08); }
.payment-method-icon.bank { color: var(--cyan); background: rgba(21,217,255,.08); }

.payment-method-list article > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payment-method-list strong { font-size: 12px; }
.payment-method-list small { color: rgba(255,255,255,.35); font-size: 9px; }

.payment-default-badge {
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--success);
    background: rgba(23,216,152,.08);
    font-size: 8px;
    font-weight: 800;
}

.payment-method-list article > button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.04);
}

.billing-support-panel {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.billing-support-panel > span {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    font-size: 20px;
}

.billing-support-panel h3 {
    margin-top: 17px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 19px;
}

.billing-support-panel p {
    margin-top: 10px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
    line-height: 1.7;
}

.billing-support-panel button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 17px;
    padding: 0 15px;
    border-radius: 12px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

/* === NEXORA INVOICES END === */

/* === NEXORA NOTIFICATIONS START === */

.notifications-dashboard-content { padding-top: 30px; }

.notifications-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.notifications-page-heading > div { max-width: 760px; }

.notifications-page-tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.14);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

.notifications-page-heading h2 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: clamp(36px,3.6vw,54px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.notifications-page-heading p {
    margin-top: 14px;
    color: rgba(255,255,255,.52);
    font-size: 14px;
    line-height: 1.75;
}

.notifications-page-heading > button {
    flex-shrink: 0;
    border: 0;
}

.notifications-summary-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
    margin-top: 26px;
}

.notifications-summary-grid article {
    min-height: 130px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 19px;
    background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.024));
    cursor: pointer;
    transition: .3s ease;
}

.notifications-summary-grid article:hover,
.notifications-summary-grid article.active {
    transform: translateY(-4px);
    border-color: rgba(21,217,255,.18);
    background: linear-gradient(145deg,rgba(115,87,255,.11),rgba(21,217,255,.04));
}

.notifications-summary-grid article > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.notifications-summary-grid article > span.purple { color: var(--primary-light); background: rgba(115,87,255,.1); }
.notifications-summary-grid article > span.cyan { color: var(--cyan); background: rgba(21,217,255,.08); }
.notifications-summary-grid article > span.orange { color: var(--orange-light); background: rgba(255,107,44,.08); }
.notifications-summary-grid article > span.green { color: var(--success); background: rgba(23,216,152,.08); }

.notifications-summary-grid article > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notifications-summary-grid strong {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 25px;
}

.notifications-summary-grid p {
    font-size: 12px;
    font-weight: 800;
}

.notifications-summary-grid small {
    color: rgba(255,255,255,.36);
    font-size: 10px;
}

.notifications-layout {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr);
    gap: 18px;
    margin-top: 18px;
}

.notifications-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notifications-search-box {
    min-height: 52px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

.notifications-search-box i { color: var(--cyan); }

.notifications-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

.notifications-search-box input::placeholder { color: rgba(255,255,255,.3); }

.notifications-toolbar select {
    min-width: 190px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    outline: 0;
    color: rgba(255,255,255,.72);
    background: #0f182b;
    font-size: 11px;
    font-weight: 700;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 18px;
}

.notification-item {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 12px;
    align-items: flex-start;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    background: rgba(255,255,255,.022);
    transition: .3s ease;
}

.notification-item:hover {
    transform: translateX(4px);
    border-color: rgba(21,217,255,.14);
}

.notification-item.unread {
    border-color: rgba(21,217,255,.12);
    background: linear-gradient(145deg,rgba(21,217,255,.045),rgba(115,87,255,.035));
}

.notification-select {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    background: transparent;
}

.notification-select span {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: transparent;
}

.notification-select.selected {
    border-color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.notification-select.selected span {
    background: var(--cyan);
}

.notification-item-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.notification-item-icon.shipment { color: var(--cyan); background: rgba(21,217,255,.08); }
.notification-item-icon.shipment.delivered { color: var(--success); background: rgba(23,216,152,.08); }
.notification-item-icon.payment { color: var(--primary-light); background: rgba(115,87,255,.09); }
.notification-item-icon.account { color: var(--orange-light); background: rgba(255,107,44,.08); }
.notification-item-icon.system { color: #ffcc66; background: rgba(255,204,102,.08); }

.notification-item-content {
    min-width: 0;
}

.notification-item-content > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-item-content strong {
    font-size: 13px;
}

.notification-unread-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 11px var(--cyan);
}

.notification-item-content p {
    margin-top: 7px;
    color: rgba(255,255,255,.45);
    font-size: 11px;
    line-height: 1.65;
}

.notification-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 9px;
}

.notification-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.3);
    font-size: 9px;
}

.notification-meta i { color: var(--cyan); }

.notification-menu-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: rgba(255,255,255,.42);
    background: rgba(255,255,255,.04);
}

.notifications-empty-state {
    display: none;
    align-items: center;
    flex-direction: column;
    padding: 56px 20px;
    text-align: center;
}

.notifications-empty-state.show { display: flex; }

.notifications-empty-state > span {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    font-size: 24px;
}

.notifications-empty-state h3 {
    margin-top: 17px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 20px;
}

.notifications-empty-state p {
    margin-top: 8px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
}

.notifications-empty-state button {
    min-height: 43px;
    margin-top: 17px;
    padding: 0 15px;
    border-radius: 12px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 10px;
    font-weight: 800;
}

.notification-preference-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 18px;
}

.notification-preference-list label {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
}

.notification-preference-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
}

.notification-preference-icon.shipment { color: var(--cyan); background: rgba(21,217,255,.08); }
.notification-preference-icon.payment { color: var(--primary-light); background: rgba(115,87,255,.09); }
.notification-preference-icon.account { color: var(--orange-light); background: rgba(255,107,44,.08); }
.notification-preference-icon.system { color: #ffcc66; background: rgba(255,204,102,.08); }

.notification-preference-list label > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notification-preference-list strong { font-size: 11px; }
.notification-preference-list small { color: rgba(255,255,255,.35); font-size: 9px; line-height: 1.45; }

.notification-preference-list input {
    position: absolute;
    opacity: 0;
}

.notification-switch {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    transition: .25s ease;
}

.notification-switch::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transition: .25s ease;
}

.notification-preference-list input:checked + .notification-switch {
    background: var(--gradient-button);
}

.notification-preference-list input:checked + .notification-switch::after {
    left: 22px;
    background: #fff;
}

.save-notification-settings {
    width: 100%;
    min-height: 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    border-radius: 13px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 10px;
    font-weight: 800;
}

/* === NEXORA NOTIFICATIONS END === */

/* === NEXORA SUPPORT START === */

.support-dashboard-content { padding-top: 30px; }

.support-hero {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 24px;
    align-items: center;
    min-height: 285px;
    padding: 32px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 25px;
    background:
        radial-gradient(circle at 90% 5%,rgba(21,217,255,.12),transparent 30%),
        linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
}

.support-page-tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.14);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

.support-hero h2 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: clamp(36px,3.6vw,54px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.support-hero p {
    max-width: 690px;
    margin-top: 14px;
    color: rgba(255,255,255,.5);
    font-size: 14px;
    line-height: 1.75;
}

.support-search-box {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 22px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    background: rgba(4,9,21,.34);
}

.support-search-box i { color: var(--cyan); }

.support-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

.support-search-box input::placeholder { color: rgba(255,255,255,.3); }

.support-hero-status {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 180px;
    padding: 22px;
    border: 1px solid rgba(23,216,152,.12);
    border-radius: 22px;
    background: linear-gradient(145deg,rgba(23,216,152,.07),rgba(21,217,255,.035));
    text-align: center;
}

.support-hero-status > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--success);
    font-size: 10px;
    font-weight: 800;
}

.support-hero-status > span i {
    font-size: 7px;
    box-shadow: 0 0 12px var(--success);
    border-radius: 50%;
}

.support-hero-status strong {
    margin-top: 18px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 19px;
}

.support-hero-status p {
    margin-top: 6px;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 800;
}

.support-channel-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
    margin-top: 18px;
}

.support-channel-grid article {
    min-height: 190px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 19px;
    background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.024));
}

.support-channel-grid article > span {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.support-channel-grid article > span.cyan { color: var(--cyan); background: rgba(21,217,255,.08); }
.support-channel-grid article > span.green { color: var(--success); background: rgba(23,216,152,.08); }
.support-channel-grid article > span.purple { color: var(--primary-light); background: rgba(115,87,255,.1); }
.support-channel-grid article > span.orange { color: var(--orange-light); background: rgba(255,107,44,.08); }

.support-channel-grid article > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 14px;
}

.support-channel-grid strong { font-size: 14px; }
.support-channel-grid p { color: rgba(255,255,255,.4); font-size: 10px; line-height: 1.55; }

.support-channel-grid button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    color: var(--cyan);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
}

.support-layout {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr);
    gap: 18px;
    margin-top: 18px;
}

.support-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.support-faq-item {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.support-faq-item > button {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 0 15px;
    color: #fff;
    background: transparent;
    text-align: left;
    font-size: 12px;
    font-weight: 800;
}

.support-faq-item > button i {
    color: var(--cyan);
    transition: transform .3s ease;
}

.support-faq-item.open > button i { transform: rotate(45deg); }

.support-faq-item > div {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.support-faq-item > div p {
    padding: 0 15px 16px;
    color: rgba(255,255,255,.44);
    font-size: 11px;
    line-height: 1.7;
}

.support-no-results {
    display: none;
    align-items: center;
    flex-direction: column;
    padding: 50px 20px;
    text-align: center;
}

.support-no-results.show { display: flex; }

.support-no-results > span {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    font-size: 22px;
}

.support-no-results h3 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 19px;
}

.support-no-results p {
    margin-top: 8px;
    color: rgba(255,255,255,.4);
    font-size: 10px;
}

.support-ticket-summary .customer-panel-header > button {
    color: var(--cyan);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
}

.support-ticket-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 18px;
}

.support-ticket-list article {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.support-ticket-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
}

.support-ticket-icon.open { color: var(--cyan); background: rgba(21,217,255,.08); }
.support-ticket-icon.resolved { color: var(--success); background: rgba(23,216,152,.08); }
.support-ticket-icon.waiting { color: var(--orange-light); background: rgba(255,107,44,.08); }

.support-ticket-list article > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.support-ticket-list strong { font-size: 11px; }
.support-ticket-list p,
.support-ticket-list small { color: rgba(255,255,255,.34); font-size: 9px; }

.support-ticket-status {
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 800;
}

.support-ticket-status.open { color: var(--cyan); background: rgba(21,217,255,.08); }
.support-ticket-status.resolved { color: var(--success); background: rgba(23,216,152,.08); }
.support-ticket-status.waiting { color: var(--orange-light); background: rgba(255,107,44,.08); }

/* Ticket Modal */
.support-ticket-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    transition: .3s ease;
}

.support-ticket-modal.show {
    visibility: visible;
    opacity: 1;
}

.support-ticket-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2,6,15,.72);
    backdrop-filter: blur(8px);
}

.support-ticket-modal-card {
    position: relative;
    z-index: 2;
    width: min(760px,calc(100% - 28px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(145deg,#111b30,#0a1223);
    box-shadow: 0 35px 90px rgba(0,0,0,.45);
}

.support-ticket-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.support-ticket-modal-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.support-ticket-modal-header span {
    color: var(--cyan);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.support-ticket-modal-header h2 {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 22px;
}

.support-ticket-modal-header > button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: rgba(255,255,255,.66);
    background: rgba(255,255,255,.05);
}

.support-ticket-form-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
    margin-top: 22px;
}

.support-ticket-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.support-ticket-field.full-width { grid-column: 1 / -1; }

.support-ticket-field label {
    font-size: 11px;
    font-weight: 800;
}

.support-ticket-input {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
}

.support-ticket-input i { color: var(--cyan); }

.support-ticket-input input,
.support-ticket-input select,
.support-ticket-input textarea {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

.support-ticket-input select option {
    color: #fff;
    background: #0f182b;
}

.support-ticket-input.textarea {
    min-height: 150px;
    align-items: flex-start;
    padding-top: 15px;
}

.support-ticket-input textarea { resize: vertical; }

.support-ticket-error {
    min-height: 14px;
    color: #ff6c86;
    font-size: 9px;
}

.support-ticket-field.is-error .support-ticket-input {
    border-color: rgba(255,83,112,.4);
}

.support-attachment {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: center;
    margin-top: 13px;
    padding: 14px;
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 14px;
    cursor: pointer;
}

.support-attachment input {
    position: absolute;
    opacity: 0;
}

.support-attachment > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.support-attachment > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.support-attachment strong { font-size: 11px; }
.support-attachment small { color: rgba(255,255,255,.35); font-size: 9px; }

.support-ticket-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.support-ticket-actions button {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
}

.support-ticket-actions button:first-child {
    color: rgba(255,255,255,.64);
    background: rgba(255,255,255,.04);
}

.support-ticket-actions button:last-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: var(--gradient-button);
}

/* === NEXORA SUPPORT END === */

/* === NEXORA PROFILE SETTINGS START === */

.profile-settings-content { padding-top: 30px; }

.profile-settings-heading { max-width: 790px; }

.profile-settings-tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.14);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

.profile-settings-heading h2 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: clamp(36px,3.6vw,54px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.profile-settings-heading p {
    margin-top: 14px;
    color: rgba(255,255,255,.52);
    font-size: 14px;
    line-height: 1.75;
}

.profile-settings-layout {
    display: grid;
    grid-template-columns: minmax(280px,.55fr) minmax(0,1.45fr);
    gap: 18px;
    margin-top: 24px;
}

.profile-settings-tabs-panel {
    align-self: start;
    position: sticky;
    top: 100px;
}

.profile-summary-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.profile-photo-wrap {
    position: relative;
}

.profile-large-avatar {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 21px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 16px 35px rgba(88,92,255,.28);
}

.profile-photo-wrap button {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 3px solid #0b1426;
    border-radius: 9px;
    color: #fff;
    background: var(--cyan);
    font-size: 9px;
}

.profile-summary-card > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-summary-card h3 {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 17px;
}

.profile-summary-card p {
    overflow: hidden;
    color: rgba(255,255,255,.38);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-summary-card > div:last-child > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--success);
    font-size: 9px;
    font-weight: 800;
}

.profile-settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.profile-settings-tabs > button {
    min-height: 66px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: rgba(255,255,255,.5);
    background: transparent;
    text-align: left;
    transition: .3s ease;
}

.profile-settings-tabs > button:hover,
.profile-settings-tabs > button.active {
    color: #fff;
    border-color: rgba(21,217,255,.12);
    background: linear-gradient(145deg,rgba(115,87,255,.11),rgba(21,217,255,.04));
}

.profile-settings-tabs > button > span {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
}

.profile-settings-tabs > button > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-settings-tabs strong { font-size: 11px; }
.profile-settings-tabs small { color: rgba(255,255,255,.32); font-size: 8px; }
.profile-settings-tabs > button > i { color: rgba(255,255,255,.25); font-size: 9px; }

.profile-completion-card {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(23,216,152,.1);
    border-radius: 14px;
    background: rgba(23,216,152,.04);
}

.profile-completion-card > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.profile-completion-card span,
.profile-completion-card strong { font-size: 10px; }
.profile-completion-card strong { color: var(--success); }

.profile-completion-track {
    height: 5px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.profile-completion-track span {
    display: block;
    width: 86%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--success),var(--cyan));
}

.profile-completion-card p {
    margin-top: 9px;
    color: rgba(255,255,255,.34);
    font-size: 9px;
    line-height: 1.55;
}

.profile-settings-panels { min-width: 0; }

.profile-settings-panel { display: none; }
.profile-settings-panel.active { display: block; }

.profile-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.profile-panel-header > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.profile-panel-header > div > span {
    color: var(--cyan);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.profile-panel-header h3 {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 21px;
}

.profile-panel-header p {
    color: rgba(255,255,255,.4);
    font-size: 11px;
    line-height: 1.6;
}

.profile-panel-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border-radius: 8px;
    color: var(--success);
    background: rgba(23,216,152,.08);
    font-size: 9px;
    font-weight: 800;
}

.profile-settings-form { margin-top: 22px; }

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
}

.profile-form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.profile-form-field.full-width { grid-column: 1 / -1; }

.profile-form-field label {
    font-size: 11px;
    font-weight: 800;
}

.profile-form-input {
    min-height: 53px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
}

.profile-form-input:focus-within {
    border-color: rgba(21,217,255,.28);
    box-shadow: 0 0 0 4px rgba(21,217,255,.04);
}

.profile-form-input > i { color: var(--cyan); }

.profile-form-input input,
.profile-form-input select {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

.profile-form-input select option {
    color: #fff;
    background: #0f182b;
}

.profile-form-error {
    min-height: 14px;
    color: #ff6c86;
    font-size: 9px;
}

.profile-form-field.is-error .profile-form-input {
    border-color: rgba(255,83,112,.4);
}

.profile-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.profile-form-actions button,
.profile-save-button {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
}

.profile-cancel-button {
    color: rgba(255,255,255,.62);
    background: rgba(255,255,255,.04);
}

.profile-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    background: var(--gradient-button);
}

.profile-save-button.full-button {
    width: 100%;
    margin-top: 14px;
}

.security-settings-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
    margin-top: 22px;
}

.security-password-card,
.security-options-card,
.active-sessions-card {
    padding: 17px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.security-password-card {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.security-card-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: center;
}

.security-card-heading > span {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.security-card-heading > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.security-card-heading h4 { font-size: 13px; }
.security-card-heading p { color: rgba(255,255,255,.35); font-size: 9px; line-height: 1.45; }

.profile-password-toggle {
    width: 34px;
    height: 34px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 9px;
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.04);
}

.security-options-card {
    display: flex;
    flex-direction: column;
}

.security-setting-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 13px;
    background: rgba(255,255,255,.02);
    cursor: pointer;
}

.security-setting-row > span:first-child {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
}

.security-setting-row > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.security-setting-row strong { font-size: 10px; }
.security-setting-row small { color: rgba(255,255,255,.34); font-size: 8px; line-height: 1.45; }

.security-setting-row input {
    position: absolute;
    opacity: 0;
}

.profile-setting-switch {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    transition: .25s ease;
}

.profile-setting-switch::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transition: .25s ease;
}

.security-setting-row input:checked + .profile-setting-switch {
    background: var(--gradient-button);
}

.security-setting-row input:checked + .profile-setting-switch::after {
    left: 22px;
    background: #fff;
}

.active-sessions-card { margin-top: 15px; }

.active-session-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.active-session-list article {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 13px;
    background: rgba(255,255,255,.02);
}

.active-session-list article > span:first-child {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.active-session-list article > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.active-session-list strong { font-size: 10px; }
.active-session-list small { color: rgba(255,255,255,.34); font-size: 8px; }

.current-session-badge {
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--success);
    background: rgba(23,216,152,.08);
    font-size: 8px;
    font-weight: 800;
}

.revoke-session-button {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    color: #ff7f94;
    background: rgba(255,83,112,.07);
    font-size: 8px;
    font-weight: 800;
}

.profile-preference-switches {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
    margin-top: 15px;
}

.privacy-settings-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 22px;
}

.privacy-settings-list article {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.privacy-settings-list article.danger {
    border-color: rgba(255,83,112,.1);
}

.privacy-setting-icon {
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

.privacy-setting-icon.cyan { color: var(--cyan); background: rgba(21,217,255,.08); }
.privacy-setting-icon.purple { color: var(--primary-light); background: rgba(115,87,255,.09); }
.privacy-setting-icon.danger { color: #ff7f94; background: rgba(255,83,112,.08); }

.privacy-settings-list article > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.privacy-settings-list strong { font-size: 12px; }
.privacy-settings-list p { color: rgba(255,255,255,.37); font-size: 9px; line-height: 1.5; }

.privacy-settings-list button {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 9px;
    font-weight: 800;
}

.privacy-settings-list article.danger button {
    color: #ff7f94;
    background: rgba(255,83,112,.07);
}

/* Photo modal */
.profile-photo-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    transition: .3s ease;
}

.profile-photo-modal.show {
    visibility: visible;
    opacity: 1;
}

.profile-photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2,6,15,.72);
    backdrop-filter: blur(8px);
}

.profile-photo-modal-card {
    position: relative;
    z-index: 2;
    width: min(520px,calc(100% - 28px));
    padding: 24px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(145deg,#111b30,#0a1223);
    box-shadow: 0 35px 90px rgba(0,0,0,.45);
}

.profile-photo-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.profile-photo-modal-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-photo-modal-header span {
    color: var(--cyan);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.profile-photo-modal-header h2 {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 21px;
}

.profile-photo-modal-header > button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: rgba(255,255,255,.66);
    background: rgba(255,255,255,.05);
}

.profile-photo-upload-area {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 22px;
}

.profile-photo-preview {
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 28px;
    font-weight: 800;
}

.profile-photo-upload-area label {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: center;
    margin-top: 18px;
    padding: 15px;
    border: 1px dashed rgba(255,255,255,.14);
    border-radius: 14px;
    cursor: pointer;
}

.profile-photo-upload-area input {
    position: absolute;
    opacity: 0;
}

.profile-photo-upload-area label > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.profile-photo-upload-area label > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-photo-upload-area strong { font-size: 11px; }
.profile-photo-upload-area small { color: rgba(255,255,255,.35); font-size: 9px; }

.profile-photo-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.profile-photo-actions button {
    min-height: 45px;
    padding: 0 15px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
}

.profile-photo-actions button:first-child {
    color: rgba(255,255,255,.62);
    background: rgba(255,255,255,.04);
}

.profile-photo-actions button:last-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: var(--gradient-button);
}

/* === NEXORA PROFILE SETTINGS END === */


/* === AUTH BACKEND ALERTS START === */

.auth-server-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    font-size: 11px;
    line-height: 1.55;
}

.auth-server-alert.success {
    color: #7ee8bf;
    border-color: rgba(23,216,152,.18);
    background: rgba(23,216,152,.07);
}

.auth-server-alert.error {
    color: #ff9aac;
    border-color: rgba(255,83,112,.2);
    background: rgba(255,83,112,.07);
}

.auth-server-alert i {
    margin-top: 2px;
}

/* === AUTH BACKEND ALERTS END === */


/* === DYNAMIC DASHBOARD EMPTY STATES START === */

.customer-dashboard-empty-state {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 260px;
    padding: 34px 22px;
    text-align: center;
}

.customer-dashboard-empty-state.compact {
    min-height: 250px;
}

.customer-dashboard-empty-state.table-empty {
    min-height: 230px;
}

.customer-dashboard-empty-state > span {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    font-size: 23px;
}

.customer-dashboard-empty-state h3 {
    margin-top: 17px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
}

.customer-dashboard-empty-state p {
    max-width: 390px;
    margin-top: 8px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
    line-height: 1.65;
}

.customer-dashboard-empty-state a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 17px;
    padding: 0 15px;
    border-radius: 12px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 10px;
    font-weight: 800;
}

.customer-empty-table-row td {
    padding: 0 !important;
}

.customer-empty-table-row:hover {
    background: transparent !important;
}

/* === DYNAMIC DASHBOARD EMPTY STATES END === */


.customer-welcome-package-empty {
    border-color: rgba(21,217,255,.12);
    background: rgba(8,16,31,.54);
}

.customer-welcome-package-empty p {
    color: rgba(255,255,255,.44);
}


/* === BOOK SHIPMENT BACKEND ALERTS START === */

.booking-server-alert,
.dashboard-success-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px 15px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.6;
}

.booking-server-alert {
    color: #ff9aac;
    border: 1px solid rgba(255,83,112,.2);
    background: rgba(255,83,112,.07);
}

.dashboard-success-alert {
    color: #7ee8bf;
    border: 1px solid rgba(23,216,152,.18);
    background: rgba(23,216,152,.07);
}

.booking-server-alert i,
.dashboard-success-alert i {
    margin-top: 2px;
}

/* === BOOK SHIPMENT BACKEND ALERTS END === */


/* === LIVE MY SHIPMENTS & DETAILS START === */

.shipment-record-open {
    text-decoration: none;
}

.shipment-record-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    padding: 13px 16px;
    border-top: 1px solid rgba(255,255,255,.055);
    color: rgba(255,255,255,.42);
    font-size: 9px;
}

.shipment-record-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.shipment-record-footer i {
    color: var(--cyan);
}

.shipment-record-footer strong {
    margin-left: auto;
    color: #fff;
    font-size: 11px;
}

.shipments-live-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 360px;
    padding: 40px 20px;
    text-align: center;
}

.shipments-live-empty > span,
.shipment-not-found > span,
.shipment-details-empty > span {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 21px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    font-size: 25px;
}

.shipments-live-empty h3,
.shipment-not-found h2,
.shipment-details-empty h3 {
    margin-top: 17px;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.shipments-live-empty p,
.shipment-not-found p,
.shipment-details-empty p {
    max-width: 430px;
    margin-top: 8px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
    line-height: 1.65;
}

.shipments-live-empty a,
.shipment-not-found a {
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 0 16px;
    border-radius: 12px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 10px;
    font-weight: 800;
}

.shipments-list.grid-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shipments-list.grid-view .shipment-record-main {
    grid-template-columns: auto 1fr auto;
}

.shipments-list.grid-view .shipment-record-route,
.shipments-list.grid-view .shipment-record-date {
    grid-column: 1 / -1;
}

.shipment-details-content {
    padding-top: 30px;
}

.shipment-details-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.shipment-details-heading > div:first-child {
    max-width: 760px;
}

.shipment-details-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    color: rgba(255,255,255,.48);
    font-size: 10px;
    font-weight: 700;
}

.shipment-details-tag {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.14);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

.shipment-details-heading h2 {
    margin-top: 15px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(34px, 3.5vw, 52px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.shipment-details-heading p {
    margin-top: 10px;
    color: rgba(255,255,255,.46);
    font-size: 13px;
}

.shipment-details-heading-actions {
    display: flex;
    gap: 10px;
}

.shipment-details-heading-actions a,
.shipment-details-heading-actions button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
}

.shipment-details-heading-actions a {
    color: #fff;
    background: var(--gradient-button);
}

.shipment-details-heading-actions button {
    color: rgba(255,255,255,.64);
    background: rgba(255,255,255,.04);
}

.shipment-details-hero {
    margin-top: 20px;
}

.shipment-details-status-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
}

.shipment-details-status-row > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.shipment-details-status-row small {
    color: rgba(255,255,255,.34);
    font-size: 9px;
}

.shipment-details-status-row strong {
    font-size: 13px;
}

.shipment-details-progress-track {
    height: 7px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.shipment-details-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#7357ff,#15d9ff);
}

.shipment-details-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    margin-top: 22px;
}

.shipment-details-route > div:not(.shipment-details-route-line) {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.shipment-details-route > div > span:first-child {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 5px;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.shipment-details-route small {
    color: rgba(255,255,255,.32);
    font-size: 8px;
    text-transform: uppercase;
}

.shipment-details-route strong {
    font-size: 12px;
}

.shipment-details-route p {
    color: rgba(255,255,255,.4);
    font-size: 9px;
    line-height: 1.5;
}

.shipment-details-route-line {
    min-width: 70px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--cyan);
}

.shipment-details-route-line span {
    height: 1px;
    flex: 1;
    background: rgba(255,255,255,.1);
}

.shipment-details-grid {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
    gap: 18px;
    margin-top: 18px;
}

.shipment-info-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 11px;
    margin-top: 18px;
}

.shipment-info-grid article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.shipment-info-grid article > span,
.shipment-contact-list article > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.shipment-info-grid article > div,
.shipment-contact-list article > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shipment-info-grid small,
.shipment-contact-list small {
    color: rgba(255,255,255,.32);
    font-size: 8px;
}

.shipment-info-grid strong,
.shipment-contact-list strong {
    font-size: 11px;
}

.shipment-description-box {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.shipment-description-box small {
    color: var(--cyan);
    font-size: 8px;
    text-transform: uppercase;
}

.shipment-description-box p {
    margin-top: 7px;
    color: rgba(255,255,255,.46);
    font-size: 10px;
    line-height: 1.65;
}

.shipment-contact-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 18px;
}

.shipment-contact-list article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.shipment-contact-list p {
    color: rgba(255,255,255,.36);
    font-size: 9px;
}

.shipment-timeline-panel {
    grid-column: 1;
}

.shipment-details-timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.shipment-details-timeline article {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: flex-start;
}

.shipment-details-timeline article > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--success);
    background: rgba(23,216,152,.08);
}

.shipment-details-timeline article > div {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.shipment-details-timeline article > div > strong {
    font-size: 11px;
}

.shipment-details-timeline article p {
    margin-top: 6px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
    line-height: 1.6;
}

.shipment-details-timeline article > div > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-top: 8px;
}

.shipment-details-timeline small {
    color: rgba(255,255,255,.3);
    font-size: 8px;
}

.shipment-details-timeline article > strong {
    color: var(--cyan);
    font-size: 10px;
}

.shipment-billing-panel {
    grid-column: 2;
    align-self: start;
}

.shipment-billing-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.shipment-billing-list > div,
.shipment-billing-total {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 10px;
}

.shipment-billing-list span {
    color: rgba(255,255,255,.38);
}

.shipment-billing-total {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.065);
}

.shipment-billing-total strong {
    color: var(--cyan);
    font-size: 19px;
}

.shipment-invoice-status {
    display: inline-flex;
    margin-top: 14px;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 800;
}

.shipment-invoice-status.pending {
    color: var(--orange-light);
    background: rgba(255,107,44,.08);
}

.shipment-invoice-status.paid {
    color: var(--success);
    background: rgba(23,216,152,.08);
}

.shipment-billing-panel > a,
.shipment-billing-panel > button {
    width: 100%;
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    border-radius: 12px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 10px;
    font-weight: 800;
}

.shipment-not-found,
.shipment-details-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: 420px;
    justify-content: center;
    text-align: center;
}

/* === LIVE MY SHIPMENTS & DETAILS END === */


/* === GLOBAL PUBLIC TRACKING START === */

.live-tracking-content { padding-top: 30px; }

.live-tracking-heading { max-width: 800px; }

.live-tracking-tag,
.public-tracking-eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.15);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

.live-tracking-heading h2 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: clamp(36px,3.7vw,54px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.live-tracking-heading p {
    margin-top: 13px;
    color: rgba(255,255,255,.5);
    font-size: 14px;
    line-height: 1.7;
}

.live-tracking-search-panel { margin-top: 22px; }

.live-tracking-search-form,
.public-tracking-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.live-tracking-search-form > div,
.public-tracking-form > div {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    background: rgba(255,255,255,.035);
}

.live-tracking-search-form > div i,
.public-tracking-form > div i { color: var(--cyan); }

.live-tracking-search-form input,
.public-tracking-form input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 13px;
}

.live-tracking-search-form button,
.public-tracking-form button {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 20px;
    border-radius: 15px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 11px;
    font-weight: 800;
}

.tracking-inline-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 13px 14px;
    border-radius: 13px;
    font-size: 11px;
}

.tracking-inline-alert.error {
    color: #ff9aac;
    border: 1px solid rgba(255,83,112,.2);
    background: rgba(255,83,112,.07);
}

.live-tracking-overview { margin-top: 18px; }

.live-tracking-overview-top,
.live-tracking-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.live-tracking-overview-top > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.live-tracking-overview-top small,
.live-tracking-progress-header span {
    color: rgba(255,255,255,.36);
    font-size: 10px;
}

.live-tracking-overview-top strong {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 19px;
}

.live-tracking-progress-header { margin-top: 20px; }

.live-tracking-progress-header strong {
    color: var(--cyan);
    font-size: 14px;
}

.live-tracking-progress,
.public-progress-track {
    height: 10px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.075);
}

.live-tracking-progress > span,
.public-progress-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#7357ff,#15d9ff,#17d898);
    box-shadow: 0 0 18px rgba(21,217,255,.3);
}

.live-tracking-route,
.public-tracking-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 15px;
    align-items: center;
    margin-top: 25px;
}

.live-tracking-route article,
.public-tracking-route article {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
}

.live-tracking-route article > span,
.public-tracking-route article > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 5px;
    border-radius: 13px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.live-tracking-route article small,
.public-tracking-route article small {
    color: rgba(255,255,255,.33);
    font-size: 9px;
    text-transform: uppercase;
}

.live-tracking-route article strong,
.public-tracking-route article strong {
    font-size: 12px;
    line-height: 1.5;
}

.live-tracking-route-line,
.public-tracking-route > div {
    min-width: 70px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--cyan);
}

.live-tracking-route-line span,
.public-tracking-route > div span {
    height: 1px;
    flex: 1;
    background: rgba(255,255,255,.1);
}

.live-tracking-meta {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 22px;
}

.live-tracking-meta article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.live-tracking-meta article > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
}

.live-tracking-meta article > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.live-tracking-meta small {
    color: rgba(255,255,255,.33);
    font-size: 8px;
}

.live-tracking-meta strong { font-size: 11px; }

.live-tracking-grid {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr);
    gap: 18px;
    margin-top: 18px;
}

.live-tracking-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.live-tracking-timeline article,
.public-timeline article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
}

.live-tracking-timeline article > span,
.public-timeline article > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--success);
    background: rgba(23,216,152,.08);
}

.live-tracking-timeline article > div > div:first-child,
.public-timeline article > div > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.live-tracking-timeline strong,
.public-timeline strong { font-size: 12px; }

.live-tracking-timeline article > div > div:first-child small,
.public-timeline article > div > div:first-child small {
    color: var(--cyan);
    font-size: 10px;
    font-weight: 800;
}

.live-tracking-timeline p,
.public-timeline p {
    margin-top: 7px;
    color: rgba(255,255,255,.44);
    font-size: 10px;
    line-height: 1.65;
}

.live-tracking-event-meta,
.public-timeline article > div > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-top: 9px;
}

.live-tracking-event-meta span,
.public-timeline article > div > div:last-child span {
    color: rgba(255,255,255,.32);
    font-size: 9px;
}

.live-tracking-package-list,
.public-package-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.live-tracking-package-list div,
.public-package-list div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    font-size: 10px;
}

.live-tracking-package-list span,
.public-package-list span { color: rgba(255,255,255,.38); }

.live-tracking-package-panel > a {
    width: 100%;
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 17px;
    border-radius: 12px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 10px;
    font-weight: 800;
}

.tracking-welcome-state,
.tracking-empty-state {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
    margin-top: 18px;
    text-align: center;
}

.tracking-welcome-state > span,
.tracking-empty-state > span,
.public-empty > span,
.public-tracking-placeholder > span {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 21px;
    color: var(--cyan);
    background: rgba(21,217,255,.08);
    font-size: 24px;
}

.tracking-welcome-state h3,
.tracking-empty-state h3 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 19px;
}

.tracking-welcome-state p,
.tracking-empty-state p {
    margin-top: 8px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
}

.public-tracking-page {
    min-height: 100vh;
    color: #fff;
    background:
        radial-gradient(circle at 80% 0%,rgba(115,87,255,.14),transparent 34%),
        radial-gradient(circle at 10% 40%,rgba(21,217,255,.08),transparent 30%),
        #07101f;
    font-family: "Manrope",sans-serif;
}

.public-tracking-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 max(24px,calc((100vw - 1240px)/2));
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(7,16,31,.88);
    backdrop-filter: blur(18px);
}

.public-tracking-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.public-tracking-brand > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--gradient-button);
}

.public-tracking-brand strong {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 18px;
}

.public-tracking-brand strong span { color: var(--cyan); }

.public-tracking-header nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.public-tracking-header nav a {
    color: rgba(255,255,255,.58);
    font-size: 11px;
    font-weight: 700;
}

.public-tracking-main {
    width: min(1240px,calc(100% - 36px));
    margin: 0 auto;
    padding: 62px 0 40px;
}

.public-tracking-hero {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.public-tracking-eyebrow { margin-inline: auto; }

.public-tracking-hero h1 {
    margin-top: 19px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: clamp(42px,6vw,74px);
    line-height: 1.02;
    letter-spacing: -3px;
}

.public-tracking-hero > p {
    max-width: 650px;
    margin: 17px auto 0;
    color: rgba(255,255,255,.5);
    font-size: 14px;
    line-height: 1.75;
}

.public-tracking-form {
    max-width: 760px;
    margin: 27px auto 0;
}

.public-alert { max-width: 760px; margin-inline: auto; }

.public-tracking-result,
.public-tracking-placeholder {
    margin-top: 40px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
}

.public-tracking-result-header,
.public-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.public-tracking-result-header > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.public-tracking-result-header small,
.public-progress-heading span {
    color: rgba(255,255,255,.35);
    font-size: 10px;
}

.public-tracking-result-header strong {
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 20px;
}

.public-progress-heading { margin-top: 20px; }

.public-progress-heading strong {
    color: var(--cyan);
    font-size: 14px;
}

.public-tracking-layout {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
    gap: 18px;
    margin-top: 27px;
}

.public-tracking-layout > section,
.public-tracking-layout > aside {
    padding: 20px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 19px;
    background: rgba(255,255,255,.024);
}

.public-section-heading span {
    color: var(--cyan);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.public-section-heading h2 {
    margin-top: 5px;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 21px;
}

.public-timeline {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 17px;
}

.public-package-list div.full {
    align-items: flex-start;
    flex-direction: column;
}

.public-tracking-privacy-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin-top: 17px;
    padding: 13px;
    border-radius: 13px;
    color: rgba(255,255,255,.46);
    background: rgba(21,217,255,.05);
    font-size: 9px;
    line-height: 1.55;
}

.public-tracking-privacy-note i { color: var(--cyan); }

.public-empty,
.public-tracking-placeholder {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 280px;
    text-align: center;
}

.public-empty h3,
.public-tracking-placeholder h2 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans",sans-serif;
}

.public-empty p,
.public-tracking-placeholder p {
    max-width: 500px;
    margin-top: 8px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
    line-height: 1.65;
}

.public-tracking-footer {
    width: min(1240px,calc(100% - 36px));
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.34);
    font-size: 9px;
}

.public-tracking-footer div {
    display: flex;
    gap: 16px;
}

.public-tracking-footer a { color: inherit; }

/* === GLOBAL PUBLIC TRACKING END === */

/* === PUBLIC TRACKING TYPOGRAPHY UPGRADE START === */
.public-tracking-result-header small,.public-progress-heading span,.public-tracking-route article small,.public-section-heading span,.public-package-list span{font-size:11px}
.public-tracking-result-header strong{font-size:24px}.public-progress-heading strong{font-size:16px}.public-tracking-route article strong{font-size:14px}.public-section-heading h2{font-size:24px}
.public-timeline strong{font-size:14px}.public-timeline p{font-size:12px}.public-timeline article>div>div:last-child span{font-size:10px}.public-package-list div{font-size:12px}.public-package-list strong{font-size:12px;line-height:1.55}.public-tracking-privacy-note{font-size:11px}.public-tracking-form input{font-size:15px}.public-tracking-form button{font-size:12px}
@media(max-width:767px){.public-tracking-form input,.public-tracking-form button{font-size:16px!important}.public-tracking-result-header strong{font-size:21px}.public-tracking-route article small{font-size:10px}.public-tracking-route article strong{font-size:14px}.public-section-heading h2{font-size:22px}.public-timeline strong{font-size:13px}.public-timeline p,.public-package-list div{font-size:12px}}
/* === PUBLIC TRACKING TYPOGRAPHY UPGRADE END === */


/* === HOMEPAGE LIVE TRACKING RESULT ERROR START === */

.public-track-error-card {
    align-items: center;
    text-align: left;
}

.public-track-error-card > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.public-track-error-card strong {
    font-size: 12px;
}

.public-track-error-card span {
    font-size: 11px;
}

.public-track-error-card a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border-radius: 10px;
    color: #fff;
    background: rgba(255,255,255,.07);
    font-size: 10px;
    font-weight: 800;
}

@media (max-width: 600px) {
    .public-track-error-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-track-error-card a {
        width: 100%;
    }
}

/* === HOMEPAGE LIVE TRACKING RESULT ERROR END === */


/* === CUSTOMER SUPPORT TICKET SYSTEM START === */

.customer-support-content { padding-top: 30px; }

.customer-support-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(21,217,255,.14);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 10px;
    font-weight: 800;
}

.customer-support-heading h2 {
    margin-top: 16px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(36px,4vw,54px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.customer-support-heading p {
    margin-top: 10px;
    color: rgba(255,255,255,.46);
    font-size: 13px;
}

.customer-support-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 17px;
    padding: 13px;
    border-radius: 12px;
    font-size: 11px;
}

.customer-support-alert.error {
    color: #ff9aac;
    border: 1px solid rgba(255,83,112,.18);
    background: rgba(255,83,112,.07);
}

.customer-support-layout {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr);
    gap: 18px;
    margin-top: 20px;
}

.customer-support-form { margin-top: 18px; }

.customer-support-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.customer-support-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.customer-support-form-grid label.full { grid-column: 1 / -1; }
.customer-support-form-grid label > span { font-size: 10px; font-weight: 800; }

.customer-support-form-grid input,
.customer-support-form-grid select,
.customer-support-form-grid textarea,
.customer-support-reply textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    outline: 0;
    color: #fff;
    background: rgba(255,255,255,.035);
    font-size: 12px;
}

.customer-support-form-grid textarea,
.customer-support-reply textarea {
    padding-top: 12px;
    line-height: 1.65;
    resize: vertical;
}

.customer-support-form > button,
.customer-support-reply button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0 15px;
    border-radius: 12px;
    color: #fff;
    background: var(--gradient-button);
    font-size: 10px;
    font-weight: 800;
}

.customer-support-ticket-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px;
}

.customer-support-ticket-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 13px;
    color: #fff;
    background: rgba(255,255,255,.025);
}

.customer-support-ticket-list a.active {
    border-color: rgba(21,217,255,.16);
    background: rgba(21,217,255,.06);
}

.customer-support-ticket-list a > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.customer-support-ticket-list strong { font-size: 10px; }
.customer-support-ticket-list span { color: rgba(255,255,255,.48); font-size: 9px; }
.customer-support-ticket-list small { color: var(--cyan); font-size: 8px; }

.customer-support-conversation-panel { margin-top: 18px; }

.customer-support-status {
    padding: 7px 9px;
    border-radius: 9px;
    color: var(--cyan);
    background: rgba(21,217,255,.07);
    font-size: 9px;
    font-weight: 800;
}

.customer-support-conversation {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 18px;
}

.customer-support-conversation article {
    max-width: 82%;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 15px;
}

.customer-support-conversation article.customer {
    align-self: flex-end;
    border-color: rgba(21,217,255,.13);
    background: rgba(21,217,255,.06);
}

.customer-support-conversation article.staff {
    align-self: flex-start;
    background: rgba(255,255,255,.025);
}

.customer-support-conversation article > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.customer-support-conversation strong { font-size: 10px; }
.customer-support-conversation small { color: rgba(255,255,255,.33); font-size: 8px; }
.customer-support-conversation p { margin-top: 8px; color: rgba(255,255,255,.58); font-size: 10px; line-height: 1.7; }

.customer-support-reply {
    display: flex;
    align-items: flex-end;
    gap: 11px;
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.customer-support-reply textarea { flex: 1; }
.customer-support-reply button { flex-shrink: 0; margin-top: 0; }

@media (max-width: 900px) {
    .customer-support-layout { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .customer-support-form-grid { grid-template-columns: 1fr; }
    .customer-support-form-grid label.full { grid-column: auto; }
    .customer-support-conversation article { max-width: 100%; }
    .customer-support-reply { align-items: stretch; flex-direction: column; }
    .customer-support-reply button { width: 100%; }
}

/* === CUSTOMER SUPPORT TICKET SYSTEM END === */

/* Compact connected-logistics panel used by the restored homepage CTA */
.final-cta-visual {
    min-height: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    justify-content: initial;
    align-self: center;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 22px;
    background: rgba(5, 12, 27, 0.34);
}

.final-cta-visual-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--cyan);
    background: rgba(21, 217, 255, 0.10);
    box-shadow: 0 14px 34px rgba(21, 217, 255, 0.10);
    font-size: 19px;
}

.final-cta-visual-copy {
    min-width: 0;
}

.final-cta-visual-copy strong {
    display: block;
    max-width: 390px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.45px;
}

.final-cta-visual-copy p {
    max-width: 420px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   LOGIN ROUTE SUMMARY POLISH
   Keeps the compact live-shipment card aligned and readable.
========================================================= */
.auth-shipment-route {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.25fr) minmax(120px, 1fr);
    align-items: center;
    gap: 18px;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(5, 12, 27, 0.48);
}

.auth-shipment-route > div:not(.auth-route-line) {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.auth-shipment-route > div:last-child {
    text-align: right;
    align-items: flex-end;
}

.auth-shipment-route > div:not(.auth-route-line) > span {
    width: 9px;
    height: 9px;
    display: block;
    border: 2px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 5px rgba(21, 217, 255, 0.08), 0 0 18px rgba(21, 217, 255, 0.34);
}

.auth-shipment-route > div:last-child > span {
    background: #7b61ff;
    box-shadow: 0 0 0 5px rgba(123, 97, 255, 0.08), 0 0 18px rgba(123, 97, 255, 0.34);
}

.auth-shipment-route strong {
    color: #ffffff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    line-height: 1.3;
}

.auth-shipment-route small {
    color: rgba(255, 255, 255, 0.47);
    font-size: 9px;
    line-height: 1.5;
}

.auth-route-line {
    display: grid;
    grid-template-columns: 1fr 38px 1fr;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.auth-route-line > span {
    height: 1px;
    background: linear-gradient(90deg, rgba(21, 217, 255, 0.18), rgba(21, 217, 255, 0.85));
}

.auth-route-line > span:last-child {
    background: linear-gradient(90deg, rgba(123, 97, 255, 0.85), rgba(123, 97, 255, 0.18));
}

.auth-route-line i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    color: var(--cyan);
    background: linear-gradient(145deg, rgba(21, 217, 255, 0.13), rgba(123, 97, 255, 0.13));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

/* === PUBLIC TRACKING SHIPMENT INFORMATION POLISH START === */
.public-tracking-layout {
    grid-template-columns: 1fr;
}

.public-shipment-information {
    position: relative;
    overflow: hidden;
    padding: 26px !important;
    background:
        radial-gradient(circle at 88% 0%, rgba(21,217,255,.11), transparent 28%),
        radial-gradient(circle at 8% 100%, rgba(115,87,255,.10), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
}

.public-shipment-information::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.public-shipment-information-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.public-shipment-information .public-section-heading p {
    max-width: 610px;
    margin-top: 8px;
    color: rgba(255,255,255,.43);
    font-size: 11px;
    line-height: 1.7;
}

.public-package-mark {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(21,217,255,.18);
    border-radius: 18px;
    color: var(--cyan);
    background: linear-gradient(145deg, rgba(21,217,255,.12), rgba(115,87,255,.09));
    box-shadow: 0 16px 38px rgba(0,0,0,.20);
    font-size: 22px;
}

.public-shipment-information .public-package-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin-top: 22px;
}

.public-shipment-information .public-package-list div,
.public-shipment-information .public-package-list div.full {
    min-width: 0;
    min-height: 92px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 15px;
    background: rgba(7,16,31,.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.public-shipment-information .public-package-list div.full {
    grid-column: span 2;
}

.public-shipment-information .public-package-list span {
    color: rgba(255,255,255,.35);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.public-shipment-information .public-package-list strong {
    max-width: 100%;
    color: #fff;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.public-shipment-information .public-tracking-privacy-note {
    position: relative;
    z-index: 1;
    align-items: center;
    margin-top: 14px;
    padding: 15px 17px;
    border: 1px solid rgba(21,217,255,.10);
    background: linear-gradient(90deg, rgba(21,217,255,.07), rgba(115,87,255,.035));
}
/* === PUBLIC TRACKING SHIPMENT INFORMATION POLISH END === */

/* === PROOF OF DELIVERY DISPLAY === */
.public-pod-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(360px,.9fr);gap:24px;align-items:center;margin-top:18px;padding:26px;border:1px solid rgba(0,229,166,.16);border-radius:24px;background:linear-gradient(135deg,rgba(0,229,166,.075),rgba(21,217,255,.035) 48%,rgba(115,87,255,.04));overflow:hidden}.public-pod-card:after{content:"";position:absolute;right:-90px;bottom:-130px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,166,.12),transparent 68%)}.public-pod-icon{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;color:#061722;background:#20e3ac;box-shadow:0 16px 36px rgba(0,229,166,.18);font-size:22px}.public-pod-copy,.public-pod-facts,.public-pod-file{position:relative;z-index:1}.public-pod-copy>span{color:#30e8b3;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.public-pod-copy h2{margin:5px 0 7px;color:#fff;font:700 20px "Plus Jakarta Sans",sans-serif}.public-pod-copy p{margin:0;max-width:520px;color:rgba(255,255,255,.48);font-size:11px;line-height:1.7}.public-pod-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.public-pod-facts div{padding:13px 14px;border:1px solid rgba(255,255,255,.065);border-radius:13px;background:rgba(5,15,29,.38)}.public-pod-facts div.full{grid-column:1/-1}.public-pod-facts span,.customer-pod-grid span{display:block;margin-bottom:6px;color:rgba(255,255,255,.34);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.public-pod-facts strong,.customer-pod-grid strong{color:#fff;font-size:11px;line-height:1.5}.public-pod-file{grid-column:2/-1;display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid rgba(21,217,255,.12);border-radius:14px;color:#fff;background:rgba(21,217,255,.045);text-decoration:none}.public-pod-file>i:first-child{color:#19d9ff;font-size:18px}.public-pod-file span{display:flex;flex:1;flex-direction:column}.public-pod-file strong{font-size:10px}.public-pod-file small{margin-top:2px;color:rgba(255,255,255,.35);font-size:8px}.public-pod-file>i:last-child{color:#19d9ff}.customer-pod-card{padding:24px}.customer-pod-head{display:flex;align-items:flex-start;gap:15px}.customer-pod-head>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#082019;background:#28e5ad}.customer-pod-head small{color:#20dca6;font-size:9px;font-weight:800;text-transform:uppercase}.customer-pod-head h2{margin:4px 0 5px;color:#fff;font-size:20px}.customer-pod-head p{margin:0;color:#7e8da4;font-size:11px}.customer-pod-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.customer-pod-grid div{padding:14px;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(255,255,255,.025)}.customer-pod-grid div.full{grid-column:1/-1}.customer-pod-file{display:inline-flex;align-items:center;gap:10px;margin-top:15px;padding:12px 15px;border:1px solid rgba(21,217,255,.13);border-radius:13px;color:#19d9ff;background:rgba(21,217,255,.05);font-size:10px;font-weight:800;text-decoration:none}@media(max-width:960px){.public-pod-card{grid-template-columns:auto 1fr}.public-pod-facts{grid-column:1/-1}.public-pod-file{grid-column:1/-1}}@media(max-width:600px){.public-pod-card{grid-template-columns:1fr;padding:20px}.public-pod-icon{width:50px;height:50px}.public-pod-facts,.customer-pod-grid{grid-template-columns:1fr}.public-pod-facts div.full,.customer-pod-grid div.full{grid-column:auto}.public-pod-file{grid-column:auto}.customer-pod-head{flex-direction:column}}

/* =========================================================
   PUBLIC TRACKING — PRINT ACTION
========================================================= */
.public-tracking-print-bar {
    margin-top: 28px;
    display: flex;
    justify-content: flex-end;
}

.public-tracking-print-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid rgba(74, 220, 255, 0.35);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(74, 220, 255, 0.16), rgba(61, 123, 255, 0.16));
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.public-tracking-print-button:hover {
    transform: translateY(-2px);
    border-color: rgba(74, 220, 255, 0.72);
    background: linear-gradient(135deg, rgba(74, 220, 255, 0.24), rgba(61, 123, 255, 0.24));
}

.public-tracking-print-button:focus-visible {
    outline: 3px solid rgba(74, 220, 255, 0.28);
    outline-offset: 3px;
}

.public-print-header,
.public-print-footer {
    display: none;
}

@media print {
    @page {
        size: A4;
        margin: 14mm;
    }

    html,
    body.public-tracking-page {
        background: #ffffff !important;
        color: #111827 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .public-tracking-header,
    .public-tracking-hero,
    .public-tracking-footer,
    .public-tracking-print-bar,
    script {
        display: none !important;
    }

    .public-tracking-main {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .public-tracking-result {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .public-print-header,
    .public-print-footer {
        display: flex !important;
    }

    .public-print-header {
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 22px;
        padding-bottom: 16px;
        border-bottom: 2px solid #111827;
    }

    .public-print-header strong {
        display: block;
        font-size: 22px;
        line-height: 1.1;
        color: #111827 !important;
    }

    .public-print-header strong span {
        color: #2563eb !important;
    }

    .public-print-header small {
        display: block;
        margin-top: 5px;
        color: #4b5563 !important;
        font-size: 11px;
    }

    .public-print-header > div:last-child {
        text-align: right;
    }

    .public-tracking-result-header,
    .public-tracking-route,
    .public-tracking-layout > section,
    .public-shipment-information,
    .public-pod-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .public-tracking-result-header,
    .public-tracking-route,
    .public-tracking-layout > section,
    .public-shipment-information,
    .public-pod-card,
    .public-package-list div,
    .public-timeline article {
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }

    .public-tracking-result-header,
    .public-tracking-route,
    .public-tracking-layout > section,
    .public-shipment-information,
    .public-pod-card {
        border: 1px solid #d1d5db !important;
        border-radius: 10px !important;
    }

    .public-tracking-result-header,
    .public-tracking-route,
    .public-tracking-layout > section,
    .public-shipment-information,
    .public-pod-card {
        margin-bottom: 16px !important;
    }

    .public-progress-track {
        background: #e5e7eb !important;
    }

    .public-progress-track span {
        background: #2563eb !important;
    }

    .public-tracking-result *,
    .public-print-header *,
    .public-print-footer * {
        color: #111827 !important;
        text-shadow: none !important;
    }

    .public-section-heading > span,
    .public-package-list span,
    .public-tracking-result-header small,
    .public-progress-heading span,
    .public-tracking-route article small {
        color: #4b5563 !important;
    }

    .public-tracking-layout {
        display: block !important;
    }

    .public-timeline article,
    .public-package-list div {
        border-color: #d1d5db !important;
    }

    .public-package-mark,
    .public-tracking-route i,
    .public-timeline article > span,
    .public-pod-icon {
        color: #2563eb !important;
    }

    .public-print-footer {
        justify-content: space-between;
        gap: 16px;
        margin-top: 22px;
        padding-top: 12px;
        border-top: 1px solid #d1d5db;
        color: #4b5563 !important;
        font-size: 10px;
    }

    a {
        text-decoration: none !important;
    }
}

/* =========================================================
   QUICK TRACKING MODAL
========================================================= */
.quick-track-modal{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}.quick-track-modal.show{opacity:1;visibility:visible;pointer-events:auto}.quick-track-backdrop{position:absolute;inset:0;background:rgba(3,8,20,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.quick-track-dialog{position:relative;width:min(100%,520px);padding:34px;border:1px solid rgba(21,217,255,.18);border-radius:28px;background:linear-gradient(145deg,#101a2b,#0a1220);box-shadow:0 35px 100px rgba(0,0,0,.45);transform:translateY(16px) scale(.98);transition:transform .25s ease}.quick-track-modal.show .quick-track-dialog{transform:translateY(0) scale(1)}.quick-track-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.04);color:#aeb9cb;cursor:pointer}.quick-track-close:hover{color:#fff;border-color:rgba(21,217,255,.25)}.quick-track-icon{display:grid;place-items:center;width:54px;height:54px;margin-bottom:18px;border:1px solid rgba(21,217,255,.2);border-radius:17px;color:#16d8ff;background:rgba(21,217,255,.08);font-size:20px}.quick-track-eyebrow{display:block;color:#16d8ff;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.quick-track-dialog h2{margin:8px 0 8px;color:#fff;font:800 clamp(25px,4vw,34px)/1.15 "Plus Jakarta Sans",sans-serif;letter-spacing:-1px}.quick-track-dialog>p{margin:0;color:rgba(255,255,255,.5);font-size:12px;line-height:1.75}.quick-track-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:24px}.quick-track-form>div{display:flex;align-items:center;gap:11px;min-width:0;padding:0 15px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.045)}.quick-track-form>div:focus-within{border-color:rgba(21,217,255,.45);box-shadow:0 0 0 4px rgba(21,217,255,.06)}.quick-track-form>div i{color:#18d8ff;font-size:14px}.quick-track-form input{width:100%;min-width:0;height:50px;border:0;outline:0;background:transparent;color:#fff;font:600 13px "Manrope",sans-serif}.quick-track-form input::placeholder{color:rgba(255,255,255,.32)}.quick-track-form button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 18px;border:0;border-radius:14px;background:linear-gradient(135deg,#7357ff,#15d9ff);color:#fff;font:800 12px "Manrope",sans-serif;cursor:pointer;box-shadow:0 15px 30px rgba(21,217,255,.12)}.quick-track-dialog>small{display:block;margin-top:16px;color:rgba(255,255,255,.32);font-size:9px}.quick-track-dialog>small i{margin-right:5px;color:#18d8ff}@media(max-width:600px){.quick-track-modal{padding:15px}.quick-track-dialog{padding:28px 20px 22px;border-radius:23px}.quick-track-form{grid-template-columns:1fr}.quick-track-form button{width:100%}.quick-track-dialog h2{font-size:28px}}

/* =========================================================
   OPTIONAL SHIPMENT ITEM IMAGE
========================================================= */
.public-item-image{margin:0 0 18px;padding:12px;border:1px solid rgba(21,217,255,.12);border-radius:20px;background:linear-gradient(145deg,rgba(21,217,255,.055),rgba(115,87,255,.035));overflow:hidden}.public-item-image img{display:block;width:100%;height:min(320px,28vw);min-height:190px;object-fit:contain;border-radius:13px;background:rgba(3,10,21,.55)}.public-item-image-caption{display:flex;align-items:center;gap:8px;margin-top:9px;color:rgba(255,255,255,.34);font-size:9px}.public-item-image-caption i{color:#16d8ff}.admin-shipment-image-existing{display:flex;align-items:center;gap:13px;grid-column:1/-1;padding:12px;border:1px solid rgba(21,217,255,.11);border-radius:14px;background:rgba(21,217,255,.035)}.admin-shipment-image-existing img{width:78px;height:60px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.08)}.admin-shipment-image-existing div{display:flex;flex-direction:column;gap:4px}.admin-shipment-image-existing strong{color:#fff;font-size:11px}.admin-shipment-image-existing small{color:rgba(255,255,255,.38);font-size:9px}

@media print{.public-item-image{border:1px solid #d1d5db!important;background:#fff!important;padding:8px!important}.public-item-image img{height:240px!important;min-height:0!important;background:#fff!important}.public-item-image-caption{color:#4b5563!important}.public-item-image-caption i{color:#2563eb!important}}