/* ============================================================
   Grocery v7 — Glassmorphism theme (mobile-first, app feel)
   ============================================================ */

/* ---------- হিরো: অ্যানিমেটেড গ্রেডিয়েন্ট + গ্লো ---------- */
.glist-hero{
    position:relative;overflow:hidden;
    background:linear-gradient(135deg,#0b3526,#0f4d35 45%,#12563d);
    background-size:200% 200%;
    animation:gHeroShift 14s ease infinite;
    padding:22px 0 30px;color:#fff;
}
.glist-hero::before,.glist-hero::after{
    content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;
}
.glist-hero::before{width:340px;height:340px;background:#1e9e6a;top:-120px;right:-90px;animation:gFloat 9s ease-in-out infinite}
.glist-hero::after{width:260px;height:260px;background:#ffb703;bottom:-130px;left:-80px;opacity:.18;animation:gFloat 11s ease-in-out infinite reverse}
.glist-hero .container{position:relative;z-index:1;max-width:640px}
@keyframes gHeroShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes gFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(22px)}}

.g-hero-title{font-size:23px;margin:14px 0 4px;font-weight:800;letter-spacing:.2px}
.g-hero-sub{opacity:.88;font-size:14px;margin:0 0 14px}

/* ---------- গ্লাস কার্ড ---------- */
.g-glass{
    background:rgba(255,255,255,.10);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
    border:1px solid rgba(255,255,255,.22);
    border-radius:20px;
    box-shadow:0 14px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---------- বড় কাউন্টডাউন ---------- */
.g-cd{padding:13px 16px 15px;text-align:center;margin-bottom:16px;animation:gRise .5s ease both}
.g-cd-label{font-size:13.5px;font-weight:700;letter-spacing:.3px;opacity:.95;margin-bottom:7px}
.g-cd-timer{display:flex;justify-content:center;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.g-cd-cell{
    display:inline-block;min-width:58px;padding:8px 6px;
    background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16);border-radius:12px;
    font-size:31px;font-weight:800;line-height:1;color:#ffd166;
    text-shadow:0 2px 10px rgba(255,183,3,.35);
}
.g-cd-sep{font-size:26px;font-weight:800;color:rgba(255,255,255,.7)}
.g-cd-unit{display:block;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.65);margin-top:5px;letter-spacing:1px}
.g-cd.g-urgent .g-cd-cell{background:rgba(190,30,30,.45);color:#ffdada;border-color:rgba(255,120,120,.4);animation:gPulse 1s ease infinite}
@keyframes gPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes gRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- শপিং-লিস্ট লেখার জায়গা (খাতার মতো) ---------- */
.g-ta-wrap{position:relative;animation:gRise .6s .08s ease both}
.g-ta-label{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:800;margin:0 0 9px;color:#ffd166}
#gList{
    width:100%;min-height:150px;border:none;border-radius:16px;
    padding:16px 18px;font-size:16px;line-height:1.95;resize:vertical;
    color:#123527;font-weight:600;
    background:
        repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.95em - 1px), rgba(15,77,53,.10) calc(1.95em - 1px), rgba(15,77,53,.10) 1.95em),
        rgba(255,255,255,.95);
    background-attachment:local;
    box-shadow:inset 0 2px 8px rgba(0,0,0,.08), 0 10px 26px rgba(0,0,0,.18);
    transition:box-shadow .25s ease, transform .25s ease;
}
#gList::placeholder{color:#7c9c8b;font-weight:500}
#gList:focus{
    outline:none;transform:translateY(-1px);
    box-shadow:inset 0 2px 8px rgba(0,0,0,.06), 0 0 0 3px rgba(255,183,3,.55), 0 14px 30px rgba(0,0,0,.22);
}

/* ---------- মূল বাটন: shimmer + প্রেস ---------- */
#gParseBtn{
    position:relative;overflow:hidden;margin-top:13px;width:100%;
    background:linear-gradient(135deg,#ffb703,#ff9505);color:#3a2e00;
    font-weight:800;font-size:16.5px;padding:15px;border:none;border-radius:14px;
    box-shadow:0 10px 24px rgba(255,150,5,.35);
    transition:transform .15s ease, box-shadow .2s ease;
}
#gParseBtn::after{
    content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    animation:gShimmer 3.2s ease infinite;
}
#gParseBtn:active{transform:scale(.97)}
#gParseBtn.loading{opacity:.75;pointer-events:none}
@keyframes gShimmer{0%{left:-80%}55%,100%{left:130%}}

.g-prices-link{display:block;text-align:center;margin-top:11px;color:#ffd166;font-size:13.5px;font-weight:700;text-decoration:none}

/* ---------- রেজাল্ট আইটেম: গ্লাস রো + stagger ---------- */
#gResult .g-item{
    display:flex;align-items:center;gap:10px;
    background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);
    border-radius:14px;padding:10px 12px;margin-top:9px;
    animation:gRise .45s ease both;
}
#gResult .g-item:nth-child(2){animation-delay:.05s}
#gResult .g-item:nth-child(3){animation-delay:.1s}
#gResult .g-item:nth-child(4){animation-delay:.15s}
#gResult .g-item:nth-child(5){animation-delay:.2s}
#gResult .g-item:nth-child(6){animation-delay:.25s}
#gResult .g-item:nth-child(n+7){animation-delay:.3s}

/* সাজেশন চিপ */
.gsug{transition:transform .15s ease, background .2s ease;cursor:pointer}
.gsug:active{transform:scale(.92)}

/* ---------- সাইট-ওয়াইড স্লিম কাউন্টডাউন স্ট্রিপ ---------- */
.g-strip{
    position:sticky;top:0;z-index:120;
    display:flex;justify-content:center;align-items:center;gap:8px;
    background:rgba(11,53,38,.86);
    -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
    color:#fff;font-size:13px;font-weight:700;padding:8px 12px;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.g-strip b{color:#ffd166;font-variant-numeric:tabular-nums;font-size:14.5px}
.g-strip.g-urgent b{color:#ff9d9d;animation:gPulse 1s ease infinite;display:inline-block}

/* ---------- অর্ডার প্যানেল (মোবাইল অ্যাপ feel) ---------- */
#gOrderWrap .panel{border-radius:18px;box-shadow:0 12px 34px rgba(15,61,46,.10);animation:gRise .4s ease both}
#gOrderWrap input,#gOrderWrap select,#gOrderWrap textarea{font-size:16px;min-height:46px;border-radius:12px}
#gOrderWrap .check-row{display:flex;align-items:center;gap:10px;cursor:pointer}
#gOrderWrap .check-row input[type=checkbox]{width:21px;height:21px;min-height:0;min-width:0;flex:0 0 auto;margin:0;accent-color:var(--green-600,#16a34a);border-radius:6px}
#gOrderWrap textarea{min-height:64px}
#gOrderBtn{transition:transform .15s ease}
#gOrderBtn:active{transform:scale(.97)}

/* ---------- অর্ডার ট্র্যাক: ৬-ধাপ টাইমলাইন সুন্দর গ্রিডে ---------- */
.timeline{
    display:grid !important;
    grid-template-columns:repeat(6,1fr);
    gap:8px 6px;align-items:start;
}
.timeline .tl-step{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    text-align:center;font-size:12px;line-height:1.35;margin:0;
}
.timeline .tl-dot{margin:0}
@media (max-width:640px){
    .timeline{grid-template-columns:repeat(3,1fr);row-gap:14px}
    .timeline .tl-step{font-size:11.5px}
    .timeline .tl-step:nth-child(3n+1)::before{display:none}   /* প্রতি সারির প্রথম ডটে কানেক্টর নয় */
}

/* ---------- মোবাইল টিউনিং ---------- */
@media (max-width:600px){
    .glist-hero{padding:16px 0 24px}
    .g-hero-title{font-size:20px}
    .g-cd-cell{min-width:52px;font-size:27px}
    .glist-hero .container{padding-left:14px;padding-right:14px}
    body{padding-bottom:70px}   /* bottom-nav overlap */
}
@media (prefers-reduced-motion:reduce){
    .glist-hero,.g-cd,.g-ta-wrap,#gResult .g-item,#gOrderWrap .panel{animation:none}
    #gParseBtn::after{animation:none;display:none}
    .g-cd.g-urgent .g-cd-cell,.g-strip.g-urgent b{animation:none}
}