@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

/* ═══════════════════════════════════════════
   DESIGN TOKENS
   (all original variable names kept — nothing
   that JS reads or toggles has been renamed)
═══════════════════════════════════════════ */
:root {
    --bg:            #FAF7F2;
    --bg-2:          #F3EDE5;
    --bg-3:          #EDE6DA;
    --card:          #FFFFFF;
    --text:          #16304F;
    --text-2:        #3E5272;
    --muted:         #6B7A94;
    --line:          #E7DCD0;
    --line-2:        #D6C8BA;

    --primary:       #0A2F8F;
    --primary-dk:    #0F3450;
    --primary-lt:    #EAF2F8;
    --teal:          #0565FF;
    --teal-lt:       #E4F5F3;
    --accent:        #C9954C;
    --gold-light:    #F6D38B;
    --gold-mid:      #D4A85C;
    --gold-dark:     #B8842F;
    --accent-lt:     #FDF3E4;
    --accent-dk:     #A37430;

    --danger:        #C0392B;
    --danger-lt:     #FEF1F1;
    --success:       #1A7A4A;
    --success-lt:    #EBF7EF;
    --warning:       #D68910;
    --warning-lt:    #FEF7EA;

    /* Brand gradient — single source of truth, reused everywhere */
    --grad-brand: linear-gradient(145deg, #0A2F8F 0%, #0565FF 72%, #D4A85C 100%);
    --grad-brand-hover: linear-gradient(145deg, #133DAA 0%, #2D7FFF 72%, #E3B868 100%);
    --grad-gold: linear-gradient(135deg, var(--accent), #E8AE68);

    /* Refined, layered elevation system — softer, more premium falloff,
       every layer carries a faint brand tint instead of flat neutral grey */
    --sh-xs: 0 1px 2px rgba(16,35,64,.05), 0 1px 1px rgba(16,35,64,.03);
    --sh-sm: 0 3px 8px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.05);
    --sh-md: 0 6px 16px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.08);
    --sh-lg: 0 10px 24px rgba(15,23,42,.06), 0 28px 58px rgba(15,23,42,.11);
    --sh-xl: 0 16px 34px rgba(15,23,42,.08), 0 42px 84px rgba(15,23,42,.15);
    --sh-2xl: 0 22px 46px rgba(16,35,64,.12), 0 48px 100px rgba(16,35,64,.20);
    --sh-accent: 0 10px 26px rgba(201,149,76,.30);
    --sh-brand: 0 14px 32px rgba(10,47,143,.24), 0 2px 8px rgba(10,47,143,.12);
    /* Tactile "press" shadow — used when a surface is actively tapped,
       collapses depth so the UI feels physically pushed in */
    --sh-press: 0 2px 6px rgba(15,23,42,.07);

    /* Radii — slightly more generous for an app-native feel */
--r-sm:16px;
--r-md:22px;
--r-lg:28px;
--r-xl:36px;
--r-2xl:44px;
    --r-full: 999px;

    /* Motion — unified, tactile curves. spring-soft/spring keep their
       original values (used verbatim in scripted class toggles); the
       new curves layer in extra native-app feel without touching them */
    --spring:   cubic-bezier(.34,1.56,.64,1);
    --spring-soft: cubic-bezier(.22,1.15,.4,1);
    --spring-snap: cubic-bezier(.5,1.8,.4,1);
    --smooth:   cubic-bezier(.4,0,.2,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --t-instant:.1s;
    --t-fast:   .16s;
    --t-base:   .26s;
    --t-slow:   .42s;
    --t-sheet:  .48s;
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*,*::before,*::after {
    margin:0;padding:0;box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}
html {
    scroll-behavior:smooth;-webkit-text-size-adjust:100%;
    scrollbar-gutter:stable;
}
body {
    font-family:'DM Sans',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    overscroll-behavior-y:none;
    background:

linear-gradient(
180deg,
#F7FAFD 0%,
#F4F8FC 100%
);

overflow-x:hidden;
}
h1,h2,h3,h4 {
    font-family:'Playfair Display',Georgia,serif;
    line-height:1.2;
    letter-spacing:-.012em;
    color:var(--text);
}
img { max-width:100%;display:block; }
a { text-decoration:none;color:inherit;transition:color var(--t-fast) var(--smooth); }
button,input,select,textarea { font:inherit; }
button { touch-action:manipulation; }
textarea { resize:vertical; }

/* Consistent, premium focus ring for accessibility without visual clutter */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
    outline:2.5px solid rgba(10,47,143,.45);
    outline-offset:2px;
    border-radius:6px;
}

/* ═══════════════════════════════════════════
   GLOBAL SCROLLBAR — thin, quiet, brand-tinted
═══════════════════════════════════════════ */
* { scrollbar-width:thin;scrollbar-color:rgba(10,47,143,.18) transparent; }
*::-webkit-scrollbar { width:8px;height:8px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb {
    background:rgba(10,47,143,.18);border-radius:99px;
    transition:background var(--t-base) var(--smooth);
}
*::-webkit-scrollbar-thumb:hover { background:rgba(10,47,143,.34); }

/* ═══════════════════════════════════════════
   BACKGROUND ORBS
═══════════════════════════════════════════ */
.bg-orb {
    position:fixed;z-index:0;
    border-radius:999px;filter:blur(110px);
    opacity:.15;pointer-events:none;
}
.orb-one {
    width:460px;height:460px;
    background:radial-gradient(circle,#7BB8D4,#3E7FA8);
    top:-180px;left:-160px;
}
.orb-two {
    width:400px;height:400px;
    background:radial-gradient(circle,#D4B483,#C9954C);
    bottom:-180px;right:-160px;
}

/* ═══════════════════════════════════════════
   SPLASH LOADER
═══════════════════════════════════════════ */
.splash-loader {
    position:fixed;inset:0;
    background:linear-gradient(160deg,#FAF7F2 0%,#EDE6DC 100%);
    display:grid;place-items:center;z-index:9999;
    transition:opacity .7s var(--smooth),visibility .7s var(--smooth);
}
.splash-loader.hide { opacity:0;pointer-events:none;visibility:hidden; }

.splash-card {
    background:rgba(255,255,255,.94);
    border:1px solid rgba(201,149,76,.2);
    backdrop-filter:blur(18px) saturate(1.4);
    border-radius:var(--r-xl);
    box-shadow:var(--sh-xl);
    padding:42px 34px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:min(92vw,360px);
}
.splash-logo-wrap{
    width:88px;
    height:88px;
    margin:0 auto 18px;
    position:relative;
}
.splash-orbit{
    position:absolute;
    inset:0;
    width:88px;
    height:88px;
    margin:0;
}
.splash-orbit span {
    position:absolute;inset:0;
    border:1.5px solid rgba(201,149,76,.32);
    border-radius:50%;
    animation:orbitPulse 2.6s ease-out infinite;
}
.splash-orbit span:nth-child(2) { animation-delay:.9s; }
.splash-logo { width:150px;margin:0 auto 18px; }
.splash-card p { color:var(--muted);font-size:.93rem;font-weight:500; }
.splash-line {
    width:110px;height:2px;
    margin:4px auto 14px;border-radius:99px;
    background:linear-gradient(90deg,rgba(201,149,76,0),#C9954C,#0565FF,rgba(6,101,255,0));
    background-size:200% 100%;
    animation:lineSweep 1.9s linear infinite;
}
.splash-icon{
    position:absolute;
    top:50%;
    left:50%;
    width:72px;
    height:72px;
    transform:translate(-50%, -50%);
    object-fit:contain;
    z-index:2;
}
.medical-loader { display:flex;justify-content:center;gap:9px;margin:20px 0; }
.medical-loader span {
    width:9px;height:9px;border-radius:50%;
    background:var(--grad-brand);
    animation:dotPulse 1.3s infinite ease-in-out;
}
.medical-loader span:nth-child(2) { animation-delay:.18s; }
.medical-loader span:nth-child(3) { animation-delay:.36s; }

@keyframes dotPulse {
    0%,100% { transform:scale(.55);opacity:.55; }
    50%      { transform:scale(1.1);opacity:1; }
}
@keyframes orbitPulse {
    0%   { transform:scale(.82);opacity:.9; }
    100% { transform:scale(1.3);opacity:0; }
}
@keyframes lineSweep {
    0%   { background-position:0% 50%; }
    100% { background-position:200% 50%; }
}

/* ═══════════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════════ */
.toast-container {
    position:fixed;
    top:18px;right:18px;
    z-index:9998;
    display:flex;flex-direction:column;gap:10px;
    pointer-events:none;
    max-width:min(92vw,380px);
}
.toast {
    background:rgba(255,255,255,.98);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:var(--sh-lg);
    padding:14px 16px;
    display:flex;align-items:flex-start;gap:12px;
    font-size:.88rem;font-weight:600;
    pointer-events:all;
    animation:toastIn .4s var(--spring) both;
    border-left:3px solid var(--primary);
    backdrop-filter:blur(10px);
}
.toast.toast-success { border-left-color:var(--success); }
.toast.toast-error   { border-left-color:var(--danger); }
.toast.toast-warning { border-left-color:var(--warning); }
.toast-icon { font-size:1rem;flex-shrink:0;margin-top:1px; }
.toast.toast-success .toast-icon { color:var(--success); }
.toast.toast-error   .toast-icon { color:var(--danger); }
.toast.toast-warning .toast-icon { color:var(--warning); }
.toast-info   .toast-icon { color:var(--primary); }
.toast p { color:var(--text-2);line-height:1.45; }
.toast.toast-out { animation:toastOut .32s var(--smooth) forwards; }

@keyframes toastIn {
    from { transform:translateX(110%) scale(.96);opacity:0; }
    to   { transform:translateX(0) scale(1);opacity:1; }
}
@keyframes toastOut {
    from { transform:translateX(0);opacity:1;max-height:80px; }
    to   { transform:translateX(110%);opacity:0;max-height:0;padding:0;margin:0; }
}

/* ═══════════════════════════════════════════
   APP FRAME & SIDEBAR
═══════════════════════════════════════════ */
.app-frame {
    position:relative;z-index:1;
    display:flex;min-height:100vh;width:100%;
}
.sidebar {
    width:272px;flex-shrink:0;
    background:rgba(255,255,255,.96);
    border-right:1px solid var(--line);
    padding:20px 16px;
    display:flex;flex-direction:column;gap:16px;
    position:sticky;top:0;height:100vh;
    overflow-y:auto;
    backdrop-filter:blur(14px);
}
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:var(--line);border-radius:99px; }

.brand-wrap {
    background:var(--card);border-radius:var(--r-lg);
    border:1px solid rgba(201,149,76,.18);
    padding:13px;box-shadow:var(--sh-sm);
    transition:box-shadow var(--t-base) var(--smooth);
}
.brand-wrap img { width:140px;margin:0 auto; }

.nav-menu { display:flex;flex-direction:column;gap:4px; }

.nav-item {
    padding:12px 14px;border-radius:var(--r-md);
    display:flex;align-items:center;gap:11px;
    color:#4A5F82;font-weight:600;font-size:.92rem;
    cursor:pointer;
    transition:
        background var(--t-base) var(--smooth),
        color var(--t-base) var(--smooth),
        transform var(--t-fast) var(--spring),
        box-shadow var(--t-base) var(--smooth);
}
.nav-item i { width:18px;text-align:center;flex-shrink:0; }
.nav-item:hover { background:#F0F5FB;color:var(--primary);transform:translateX(4px); }
.nav-item.active {
    color:#fff;
    background:var(--grad-brand);
    box-shadow:var(--sh-brand);
}

.help-card {
    margin-top:auto;
    background:linear-gradient(160deg,#fff 0%,var(--accent-lt) 100%);
    border:1px solid rgba(201,149,76,.2);
    border-radius:var(--r-lg);padding:14px;
    box-shadow:var(--sh-xs);
}
.help-card img {
    border-radius:var(--r-md);width:100%;
    aspect-ratio:13/13;object-fit:cover;margin-bottom:12px;
}
.help-card h3 { font-size:1rem;margin-bottom:5px; }
.help-card p { font-size:.86rem;color:var(--muted);margin-bottom:12px;line-height:1.55; }

.logout-link {
    display:inline-flex;align-items:center;gap:8px;
    padding:11px;border-radius:var(--r-sm);
    background:var(--bg-2);color:#3A4F70;
    font-weight:600;font-size:.88rem;
    justify-content:center;
    transition:background var(--t-base) var(--smooth),transform var(--t-fast) var(--spring);
}
.logout-link:hover { background:var(--bg-3);transform:translateY(-1px); }

/* ═══════════════════════════════════════════
   APP CONTENT
═══════════════════════════════════════════ */
.app-content {
    flex:1;min-width:0;
    padding:24px;
    display:flex;flex-direction:column;width:100%;
}
.full-app-content { max-width:1020px;margin:0 auto;width:100%; }

/* ═══════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════ */
.topbar {
    position:relative;
    z-index:500;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(20px) saturate(1.6);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
    border:1px solid rgba(231,220,208,.85);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-sm);
    padding:11px 14px;
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    transition:box-shadow var(--t-base) var(--smooth);
}
.topbar-left,.topbar-right { display:flex;align-items:center;gap:10px; }

.icon-btn {
    width:42px;height:42px;border-radius:var(--r-sm);
    border:1px solid var(--line);background:#fff;
    color:var(--primary);
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;position:relative;
    transition:all var(--t-base) var(--spring-soft);
}
.icon-btn:hover { transform:translateY(-2px);box-shadow:var(--sh-sm);border-color:rgba(10,47,143,.22);background:#fff; }
.icon-btn:active { transform:scale(.9);transition:transform var(--t-instant) var(--smooth);box-shadow:var(--sh-press); }

/* Cart badge */
.cart-badge {
    position:absolute;top:-6px;right:-6px;
    min-width:18px;height:18px;
    background:var(--grad-gold);
    color:#fff;font-size:.65rem;font-weight:800;
    border-radius:var(--r-full);padding:0 5px;
    display:none;align-items:center;justify-content:center;
    line-height:1;box-shadow:0 2px 8px rgba(201,149,76,.5);
    border:2px solid var(--card);
    animation:badgePop .35s var(--spring);
}
.cart-badge.show { display:flex; }
@keyframes badgePop {
    from { transform:scale(0);opacity:0; }
    to   { transform:scale(1);opacity:1; }
}

.mobile-only { display:none; }

.location-chip {
    border:1px solid var(--line);border-radius:var(--r-md);
    background:#fff;padding:9px 12px;
    display:inline-flex;align-items:center;gap:9px;
    color:#2A4068;cursor:pointer;
    min-width:min(100%,280px);
    transition:all var(--t-base) var(--spring-soft);
}
.location-chip:hover { border-color:rgba(10,47,143,.3);box-shadow:var(--sh-xs);transform:translateY(-1px); }
.location-chip i { color:var(--accent);flex-shrink:0; }
.location-chip small {
    color:#8A99B4;display:block;
    font-size:.7rem;line-height:1.2;
    font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.location-chip strong {
    display:block;font-size:.87rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:200px;font-weight:700;
}

.profile-pill {
    padding:5px 10px 5px 5px;border-radius:var(--r-full);
    background:#fff;border:1px solid var(--line);
    display:flex;align-items:center;gap:9px;
    cursor:pointer;
    transition:all var(--t-base) var(--spring-soft);
}
.profile-pill:hover { box-shadow:var(--sh-xs);border-color:rgba(10,47,143,.22);transform:translateY(-1px); }
.profile-pill img { width:34px;height:34px;border-radius:50%;object-fit:cover; }
.profile-pill small { font-size:.68rem;color:var(--muted);font-weight:600;letter-spacing:.02em; }
.profile-pill strong { display:block;font-size:.84rem;line-height:1.3; }

/* ═══════════════════════════════════════════
   FLASH MESSAGES
═══════════════════════════════════════════ */
.flash-message {
    margin-top:12px;border-radius:var(--r-md);
    padding:12px 14px;display:flex;align-items:center;gap:10px;
    font-weight:600;font-size:.9rem;
    animation:slideDown .35s var(--spring) both;
}
@keyframes slideDown {
    from { transform:translateY(-10px);opacity:0; }
    to   { transform:translateY(0);opacity:1; }
}
.flash-success { background:var(--success-lt);color:#12723A;border:1px solid #B0E3C4; }
.flash-warning { background:var(--warning-lt);color:#8A5208;border:1px solid #F5D78E; }
.flash-danger  { background:var(--danger-lt);color:#AD1A1A;border:1px solid #FAC5C5; }

/* ═══════════════════════════════════════════
   PAGE SHELL
═══════════════════════════════════════════ */
.page-shell {
    margin-top:22px;display:grid;gap:24px;
    width:min(1280px,100%);margin-left:auto;margin-right:auto;
}

/* ═══════════════════════════════════════════
   HERO CARD
═══════════════════════════════════════════ */
.hero-card {
    display:grid;
    grid-template-columns:1fr 420px;
    gap:28px;align-items:center;
    padding:38px;
    background:linear-gradient(140deg,#fff 0%,#F7F1E8 100%);
    border-radius:var(--r-2xl);
    border:1px solid rgba(201,149,76,.14);
    box-shadow:var(--sh-lg);
    overflow:hidden;position:relative;
}
.hero-card::before {
    content:'';position:absolute;
    width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle,rgba(201,149,76,.07),transparent 70%);
    top:-100px;right:-80px;pointer-events:none;
}

.hero-copy .eyebrow {
    color:var(--accent);font-size:.86rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
    display:flex;align-items:center;gap:8px;
}
.hero-copy .eyebrow::before {
    content:'';display:inline-block;
    width:20px;height:2px;
    background:var(--accent);border-radius:2px;
}
.hero-copy h1 {
    font-size:clamp(1.9rem,3.8vw,3.1rem);
    margin-top:14px;line-height:1.14;max-width:540px;
}
.hero-copy h1 em { font-style:normal;color:var(--primary); }
.hero-copy p {
    margin-top:15px;color:#5A718F;
    line-height:1.75;max-width:560px;font-size:.96rem;
}
.hero-actions { margin-top:27px;display:flex;flex-wrap:wrap;gap:12px; }

.hero-media { position:relative; }
.hero-media img {
    width:100%;aspect-ratio:4/3;
    object-fit:cover;border-radius:var(--r-lg);
    box-shadow:var(--sh-md);
}
.trust-pill {
    position:absolute;left:14px;bottom:14px;
    background:rgba(255,255,255,.96);
    border-radius:var(--r-md);
    border:1px solid rgba(201,149,76,.2);
    padding:10px 13px;
    display:flex;align-items:center;gap:10px;
    box-shadow:var(--sh-md);
    backdrop-filter:blur(10px);
}
.trust-pill i { color:var(--accent);font-size:1.15rem; }
.trust-pill strong { font-size:.85rem; }
.trust-pill small { color:#7A8FB0;font-size:.73rem; }

/* ═══════════════════════════════════════════
   STATS ROW
═══════════════════════════════════════════ */
.stats-row {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}
.stat-card {
    background:var(--card);border-radius:var(--r-lg);
    border:1px solid var(--line);
    padding:20px 18px;
    box-shadow:var(--sh-sm);
    position:relative;overflow:hidden;
    transition:all var(--t-base) var(--spring-soft);
}
.stat-card::before {
    content:'';position:absolute;
    top:0;left:0;right:0;height:3px;
    background:var(--grad-brand);
    border-radius:3px 3px 0 0;
}
.stat-card:hover { transform:translateY(-6px);box-shadow:var(--sh-lg); }
.stat-card:active { transform:translateY(-2px) scale(.99);transition:transform var(--t-instant) var(--smooth);box-shadow:var(--sh-sm); }
.stat-card h3 {
    font-size:clamp(1.3rem,2.5vw,1.9rem);
    color:var(--primary);margin-bottom:5px;
    font-family:'DM Sans',sans-serif;font-weight:800;
    letter-spacing:-.01em;
}
.stat-card p { color:#7080A0;font-weight:600;font-size:.87rem; }

/* ═══════════════════════════════════════════
   SECTION HEADINGS
═══════════════════════════════════════════ */
.section-head h2 { font-size:clamp(1.4rem,3vw,2rem); }
.section-head p  { margin-top:8px;color:#6B7D9F;font-size:.93rem; }
.section-head-inline {
    display:flex;align-items:flex-end;
    justify-content:space-between;gap:16px;
}

/* ═══════════════════════════════════════════
   CARE CARDS
═══════════════════════════════════════════ */
.care-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; }

.care-card {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    padding:22px;
    display:grid;grid-template-columns:1fr 200px;gap:18px;align-items:center;
    box-shadow:var(--sh-md);
    transition:transform var(--t-slow) var(--spring-soft),
               box-shadow var(--t-slow) var(--spring-soft),
               border-color var(--t-base) var(--smooth);
    cursor:pointer;
}
.care-card:hover { transform:translateY(-8px);box-shadow:var(--sh-xl);border-color:rgba(201,149,76,.28); }
.care-card:active { transform:translateY(-2px) scale(.985);transition:transform var(--t-instant) var(--smooth); }
.care-card img { width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-md); }
.care-body h3 { font-size:1.28rem;line-height:1.3; }
.care-body p  { margin-top:10px;color:#60729B;line-height:1.65;font-size:.91rem; }
.care-body ul { margin-top:14px;list-style:none;display:grid;gap:8px; }
.care-body li {
    display:flex;align-items:center;gap:8px;
    color:#20467F;font-size:.9rem;
}
.care-body li::before {
    content:'';width:6px;height:6px;
    border-radius:50%;background:var(--accent);flex-shrink:0;
}

/* ═══════════════════════════════════════════
   SHIFT TOGGLE
═══════════════════════════════════════════ */
.toggle-wrap {
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--r-md);padding:4px;display:flex;gap:5px;
    box-shadow:var(--sh-xs);
}
.shift-toggle {
    border:none;background:transparent;border-radius:var(--r-sm);
    padding:10px 16px;color:#4E628F;
    font-weight:700;font-size:.87rem;cursor:pointer;
    transition:all var(--t-base) var(--spring-soft);
}
.shift-toggle:hover { background:var(--bg-2); }
.shift-toggle.active{
    color:#fff;
    background:var(--grad-brand);
    border:1px solid rgba(212,168,92,.35);
    box-shadow:0 10px 26px rgba(10,47,143,.28),inset 0 1px 0 rgba(255,255,255,.2);
}

/* ═══════════════════════════════════════════
   PACKAGE CARDS
═══════════════════════════════════════════ */
.package-grid {
    display:none;gap:18px;
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.package-grid.is-visible { display:grid; }

.package-card {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-xl);padding:26px 22px;
    position:relative;overflow:hidden;
    transition:transform var(--t-slow) var(--spring-soft),
               box-shadow var(--t-slow) var(--spring-soft);
    cursor:pointer;
}
.package-card:hover { transform:translateY(-10px);box-shadow:var(--sh-2xl); }
.package-card:active { transform:translateY(-4px) scale(.985);transition:transform var(--t-instant) var(--smooth); }
.package-card.popular { border:2px solid var(--accent);box-shadow:0 10px 40px rgba(201,149,76,.2); }

.popular-pill {
    position:absolute;right:16px;top:14px;
    background:var(--grad-gold);
    color:#fff;padding:5px 12px;border-radius:var(--r-full);
    font-size:.68rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;box-shadow:var(--sh-accent);
}

.package-icon {
    width:46px;height:46px;border-radius:var(--r-sm);
    background:var(--accent-lt);color:var(--accent-dk);
    display:inline-flex;align-items:center;justify-content:center;
    margin-bottom:14px;font-size:1.2rem;
}
.package-card h3 { font-size:1.22rem; }
.package-price {
    margin-top:10px;font-size:2rem;font-weight:800;color:var(--primary);
    display:flex;align-items:baseline;gap:5px;
    font-family:'DM Sans',sans-serif;
}
.package-price small { color:#8A9BB8;font-size:.78rem;font-weight:600; }
.package-card ul { margin:18px 0;list-style:none;display:grid;gap:11px; }
.package-card li {
    display:flex;align-items:flex-start;gap:9px;
    color:#2A4678;font-size:.87rem;line-height:1.55;
}
.package-card li i { color:var(--accent);margin-top:4px;font-size:.72rem;flex-shrink:0; }

/* ==========================================
   NIGHT PACKAGE THEME
========================================== */
.shift-toggle i{ margin-right:8px; }
.option-pill i{ margin-right:6px; }

.package-grid.night-theme .package-card{
    background:linear-gradient(180deg,#181818 0%,#0e0e0e 100%);
    border:1px solid #2f2f2f;
    color:#ffffff;
    box-shadow:0 16px 44px rgba(0,0,0,.5);
}
.package-grid.night-theme .package-card:hover{
    border-color:#f3c96b;
    transform:translateY(-10px);
    box-shadow:0 22px 56px rgba(0,0,0,.6);
}
.package-grid.night-theme .package-card h3{ color:#ffffff; }
.package-grid.night-theme .package-price{ color:#ffffff; }
.package-grid.night-theme .package-price small{ color:#c7c7c7; }
.package-grid.night-theme .package-card li{ color:#e3e3e3; }
.package-grid.night-theme .package-icon{ background:#232323;color:#f3c96b; }
.package-grid.night-theme .popular-pill{
    background:linear-gradient(135deg,#f3c96b,#d99a2b);
    color:#111;
}

/* ═══════════════════════════════════════════
   EQUIPMENT SCROLL
═══════════════════════════════════════════ */
.equipment-scroll{
    display:flex;
    gap:24px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scroll-snap-type:x proximity;
    padding-bottom:12px;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
}
.equipment-scroll::-webkit-scrollbar{ height:8px; }
.equipment-scroll::-webkit-scrollbar-track{ background:#f3f3f3;border-radius:20px; }
.equipment-scroll::-webkit-scrollbar-thumb{ background:var(--primary);border-radius:20px; }

.equipment-card {
    flex: 0 0 230px;
    scroll-snap-align:start;
    background:var(--card);
    border-radius:var(--r-lg);padding:14px;
    border:1px solid var(--line);
    transition:transform var(--t-base) var(--spring-soft),
               box-shadow var(--t-base) var(--spring-soft),
               border-color var(--t-base) var(--smooth);
    cursor:pointer;overflow:hidden;
}
.equipment-card:hover { transform:translateY(-6px) scale(1.015);box-shadow:var(--sh-lg);border-color:rgba(201,149,76,.24); }
.equipment-card:active { transform:scale(.97);transition:transform var(--t-instant) var(--smooth); }
.equipment-card img {
    width:100%;aspect-ratio:1/1;object-fit:cover;
    border-radius:var(--r-sm);margin-bottom:10px;
    transition:transform var(--t-slow) var(--smooth);
}
.equipment-card:hover img { transform:scale(1.06); }
.equipment-card h4 { font-size:.91rem;font-family:'DM Sans',sans-serif;font-weight:600; }
.equipment-card p { margin-top:5px;color:var(--primary);font-weight:700;font-size:.87rem; }
.equipment-card p small { color:#8A9CB8;font-weight:600; }

/* ═══════════════════════════════════════════
   HOW IT WORKS STEPS
═══════════════════════════════════════════ */
.steps-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
}
.steps-grid article {
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--r-md);padding:18px 16px;
    transition:all var(--t-base) var(--spring-soft);
}
.steps-grid article:hover { transform:translateY(-4px);box-shadow:var(--sh-sm);border-color:rgba(10,47,143,.2); }
.steps-grid article:active { transform:translateY(-1px) scale(.99);transition:transform var(--t-instant) var(--smooth); }
.steps-grid span {
    color:var(--accent);font-size:.73rem;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;
}
.steps-grid h4 {
    margin-top:8px;font-size:.94rem;
    font-family:'DM Sans',sans-serif;font-weight:700;
}
.steps-grid p { margin-top:7px;color:#6A7CA4;font-size:.83rem;line-height:1.55; }

/* ═══════════════════════════════════════════
   TRUST STRIP
═══════════════════════════════════════════ */
.trust-strip {
    background:linear-gradient(120deg,var(--primary-dk) 0%,var(--teal) 100%);
    border-radius:var(--r-lg);padding:18px;color:#fff;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
    position:relative;overflow:hidden;
    box-shadow:var(--sh-brand);
}
.trust-strip::before {
    content:'';position:absolute;inset:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events:none;
}
.trust-strip article {
    display:flex;align-items:center;gap:10px;
    border-right:1px solid rgba(255,255,255,.18);
    padding-right:10px;position:relative;z-index:1;
}
.trust-strip article:last-child { border-right:none; }
.trust-strip i { font-size:1.2rem;opacity:.92; }
.trust-strip h4 { color:#fff;font-size:.87rem;font-family:'DM Sans',sans-serif;font-weight:700; }
.trust-strip p  { color:#fff;margin-top:3px;font-size:.75rem;opacity:.88; }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn {
    display:inline-flex;align-items:center;
    justify-content:center;gap:8px;
    border-radius:var(--r-sm);padding:12px 20px;
    border:1.5px solid transparent;
    font-weight:700;font-size:.91rem;cursor:pointer;
    transition:transform var(--t-base) var(--spring-soft),
               box-shadow var(--t-base) var(--spring-soft),
               background var(--t-base) var(--smooth),
               border-color var(--t-base) var(--smooth);
    letter-spacing:.01em;white-space:nowrap;
    position:relative;overflow:hidden;
    -webkit-tap-highlight-color:transparent;
    will-change:transform;
}
.btn:active {
    transform:scale(.96) translateY(1px) !important;
    transition:transform var(--t-instant) var(--smooth) !important;
    box-shadow:var(--sh-press) !important;
}

/* Ripple */
.btn::after {
    content:'';position:absolute;
    inset:0;background:rgba(255,255,255,.16);
    border-radius:inherit;opacity:0;
    transform:scale(0);
    transition:transform .45s var(--smooth),opacity .45s var(--smooth);
}
.btn:active::after { transform:scale(2);opacity:1;transition:none; }

.btn-gradient {
    color:#fff;
    background:var(--grad-brand);
    box-shadow:var(--sh-brand);
}
.btn-gradient:hover{
    transform:translateY(-3px);
    background:var(--grad-brand-hover);
    box-shadow:0 20px 46px rgba(10,47,143,.36);
}

.btn-accent {
    color:#fff;
    background:var(--grad-gold);
    box-shadow:var(--sh-accent);border-color:transparent;
}
.btn-accent:hover { transform:translateY(-3px);box-shadow:0 16px 38px rgba(201,149,76,.38); }

.btn-outline {
    border-color:var(--line);color:var(--primary);background:#fff;
}
.btn-outline:hover { transform:translateY(-2px);border-color:rgba(10,47,143,.32);box-shadow:var(--sh-xs); }

.btn-soft {
    border-color:rgba(10,47,143,.15);color:var(--primary);background:var(--primary-lt);
}
.btn-soft:hover { transform:translateY(-2px);background:#E0ECFA; }

.btn-full { width:100%; }

/* Loading spinner state */
.btn-loading {
    color:transparent !important;pointer-events:none;
}
.btn-loading::before {
    content:'';position:absolute;
    width:18px;height:18px;border-radius:50%;
    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════
   MODALS
═══════════════════════════════════════════ */
.modal {
    position:fixed;inset:0;
    background:rgba(8,20,42,.6);
    backdrop-filter:blur(7px);
    display:none;align-items:center;justify-content:center;
    padding:16px;z-index:2500;
    animation:modalBackdropIn .3s var(--smooth) both;
}
.modal.show { display:flex; }
@keyframes modalBackdropIn { from { opacity:0; } to { opacity:1; } }

.modal-card {
    width:min(96vw,640px);
    background:linear-gradient(180deg,#fff 0%,#FAF7F2 100%);
    border-radius:var(--r-xl);
    border:1px solid var(--line);
    box-shadow:var(--sh-2xl);
    padding:24px;
    position:relative;
    display:flex;
    flex-direction:column;
    max-height:92vh;
    overflow:hidden;
    animation:modalIn .42s var(--spring-soft) both;
}
@keyframes modalIn {
    from { transform:translateY(26px) scale(.965);opacity:0; }
    to   { transform:translateY(0) scale(1);opacity:1; }
}

.modal-close {
    position:absolute;right:14px;top:14px;
    width:34px;height:34px;border-radius:10px;
    border:1px solid var(--line);background:#fff;color:#4A608F;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all var(--t-base) var(--spring-soft);
}
.modal-close:hover { background:var(--bg-2);border-color:rgba(201,149,76,.25);transform:scale(1.08) rotate(90deg); }
.modal-card h3 { font-size:1.3rem; }
.modal-subtitle { color:#5E729F;margin-top:5px;margin-bottom:16px;font-size:.91rem; }

/* ==========================================
   NIGHT BUILDER
========================================== */
.night-builder .modal-card{
    background:linear-gradient(180deg,#161616 0%,#0f0f0f 100%);
    color:#ffffff;
    border-color:#2d2d2d;
}
.night-builder h3{ color:#ffffff; }
.night-builder .modal-subtitle{ color:#d5d5d5; }
.night-builder .builder-options-wrap{ background:#1b1b1b;border-color:#353535; }
.night-builder .builder-option-block label{ color:#ffffff; }
.night-builder .option-pill{ background:#232323;border-color:#3b3b3b;color:#ffffff; }
.night-builder .option-pill:hover{ border-color:#f3c96b; }
.night-builder .option-pill.active{ background:linear-gradient(135deg,#16496E,#1A7F74);color:#ffffff; }
.night-builder .builder-feature-list li{ color:#e4e4e4; }
.night-builder .builder-price{ color:#ffffff; }
.night-builder .builder-totals div{ color:#dddddd; }
.night-builder .builder-totals strong{ color:#ffffff; }
.night-builder .modal-footer-bar{ background:#161616;border-top:1px solid #343434; }
.night-builder .modal-footer-bar strong{ color:#ffffff; }
.night-builder .modal-footer-bar small{ color:#cfcfcf; }

/* ═══════════════════════════════════════════
   PAYMENT OVERLAY
═══════════════════════════════════════════ */
.payment-overlay {
    position:fixed;inset:0;z-index:9000;
    background:rgba(8,20,42,.74);
    backdrop-filter:blur(11px);
    display:none;place-items:center;
    animation:fadeIn .3s var(--smooth);
}
.payment-overlay.show { display:grid; }
.payment-overlay-card {
    background:#fff;border-radius:var(--r-xl);
    box-shadow:var(--sh-2xl);
    padding:40px 32px;text-align:center;
    width:min(92vw,340px);
}
.payment-spinner {
    width:52px;height:52px;border-radius:50%;
    border:3px solid var(--line);
    border-top-color:var(--primary);
    animation:spin .8s linear infinite;
    margin:0 auto 18px;
}
.payment-overlay-card h3 { font-size:1.15rem;margin-bottom:6px; }
.payment-overlay-card p { color:var(--muted);font-size:.88rem; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ═══════════════════════════════════════════
   FORMS
═══════════════════════════════════════════ */
.booking-form,.profile-form,.checkout-form { display:grid;gap:14px; }
.form-grid { display:grid;gap:14px; }
.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }

.booking-form label span,
.profile-form label span,
.auth-card label span,
.checkout-form label span {
    font-size:.83rem;font-weight:700;
    color:#344F80;margin-bottom:5px;display:block;
}

input,select,textarea {
    width:100%;border-radius:var(--r-sm);
    border:1.5px solid var(--line);
    background:#fff;padding:11.5px 13px;color:var(--text);
    transition:
        border-color var(--t-fast) var(--smooth),
        box-shadow var(--t-base) var(--spring-soft),
        background var(--t-fast) var(--smooth),
        transform var(--t-fast) var(--smooth);
}
input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) { border-color:rgba(10,47,143,.3); }
input:focus,select:focus,textarea:focus {
    outline:none;
    border-color:rgba(10,47,143,.55);
    box-shadow:0 0 0 4px rgba(10,47,143,.11),0 6px 16px rgba(10,47,143,.06);
    transform:translateY(-1px);
}
input.input-error,select.input-error,textarea.input-error {
    border-color:var(--danger);
    box-shadow:0 0 0 3px rgba(192,57,43,.1);
}
.booking-form textarea,.profile-form textarea { min-height:90px; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.site-footer {
    margin-top:10px;background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-lg);padding:22px;
    box-shadow:var(--sh-sm);
}
.footer-grid {
    display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px;
}
.footer-grid h4 { font-size:1.06rem;margin-bottom:10px; }
.footer-grid h5 {
    margin-bottom:9px;font-size:.86rem;
    font-family:'DM Sans',sans-serif;font-weight:700;
    color:#3A5080;text-transform:uppercase;letter-spacing:.06em;
}
.footer-grid p,.footer-grid a,.footer-grid span {
    display:block;margin-top:6px;
    font-size:.85rem;color:#6A7A9E;
    transition:color var(--t-fast) var(--smooth);
}
.footer-grid a:hover { color:var(--primary); }
.copyright {
    margin-top:16px;text-align:center;
    font-size:.77rem;color:#8E9CB8;
    padding-top:14px;border-top:1px solid var(--line);
}

/* ═══════════════════════════════════════════
   MOBILE OVERLAY
═══════════════════════════════════════════ */
.mobile-overlay {
    display:none;position:fixed;inset:0;
    background:rgba(8,20,42,.5);z-index:1100;
    backdrop-filter:blur(3px);
    transition:opacity var(--t-base) var(--smooth);
}
.mobile-overlay.show { display:block; }

/* ═══════════════════════════════════════════
   MOBILE BOTTOM NAV — hidden on desktop
═══════════════════════════════════════════ */
.mobile-nav { display:none; }

/* ═══════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════ */
.empty-state {
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--r-xl);padding:44px 24px;
    text-align:center;box-shadow:var(--sh-sm);
}
.empty-state i { font-size:2.4rem;color:var(--accent); }
.empty-state h3 { margin-top:14px; }
.empty-state p { margin-top:8px;color:#63759D;margin-bottom:18px;font-size:.92rem; }

/* ═══════════════════════════════════════════
   BOOKING CARDS
═══════════════════════════════════════════ */
.booking-list { display:grid;gap:14px; }

.booking-card {
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--r-lg);padding:18px;
    transition:all var(--t-base) var(--spring-soft);
}
.booking-card:hover { transform:translateY(-3px);box-shadow:var(--sh-md); }
.booking-card:active { transform:translateY(-1px) scale(.992);transition:transform var(--t-instant) var(--smooth); }

.booking-head {
    display:flex;justify-content:space-between;
    gap:12px;align-items:flex-start;
}
.booking-head p { margin-top:4px;color:#7082AA;font-size:.86rem; }

.status-badge {
    border-radius:var(--r-full);padding:5px 12px;
    font-size:.7rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
}
.status-pending   { background:var(--warning-lt);color:#9A5E06;border:1px solid #F5D598; }
.status-confirmed,
.status-in-progress,
.status-completed { background:var(--success-lt);color:#157347;border:1px solid #ACDFCA; }
.status-cancelled { background:var(--danger-lt);color:#B42318;border:1px solid #FAC5C5; }

.booking-meta {
    margin-top:10px;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;color:#456090;font-size:.85rem;
}
.booking-address {
    margin-top:10px;color:#3A5489;
    display:flex;gap:8px;align-items:flex-start;font-size:.86rem;
}

/* ═══════════════════════════════════════════
   AUTH PAGES
═══════════════════════════════════════════ */
.auth-layout .app-content {
    width:100%;max-width:560px;
    margin:0 auto;padding:28px 14px;
}
.auth-shell { min-height:calc(100vh - 140px);display:grid;place-items:center; }
.auth-card {
    width:100%;
    background:rgba(255,255,255,.97);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    box-shadow:var(--sh-lg);
    padding:28px;display:grid;gap:14px;
}
.auth-card-wide { max-width:760px; }
.auth-logo { width:140px; }
.auth-card h1 { font-size:1.5rem; }
.auth-card p { color:#6378A3;line-height:1.58;font-size:.92rem; }

.phone-field {
    display:grid;grid-template-columns:64px 1fr;
    border:1.5px solid var(--line);border-radius:var(--r-sm);
    background:#fff;overflow:hidden;
    transition:border-color var(--t-fast) var(--smooth),box-shadow var(--t-fast) var(--smooth);
}
.phone-field:focus-within {
    border-color:rgba(10,47,143,.5);
    box-shadow:0 0 0 4px rgba(10,47,143,.1);
}
.phone-field strong {
    display:grid;place-items:center;
    background:var(--bg-2);color:#2D4F8D;
    font-size:.9rem;border-right:1.5px solid var(--line);
}
.phone-field input { border:none;box-shadow:none !important; }

#recaptcha-container { min-height:40px; }
.otp-group { display:none;gap:12px; }
.otp-group.show { display:grid; }

.mobile-pill {
    background:var(--accent-lt);border:1px solid rgba(201,149,76,.2);
    color:#7A4E10;border-radius:var(--r-sm);
    padding:10px 12px;font-weight:700;
    display:inline-flex;align-items:center;gap:8px;
}
.profile-form { display:grid;gap:14px; }
.status-note { font-size:.84rem;color:#5E7199;min-height:18px; }
.status-note.success { color:#15803D; }
.status-note.error   { color:#B91C1C; }
.status-note.info    { color:#1E4FA5; }

/* ═══════════════════════════════════════════
   REVEAL ANIMATION
═══════════════════════════════════════════ */
.reveal {
    opacity:0;transform:translateY(38px);
    transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
}
.reveal.in-view { opacity:1;transform:translateY(0); }

body.modal-open { overflow:hidden; }

/* ═══════════════════════════════════════════
   BUILDER / CHECKOUT MODALS
═══════════════════════════════════════════ */
.modal-card-xl{ width:min(96vw,900px); }
.modal-card-xxl{ width:min(96vw,1080px); }

.builder-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:24px;
    overflow-y:auto;
    flex:1;
    padding-right:8px;
    padding-bottom:20px;
}
.builder-price {
    margin-top:8px;font-size:1.55rem;font-weight:800;
    color:var(--primary);font-family:'DM Sans',sans-serif;
}
.builder-feature-list { margin-top:16px;list-style:none;display:grid;gap:11px; }
.builder-feature-list li {
    display:flex;align-items:flex-start;gap:8px;
    color:#28477D;font-size:.89rem;
}
.builder-feature-list li i { color:var(--accent);margin-top:4px;font-size:.72rem; }

.builder-options-wrap{
    border:1px solid var(--line);
    border-radius:var(--r-md);
    background:var(--bg);
    padding:18px;
    display:grid;
    gap:16px;
    margin-bottom:20px;
}
.builder-option-block { display:grid;gap:8px; }
.builder-option-block label { font-size:.82rem;font-weight:700;color:#2F4F8D; }

.option-pills { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.tenure-pills { grid-template-columns:repeat(4,minmax(0,1fr)); }

.option-pill {
    border:1.5px solid var(--line);background:var(--card);
    color:#325590;padding:10px 8px;border-radius:var(--r-sm);
    font-size:.81rem;font-weight:700;cursor:pointer;text-align:center;
    transition:all var(--t-base) var(--spring-soft);
}
.option-pill:hover { border-color:rgba(10,47,143,.32);transform:translateY(-1px); }
.option-pill:active { transform:scale(.95);transition:transform var(--t-instant) var(--smooth); }
.option-pill.active {
    background:var(--grad-brand);
    color:#fff;border-color:transparent;
    box-shadow:0 10px 26px rgba(10,47,143,.3),0 0 0 1px rgba(212,168,92,.18);
    transform:translateY(-1px);
}

.builder-totals { border-top:1px dashed var(--line);padding-top:13px;display:grid;gap:9px; }
.builder-totals div {
    display:flex;justify-content:space-between;gap:10px;
    color:#36568F;font-size:.89rem;
}
.builder-totals strong { color:var(--primary); }

.modal-footer-bar {
    position:sticky;left:0;right:0;bottom:-1px;
    z-index:20;margin-top:auto;
    border-top:1px solid var(--line);
    background:#ffffff;
    backdrop-filter:blur(8px);
    border-radius:0 0 var(--r-xl) var(--r-xl);
    padding:14px 22px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    box-shadow:0 -10px 32px rgba(16,35,64,.10);
}
.modal-footer-bar small { display:block;color:#7082AA;font-size:.73rem; }
.modal-footer-bar strong { display:block;color:var(--primary);font-size:1rem; }
.footer-actions-inline { display:inline-flex;gap:10px;align-items:center; }

/* ═══════════════════════════════════════════
   EQUIPMENT POPUP
═══════════════════════════════════════════ */
.equipment-popup-grid {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
    max-height:60vh;overflow:auto;padding-right:4px;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.equipment-popup-card {
    border:1.5px solid var(--line);border-radius:var(--r-md);
    background:var(--card);padding:13px;
    display:grid;grid-template-columns:110px 1fr;gap:13px;
    transition:all var(--t-base) var(--spring-soft);
}
.equipment-popup-card:hover { border-color:rgba(201,149,76,.32);box-shadow:var(--sh-sm);transform:translateY(-2px); }
.equipment-popup-card:active { transform:translateY(0) scale(.99);transition:transform var(--t-instant) var(--smooth); }
.equipment-popup-card img { width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm); }
.equipment-popup-card h4 { font-size:.97rem;font-family:'DM Sans',sans-serif;font-weight:700; }
.equipment-popup-card p { margin-top:5px;color:#62789F;font-size:.82rem;line-height:1.45; }
.equipment-popup-card strong { display:block;margin-top:8px;color:var(--primary);font-size:.89rem; }

.qty-controls {
    margin-top:10px;display:inline-grid;
    grid-template-columns:34px 44px 34px;
    align-items:center;justify-items:center;
    border:1.5px solid var(--line);
    border-radius:var(--r-full);overflow:hidden;
}
.qty-controls button {
    border:none;width:34px;height:34px;
    background:var(--bg);color:var(--primary);
    font-size:1rem;cursor:pointer;
    transition:background var(--t-fast) var(--smooth),
               transform var(--t-instant) var(--smooth);
    font-weight:700;
}
.qty-controls button:hover { background:var(--bg-2); }
.qty-controls button:active:not(:disabled) { transform:scale(.85);background:var(--bg-3); }
.qty-controls button:disabled { opacity:.4;cursor:not-allowed; }
.qty-controls span { font-weight:700;color:var(--text);font-size:.88rem; }

/* ═══════════════════════════════════════════
   CHECKOUT
═══════════════════════════════════════════ */
.checkout-grid {
    display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.checkout-card {
    background:linear-gradient(180deg,#fff 0%,#FAF7F2 100%);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-md);padding:20px;
    transition:box-shadow var(--t-base) var(--spring-soft);
}
.checkout-card:hover { box-shadow:var(--sh-lg); }
.checkout-card h3 { margin-bottom:14px;font-size:1.08rem; }
#checkoutCartSummary { display:grid;gap:9px; }
.checkout-summary-row {
    display:flex;justify-content:space-between;gap:10px;
    padding:10px 13px;border-radius:var(--r-sm);
    background:var(--bg);border:1px solid var(--line);
    color:#315289;font-size:.88rem;
}
.checkout-summary-row strong { color:var(--primary); }
.checkout-total-row {
    margin-top:13px;padding-top:13px;
    border-top:1px dashed var(--line);
    display:flex;justify-content:space-between;align-items:center;
}
.checkout-total-row span  { font-weight:700;color:#2F4D85; }
.checkout-total-row strong { font-size:1.25rem;color:var(--primary); }
.checkout-note { margin-top:11px;color:#6B7EA6;font-size:.83rem;line-height:1.5; }

.readonly-info-grid {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;margin-bottom:14px;
}
.readonly-info {
    background:var(--bg);border:1px solid var(--line);
    border-radius:var(--r-sm);padding:10px 12px;display:grid;gap:4px;
}
.readonly-info-full { grid-column:1/-1; }
.readonly-info small {
    color:#7082AA;font-size:.69rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;
}
.readonly-info strong { color:#25467D;font-size:.88rem;line-height:1.5;word-break:break-word; }

/* ═══════════════════════════════════════════
   RESPONSIVE — 1200px
═══════════════════════════════════════════ */
@media (max-width:1200px) {
    .hero-card { grid-template-columns:1fr 360px; }
    .package-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .steps-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .trust-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .trust-strip article { border-right:none;padding-right:0; }
    .builder-grid { grid-template-columns:1fr; }
    .equipment-popup-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — 991px (tablet + mobile)
   App-style transformation begins here
═══════════════════════════════════════════ */
@media (max-width:991px) {
    .sidebar { display:none; }
    .app-content {
        padding:14px;
        padding-bottom:calc(92px + env(safe-area-inset-bottom));
    }
    .mobile-only { display:none !important; }
    .location-chip { min-width:0;width:auto;max-width:54vw; }

    .topbar {
        align-items:center;flex-direction:row;
        position:sticky;top:8px;z-index:1000;padding:10px 12px;
        border-radius:var(--r-lg);
    }
    .topbar-right { justify-content:flex-end;margin-left:auto;gap:8px; }
    .profile-pill { padding:4px 8px 4px 4px;gap:7px; }
    .profile-pill small { display:none; }
    .profile-pill strong {
        font-size:.77rem;max-width:72px;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .profile-pill img { width:30px;height:30px; }

    .hero-card {
        grid-template-columns:1fr;
        padding:22px;gap:18px;
        border-radius:var(--r-xl);
    }
    .hero-media img { aspect-ratio:16/13; }
    .stats-row { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
    .care-grid { grid-template-columns:1fr;gap:16px; }
    .care-card { grid-template-columns:1fr;gap:14px;border-radius:var(--r-lg); }
    .care-card img { aspect-ratio:16/9; }
    .package-grid { grid-template-columns:1fr; }
    .section-head-inline { flex-direction:column;align-items:flex-start;gap:10px; }
    .toggle-wrap { width:100%; }
    .shift-toggle { flex:1; }
    .steps-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .footer-grid { grid-template-columns:1fr;gap:18px; }
    .checkout-grid { grid-template-columns:1fr; }
    .modal-card-xl,.modal-card-xxl { width:min(98vw,760px); }
    .readonly-info-grid { grid-template-columns:1fr; }
    .booking-meta { grid-template-columns:1fr;gap:6px; }

    /* Cards get a touch more "native app" roundness + tap feedback everywhere */
    .booking-card,.equipment-card,.stat-card,.empty-state,.checkout-card,.auth-card {
        border-radius:var(--r-lg);
    }
    .btn,.icon-btn { border-radius:16px; }

    /* ── PREMIUM MOBILE NAV — floating app tab-bar ── */
    .mobile-nav {
        position:fixed;
        left:12px;right:12px;
        bottom:calc(10px + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.92);
        backdrop-filter:blur(26px) saturate(1.7);
        -webkit-backdrop-filter:blur(26px) saturate(1.7);
        border:1px solid rgba(231,220,208,.65);
        border-radius:24px;
        box-shadow:
            0 14px 44px rgba(16,40,80,.14),
            0 3px 10px rgba(16,40,80,.07),
            inset 0 1px 0 rgba(255,255,255,.85);
        display:grid;grid-template-columns:repeat(5,1fr);
        z-index:9999;padding:6px;gap:2px;
        transition:
            transform .38s var(--spring-soft),
            opacity .32s var(--smooth),
            visibility .38s var(--smooth);
    }
    .mobile-nav a {
        padding:9px 4px;
        display:grid;place-items:center;gap:4px;
        color:#7A8FB0;font-size:.67rem;font-weight:700;
        border-radius:18px;
        transition:all var(--t-base) var(--spring-soft);
        letter-spacing:.01em;
    }
    .mobile-nav a i { font-size:.98rem;transition:transform var(--t-base) var(--spring); }
    .mobile-nav a:hover { background:rgba(10,47,143,.06);color:var(--primary); }
    .mobile-nav a:active { transform:scale(.88);transition:transform var(--t-instant) var(--smooth); }
    .mobile-nav a.active {
        background:var(--grad-brand);
        color:#fff;
        box-shadow:0 8px 20px rgba(10,47,143,.32);
        transform:translateY(-2px);
    }
    .mobile-nav a.active:active { transform:translateY(-2px) scale(.92); }
    .mobile-nav a.active i { transform:scale(1.08); }

    .mobile-nav.hidden-nav{
        transform:translateY(180px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — 768px
═══════════════════════════════════════════ */
@media (max-width:768px) {
    .form-grid.two { grid-template-columns:1fr; }
    .steps-grid { grid-template-columns:1fr; }
    .trust-strip { grid-template-columns:1fr; }
    .auth-card { padding:22px 18px;border-radius:var(--r-lg); }
    .tenure-pills { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .equipment-popup-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .modal-footer-bar {
        padding:12px 14px;
        flex-direction:column;align-items:stretch;
    }
    .footer-actions-inline {
        width:100%;display:grid;
        grid-template-columns:1fr 1fr;
    }
    .footer-actions-inline .btn { width:100%; }
    .equipment-popup-card { grid-template-columns:1fr; }
    .location-chip { max-width:calc(100vw - 116px); }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — 575px (small phones)
   Final app-native touches
═══════════════════════════════════════════ */
@media (max-width:575px) {
    .app-content {
        padding:12px;
        padding-bottom:calc(86px + env(safe-area-inset-bottom));
    }
    .stats-row { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
    .hero-actions { flex-direction:column; }
    .btn { width:100%; }
    .location-chip strong { max-width:140px; }
    .hero-copy h1 { font-size:1.86rem;line-height:1.18; }
    .hero-card,.care-card,.package-card,.site-footer { border-radius:var(--r-lg); }
    .modal-card {
        border-radius:var(--r-lg) var(--r-lg) 0 0;width:100vw;max-width:100vw;
        align-self:flex-end;margin-bottom:0;
        padding-top:30px;
        animation:sheetIn var(--t-sheet) var(--spring-soft) both;
    }
    .modal-card::before {
        content:'';
        position:absolute;top:11px;left:50%;
        width:40px;height:4px;border-radius:99px;
        background:rgba(20,40,70,.14);
        transform:translateX(-50%);
    }
    .modal { align-items:flex-end;padding:0; }
    @keyframes sheetIn {
        from { transform:translateY(100%); }
        to   { transform:translateY(0); }
    }
    .toast-container { top:10px;right:10px;left:10px;max-width:none; }
    .stat-card { padding:16px 14px; }
    .care-card,.package-card { padding:18px; }
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}

.remove-cart-btn,
.remove-package-btn{
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:#ffe6e6;
    color:#d32f2f;
    cursor:pointer;
    font-size:18px;
    transition:.28s var(--spring-soft);
}
.remove-cart-btn:hover,
.remove-package-btn:hover{
    background:#d32f2f;
    color:#fff;
    transform:scale(1.06);
}

/* =====================================================
   PROFILE DROPDOWN
===================================================== */
.profile-menu{ position:relative;display:flex;align-items:center; }
.profile-trigger{ cursor:pointer; }
.profile-trigger i{ transition:.3s var(--smooth); }

.profile-menu .profile-dropdown{
    position:absolute;
    top:calc(100% + 14px);
    right:0;
    width:290px;
    background:#fff;
    border-radius:22px;
    border:1px solid rgba(10,47,143,.08);
    box-shadow:var(--sh-2xl);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px) scale(.98);
    transition:.32s var(--spring-soft);
    z-index:99999;
}
.profile-menu .profile-dropdown.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}
.profile-menu .show + .profile-trigger i,
.profile-trigger[aria-expanded="true"] i{
    transform:rotate(180deg);
}

.profile-header{
    padding:22px;
    display:flex;
    align-items:center;
    gap:15px;
    background:var(--grad-brand);
    color:#fff;
}
.profile-header img{
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid rgba(255,255,255,.45);
}
.profile-header h4{ color:#fff;font-size:17px;margin-bottom:3px; }
.profile-header p{ color:rgba(255,255,255,.85);font-size:13px; }

.profile-links{ padding:10px; }
.profile-links a{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border-radius:14px;
    font-weight:600;
    color:#28477D;
    transition:.25s var(--spring-soft);
}
.profile-links a i{ width:22px;color:#0A2F8F; }
.profile-links a:hover{
    background:#EEF5FF;
    color:#0A2F8F;
    transform:translateX(4px);
}
.profile-links a.logout{ color:#d32f2f; }
.profile-links a.logout i{ color:#d32f2f; }
.profile-links a.logout:hover{ background:#FFF1F1; }

@media(max-width:768px){
    .profile-dropdown{
        width:260px;
        right:-10px;
    }
}

@media (max-width:575px) {
    #packageBuilderModal .footer-actions-inline { width:100%; }
    #packageBuilderModal .footer-actions-inline .btn { width:100%; }
}

/* =====================================================
   WORKER REGISTRATION
===================================================== */
.worker-hero {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);
    gap:22px;
    align-items:stretch;
    padding:34px;
    border-radius:var(--r-xl);
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(234,242,248,.86)),
        radial-gradient(circle at 92% 12%, rgba(212,168,92,.22), transparent 30%);
    border:1px solid rgba(214,200,186,.9);
    box-shadow:var(--sh-lg);
}
.worker-hero h1 {
    margin:8px 0 10px;
    max-width:760px;
    color:var(--text);
    font-family:"Playfair Display", serif;
    font-size:clamp(2rem, 4vw, 3.7rem);
    line-height:1.04;
}
.worker-hero p {
    max-width:720px;
    color:var(--text-2);
    font-size:1rem;
    line-height:1.7;
}
.worker-hero-panel {
    display:grid;
    align-content:center;
    gap:11px;
    min-height:210px;
    padding:26px;
    border-radius:var(--r-lg);
    background:var(--grad-brand);
    color:#fff;
    box-shadow:var(--sh-brand);
}
.worker-hero-panel i { font-size:2.1rem;color:#F6D38B; }
.worker-hero-panel strong { font-size:1.1rem; }
.worker-hero-panel span { color:rgba(255,255,255,.84);line-height:1.55; }

.worker-shell {
    margin-top:24px;
    border:1px solid rgba(214,200,186,.9);
    border-radius:var(--r-xl);
    background:rgba(255,255,255,.88);
    box-shadow:var(--sh-lg);
    overflow:hidden;
}
.worker-tabs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    padding:14px;
    background:rgba(234,242,248,.62);
    border-bottom:1px solid rgba(214,200,186,.82);
}
.worker-tab {
    min-height:54px;
    border:1px solid rgba(10,47,143,.1);
    border-radius:18px;
    background:#fff;
    color:#2F4D85;
    font:700 .94rem/1 "DM Sans", sans-serif;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:.25s var(--spring-soft);
}
.worker-tab i { color:var(--primary); }
.worker-tab:hover {
    transform:translateY(-1px);
    border-color:rgba(10,47,143,.24);
    box-shadow:var(--sh-xs);
}
.worker-tab:active {
    transform:scale(.96);
    transition:transform var(--t-instant) var(--smooth);
}
.worker-tab.active {
    background:var(--grad-brand);
    color:#fff;
    border-color:transparent;
    box-shadow:var(--sh-brand);
}
.worker-tab.active i { color:#F6D38B; }

.worker-form {
    display:grid;
    gap:16px;
    padding:26px;
}
.worker-form-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding-bottom:8px;
}
.worker-form-head h2 {
    color:var(--text);
    font-size:1.45rem;
    margin-bottom:5px;
}
.worker-form-head p { color:var(--muted);line-height:1.55; }
.worker-form-head span {
    flex:0 0 auto;
    padding:8px 12px;
    border-radius:var(--r-full);
    background:var(--accent-lt);
    color:var(--accent-dk);
    font-size:.78rem;
    font-weight:800;
}
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.worker-form label span {
    display:block;
    margin-bottom:7px;
    color:#2E4778;
    font-size:.78rem;
    font-weight:800;
}
.worker-form input,
.worker-form select {
    width:100%;
    min-height:48px;
    border:1px solid rgba(214,200,186,.95);
    border-radius:15px;
    background:#fff;
    color:var(--text);
    padding:0 14px;
    font:600 .92rem/1.2 "DM Sans", sans-serif;
    outline:none;
    transition:.22s var(--smooth);
}
.worker-form input[type="file"] {
    padding:12px;
    line-height:1.2;
}
.worker-form input:focus,
.worker-form select:focus {
    border-color:rgba(10,47,143,.45);
    box-shadow:0 0 0 4px rgba(10,47,143,.08),0 6px 16px rgba(10,47,143,.05);
    transform:translateY(-1px);
}
.worker-category-block,
.worker-selfie-block {
    padding:18px;
    border-radius:var(--r-lg);
    border:1px solid rgba(10,47,143,.08);
    background:linear-gradient(135deg, rgba(250,247,242,.96), rgba(255,255,255,.9));
}
.selfie-copy h3 { color:var(--text);font-size:1.08rem;margin-bottom:4px; }
.selfie-copy p { color:var(--muted);font-size:.9rem;line-height:1.55; }
.selfie-grid {
    margin-top:14px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 230px;
    gap:16px;
    align-items:stretch;
}
.selfie-camera {
    min-height:260px;
    border-radius:var(--r-lg);
    overflow:hidden;
    background:#0F1E36;
    border:1px solid rgba(15,30,54,.16);
    display:grid;
    place-items:center;
}
.selfie-camera video,
.selfie-camera img {
    width:100%;
    height:100%;
    min-height:260px;
    object-fit:cover;
}
.selfie-actions {
    display:grid;
    align-content:center;
    gap:10px;
}
.selfie-actions .btn {
    width:100%;
    justify-content:center;
}

@media(max-width:1024px) {
    .worker-hero,
    .selfie-grid { grid-template-columns:1fr; }
}

@media(max-width:768px) {
    .worker-hero { padding:24px 18px;border-radius:var(--r-lg); }
    .worker-tabs { grid-template-columns:1fr; }
    .worker-form { padding:20px 16px; }
    .worker-form-head { display:grid; }
    .worker-form-head span { width:max-content;max-width:100%; }
    .form-grid.three { grid-template-columns:1fr; }
    .selfie-camera,
    .selfie-camera video,
    .selfie-camera img { min-height:220px; }
}

/* Worker registration premium refinements */
.worker-hero {
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(234,242,248,.9) 58%, rgba(253,243,228,.86)),
        url("../../img/hero.webp") center right/cover;
}
.worker-hero::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 54%, rgba(255,255,255,.42) 100%);
    z-index:-1;
}
.worker-hero-metrics {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}
.worker-hero-metrics span {
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:7px 12px;
    border:1px solid rgba(10,47,143,.1);
    border-radius:var(--r-full);
    background:rgba(255,255,255,.84);
    color:#3E5272;
    font-size:.82rem;
    font-weight:700;
    box-shadow:var(--sh-xs);
}
.worker-hero-metrics strong { color:var(--primary); }
.worker-hero-panel {
    border:1px solid rgba(255,255,255,.24);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.worker-shell {
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,242,.92));
}
.worker-tabs {
    position:sticky;
    top:0;
    z-index:8;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.worker-form {
    max-width:980px;
    margin:0 auto;
}
.worker-form-head {
    padding:8px 4px 4px;
}
.worker-form-section,
.worker-category-block,
.worker-selfie-block {
    display:grid;
    gap:16px;
    padding:20px;
    border-radius:22px;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(10,47,143,.08);
    box-shadow:0 10px 30px rgba(16,35,64,.06);
}
.worker-section-title {
    display:flex;
    align-items:flex-start;
    gap:12px;
}
.worker-section-title i {
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:linear-gradient(135deg, #EAF2F8, #FDF3E4);
    color:var(--primary);
    box-shadow:var(--sh-xs);
}
.worker-section-title h3 {
    color:var(--text);
    font-size:1.02rem;
    margin-bottom:3px;
}
.worker-section-title p {
    color:var(--muted);
    font-size:.86rem;
    line-height:1.45;
}
.worker-form input,
.worker-form select {
    border-radius:17px;
    min-height:52px;
    background:linear-gradient(180deg, #fff, #FEFCFA);
}
.worker-form input[type="file"] {
    min-height:56px;
}
.worker-form button[type="submit"] {
    min-height:54px;
    border-radius:18px;
    font-size:.98rem;
}
.worker-form button[type="submit"]:disabled {
    opacity:.7;
    cursor:wait;
    transform:none;
}
.selfie-camera {
    position:relative;
    min-height:310px;
    aspect-ratio:4/3;
    border-radius:24px;
    background:
        linear-gradient(135deg, rgba(15,30,54,.92), rgba(10,47,143,.72)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 8px, transparent 8px, transparent 16px);
}
.selfie-camera::before {
    content:"Camera preview";
    position:absolute;
    inset:auto 16px 16px 16px;
    color:rgba(255,255,255,.68);
    font-weight:800;
    font-size:.76rem;
    text-align:center;
    pointer-events:none;
}
.selfie-camera video,
.selfie-camera img {
    position:relative;
    z-index:1;
    min-height:310px;
}
.selfie-fallback-btn {
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}
.worker-success-modal {
    position:fixed;
    inset:0;
    z-index:100000;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(10,20,38,.38);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    opacity:0;
    visibility:hidden;
    transition:opacity .28s var(--smooth), visibility .28s var(--smooth);
}
.worker-success-modal.show {
    opacity:1;
    visibility:visible;
}
.worker-success-card {
    width:min(440px, 100%);
    padding:30px;
    border-radius:30px;
    background:linear-gradient(180deg, #fff, #FAF7F2);
    border:1px solid rgba(255,255,255,.78);
    box-shadow:0 34px 90px rgba(10,20,38,.26);
    text-align:center;
    transform:translateY(18px) scale(.96);
    opacity:0;
    transition:transform .36s var(--spring-soft), opacity .28s var(--smooth);
}
.worker-success-modal.show .worker-success-card {
    transform:translateY(0) scale(1);
    opacity:1;
}
.worker-success-icon {
    width:72px;
    height:72px;
    margin:0 auto 16px;
    border-radius:26px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg, #1A7A4A, #4EB879);
    box-shadow:0 18px 32px rgba(26,122,74,.26);
}
.worker-success-icon i { font-size:1.8rem; }
.worker-success-card h2 {
    color:var(--text);
    font-size:1.55rem;
    margin:7px 0;
}
.worker-success-card p {
    color:var(--muted);
    line-height:1.6;
    margin-bottom:16px;
}
.worker-reference-pill {
    margin:0 auto 18px;
    padding:14px 16px;
    border-radius:18px;
    background:#EEF5FF;
    color:var(--primary);
    border:1px dashed rgba(10,47,143,.26);
    font-size:1.2rem;
    font-weight:900;
    letter-spacing:.08em;
}

@media(max-width:768px) {
    .worker-hero {
        min-height:auto;
        padding:22px 16px;
        border-radius:22px;
        background:
            linear-gradient(180deg, rgba(255,255,255,.96), rgba(234,242,248,.94)),
            url("../../img/hero.webp") center/cover;
    }
    .worker-hero::before {
        background:rgba(255,255,255,.84);
    }
    .worker-hero h1 {
        font-size:2rem;
        line-height:1.1;
    }
    .worker-hero-panel {
        min-height:0;
        padding:18px;
        border-radius:20px;
    }
    .worker-shell {
        margin-left:-4px;
        margin-right:-4px;
        border-radius:24px 24px 0 0;
        border-left:0;
        border-right:0;
        border-bottom:0;
    }
    .worker-tabs {
        display:flex;
        gap:8px;
        overflow-x:auto;
        padding:12px;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
        scroll-snap-type:x proximity;
    }
    .worker-tab { scroll-snap-align:start; }
    .worker-tabs::-webkit-scrollbar { display:none; }
    .worker-tab {
        flex:0 0 auto;
        min-width:120px;
        min-height:48px;
        border-radius:16px;
    }
    .worker-form {
        padding:16px 12px calc(92px + env(safe-area-inset-bottom));
        gap:14px;
    }
    .worker-form-head h2 { font-size:1.25rem; }
    .worker-form-section,
    .worker-category-block,
    .worker-selfie-block {
        padding:16px;
        border-radius:20px;
    }
    .worker-section-title i {
        width:38px;
        height:38px;
        flex-basis:38px;
        border-radius:14px;
    }
    .worker-form input,
    .worker-form select {
        min-height:50px;
        font-size:16px;
    }
    .selfie-grid {
        gap:12px;
    }
    .selfie-actions {
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .selfie-actions .status-note {
        grid-column:1/-1;
    }
    .selfie-actions .btn {
        min-height:46px;
        padding:10px;
        font-size:.84rem;
    }
    .selfie-camera,
    .selfie-camera video,
    .selfie-camera img {
        min-height:238px;
        border-radius:20px;
    }
    .worker-success-card {
        padding:24px 18px;
        border-radius:26px;
    }
}
/* ==========================================================
   PREMIUM PROFILE PAGE
========================================================== */

.profile-app{
    max-width:980px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:28px;
    animation:profileFade .45s ease;
}

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

.profile-form{
    display:flex;
    flex-direction:column;
    gap:26px;
}

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

.profile-header-card{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:32px;
    border-radius:30px;
    background:linear-gradient(135deg,#16496E,#2A74A8);
    box-shadow:0 20px 50px rgba(8,42,71,.22);
}
.profile-header-card::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:-110px;
    top:-120px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}
.profile-header-card::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    left:-70px;
    bottom:-70px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
}

/* =====================================
AVATAR
===================================== */
.profile-avatar-wrap{ position:relative;flex-shrink:0; }
.profile-avatar{
    width:105px;height:105px;border-radius:50%;
    display:flex;justify-content:center;align-items:center;
    background:#fff;color:#16496E;font-size:42px;
    box-shadow:0 16px 35px rgba(0,0,0,.22);
}
.profile-online{
    position:absolute;right:6px;bottom:8px;
    width:18px;height:18px;border-radius:50%;
    background:#22C55E;border:4px solid #fff;
}

/* =====================================
USER INFO
===================================== */
.profile-user-details{ flex:1;position:relative;z-index:2; }
.profile-user-details h1{ margin:12px 0 6px;color:#fff;font-size:34px;font-weight:700; }
.profile-user-details p{ color:rgba(255,255,255,.82);font-size:15px;margin:0; }
.profile-chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 18px;border-radius:999px;
    background:rgba(255,255,255,.12);color:#fff;
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18);
    font-size:13px;font-weight:600;
}

/* =====================================
LOCATION BUTTON
===================================== */
.profile-location-pill{
    position:relative;z-index:2;border:none;cursor:pointer;
    display:flex;align-items:center;gap:12px;
    padding:16px 22px;border-radius:18px;
    background:#fff;color:#16496E;font-weight:700;
    transition:transform var(--t-base) var(--spring-soft),
               box-shadow var(--t-base) var(--spring-soft),
               background var(--t-fast) var(--smooth);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}
.profile-location-pill:hover{ transform:translateY(-3px);box-shadow:0 20px 40px rgba(0,0,0,.18); }
.profile-location-pill:active{ transform:scale(.97);transition:transform var(--t-instant) var(--smooth); }

/* =====================================
MAIN CARD
===================================== */
.profile-main-card{
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(18px);
    border-radius:28px;padding:34px;
    box-shadow:0 18px 40px rgba(10,45,76,.08);
    border:1px solid rgba(255,255,255,.65);
}
.profile-card-header{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:30px;gap:20px;
}
.profile-card-header h2{ margin:0;color:#16496E;font-size:28px;font-weight:700; }
.profile-card-header p{ margin-top:6px;color:#6b7280;font-size:14px; }
.profile-save-status{
    display:flex;align-items:center;gap:10px;
    padding:12px 20px;border-radius:999px;
    background:#EAF7F2;color:#1A7F4B;font-size:14px;font-weight:700;
}
.profile-save-status i{ font-size:16px; }

/* =====================================
GRID
===================================== */
.profile-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px; }
.profile-full{ grid-column:1 / -1; }
.profile-divider{ grid-column:1 / -1;border:none;height:1px;background:#EEF2F7;margin:8px 0; }
.profile-section-title{
    grid-column:1 / -1;display:flex;align-items:center;gap:12px;
    color:#16496E;font-weight:700;font-size:20px;
}
.profile-section-title i{
    width:44px;height:44px;border-radius:14px;
    display:flex;justify-content:center;align-items:center;
    background:#EDF6FC;color:#16496E;
}

/* ==========================================================
   PROFILE INPUTS
========================================================== */
.profile-input{ display:flex;flex-direction:column;gap:10px; }
.profile-input label{
    display:flex;align-items:center;gap:12px;
    color:#16496E;font-size:14px;font-weight:700;
}
.profile-input label i{
    width:42px;height:42px;border-radius:14px;
    background:#F2F8FC;display:flex;align-items:center;justify-content:center;
    color:#16496E;transition:.35s;
}
.profile-input:hover label i{ background:#16496E;color:#fff;transform:scale(1.05); }

.profile-input input,
.profile-input textarea{
    width:100%;border:none;outline:none;
    background:#F8FAFC;border:2px solid transparent;
    border-radius:18px;padding:16px 18px;font-size:15px;
    color:#243746;
    transition:background var(--t-fast) var(--smooth),
               border-color var(--t-fast) var(--smooth),
               box-shadow var(--t-base) var(--spring-soft),
               transform var(--t-fast) var(--smooth);
    font-family:inherit;box-sizing:border-box;
}
.profile-input textarea{ resize:vertical;min-height:120px;line-height:1.6; }
.profile-input input:hover,
.profile-input textarea:hover{ background:#fff;box-shadow:0 8px 20px rgba(22,73,110,.08); }
.profile-input input:focus,
.profile-input textarea:focus{
    background:#fff;border-color:#16496E;
    box-shadow:0 0 0 5px rgba(22,73,110,.10),0 8px 20px rgba(22,73,110,.08);
    transform:translateY(-1px);
}
.profile-input input::placeholder,
.profile-input textarea::placeholder{ color:#94A3B8; }

.readonly-field{
    background:#EDF2F7 !important;color:#64748B !important;
    cursor:not-allowed;opacity:1;
}

/* =====================================
STATUS MESSAGE
===================================== */
.profile-status{
    margin-top:6px;padding:14px 18px;border-radius:16px;
    display:none;font-size:14px;font-weight:600;
}
.profile-status.info{ display:block;background:#EFF6FF;color:#2563EB; }
.profile-status.success{ display:block;background:#ECFDF5;color:#059669; }
.profile-status.error{ display:block;background:#FEF2F2;color:#DC2626; }

/* =====================================
BOTTOM INFO STRIP
===================================== */
.profile-bottom-strip{ display:grid;grid-template-columns:repeat(2,1fr);gap:18px; }
.profile-mini-card{
    display:flex;align-items:center;gap:16px;
    background:#fff;border-radius:22px;padding:20px;
    border:1px solid #EDF2F7;transition:.35s;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.profile-mini-card:hover{ transform:translateY(-4px);box-shadow:0 18px 35px rgba(15,23,42,.10); }
.profile-mini-card:active{ transform:translateY(-1px) scale(.99);transition:transform var(--t-instant) var(--smooth); }
.mini-icon{
    width:58px;height:58px;border-radius:18px;
    background:linear-gradient(135deg,#16496E,#2A74A8);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:22px;flex-shrink:0;
}
.profile-mini-card small{ display:block;color:#94A3B8;font-size:12px;margin-bottom:6px; }
.profile-mini-card strong{ color:#16496E;font-size:16px;font-weight:700; }

/* ==========================================================
   QUICK ACTIONS
========================================================== */
.profile-quick-actions{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }
.profile-action-box{
    display:flex;align-items:center;gap:18px;padding:22px;
    background:#fff;border-radius:24px;text-decoration:none;color:inherit;
    border:1px solid #EEF2F7;transition:.35s;
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}
.profile-action-box:hover{
    transform:translateY(-5px);box-shadow:0 22px 45px rgba(22,73,110,.10);border-color:#D9EAF5;
}
.profile-action-box:active{
    transform:translateY(-1px) scale(.99);
    transition:transform var(--t-instant) var(--smooth);
}
.action-icon{
    width:62px;height:62px;border-radius:18px;
    background:linear-gradient(135deg,#16496E,#2A74A8);
    color:#fff;display:flex;justify-content:center;align-items:center;
    font-size:22px;flex-shrink:0;
}
.profile-action-box h4{ margin:0;color:#16496E;font-size:18px; }
.profile-action-box p{ margin:6px 0 0;color:#7C8DA0;font-size:14px; }
.profile-action-box .fa-chevron-right{ margin-left:auto;color:#94A3B8;transition:.35s; }
.profile-action-box:hover .fa-chevron-right{ transform:translateX(6px);color:#16496E; }

/* ==========================================================
   SAVE BAR
========================================================== */
.profile-save-bar{
    position:sticky;bottom:15px;z-index:100;
    display:flex;justify-content:space-between;align-items:center;gap:25px;
    padding:20px 24px;border-radius:24px;
    background:rgba(255,255,255,.95);backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 25px 55px rgba(0,0,0,.14);
}
.save-bar-left{ display:flex;align-items:center;gap:16px; }
.save-icon{
    width:58px;height:58px;border-radius:18px;
    background:linear-gradient(135deg,#16496E,#2A74A8);
    color:#fff;display:flex;justify-content:center;align-items:center;font-size:22px;
}
.save-bar-left strong{ display:block;color:#16496E;font-size:17px; }
.save-bar-left small{ display:block;margin-top:5px;color:#7C8DA0; }
.save-bar-right{ display:flex;gap:14px;align-items:center; }

/* ==========================================================
   BUTTONS
========================================================== */
.profile-save-btn{
    min-width:220px;height:56px;border-radius:18px;font-weight:700;font-size:15px;
    transition:transform var(--t-base) var(--spring-soft),
               box-shadow var(--t-base) var(--spring-soft),
               filter var(--t-fast) var(--smooth);
}
.profile-save-btn:hover{ transform:translateY(-2px); }
.profile-save-btn:active:not(:disabled){ transform:scale(.97);transition:transform var(--t-instant) var(--smooth); }
.profile-back-btn{
    min-width:170px;height:56px;border-radius:18px;
    transition:transform var(--t-base) var(--spring-soft);
}
.profile-back-btn:active{ transform:scale(.97);transition:transform var(--t-instant) var(--smooth); }
.profile-save-btn:disabled{ opacity:.75;cursor:not-allowed; }
.profile-save-btn i{ margin-right:8px; }

/* ==========================================================
   MICRO ANIMATIONS
========================================================== */
.profile-header-card,
.profile-main-card,
.profile-mini-card,
.profile-action-box,
.profile-save-bar{ animation:profileCardIn .55s ease both; }
.profile-main-card{ animation-delay:.08s; }
.profile-bottom-strip{ animation:profileCardIn .65s ease both; }
.profile-quick-actions{ animation:profileCardIn .75s ease both; }
.profile-save-bar{ animation:profileCardIn .85s ease both; }
@keyframes profileCardIn{ from{ opacity:0;transform:translateY(25px); } to{ opacity:1;transform:translateY(0); } }

/* ==========================================================
   NICE SCROLLBAR
========================================================== */
.profile-input textarea::-webkit-scrollbar{ width:7px; }
.profile-input textarea::-webkit-scrollbar-thumb{ background:#C7D8E5;border-radius:20px; }
.profile-input textarea::-webkit-scrollbar-track{ background:transparent; }

/* ==========================================================
   RESPONSIVE LAYOUT
========================================================== */
@media (min-width:1400px){
    .profile-app{ max-width:1100px; }
    .profile-main-card{ padding:40px; }
    .profile-header-card{ padding:40px; }
}
@media (max-width:1200px){
    .profile-header-card{ padding:28px; }
    .profile-main-card{ padding:28px; }
    .profile-user-details h1{ font-size:30px; }
    .profile-grid{ gap:18px; }
}
@media (max-width:992px){
    .profile-header-card{ flex-wrap:wrap;align-items:center; }
    .profile-location-pill{ width:100%;justify-content:center;margin-top:10px; }
    .profile-grid{ grid-template-columns:1fr; }
    .profile-full{ grid-column:auto; }
    .profile-card-header{ flex-direction:column;align-items:flex-start;gap:14px; }
    .profile-bottom-strip{ grid-template-columns:1fr; }
    .profile-quick-actions{ grid-template-columns:1fr; }
    .profile-save-bar{ flex-direction:column;align-items:stretch; }
    .save-bar-right{ width:100%;display:grid;grid-template-columns:1fr 1fr; }
    .profile-save-btn,
    .profile-back-btn{ width:100%;min-width:unset; }
}
@media (max-width:768px){
    .page-shell{ padding:14px; }
    .profile-app{ gap:16px; }
    .profile-header-card{
        padding:20px;border-radius:22px;flex-direction:column;text-align:center;gap:16px;
    }
    .profile-avatar{ width:84px;height:84px;font-size:34px; }
    .profile-online{ width:14px;height:14px;right:6px;bottom:5px; }
    .profile-user-details h1{ font-size:24px;margin:8px 0 4px; }
    .profile-user-details p{ font-size:14px; }
    .profile-chip{ padding:7px 14px;font-size:12px; }
    .profile-location-pill{ padding:14px 18px;font-size:14px;width:100%;justify-content:center; }
    .profile-main-card{ padding:18px;border-radius:22px; }
    .profile-card-header h2{ font-size:22px; }
    .profile-card-header p{ font-size:13px; }
    .profile-save-status{ font-size:12px;padding:8px 14px; }
    .profile-input{ gap:8px; }
    .profile-input label{ font-size:13px; }
    .profile-input label i{ width:38px;height:38px;font-size:15px; }
    .profile-input input,
    .profile-input textarea{ padding:14px 16px;font-size:15px;border-radius:16px; }
    .profile-input textarea{ min-height:95px; }
    .profile-mini-card{ padding:16px;border-radius:18px; }
    .mini-icon{ width:50px;height:50px;font-size:18px;border-radius:14px; }
    .profile-action-box{ padding:18px;border-radius:20px; }
    .action-icon{ width:52px;height:52px;font-size:18px;border-radius:16px; }
    .profile-action-box h4{ font-size:16px; }
    .profile-action-box p{ font-size:13px; }
    .profile-save-bar{ position:fixed;left:12px;right:12px;bottom:12px;padding:14px;border-radius:20px; }
    .save-bar-left{ display:none; }
    .save-bar-right{ display:grid;grid-template-columns:1fr;gap:10px; }
    .profile-save-btn{ height:52px;font-size:15px; }
    .profile-back-btn{ display:none; }
    .profile-form{ padding-bottom:110px; }
}
@media (max-width:480px){
    .profile-header-card{ padding:18px; }
    .profile-avatar{ width:74px;height:74px;font-size:30px; }
    .profile-user-details h1{ font-size:21px; }
    .profile-main-card{ padding:15px; }
    .profile-card-header h2{ font-size:20px; }
    .profile-section-title{ font-size:17px; }
    .profile-input input,
    .profile-input textarea{ font-size:14px;padding:13px 14px; }
    .profile-location-pill{ height:48px;font-size:13px; }
    .profile-save-btn{ height:50px;font-size:14px; }
}

/* ==========================================================
   REDUCE MOTION
========================================================== */
@media (prefers-reduced-motion: reduce){
    *{ animation:none !important;transition:none !important;scroll-behavior:auto !important; }
}

/* ==========================================================
   DARKER HOVER STATES
========================================================== */
.profile-input input:hover,
.profile-input textarea:hover{ border-color:#D8E8F3; }
.profile-save-btn:hover{ filter:brightness(1.04); }
.profile-location-pill:hover{ background:#F8FBFD; }
.profile-action-box:hover .action-icon{ transform:scale(1.06); }
.action-icon,
.mini-icon,
.profile-avatar{ transition:transform var(--t-base) var(--spring-soft); }

.validation-error{
    border:2px solid #ef4444 !important;
    border-radius:18px;
    transition:.25s;
}

.validation-error input,
.validation-error select,
.validation-error textarea{
    border-color:#ef4444 !important;
    box-shadow:0 0 0 3px rgba(239,68,68,.15);
}

input.invalid,
select.invalid,
textarea.invalid{
    border-color:#ef4444 !important;
    box-shadow:0 0 0 3px rgba(239,68,68,.15);
}

/*====================================================
            PREMIUM COMING SOON
====================================================*/

.coming-soon-section{
    margin:70px 0;
    position:relative;
}

.coming-soon-card{

    position:relative;
    overflow:hidden;

    background:#fff;

    border-radius:34px;

    padding:65px 55px;

    border:1px solid rgba(22,73,110,.08);

    box-shadow:
        0 12px 30px rgba(18,32,56,.04),
        0 30px 80px rgba(18,32,56,.08);

    text-align:center;

}

.coming-soon-card::before{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    top:-150px;
    right:-150px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(22,73,110,.06),
    transparent 70%);

}

.coming-soon-card::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    left:-90px;
    bottom:-90px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(11,116,209,.05),
    transparent 70%);

}

/*========================================*/

.launch-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    background:#edf5ff;

    color:#16496E;

    font-weight:700;

    font-size:.92rem;

    margin-bottom:28px;

}

.launch-badge i{

    color:#D4A017;

}

/*========================================*/

.coming-icon{

    width:105px;
    height:105px;

    margin:auto;

    border-radius:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:44px;

    background:
    linear-gradient(
        135deg,
        #0B74D1,
        #16496E);

    box-shadow:
        0 18px 35px rgba(11,116,209,.18);

}

/*========================================*/

.coming-soon-card h2{

    margin:30px 0 18px;

    color:#19314E;

    font-size:clamp(2rem,4vw,2.8rem);

    line-height:1.2;

    font-weight:800;

}

.coming-soon-card p{

    max-width:760px;

    margin:auto;

    color:#677489;

    line-height:1.8;

    font-size:1.05rem;

}

/*========================================*/

.coming-feature-grid{

    margin-top:48px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}

.coming-feature{

    background:#fff;

    border-radius:22px;

    border:1px solid rgba(22,73,110,.08);

    padding:24px 18px;

    transition:.25s;

    box-shadow:
        0 8px 20px rgba(0,0,0,.04);

}

.coming-feature:hover{

    transform:translateY(-5px);

    box-shadow:
        0 15px 35px rgba(22,73,110,.10);

}

.coming-feature i{

    width:68px;

    height:68px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 18px;

    background:#F3F8FF;

    color:#0B74D1;

    font-size:28px;

}

.coming-feature strong{

    display:block;

    color:#20304C;

    font-size:1rem;

    font-weight:700;

}

.coming-feature small{

    display:block;

    margin-top:6px;

    color:#7D8797;

    line-height:1.6;

    font-size:.84rem;

}

/*========================================*/

.launch-progress{

    margin-top:48px;

    width:100%;

    height:12px;

    border-radius:999px;

    overflow:hidden;

    background:#EEF4FC;

}

.launch-progress-bar{

    width:0;

    height:100%;

    border-radius:999px;

    background:
    linear-gradient(
        90deg,
        #0B74D1,
        #16496E);

    animation:fillProgress 2.2s ease forwards;

}

/*========================================*/

.launch-text{

    display:block;

    margin-top:18px;

    color:#6B7788;

    font-size:.9rem;

    font-weight:600;

}

/*========================================*/

@keyframes fillProgress{

    from{

        width:0;

    }

    to{

        width:70%;

    }

}

/*====================================================
                TABLET
====================================================*/

@media (max-width:992px){

    .coming-soon-card{

        padding:55px 35px;

    }

    .coming-feature-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/*====================================================
                MOBILE
====================================================*/

@media (max-width:768px){

    .coming-soon-section{

        margin:45px 0;

    }

    .coming-soon-card{

        padding:34px 22px;

        border-radius:28px;

    }

    .launch-badge{

        font-size:.82rem;

        padding:9px 16px;

    }

    .coming-icon{

        width:82px;
        height:82px;

        font-size:34px;

        border-radius:24px;

    }

    .coming-soon-card h2{

        font-size:1.8rem;

        margin-top:24px;

    }

    .coming-soon-card p{

        font-size:.95rem;

        line-height:1.7;

    }

    .coming-feature-grid{

        grid-template-columns:1fr;

        gap:15px;

        margin-top:32px;

    }

    .coming-feature{

        display:flex;

        align-items:center;

        text-align:left;

        gap:16px;

        padding:16px;

    }

    .coming-feature i{

        margin:0;

        width:56px;
        height:56px;

        border-radius:18px;

        font-size:24px;

        flex-shrink:0;

    }

    .launch-progress{

        height:10px;

        margin-top:35px;

    }

}

/*====================================================
            SMALL PHONES
====================================================*/

@media (max-width:480px){

    .coming-soon-card{

        padding:28px 18px;

    }

    .coming-soon-card h2{

        font-size:1.55rem;

    }

    .coming-soon-card p{

        font-size:.9rem;

    }

}