/* welcome-style.css */
*, *::before, *::after { box-sizing: border-box; }

/* ── TOKENS ───────────────────────────────────────── */
:root {
    --g:   #16a34a;
    --gd:  #15803d;
    --gdd: #166534;
    --gl:  #dcfce7;
    --gs:  #f0fdf4;
    --text:   #111827;
    --muted:  #6b7280;
    --border: #e5e7eb;
    --bg:     #ffffff;
    --bg2:    #f9fafb;
    --r:      12px;
    --r-lg:   16px;
    --sh-hover: 0 6px 12px rgba(0,0,0,.06), 0 16px 36px rgba(0,0,0,.1);
}

/* ── LIVE DOT ─────────────────────────────────────── */
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e; flex-shrink: 0;
    animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
.hero {
    background: var(--gs);
    border-bottom: 1px solid var(--gl);
    padding: clamp(3.5rem,9vw,6rem) 5% clamp(3rem,7vw,5rem);
    animation: heroIn .6s ease both;
}
@keyframes heroIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-inner { max-width: 800px; margin: 0 auto; text-align: center; }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--gl); color: var(--gdd);
    font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: .35rem 1rem; border-radius: 99px; margin-bottom: 1.5rem;
}

.hero h1 {
    font-size: clamp(2.2rem,5.5vw,3.6rem);
    font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
    color: var(--text); margin-bottom: 1rem;
}
.hero-accent { color: var(--g); }

.hero-sub {
    font-size: clamp(.95rem,2vw,1.1rem);
    color: var(--muted); max-width: 480px;
    margin: 0 auto 2.5rem; line-height: 1.65;
}

/* Search */
.hsearch {
    display: flex; align-items: stretch;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 4px 32px rgba(22,163,74,.12);
    overflow: hidden; max-width: 740px; margin: 0 auto;
    transition: box-shadow .2s, border-color .2s;
}
.hsearch:focus-within {
    box-shadow: 0 4px 40px rgba(22,163,74,.22);
    border-color: rgba(22,163,74,.4);
}
.hsearch-loc {
    display: flex; align-items: center; gap: .45rem;
    padding: 0 1rem; border: none; background: none;
    color: var(--muted); font-size: .82rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; min-width: 130px;
    transition: color .15s;
}
.hsearch-loc i { color: var(--g); }
.hsearch-loc:hover { color: var(--text); }
.hsearch-divider { width: 1px; background: var(--border); margin: 8px 0; flex-shrink: 0; }
.hsearch-input {
    flex: 1; border: none; outline: none;
    padding: 1.05rem .75rem; font-size: .95rem;
    color: var(--text); background: transparent; min-width: 0;
}
.hsearch-input::placeholder { color: #9ca3af; }
.hsearch-gps {
    padding: 0 .7rem; background: none; border: none;
    color: var(--muted); font-size: 1rem; cursor: pointer;
    transition: color .15s; flex-shrink: 0;
}
.hsearch-gps:hover, .hsearch-gps.active { color: var(--g); }
.hsearch-btn {
    display: flex; align-items: center; gap: .45rem;
    padding: 0 1.5rem; background: var(--g); color: #fff;
    border: none; font-size: .88rem; font-weight: 700;
    cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.hsearch-btn:hover { background: var(--gd); }

.hero-hint { font-size: .78rem; color: var(--muted); min-height: 1.2em; margin-top: .65rem; }
.hero-hint--ok  { color: var(--g); }
.hero-hint--err { color: #dc2626; }

.hero-stats {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; margin-top: 2.75rem;
}
.hstat { text-align: center; padding: .25rem 2rem; }
.hstat-sep { width: 1px; height: 2rem; background: var(--border); }
.hstat-num { display: block; font-size: 1.55rem; font-weight: 800; color: var(--text); line-height: 1; }
.hstat-label { display: block; font-size: .72rem; color: var(--muted); margin-top: .3rem; font-weight: 500; }

/* ═══════════════════════════════════════════════════
   SECTION SHELL
═══════════════════════════════════════════════════ */
.ws { padding: clamp(2.5rem,5vw,4rem) 5%; overflow: hidden; }
.ws--alt { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ws-container { max-width: 1280px; margin: 0 auto; }

.ws-head {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 1.5rem; gap: 1rem;
}
.ws-eyebrow {
    font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--g); margin-bottom: .25rem;
}
.ws-title { font-size: clamp(1.2rem,2.5vw,1.55rem); font-weight: 800; color: var(--text); margin: 0; }
.ws-link {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .82rem; font-weight: 700; color: var(--g);
    text-decoration: none; white-space: nowrap; transition: gap .15s;
}
.ws-link:hover { gap: .6rem; text-decoration: underline; }

.carousel-controls { display: flex; align-items: center; gap: .6rem; }
.cc-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--border); background: var(--bg);
    color: var(--muted); font-size: .8rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; flex-shrink: 0;
}
.cc-btn:hover { border-color: var(--g); color: var(--g); background: var(--gs); }
.cc-btn:disabled { opacity: .35; cursor: not-allowed; }

.open-bar {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--bg); border: 1px solid var(--gl);
    padding: .35rem .9rem; border-radius: 99px;
    font-size: .78rem; color: var(--muted); font-weight: 600;
    margin-bottom: 1.25rem;
}
.open-bar-dist { display: inline-flex; align-items: center; gap: .3rem; color: var(--g); }

.ws-empty { text-align: center; padding: 3.5rem 2rem; color: var(--muted); }
.ws-empty i { font-size: 2.2rem; opacity: .25; margin-bottom: .75rem; display: block; }

/* ═══════════════════════════════════════════════════
   CAROUSEL ENGINE
═══════════════════════════════════════════════════ */
.carousel-track-wrap {
    overflow: hidden;
    border-radius: var(--r-lg);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.carousel-track-wrap:active { cursor: grabbing; }

.carousel-track {
    display: flex;
    will-change: transform;
}

.carousel-slide {
    flex-shrink: 0;
    padding: 0 .5rem;
}

/* dots */
.carousel-dots {
    display: flex; justify-content: center; gap: .4rem;
    margin-top: 1.25rem;
}
.cdot {
    width: 7px; height: 7px; border-radius: 99px;
    background: var(--border); border: none; padding: 0; cursor: pointer;
    transition: all .25s;
}
.cdot.active { background: var(--g); width: 22px; }

/* ═══════════════════════════════════════════════════
   DISH CARDS
═══════════════════════════════════════════════════ */
.dish-card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .22s, box-shadow .22s;
    height: 100%;
}
.dish-card:hover { transform: translateY(-5px); box-shadow: var(--sh-hover); }

.dish-img { height: 175px; position: relative; overflow: hidden; background: var(--bg2); flex-shrink: 0; }
.dish-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .38s; pointer-events: none; }
.dish-card:hover .dish-img img { transform: scale(1.05); }
.dish-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.28) 0%, transparent 55%);
    pointer-events: none;
}
.dish-pill {
    position: absolute; top: 10px; left: 10px;
    padding: 3px 10px; border-radius: 99px;
    font-size: .68rem; font-weight: 700; backdrop-filter: blur(4px);
}
.pill-vegan, .pill-veg {
    background: rgba(240,253,244,.9); color: #166534;
    border: 1px solid rgba(134,239,172,.6);
}
.pill-spicy {
    background: rgba(255,247,237,.9); color: #9a3412;
    border: 1px solid rgba(254,215,170,.6);
}
.dish-price-tag {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(0,0,0,.58); color: #fff;
    padding: 4px 10px; border-radius: 99px;
    font-size: .76rem; font-weight: 800; backdrop-filter: blur(4px);
}

.dish-body { padding: .9rem 1rem; display: flex; flex-direction: column; flex: 1; }
.dish-name { font-size: .93rem; font-weight: 700; color: var(--text); margin-bottom: .3rem; line-height: 1.3; }
.dish-resto {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .76rem; color: var(--muted); text-decoration: none;
    margin-bottom: auto; padding-bottom: .7rem;
}
.dish-resto i { color: var(--g); font-size: .68rem; }
.dish-resto:hover { color: var(--g); }
.dish-footer {
    display: flex; align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding-top: .6rem; gap: .4rem;
}
.dish-meta { display: flex; align-items: center; gap: .5rem; font-size: .73rem; color: var(--muted); flex-wrap: wrap; }
.dish-rating { color: #f59e0b; font-weight: 700; display: flex; align-items: center; gap: 3px; }
.dish-time   { display: flex; align-items: center; gap: 3px; }
.dish-order-btn {
    display: inline-flex; align-items: center;
    padding: .42rem .85rem; background: var(--gs);
    color: var(--g); border: 1.5px solid var(--gl);
    border-radius: 8px; font-size: .75rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.dish-order-btn:hover { background: var(--gl); border-color: var(--g); }

/* ═══════════════════════════════════════════════════
   RESTAURANT CARDS
═══════════════════════════════════════════════════ */
.resto-card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden;
    color: inherit; display: block;
    transition: transform .22s, box-shadow .22s;
    height: 100%;
}
.resto-card:hover { transform: translateY(-5px); box-shadow: var(--sh-hover); }

.resto-img { height: 175px; position: relative; overflow: hidden; background: var(--bg2); }
.resto-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .38s; pointer-events: none; }
.resto-card:hover .resto-img img { transform: scale(1.05); }
.resto-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.3) 0%, transparent 55%);
    pointer-events: none;
}
.resto-status {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 99px;
    font-size: .7rem; font-weight: 700; backdrop-filter: blur(4px);
}
.status-open   { background: rgba(22,163,74,.2); color: #14532d; border: 1px solid rgba(22,163,74,.35); }
.status-closed { background: rgba(0,0,0,.45); color: #fff; }
.resto-top {
    position: absolute; top: 10px; right: 10px;
    background: rgba(255,247,237,.92); color: #9a3412;
    border: 1px solid rgba(254,215,170,.7);
    padding: 4px 10px; border-radius: 99px;
    font-size: .7rem; font-weight: 700;
}
.resto-dist-badge {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(0,0,0,.58); color: #fff;
    padding: 3px 9px; border-radius: 99px;
    font-size: .7rem; align-items: center; gap: 4px;
    backdrop-filter: blur(4px);
    animation: badgeIn .3s ease both;
}
@keyframes badgeIn { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }

.resto-body { padding: .9rem 1.1rem; }
.resto-name { font-size: .97rem; font-weight: 700; color: var(--text); margin-bottom: .22rem; line-height: 1.3; }
.resto-cuisine { font-size: .78rem; color: var(--muted); margin-bottom: .65rem; }
.resto-meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .55rem; font-size: .75rem; color: var(--muted);
    padding-top: .6rem; border-top: 1px solid var(--border);
}
.resto-rating { color: #f59e0b; font-weight: 700; display: flex; align-items: center; gap: 3px; }
.resto-time, .resto-min { display: flex; align-items: center; gap: 3px; }

/* ═══════════════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════════════ */
.how { padding: clamp(2.5rem,5vw,4rem) 5%; background: var(--bg); }
.how-head { text-align: center; margin-bottom: 2.5rem; }
.how-title { font-size: clamp(1.25rem,2.8vw,1.7rem); font-weight: 800; color: var(--text); margin: .25rem 0 .5rem; }
.how-sub { font-size: .9rem; color: var(--muted); }

.how-grid {
    display: flex; align-items: flex-start;
    justify-content: center;
    max-width: 860px; margin: 0 auto;
}
.how-card {
    flex: 1; text-align: center; padding: 1.75rem 1.25rem;
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg);
    transition: transform .22s, box-shadow .22s;
}
.how-card:hover { transform: translateY(-4px); box-shadow: 0 4px 20px rgba(0,0,0,.08); }

.how-connector {
    padding: 0 .85rem; color: var(--border);
    font-size: 1rem; flex-shrink: 0; align-self: center; margin-top: -1rem;
}
.how-num { font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: var(--g); text-transform: uppercase; margin-bottom: .85rem; }
.how-icon {
    width: 50px; height: 50px; border-radius: 14px;
    background: var(--gs); border: 1.5px solid var(--gl);
    color: var(--g); font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .85rem;
}
.how-card h3 { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: .35rem; }
.how-card p  { font-size: .83rem; color: var(--muted); line-height: 1.65; }

/* scroll-in animation for how cards */
.anim-fadein {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease var(--d, 0s), transform .5s ease var(--d, 0s);
}
.anim-fadein.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════════════ */
.cta { background: var(--g); padding: clamp(2rem,5vw,3.5rem) 5%; }
.cta-inner {
    max-width: 860px; margin: 0 auto;
    display: flex; align-items: center;
    justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.cta-text h2 { font-size: clamp(1.3rem,3vw,1.9rem); font-weight: 800; color: #fff; margin-bottom: .35rem; }
.cta-text p  { font-size: .9rem; color: rgba(255,255,255,.82); }
.cta-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; color: var(--g);
    padding: .8rem 1.9rem; border-radius: var(--r);
    font-size: .9rem; font-weight: 800;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: background .15s, transform .15s;
}
.cta-btn:hover { background: var(--gl); transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .hsearch { flex-direction: column; border-radius: var(--r-lg); }
    .hsearch-loc { border-bottom: 1px solid var(--border); padding: .8rem 1rem; min-width: 0; }
    .hsearch-divider { display: none; }
    .hsearch-tabs { border-bottom: 1px solid var(--border); padding: .35rem .6rem; }
    .hsearch-input { padding: .85rem 1rem; }
    .hsearch-gps { display: none; }
    .hsearch-btn { padding: .95rem; border-radius: 0 0 var(--r-lg) var(--r-lg); justify-content: center; }

    .hero-stats { flex-direction: row; justify-content: space-around; gap: .5rem; }
    .hstat-sep  { display: none; }
    .hstat      { padding: .25rem .5rem; }

    .how-grid { flex-direction: column; gap: 1rem; }
    .how-connector { display: none; }
    .cta-inner { text-align: center; justify-content: center; }
}

@media (max-width: 480px) {
    .ws-head { flex-wrap: wrap; }
    .cc-btn  { width: 32px; height: 32px; font-size: .72rem; }
    .hero h1 { font-size: 1.85rem; }
}