/* ══════════════════════════════════════════════════════════
   EPICURE — Espace Client — v1.3 Élégance Premium
   Standard: luxe, typographie raffinée, micro-animations
   ══════════════════════════════════════════════════════════ */

:root{
    --gold:#D4AF37;--gold-l:#E8C95A;--gold-dk:#A8872A;
    --gold-10:rgba(212,175,55,.10);--gold-15:rgba(212,175,55,.15);
    --gold-25:rgba(212,175,55,.25);--gold-40:rgba(212,175,55,.40);
    --green:#34C759;--green-bg:rgba(52,199,89,.12);--green-bd:rgba(52,199,89,.28);
    --red:#FF3B30;--red-bg:rgba(255,59,48,.12);--red-bd:rgba(255,59,48,.28);
    --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px;--r-full:9999px;
    --ease:220ms cubic-bezier(.4,0,.2,1);--ease-spring:350ms cubic-bezier(.34,1.56,.64,1);
    --hdr:54px;--nav:60px;
    --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
}

/* ── Thèmes ── */
[data-theme="luxury-dark"]{
    --bg:#0A0A0A;--bg2:#050505;--bg-glass:rgba(10,10,10,.85);
    --card:#141414;--card2:#1A1A1A;--card-glass:rgba(20,20,20,.75);
    --brd:rgba(255,255,255,.08);--brd2:rgba(255,255,255,.04);
    --tx:#F5F5F5;--tx2:#C8C8C8;--txm:#777;--txd:#444;
    --sh:0 4px 20px rgba(0,0,0,.6);--sh2:0 8px 32px rgba(0,0,0,.4);
    --inp:rgba(255,255,255,.06);--hov:rgba(255,255,255,.05);
}
[data-theme="arctic-light"]{
    --bg:#EDE6D8;--bg2:#E5DDD0;--bg-glass:rgba(237,230,216,.95);
    --card:#FDFAF5;--card2:#F8F3EB;--card-glass:rgba(253,250,245,.92);
    --brd:rgba(190,170,135,.28);--brd2:rgba(170,148,110,.16);
    --tx:#1A1408;--tx2:#33291A;--txm:#7A6F5E;--txd:#9E9484;
    --sh:0 1px 3px rgba(0,0,0,.04),0 6px 20px rgba(120,90,30,.05);--sh2:0 4px 16px rgba(120,90,30,.07);
    --inp:#F7F2E9;--hov:rgba(180,150,80,.06);
}
[data-theme="unusuall"]{
    --bg:#081510;--bg2:#051210;--bg-glass:rgba(8,21,16,.85);
    --card:#101E17;--card2:#152820;--card-glass:rgba(16,30,23,.78);
    --brd:rgba(255,255,255,.06);--brd2:rgba(255,255,255,.03);
    --tx:#E0F0E4;--tx2:#A0CCA8;--txm:#6A9A78;--txd:#3A5848;
    --sh:0 4px 20px rgba(0,0,0,.5);--sh2:0 8px 32px rgba(0,0,0,.3);
    --inp:rgba(10,22,16,.5);--hov:rgba(255,255,255,.04);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
    font-family:var(--font-body);
    background:var(--bg);color:var(--tx);line-height:1.5;
    overflow:hidden;height:100vh;height:100dvh;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
.scrollbar-hide::-webkit-scrollbar{display:none}
#client-content{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
#client-content::-webkit-scrollbar{width:0}

/* ══════ SPLASH ══════ */
#client-splash{transition:opacity .6s ease,visibility .6s ease}
#client-splash.fade-out{opacity:0;visibility:hidden;pointer-events:none}
.splash-ring{
    width:80px;height:80px;border-radius:50%;
    background:conic-gradient(var(--gold),transparent 70%);
    display:flex;align-items:center;justify-content:center;
    animation:splash-rotate 1.2s linear infinite;
}
.splash-ring-inner{
    width:68px;height:68px;border-radius:50%;
    background:var(--bg);
    display:flex;align-items:center;justify-content:center;
}
@keyframes splash-rotate{to{transform:rotate(360deg)}}

/* ══════ HEADER ══════ */
#client-header{
    height:var(--hdr);
    background:var(--bg-glass);
    border-bottom:1px solid var(--brd);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    position:sticky;top:0;z-index:50;
}
.header-logo-icon{
    width:30px;height:30px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;
    box-shadow:none;
}
.header-title{font-size:16px;font-weight:800;letter-spacing:.01em;color:var(--tx)}
.header-title span{color:var(--gold)}
.header-action{
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:none;cursor:pointer;
    color:var(--tx2);transition:all var(--ease);
}
.header-action:active{transform:scale(.88);background:var(--hov)}

/* ══════ SEARCH ══════ */
#client-search-bar{transition:max-height .3s ease,opacity .2s ease,padding .3s ease;max-height:52px;opacity:1}
#client-search-bar.hidden{max-height:0;opacity:0;overflow:hidden;padding-top:0!important;padding-bottom:0!important}
#client-search-input{
    background:var(--card);border:1.5px solid var(--brd);color:var(--tx);
    font-size:13px;border-radius:var(--r-full);height:38px;
    transition:border-color var(--ease),box-shadow var(--ease);
}
#client-search-input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px var(--gold-10),var(--sh)}
#client-search-input::placeholder{color:var(--txd)}

/* ══════ BOTTOM NAV ══════ */
#client-bottom-nav{
    height:var(--nav);
    background:var(--bg-glass);
    border-top:1px solid var(--brd2);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
}
.client-nav-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:4px 0;width:25%;
    color:var(--txd);background:none;border:none;cursor:pointer;
    transition:color var(--ease);font-family:var(--font-body);
    -webkit-tap-highlight-color:transparent;position:relative;
}
.client-nav-btn .nav-icon{font-size:18px;transition:transform var(--ease-spring),color var(--ease)}
.client-nav-btn .nav-label{font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.client-nav-btn.active{color:var(--gold)}
.client-nav-btn.active .nav-icon{transform:translateY(-1px) scale(1.12)}
.client-nav-btn.active::after{
    content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
    width:20px;height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    border-radius:0 0 4px 4px;
}
.client-nav-btn:active .nav-icon{transform:scale(.85);transition:transform 80ms}

/* ══════ HERO BANNER ══════ */
.hero-banner{
    padding:20px 16px 4px;
}
.hero-tagline{
    font-family:var(--font-display);font-size:24px;font-weight:700;
    line-height:1.15;color:var(--tx);letter-spacing:-.01em;
}
.hero-tagline .gold{color:var(--gold)}
.hero-sub{font-size:12px;color:var(--txm);margin-top:4px;font-weight:400}
.hero-sub i{color:var(--gold);margin-right:3px}

/* ══════ FILTER CHIPS ══════ */
.filters-wrap{padding:10px 16px 6px}
.client-filter-chip{
    display:inline-flex;align-items:center;white-space:nowrap;
    padding:7px 14px;border-radius:var(--r-full);
    border:1px solid var(--brd);background:var(--card);
    color:var(--txm);font-size:11px;font-weight:500;font-family:var(--font-body);
    cursor:pointer;transition:all var(--ease);flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
}
.client-filter-chip i{margin-right:5px;font-size:9px}
.client-filter-chip:active{transform:scale(.93)}
.client-filter-chip.active{
    background:linear-gradient(135deg,var(--gold),var(--gold-l));
    color:#000;border-color:transparent;font-weight:700;
    box-shadow:0 2px 12px var(--gold-40);
}

/* ══════════════════════════════════════════════════════════
   RESTAURANT CARDS — Grille 2 colonnes, overlay total
   ══════════════════════════════════════════════════════════ */
#client-feed-list,#client-feed-skeleton{
    display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
    box-sizing:border-box;overflow:hidden;
}
.client-restaurant-card{
    border-radius:var(--r-xl);overflow:hidden;cursor:pointer;
    position:relative;background:#000;aspect-ratio:3/4;
    transition:transform var(--ease);
    box-shadow:var(--sh);
}
.client-restaurant-card:active{transform:scale(.97)}

.card-cover{position:absolute;inset:0;overflow:hidden}
.card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
.client-restaurant-card:hover .card-cover img{transform:scale(1.06)}

/* Placeholder élégant */
.card-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.card-ph-bg{position:absolute;inset:0}
.card-ph-bg[data-v="0"]{background:linear-gradient(160deg,#3C2415 0%,#1A0800 60%,#0A0400 100%)}
.card-ph-bg[data-v="1"]{background:linear-gradient(160deg,#1A3020 0%,#081A0A 60%,#040A04 100%)}
.card-ph-bg[data-v="2"]{background:linear-gradient(160deg,#301838 0%,#140A1A 60%,#080410 100%)}
.card-ph-bg[data-v="3"]{background:linear-gradient(160deg,#182838 0%,#0A141A 60%,#040810 100%)}
.card-ph-bg[data-v="4"]{background:linear-gradient(160deg,#382818 0%,#1A140A 60%,#100A04 100%)}
.card-ph-bg[data-v="5"]{background:linear-gradient(160deg,#281A38 0%,#140A1A 60%,#0A0410 100%)}
.card-ph-bg[data-v="6"]{background:linear-gradient(160deg,#381820 0%,#1A0A10 60%,#100408 100%)}
.card-ph-bg[data-v="7"]{background:linear-gradient(160deg,#183028 0%,#0A1A14 60%,#041010 100%)}
[data-theme="arctic-light"] .card-ph-bg{opacity:.55}
.card-ph-emoji{position:relative;z-index:2;font-size:42px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}

/* Gradient overlay triple couche */
.card-grad{
    position:absolute;bottom:0;left:0;right:0;height:70%;
    background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.1) 70%,transparent 100%);
    z-index:2;pointer-events:none;
}

/* Info overlay */
.card-info{position:absolute;bottom:0;left:0;right:0;padding:0 11px 10px;z-index:3;color:#FFF}
.card-name{
    font-family:var(--font-body);font-size:13px;font-weight:700;
    line-height:1.2;letter-spacing:.01em;
    text-shadow:0 1px 4px rgba(0,0,0,.7);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-cuisine{font-size:10px;color:rgba(255,255,255,.6);margin-top:1px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.card-meta{display:flex;align-items:center;gap:5px;margin-top:5px;flex-wrap:wrap}
.card-star{color:#FFD700;font-size:8px}
.card-rating{font-size:11px;font-weight:700;color:#FFF}
.card-reviews{font-size:9px;color:rgba(255,255,255,.45)}
.card-delivery-pill{
    display:inline-flex;align-items:center;gap:2px;
    padding:2px 6px;border-radius:var(--r-full);
    background:var(--gold);color:#000;font-size:8px;font-weight:700;letter-spacing:.02em;
}
.card-dist{font-size:12px;color:var(--txm);margin-left:auto}

/* Badges top */
.card-badge{
    position:absolute;display:inline-flex;align-items:center;gap:3px;
    padding:3px 8px;border-radius:var(--r-full);
    font-size:9px;font-weight:700;letter-spacing:.02em;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:4;
}
.card-badge.open{top:8px;right:8px;background:rgba(52,199,89,.2);color:#34C759;border:1px solid rgba(52,199,89,.25)}
.card-badge.closed{top:8px;right:8px;background:rgba(255,59,48,.2);color:#FF3B30;border:1px solid rgba(255,59,48,.25)}
.card-badge.delivery-badge{top:8px;left:8px;background:rgba(212,175,55,.18);color:var(--gold);border:1px solid rgba(212,175,55,.25)}

/* Card tags, footer, cover distance */
.card-tags{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.card-tag{
    padding:3px 9px;border-radius:8px;
    background:var(--bg2);border:1px solid var(--brd2);
    font-size:11px;color:var(--gold);font-weight:500;
}
.card-footer{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:10px;padding-top:10px;
    border-top:1px solid var(--brd2);
}
.card-delivery-info{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--txm)}
.card-delivery-icon{
    width:22px;height:22px;border-radius:7px;
    background:rgba(52,199,89,.1);color:#34C759;
    display:flex;align-items:center;justify-content:center;font-size:10px;
}
.card-action-btns{display:flex;gap:6px}
.card-action-btn{
    width:30px;height:30px;border-radius:9px;
    background:var(--bg2);border:1px solid var(--brd2);
    display:flex;align-items:center;justify-content:center;
    font-size:12px;color:var(--txm);cursor:pointer;
    transition:all .2s;
}
.card-action-btn:hover{border-color:rgba(212,175,55,.3);color:var(--gold)}
.card-cover-dist{
    position:absolute;bottom:10px;right:12px;z-index:5;
    font-size:11px;color:rgba(255,255,255,.85);font-weight:600;
    display:flex;align-items:center;gap:3px;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.card-cover-dist i{font-size:8px}

/* ══════ EMPTY REVIEWS — Premium State ══════ */
.reviews-empty-premium{text-align:center;padding:24px 16px 40px}
.reviews-empty-illus{
    width:100px;height:100px;border-radius:50%;margin:14px auto;
    background:radial-gradient(circle at 30% 30%,var(--bg2),var(--card));
    border:2px solid var(--brd2);
    display:flex;align-items:center;justify-content:center;
    position:relative;
}
.reviews-empty-illus .re-star{font-size:34px;animation:re-pulse 2.5s ease-in-out infinite}
.reviews-empty-illus .re-sparkle{
    position:absolute;font-size:12px;color:var(--gold);opacity:.3;
}
.reviews-empty-illus .re-sparkle:nth-child(2){top:10px;right:16px;animation:re-twinkle 1.8s ease infinite .3s}
.reviews-empty-illus .re-sparkle:nth-child(3){bottom:16px;left:12px;animation:re-twinkle 1.8s ease infinite .7s}
.reviews-empty-illus .re-sparkle:nth-child(4){top:24px;left:20px;animation:re-twinkle 1.8s ease infinite 1.1s}
@keyframes re-pulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.85}}
@keyframes re-twinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.6;transform:scale(1.2)}}
.reviews-empty-title{font-size:15px;font-weight:700;color:var(--tx);margin-bottom:5px}
.reviews-empty-sub{font-size:12px;color:var(--txm);line-height:1.45;max-width:260px;margin:0 auto}
.reviews-empty-cta{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:16px;padding:12px 24px;border-radius:12px;
    background:linear-gradient(135deg,#D4AF37,#E8C95A);border:none;
    color:#1A1714;font-size:13px;font-weight:700;cursor:pointer;
    box-shadow:0 4px 16px rgba(212,175,55,.25);transition:all .2s;
}
.reviews-empty-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(212,175,55,.35)}
.reviews-empty-note{
    margin-top:12px;padding:8px 12px;border-radius:10px;
    background:var(--card);border:1px solid var(--brd2);
    font-size:11px;color:var(--txm);
    display:flex;align-items:center;gap:8px;text-align:left;
}
.reviews-empty-note-icon{
    width:24px;height:24px;border-radius:50%;flex-shrink:0;
    background:rgba(212,175,55,.08);
    display:flex;align-items:center;justify-content:center;font-size:12px;
}

/* ══════ SKELETON ══════ */
@keyframes shimmer{0%{background-position:-300px 0}100%{background-position:calc(300px+100%) 0}}
.skeleton-card{
    border-radius:var(--r-xl);aspect-ratio:3/4;
    background-image:linear-gradient(90deg,var(--bg2) 0px,var(--brd) 60px,var(--bg2) 120px);
    background-size:300px 100%;animation:shimmer 1.6s ease-in-out infinite;
}

/* ══════ DETAIL ══════ */
/* ═══ PREMIUM RESTAURANT DETAIL (FICHE) ═══ */

/* Hero Section */
.detail-hero{position:relative;height:220px;overflow:hidden}
.detail-hero img{width:100%;height:100%;object-fit:cover}
.detail-hero-ph{height:100%;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(135deg,#2C1810,#4A3020,#2C1810)}
.detail-hero-grad-top{position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(rgba(0,0,0,.4),transparent);z-index:2}
.detail-hero-grad-bottom{position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(transparent,rgba(26,23,20,.85),var(--bg));z-index:2}

/* Floating Hero Buttons */
.detail-hero-actions{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:0;right:0;display:flex;justify-content:space-between;padding:0 20px;z-index:10}
.detail-hero-btn{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;cursor:pointer;transition:all .2s;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.detail-hero-btn:hover{background:rgba(0,0,0,.65);transform:scale(1.05)}
.detail-hero-btn:active{transform:scale(.9)}
.detail-hero-right{display:flex;gap:10px}

/* Hero Badges */
.detail-hero-badges{position:absolute;bottom:55px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-end;z-index:10}
.detail-badge-open{display:inline-flex;align-items:center;gap:5px;background:rgba(52,199,89,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px 14px;border-radius:12px;font-size:11px;font-weight:700;color:#fff;letter-spacing:.3px;border:none;box-shadow:0 2px 8px rgba(52,199,89,.25)}
.detail-badge-closed{display:inline-flex;align-items:center;gap:5px;background:rgba(255,59,48,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px 14px;border-radius:12px;font-size:11px;font-weight:700;color:#fff;letter-spacing:.3px;border:none;box-shadow:0 2px 8px rgba(255,59,48,.25)}
.detail-badge-dot{width:6px;height:6px;border-radius:50%}
.detail-badge-rating{display:inline-flex;align-items:center;gap:4px;background:rgba(212,175,55,.15);border:1px solid rgba(212,175,55,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;color:var(--gold)}

/* Restaurant Info Block */
.detail-resto-info{padding:0 16px;margin-top:-45px;position:relative;z-index:10}
.detail-name{font-size:22px;font-weight:800;color:var(--tx);line-height:1.15;letter-spacing:-.3px}
.detail-meta{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:12px;color:var(--txm)}
.detail-meta .sep{color:var(--txd)}
.detail-cuisine-tag{display:inline-flex;padding:2px 7px;border-radius:6px;background:var(--hov);border:1px solid var(--brd);font-size:10px;color:var(--gold);font-weight:500}
.detail-address{margin-top:6px;font-size:12px;color:var(--txm);display:flex;align-items:center;gap:5px}
.detail-address i{color:var(--gold);font-size:11px}

/* Contact Grid (2x2) */
.detail-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 16px}
.detail-contact-btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 0;border-radius:10px;background:var(--card);border:1px solid var(--brd);box-shadow:var(--sh);color:var(--tx);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none}
.detail-contact-btn:hover{border-color:var(--brd2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.detail-contact-btn:active{transform:scale(.97)}
.detail-contact-icon{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px}
.detail-contact-icon.green{background:rgba(52,199,89,.15);color:var(--green)}
.detail-contact-icon.blue{background:rgba(0,122,255,.15);color:#0A84FF}
.detail-contact-icon.wa{background:rgba(37,211,102,.15);color:#25D366}
.detail-contact-icon.orange{background:rgba(255,159,10,.15);color:#FF9F0A}

/* Sticky Tabs */
.detail-tabs-sticky{position:sticky;top:0;z-index:40;background:var(--bg);padding:8px 20px 0;border-bottom:1px solid var(--brd)}
.detail-tabs-sticky.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.3)}

/* Description Block */
.detail-desc-block{border-left:3px solid var(--gold);padding:10px 14px;background:var(--card);border-radius:0 12px 12px 0;font-size:13px;color:var(--txm);font-style:italic;line-height:1.5}

/* Gallery */
.detail-gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.detail-gallery-see-all{font-size:13px;color:var(--gold);font-weight:600;cursor:pointer}

/* Hours card */
.detail-hours-card{background:var(--card);border-radius:14px;border:1px solid var(--brd);overflow:hidden;box-shadow:var(--sh)}
.hours-row{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font-size:12px;border-bottom:1px solid rgba(255,255,255,.03)}
.hours-row:last-child{border-bottom:none}
.hours-row .h-day{color:var(--tx2);text-transform:capitalize;font-weight:500}
.hours-row .h-time{color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums}
.hours-row.today{background:rgba(212,175,55,.08)}
.hours-row.today .h-day,.hours-row.today .h-time{color:var(--gold)}
.h-time.closed{color:var(--red)!important}

/* Delivery cards */
.detail-delivery-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.detail-delivery-card{background:var(--card);border:1px solid var(--brd);border-radius:10px;padding:10px 8px;text-align:center;box-shadow:var(--sh)}
.detail-dc-icon{font-size:14px;margin-bottom:3px;color:var(--gold)}
.detail-dc-value{font-size:16px;font-weight:800;color:var(--gold)}
.detail-dc-label{font-size:10px;color:var(--txm);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* Address card */
.detail-address-card{background:var(--card);border:1px solid var(--brd);border-radius:14px;overflow:hidden;box-shadow:var(--sh)}
.detail-map-preview{height:100px;background:linear-gradient(135deg,#1a2a1a,#2a3a2a);display:flex;align-items:center;justify-content:center;position:relative;font-size:28px;opacity:.4}
.detail-map-preview-label{position:absolute;font-size:10px;color:var(--txm);opacity:1}
.detail-address-text{padding:10px 14px;font-size:12px;color:var(--txm)}

/* Info section */
.detail-info-section{margin-bottom:18px}
.detail-info-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--tx);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.detail-info-title .s-icon{color:var(--gold)}

/* Rating Hero */
.detail-rating-hero{text-align:center;padding:20px 0}
.detail-rating-stars{font-size:24px;letter-spacing:3px;margin-bottom:4px;color:var(--gold)}
.detail-rating-score{font-size:40px;font-weight:800;color:var(--gold);line-height:1}
.detail-rating-count{font-size:13px;color:var(--txm);margin-top:4px}

/* Rating Distribution Bars */
.detail-rating-bars{background:var(--card);border-radius:12px;border:1px solid var(--brd);padding:12px;margin:10px 0;box-shadow:var(--sh)}
.detail-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.detail-bar-row:last-child{margin-bottom:0}
.detail-bar-label{font-size:12px;color:var(--txm);width:18px;text-align:right;font-weight:600}
.detail-bar-star{color:var(--gold);font-size:12px}
.detail-bar-track{flex:1;height:6px;background:var(--hov);border-radius:3px;overflow:hidden}
.detail-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-l));border-radius:3px;transition:width .5s ease}
.detail-bar-count{font-size:12px;color:var(--txm);width:20px}

/* Review CTA button */
.detail-review-cta{width:100%;padding:12px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold-l));border:none;color:#1A1714;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;box-shadow:0 4px 16px rgba(212,175,55,.3);margin:16px 0}
.detail-review-cta:active{transform:scale(.97)}

/* Review card (premium) */
.detail-review-card{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:14px;margin-bottom:10px;box-shadow:var(--sh)}
.detail-review-card.own{border-color:rgba(212,175,55,.3);background:rgba(212,175,55,.04)}
.detail-review-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.detail-review-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dk));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#1A1714;flex-shrink:0}
.detail-review-meta{flex:1;min-width:0}
.detail-review-name{font-size:13px;font-weight:700;color:var(--tx)}
.detail-review-date{font-size:11px;color:var(--txm)}
.detail-review-stars{font-size:12px;color:var(--gold);letter-spacing:1px;flex-shrink:0}
.detail-review-text{font-size:13px;color:var(--txm);line-height:1.5}


.detail-menu-placeholder{
    border:1.5px dashed var(--brd);border-radius:var(--r-xl);
    padding:28px 16px;text-align:center;margin-top:12px;
}
.detail-menu-placeholder i{font-size:28px;color:var(--gold-25);display:block;margin-bottom:8px}
.detail-menu-placeholder p{font-size:13px;font-weight:600;color:var(--txm)}
.detail-menu-placeholder small{font-size:11px;color:var(--txd);display:block;margin-top:2px}

/* ══════ MAP ══════ */
#client-map-container{width:100%;height:100%;min-height:300px}

/* Leaflet overrides */
.leaflet-control-zoom{border:none!important;border-radius:14px!important;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.25)!important}
.leaflet-control-zoom a{background:var(--card)!important;color:var(--tx)!important;border:none!important;border-bottom:1px solid var(--brd2)!important;font-size:15px!important;width:36px!important;height:36px!important;line-height:36px!important}
.leaflet-control-zoom a:last-child{border-bottom:none!important}
.leaflet-control-zoom a:hover{background:var(--hov)!important}
.leaflet-control-attribution{background:rgba(0,0,0,.45)!important;color:rgba(255,255,255,.5)!important;font-size:8px!important;backdrop-filter:blur(4px);border-radius:6px 0 0 0;padding:2px 6px!important}
.leaflet-control-attribution a{color:var(--gold)!important}

/* Zoom controls alignment — same level as bottom buttons (bottom: 24px, right: 16px) */
#client-app.map-fullscreen .leaflet-bottom.leaflet-right,
#view-client-map .leaflet-bottom.leaflet-right {
    bottom: 24px !important;
    right: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#client-app.map-fullscreen .leaflet-control-zoom,
#view-client-map .leaflet-control-zoom {
    margin: 0 !important;
    border: 1px solid var(--brd2) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
    overflow: hidden !important;
}
#client-app.map-fullscreen .leaflet-control-zoom a,
#view-client-map .leaflet-control-zoom a {
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Custom popup */
.map-popup-custom .leaflet-popup-content-wrapper{border-radius:16px!important;background:var(--card)!important;box-shadow:0 8px 32px rgba(0,0,0,.35)!important;border:1px solid var(--brd2)!important;overflow:hidden}
.map-popup-custom .leaflet-popup-content{margin:0!important;padding:0!important;font-family:var(--font-body)!important}
.map-popup-custom .leaflet-popup-tip{background:var(--card)!important}
.map-popup-card{cursor:pointer}
.map-popup-body{padding:8px 12px}
.map-popup-name{font-size:12px;font-weight:700;color:var(--tx);display:block;margin-bottom:3px;line-height:1.3}
.map-popup-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.map-popup-cuisine{font-size:10px;color:var(--txm);font-weight:500}
.map-popup-stars{font-size:10px;color:#FFD700;font-weight:600}
.map-popup-dist{font-size:10px;color:var(--txm);font-weight:500}
.map-popup-status{font-size:10px;font-weight:600;display:flex;align-items:center;gap:5px}
.map-popup-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}

/* Pin markers */
.map-pin-marker{
    width:48px;height:56px;position:relative;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.map-pin-marker::before{
    content:'';position:absolute;top:0;left:0;right:0;height:48px;
    background:var(--card);border:2px solid var(--brd2);border-radius:14px;
}
.map-pin-marker::after{
    content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
    width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
    border-top:10px solid var(--card);
}
.map-pin-emoji{
    position:absolute;top:4px;left:0;right:0;
    font-size:22px;text-align:center;line-height:40px;z-index:1;
}
.map-pin-status{
    position:absolute;top:2px;right:2px;
    width:10px;height:10px;border-radius:50%;
    border:2px solid var(--card);z-index:2;
}

/* Cluster icon */
.map-cluster-icon{
    width:40px;height:40px;border-radius:50%;
    background:linear-gradient(135deg,#D4AF37,#E8C95A);
    border:2.5px solid rgba(255,255,255,.9);
    box-shadow:0 3px 12px rgba(212,175,55,.4);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;color:#000;font-family:Inter,sans-serif;
}

/* Map search bar overlay */
.map-header-overlay{
    position:absolute;top:0;left:0;right:0;z-index:1000;
    padding:12px 16px;
    pointer-events:none;
}
.map-header-overlay *{pointer-events:auto}
.map-search-bar{
    display:flex;align-items:center;gap:10px;
    background:var(--card);
    border:1px solid var(--brd2);
    border-radius:16px;
    padding:0 16px;
    height:48px;
    box-shadow:0 4px 24px rgba(0,0,0,.35);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    max-width:420px;
}
.map-search-icon{font-size:14px;color:var(--gold);flex-shrink:0}
.map-search-bar input{
    flex:1;border:none;outline:none;background:transparent;
    font-size:14px;font-weight:500;color:var(--tx);
    font-family:var(--font-body);
}
.map-search-bar input::placeholder{color:var(--txm);opacity:.6}

/* Locate me button */
.map-locate-btn{
    position:absolute;bottom:90px;left:16px;z-index:1000;
    width:48px;height:48px;border-radius:14px;border:none;cursor:pointer;
    background:var(--card);
    border:1px solid var(--brd2);
    box-shadow:0 4px 20px rgba(0,0,0,.25);
    color:var(--gold);font-size:18px;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s ease;
}
.map-locate-btn:hover{background:var(--hov);transform:scale(1.05)}
.map-locate-btn:active{transform:scale(.95)}

/* ══════ EMPTY STATES ══════ */
.empty-container{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:80px 24px 60px;text-align:center;min-height:55vh;
    animation:emptyFadeIn 0.8s ease-out;
}
@keyframes emptyFadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.empty-icon-ring{
    width:80px;height:80px;border-radius:50%;
    background:var(--gold-10);border:2px solid var(--gold-25);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:24px;position:relative;
    box-shadow:0 4px 20px rgba(212,175,55,0.08);
}
.empty-icon-ring::after{
    content:'';position:absolute;inset:-6px;border-radius:50%;
    border:1px dashed var(--gold-10);
}
.empty-icon-ring i{font-size:28px;color:var(--gold)}
.empty-title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--tx);margin-bottom:10px;letter-spacing:-0.01em}
.empty-text{font-size:14px;color:var(--txm);max-width:300px;line-height:1.7;margin-bottom:24px}

/* ══════ BUTTONS ══════ */
.btn-gold{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 28px;border-radius:var(--r-full);
    background:linear-gradient(135deg,var(--gold),var(--gold-l));
    color:#000;font-size:13px;font-weight:700;font-family:var(--font-body);
    border:none;cursor:pointer;transition:all var(--ease);
    box-shadow:0 4px 16px var(--gold-40);letter-spacing:.02em;
}
.btn-gold:hover{box-shadow:0 6px 24px var(--gold-40)}
.btn-gold:active{transform:scale(.96)}
.btn-card{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 28px;border-radius:var(--r-full);
    background:var(--card);color:var(--tx);font-size:13px;font-weight:600;font-family:var(--font-body);
    border:1.5px solid var(--brd);cursor:pointer;transition:all var(--ease);
}
.btn-card:hover{border-color:var(--gold);color:var(--gold)}
.btn-card:active{transform:scale(.96)}
.btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 28px;border-radius:var(--r-full);
    background:transparent;color:var(--txm);font-size:12px;font-weight:500;font-family:var(--font-body);
    border:1.5px solid var(--brd);cursor:pointer;transition:all var(--ease);
}
.btn-ghost:active{transform:scale(.96)}

/* ══════ PROFILE ══════ */
.profile-avatar-ring{
    width:64px;height:64px;min-width:64px;border-radius:50%;padding:3px;
    background:linear-gradient(135deg,var(--gold),var(--gold-l),var(--gold-dk));
    box-shadow:0 4px 20px var(--gold-25);
}
.profile-avatar-inner{
    width:100%;height:100%;border-radius:50%;
    background:var(--bg);
    display:flex;align-items:center;justify-content:center;
}
.profile-avatar-inner i{font-size:28px;color:var(--gold)}
.profile-section{
    background:var(--card);border:none;
    border-radius:var(--r-xl);overflow:hidden;
}
.profile-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;transition:background var(--ease);
    cursor:pointer;text-decoration:none;
}
.profile-row:active{background:var(--hov)}
.profile-row+.profile-row{border-top:1px solid var(--brd2)}
.profile-row-left{display:flex;align-items:center;gap:10px}
.profile-row-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--gold-10)}
.profile-row-icon i{font-size:12px;color:var(--gold)}
.profile-row-label{font-size:13px;font-weight:500;color:var(--tx2)}
.profile-row-value{font-size:12px;color:var(--txm);font-weight:500}
.profile-row-arrow{font-size:10px;color:var(--txd)}
.profile-section-label{
    font-size:10px;font-weight:700;color:var(--txd);
    text-transform:uppercase;letter-spacing:.12em;
    padding:0 4px;margin-bottom:8px;
}

/* ══════ PTR ══════ */
.ptr{display:flex;align-items:center;justify-content:center;height:0;overflow:hidden;transition:height .25s ease;color:var(--gold)}
.ptr.active{height:44px}
.ptr-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:ptr-bounce .6s ease-in-out infinite alternate;margin:0 2px}
.ptr-dot:nth-child(2){animation-delay:.15s}
.ptr-dot:nth-child(3){animation-delay:.3s}
@keyframes ptr-bounce{from{opacity:.3;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* ══════ ANIMATIONS ══════ */
.fade-in{animation:fadeIn .4s ease-out forwards;opacity:0}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ══════ RESPONSIVE ══════ */
@media(min-width:640px){#client-feed-list,#client-feed-skeleton{gap:12px}}
@media(min-width:768px){
    #client-feed-list,#client-feed-skeleton{grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px;margin:0 auto}
    .hero-tagline{font-size:28px}
}
@media(min-width:1024px){
    #client-feed-list,#client-feed-skeleton{grid-template-columns:repeat(4,1fr);gap:16px;max-width:1200px}
    #client-bottom-nav{max-width:420px;left:50%;transform:translateX(-50%);border-radius:var(--r-lg) var(--r-lg) 0 0;border-left:1px solid var(--brd2);border-right:1px solid var(--brd2)}
}
*:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@supports(padding:env(safe-area-inset-bottom)){
    #client-bottom-nav{padding-bottom:calc(env(safe-area-inset-bottom)+2px)}
}
.hidden{display:none!important}


/* ══════════════════════════════════════
   PHASE 3 — Detail Tabs & Menu Items
   ══════════════════════════════════════ */

/* ── Detail Tabs Bar (Segmented Control) ── */
.detail-tabs {
    display: flex;
    gap: 0;
    background: var(--card);
    border-radius: 14px;
    padding: 3px;
    margin-bottom: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.04);
}
.detail-tab {
    flex: 1;
    padding: 8px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    border-radius: 11px;
    color: var(--txd);
    cursor: pointer;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.detail-tab i { font-size: 11px; }
.detail-tab.active {
    background: linear-gradient(135deg, var(--gold), var(--gold-l));
    color: #1A1714;
    box-shadow: 0 2px 8px rgba(212,175,55,.3);
}
.detail-tab:not(.active):hover { color: var(--tx2); }

.detail-tab-content { min-height: 80px; }

/* ── Menu Loading Skeleton ── */
.menu-loading-skel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0;
}
.skel-line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--hov) 25%, var(--brd2) 50%, var(--hov) 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel-line.w40 { width: 40%; }
.skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; }
@keyframes skel-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* ── Menu Category — Refined v2.5.12 ── */
.menu-category { margin-bottom: 0; border-top: 1px solid var(--brd); }
.menu-category:first-child { border-top: none; }
.menu-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 2px 10px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: opacity .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.menu-cat-header:active { opacity: .7; }
.menu-cat-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu-cat-emoji { font-size: 17px; }
.menu-cat-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--tx);
    letter-spacing: -.02em;
}
.menu-cat-count {
    background: var(--gold-10, rgba(212,175,55,.08));
    padding: 2px 8px;
    border-radius: 8px;
    border: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    min-width: 22px;
    text-align: center;
}
.menu-cat-chevron {
    color: var(--txd);
    font-size: 14px;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.menu-cat-header.collapsed .menu-cat-chevron { transform: rotate(-90deg); }
.menu-cat-items {
    overflow: hidden;
    transition: max-height .35s ease;
    padding: 0;
}

/* ── Menu Item — Refined v2.5.12 ── */
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--brd);
    transition: background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.menu-item:last-child { border-bottom: none; }
.menu-item:active {
    background: rgba(212,175,55,.06);
}
.menu-item.unavailable { opacity: .45; pointer-events: none; }
.menu-item-thumb {
    display: none !important; /* removed v2.5.10 */
}
.menu-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.menu-item-info { flex: 1; min-width: 0; }
.menu-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--tx);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-item-desc {
    font-size: 12px;
    color: var(--txm);
    margin-top: 2px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-item-price {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
}
.menu-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--gold), var(--gold-l));
    border: none;
    color: #1A1714;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(212,175,55,.25);
}
.menu-add-btn:hover { transform: scale(1.1); box-shadow: 0 4px 14px rgba(212,175,55,.4); }
.menu-add-btn:active { transform: scale(.95); }
.menu-unavail-badge {
    font-size: 9px;
    font-weight: 600;
    color: var(--red);
    background: var(--red-bg);
    border: 1px solid var(--red-bd);
    padding: 1px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

/* ── Leaflet MarkerCluster Override (gold theme) ── */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background: rgba(212,175,55,.25) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background: #D4AF37 !important;
    color: #000 !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
}


/* ══════════════════════════════════════
   PHASE 4 — Auth Modal & Forms
   ══════════════════════════════════════ */

.auth-icon-ring {
    width: 48px; height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D4AF37, #E8C95A);
    display: flex; align-items: center; justify-content: center;
}
.auth-title {
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 700;
    color: var(--tx);
}
.auth-subtitle {
    font-size: 12px; color: var(--txm); margin-top: 4px;
}
.auth-label {
    display: block;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--txm);
    margin-bottom: 4px;
}
.auth-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--tx);
    background: var(--card);
    border: 1px solid var(--brd2);
    border-radius: var(--r-lg);
    outline: none;
    transition: border-color .2s;
    font-family: 'Inter', sans-serif;
}
.auth-input:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}
.auth-input::placeholder {
    color: var(--txd);
    font-size: 13px;
}
.auth-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--txm);
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
}
.auth-eye:hover { color: var(--tx); }
.auth-link {
    background: none;
    border: none;
    color: var(--txm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: 'Inter', sans-serif;
}
.auth-link:hover { color: var(--tx); }
.auth-link.gold { color: #D4AF37; font-weight: 600; }
.auth-link.gold:hover { color: #E8C95A; }
.auth-error {
    padding: 10px 14px;
    border-radius: var(--r-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--red);
    background: var(--red-bg);
    border: 1px solid var(--red-bd);
    margin-bottom: 12px;
    line-height: 1.4;
}
.auth-success {
    padding: 10px 14px;
    border-radius: var(--r-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--green);
    background: var(--green-bg);
    border: 1px solid var(--green-bd);
    margin-bottom: 12px;
    line-height: 1.4;
}


/* ══════════════════════════════════════
   PHASE 6 — Reviews & Ratings
   ══════════════════════════════════════ */

/* ── Reviews Header ── */
/* Old review styles removed - now using .detail-review-* classes */
.review-comment {
    font-size: 12px; color: var(--txm);
    line-height: 1.5; margin-top: 8px;
    word-wrap: break-word;
}
.review-edit-btn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 8px; padding: 4px 10px;
    font-size: 10px; font-weight: 600;
    color: #D4AF37; background: rgba(212,175,55,.08);
    border: 1px solid rgba(212,175,55,.2);
    border-radius: 8px; cursor: pointer;
    font-family: 'Inter', sans-serif;
}
.review-edit-btn:hover { background: rgba(212,175,55,.15); }

/* ── Review Form ── */
.review-form {
    padding: 14px;
    margin: 12px 0;
    background: var(--card);
    border-radius: var(--r-xl);
    border: 1px solid rgba(212,175,55,.25);
}
.review-form-title {
    font-size: 14px; font-weight: 700;
    color: var(--tx); margin-bottom: 12px;
}
.review-star-selector {
    display: flex; gap: 6px;
    justify-content: center;
    margin-bottom: 4px;
}
.review-star-btn {
    background: none; border: none; cursor: pointer;
    font-size: 28px; color: var(--brd2);
    transition: color .15s, transform .15s;
    padding: 4px;
}
.review-star-btn.active { color: #FFD700; }
.review-star-btn:hover { transform: scale(1.15); }
.review-star-label {
    text-align: center;
    font-size: 11px; font-weight: 600;
    color: var(--txm);
    margin-bottom: 12px; min-height: 16px;
}
.review-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--tx);
    background: var(--bg);
    border: 1px solid var(--brd2);
    border-radius: var(--r-lg);
    outline: none; resize: vertical;
    min-height: 70px;
    font-family: 'Inter', sans-serif;
    transition: border-color .2s;
}
.review-textarea:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}
.review-textarea::placeholder { color: var(--txd); }
.review-char-count {
    text-align: right;
    font-size: 10px; color: var(--txd);
    margin-top: 4px; margin-bottom: 12px;
}
.review-form-actions {
    display: flex; gap: 8px;
    justify-content: flex-end;
}
.review-form-actions .btn-card,
.review-form-actions .btn-gold {
    font-size: 12px !important;
    padding: 8px 16px !important;
}

/* Phase 8 - Image Optimization */
.card-cover img {
    opacity: 0;
    transition: opacity .4s ease;
}
.card-cover img.loaded {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   PHASE 8 UX OVERHAUL — Profile, Splash, Responsive fixes
   ══════════════════════════════════════════════════════════ */

/* ── FIX: Viewport scroll — bottom nav overlap ── */
/* Removed: padding-bottom now handled by margin-bottom */

/* ── Splash screen redesign ── */
#client-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    animation: splashIn .8s ease-out;
}
@keyframes splashIn {
    0% { opacity: 0; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}
.splash-tagline {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--tx);
    text-align: center;
    line-height: 1.35;
    margin-top: 18px;
    opacity: 0;
    animation: splashFadeUp .7s ease-out .4s forwards;
}
.splash-tagline .gold { color: #D4AF37; }
.splash-location {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #D4AF37;
    margin-top: 8px;
    letter-spacing: .03em;
    opacity: 0;
    animation: splashFadeUp .7s ease-out .7s forwards;
}
.splash-region {
    font-size: 10px;
    color: var(--txm);
    margin-top: 10px;
    text-align: center;
    letter-spacing: .02em;
    opacity: 0;
    animation: splashFadeUp .7s ease-out .9s forwards;
}
@keyframes splashFadeUp {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── Profile Guest ── */
.profile-guest {
    padding: 24px 16px 16px;
}
.profile-guest-header {
    text-align: center;
    margin-bottom: 28px;
}
.profile-guest-icon {
    font-size: 48px;
    color: var(--txd);
    margin-bottom: 12px;
}
.profile-guest-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--tx);
}
.profile-guest-sub {
    font-size: 12px;
    color: var(--txm);
    margin-top: 4px;
    line-height: 1.5;
}
.profile-guest-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
    margin: 0 auto 20px;
}
.profile-choice-card {
    background: var(--card);
    border: none;
    border-radius: var(--r-lg);
    padding: 18px;
    cursor: pointer;
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.profile-choice-card:active {
    transform: scale(.97);
}
.profile-choice-card:hover {
    border-color: var(--gold-25);
    box-shadow: 0 0 0 1px var(--gold-10);
}
.profile-choice-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 10px;
}
.profile-choice-icon.client {
    background: linear-gradient(135deg, #D4AF37, #E8C95A);
    color: #000;
}
.profile-choice-icon.resto {
    background: linear-gradient(135deg, #2563EB, #60A5FA);
    color: #FFF;
}
.profile-choice-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 4px;
}
.profile-choice-desc {
    font-size: 11px;
    color: var(--txm);
    line-height: 1.5;
    margin-bottom: 12px;
}
.profile-choice-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--gold);
}
.profile-choice-action i {
    font-size: 10px;
    transition: transform .2s ease;
}
.profile-choice-card:hover .profile-choice-action i {
    transform: translateX(3px);
}
.profile-guest-login {
    text-align: center;
    font-size: 12px;
    color: var(--txm);
    margin-bottom: 24px;
}

/* ── Profile Restaurant Info ── */
.profile-resto-info {
    padding: 16px;
    position: relative;
}
.profile-back-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    border: 1px solid var(--brd);
    background: var(--card);
    color: var(--tx);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    z-index: 2;
    transition: background var(--ease);
}
.profile-back-btn:active { background: var(--hov); }
.profile-resto-hero {
    text-align: center;
    padding: 24px 0 20px;
}
.profile-resto-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563EB, #60A5FA);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 22px;
    color: #FFF;
}
.profile-resto-hero-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--tx);
}
.profile-resto-hero-sub {
    font-size: 12px;
    color: var(--txm);
    margin-top: 4px;
}
.profile-resto-card {
    background: var(--card);
    border: 1px solid var(--brd);
    border-radius: var(--r-lg);
    padding: 20px;
    margin-bottom: 16px;
}
.profile-resto-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--gold-10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--gold);
    margin-bottom: 12px;
}
.profile-resto-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 6px;
}
.profile-resto-card-text {
    font-size: 12px;
    color: var(--txm);
    line-height: 1.6;
    margin-bottom: 18px;
}
.profile-resto-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profile-resto-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.step-num {
    width: 24px;
    height: 24px;
    border-radius: var(--r-full);
    background: var(--gold);
    color: #000;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.step-text {
    font-size: 12px;
    color: var(--tx2);
    line-height: 1.5;
}
.step-text strong {
    color: var(--gold);
    font-weight: 700;
}
.profile-resto-existing {
    margin-bottom: 24px;
}

/* ── Profile User (logged-in) ── */
.profile-user {
    padding: 20px 16px 16px;
}
.profile-user-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.profile-user-avatar {
    flex-shrink: 0;
}
.profile-user-avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, #D4AF37, #E8C95A);
    color: #000;
    font-weight: 800;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
    box-shadow: 0 2px 12px rgba(212,175,55,.25);
}
.profile-user-info {
    flex: 1;
    min-width: 0;
}
.profile-user-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--tx);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-user-email {
    font-size: 11px;
    color: var(--txm);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-user-unverified {
    font-size: 10px;
    color: var(--red);
    margin-top: 3px;
}
.profile-user-since {
    font-size: 10px;
    color: var(--txd);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── User Stats Row ── */
.profile-user-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: none;
    border-radius: var(--r-lg);
    padding: 14px 0;
    margin-bottom: 20px;
}
.profile-stat {
    flex: 1;
    text-align: center;
}
.profile-stat-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
}
.profile-stat-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--txm);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.profile-stat-sep {
    width: 1px;
    height: 28px;
    background: var(--brd);
}

/* ── Profile Section (settings, account) — wrap fix ── */
.profile-section-wrap {
    max-width: 100%;
    margin: 0 auto 16px;
}


/* ══════════════════════════════════════════════════════════
   PHASE 8f — DEFINITIVE overflow + layout fixes
   ══════════════════════════════════════════════════════════ */

/* Force overflow containment on EVERY container */
html { overflow: hidden !important; width: 100vw !important; }
body { overflow: hidden !important; width: 100vw !important; }
#client-app {
    overflow: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: fixed !important;
    inset: 0 !important;
}
#client-header {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
#client-content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}



/* Feed & skeleton grid: must stay inside viewport */
#client-feed-list, #client-feed-skeleton {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: hidden !important;
}

/* Filters: scroll horizontal but don't overflow container */
.filters-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 10px 12px 6px !important;
}
.filters-wrap > div {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Search bar: contained width */
#client-search-bar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
#client-search-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Header icon smaller, constrained */
.header-logo-icon {
    width: 28px !important; height: 28px !important;
    min-width: 28px !important; flex-shrink: 0;
    border-radius: 7px !important;
}
.header-logo-icon img { width: 16px !important; height: 16px !important; }
.header-title { font-size: 15px !important; }

/* Bottom nav: proper safe area */
#client-bottom-nav {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Profile: contained width, no overflow */
.profile-guest, .profile-user, .profile-resto-info {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding: 16px 12px 0 !important;
}
.profile-guest-icon { display: none !important; }
.profile-guest-header { padding-top: 8px; margin-bottom: 20px; }
.profile-guest-title { font-size: 20px; font-weight: 700; }
.profile-guest-sub { font-size: 12px; max-width: 280px; margin: 6px auto 0; }
.profile-guest-choices { padding: 0 !important; margin: 0 0 16px !important; }
.profile-guest-login { margin-bottom: 16px; }
.profile-section-wrap {
    max-width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

/* Orders empty: no icon, just text */
.orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px 40px;
    text-align: center;
}
.orders-empty-title { font-size: 17px; margin-bottom: 6px; }
.orders-empty-text { font-size: 11px; max-width: 220px; margin-bottom: 24px; }

/* Auth form: better spacing */
.auth-title {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 700;
    color: var(--tx); letter-spacing: -.01em;
    margin-bottom: 2px;
}
.auth-subtitle {
    font-size: 12px; color: var(--txm);
    margin-top: 4px; margin-bottom: 8px;
}
.auth-field-group { margin-bottom: 12px; }
.auth-label {
    display: block; font-size: 11px; font-weight: 600;
    text-transform: none !important; letter-spacing: 0 !important;
    color: var(--tx2); margin-bottom: 5px;
}
.auth-input {
    width: 100%; padding: 11px 14px; font-size: 13px;
    color: var(--tx); background: var(--card);
    border: 1.5px solid var(--brd); border-radius: 11px;
    outline: none; font-family: var(--font-body);
    box-sizing: border-box;
}
.auth-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-10); }
.auth-icon-ring { display: none !important; }
#auth-sheet {
    padding-top: 8px !important;
}
#auth-view-register, #auth-view-login, #auth-view-forgot {
    padding: 0 16px 20px !important;
}
#auth-view-register .text-center.mb-6,
#auth-view-login .text-center.mb-6,
#auth-view-forgot .text-center.mb-6 {
    margin-bottom: 16px !important;
    padding-top: 2px;
}

/* Detail: tighter spacing for CONTACT section */





/* Detail cover: compact */
.detail-hero { height: 240px !important; }

/* Light theme card visibility */
[data-theme="arctic-light"] .card-ph-bg { opacity: .7 !important; }
[data-theme="arctic-light"] .card-grad {
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.08) 70%, transparent 100%) !important;
}

/* Skeleton containment */
.skeleton-card {
    width: 100% !important;
    max-width: 100% !important;
}

/* View containment */
#view-client-feed, #view-client-orders, #view-client-profile, #view-client-map {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* ══════ PHASE 8g — Final surgical fixes ══════ */

/* Feed: bottom padding from .fd2-grid (110px) clears nav bar */
#client-feed-list {
    /* padding-bottom restored — .fd2-grid 110px handles it */
}

/* Orders CTA button: proper Epicure gold styling */
.orders-empty-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 28px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #D4AF37, #E8C95A) !important;
    color: #000 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(212,175,55,.35) !important;
    transition: all .2s ease !important;
    margin-top: 24px !important;
}
.orders-empty-cta:active {
    transform: scale(.96) !important;
    box-shadow: 0 2px 8px rgba(212,175,55,.25) !important;
}

/* Profile guest: equal padding all sides */
.profile-guest {
    padding: 20px 16px 0 !important;
}
.profile-guest-choices {
    margin-bottom: 20px !important;
}
.profile-section-wrap {
    margin-bottom: 20px !important;
}

/* Search bar: cleaner look, no icon overlap */
#client-search-bar {
    padding: 0 12px 10px !important;
}
#client-search-input {
    padding-left: 16px !important;
    padding-right: 36px !important;
    height: 38px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
}

/* Logo: display image directly, no gold square */
.header-logo-icon {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
}
.header-logo-icon img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
}

/* ══════ PHASE 8h — Final precision fixes ══════ */

/* Feed: bottom padding handled by #client-content only */
#client-feed-list {
    /* padding-bottom restored — handled by in-flow spacer */
}
/* Header: logo left margin */
#client-header > div:first-child {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Search: hide ALL clear/cross buttons */
#client-search-input::-webkit-search-cancel-button,
#client-search-input::-webkit-search-decoration,
#client-search-input::-webkit-search-results-button,
#client-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    display: none !important;
}
#client-search-input[type="search"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#btn-client-search-clear {
    display: none !important;
}

/* Delivery pill: already styled, just ensure visibility */
.card-delivery-pill {
    font-size: 8px !important;
}

/* ══════ PHASE 8i — Card pills + Orders elegance ══════ */

/* Hide old badge styles */
.card-badge { display: none !important; }

/* New elegant pill badges (top of card) */
.card-pill {
    position: absolute;
    top: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    line-height: 1;
}

/* Delivery pill: gold accent */
.card-pill.pill-delivery {
    right: 10px;
    background: rgba(212,175,55,.18);
    color: #E8C95A;
    border: 1px solid rgba(212,175,55,.3);
}
.card-pill.pill-delivery i {
    font-size: 7px;
}

/* Open pill: green accent */
.card-pill.pill-open {
    left: 10px;
    background: rgba(34,197,94,.15);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,.3);
}
.card-pill.pill-open i {
    font-size: 4px;
}

/* Closed pill: red accent */
.card-pill.pill-closed {
    left: 10px;
    background: rgba(239,68,68,.15);
    color: #f87171;
    border: 1px solid rgba(239,68,68,.3);
}
.card-pill.pill-closed i {
    font-size: 4px;
}

/* When both delivery + status: stack vertically */
.card-pill.pill-delivery + .card-pill.pill-open,
.card-pill.pill-delivery + .card-pill.pill-closed {
    top: 10px;
}

/* ── Orders page: elegant empty state ── */
.orders-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 24px 0 !important;
    text-align: center !important;
    min-height: 60vh;
}
.orders-empty::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(212,175,55,.12), rgba(212,175,55,.04));
    border: 1.5px solid rgba(212,175,55,.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'%3E%3C/path%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cpath d='M16 10a4 4 0 01-8 0'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
}
.orders-empty-title {
    font-family: var(--font-display) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--tx) !important;
    margin-bottom: 8px !important;
    letter-spacing: -.01em;
}
.orders-empty-text {
    font-size: 13px !important;
    color: var(--txm) !important;
    max-width: 260px !important;
    line-height: 1.5 !important;
    margin-bottom: 28px !important;
}

/* ══════ PHASE 8j — Card pills: delivery-pill style at top ══════ */

/* Hide ALL old styles */
.card-pill { display: none !important; }

/* Flex row at top of card */
.card-top-pills {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 5px;
    z-index: 4;
    flex-wrap: wrap;
}

/* Base pill style = same as card-delivery-pill (the elegant one) */
.card-top-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: var(--r-full);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}

/* Livraison: gold fill */
.card-top-pill.gold {
    background: var(--gold);
    color: #000;
}

/* Ouvert: green fill */
.card-top-pill.status-open {
    background: #34C759;
    color: #1A1714;
}

/* Fermé: red fill */
.card-top-pill.status-closed {
    background: #FF3B30;
    color: #fff;
}

/* Position: status=top-right, rating/new=bottom-left */
.card-top-pill.status-open,
.card-top-pill.status-closed {
    position: absolute;
    top: 8px;
    right: 8px;
}
.card-top-pill.card-rating-pill {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #FFD700;
}
.card-top-pill.card-rating-pill i { color: #FFD700; }
.card-top-pill.card-new-pill {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(212,175,55,.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--gold);
    font-style: italic;
    border: 1px solid rgba(212,175,55,.2);
}

/* Delivery pill inline in meta — gold solid like filter chips */
.card-dlv-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--gold), #E8C95A);
    color: #1A1714;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}
.card-dlv-pill i { font-size: 8px; }

/* ══════ PHASE 8k — Review Button Gold ══════ */
.reviews-write-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-l)) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(212,175,55,0.3) !important;
}

/* ══════ PHASE 2b — Gallery & Lightbox ══════ */

/* Horizontal scrollable gallery in restaurant detail */
.gallery-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gallery-scroll::-webkit-scrollbar { display: none; }

.gallery-thumb {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    border-radius: var(--r-xl);
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid var(--brd2);
    scroll-snap-align: start;
    transition: transform .2s, border-color .2s;
    position: relative;
}
.gallery-thumb:hover,
.gallery-thumb:active {
    transform: scale(1.03);
    border-color: var(--gold);
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Lightbox overlay */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightbox-in .25s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
@keyframes lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background .2s;
    z-index: 2;
}
.lightbox-close:hover {
    background: rgba(255,255,255,.25);
}
/* ══════════════════════════════════════════════════════════
   PHASE 9 — STRICT SEPARATION: MOBILE BOTTOM NAV vs PC CAPSULE SIDEBAR
   ══════════════════════════════════════════════════════════ */

/* ── MOBILE DEFAULTS (< 768px): STRICTLY PRESERVED & UNCHANGED ── */
#client-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    z-index: 50 !important;
    width: 100% !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    background: var(--bg-glass) !important;
    border-top: 1px solid var(--brd2) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.sidebar-brand-pc {
    display: none !important;
}

.sidebar-links-pc {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    justify-content: space-around !important;
    align-items: center !important;
    height: 100% !important;
}

.client-nav-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    flex: 1 !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--txm) !important;
    transition: color 0.18s ease !important;
}

.client-nav-btn.active {
    color: var(--gold) !important;
}

.client-nav-btn .nav-icon {
    font-size: 16px !important;
    line-height: 1 !important;
}

.client-nav-btn .nav-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.sidebar-brand-pc {
    display: none !important;
}

#header-gestion-btn {
    display: none !important;
}

/* Button "Créer mon compte Client" high contrast */
.profile-choice-btn-client {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 20px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #D4AF37, #E8C95A) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
    transition: all 0.2s ease !important;
}
.profile-choice-btn-client span {
    color: #000000 !important;
    font-weight: 800 !important;
}
.profile-choice-btn-client i {
    color: #000000 !important;
    font-size: 11px !important;
    transition: transform 0.2s ease !important;
}
.profile-choice-btn-client:hover {
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45) !important;
    transform: translateY(-1px) !important;
}
.profile-choice-btn-client:hover i {
    transform: translateX(3px) !important;
}

/* ── DESKTOP PC (≥ 768px): EXACT MATCH TO index.html SIDEBAR ── */
@media (min-width: 768px) {
    /* Header Gestion Link — gold gradient like "Créer mon compte Client" */
    #header-gestion-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 8px 18px !important;
        border-radius: 12px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: #000000 !important;
        background: linear-gradient(135deg, #D4AF37, #E8C95A) !important;
        border: none !important;
        text-decoration: none !important;
        transition: all 0.25s ease !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        box-shadow: 0 3px 12px rgba(212, 175, 55, 0.3) !important;
    }
    #header-gestion-btn:hover {
        background: linear-gradient(135deg, #E8C95A, #D4AF37) !important;
        border: none !important;
        box-shadow: 0 5px 18px rgba(212, 175, 55, 0.45) !important;
        transform: translateY(-1px) !important;
        text-decoration: none !important;
    }

    /* Transform #client-bottom-nav into the exact capsule sidebar from index.html */
    #client-bottom-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: auto !important;
        right: auto !important;
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        height: calc(100vh - 12px) !important;
        margin: 0 0 12px 12px !important;
        border-radius: 0 0 24px 24px !important;
        background: var(--card) !important;
        border: 1px solid var(--brd) !important;
        border-top: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding: 0 !important;
        z-index: 90 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    .sidebar-brand-pc {
        display: flex !important;
    }

    .sidebar-links-pc {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 24px !important;
        padding: 0 16px !important;
        height: auto !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    /* Desktop Navigation Buttons matching index.html */
    .client-nav-btn {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--txm) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
        height: auto !important;
        flex: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        box-shadow: none !important;
    }
    .client-nav-btn:hover {
        background: var(--hov) !important;
        color: var(--tx) !important;
    }
    .client-nav-btn.active {
        background: var(--hov) !important;
        color: var(--tx) !important;
        border: 1px solid var(--brd) !important;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
        font-weight: 500 !important;
    }
    .client-nav-btn.active .nav-icon {
        color: var(--gold) !important;
        transform: none !important;
    }
    .client-nav-btn.active::after {
        display: none !important;
    }
    .client-nav-btn .nav-icon {
        font-size: 15px !important;
        width: 32px !important;
        min-width: 32px !important;
        text-align: left !important;
        color: inherit !important;
    }
    .client-nav-btn .nav-label {
        font-size: 14px !important;
        font-weight: inherit !important;
        letter-spacing: normal !important;
        text-transform: none !important;
    }


    /* Sidebar footer at bottom */
    .sidebar-footer-pc {
        margin-top: auto !important;
    }

    /* Shift header and main content to the right (260px width + 12px margin = 272px) */
    #client-header {
        margin-left: 272px !important;
        width: calc(100% - 272px) !important;
        max-width: calc(100vw - 272px) !important;
        box-sizing: border-box !important;
    }
    #client-header .header-logo-icon,
    #client-header .header-title {
        display: none !important;
    }

    #client-content {
        margin-left: 272px !important;
        width: calc(100% - 272px) !important;
        max-width: calc(100vw - 272px) !important;
        padding-bottom: 24px !important;
        box-sizing: border-box !important;
    }

    /* Auth modal centered on desktop */
    #client-auth-modal {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }
    #client-auth-modal.hidden {
        display: none !important;
    }
    #auth-sheet {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 520px !important;
        border-radius: 24px !important;
        border: 1.5px solid var(--brd) !important;
        box-shadow: 0 25px 60px rgba(0,0,0,0.5) !important;
        max-height: 85vh !important;
        margin: auto !important;
    }
    #auth-sheet > div:first-child > .sticky {
        display: none !important;
    }
    #auth-view-login,
    #auth-view-register,
    #auth-view-forgot {
        padding: 32px 32px 32px !important;
    }

    /* Feed grid on desktop */
    #client-feed-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 20px !important;
        padding: 16px 24px 32px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
    }

    /* Profile layout on desktop */
    .profile-guest, .profile-user, .profile-restaurant {
        max-width: 920px !important;
        margin: 0 auto !important;
        padding: 36px 24px 48px !important;
    }

    .profile-guest-choices {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
        max-width: 840px !important;
        margin: 0 auto 32px !important;
    }

    .profile-choice-card {
        padding: 28px 24px !important;
        border-radius: 20px !important;
    }

    .profile-user-header {
        display: flex !important;
        align-items: center !important;
        gap: 24px !important;
        padding: 28px !important;
        background: var(--card) !important;
        border: none !important;
        border-radius: 20px !important;
        margin-bottom: 24px !important;
    }

    .profile-user-stats {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px 32px !important;
        border-radius: 20px !important;
        margin-bottom: 24px !important;
    }

    .profile-section-wrap {
        margin-bottom: 24px !important;
        max-width: none !important;
    }

    /* Guest profile: settings section matches cards grid width */
    .profile-guest .profile-section-wrap {
        max-width: 840px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ── Info + Settings: 2-column grid on PC ── */
    .profile-info-settings-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
        align-items: start !important;
    }
}

/* Badges and Perks */
.profile-badge-client {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.25);
}

.profile-badge-resto {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.profile-choice-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.profile-perks-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: var(--tx2);
}

.profile-perks-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-resto-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tx);
    background: var(--card2);
    border: 1.5px solid var(--brd);
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-resto-outline:hover {
    border-color: #38BDF8;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.08);
}

.profile-card-sublink {
    text-align: center;
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--txm);
}
.profile-card-sublink .gold-link {
    color: var(--gold);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.profile-resto-hero-card {
    background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(0,0,0,0.3));
    border: 1.5px solid rgba(212,175,55,0.3);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
}

/* ── Profile Professional CTA Banner ── */
.profile-pro-cta {
    margin-top: 32px;
}
.profile-pro-cta-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--card);
    border: none;
    border-radius: 20px;
    transition: border-color 0.2s ease;
}
.profile-pro-cta-inner:hover {
    border-color: rgba(212,175,55,0.3);
}
.profile-pro-cta-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(212,175,55,0.1);
    color: var(--gold);
    font-size: 18px;
}
.profile-pro-cta-text {
    flex: 1;
    min-width: 0;
}
.profile-pro-cta-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 4px;
}
.profile-pro-cta-desc {
    font-size: 12px;
    color: var(--txm);
    line-height: 1.5;
}
.profile-pro-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #D4AF37;
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.25);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.profile-pro-cta-btn:hover {
    background: rgba(212,175,55,0.15);
    border-color: rgba(212,175,55,0.5);
    box-shadow: 0 2px 12px rgba(212,175,55,0.15);
}
.profile-pro-cta-btn i {
    font-size: 11px;
    transition: transform 0.2s ease;
}
.profile-pro-cta-btn:hover i {
    transform: translateX(3px);
}

/* Responsive adjustment for Mobile (< 768px) */
@media (max-width: 767px) {
    .profile-pro-cta {
        margin-top: 20px;
        margin-bottom: 16px;
    }
    .profile-pro-cta-inner {
        display: grid;
        grid-template-columns: 44px 1fr;
        grid-template-areas:
            "icon text"
            "btn  btn";
        gap: 14px;
        padding: 18px;
        border-radius: 18px;
        align-items: start;
    }
    .profile-pro-cta-icon {
        grid-area: icon;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 16px;
        margin-top: 2px;
    }
    .profile-pro-cta-text {
        grid-area: text;
        min-width: 0;
    }
    .profile-pro-cta-title {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
        margin-bottom: 6px;
    }
    .profile-pro-cta-desc {
        font-size: 12px;
        line-height: 1.55;
    }
    .profile-pro-cta-btn {
        grid-area: btn;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 18px;
        font-size: 13px;
        border-radius: 12px;
        margin-top: 4px;
    }

    /* Dégagement modéré en bas de page sur mobile : harmonisé avec le reste de l'application (Feed 40px) */
    #view-client-profile {
        padding-bottom: 0 !important;
    }
}


/* ══════ MAP FULLSCREEN MODE ══════ */
#client-app.map-fullscreen #client-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
}
#client-app.map-fullscreen #view-client-map {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--nav, 64px) !important;
    height: auto !important;
    z-index: 80 !important;
}
#client-app.map-fullscreen #client-map-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}
#client-app.map-fullscreen #client-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 90 !important;
}
/* Map navigation: floating back button */
.map-back-btn {
    position: absolute;
    bottom: 24px;
    left: 68px;
    z-index: 1000;
    display: none;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--brd2);
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    color: var(--tx);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all .2s ease;
}
.map-back-btn i { color: var(--gold); font-size: 13px; }
.map-back-btn:hover { box-shadow: 0 6px 24px rgba(0,0,0,.35); transform: translateY(-1px); border-color: var(--gold); }
.map-back-btn:active { transform: scale(.95); }
#client-app.map-fullscreen .map-back-btn { display: flex; }


/* ══════════════════════════════════════════════════════════
   CART & ORDER SYSTEM — Premium Design
   ══════════════════════════════════════════════════════════ */

/* menu-add-btn override REMOVED in v2.5.10 */


/* ── Cart FAB — Premium v2.5.11 ── */
#cart-floating-btn {
    position: fixed;
    bottom: calc(var(--nav) + 14px);
    left: 20px;
    right: 20px;
    z-index: 150;
    display: none;
    cursor: pointer;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    -webkit-tap-highlight-color: transparent;
}
#cart-floating-btn.visible { display: block; }
@media (min-width: 768px) {
    #cart-floating-btn { left: 50%; right: auto; transform: translateX(-50%); max-width: 420px; bottom: 24px; }
}
.cart-fab-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--brd);
    color: var(--tx);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
    transition: all .2s ease;
    white-space: nowrap;
    gap: 12px;
}
#cart-floating-btn:active .cart-fab-inner { transform: scale(.98); }
.cart-fab-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cart-fab-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gold), var(--gold-l));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.cart-fab-icon i { font-size: 14px; color: #1A1714; }
.cart-fab-count {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--tx);
    color: var(--card);
    min-width: 18px; height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    border: 2px solid var(--card);
    line-height: 1;
    padding: 0 3px;
}
.cart-fab-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--tx);
}
.cart-fab-sep { display: none; }
.cart-fab-total {
    font-size: 15px;
    font-weight: 800;
    color: var(--gold);
    white-space: nowrap;
    letter-spacing: -.01em;
}

/* ── Cart Toast (item added) ── */
.cart-toast {
    position: fixed;
    top: 16px; left: 50%; transform: translateX(-50%) translateY(-100%);
    z-index: 9999;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--green-bd);
    color: var(--green);
    font-size: 12px; font-weight: 600;
    font-family: var(--font-body);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: all .35s cubic-bezier(.34,1.56,.64,1);
    white-space: nowrap;
    max-width: 90vw;
}
.cart-toast i { font-size: 14px; }
.cart-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── Order Toast (success / error) ── */
.order-toast {
    position: fixed;
    bottom: calc(var(--nav) + 80px);
    left: 50%; transform: translateX(-50%) translateY(20px);
    z-index: 9999;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 24px;
    border-radius: 16px;
    font-size: 13px; font-weight: 600;
    font-family: var(--font-body);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transition: all .4s cubic-bezier(.34,1.56,.64,1);
    max-width: 90vw;
}
.order-toast i { font-size: 18px; }
.order-toast.success { background: var(--card); border: 1px solid var(--green-bd); color: var(--green); }
.order-toast.error { background: var(--card); border: 1px solid var(--red-bd); color: var(--red); }
.order-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── Cart Overlay ── */
#cart-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s ease;
}
#cart-overlay.show { opacity: 1; }

/* ── Cart Sheet (Bottom Sheet) ── */
#cart-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 510;
    background: var(--bg);
    border-radius: 24px 24px 0 0;
    max-height: 85vh; max-height: 85dvh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,.4);
}
#cart-sheet.show { transform: translateY(0); }
@media (min-width: 768px) {
    #cart-sheet {
        left: 50%; right: auto;
        transform: translateX(-50%) translateY(100%);
        width: 480px;
        border-radius: 24px 24px 0 0;
    }
    #cart-sheet.show { transform: translateX(-50%) translateY(0); }
}

.cart-handle {
    display: flex; justify-content: center; padding: 12px 0 4px;
}
.cart-handle-bar {
    width: 36px; height: 4px; border-radius: 4px;
    background: var(--brd);
}
.cart-header {
    padding: 8px 20px 16px;
    border-bottom: 1px solid var(--brd2);
}
.cart-h-title {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 700; color: var(--tx);
    display: flex; align-items: center; gap: 8px;
}
.cart-h-title i { color: var(--gold); font-size: 18px; }
.cart-h-restaurant {
    font-size: 12px; color: var(--txm); margin-top: 2px;
    font-weight: 500;
}
.cart-items-scroll {
    padding: 8px 20px;
    max-height: 40vh; overflow-y: auto;
}
.cart-item {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--brd2);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-left { flex: 1; min-width: 0; }
.cart-item-name {
    font-size: 13px; font-weight: 600; color: var(--tx);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-price { font-size: 11px; color: var(--txm); margin-top: 1px; }
.cart-item-qty {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0; margin-left: 12px;
}
.cart-item-qty span {
    font-size: 13px; font-weight: 700; color: var(--tx);
    min-width: 20px; text-align: center;
}
.cart-qty-btn {
    width: 30px; height: 30px; border-radius: 10px;
    border: 1px solid var(--brd); background: var(--card);
    color: var(--tx2); font-size: 10px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s;
}
.cart-qty-btn:hover { border-color: var(--gold); color: var(--gold); }
.cart-qty-btn:active { transform: scale(.9); }

.cart-footer {
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 8px));
    border-top: 1px solid var(--brd2);
    background: var(--bg);
}
.cart-total-row {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 16px;
    font-size: 14px; color: var(--tx);
}
.cart-total-row strong {
    font-size: 18px; font-weight: 800;
    color: var(--gold); font-family: var(--font-body);
}
.cart-submit-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 14px; font-weight: 700;
    font-family: var(--font-body);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: none; cursor: pointer;
    transition: all .2s ease;
    margin-bottom: 8px;
}
.cart-submit-btn:active { transform: scale(.97); }
.cart-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
.cart-submit-btn.direct {
    background: linear-gradient(135deg, #D4AF37, #E8C95A);
    color: #000;
    box-shadow: 0 4px 16px rgba(212,175,55,.35);
}
.cart-submit-btn.direct:hover { box-shadow: 0 6px 24px rgba(212,175,55,.5); }
.cart-submit-btn.delivery {
    background: linear-gradient(135deg, #2563EB, #60A5FA);
    color: #FFF;
    box-shadow: 0 4px 16px rgba(37,99,235,.3);
}
.cart-submit-btn.delivery:hover { box-shadow: 0 6px 24px rgba(37,99,235,.45); }

.cart-clear-btn {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    font-size: 11px; font-weight: 600;
    color: var(--txd);
    background: transparent;
    border: 1px solid var(--brd2);
    cursor: pointer;
    font-family: var(--font-body);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all .2s;
}
.cart-clear-btn:hover { color: var(--red); border-color: var(--red-bd); }
.cart-clear-btn:active { transform: scale(.97); }

/* ══════════════════════════════════════════════════════════
   ORDERS PAGE — Premium Design
   ══════════════════════════════════════════════════════════ */
.orders-page {
    padding: 16px;
    max-width: 680px;
    margin: 0 auto;
}
.orders-top-bar { margin-bottom: 16px; }
.orders-pg-title {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700;
    color: var(--tx);
}
.orders-tabs {
    display: flex; gap: 4px;
    padding: 3px;
    background: var(--hov);
    border-radius: var(--r-xl);
    border: 1px solid var(--brd2);
    margin-bottom: 16px;
}
.orders-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 9px 8px;
    border-radius: var(--r-lg);
    font-size: 12px; font-weight: 600;
    color: var(--txm);
    background: transparent;
    border: none; cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    font-family: var(--font-body);
}
.orders-tab i { font-size: 11px; }
.orders-tab.active {
    background: var(--card);
    color: var(--gold);
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.otab-count {
    font-size: 10px; font-weight: 700;
    background: var(--hov);
    padding: 1px 6px; border-radius: 8px;
    color: var(--txd);
}
.orders-tab.active .otab-count {
    background: var(--gold-10);
    color: var(--gold);
}

.orders-list { display: flex; flex-direction: column; gap: 10px; }

.orders-empty-mini {
    text-align: center; padding: 48px 16px;
    color: var(--txd);
}
.orders-empty-mini i { font-size: 28px; display: block; margin-bottom: 10px; }
.orders-empty-mini p { font-size: 13px; font-weight: 500; }

/* ── Order Card ── */
.order-card {
    background: var(--card);
    border: 1px solid var(--brd2);
    border-radius: var(--r-xl);
    padding: 14px 16px;
    transition: border-color .2s;
}
.order-card:hover { border-color: var(--gold-25); }

.ocard-top {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ocard-resto {
    font-size: 14px; font-weight: 700;
    color: var(--tx);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0; margin-right: 8px;
}
.otype-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 9px; font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.otype-badge.direct {
    background: var(--gold-10);
    color: var(--gold);
    border: 1px solid var(--gold-25);
}
.otype-badge.delivery {
    background: rgba(37,99,235,.1);
    color: #60A5FA;
    border: 1px solid rgba(37,99,235,.25);
}
.otype-badge i { font-size: 8px; }

.ocard-items {
    padding: 6px 0;
    border-top: 1px solid var(--brd2);
    border-bottom: 1px solid var(--brd2);
    margin-bottom: 8px;
}
.ocard-item {
    font-size: 12px; color: var(--tx2);
    padding: 2px 0; line-height: 1.5;
    display: flex; justify-content: space-between;
}
.ocard-item-price {
    color: var(--txm); font-weight: 500;
    margin-left: 8px; white-space: nowrap;
}

.ocard-bottom {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ocard-date {
    font-size: 10px; color: var(--txd);
    display: flex; align-items: center; gap: 4px;
}
.ocard-date i { font-size: 9px; }
.ocard-total {
    font-size: 13px; font-weight: 800;
    color: var(--gold);
    flex: 1; text-align: right;
    margin-right: 8px;
}
.ocard-status {
    font-size: 9px; font-weight: 700;
    padding: 3px 8px; border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.ocard-status.st-pending {
    background: rgba(245,158,11,.1);
    color: #F59E0B;
    border: 1px solid rgba(245,158,11,.2);
}
.ocard-status.st-confirmed {
    background: rgba(59,130,246,.1);
    color: #3B82F6;
    border: 1px solid rgba(59,130,246,.2);
}
.ocard-status.st-done {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid var(--green-bd);
}
.ocard-status.st-cancel {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid var(--red-bd);
}


/* ── Zone Picker Panel ── */
.zone-picker-panel {
    padding: 0 16px 10px;
    animation: zoneSlideIn .25s ease-out;
}
@keyframes zoneSlideIn { from { opacity:0; max-height:0; } to { opacity:1; max-height:300px; } }
.zone-search-wrap {
    display: flex; align-items: center; gap: 8px;
    background: var(--card); border: 1.5px solid var(--brd);
    border-radius: var(--r-full); padding: 0 14px; height: 38px;
    margin-bottom: 8px;
    transition: border-color .2s;
}
.zone-search-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-10); }
.zone-search-wrap i { color: var(--txd); font-size: 12px; flex-shrink: 0; }
.zone-search-wrap input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 13px; color: var(--tx); font-family: var(--font-body);
}
.zone-search-wrap input::placeholder { color: var(--txd); }
.zone-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: 140px; overflow-y: auto;
    scrollbar-width: thin;
}
.zone-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: var(--r-full);
    background: var(--card); border: 1px solid var(--brd);
    color: var(--tx2); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all .15s;
    font-family: var(--font-body);
    white-space: nowrap;
}
.zone-pill i { font-size: 9px; color: var(--txm); }
.zone-pill .zone-count { font-size: 9px; color: var(--txd); font-weight: 500; }
.zone-pill:hover { border-color: var(--gold-25); color: var(--tx); }
.zone-pill.active {
    background: linear-gradient(135deg, var(--gold), var(--gold-l));
    color: #000; border-color: transparent; font-weight: 700;
}
.zone-pill.active i, .zone-pill.active .zone-count { color: rgba(0,0,0,.5); }
.zone-selected-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--gold); font-weight: 600;
    margin-bottom: 6px;
}
.zone-selected-label button {
    background: none; border: none; color: var(--txm);
    cursor: pointer; font-size: 10px; padding: 2px 4px;
}
.zone-selected-label button:hover { color: var(--red); }

/* ── Profile Photo Upload ── */
.profile-user-avatar {
    position: relative;
    cursor: pointer;
}
.profile-avatar-photo {
    width: 60px; height: 60px; border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--gold);
    box-shadow: 0 4px 16px var(--gold-25);
}
.profile-user-avatar-circle {
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-l));
    color: #000; font-size: 22px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px var(--gold-25);
}
.profile-photo-badge {
    position: absolute; bottom: -2px; right: -2px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--card); border: 2px solid var(--bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--gold);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ── Password Strength Meter ── */
.pwd-strength-bar {
    height: 3px; border-radius: 2px;
    background: var(--brd2);
    margin-top: 6px; overflow: hidden;
}
.pwd-strength-fill {
    height: 100%; border-radius: 2px;
    transition: width .3s, background .3s;
}
.pwd-strength-label {
    font-size: 10px; font-weight: 600;
    margin-top: 3px; text-align: right;
}


/* ══════════════════════════════════════════════════════════
   PROFILE TAB MODULES — Sans contours (Clean Borderless Cards)
   Strictement réservé aux modules de l'onglet profil
   ══════════════════════════════════════════════════════════ */
#view-client-profile .profile-user-header,
#view-client-profile .profile-user-stats,
#view-client-profile .profile-section,
#view-client-profile .profile-pro-cta-inner,
#view-client-profile .profile-choice-card,
#view-client-profile .profile-resto-card,
#view-client-profile .profile-resto-hero-card,
#view-client-profile .profile-restaurant > div {
    border: none !important;
}

#view-client-profile .profile-choice-card:hover,
#view-client-profile .profile-pro-cta-inner:hover {
    border-color: transparent !important;
    box-shadow: 0 4px 20px var(--gold-10) !important;
}

/* Ligne séparatrice Langue / Thème adoucie pour une parfaite harmonie avec les modules sans contour */
#view-client-profile .profile-row + .profile-row {
    border-top: 1px solid rgba(186, 168, 140, 0.22) !important;
}
[data-theme="luxury-dark"] #view-client-profile .profile-row + .profile-row {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
[data-theme="unusuall"] #view-client-profile .profile-row + .profile-row {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}


/* ══════ VIEW TRANSITIONS — Fluid animations ══════ */

/* Base: all views start hidden with opacity transition */
#view-client-feed,
#view-client-orders,
#view-client-profile,
#view-client-map {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* View entering animation */
.view-enter {
    animation: viewSlideIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes viewSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* View leaving animation */
.view-leave {
    animation: viewFadeOut 0.2s ease forwards;
}
@keyframes viewFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

/* Profile modules — staggered entrance */
.profile-choice-card,
.profile-section-wrap,
.profile-user-header,
.profile-user-stats,
.profile-pro-cta,
.profile-info-settings-grid > div {
    opacity: 0;
    animation: profileModuleIn 0.4s ease forwards;
}
.profile-choice-card:nth-child(1) { animation-delay: 0.05s; }
.profile-choice-card:nth-child(2) { animation-delay: 0.12s; }
.profile-section-wrap:nth-of-type(1) { animation-delay: 0.18s; }
.profile-section-wrap:nth-of-type(2) { animation-delay: 0.24s; }
.profile-user-header { animation-delay: 0.05s; }
.profile-user-stats { animation-delay: 0.12s; }
.profile-info-settings-grid > div:nth-child(1) { animation-delay: 0.18s; }
.profile-info-settings-grid > div:nth-child(2) { animation-delay: 0.24s; }
.profile-pro-cta { animation-delay: 0.3s; }

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

/* Nav button press animation */
.client-nav-btn {
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.client-nav-btn:active {
    transform: scale(0.88) !important;
}
.client-nav-btn.active .nav-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease !important;
}

/* Feed cards staggered entrance */
.client-restaurant-card {
    opacity: 0;
    animation: feedCardIn 0.4s ease forwards;
}
@keyframes feedCardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Filter chips smooth entrance */
.client-filter-chip {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Smooth profile row hover */
.profile-row {
    transition: background 0.2s ease, transform 0.15s ease !important;
}
.profile-row:active {
    transform: scale(0.98) !important;
}

/* Logout animation */
.profile-logout-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    opacity: 0;
    animation: logoutFadeIn 0.4s ease forwards;
}
@keyframes logoutFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.logout-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--brd);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: logoutSpin 0.8s linear infinite;
    margin-bottom: 16px;
}
@keyframes logoutSpin {
    to { transform: rotate(360deg); }
}
.logout-text {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--txm);
    animation: logoutTextFade 0.5s ease 0.3s forwards;
    opacity: 0;
}
@keyframes logoutTextFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Bottom sheet smoother animation */
#auth-sheet {
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* Tabs switcher smooth */
.profile-tabs-switcher button {
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ══════ v2.5.13 — Feed Cards: Hybrid layout (cover + body) matching validated mockup ══════ */

/* Card: remove overlay layout, use hybrid flow */
.client-restaurant-card {
    aspect-ratio: unset !important;
    background: var(--card) !important;
    border: 1px solid var(--brd) !important;
    border-radius: 18px !important;
    position: relative !important;
    box-shadow: none !important;
}

/* Cover: relative positioned, fixed height */
.client-restaurant-card .card-cover {
    position: relative !important;
    inset: unset !important;
    height: 130px !important;
    overflow: hidden !important;
}

/* Gradient overlay: subtler, only on cover */
.client-restaurant-card .card-grad {
    height: 50% !important;
    background: linear-gradient(to top, rgba(0,0,0,.4) 0%, transparent 100%) !important;
}

/* Card info/body: normal flow, not absolute */
.client-restaurant-card .card-info {
    position: relative !important;
    inset: unset !important;
    bottom: unset !important;
    padding: 10px 12px 12px !important;
    z-index: unset !important;
    color: var(--tx) !important;
}

/* Card name: use theme text color */
.client-restaurant-card .card-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--tx) !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Meta line: delivery pill + distance */
.client-restaurant-card .card-cuisine {
    font-size: 11px !important;
    color: var(--tx2) !important;
    margin-top: 3px !important;
    text-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.client-restaurant-card .card-cuisine .sep {
    color: var(--txd) !important;
    font-size: 8px !important;
}

/* Delivery pill in meta — solid gold gradient, matching tag thickness */
.card-dlv-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, var(--gold), #E8C95A) !important;
    color: #1A1714 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
.card-dlv-pill i { font-size: 8px !important; }

/* Cuisine tags: in the body */
.client-restaurant-card .card-tags {
    display: flex !important;
    gap: 4px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
}
.client-restaurant-card .card-tag {
    padding: 2px 7px !important;
    border-radius: 6px !important;
    background: var(--bg2) !important;
    border: 1px solid var(--brd) !important;
    font-size: 9px !important;
    color: var(--gold) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* Status pill: solid fill, top-right of COVER */
.client-restaurant-card .card-top-pill {
    display: inline-flex !important;
    position: absolute !important;
    z-index: 4 !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
}
.client-restaurant-card .card-top-pill.status-open {
    top: 8px !important;
    right: 8px !important;
    left: unset !important;
    background: #34C759 !important;
    color: #1A1714 !important;
    border: none !important;
}
.client-restaurant-card .card-top-pill.status-closed {
    top: 8px !important;
    right: 8px !important;
    left: unset !important;
    background: #FF3B30 !important;
    color: #fff !important;
    border: none !important;
}
.client-restaurant-card .card-top-pill.status-open i,
.client-restaurant-card .card-top-pill.status-closed i {
    font-size: 4px !important;
}

/* Rating pill: bottom-left of cover */
.client-restaurant-card .card-top-pill.card-rating-pill {
    bottom: 8px !important;
    left: 8px !important;
    top: unset !important;
    right: unset !important;
    background: rgba(0,0,0,.55) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    color: var(--gold) !important;
}
.client-restaurant-card .card-top-pill.card-rating-pill i {
    font-size: 7px !important;
    color: #FFD700 !important;
}

/* Nouveau pill: bottom-left of cover */
.client-restaurant-card .card-top-pill.card-new-pill {
    bottom: 8px !important;
    left: 8px !important;
    top: unset !important;
    right: unset !important;
    background: rgba(212,175,55,.15) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    color: var(--gold) !important;
    font-style: italic !important;
    border: 1px solid rgba(212,175,55,.2) !important;
}
.client-restaurant-card .card-top-pill.card-new-pill i {
    font-size: 6px !important;
}

/* Hide old footer completely */
.client-restaurant-card .card-footer { display: none !important; }

/* Hide old card-cover-dist (distance on cover) — now in body meta */
.client-restaurant-card .card-cover-dist { display: none !important; }

/* Arctic-light theme adjustments for hybrid cards */
[data-theme="arctic-light"] .client-restaurant-card {
    background: #FFFFFF !important;
    border-color: rgba(212,175,55,.15) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
[data-theme="arctic-light"] .client-restaurant-card .card-name {
    color: #1A1714 !important;
}
[data-theme="arctic-light"] .client-restaurant-card .card-cuisine {
    color: #6B6355 !important;
}
[data-theme="arctic-light"] .client-restaurant-card .card-tag {
    background: #F5F0E8 !important;
    border-color: rgba(212,175,55,.15) !important;
}

/* ═══ CRITICAL: Keep covers DARK in arctic-light theme ═══ */
/* The cover section must remain dark regardless of theme — matching the mockup */
[data-theme="arctic-light"] .client-restaurant-card .card-ph-bg {
    opacity: 1 !important;
}
[data-theme="arctic-light"] .client-restaurant-card .card-cover {
    background: #0A0400 !important;
}

/* Emoji: visible and centered on dark cover */
.client-restaurant-card .card-ph-emoji {
    font-size: 36px !important;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Card gradient: minimal in hybrid layout (text is in body, not overlaid) */
.client-restaurant-card .card-grad {
    height: 30% !important;
    background: linear-gradient(to top, rgba(0,0,0,.3) 0%, transparent 100%) !important;
}

/* Cover image: keep full opacity in arctic-light */
[data-theme="arctic-light"] .client-restaurant-card .card-cover img {
    opacity: 1 !important;
}

/* ══════ v2.5.17 — Map: Premium popup + controls matching validated mockup ══════ */

/* Search bar close button */
.map-search-close {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.08); border: 1px solid var(--brd);
    display: flex; align-items: center; justify-content: center;
    color: var(--txm); font-size: 11px; cursor: pointer;
    flex-shrink: 0; transition: all .2s;
}
.map-search-close:active { transform: scale(.85); }

/* Popup cover section */
.map-popup-cover {
    height: 80px;
    background: linear-gradient(135deg, #3A2A1A, #5A4030);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; position: relative;
}
.map-popup-cover img {
    width: 100%; height: 100%; object-fit: cover;
}
.map-popup-cover-grad {
    position: absolute; bottom: 0; left: 0; right: 0; height: 40px;
    background: linear-gradient(transparent, var(--card));
}

/* Popup action buttons */
.map-popup-actions {
    display: flex; gap: 8px; margin-top: 10px;
}
.map-popup-btn {
    flex: 1; padding: 8px 0; border-radius: 10px; text-align: center;
    font-size: 11px; font-weight: 600; cursor: pointer; transition: all .2s;
    border: none; font-family: var(--font-body);
}
.map-popup-btn.primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-l));
    color: #1A1714;
}
.map-popup-btn.primary:active { transform: scale(.95); }
.map-popup-btn.secondary {
    background: var(--hov); border: 1px solid var(--brd);
    color: var(--txm);
}
.map-popup-btn.secondary:active { transform: scale(.95); }

/* Popup name: larger */
.map-popup-custom .map-popup-name {
    font-size: 14px !important;
    margin-bottom: 4px !important;
}
.map-popup-custom .map-popup-meta {
    margin-bottom: 6px !important;
}
.map-popup-custom .map-popup-status {
    font-size: 11px !important;
}

/* Zoom controls */
.map-zoom-controls {
    position: absolute; bottom: 90px; right: 16px; z-index: 1000;
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--brd2);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.map-zoom-btn {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    color: var(--tx); font-size: 16px; font-weight: 700;
    cursor: pointer; transition: background .15s;
    background: transparent; border: none;
    font-family: var(--font-body);
}
.map-zoom-btn:first-child { border-bottom: 1px solid var(--brd); }
.map-zoom-btn:active { background: var(--hov); }

/* Hide back button on map (not in mockup) */
.map-back-btn { display: none !important; }
/* ══════ v2.5.17b — Map fixes: nav bar, double zoom, locate position ══════ */

/* FIX 1: Map view must not push nav bar out — use flex:1 instead of height:100% */
#view-client-map {
    height: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    position: relative !important;
}

/* FIX 2: Hide Leaflet's default zoom controls (we use custom ones) */
.leaflet-control-zoom {
    display: none !important;
}

/* FIX 3: Reposition locate button and zoom controls above nav bar */
.map-locate-btn {
    bottom: 16px !important;
    left: 16px !important;
}
.map-zoom-controls {
    bottom: 16px !important;
    right: 16px !important;
}
/* ══ Map Premium Style — OSM tiles with refined look ══ */
#view-client-map .leaflet-tile-pane{filter:saturate(.5) brightness(1.08) contrast(.92) sepia(.08)}
#view-client-map .leaflet-tile{border-radius:0}

/* ══════════════════════════════════════════════════════════
   ORDERS — v2.5.27 Mockup-Accurate Redesign
   ══════════════════════════════════════════════════════════ */

/* ── Empty State ── */
.orders-empty-v2 {
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;padding:40px 24px 0;
    text-align:center;min-height:60vh;
    animation:ordFadeIn .6s ease;
}
@keyframes ordFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.orders-empty-illus {
    width:90px;height:90px;border-radius:50%;
    background:var(--hov);border:2px solid var(--brd2);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;position:relative;
}
.orders-empty-illus::after {
    content:'';position:absolute;inset:-8px;border-radius:50%;
    border:1.5px dashed var(--brd);animation:ordSpin 20s linear infinite;
}
@keyframes ordSpin{to{transform:rotate(360deg)}}
.orders-empty-illus i{font-size:30px;color:var(--gold)}
.orders-empty-v2 .oe-title{font-size:18px;font-weight:800;color:var(--tx);margin-bottom:8px;letter-spacing:-.3px}
.orders-empty-v2 .oe-text{font-size:12px;color:var(--txm);line-height:1.6;max-width:280px;margin-bottom:24px}
.orders-empty-v2 .oe-cta {
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;max-width:280px;padding:13px 24px;
    border-radius:14px;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--gold),var(--gold-l));
    color:#1A1714;font-size:13px;font-weight:700;
    box-shadow:0 4px 20px rgba(212,175,55,.35);
    transition:all .2s;font-family:var(--font-body);
}
.orders-empty-v2 .oe-cta:active{transform:scale(.97)}
.orders-empty-v2 .oe-features{display:flex;flex-direction:column;gap:8px;margin-top:20px;width:100%;max-width:280px}
.orders-empty-v2 .oe-feat{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txm)}
.orders-empty-v2 .oe-feat i{color:var(--gold);font-size:12px;width:18px;text-align:center}

/* ── Order Sub-Tabs ── */
.ord-tabs {
    display:flex;gap:0;margin:8px 16px 16px;
    background:var(--card);border-radius:14px;padding:4px;
}
.ord-tab {
    flex:1;padding:10px 0;text-align:center;
    font-size:13px;font-weight:600;border-radius:11px;
    color:var(--txm);cursor:pointer;
    transition:all .25s cubic-bezier(.4,0,.2,1);
    border:none;background:transparent;
    display:flex;align-items:center;justify-content:center;gap:6px;
    font-family:var(--font-body);
}
.ord-tab.active {
    background:linear-gradient(135deg,var(--gold),var(--gold-l));
    color:#1A1714;box-shadow:0 2px 8px rgba(212,175,55,.3);
}
.ord-tab .ord-badge {
    background:rgba(212,175,55,.2);color:var(--gold);
    font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;
}
.ord-tab.active .ord-badge{background:rgba(0,0,0,.15);color:#1A1714}

/* ── Order Card v2 ── */
.ocard-v2 {
    background:var(--card);border:1px solid var(--brd);
    border-radius:18px;margin:0 16px 14px;padding:16px;
    transition:all .2s;
}
.ocard-v2:active{transform:scale(.99)}
.ocard-v2-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ocard-v2-resto{display:flex;align-items:center;gap:10px}
.ocard-v2-avatar {
    width:40px;height:40px;border-radius:12px;
    background:var(--hov);border:1px solid var(--brd);
    display:flex;align-items:center;justify-content:center;font-size:20px;
}
.ocard-v2-name{font-size:14px;font-weight:700;color:var(--tx)}
.ocard-v2-id{font-size:11px;color:var(--txd);margin-top:1px}

/* Status badges */
.ocard-v2-status {
    padding:4px 10px;border-radius:10px;
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;
}
.ocard-v2-status.st-preparing{background:rgba(255,159,10,.12);color:var(--orange);border:1px solid rgba(255,159,10,.3)}
.ocard-v2-status.st-ready{background:rgba(52,199,89,.12);color:var(--green);border:1px solid rgba(52,199,89,.3)}
.ocard-v2-status.st-delivered{background:rgba(10,132,255,.12);color:#0A84FF;border:1px solid rgba(10,132,255,.3)}
.ocard-v2-status.st-cancelled{background:rgba(255,59,48,.12);color:var(--red);border:1px solid rgba(255,59,48,.3)}

/* Timeline */
.ocard-timeline{display:flex;align-items:center;gap:0;margin:12px 0 4px;padding:0 4px}
.otl-step{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:4px}
.otl-dot {
    width:24px;height:24px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .3s;
}
.otl-dot.done{background:var(--green);color:#fff}
.otl-dot.active{background:var(--orange);color:#fff;animation:otlPulse 1.5s ease infinite}
.otl-dot.active-green{background:var(--green);color:#fff;animation:otlPulseG 1.5s ease infinite}
.otl-dot.pending{background:var(--hov);border:1px solid var(--brd);color:var(--txd)}
@keyframes otlPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,159,10,.3)}50%{box-shadow:0 0 0 6px rgba(255,159,10,0)}}
@keyframes otlPulseG{0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,.3)}50%{box-shadow:0 0 0 6px rgba(52,199,89,0)}}
.otl-label{font-size:8px;color:var(--txd);font-weight:600;text-transform:uppercase}
.otl-label.lbl-active{color:var(--orange)}
.otl-label.lbl-active-green{color:var(--green)}
.otl-line{flex:1;height:2px;margin:0 -2px;margin-bottom:16px}
.otl-line.done{background:var(--green)}
.otl-line.pending{background:var(--hov)}

/* Items */
.ocard-v2-items {
    display:flex;flex-direction:column;gap:6px;
    padding:10px 0;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);
}
.ocard-v2-item{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.ocard-v2-item-name{color:var(--txm);display:flex;align-items:center;gap:6px}
.ocard-v2-item-qty {
    background:var(--hov);border:1px solid var(--brd);
    padding:1px 6px;border-radius:5px;font-size:10px;font-weight:700;color:var(--gold);
}
.ocard-v2-item-price{color:var(--tx);font-weight:600;font-size:13px}

/* Footer */
.ocard-v2-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.ocard-v2-date{font-size:11px;color:var(--txd);display:flex;align-items:center;gap:5px}
.ocard-v2-date i{font-size:10px}
.ocard-v2-total{font-size:16px;font-weight:800;color:var(--gold)}
.ocard-v2-total-label{font-size:10px;color:var(--txm);font-weight:500}
.ocard-v2-total-strike{font-size:16px;font-weight:800;text-decoration:line-through;color:var(--txd)}

/* Orders view container */
.orders-view-v2{padding:0 0 100px}
.orders-list-v2{display:flex;flex-direction:column;gap:0}


/* ══════════════════════════════════════════════════════════
   PROFILE v2.5.29 — Mockup-Accurate Redesign
   ══════════════════════════════════════════════════════════ */

/* ── Guest: Account Cards ── */
.pv2-guest{padding:16px}
.pv2-account-card{background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:16px;margin-bottom:12px;position:relative;overflow:hidden}
.pv2-account-card::before{content:'';position:absolute;top:0;right:0;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.06),transparent);transform:translate(30px,-30px)}
.pv2-card-badge{position:absolute;top:12px;right:12px;padding:2px 8px;border-radius:6px;font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;background:rgba(212,175,55,.12);color:var(--gold);border:1px solid rgba(212,175,55,.25)}
.pv2-card-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:10px}
.pv2-card-icon.client{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#1A1714}
.pv2-card-icon.pro{background:var(--hov);border:1px solid var(--brd2);color:var(--gold)}
.pv2-card-title{font-size:15px;font-weight:800;color:var(--tx);margin-bottom:4px}
.pv2-card-desc{font-size:12px;color:var(--txm);line-height:1.5;margin-bottom:12px}
.pv2-feat-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.pv2-feat-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tx);font-weight:500}
.pv2-feat-item i{color:var(--gold);font-size:10px;width:14px;text-align:center}
.pv2-card-cta{width:100%;padding:12px;border-radius:12px;border:none;cursor:pointer;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;transition:all .2s;font-family:var(--font-body)}
.pv2-card-cta.primary{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#1A1714;box-shadow:0 4px 16px rgba(212,175,55,.3)}
.pv2-card-cta.secondary{background:var(--hov);border:1px solid var(--brd2);color:var(--tx)}
.pv2-card-cta:active{transform:scale(.98)}
.pv2-login-link{text-align:center;margin-top:8px;font-size:12px;color:var(--txm)}
.pv2-login-link a{color:var(--gold);font-weight:600;text-decoration:none}

/* ── Settings Rows ── */
.pv2-settings-section{background:var(--card);border-radius:14px;overflow:hidden;margin-top:10px;border:1px solid var(--brd)}
.pv2-settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;transition:background .15s}
.pv2-settings-row:active{background:var(--hov)}
.pv2-settings-row+.pv2-settings-row{border-top:1px solid rgba(255,255,255,.03)}
.pv2-settings-row-left{display:flex;align-items:center;gap:10px}
.pv2-settings-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px}
.pv2-settings-icon.gold{background:rgba(212,175,55,.12);color:var(--gold)}
.pv2-settings-icon.blue{background:rgba(10,132,255,.12);color:#0A84FF}
.pv2-settings-icon.green{background:rgba(52,199,89,.12);color:var(--green)}
.pv2-settings-icon.red{background:rgba(255,59,48,.12);color:var(--red)}
.pv2-settings-label{font-size:13px;font-weight:500;color:var(--tx)}
.pv2-settings-value{font-size:13px;color:var(--txm);font-weight:500;display:flex;align-items:center;gap:5px}
.pv2-settings-arrow{color:var(--txd);font-size:10px}

/* ── Logged In: Profile Header ── */
.pv2-logged{padding:16px}
.pv2-header-card{background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:16px 16px;display:flex;flex-direction:row;align-items:center;gap:14px;margin-bottom:14px;position:relative;overflow:hidden}
.pv2-header-card::before{content:'';position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(135deg,rgba(212,175,55,.08),transparent)}
.pv2-avatar-ring{width:80px;height:80px;border-radius:50%;padding:3px;background:linear-gradient(135deg,var(--gold),var(--gold-l),var(--gold-dk,#B8960C));box-shadow:0 4px 20px rgba(212,175,55,.25);margin-bottom:0;position:relative}
.pv2-avatar-inner{width:100%;height:100%;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:var(--gold);overflow:hidden}
.pv2-avatar-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pv2-camera-badge{position:absolute;bottom:0;right:0;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1A1714;display:flex;align-items:center;justify-content:center;font-size:9px;border:2px solid var(--bg);cursor:pointer}
.pv2-info{flex:1;min-width:0;text-align:left}
.pv2-name{font-size:16px;font-weight:800;color:var(--tx);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv2-email{font-size:12px;color:var(--txm);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv2-verified{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:8px;background:rgba(52,199,89,.1);border:1px solid rgba(52,199,89,.25);color:var(--green);font-size:10px;font-weight:600}
.pv2-member{font-size:11px;color:var(--txd);display:flex;align-items:center;gap:5px}

/* ── Stats ── */
.pv2-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.pv2-stat{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:12px 8px;text-align:center}
.pv2-stat-val{font-size:20px;font-weight:800;color:var(--gold)}
.pv2-stat-lbl{font-size:9px;color:var(--txm);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;font-weight:600}

/* ── Section Label ── */
.pv2-section-label{font-size:10px;font-weight:700;color:var(--txd);text-transform:uppercase;letter-spacing:1.2px;padding:0 4px;margin:20px 0 8px}

/* ── Logout ── */
.pv2-logout{width:100%;padding:12px;border-radius:12px;background:rgba(255,59,48,.08);border:1px solid rgba(255,59,48,.2);color:var(--red);font-size:13px;font-weight:600;cursor:pointer;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;font-family:var(--font-body)}
.pv2-logout:active{transform:scale(.98);background:rgba(255,59,48,.15)}

/* ── Footer ── */
.pv2-footer{text-align:center;margin-top:16px;padding:12px 0;border-top:1px solid var(--brd)}
.pv2-footer-logo{font-size:16px;font-weight:700;color:var(--txd);margin-bottom:4px}
.pv2-footer-logo span{color:rgba(212,175,55,.5)}
.pv2-footer-ver{font-size:10px;color:var(--txd)}


/* ── Favorite button animation ── */
.fd2-c-fav{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.fd2-c-fav i{transition:color .2s,transform .2s}
.fd2-pub-full{border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--brd);transition:transform .15s}
.fd2-pub-full:active{transform:scale(.98)}
/* ══════════════════════════════════════════════════════════
   PROFILE SUB-PAGES v2.5.43 — Edit / Notifications / Security / FAQ
   ══════════════════════════════════════════════════════════ */

/* ── Sub-page layout ── */
.pv2-sub-page{padding:0 0 0;animation:profileModuleIn .35s ease}
.pv2-sub-header{display:flex;align-items:center;gap:12px;padding:12px 16px 8px;position:sticky;top:0;z-index:10;background:var(--bg)}
.pv2-sub-back{width:34px;height:34px;border-radius:10px;background:var(--card);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--tx);cursor:pointer;transition:all .2s;flex-shrink:0}
.pv2-sub-back:active{transform:scale(.92);background:var(--hov)}
.pv2-sub-title{font-size:15px;font-weight:700;color:var(--tx);flex:1}
.pv2-sub-spacer{width:34px;flex-shrink:0}
.pv2-sub-body{padding:8px 16px 0}

/* ── Edit profile ── */
.pv2-edit-avatar-wrap{text-align:center;margin-bottom:20px;cursor:pointer}
.pv2-edit-photo-label{font-size:12px;color:var(--gold);font-weight:600;margin-top:6px}

/* ── Form elements ── */
.pv2-form-group{margin-bottom:16px}
.pv2-form-label{display:block;font-size:11px;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;padding-left:2px}
.pv2-form-input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--brd);background:var(--card);color:var(--tx);font-size:14px;font-weight:500;font-family:var(--font-body);transition:border-color .2s;box-sizing:border-box;outline:none}
.pv2-form-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.1)}
.pv2-form-input::placeholder{color:var(--txd)}
.pv2-form-hint{font-size:11px;color:var(--txd);margin-top:6px;padding-left:2px;line-height:1.4}
.pv2-form-feedback{font-size:12px;font-weight:600;padding:10px 14px;border-radius:12px;margin-top:12px;text-align:center;animation:profileModuleIn .3s ease}
.pv2-form-feedback.success{background:rgba(52,199,89,.1);color:var(--green);border:1px solid rgba(52,199,89,.2)}
.pv2-form-feedback.error{background:rgba(255,59,48,.1);color:var(--red);border:1px solid rgba(255,59,48,.2)}
.pv2-form-feedback:empty{display:none}

/* ── Save button ── */
.pv2-save-btn{width:100%;padding:13px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#1A1714;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;font-family:var(--font-body);box-shadow:0 4px 16px rgba(212,175,55,.3)}
.pv2-save-btn:active{transform:scale(.98)}
.pv2-save-btn:disabled{opacity:.6;cursor:not-allowed}

/* ── Notifications intro ── */
.pv2-notif-intro{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--txm);padding:12px 16px;background:var(--card);border:1px solid var(--brd);border-radius:14px;margin-bottom:4px}

/* ── Toggle switch ── */
.pv2-toggle{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.pv2-toggle input{opacity:0;width:0;height:0}
.pv2-toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--hov);border:1px solid var(--brd);border-radius:26px;transition:.3s}
.pv2-toggle-slider::before{content:'';position:absolute;height:20px;width:20px;left:2px;bottom:2px;background:var(--txm);border-radius:50%;transition:.3s}
.pv2-toggle input:checked+.pv2-toggle-slider{background:var(--gold);border-color:var(--gold)}
.pv2-toggle input:checked+.pv2-toggle-slider::before{transform:translateX(20px);background:#1A1714}

/* ── Password field ── */
.pv2-pwd-wrap{position:relative}
.pv2-pwd-wrap .pv2-form-input{padding-right:48px}
.pv2-pwd-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--txm);cursor:pointer;font-size:14px}

/* ── Password strength bar ── */
.pv2-pwd-strength{margin-top:8px;display:flex;align-items:center;gap:8px}
.pv2-pwd-bar{flex:1;height:4px;border-radius:4px;background:var(--hov);overflow:hidden}
.pv2-pwd-fill{height:100%;border-radius:4px;transition:width .3s,background .3s}

/* ── Danger zone ── */
.pv2-danger-zone{margin-top:32px;padding-top:16px;border-top:1px solid rgba(255,59,48,.1)}

/* ── FAQ accordion ── */
.pv2-faq-list{margin-top:12px}
.pv2-faq-item{background:var(--card);border:1px solid var(--brd);border-radius:14px;margin-bottom:8px;overflow:hidden;cursor:pointer;transition:all .2s}
.pv2-faq-item:active{background:var(--hov)}
.pv2-faq-q{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:12px}
.pv2-faq-q span{font-size:14px;font-weight:600;color:var(--tx);flex:1}
.pv2-faq-chevron{font-size:11px;color:var(--txd);transition:transform .3s;flex-shrink:0}
.pv2-faq-item.open .pv2-faq-chevron{transform:rotate(180deg);color:var(--gold)}
.pv2-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;font-size:13px;color:var(--txm);line-height:1.6;padding:0 16px}
.pv2-faq-item.open .pv2-faq-a{max-height:200px;padding:0 16px 16px}

/* ── App info footer ── */
.pv2-app-info{text-align:center;margin-top:28px;padding:20px 0}
.pv2-app-info-logo{font-size:20px;font-weight:700;color:var(--txd)}
.pv2-app-info-logo span{color:rgba(212,175,55,.5)}
.pv2-app-info-ver{font-size:11px;color:var(--txd);margin-top:4px}
.pv2-app-info-copy{font-size:10px;color:var(--txd);margin-top:2px;opacity:.6}
/* ══════════════════════════════════════════════════════════
   AUTH v2 — Bottom Sheet Mockup
   ══════════════════════════════════════════════════════════ */

.av2-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200}
.av2-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.av2-sheet{position:absolute;bottom:0;left:0;right:0;background:var(--card);border-radius:28px 28px 0 0;z-index:60;max-height:92vh;max-height:92dvh;box-shadow:0 -10px 40px rgba(0,0,0,.5);border-top:1px solid rgba(212,175,55,.25);transition:transform .35s cubic-bezier(.32,.72,0,1)}
.av2-sheet-scroll{overflow-y:auto;max-height:92vh;max-height:92dvh;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,20px)}
.av2-sheet-scroll::-webkit-scrollbar{display:none}

.av2-handle{display:flex;justify-content:center;padding:12px 0 0}
.av2-handle-bar{width:36px;height:4px;background:var(--txd);border-radius:2px}

.av2-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 0}
.av2-sheet-title{font-size:18px;font-weight:800;color:var(--tx)}
.av2-close{width:28px;height:28px;border-radius:50%;background:var(--hov);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;color:var(--txm);font-size:11px;cursor:pointer}
.av2-sheet-sub{padding:4px 16px 0;font-size:12px;color:var(--txm);line-height:1.5}

/* Tabs */
.av2-tabs{display:flex;background:var(--hov);border-radius:12px;padding:3px;margin:14px 16px 0;gap:0}
.av2-tab{flex:1;padding:8px 0;text-align:center;font-size:12px;font-weight:600;border-radius:10px;color:var(--txm);cursor:pointer;border:none;background:transparent;transition:all .25s;font-family:inherit}
.av2-tab.active{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#1A1714;box-shadow:0 2px 8px rgba(212,175,55,.3)}

/* Form */
.av2-form{padding:14px 16px 20px}
.av2-input-group{margin-bottom:11px}
.av2-label{display:block;font-size:11px;font-weight:600;color:var(--txm);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.av2-input-wrap{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--brd);border-radius:12px;padding:0 12px;transition:border-color .2s}
.av2-input-wrap:focus-within{border-color:var(--gold)}
.av2-input-wrap i{color:var(--txd);font-size:12px;flex-shrink:0}
.av2-input-wrap input{flex:1;background:transparent;border:none;outline:none;color:var(--tx);font-size:13px;font-weight:500;padding:11px 0;font-family:inherit}
.av2-input-wrap input::placeholder{color:var(--txd)}
.av2-eye{color:var(--txd);font-size:14px;cursor:pointer;padding:4px;flex-shrink:0;background:none;border:none}

/* Phone input */
.av2-phone-wrap{display:flex;align-items:center;background:var(--bg);border:1px solid var(--brd);border-radius:12px;overflow:hidden;transition:border-color .2s}
.av2-phone-wrap:focus-within{border-color:var(--gold)}
.av2-phone-prefix{display:flex;align-items:center;gap:5px;padding:11px 8px 11px 12px;border-right:1px solid var(--brd);flex-shrink:0}
.av2-phone-flag{font-size:16px}
.av2-phone-code{font-size:13px;font-weight:600;color:var(--tx)}
.av2-phone-wrap input{flex:1;background:transparent;border:none;outline:none;color:var(--tx);font-size:13px;font-weight:500;padding:11px;font-family:inherit}
.av2-phone-wrap input::placeholder{color:var(--txd)}

/* Password strength */
.av2-pwd-strength{display:flex;gap:4px;margin-top:8px}
.av2-str-bar{flex:1;height:3px;border-radius:2px;background:var(--hov);transition:background .2s}
.av2-str-label{font-size:11px;color:var(--txm);margin-top:4px;text-align:right}

/* Checkbox */
.av2-checkbox-row{display:flex;align-items:flex-start;gap:8px;margin:12px 0}
.av2-checkbox{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(212,175,55,.25);background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;cursor:pointer;transition:all .2s}
.av2-checkbox i{display:none;color:#1A1714;font-size:10px}
.av2-checkbox.checked{background:linear-gradient(135deg,var(--gold),var(--gold-l));border-color:var(--gold)}
.av2-checkbox.checked i{display:block}
.av2-checkbox-text{font-size:12px;color:var(--txm);line-height:1.5}
.av2-checkbox-text a{color:var(--gold);text-decoration:none;font-weight:600}

/* Submit */
.av2-submit{width:100%;padding:13px;border-radius:14px;background:linear-gradient(135deg,var(--gold),var(--gold-l));border:none;cursor:pointer;font-size:14px;font-weight:700;color:#1A1714;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 20px rgba(212,175,55,.35);transition:all .2s;margin-top:6px;font-family:inherit}
.av2-submit:active{transform:scale(.98)}
.av2-submit:disabled{background:var(--hov);color:var(--txd);box-shadow:none;cursor:not-allowed}

/* Divider */
.av2-divider{display:flex;align-items:center;gap:10px;margin:14px 0}
.av2-divider::before,.av2-divider::after{content:'';flex:1;height:1px;background:var(--brd)}
.av2-divider span{font-size:12px;color:var(--txd);font-weight:500;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}

/* Social */
.av2-social{display:flex;gap:8px}
.av2-social-btn{flex:1;padding:11px 0;border-radius:12px;background:var(--bg);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;gap:6px;color:var(--tx);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}
.av2-social-btn:active{transform:scale(.97);background:var(--hov)}
.av2-google-icon{width:18px;height:18px;background:conic-gradient(from 180deg,#4285F4 0deg,#34A853 90deg,#FBBC05 180deg,#EA4335 270deg,#4285F4 360deg);border-radius:50%}

/* Footer */
.av2-footer{text-align:center;padding:12px 16px 20px;font-size:12px;color:var(--txm);border-top:1px solid rgba(255,255,255,.03)}
.av2-footer a{color:var(--gold);font-weight:600;text-decoration:none}
.av2-link{color:var(--gold);font-weight:600;text-decoration:none;font-size:13px}

/* Forgot link */
.av2-forgot{text-align:right;margin-top:-6px;margin-bottom:16px}
.av2-forgot a{font-size:12px;color:var(--gold);font-weight:600;text-decoration:none}

/* Error / Success banners */
.av2-error-banner{background:rgba(255,59,48,.1);border:1px solid rgba(255,59,48,.3);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13px;color:#FF3B30;display:flex;align-items:center;gap:8px}
.av2-error-banner::before{content:'\f06a';font-family:'Font Awesome 6 Free';font-weight:900;font-size:14px;flex-shrink:0}
.av2-success-banner{background:rgba(52,199,89,.1);border:1px solid rgba(52,199,89,.3);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13px;color:#34C759}

/* Input error state */
.av2-input-group.input-error .av2-input-wrap,.av2-input-group.input-error .av2-phone-wrap{border-color:#FF3B30}
.av2-error-msg{font-size:11px;color:#FF3B30;margin-top:4px;display:flex;align-items:center;gap:4px}

/* Success content */
.av2-success-content{padding:40px 20px 28px;text-align:center}
.av2-success-ring{width:100px;height:100px;border-radius:50%;background:rgba(52,199,89,.1);border:2px solid rgba(52,199,89,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;animation:av2Pulse 2s ease infinite}
@keyframes av2Pulse{0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,.2)}50%{box-shadow:0 0 0 16px rgba(52,199,89,0)}}
.av2-success-icon{font-size:42px}
.av2-success-title{font-size:24px;font-weight:800;color:var(--tx);margin-bottom:8px}
.av2-success-desc{font-size:14px;color:var(--txm);line-height:1.6;margin-bottom:28px}

/* ══════════════════════════════════════════════════════════
   ESPACE RESTAURANT v2 — Mockup
   ══════════════════════════════════════════════════════════ */

/* Back button */
.er2-back{width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;color:var(--tx);font-size:13px;cursor:pointer;margin:8px 16px 0;transition:all .2s}
.er2-back:active{transform:scale(.92);background:var(--hov)}

/* Hero */
.er2-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 20px 20px}
.er2-icon-ring{width:80px;height:80px;border-radius:22px;background:linear-gradient(135deg,rgba(10,132,255,.15),rgba(10,132,255,.05));border:1px solid rgba(10,132,255,.25);display:flex;align-items:center;justify-content:center;font-size:32px;color:#0A84FF;margin-bottom:18px;box-shadow:0 8px 30px rgba(10,132,255,.12)}
.er2-title{font-size:26px;font-weight:800;color:var(--tx);letter-spacing:-.5px;margin-bottom:8px}
.er2-subtitle{font-size:14px;color:var(--txm);line-height:1.5;max-width:280px}

/* Config Card */
.er2-config{background:var(--card);border:1px solid var(--brd);border-radius:16px;margin:8px 16px 0;padding:16px;position:relative;overflow:hidden}
.er2-config::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.04),transparent)}
.er2-config-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.er2-config-icon{width:36px;height:36px;border-radius:10px;background:rgba(10,132,255,.1);border:1px solid rgba(10,132,255,.2);display:flex;align-items:center;justify-content:center;font-size:15px;color:#0A84FF;flex-shrink:0}
.er2-config-title{font-size:15px;font-weight:700;color:var(--tx);line-height:1.3}
.er2-config-desc{font-size:12px;color:var(--txm);line-height:1.6;margin-bottom:14px}

/* Steps */
.er2-steps{display:flex;flex-direction:column}
.er2-step{display:flex;align-items:flex-start;gap:12px;position:relative;padding-bottom:14px}
.er2-step:last-child{padding-bottom:0}
.er2-step-line{position:absolute;top:26px;left:13px;width:2px;bottom:0;background:linear-gradient(to bottom,var(--gold),rgba(212,175,55,.15))}
.er2-step:last-child .er2-step-line{display:none}
.er2-step-num{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-l));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#1A1714;flex-shrink:0;z-index:2;box-shadow:0 2px 10px rgba(212,175,55,.25)}
.er2-step-content{flex:1;padding-top:6px}
.er2-step-text{font-size:13px;color:var(--tx);line-height:1.5;font-weight:500}
.er2-step-text a{color:var(--gold);font-weight:700;text-decoration:none}
.er2-step-text .er2-hl{color:var(--gold);font-weight:600}

/* Features grid */
.er2-features{margin:16px 16px 0}
.er2-features-title{font-size:10px;font-weight:700;color:var(--txd);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;padding:0 4px}
.er2-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.er2-feat-card{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:14px 12px;display:flex;flex-direction:column;gap:6px}
.er2-feat-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px}
.er2-feat-icon.gold{background:rgba(212,175,55,.12);color:var(--gold)}
.er2-feat-icon.blue{background:rgba(10,132,255,.12);color:#0A84FF}
.er2-feat-icon.green{background:rgba(52,199,89,.12);color:#34C759}
.er2-feat-icon.purple{background:rgba(175,82,222,.12);color:#AF52DE}
.er2-feat-icon.orange{background:rgba(255,159,10,.12);color:#FF9F0A}
.er2-feat-icon.red{background:rgba(255,59,48,.12);color:#FF3B30}
.er2-feat-name{font-size:11px;font-weight:600;color:var(--tx);line-height:1.3}
.er2-feat-desc{font-size:10px;color:var(--txd);line-height:1.4}

/* Mini restaurant card */
.er2-mini-card{background:var(--card);border:1px solid var(--brd);border-radius:16px;margin:16px 16px 0;padding:16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:background .2s}
.er2-mini-card:active{background:var(--hov)}
.er2-mini-thumb{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#2C2822,#3a3020);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;border:1px solid var(--brd)}
.er2-mini-info{flex:1;min-width:0}
.er2-mini-name{font-size:15px;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er2-mini-meta{font-size:12px;color:var(--txm);margin-top:2px}
.er2-mini-arrow{color:var(--gold);font-size:14px}

/* Status badge */
.er2-status{text-align:center;padding-top:8px}
.er2-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:12px;font-size:12px;font-weight:600}
.er2-badge.active{background:rgba(52,199,89,.1);border:1px solid rgba(52,199,89,.25);color:#34C759}
.er2-badge.pending{background:rgba(255,159,10,.1);border:1px solid rgba(255,159,10,.25);color:#FF9F0A}
.er2-dot{width:6px;height:6px;border-radius:50%}
.er2-dot.active{background:#34C759}
.er2-dot.pending{background:#FF9F0A}

/* Stats grid */
.er2-stat-card{background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.er2-stat-val{font-size:28px;font-weight:800;color:var(--gold)}
.er2-stat-name{font-size:12px;font-weight:600;color:var(--tx)}

.er2-spacer{height:0}

/* ── ER2 PC: Restaurant Profile (Desktop) ── */
.er2-pc-wrap{max-width:560px;margin:0 auto;padding:24px 16px 60px}
.er2-pc-header{background:var(--card);border:1px solid var(--brd);border-radius:20px;padding:20px;display:flex;align-items:center;gap:16px;margin-bottom:12px}
.er2-pc-avatar{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--gold),var(--gold-l));display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;color:#1A1714;flex-shrink:0}
.er2-pc-info{flex:1;min-width:0}
.er2-pc-name{font-size:18px;font-weight:800;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er2-pc-role{font-size:12px;color:var(--txm);margin-top:2px}
.er2-pc-date{font-size:11px;color:var(--txd);margin-top:4px;display:flex;align-items:center;gap:5px}
.er2-pc-date i{font-size:10px}
.er2-pc-open{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--gold),var(--gold-l));display:flex;align-items:center;justify-content:center;color:#1A1714;font-size:16px;flex-shrink:0;text-decoration:none;transition:all .2s;box-shadow:0 2px 10px rgba(212,175,55,.25)}
.er2-pc-open:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(212,175,55,.4)}
.er2-pc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 8px}
.er2-pc-stat{background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:18px 12px;text-align:center}
.er2-pc-stat-val{font-size:24px;font-weight:800;color:var(--gold);margin-bottom:4px}
.er2-pc-stat-lbl{font-size:11px;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.5px}

/* ── ER2 Mobile: Title without hero icon ── */
.er2-mob-title{font-size:18px;font-weight:800;color:var(--tx);padding:12px 16px 4px}
.er2-mob-sub{font-size:12px;color:var(--txm);line-height:1.5;padding:0 16px 6px}

/* Badge row — elegant inline */
.er2-pc-badge-row{display:flex;justify-content:center;padding:14px 0 6px}
.er2-pc-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:20px;font-size:12px;font-weight:600;color:#34C759;background:rgba(52,199,89,.08);border:1px solid rgba(52,199,89,.18);letter-spacing:.2px}

/* ══════════════════════════════════════════════════════════
   FEED v2 — Chips + Publications + Grille 2 col
   Prefix: fd2-
   ══════════════════════════════════════════════════════════ */

/* ── Filter Chips ── */
.fd2-filters { padding: 12px 16px 4px; }
.fd2-filters-row {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
    -ms-overflow-style: none; scrollbar-width: none;
}
.fd2-filters-row::-webkit-scrollbar { display: none; }
.fd2-chip {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 7px 14px; border-radius: 9999px;
    border: 1px solid var(--brd); background: var(--card);
    color: var(--txm); font-size: 11px; font-weight: 500;
    cursor: pointer; transition: all .2s; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.fd2-chip i { margin-right: 5px; font-size: 9px; }
.fd2-chip.active {
    background: linear-gradient(135deg, var(--gold), #E8C95A);
    color: #1A1714; border-color: transparent; font-weight: 700;
    box-shadow: 0 2px 12px rgba(212,175,55,.3);
}
.fd2-chip:not(.active):active { transform: scale(.93); }

/* ── Section Labels ── */
.fd2-section-label {
    padding: 14px 20px 6px;
    display: flex; align-items: center; justify-content: space-between;
}
.fd2-section-label span {
    font-size: 13px; font-weight: 700; color: var(--tx);
    letter-spacing: -.01em;
}
.fd2-see-all {
    font-size: 11px; color: var(--gold); font-weight: 600; cursor: pointer;
}

/* ══════════════════════════════════════
   PUBLICATIONS — À la une (horizontal)
   ══════════════════════════════════════ */
.fd2-pub-row {
    display: flex; gap: 12px; overflow-x: auto;
    padding: 0 16px 12px;
    scroll-padding: 0 16px;
    scroll-padding-left: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; scrollbar-width: none;
}
.fd2-pub-row::-webkit-scrollbar { display: none; }

.fd2-pub {
    flex-shrink: 0; width: 260px;
    border-radius: 18px; overflow: hidden;
    background: var(--card); border: 1px solid var(--brd);
    cursor: pointer; transition: transform .2s;
    scroll-snap-align: start;
}
.fd2-pub:active { transform: scale(.97); }

.fd2-pub-cover {
    position: relative; height: 150px; overflow: hidden;
}
.fd2-pub-cover-bg { position: absolute; inset: 0; }
.fd2-pub-cover img { width: 100%; height: 100%; object-fit: cover; }
.fd2-pub-emoji {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    font-size: 44px; z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.fd2-pub-grad {
    position: absolute; bottom: 0; left: 0; right: 0; height: 65%;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 50%, transparent 100%);
    z-index: 2;
}

/* Tag badge (top-left) */
.fd2-pub-tag {
    position: absolute; top: 10px; left: 10px; z-index: 5;
    padding: 3px 10px; border-radius: 8px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; gap: 4px;
}
.fd2-pub-tag i { font-size: 8px; }

/* Info (bottom of cover) */
.fd2-pub-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 10px 14px; z-index: 3;
}
.fd2-pub-title {
    font-size: 14px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Metrics pills */
.fd2-pub-metrics {
    display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;
}
.fd2-pub-metric {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 600;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fd2-pub-metric i { font-size: 8px; }
.fd2-pub-metric.m-promo {
    background: rgba(212,175,55,.12); color: #E8C95A;
    border: 1px solid rgba(212,175,55,.18);
}
.fd2-pub-metric.m-event {
    background: rgba(59,130,246,.12); color: #93BBFD;
    border: 1px solid rgba(59,130,246,.18);
}
.fd2-pub-metric.m-story {
    background: rgba(168,85,247,.12); color: #D4B0FC;
    border: 1px solid rgba(168,85,247,.18);
}

/* Body */
.fd2-pub-body { padding: 10px 14px 12px; }
.fd2-pub-resto-row {
    display: flex; align-items: center; gap: 8px;
}
.fd2-pub-avatar {
    width: 24px; height: 24px; border-radius: 7px;
    background: var(--bg2); border: 1px solid var(--brd);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; overflow: hidden;
}
.fd2-pub-resto-name {
    font-size: 11px; font-weight: 600; color: var(--tx2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.fd2-pub-time {
    font-size: 10px; color: var(--txm); flex-shrink: 0;
}

/* ══════════════════════════════════════
   GRID CARDS — 2 columns
   ══════════════════════════════════════ */
.fd2-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 10px; padding: 0 16px 0;
}
.fd2-card {
    border-radius: 18px; overflow: hidden;
    background: var(--card); border: 1px solid var(--brd);
    cursor: pointer; transition: all .2s;
    -webkit-tap-highlight-color: transparent;
    animation: fd2FadeIn .4s ease both;
}
.fd2-card:active { transform: scale(.97); }
@keyframes fd2FadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.fd2-card .fd2-c-cover { position: relative; height: 130px; overflow: hidden; }
.fd2-card .fd2-c-ph {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    position: relative;
}
.fd2-card .fd2-c-ph-bg { position: absolute; inset: 0; }
.fd2-card .fd2-c-ph-bg.v0 { background: linear-gradient(160deg, #3C2415 0%, #1A0800 60%, #0A0400 100%); }
.fd2-card .fd2-c-ph-bg.v1 { background: linear-gradient(160deg, #1A3020 0%, #081A0A 60%, #040A04 100%); }
.fd2-card .fd2-c-ph-bg.v2 { background: linear-gradient(160deg, #182838 0%, #0A141A 60%, #040810 100%); }
.fd2-card .fd2-c-ph-bg.v3 { background: linear-gradient(160deg, #301838 0%, #140A1A 60%, #080410 100%); }
.fd2-card .fd2-c-ph-bg.v4 { background: linear-gradient(160deg, #382818 0%, #1A140A 60%, #100A04 100%); }
.fd2-card .fd2-c-ph-bg.v5 { background: linear-gradient(160deg, #281A38 0%, #140A1A 60%, #0A0410 100%); }
.fd2-card .fd2-c-ph-bg.v6 { background: linear-gradient(160deg, #381820 0%, #1A0A10 60%, #100408 100%); }
.fd2-card .fd2-c-ph-bg.v7 { background: linear-gradient(160deg, #183028 0%, #0A1A14 60%, #041010 100%); }
.fd2-card .fd2-c-emoji {
    position: relative; z-index: 2; font-size: 36px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.3));
}
.fd2-card .fd2-c-cover img { width: 100%; height: 100%; object-fit: cover; }

.fd2-card .fd2-c-status {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 6px;
    font-size: 9px; font-weight: 600;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fd2-c-st-dot { width: 5px; height: 5px; border-radius: 50%; }
.fd2-card .fd2-c-status.open { background: var(--green); color: #1A1714; }
.fd2-card .fd2-c-status.open .fd2-c-st-dot { background: #1A1714; }
.fd2-card .fd2-c-status.closed { background: var(--red); color: #fff; }
.fd2-card .fd2-c-status.closed .fd2-c-st-dot { background: #fff; }

.fd2-card .fd2-c-fav {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,0,0,.3); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7); font-size: 11px;
}
.fd2-card .fd2-c-rating {
    position: absolute; bottom: 8px; left: 8px; z-index: 3;
    padding: 2px 7px; border-radius: 6px;
    background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
    font-size: 10px; font-weight: 700; color: var(--gold);
    display: flex; align-items: center; gap: 3px;
}
.fd2-card .fd2-c-rating i { font-size: 7px; color: #FFD700; }
.fd2-card .fd2-c-new {
    position: absolute; bottom: 8px; left: 8px; z-index: 3;
    padding: 2px 7px; border-radius: 6px;
    background: rgba(212,175,55,.15); backdrop-filter: blur(6px);
    border: 1px solid rgba(212,175,55,.2);
    font-size: 9px; font-weight: 700; color: var(--gold); font-style: italic;
    display: flex; align-items: center; gap: 3px;
}
.fd2-card .fd2-c-new i { font-size: 6px; }

.fd2-card .fd2-c-body { padding: 8px 10px 10px; }
.fd2-card .fd2-c-name {
    font-size: 14px; font-weight: 700; color: var(--tx);
    line-height: 1.2; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd2-card .fd2-c-meta {
    font-size: 11px; color: var(--tx2); margin-top: 3px;
    display: flex; align-items: center; gap: 4px;
    overflow: hidden; white-space: nowrap;
}
.fd2-card .fd2-c-meta .sep { color: var(--txd); font-size: 8px; }
.fd2-card .fd2-c-bottom { display: flex; align-items: center; margin-top: 8px; }
.fd2-card .fd2-c-tags { display: flex; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
.fd2-card .fd2-c-tag {
    padding: 2px 7px; border-radius: 6px;
    background: var(--bg2); border: 1px solid var(--brd);
    font-size: 9px; color: var(--gold); font-weight: 500; white-space: nowrap;
}
.fd2-c-dlv {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 6px;
    background: linear-gradient(135deg, var(--gold), #E8C95A);
    color: #1A1714; font-weight: 700; font-size: 9px; white-space: nowrap;
}
.fd2-c-dlv i { font-size: 8px; }

/* Skeleton */
.fd2-skel-card {
    border-radius: 18px; height: 210px;
    background: var(--card); border: 1px solid var(--brd);
    animation: fd2Pulse 1.5s ease-in-out infinite;
}
@keyframes fd2Pulse { 0%,100%{opacity:.4} 50%{opacity:.7} }

/* Empty */
.fd2-empty { text-align: center; padding: 32px 16px 0; }
.fd2-empty-icon {
    width: 64px; height: 64px; margin: 0 auto 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--bg2), var(--card));
    border: 2px solid var(--brd);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--txm);
}
.fd2-empty-title { font-size: 16px; font-weight: 700; color: var(--tx); margin-bottom: 6px; }
.fd2-empty-text { font-size: 13px; color: var(--txm); line-height: 1.5; max-width: 280px; margin: 0 auto; }

/* ── Responsive ── */
@media(min-width:640px) {
    .fd2-grid { gap: 12px; }
    .fd2-pub { width: 280px; }
}
@media(min-width:900px) {
    .fd2-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 960px; margin: 0 auto; }
    .fd2-filters { max-width: 960px; margin-left: auto; margin-right: auto; }
    .fd2-section-label { max-width: 960px; margin-left: auto; margin-right: auto; }
}
@media(min-width:1200px) {
    .fd2-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; }
}

/* ── Light Theme ── */
[data-theme="arctic-light"] .fd2-card { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="arctic-light"] .fd2-card .fd2-c-name { color: #1A1714; }
[data-theme="arctic-light"] .fd2-card .fd2-c-meta { color: #6B6355; }
[data-theme="arctic-light"] .fd2-card .fd2-c-tag { background: #F5F0E8; border-color: rgba(0,0,0,.06); }
[data-theme="arctic-light"] .fd2-card .fd2-c-ph-bg { opacity: .55; }
[data-theme="arctic-light"] .fd2-pub { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="arctic-light"] .fd2-skel-card { background: #f0ede8; border-color: rgba(0,0,0,.06); }
[data-theme="arctic-light"] .fd2-chip { background: #fff; border-color: rgba(0,0,0,.08); color: #6B6355; }





/* ═══ COUNTRY CODE PICKER ═══ */
.av2-phone-prefix{cursor:pointer;transition:all .2s}
.av2-phone-prefix:active{transform:scale(.95);opacity:.7}
.cc-picker-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:10000;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .3s}
.cc-picker-overlay.cc-visible{opacity:1}
.cc-picker-sheet{background:var(--card);border-radius:24px 24px 0 0;width:100%;max-width:480px;max-height:70vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.cc-visible .cc-picker-sheet{transform:translateY(0)}
.cc-picker-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px}
.cc-picker-title{font-size:18px;font-weight:700;color:var(--tx)}
.cc-picker-close{width:32px;height:32px;border-radius:10px;background:var(--bg2);border:none;color:var(--tx2);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cc-picker-search-wrap{padding:0 20px 12px;display:flex;align-items:center;gap:10px;background:var(--bg2);margin:0 16px;border-radius:12px;padding:10px 14px}
.cc-picker-search-wrap i{color:var(--tx3);font-size:14px}
.cc-picker-search{flex:1;border:none;background:none;color:var(--tx);font-size:15px;outline:none}
.cc-picker-search::placeholder{color:var(--tx3)}
.cc-picker-list{overflow-y:auto;padding:8px 0 env(safe-area-inset-bottom,20px);flex:1}
.cc-picker-item{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;transition:background .15s}
.cc-picker-item:active{background:var(--hov)}
.cc-picker-item.cc-active{background:rgba(255,55,95,.08)}
.cc-flag{font-size:24px;width:32px;text-align:center}
.cc-name{flex:1;font-size:15px;font-weight:500;color:var(--tx)}
.cc-code{font-size:14px;font-weight:600;color:var(--tx2);min-width:50px;text-align:right}
.cc-check{color:var(--ac);font-size:14px;margin-left:4px}

/* ═══ FAVORITES PAGE — Approved Gold Design ═══ */
.fav-page{padding-bottom:0}
.fav-hdr2{display:flex;align-items:center;gap:12px;padding:14px 16px 10px;position:sticky;top:0;z-index:10;background:var(--bg-glass,rgba(10,10,10,.92));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.fav-hdr2-title{flex:1;font-family:var(--font-display,'Playfair Display',Georgia,serif);font-size:17px;font-weight:600;color:var(--tx);letter-spacing:.02em}
.fav-count2{background:var(--gold-10);border:1px solid var(--gold-25);color:var(--gold-l);font-size:12px;font-weight:700;min-width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;letter-spacing:.03em}
.fav-list2{display:flex;flex-direction:column;gap:14px;padding:6px 16px 0}
.fav-card2{border-radius:20px;background:var(--card);border:1px solid var(--brd);overflow:hidden;box-shadow:var(--sh);cursor:pointer;animation:favCardIn .45s cubic-bezier(.4,0,.2,1) both}
.fav-card2:active{transform:scale(.98)}
@keyframes favCardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fav-card2:nth-child(2){animation-delay:.07s}.fav-card2:nth-child(3){animation-delay:.14s}.fav-card2:nth-child(4){animation-delay:.21s}.fav-card2:nth-child(5){animation-delay:.28s}
.fav-card2-vis{position:relative;width:100%;height:170px;overflow:hidden}
.fav-card2-vis img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.fav-card2:hover .fav-card2-vis img{transform:scale(1.04)}
.fav-card2-grad{position:absolute;bottom:0;left:0;right:0;height:65%;background:linear-gradient(to top,rgba(10,10,10,.7),transparent);pointer-events:none}
.fav-card2-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--card2),var(--bg))}
.fav-card2-ph span{font-size:44px}
.fav-card2-badge{position:absolute;top:14px;left:14px;padding:5px 12px;border-radius:10px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:6px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:2}
.fav-card2-badge.open{background:rgba(52,199,89,.15);color:#34C759;border:1px solid rgba(52,199,89,.2)}
.fav-card2-badge.closed{background:rgba(255,59,48,.12);color:#FF3B30;border:1px solid rgba(255,59,48,.15)}
.fav-card2-heart{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:12px;background:rgba(0,0,0,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:16px;cursor:pointer;transition:all .25s}
.fav-card2-heart:active{transform:scale(.82);background:rgba(212,175,55,.2)}
.fav-card2-stars{position:absolute;bottom:14px;right:14px;z-index:2;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);padding:5px 11px;border-radius:10px;font-size:12px;font-weight:700;color:var(--gold-l);display:flex;align-items:center;gap:5px}
.fav-card2-nameov{position:absolute;bottom:14px;left:16px;z-index:2;font-family:var(--font-display,'Playfair Display',Georgia,serif);font-size:19px;font-weight:600;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);max-width:60%;line-height:1.2}
.fav-card2-body{padding:14px 16px 16px}
.fav-card2-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.fav-card2-tag{background:var(--gold-10);color:var(--gold-l);font-size:11px;font-weight:600;padding:4px 11px;border-radius:8px;letter-spacing:.02em}
.fav-card2-meta{display:flex;align-items:center;gap:14px;color:var(--txm);font-size:12px;font-weight:500}
.fav-card2-dlv{display:flex;align-items:center;gap:5px;color:var(--gold)}
.fav-card2-dist{display:flex;align-items:center;gap:5px}
.fav-card2-sep{width:3px;height:3px;border-radius:50%;background:var(--txd)}
.fav-card2-loading{opacity:.7}
.fav-shimmer{animation:favShimmer 1.5s infinite ease-in-out}
@keyframes favShimmer{0%,100%{opacity:.5}50%{opacity:.8}}
.fav-remove-mini{background:none;border:1px solid var(--gold-25);color:var(--gold);font-size:12px;padding:6px 14px;border-radius:10px;cursor:pointer;margin-top:8px;display:flex;align-items:center;gap:6px;transition:all .2s}
.fav-remove-mini:active{transform:scale(.92);background:var(--gold-10)}
.fav-empty2{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;padding:40px 28px;text-align:center}
.fav-empty2-ring{width:100px;height:100px;border-radius:50%;background:var(--gold-10);border:1.5px solid var(--gold-25);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.fav-empty2-icon{font-size:40px;color:var(--gold);opacity:.6}
.fav-empty2-title{font-family:var(--font-display,'Playfair Display',Georgia,serif);font-size:22px;font-weight:600;color:var(--tx);margin-bottom:10px}
.fav-empty2-desc{font-size:14px;color:var(--txm);max-width:260px;line-height:1.6;margin-bottom:28px}
.fav-empty2-btn{background:linear-gradient(135deg,var(--gold-dk),var(--gold),var(--gold-l));color:#0A0A0A;border:none;border-radius:14px;padding:14px 30px;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:9px;box-shadow:0 4px 20px var(--gold-25);letter-spacing:.02em;transition:all .2s}
.fav-empty2-btn:active{transform:scale(.96)}
.pv2-stat-click{cursor:pointer;transition:all .2s;border-radius:12px}
.pv2-stat-click:active{transform:scale(.92);background:var(--hov)}

/* ── Registration Success Screen (matches maquette-auth.html PHONE 4) ── */
.reg-success-wrap{text-align:center;padding:28px 16px 20px}
.reg-success-ring{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#D4AF37,#E8C95A);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:regSuccessPulse 2s ease infinite;box-shadow:0 8px 32px rgba(212,175,55,.35)}
@keyframes regSuccessPulse{0%,100%{box-shadow:0 8px 32px rgba(212,175,55,.35)}50%{box-shadow:0 8px 32px rgba(212,175,55,.15),0 0 0 16px rgba(212,175,55,0)}}
.reg-success-check{font-size:34px;color:#1A1714}
.reg-success-title{font-size:20px;font-weight:800;color:var(--tx);margin-bottom:6px}
.reg-success-desc{font-size:13px;color:var(--txm);line-height:1.6;margin-bottom:20px}
.reg-success-features{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;text-align:left}
.reg-success-feat{display:flex;align-items:center;gap:10px;background:var(--bg,#0D0B08);border:1px solid var(--brd,rgba(212,175,55,.10));border-radius:12px;padding:12px 14px}
.reg-success-feat-icon{width:30px;height:30px;min-width:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px}
.reg-success-feat-icon.gold{background:rgba(212,175,55,.12);color:var(--gold,#D4AF37)}
.reg-success-feat-icon.green{background:rgba(52,199,89,.12);color:var(--green,#34C759)}
.reg-success-feat-icon.blue{background:rgba(10,132,255,.12);color:#0A84FF}
.reg-success-feat-text{font-size:12px;font-weight:600;color:var(--tx)}
.reg-success-feat-sub{font-size:10px;color:var(--txm);margin-top:2px}
.reg-success-btn{width:100%;padding:16px;border-radius:16px;border:none;background:linear-gradient(135deg,var(--gold,#D4AF37),var(--gold-l,#E8C95A));color:#1A1714;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body,'Inter',sans-serif);transition:all .2s;box-shadow:0 4px 20px rgba(212,175,55,.35)}
.reg-success-btn:active{transform:scale(.98)}

/* ═══════════════════════════════════════════════════════════════
   DEFINITIVE MOBILE BOTTOM SPACING v2.5.71
   Uses an in-flow physical DOM element (#client-bottom-spacer)
   placed at the end of #client-content.
   Spacer height = 60px (nav) + safe-area + 16px (visual gap) = 76px.
   The fixed bottom navigation bar (60px) sits in front of the spacer.
   All page content ends cleanly 16px ABOVE the navigation bar.
   No content can ever be cut off, and no excessive blank space.
   ═══════════════════════════════════════════════════════════════ */
#client-bottom-spacer {
    height: calc(var(--nav, 60px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
    display: block !important;
}

@media (min-width: 768px) {
    #client-bottom-spacer {
        display: none !important;
    }
}

#client-app.map-fullscreen #client-bottom-spacer {
    display: none !important;
}

#view-client-restaurant:not(.hidden) ~ #client-bottom-spacer {
    display: none !important;
}

/* Ensure mobile nav bar is firmly pinned at bottom on mobile */
@media (max-width: 767px) {
    #client-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--nav, 60px) !important;
        z-index: 50 !important;
    }
    #client-content {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}