/* ============================================================
   BULK-ORDER.CSS  -  Alif Club bulk order page
   ------------------------------------------------------------
     1. Colors / helpers
     2. Background (sky-blue + dark moving blobs + clouds + grain)  [about.css jaisa]
     3. Top banner (image, ~45vh)
     4. Glass base + buttons
     5. Benefit cards
     6. Form
     7. Side (steps + help)
     8. Mobile
     9. Reduced motion
============================================================ */

/* ============================================================
   1. COLORS / HELPERS
============================================================ */
:root{
    --bubbg:
        radial-gradient(circle at 28% 22%,rgba(255,255,255,.65) 0,rgba(255,255,255,.18) 14%,rgba(255,255,255,0) 38%),
        radial-gradient(circle at 75% 90%,rgba(130,220,255,.40) 0,rgba(130,220,255,0) 55%),
        linear-gradient(180deg,rgba(255,255,255,.14),rgba(110,200,255,.10));
    --bubsh:
        inset 0 2px 3px rgba(255,255,255,.7),
        inset 0 -8px 14px rgba(0,130,210,.18),
        inset 3px 0 6px rgba(255,255,255,.18),
        0 8px 18px rgba(0,120,200,.18),
        0 0 14px rgba(120,220,255,.25);

    --bo-hdr:90px;           /* header ki height (fixed header ke piche content hide na ho). Zarurat ho to badlo */
}

.container{ max-width:1440px; margin:0 auto; padding:0 15px; }
.bo-band{ padding:6px 0 0; }
.bo-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============================================================
   2. BACKGROUND  (about.css ka same background)
   --bg1/--bg1b = sky upar/neeche | --bg2 = dark blobs | --bg3 = clouds
============================================================ */
@property --bg1  { syntax:'<color>'; inherits:true; initial-value:#bfe4fa; }
@property --bg1b { syntax:'<color>'; inherits:true; initial-value:#4f8fc0; }
@property --bg2  { syntax:'<color>'; inherits:true; initial-value:#03163b; }
@property --bg3  { syntax:'<color>'; inherits:true; initial-value:#ffffff; }

@property --b1x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b1y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b1r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b2x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b2y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b2r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b3x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b3y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b3r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b4x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b4y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b4r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b5x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b5y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b5r { syntax:'<length>'; inherits:false; initial-value:0px; }

html{
    --bg1:#bfe4fa; --bg1b:#4f8fc0; --bg2:#03163b; --bg3:#ffffff;
    transition:--bg1 .3s ease, --bg1b .3s ease, --bg2 .3s ease, --bg3 .3s ease;
}
html::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(to bottom, var(--bg1), var(--bg1b));
}
html::after{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
    --b1x:15vmax;                  --b1y:15vmax;                    --b1r:30vmax;
    --b2x:calc(100vw - 12.5vmax);  --b2y:calc(100vh - 12.5vmax);    --b2r:27.5vmax;
    --b3x:12.5vmax;                --b3y:calc(55vh + 22.5vmax);     --b3r:22.5vmax;
    --b4x:calc(40vw + 25vmax);     --b4y:calc(10vh + 20vmax);       --b4r:22vmax;
    --b5x:calc(55vw + 22.5vmax);   --b5y:calc(45vh + 17.5vmax);     --b5r:20vmax;
    background:
        radial-gradient(circle var(--b5r) at var(--b5x) var(--b5y), color-mix(in srgb, var(--bg3) 60%, transparent) 0%, transparent 100%),
        radial-gradient(circle var(--b4r) at var(--b4x) var(--b4y), color-mix(in srgb, var(--bg3) 70%, transparent) 0%, transparent 100%),
        radial-gradient(circle var(--b3r) at var(--b3x) var(--b3y), color-mix(in srgb, var(--bg2) 85%, transparent) 0%, transparent 100%),
        radial-gradient(circle var(--b2r) at var(--b2x) var(--b2y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%),
        radial-gradient(circle var(--b1r) at var(--b1x) var(--b1y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%);
    animation:
        alifB1 20s ease-in-out infinite alternate,
        alifB2 24s ease-in-out infinite alternate,
        alifB3 22s ease-in-out infinite alternate,
        alifB4 26s ease-in-out infinite alternate,
        alifB5 30s ease-in-out infinite alternate;
}
@keyframes alifB1{
    0%   { --b1x:15vmax;                 --b1y:15vmax;                 --b1r:30vmax; }
    50%  { --b1x:calc(15vmax + 60vw);    --b1y:calc(15vmax + 30vh);    --b1r:36vmax; }
    100% { --b1x:calc(15vmax + 20vw);    --b1y:calc(15vmax + 70vh);    --b1r:27vmax; }
}
@keyframes alifB2{
    0%   { --b2x:calc(100vw - 12.5vmax); --b2y:calc(100vh - 12.5vmax); --b2r:27.5vmax; }
    50%  { --b2x:calc(45vw - 12.5vmax);  --b2y:calc(60vh - 12.5vmax);  --b2r:31.6vmax; }
    100% { --b2x:calc(80vw - 12.5vmax);  --b2y:calc(25vh - 12.5vmax);  --b2r:27.5vmax; }
}
@keyframes alifB3{
    0%   { --b3x:12.5vmax;               --b3y:calc(55vh + 22.5vmax);  --b3r:22.5vmax; }
    50%  { --b3x:calc(12.5vmax + 70vw);  --b3y:calc(25vh + 22.5vmax);  --b3r:27vmax; }
    100% { --b3x:calc(12.5vmax + 90vw);  --b3y:calc(75vh + 22.5vmax);  --b3r:20.3vmax; }
}
@keyframes alifB4{
    0%   { --b4x:calc(40vw + 25vmax);    --b4y:calc(10vh + 20vmax);    --b4r:22vmax; }
    50%  { --b4x:calc(-5vw + 25vmax);    --b4y:calc(35vh + 20vmax);    --b4r:26.4vmax; }
    100% { --b4x:calc(-30vw + 25vmax);   --b4y:calc(60vh + 20vmax);    --b4r:20.9vmax; }
}
@keyframes alifB5{
    0%   { --b5x:calc(55vw + 22.5vmax);  --b5y:calc(45vh + 17.5vmax);  --b5r:20vmax; }
    50%  { --b5x:calc(5vw + 22.5vmax);   --b5y:calc(15vh + 17.5vmax);  --b5r:23vmax; }
    100% { --b5x:calc(35vw + 22.5vmax);  --b5y:calc(-5vh + 17.5vmax);  --b5r:20vmax; }
}
body::before{
    content:""; position:fixed; inset:-80px; z-index:-1; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:160px 160px;
    opacity:.3; mix-blend-mode:overlay;
    animation:alifGrain .8s steps(1) infinite;
}
@keyframes alifGrain{
    0%  { transform:translate(0,0); }
    25% { transform:translate(-30px,20px); }
    50% { transform:translate(25px,-30px); }
    75% { transform:translate(-15px,-35px); }
    100%{ transform:translate(0,0); }
}
body::after{ display:none; }

/* ============================================================
   3. TOP BANNER  -  image + height ~45vh (half screen se thodi kam)
   ------------------------------------------------------------
   Height badalni ho to sirf neeche clamp(min, ideal, max) badlo.
   padding-top = header ki height, taaki text header ke piche hide na ho.
   Image na mile to neeche ka gradient dikhta hai.
============================================================ */
.bo-hero{
    position:relative; box-sizing:border-box; overflow:hidden;
    height:clamp(300px, 45vh, 460px);
    padding-top:var(--bo-hdr);
    display:flex; align-items:center;
    background:linear-gradient(135deg,#0b3a66 0%,#1a6aa8 55%,#4f8fc0 100%);
}
.bo-hero-img{
    position:absolute; inset:0; z-index:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);   /* neeche image sky me mil jaati hai */
}
.bo-hero::before{                    /* image ke upar halka dark overlay: text saaf dikhe */
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
        linear-gradient(90deg,rgba(3,22,59,.62) 0%,rgba(3,22,59,.28) 55%,rgba(3,22,59,.10) 100%),
        linear-gradient(0deg,rgba(6,34,58,.30) 0%,rgba(6,34,58,0) 45%);
}
.bo-hero-in{
    position:relative; z-index:2; width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:30px;
}
.bo-hero-text{ color:#fff; text-shadow:0 2px 14px rgba(0,50,120,.55); max-width:640px; }
.bo-crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:rgba(255,255,255,.85); margin-bottom:10px; }
.bo-crumbs a{ color:#fff; text-decoration:none; }
.bo-crumbs a:hover{ text-decoration:underline; }
.bo-hero h1{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(2rem,4.6vw,3.4rem);
    line-height:1.08; letter-spacing:-.01em; margin:0 0 10px;
}
.bo-hero p{ margin:0; font-size:clamp(.92rem,1.5vw,1.1rem); line-height:1.5; color:rgba(255,255,255,.92); }

/* boxes ka glass bubble */
.bo-seal{ position:relative; flex:none; width:clamp(120px,18vh,170px); aspect-ratio:1; display:grid; place-items:center; margin-right:4%; }
.bo-seal > *{ position:absolute; }
.bo-seal-disc{
    inset:0; border-radius:50%; display:grid; place-items:center;
    background:var(--bubbg), radial-gradient(circle at 30% 22%,rgba(255,255,255,.55),rgba(255,255,255,.12));
    border:1.5px solid rgba(255,255,255,.65);
    box-shadow:var(--bubsh), 0 20px 40px -18px rgba(0,25,55,.6);
    -webkit-backdrop-filter:blur(8px) saturate(160%); backdrop-filter:blur(8px) saturate(160%);
    animation:boFloat 5s ease-in-out infinite alternate;
    color:#fff; font-size:clamp(2.6rem,5.2vh,3.8rem); text-shadow:0 4px 18px rgba(0,60,130,.55);
}
.bo-seal-ring{
    inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.6); opacity:0;
    animation:boRipple 3.6s cubic-bezier(.2,.6,.3,1) infinite;
}
.bo-seal-ring.r2{ animation-delay:1.8s; }
@keyframes boFloat{ from{ transform:translateY(0); } to{ transform:translateY(-8px); } }
@keyframes boRipple{ 0%{ transform:scale(.9); opacity:0; } 20%{ opacity:.8; } 100%{ transform:scale(1.7); opacity:0; } }

/* ============================================================
   4. GLASS BASE + BUTTONS
============================================================ */
.bo-glass{
    position:relative; isolation:isolate; overflow:hidden;
    background:
        radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(150deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.14) 100%);
    border:1px solid rgba(255,255,255,.38);
    border-radius:22px;
    box-shadow:
        inset 0 1.5px 1px rgba(255,255,255,.75),
        inset 1px 0 2px rgba(255,255,255,.25),
        inset 0 -14px 28px rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
    color:#fff; text-shadow:0 1px 6px rgba(0,30,60,.4);
}

.bo-ico{
    display:grid; place-items:center; flex:none; width:52px; height:52px; margin-bottom:14px; border-radius:50%;
    background:var(--bubbg); border:1px solid rgba(255,255,255,.55); box-shadow:var(--bubsh);
    font-size:20px; color:#fff;
}

.bo-btn{
    position:relative; isolation:isolate; cursor:pointer; font-family:inherit;
    display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 30px; border-radius:30px;
    color:#fff; text-decoration:none; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
    background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.45);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 6px 16px -8px rgba(0,0,0,.6);
    -webkit-backdrop-filter:blur(6px) saturate(160%); backdrop-filter:blur(6px) saturate(160%);
    text-shadow:0 1px 4px rgba(0,20,40,.6);
    transition:transform .4s cubic-bezier(.25,1.25,.4,1), border-color .3s ease, opacity .2s;
}
.bo-btn::before{
    content:""; position:absolute; inset:2px; z-index:-1; pointer-events:none; border-radius:999px;
    opacity:0; transform:scale(.6);
    background:var(--bubbg); border:1px solid rgba(255,255,255,.5); box-shadow:var(--bubsh);
    transition:opacity .3s ease, transform .5s cubic-bezier(.25,1.25,.4,1);
}
.bo-btn:hover{ transform:translateY(-2px); border-color:rgba(25,194,255,.85); }
.bo-btn:hover::before{ opacity:1; transform:scale(1); }
.bo-btn i{ transition:transform .3s ease; }
.bo-btn:hover .fa-paper-plane{ transform:translate(3px,-3px); }
.bo-btn.ghost{ background:rgba(6,30,70,.35); }
.bo-btn.wide{ width:100%; margin-top:14px; }
.bo-btn:focus-visible, .bo-q:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ============================================================
   5. BENEFIT CARDS
============================================================ */
.bo-quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:46px; }
.bo-q{
    display:flex; flex-direction:column; align-items:flex-start; padding:24px 22px 26px;
    text-decoration:none; color:#fff;
    transition:transform .35s cubic-bezier(.25,1.25,.4,1), border-color .3s ease;
}
a.bo-q:hover, a.bo-q.touch-active, div.bo-q:hover, div.bo-q.touch-active{ transform:translateY(-6px); border-color:rgba(255,255,255,.65); }
.bo-q h3{ margin:0 0 6px; font-size:1.1rem; font-weight:700; }
.bo-q p{ margin:0; font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.92); overflow-wrap:anywhere; }

/* ============================================================
   6. FORM
============================================================ */
.bo-main{ display:grid; grid-template-columns:1.45fr 1fr; gap:24px; align-items:start; margin-top:30px; }
.bo-form-card{ padding:34px 36px 38px; }
.bo-form-card.touch-active{ border-color:rgba(255,255,255,.65); }
.bo-h{ margin:0 0 8px; font-size:1.7rem; font-weight:700; letter-spacing:.5px; }
.bo-sub{ margin:0 0 24px; line-height:1.6; font-size:.98rem; color:rgba(255,255,255,.92); }

.bo-form{ display:grid; gap:18px; }
.bo-form[hidden], .bo-done[hidden], .bo-alert[hidden], .bo-field[hidden]{ display:none; }
.bo-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bo-field{ min-width:0; }
.bo-field label{ display:block; margin:0 0 7px; font-size:.88rem; font-weight:700; letter-spacing:.2px; }
.bo-field label em{ font-style:normal; font-weight:500; color:rgba(255,255,255,.75); }

/* ------------------------------------------------------------
   INPUT BOX: background SAFED, text KAALA.
   Click / focus / hover par koi border ya glow nahi badalta.
   Rang badalne ho to sirf yahan ke colors badlo.
------------------------------------------------------------ */
.bo-input{
    position:relative; display:flex; align-items:center;
    background:#fff; border:1.5px solid #fff; border-radius:14px;
    box-shadow:0 3px 10px -6px rgba(0,30,60,.45);
    text-shadow:none;
}
.bo-input > i{ flex:none; width:44px; text-align:center; font-size:14px; color:#5b6b7a; pointer-events:none; }
.bo-input input, .bo-input select, .bo-input textarea{
    flex:1; min-width:0; width:100%; padding:14px 14px 14px 0; border:0; background:transparent; outline:0; box-shadow:none;
    color:#111; caret-color:#111; font:inherit; font-size:.97rem; text-shadow:none;
}
.bo-input input:focus, .bo-input select:focus, .bo-input textarea:focus,
.bo-input input:focus-visible, .bo-input select:focus-visible, .bo-input textarea:focus-visible{ outline:0; box-shadow:none; }
.bo-input textarea{ padding:14px 16px; resize:vertical; min-height:130px; line-height:1.6; }
.bo-input ::placeholder{ color:#8a96a3; opacity:1; }
.bo-area{ align-items:stretch; }
/* browser autofill (peela / neela) na dikhe: safed + kaala hi rahe */
.bo-input input:-webkit-autofill,
.bo-input input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #fff inset; box-shadow:0 0 0 1000px #fff inset;
    -webkit-text-fill-color:#111; caret-color:#111;
}

/* select: custom arrow (dark, safed box par dikhe) */
.bo-select select{
    appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%235b6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.bo-select select:invalid{ color:#8a96a3; }
.bo-select option{ color:#021a2b; background:#fff; }

/* error state */
.bo-err{ display:block; min-height:0; margin-top:6px; font-size:.82rem; font-weight:600; color:#ffd0d0; text-shadow:0 1px 4px rgba(90,0,0,.55); }
.bo-err:empty{ display:none; }
.bo-field.has-err .bo-input{ border-color:#ff6b6b; box-shadow:0 0 0 3px rgba(255,100,100,.30); }
.bo-meta{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.bo-meta .bo-err{ flex:1; }
.bo-count{ margin:6px 0 0 auto; font-size:.8rem; color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums; }

.bo-alert{
    margin:0; padding:12px 16px; border-radius:12px; font-size:.9rem; font-weight:600; line-height:1.5;
    background:rgba(120,10,20,.45); border:1px solid rgba(255,140,140,.6); color:#fff;
}

/* submit */
.bo-submit{ justify-self:start; padding:15px 38px; font-size:14px; }
.bo-submit:disabled{ cursor:wait; opacity:.85; transform:none; }
.bo-spin{
    display:none; width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:boSpin .7s linear infinite;
}
.bo-submit.is-busy .bo-spin{ display:block; }
.bo-submit.is-busy .fa-paper-plane{ display:none; }
@keyframes boSpin{ to{ transform:rotate(360deg); } }

/* success panel */
.bo-done{ text-align:center; padding:26px 10px 8px; }
.bo-done.show{ animation:boPop .6s cubic-bezier(.22,1,.36,1) both; }
.bo-done-ico{
    display:inline-grid; place-items:center; width:78px; height:78px; margin-bottom:16px; border-radius:50%;
    background:var(--bubbg), rgba(25,194,255,.28); border:1.5px solid rgba(255,255,255,.7); box-shadow:var(--bubsh);
    font-size:30px; color:#fff;
}
.bo-done h3{ margin:0 0 8px; font-size:1.5rem; font-weight:700; }
.bo-done p{ margin:0 auto 22px; max-width:46ch; line-height:1.7; color:rgba(255,255,255,.94); }
@keyframes boPop{ 0%{ opacity:0; transform:translateY(16px) scale(.96); } 100%{ opacity:1; transform:none; } }

/* ============================================================
   7. SIDE (steps + help)
============================================================ */
.bo-side{ display:grid; gap:20px; }

.bo-stepsbox{ padding:26px 26px 28px; }
.bo-stepsbox h3, .bo-help h3{ margin:0 0 16px; font-size:1.1rem; font-weight:700; }
.bo-steps{ list-style:none; margin:0; padding:0; counter-reset:bo; position:relative; display:grid; gap:20px; }
.bo-steps::before{ content:""; position:absolute; left:16px; top:18px; bottom:18px; width:2px; background:rgba(255,255,255,.35); }
.bo-steps li{ position:relative; padding-left:50px; counter-increment:bo; }
.bo-steps li::before{
    content:counter(bo); position:absolute; left:0; top:0; z-index:1; width:34px; height:34px; border-radius:50%;
    display:grid; place-items:center; font-size:.9rem; font-weight:800;
    background:linear-gradient(135deg,#19c2ff,#7b3ff2); border:1.5px solid rgba(255,255,255,.75); box-shadow:0 0 12px rgba(25,194,255,.5);
}
.bo-steps b{ display:block; font-size:1rem; margin-bottom:3px; }
.bo-steps span{ display:block; font-size:.9rem; line-height:1.55; color:rgba(255,255,255,.9); }

.bo-help{ padding:24px 24px 26px; }
.bo-help h3{ margin-bottom:8px; }
.bo-help p{ margin:0 0 6px; line-height:1.6; font-size:.93rem; color:rgba(255,255,255,.92); }
.bo-link{
    display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:16px; color:#fff; text-decoration:none; font-size:.95rem; font-weight:600;
    border-top:1px solid rgba(255,255,255,.28);
}
.bo-link:hover{ color:#ffe066; }
.bo-link > i:first-child{ width:20px; text-align:center; color:#bff1ff; }
.bo-link .go{ margin-left:auto; font-size:12px; transition:transform .3s ease; }
.bo-link:hover .go{ transform:translateX(4px); }

/* 3 chhote fields ek line me */
.bo-row3{ grid-template-columns:repeat(3,1fr); }

/* number / date input (safed box par kaala text) */
.bo-input input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.bo-input input[type=number]::-webkit-outer-spin-button, .bo-input input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.bo-input input[type=date]{ color-scheme:light; min-height:48px; }
.bo-input input[type=date]::-webkit-calendar-picker-indicator{ filter:none; opacity:.7; cursor:pointer; margin-right:12px; }

/* request number (success panel) */
.bo-ref{ margin:0 auto 12px !important; display:inline-block; padding:8px 18px; border-radius:999px; font-size:.95rem;
    background:rgba(6,30,70,.45); border:1px solid rgba(255,255,255,.5); }
.bo-ref b{ letter-spacing:1px; }
.bo-ref[hidden]{ display:none; }

.bo-main{ margin-bottom:60px; }

/* ============================================================
   8. MOBILE
============================================================ */
@media (max-width:1100px){
    .bo-quick{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
    :root{ --bo-hdr:72px; }
    .bo-main{ grid-template-columns:1fr; }
    .bo-hero{ height:clamp(280px, 42vh, 380px); }
    .bo-seal{ width:96px; margin-right:0; }
    .bo-seal-disc{ font-size:2.4rem; }
}
@media (max-width:768px){
    .bo-quick{ gap:14px; margin-top:34px; }
    .bo-q{ padding:20px 16px 22px; }
    .bo-form-card{ padding:24px 18px 28px; }
    .bo-h{ font-size:1.35rem; }
    .bo-row, .bo-row3{ grid-template-columns:1fr; gap:18px; }
    .bo-submit{ width:100%; justify-self:stretch; }
    .bo-help{ padding:20px 18px 22px; }
    .bo-main{ margin-bottom:44px; }
    body::before{ animation:none; }
}
@media (max-width:420px){
    .bo-quick{ grid-template-columns:1fr; }
}

/* ============================================================
   9. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
    html{ transition:none; }
    html::after, body::before{ animation:none; }
    .bo-seal-disc, .bo-seal-ring, .bo-done.show, .bo-spin{ animation:none; }
    .bo-seal-ring{ display:none; }
    .bo-q, .bo-btn{ transition:none; }
}