/* ============================================================
   CHECKOUT.CSS  -  Alif Club checkout page
   ------------------------------------------------------------
     1. Colors / helpers
     2. Background (sky-blue + dark moving blobs + clouds + grain)  [about.css jaisa]
     3. Top banner (image, ~45vh)  [faq.css jaisa]
     4. Glass base + buttons
     5. Layout + cards + form fields
     6. Payment options
     7. Order summary
     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);

    --ck-hdr:90px;           /* header ki height (fixed header ke piche banner ka text hide na ho). Zarurat ho to badlo */
    --ck-stick:96px;         /* summary card scroll par header ke neeche kitna ruke */
}

.container{ max-width:1440px; margin:0 auto; padding:0 15px; }
.ck-band{ padding:6px 0 0; }
[hidden]{ display:none !important; }

/* ============================================================
   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  (faq.css jaisa same)
   ------------------------------------------------------------
   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.
============================================================ */
.ck-hero{
    position:relative; box-sizing:border-box; overflow:hidden;
    height:clamp(300px, 45vh, 460px);
    padding-top:var(--ck-hdr);
    display:flex; align-items:center;
    background:linear-gradient(135deg,#0b3a66 0%,#1a6aa8 55%,#4f8fc0 100%);
}
.ck-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 */
}
.ck-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%);
}
.ck-hero-in{
    position:relative; z-index:2; width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:30px;
}
.ck-hero-text{ color:#fff; text-shadow:0 2px 14px rgba(0,50,120,.55); max-width:640px; }
.ck-crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:rgba(255,255,255,.85); margin-bottom:10px; }
.ck-crumbs a{ color:#fff; text-decoration:none; }
.ck-crumbs a:hover{ text-decoration:underline; }
.ck-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;
}
.ck-hero p{ margin:0; font-size:clamp(.92rem,1.5vw,1.1rem); line-height:1.5; color:rgba(255,255,255,.92); }

/* bag ka glass bubble */
.ck-seal{ position:relative; flex:none; width:clamp(120px,18vh,170px); aspect-ratio:1; display:grid; place-items:center; margin-right:4%; }
.ck-seal > *{ position:absolute; }
.ck-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:ckFloat 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);
}
.ck-seal-ring{
    inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.6); opacity:0;
    animation:ckRipple 3.6s cubic-bezier(.2,.6,.3,1) infinite;
}
.ck-seal-ring.r2{ animation-delay:1.8s; }
@keyframes ckFloat{ from{ transform:translateY(0); } to{ transform:translateY(-8px); } }
@keyframes ckRipple{ 0%{ transform:scale(.9); opacity:0; } 20%{ opacity:.8; } 100%{ transform:scale(1.7); opacity:0; } }

/* ============================================================
   4. GLASS BASE + BUTTONS
============================================================ */
.ck-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);
}

.ck-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;
}
.ck-ico.sm{ width:42px; height:42px; margin:0; font-size:16px; }

.ck-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;
}
.ck-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);
}
.ck-btn:hover{ transform:translateY(-2px); border-color:rgba(25,194,255,.85); }
.ck-btn:hover::before{ opacity:1; transform:scale(1); }
.ck-btn i{ transition:transform .3s ease; }
.ck-btn:hover .fa-paper-plane{ transform:translate(3px,-3px); }
.ck-btn.ghost{ background:rgba(6,30,70,.35); }
.ck-btn.wide{ width:100%; margin-top:14px; }
.ck-btn:focus-visible, .ck-q:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ============================================================
   5. LAYOUT + CARDS + FORM FIELDS
============================================================ */
.ck-main{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:start; margin:46px auto 60px; }
.ck-left{ display:grid; gap:22px; min-width:0; }
.ck-card{ padding:30px 32px 32px; }
.ck-h{ display:flex; align-items:center; gap:12px; margin:0 0 22px; font-size:1.35rem; font-weight:700; letter-spacing:.3px; }
.ck-num{
    flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font-size:.95rem; font-weight:800;
    background:linear-gradient(135deg,#19c2ff,#7b3ff2); border:1.5px solid rgba(255,255,255,.7); box-shadow:0 0 12px rgba(25,194,255,.5);
}

.ck-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ck-row3{ grid-template-columns:repeat(3,1fr); }
.ck-field{ min-width:0; margin-bottom:18px; }
.ck-row .ck-field, .ck-card .ck-field:last-child{ margin-bottom:0; }
.ck-row{ margin-bottom:18px; }
.ck-field label{ display:block; margin:0 0 7px; font-size:.88rem; font-weight:700; letter-spacing:.2px; }
.ck-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.
------------------------------------------------------------ */
.ck-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;
}
.ck-input > i{ flex:none; width:44px; text-align:center; font-size:14px; color:#5b6b7a; pointer-events:none; }
.ck-pre{ flex:none; margin-left:-8px; padding-right:8px; font-weight:700; font-size:.95rem; color:#111; }
.ck-input input{
    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;
}
.ck-input input:focus,
.ck-input input:focus-visible{ outline:0; box-shadow:none; }
.ck-input ::placeholder{ color:#8a96a3; opacity:1; }
/* browser autofill (peela / neela) na dikhe: safed + kaala hi rahe */
.ck-input input:-webkit-autofill,
.ck-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;
}
.ck-err{ display:block; margin-top:6px; font-size:.82rem; font-weight:600; color:#ffd0d0; text-shadow:0 1px 4px rgba(90,0,0,.55); }
.ck-err:empty{ display:none; }
.ck-field.has-err .ck-input{ border-color:#ff6b6b; box-shadow:0 0 0 3px rgba(255,100,100,.30); }

/* ============================================================
   6. PAYMENT OPTIONS
============================================================ */
.ck-pay{
    position:relative; display:flex; align-items:center; gap:14px; padding:16px 18px; margin-bottom:12px; border-radius:16px; cursor:pointer;
    background:rgba(6,30,70,.28); border:1.5px solid rgba(255,255,255,.4);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.25);
    transition:border-color .25s ease, background .25s ease, transform .35s cubic-bezier(.25,1.25,.4,1);
}
.ck-pay:last-child{ margin-bottom:0; }
.ck-pay:hover{ border-color:rgba(255,255,255,.75); transform:translateY(-2px); }
.ck-pay input{ position:absolute; opacity:0; pointer-events:none; }
.ck-pay-dot{
    flex:none; width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.7); background:rgba(255,255,255,.1);
    display:grid; place-items:center; transition:border-color .2s ease, background .2s ease;
}
.ck-pay-dot::after{ content:""; width:10px; height:10px; border-radius:50%; background:#fff; transform:scale(0); transition:transform .25s cubic-bezier(.25,1.25,.4,1); }
.ck-pay-ico{
    flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; font-size:17px; color:#fff;
    background:var(--bubbg); border:1px solid rgba(255,255,255,.55); box-shadow:var(--bubsh);
}
.ck-pay-txt{ display:grid; gap:2px; min-width:0; }
.ck-pay-txt b{ font-size:1rem; }
.ck-pay-txt small{ font-size:.85rem; color:rgba(255,255,255,.85); }
.ck-pay:has(input:checked){ border-color:#fff; background:var(--bubbg), rgba(25,194,255,.28); box-shadow:var(--bubsh); }
.ck-pay:has(input:checked) .ck-pay-dot{ border-color:#fff; background:#19c2ff; }
.ck-pay:has(input:checked) .ck-pay-dot::after{ transform:scale(1); }
.ck-pay:has(input:focus-visible){ outline:2px solid #fff; outline-offset:3px; }

/* ============================================================
   7. ORDER SUMMARY
============================================================ */
.ck-summary{ position:sticky; top:var(--ck-stick); padding:26px 26px 24px; }
.ck-summary .ck-h{ margin-bottom:18px; font-size:1.25rem; }
.ck-badge{
    margin-left:auto; min-width:28px; padding:2px 9px; text-align:center; border-radius:999px; font-size:.82rem; font-weight:800;
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.5);
}

.ck-items{ display:grid; gap:14px; max-height:340px; overflow-y:auto; padding-right:4px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.4) transparent; }
.ck-item{
    display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:center; padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.25); transition:opacity .2s ease;
}
.ck-item:last-child{ border-bottom:0; padding-bottom:0; }
.ck-item.is-busy{ opacity:.45; pointer-events:none; }
.ck-item-img{ display:block; width:64px; height:64px; border-radius:12px; overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.6); }
.ck-item-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ck-item-info{ display:grid; gap:3px; min-width:0; }
.ck-item-info small{ font-size:.7rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#bff1ff; }
.ck-item-info b{ font-size:.9rem; line-height:1.3; overflow-wrap:anywhere; }
.ck-item-side{ display:grid; justify-items:end; gap:8px; }
.ck-item-price{ font-size:.92rem; font-weight:700; white-space:nowrap; }

.ck-qty{ display:inline-flex; align-items:center; width:fit-content; margin-top:4px; border-radius:999px; background:rgba(6,30,70,.35); border:1px solid rgba(255,255,255,.4); }
.ck-qty button{
    width:28px; height:28px; border:0; background:transparent; color:#fff; font:inherit; font-size:1rem; font-weight:700; cursor:pointer; border-radius:50%;
    transition:background .2s ease;
}
.ck-qty button:hover:not(:disabled){ background:rgba(255,255,255,.22); }
.ck-qty button:disabled{ opacity:.35; cursor:not-allowed; }
.ck-qty span{ min-width:26px; text-align:center; font-size:.88rem; font-weight:700; }
.ck-remove{
    display:grid; place-items:center; width:30px; height:30px; padding:0; border-radius:50%; cursor:pointer; font-size:12px; color:#ffd0d0;
    background:rgba(120,10,20,.35); border:1px solid rgba(255,140,140,.5); transition:background .2s ease, transform .3s cubic-bezier(.25,1.25,.4,1);
}
.ck-remove:hover{ background:rgba(200,40,50,.7); color:#fff; transform:scale(1.1); }
.ck-qty button:focus-visible, .ck-remove:focus-visible, .ck-coupon-on button:focus-visible, .ck-coupon-in input:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ------------------------------------------------------------
   FREE DELIVERY (highlight)
   - progress box: peela glow + bold text ("Add QAR x more for free delivery")
   - totals me "FREE": peela pill
   Rang badalna ho to #ffe066 badlo.
------------------------------------------------------------ */
.ck-free{
    margin-top:18px; padding:14px 16px; border-radius:14px;
    background:linear-gradient(135deg,rgba(255,224,102,.26),rgba(255,224,102,.10));
    border:1.5px solid rgba(255,224,102,.85);
    box-shadow:0 0 18px -4px rgba(255,224,102,.55), inset 0 1px 1px rgba(255,255,255,.35);
}
.ck-free p{ margin:0 0 10px; font-size:.92rem; font-weight:700; color:#fff; text-shadow:0 1px 6px rgba(0,30,60,.55); }
.ck-free p b{
    display:inline-block; padding:1px 9px; border-radius:999px; font-weight:800;
    background:#ffe066; color:#4a3500; text-shadow:none;
}
.ck-free-bar{ height:8px; border-radius:8px; background:rgba(255,255,255,.28); overflow:hidden; }
.ck-free-bar span{ display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,#fff3b0,#ffe066 60%,#ffc933); box-shadow:0 0 12px rgba(255,224,102,.9); transition:width .6s cubic-bezier(.4,0,.2,1); }

/* coupon */
.ck-coupon{ margin-top:18px; }
.ck-coupon-in{ display:flex; gap:10px; }
.ck-coupon-in input{
    flex:1; min-width:0; padding:12px 16px; border-radius:999px; color:#fff; font:inherit; font-size:.92rem; outline:0; text-shadow:none;
    background:rgba(6,30,70,.30); border:1.5px solid rgba(255,255,255,.42); box-shadow:inset 0 1px 1px rgba(255,255,255,.28);
    transition:border-color .25s ease, box-shadow .25s ease;
}
.ck-coupon-in input::placeholder{ color:rgba(255,255,255,.62); }
.ck-coupon-in input:focus{ border-color:rgba(25,194,255,.95); box-shadow:0 0 0 4px rgba(25,194,255,.22); }
.ck-btn.sm{ padding:10px 22px; font-size:12px; }
.ck-btn:disabled{ cursor:wait; opacity:.8; transform:none; }
.ck-coupon-on{
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 16px; border-radius:999px; font-size:.9rem;
    background:rgba(20,120,70,.40); border:1px solid rgba(150,255,190,.55);
}
.ck-coupon-on i.fa-ticket{ margin-right:6px; color:#c9ffdb; }
.ck-coupon-on button{ border:0; background:transparent; color:#fff; cursor:pointer; font-size:15px; padding:2px 4px; }
.ck-coupon-msg{ margin:8px 4px 0; min-height:0; font-size:.83rem; font-weight:600; }
.ck-coupon-msg:empty{ display:none; }
.ck-coupon-msg.ok{ color:#c9ffdb; }
.ck-coupon-msg.bad{ color:#ffd0d0; }

/* totals */
.ck-totals{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.3); }
.ck-line{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; font-size:.95rem; }
.ck-freetag{
    display:inline-block; padding:2px 14px; border-radius:999px; font-weight:800; font-size:.85rem; letter-spacing:1.2px;
    background:#ffe066; color:#4a3500; text-shadow:none;
    box-shadow:0 0 14px rgba(255,224,102,.6);
}
.ck-disc{ color:#c9ffdb; }
.ck-grand{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:6px; padding:16px 0 4px;
    border-top:1px solid rgba(255,255,255,.3); font-size:1.25rem; font-weight:800;
}

/* place order */
.ck-place{ width:100%; margin-top:18px; padding:16px 24px; font-size:14px; }
.ck-spin{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:ckSpin .7s linear infinite; }
.ck-place.is-busy .ck-spin{ display:block; }
.ck-place.is-busy .fa-lock{ display:none; }
@keyframes ckSpin{ to{ transform:rotate(360deg); } }

.ck-notes{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; font-size:.85rem; color:rgba(255,255,255,.9); }
.ck-notes i{ width:20px; color:#bff1ff; }

/* empty bag */
.ck-empty{ max-width:560px; margin:46px auto 70px; padding:40px 28px 42px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.ck-empty .ck-ico{ width:68px; height:68px; margin-bottom:16px; font-size:26px; }
.ck-empty h2{ margin:0 0 8px; font-size:1.5rem; font-weight:700; }
.ck-empty p{ margin:0 0 22px; line-height:1.6; color:rgba(255,255,255,.92); }

/* ============================================================
   8. MOBILE
============================================================ */
@media (max-width:900px){
    :root{ --ck-hdr:72px; }
    .ck-hero{ height:clamp(280px, 42vh, 380px); }
    .ck-seal{ width:96px; margin-right:0; }
    .ck-seal-disc{ font-size:2.4rem; }
    .ck-main{ grid-template-columns:1fr; margin-top:34px; margin-bottom:44px; }
    .ck-summary{ position:static; }
    .ck-items{ max-height:none; }
}
@media (max-width:768px){
    .ck-card{ padding:22px 16px 24px; }
    .ck-h{ font-size:1.2rem; margin-bottom:18px; }
    .ck-row, .ck-row3{ grid-template-columns:1fr; gap:0; margin-bottom:0; }
    .ck-row .ck-field{ margin-bottom:18px; }
    .ck-summary{ padding:22px 16px 20px; }
    .ck-pay{ padding:14px; gap:10px; }
    .ck-pay-ico{ width:38px; height:38px; font-size:15px; }
    body::before{ animation:none; }
}

/* ============================================================
   9. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
    html{ transition:none; }
    html::after, body::before{ animation:none; }
    .ck-seal-disc, .ck-seal-ring, .ck-spin{ animation:none; }
    .ck-seal-ring{ display:none; }
    .ck-btn, .ck-pay, .ck-free-bar span, .ck-remove{ transition:none; }
}