/* ============================================================
   GLOWRIFI 2.2 — Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --pink:          #FF6B8A;
  --pink-light:    #FFF0F3;
  --pink-border:   #FFD6DF;
  --green:         #00A878;
  --green-light:   #E6F7F4;
  --white:         #FFFFFF;
  --bg:            #F4F5F7;
  --border:        #E8E8E8;
  --border-dark:   #D0D0D0;
  --text-primary:  #1A1A1A;
  --text-secondary:#565656;
  --text-muted:    #909090;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.07);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.12);
  --nav-h: 72px;
  --sb-w: 220px;
  --sb-col: 60px;
  --max-w: 1200px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font);background:var(--white);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;font-size:14px}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--white);border-bottom:1px solid var(--border);height:var(--nav-h);display:flex;align-items:center;padding:0 1.5rem;gap:1.25rem}
.nav.scrolled{box-shadow:var(--shadow-xs)}
.nav-logo{font-size:1.35rem;font-weight:700;color:var(--text-primary);text-decoration:none;letter-spacing:-.02em;flex-shrink:0}
.nav-logo span{color:var(--pink)}
.nav-search{flex:1;max-width:500px;display:flex;align-items:center;border:1.5px solid var(--border-dark);border-radius:var(--r-pill);background:var(--white);overflow:hidden;height:42px;transition:border-color .18s}
.nav-search:focus-within{border-color:var(--text-primary)}
.nav-search-input{flex:1;border:none;outline:none;padding:0 1rem;font-size:.875rem;color:var(--text-primary);font-family:var(--font);background:transparent}
.nav-search-input::placeholder{color:var(--text-muted)}
.nav-search-divider{width:1px;height:20px;background:var(--border);flex-shrink:0}
.nav-search-loc{padding:0 .9rem;font-size:.82rem;color:var(--text-secondary);white-space:nowrap;cursor:pointer}
.nav-search-btn{width:38px;height:38px;border-radius:var(--r-pill);background:var(--pink);color:var(--white);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:2px;font-size:.82rem;transition:background .18s}
.nav-search-btn:hover{background:#e05070}
.nav-spacer{flex:1}
.nav-links{display:flex;align-items:center;gap:.25rem}
.nav-link{padding:.4rem .8rem;border-radius:var(--r-pill);font-size:.84rem;font-weight:500;color:var(--text-secondary);text-decoration:none;transition:all .18s;white-space:nowrap}
.nav-link:hover{background:var(--bg);color:var(--text-primary)}
.nav-link.primary{background:var(--text-primary);color:var(--white)}
.nav-link.primary:hover{background:#333}
.nav-link.outline{border:1.5px solid var(--border-dark);color:var(--text-primary)}
.nav-link.outline:hover{border-color:var(--text-primary)}

/* ── PUBLIC PAGE WRAPPER ── */
.page-wrapper{padding-top:var(--nav-h);min-height:100vh}
.container{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}

/* ── SIDEBAR SYSTEM ── */
.sidebar{
  position:fixed;top:var(--nav-h);left:0;bottom:0;z-index:200;
  width:var(--sb-w);background:#111;
  display:flex;flex-direction:column;
  transition:width .22s cubic-bezier(.4,0,.2,1);overflow:hidden;
  /* Ensure toggle is always visible at bottom */
  min-height:0;
}
.sidebar.collapsed{width:var(--sb-col)}

/* Content wrapper — sits right of sidebar, below nav */
.dash-wrap{
  margin-left:var(--sb-w);
  padding-top:var(--nav-h);
  min-height:100vh;
  background:var(--bg);
  transition:margin-left .22s cubic-bezier(.4,0,.2,1);
}
.sidebar.collapsed~.dash-wrap{margin-left:var(--sb-col)}
.dash-main{padding:1.75rem}

/* Pending-approval banner — sits between fixed nav/sidebar and dash-wrap content */
.prov-pending-banner{
  margin-top:var(--nav-h); margin-left:var(--sb-w);
  display:flex; align-items:flex-start; gap:.6rem;
  background:#FFF8E1; border-bottom:1px solid #FDE68A;
  padding:.7rem 1.5rem; transition:margin-left .22s cubic-bezier(.4,0,.2,1);
}
.sidebar.collapsed~.prov-pending-banner{margin-left:var(--sb-col)}
.ppb-icon{font-size:1rem;flex-shrink:0;line-height:1.4}
.ppb-text{font-size:.82rem;color:#92400E;line-height:1.5}
.ppb-text strong{color:#78350F}
.prov-pending-banner.rejected{background:#FDECEA;border-bottom-color:#F5C2BE}
.prov-pending-banner.rejected .ppb-text{color:#B00020}
.prov-pending-banner.rejected .ppb-text strong{color:#8B0000}

/* Sidebar profile */
.sb-profile{padding:1rem;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:.75rem;min-height:68px;overflow:hidden}
.sb-ava{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#FFD6DF,var(--pink));display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;color:#fff}
.sb-info{white-space:nowrap;overflow:hidden;transition:opacity .15s,max-width .22s;max-width:160px}
.sidebar.collapsed .sb-info{opacity:0;max-width:0}
.sb-name{font-size:.82rem;font-weight:600;color:#fff}
.sb-type{font-size:.68rem;color:rgba(255,255,255,.4);margin-top:.1rem}

/* Nav items */
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:.5rem 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;min-height:0}
.sb-nav::-webkit-scrollbar{display:none}
.sb-section{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);padding:.75rem 1rem .3rem;white-space:nowrap;transition:opacity .15s}
.sidebar.collapsed .sb-section{opacity:0;pointer-events:none}
.sb-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;color:rgba(255,255,255,.55);font-size:.84rem;font-weight:500;cursor:pointer;text-decoration:none;transition:background .15s,color .15s;white-space:nowrap;position:relative;border-left:3px solid transparent}
.sb-item:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-item.active{background:rgba(255,107,138,.14);color:#fff;border-left-color:var(--pink)}
.sb-item-icon{width:18px;text-align:center;flex-shrink:0;font-size:1rem;line-height:1}
.sb-item-label{transition:opacity .15s;white-space:nowrap;flex:1;overflow:hidden}
.sidebar.collapsed .sb-item-label{opacity:0;width:0}
.sb-badge{background:var(--pink);color:#fff;font-size:.62rem;font-weight:700;padding:.1rem .45rem;border-radius:var(--r-pill);flex-shrink:0;transition:opacity .15s}
.sidebar.collapsed .sb-badge{opacity:0}
.sidebar.collapsed .sb-item:hover::after{content:attr(data-label);position:absolute;left:calc(var(--sb-col) + 8px);top:50%;transform:translateY(-50%);background:#333;color:#fff;font-size:.75rem;font-weight:500;padding:.35rem .75rem;border-radius:var(--r-sm);white-space:nowrap;z-index:300;pointer-events:none;box-shadow:var(--shadow-md)}
.sb-toggle{
  padding:.55rem 1rem;
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.25);
  display:flex;align-items:center;gap:.75rem;
  cursor:pointer;
  color:rgba(255,255,255,.4);
  font-size:.72rem;
  transition:color .15s,background .15s;
  user-select:none;
  flex-shrink:0; /* never shrink — always visible */
}
.sb-toggle:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.06)}
.sb-toggle-icon{width:18px;text-align:center;flex-shrink:0;font-size:.8rem;transition:transform .22s}
.sidebar.collapsed .sb-toggle-icon{transform:rotate(180deg)}
.sb-toggle-label{transition:opacity .15s;white-space:nowrap;font-size:.72rem;letter-spacing:.03em}
.sidebar.collapsed .sb-toggle-label{opacity:0}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.25rem;border-radius:var(--r-pill);font-size:.875rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:all .18s;font-family:var(--font);line-height:1;white-space:nowrap}
.btn-primary{background:var(--text-primary);color:var(--white)}
.btn-primary:hover{background:#333}
.btn-pink{background:var(--pink);color:var(--white)}
.btn-pink:hover{background:#e05070}
.btn-outline{border:1.5px solid var(--border-dark);color:var(--text-primary);background:var(--white)}
.btn-outline:hover{border-color:var(--text-primary)}
.btn-ghost{color:var(--text-secondary);background:transparent}
.btn-ghost:hover{background:var(--bg);color:var(--text-primary)}
.btn-green{background:var(--green);color:var(--white)}
.btn-green:hover{background:#008f66}
.btn-danger{background:#FFF0F0;color:#CC3333;border:1px solid #FFCACA}
.btn-danger:hover{background:#CC3333;color:#fff}
.btn-sm{padding:.38rem .85rem;font-size:.78rem}
.btn-lg{padding:.8rem 1.75rem;font-size:.95rem}
.btn-full{width:100%;justify-content:center}

/* ── PANEL / CARD ── */
.panel{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.panel-header{padding:.875rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.panel-title{font-size:.875rem;font-weight:700;color:var(--text-primary)}
.panel-action{font-size:.78rem;color:var(--pink);font-weight:500;cursor:pointer;text-decoration:none}
.panel-body{padding:1.1rem 1.25rem}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.venue-card{cursor:pointer}
.venue-card-img-placeholder{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#f5e6ea,#fde8ee);display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.venue-card-body{padding:.7rem .85rem .85rem}
.venue-card-name{font-size:.9rem;font-weight:600;color:var(--text-primary);margin-bottom:.15rem}
.venue-card-type{font-size:.72rem;color:var(--text-muted);margin-bottom:.25rem}
.venue-card-meta{font-size:.72rem;color:var(--text-secondary);margin-bottom:.25rem;line-height:1.4}

/* ── STAT CARD ── */
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem 1.25rem}
.stat-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.65rem}
.stat-icon{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.stat-change{font-size:.7rem;font-weight:600;padding:.15rem .45rem;border-radius:var(--r-pill)}
.stat-change.up{background:var(--green-light);color:var(--green)}
.stat-change.down{background:#FFF0F0;color:#CC3333}
.stat-num{font-size:1.65rem;font-weight:700;color:var(--text-primary);letter-spacing:-.03em;line-height:1}
.stat-lbl{font-size:.73rem;color:var(--text-muted);margin-top:.3rem}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.25rem}

/* ── TABLE ── */
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);padding:.6rem 1rem;text-align:left;border-bottom:1.5px solid var(--border);background:var(--bg);white-space:nowrap}
.data-table td{padding:.8rem 1rem;font-size:.84rem;color:var(--text-secondary);border-bottom:1px solid var(--border);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:#fafafa}
.td-name{font-weight:600;color:var(--text-primary)!important}
.td-muted{font-size:.73rem;color:var(--text-muted)!important;margin-top:.12rem}

/* ── STATUS ── */
.status{display:inline-flex;align-items:center;gap:.25rem;padding:.22rem .65rem;border-radius:var(--r-pill);font-size:.72rem;font-weight:600;white-space:nowrap}
.status-pending{background:#FFF4E6;color:#C07000}
.status-confirmed{background:var(--green-light);color:var(--green)}
.status-completed{background:#EEF2FF;color:#3355CC}
.status-cancelled{background:#FFF0F0;color:#CC3333}
.status-active{background:var(--green-light);color:var(--green)}
.status-suspended{background:#FFF0F0;color:#CC3333}
.status-pending-review{background:#FFF4E6;color:#C07000}

/* ── ACTION BTNS ── */
.act{padding:.28rem .7rem;border-radius:var(--r-pill);font-size:.73rem;font-weight:600;cursor:pointer;border:1.5px solid;transition:all .15s;font-family:var(--font);line-height:1.4}
.act-accept{border-color:var(--green);color:var(--green);background:var(--green-light)}
.act-accept:hover{background:var(--green);color:#fff}
.act-reject{border-color:var(--border-dark);color:var(--text-muted);background:transparent}
.act-reject:hover{border-color:#CC3333;color:#CC3333}
.act-view{border-color:var(--border-dark);color:var(--text-primary);background:transparent}
.act-view:hover{background:var(--bg)}
.act-danger{border-color:#FFCACA;color:#CC3333;background:#FFF0F0}
.act-danger:hover{background:#CC3333;color:#fff}

/* ── TABS ── */
.tabs{display:flex;border-bottom:1.5px solid var(--border);margin-bottom:1.5rem;overflow-x:auto}
.tab{padding:.75rem 1.1rem;font-size:.875rem;font-weight:500;color:var(--text-muted);border-bottom:2.5px solid transparent;cursor:pointer;transition:all .18s;white-space:nowrap;margin-bottom:-1.5px;text-decoration:none}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--text-primary);border-bottom-color:var(--text-primary);font-weight:600}
.stab{padding:.38rem .9rem;border-radius:var(--r-pill);font-size:.8rem;font-weight:500;cursor:pointer;border:1.5px solid var(--border-dark);color:var(--text-muted);background:var(--white);transition:all .15s;font-family:var(--font)}
.stab:hover{color:var(--text-primary);border-color:var(--text-primary)}
.stab.active{background:var(--text-primary);color:#fff;border-color:var(--text-primary)}

/* ── FORM ── */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.78rem;font-weight:500;color:var(--text-secondary);margin-bottom:.35rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.65rem .9rem;border:1.5px solid var(--border-dark);border-radius:var(--r-md);font-size:.875rem;color:var(--text-primary);background:var(--white);outline:none;font-family:var(--font);transition:border-color .18s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--text-primary);box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.form-group textarea{resize:vertical;min-height:85px;line-height:1.6}
.filter-sel{padding:.42rem .85rem;border:1.5px solid var(--border-dark);border-radius:var(--r-pill);font-size:.82rem;color:var(--text-primary);background:var(--white);cursor:pointer;outline:none;font-family:var(--font)}
.search-input{padding:.42rem .9rem;border:1.5px solid var(--border-dark);border-radius:var(--r-pill);font-size:.84rem;color:var(--text-primary);outline:none;font-family:var(--font)}
.search-input:focus{border-color:var(--text-primary)}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem}

/* ── TOGGLE ── */
.toggle{width:38px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.toggle::after{content:'';width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle.on{background:var(--green)}
.toggle.on::after{left:20px}

/* ── BADGE ── */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.18rem .55rem;border-radius:var(--r-pill);font-size:.68rem;font-weight:600;line-height:1.4}
.badge-verified{background:var(--green-light);color:var(--green)}
.badge-new{background:#FFF4E6;color:#E07B00}
.badge-top{background:var(--pink-light);color:var(--pink)}

/* ── TOAST ── */
.toast{position:fixed;bottom:2.5rem;left:50%;transform:translateX(-50%) translateY(150%);background:var(--text-primary);color:var(--white);padding:.7rem 1.4rem;border-radius:var(--r-pill);font-size:.875rem;font-weight:500;box-shadow:var(--shadow-lg);z-index:99999;transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:.5rem;white-space:nowrap;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast-icon{color:var(--green)}

/* ── MISC COMPONENTS ── */
.breadcrumb{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--text-muted);padding:.75rem 0}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--text-primary)}
.breadcrumb-sep{color:var(--border-dark)}
.info-tip{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--border);color:var(--text-muted);font-size:.62rem;font-weight:700;cursor:help;position:relative}
.info-tip[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:var(--text-primary);color:var(--white);font-size:.72rem;font-weight:400;padding:.35rem .65rem;border-radius:var(--r-sm);white-space:nowrap;z-index:100;pointer-events:none}
.close-btn{width:34px;height:34px;border-radius:50%;background:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--text-secondary);transition:all .18s}
.close-btn:hover{background:var(--border);color:var(--text-primary)}
.rating-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.82rem;font-weight:600;color:var(--text-primary)}
.rating-badge::before{content:'★';color:#FFB800}
.dash-page-title{font-size:1.2rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}
.dash-page-sub{font-size:.8rem;color:var(--text-muted);margin-top:.2rem}
.filter-bar{display:flex;align-items:center;gap:.65rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.status-tabs{display:flex;gap:.4rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.pagination{padding:.875rem 1.25rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:.8rem;color:var(--text-muted)}
.page-btns{display:flex;gap:.3rem}
.section-heading{font-size:1.25rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}
.filter-strip{display:flex;gap:.45rem;overflow-x:auto;padding:.2rem 0;scrollbar-width:none}
.filter-strip::-webkit-scrollbar{display:none}
.filter-pill{display:flex;align-items:center;gap:.3rem;padding:.45rem .9rem;border-radius:var(--r-pill);border:1.5px solid var(--border-dark);background:var(--white);font-size:.8rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .18s;white-space:nowrap;flex-shrink:0}
.filter-pill:hover{border-color:var(--text-primary);color:var(--text-primary)}
.filter-pill.active{background:var(--text-primary);border-color:var(--text-primary);color:var(--white)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal{background:var(--white);border-radius:var(--r-xl);padding:1.75rem;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:fadeUp .22s ease}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem}
.modal-title{font-size:1rem;font-weight:700;color:var(--text-primary)}
.drawer{position:fixed;top:0;right:-480px;bottom:0;width:480px;background:var(--white);border-left:1px solid var(--border);z-index:600;transition:right .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.drawer.open{right:0}
.drawer-head{padding:1.1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.75rem}
.drawer-body{flex:1;overflow-y:auto;padding:1.5rem}
.drawer-foot{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;gap:.65rem}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:599}

/* ── FOOTER ── */
.footer{background:var(--text-primary);color:rgba(255,255,255,.55);padding:3rem 0 2rem;margin-top:5rem;border-top:4px solid var(--pink)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-logo{font-size:1.35rem;font-weight:700;color:var(--white);margin-bottom:.75rem;letter-spacing:-.02em}
.footer-logo span{color:var(--pink)}
.footer-desc{font-size:.8rem;line-height:1.7;max-width:240px}
.footer-col h4{font-size:.8rem;font-weight:600;color:var(--white);margin-bottom:.85rem}
.footer-col a{display:block;font-size:.8rem;color:rgba(255,255,255,.5);text-decoration:none;margin-bottom:.45rem;transition:color .18s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.76rem}
.footer-bottom a{color:rgba(255,255,255,.4);text-decoration:none}

/* ── USER ACCOUNT SIDEBAR ── */
.acc-layout{display:grid;grid-template-columns:220px 1fr;gap:1.75rem;padding:2rem 0 4rem;align-items:start}
.acc-sidebar{position:sticky;top:calc(var(--nav-h) + 1rem)}
.acc-profile-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;text-align:center;margin-bottom:1rem}
.acc-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#FFD6DF,var(--pink));margin:0 auto .75rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#fff}
.acc-nav{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.acc-nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.1rem;font-size:.85rem;color:var(--text-secondary);text-decoration:none;transition:all .15s;border-left:3px solid transparent;font-weight:500}
.acc-nav-item:hover{background:var(--bg);color:var(--text-primary)}
.acc-nav-item.active{background:var(--bg);color:var(--text-primary);border-left-color:var(--pink);font-weight:600}
.acc-nav-icon{width:18px;text-align:center;font-size:1rem}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,138,.4)}50%{box-shadow:0 0 0 7px rgba(255,107,138,0)}}
.fade-up{animation:fadeUp .3s ease both}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:3px}

/* ============================================================
   GOOGLE MAPS INTEGRATION — v2.4
   ============================================================ */

/* ── Map container ── */
.gmap-container {
  width: 100%; border-radius: var(--r-lg);
  overflow: hidden; border: 1px solid var(--border);
  position: relative; background: #E8F0E8;
}
.gmap-container iframe { display: block; width: 100%; border: none; }

/* ── Location permission banner ── */
.location-banner {
  background: #EEF4FF; border: 1px solid #C7DAFF;
  border-radius: var(--r-lg); padding: .85rem 1.1rem;
  display: flex; align-items: center; gap: .85rem;
  font-size: .84rem; color: var(--text-primary);
}
.location-banner-icon { font-size: 1.3rem; flex-shrink: 0; }
.location-banner-text { flex: 1; line-height: 1.5; }
.location-banner-text strong { color: var(--text-primary); }
.location-banner-text small { color: var(--text-muted); display: block; font-size: .72rem; margin-top: .1rem; }
.location-banner .btn { flex-shrink: 0; }
.location-banner.granted { background: var(--green-light); border-color: #A8E6D4; }
.location-banner.denied  { background: #FFF4E6; border-color: #FFD699; }

/* ── Map + list split layout ── */
.map-split {
  display: grid; grid-template-columns: 380px 1fr;
  gap: 0; height: calc(100vh - var(--nav-h) - 56px);
  overflow: hidden;
}
.map-split-list {
  overflow-y: auto; border-right: 1px solid var(--border);
  background: var(--white);
}
.map-split-map { position: relative; }
.map-split-map #mainMap { width: 100%; height: 100%; }

/* ── Provider pin popup ── */
.map-popup {
  position: absolute; z-index: 100;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1rem;
  box-shadow: var(--shadow-lg); width: 260px;
  animation: fadeUp .2s ease;
  pointer-events: all;
}
.map-popup-close {
  position: absolute; top: .5rem; right: .5rem;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); border: none; cursor: pointer;
  font-size: .75rem; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
.map-popup-img { width: 100%; aspect-ratio: 16/9; border-radius: var(--r-md); background: linear-gradient(135deg,#f5e6ea,#fde8ee); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: .65rem; }
.map-popup-name { font-weight: 700; font-size: .9rem; color: var(--text-primary); margin-bottom: .2rem; }
.map-popup-meta { font-size: .75rem; color: var(--text-muted); margin-bottom: .5rem; }
.map-popup-distance { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; color: var(--pink); background: var(--pink-light); padding: .18rem .55rem; border-radius: var(--r-pill); margin-bottom: .65rem; }

/* ── Distance badge ── */
.distance-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 600; color: #3366CC;
  background: #EEF2FF; padding: .18rem .55rem;
  border-radius: var(--r-pill);
}

/* ── Provider list card (map mode) ── */
.map-list-card {
  padding: 1rem; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
  display: flex; gap: .85rem; align-items: flex-start;
  text-decoration: none;
}
.map-list-card:hover, .map-list-card.highlighted { background: #FFF8FC; }
.map-list-card.highlighted { border-left: 3px solid var(--pink); }
.map-list-img { width: 64px; height: 64px; border-radius: var(--r-md); background: linear-gradient(135deg,#f5e6ea,#fde8ee); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.map-list-info { flex: 1; min-width: 0; }
.map-list-name { font-weight: 700; font-size: .875rem; color: var(--text-primary); margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-list-type { font-size: .72rem; color: var(--text-muted); margin-bottom: .3rem; }
.map-list-meta { display: flex; align-items: center; gap: .5rem; font-size: .72rem; color: var(--text-secondary); flex-wrap: wrap; }

/* ── Near me button ── */
.near-me-btn {
  display: flex; align-items: center; gap: .4rem;
  padding: .42rem .9rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--border-dark); background: var(--white);
  font-size: .82rem; font-weight: 600; color: var(--text-primary);
  cursor: pointer; transition: all .18s; font-family: var(--font);
  white-space: nowrap;
}
.near-me-btn:hover { border-color: var(--pink); color: var(--pink); background: var(--pink-light); }
.near-me-btn.active { background: var(--pink); border-color: var(--pink); color: #fff; }
.near-me-btn .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 1.5s infinite; }

/* ── Map loading overlay ── */
.map-loading {
  position: absolute; inset: 0; background: rgba(255,255,255,.85);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; z-index: 50; border-radius: var(--r-lg);
  font-size: .875rem; color: var(--text-muted); gap: .75rem;
}
.map-spinner {
  width: 32px; height: 32px; border: 3px solid var(--border);
  border-top-color: var(--pink); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Small inline map (provider page) ── */
.provider-map-wrap {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); margin-top: .75rem;
}

/* ============================================================
   GLOWRIFI v2.6 — Real Images + Lightbox
   ============================================================ */

/* ── Real image cards ── */
.venue-card-img {
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.venue-card:hover .venue-card-img { transform:scale(1.04); }
.venue-card-img-wrap { overflow:hidden; position:relative; aspect-ratio:4/3; }
.venue-card-img-wrap .venue-card-img { position:absolute; inset:0; width:100%; height:100%; }

/* Shimmer loading skeleton */
.img-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Provider gallery strip ── */
.gallery-strip {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:1fr 1fr; gap:4px; height:460px;
  border-radius:var(--r-lg); overflow:hidden;
}
.gallery-main { grid-row:1/3; position:relative; overflow:hidden; cursor:pointer; }
.gallery-strip.gallery-empty { grid-template-columns:1fr; }
.gallery-strip.gallery-empty .gallery-main { grid-row:1; cursor:default; }
.gallery-thumb { position:relative; overflow:hidden; cursor:pointer; }
.gallery-img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease, filter .3s ease;
}
.gallery-main:hover .gallery-img,
.gallery-thumb:hover .gallery-img { transform:scale(1.06); filter:brightness(.92); }

/* Overlay on hover */
.gallery-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.18);
  opacity:0; transition:opacity .25s; display:flex; align-items:center; justify-content:center;
}
.gallery-thumb:hover .gallery-overlay,
.gallery-main:hover .gallery-overlay { opacity:1; }
.gallery-overlay-icon { font-size:1.8rem; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

.gallery-see-all {
  position:absolute; bottom:12px; right:12px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.6); border-radius:var(--r-md);
  padding:.45rem 1rem; font-size:.8rem; font-weight:600;
  cursor:pointer; color:var(--text-primary); transition:all .18s; z-index:2;
}
.gallery-see-all:hover { background:#fff; box-shadow:var(--shadow-sm); }

/* ── Lightbox ── */
.lightbox-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.92);
  z-index:9000; display:none; align-items:center; justify-content:center;
  animation:fadeIn .2s ease;
}
.lightbox-overlay.open { display:flex; }
.lightbox-inner { position:relative; max-width:90vw; max-height:90vh; display:flex; align-items:center; gap:0; }
.lightbox-img {
  max-width:80vw; max-height:85vh; object-fit:contain;
  border-radius:var(--r-lg); box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:lbZoomIn .25s cubic-bezier(.175,.885,.32,1.275);
  display:block;
}
@keyframes lbZoomIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }

.lb-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.15); backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,.25); color:#fff;
  font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .18s; z-index:2; user-select:none;
}
.lb-btn:hover { background:rgba(255,255,255,.3); }
.lb-prev { left:-64px; }
.lb-next { right:-64px; }

.lb-close {
  position:fixed; top:1.5rem; right:1.5rem;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.15); backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,.25); color:#fff;
  font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .18s; z-index:9001;
}
.lb-close:hover { background:rgba(255,255,255,.3); transform:rotate(90deg); }

.lb-counter {
  position:fixed; bottom:1.75rem; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:.82rem; font-weight:500; z-index:9001;
  background:rgba(0,0,0,.4); padding:.3rem .85rem; border-radius:var(--r-pill);
}
.lb-caption {
  position:fixed; bottom:3.5rem; left:50%; transform:translateX(-50%);
  color:#fff; font-size:.875rem; font-weight:500; z-index:9001;
  background:rgba(0,0,0,.5); padding:.4rem 1rem; border-radius:var(--r-pill);
  max-width:80vw; text-align:center;
}

/* Thumbnail strip */
.lb-thumbs {
  position:fixed; bottom:1rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.4rem; z-index:9001; padding:.4rem;
  background:rgba(0,0,0,.4); border-radius:var(--r-lg); backdrop-filter:blur(4px);
}
.lb-thumb {
  width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover;
  cursor:pointer; opacity:.55; transition:all .18s; border:2px solid transparent;
}
.lb-thumb:hover { opacity:.85; }
.lb-thumb.active { opacity:1; border-color:#fff; }

/* ── Hero image carousel ── */
.hero-carousel { position:relative; }
.hero-bg-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.18; filter:blur(1px); transition:opacity .5s;
}

/* ── Browse/Search list card with real photo ── */
.vlc-img-real {
  width:160px; min-height:130px; object-fit:cover; flex-shrink:0;
  transition:transform .3s ease;
}
.venue-list-card:hover .vlc-img-real { transform:scale(1.04); }
.vlc-img-wrap { width:160px; overflow:hidden; flex-shrink:0; }

/* ── Provider avatar ── */
.provider-avatar-img {
  width:80px; height:80px; border-radius:50%; object-fit:cover;
  border:3px solid var(--white); box-shadow:var(--shadow-md);
}

/* ── Gallery grid (photos tab) ── */
.gallery-grid-item {
  aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden;
  cursor:pointer; position:relative;
}
.gallery-grid-item img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease, filter .25s;
}
.gallery-grid-item:hover img { transform:scale(1.08); filter:brightness(.88); }
.gallery-grid-item::after {
  content:'🔍'; position:absolute; inset:0; background:rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  opacity:0; transition:opacity .2s;
}
.gallery-grid-item:hover::after { opacity:1; }

/* ── Fade-in for lazy images ── */
.lazy-img { opacity:.01; transition:opacity .5s ease; background:linear-gradient(135deg,#f5e6ea,#fde8ee); }
.lazy-img.loaded { opacity:1; }

/* ── Category banner images ── */
.banner-card-img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.banner-card:hover .banner-card-img { transform:scale(1.06); }
.banner-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 60%);
  display:flex; align-items:flex-end; padding:1.25rem;
}

/* ============================================================
   GLOWRIFI v27 — Pricing, Coupons, Incentives
   ============================================================ */

/* ── Coupon input ── */
.coupon-wrap { display:flex; gap:.5rem; margin-bottom:.75rem; }
.coupon-input {
  flex:1; padding:.6rem .9rem; border:1.5px solid var(--border-dark);
  border-radius:var(--r-md); font-size:.875rem; font-family:var(--font);
  color:var(--text-primary); outline:none; transition:border-color .18s;
}
.coupon-input:focus { border-color:var(--text-primary); }
.coupon-input.applied { border-color:var(--green); background:var(--green-light); }
.coupon-input.invalid { border-color:#CC3333; background:#FFF0F0; }
.coupon-apply-btn {
  padding:.6rem 1rem; border-radius:var(--r-md);
  background:var(--text-primary); color:#fff; border:none;
  font-size:.82rem; font-weight:600; cursor:pointer; font-family:var(--font);
  transition:background .18s; white-space:nowrap;
}
.coupon-apply-btn:hover { background:#333; }
.coupon-success {
  display:flex; align-items:center; gap:.5rem;
  background:var(--green-light); border:1px solid #A8E6D4;
  border-radius:var(--r-md); padding:.5rem .75rem;
  font-size:.78rem; color:var(--green); font-weight:500;
  margin-bottom:.5rem;
}
.coupon-error {
  font-size:.75rem; color:#CC3333; margin-bottom:.5rem;
  display:flex; align-items:center; gap:.3rem;
}

/* ── Advance incentive banner ── */
.advance-incentive-banner {
  background:linear-gradient(135deg,#FFF8E1,#FFF3E0);
  border:1px solid #FFE082; border-radius:var(--r-md);
  padding:.65rem .85rem; font-size:.8rem; color:#7B5800;
  display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem;
  animation:fadeUp .25s ease;
}
.advance-incentive-banner strong { color:#5D4300; }
.advance-save-badge {
  background:#FF6B8A; color:#fff; font-size:.68rem; font-weight:700;
  padding:.15rem .5rem; border-radius:var(--r-pill); margin-left:auto;
  white-space:nowrap;
}

/* ── Price breakdown lines ── */
.price-line { display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:.3rem; }
.price-line .lbl { color:var(--text-secondary); }
.price-line .val { font-weight:500; color:var(--text-primary); }
.price-line.discount .val { color:var(--green); font-weight:600; }
.price-line.advance-disc .val { color:#FF6B8A; font-weight:600; }
.price-line.total { font-size:.95rem; font-weight:700; border-top:1px solid var(--border); padding-top:.5rem; margin-top:.35rem; }
.price-line.total .val { color:var(--text-primary); }
.price-line.advance-split { font-size:.75rem; color:var(--text-muted); padding:.1rem 0; }
.price-line.advance-split .val { color:var(--text-secondary); }

/* ── Coupon card (provider coupons page) ── */
.coupon-card {
  background:var(--white); border:1.5px dashed var(--border-dark);
  border-radius:var(--r-lg); padding:1.1rem 1.25rem;
  display:flex; align-items:center; gap:1rem;
  transition:border-color .18s, box-shadow .18s;
}
.coupon-card:hover { border-color:var(--pink); box-shadow:var(--shadow-xs); }
.coupon-card-code {
  font-family:monospace; font-size:1.05rem; font-weight:700;
  color:var(--text-primary); letter-spacing:.05em;
  background:var(--bg); padding:.3rem .75rem; border-radius:var(--r-md);
  border:1px solid var(--border); flex-shrink:0;
}
.coupon-card-info { flex:1; min-width:0; }
.coupon-card-desc { font-size:.84rem; font-weight:600; color:var(--text-primary); margin-bottom:.2rem; }
.coupon-card-meta { font-size:.75rem; color:var(--text-muted); display:flex; gap:.75rem; flex-wrap:wrap; }
.coupon-card-status { font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:var(--r-pill); }
.coupon-status-active   { background:var(--green-light); color:var(--green); }
.coupon-status-expired  { background:#FFF0F0; color:#CC3333; }
.coupon-status-depleted { background:var(--bg); color:var(--text-muted); }

/* ── Fee waiver badge ── */
.fee-waived { 
  text-decoration:line-through; color:var(--text-muted);
  font-size:.78rem; margin-right:.35rem;
}
.fee-waived-badge {
  background:var(--green-light); color:var(--green);
  font-size:.68rem; font-weight:700; padding:.15rem .5rem; border-radius:var(--r-pill);
}

/* ── Incentive config (provider settings) ── */
.incentive-config {
  background:var(--bg); border-radius:var(--r-lg); padding:1rem 1.1rem;
  border:1px solid var(--border); margin-top:.75rem;
}
.incentive-config-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.75rem; }

/* ── Savings highlight in booking panel ── */
.savings-tag {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.72rem; font-weight:700; color:var(--green);
  background:var(--green-light); padding:.15rem .55rem; border-radius:var(--r-pill);
}


/* ============================================================
   Homepage-specific styles (from index.html inline styles)
   ============================================================ */

/* ── HERO ── */
.hero {
  background: var(--white); padding: 4rem 0 3rem;
  text-align: center; border-bottom: 1px solid var(--border);
}
.hero-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; }
.hero-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--text-primary); letter-spacing: -.03em; line-height: 1.2; margin-bottom: 1rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.hero-title em { color: var(--pink); font-style: normal; }
.hero-sub { font-size: 1rem; color: var(--text-secondary); margin-bottom: 2rem; }

/* Hero search pill — Fresha style */
.hero-search {
  display: flex; align-items: center;
  background: var(--white); border: 2px solid var(--text-primary);
  border-radius: var(--r-pill); overflow: hidden;
  max-width: 640px; width: 100%; margin: 0 auto 2rem; height: 58px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
.hero-search-segment { flex: 1; display: flex; flex-direction: column; padding: .4rem 1.25rem; min-width: 0; cursor: text; }
.hero-search-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.hero-search-val { font-size: .9rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-search-sep { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }
.hero-search-go {
  width: 52px; height: 52px; margin: 2px; border-radius: var(--r-pill);
  background: var(--pink); color: var(--white); border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0; transition: background var(--transition);
}
.hero-search-go:hover { background: #e05070; }

/* Category circles */
.categories-section { padding: 2.5rem 0; border-bottom: 1px solid var(--border); background: var(--white); }
.categories-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.category-item { display: flex; flex-direction: column; align-items: center; gap: .65rem; cursor: pointer; text-decoration: none; }
.category-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer; text-decoration: none; padding: .75rem .65rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--white); transition: all .15s; }
.category-item:hover { border-color: var(--pink-border); background: var(--pink-light); }
.category-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; transition: all var(--transition); border: none;
}
.category-item:hover .category-circle { background: rgba(255,107,138,.12); transform: translateY(-2px); }
.category-label { font-size: .9rem; font-weight: 600; color: var(--text-primary); text-align: center; }

/* Featured section */
.featured-section { padding: 3rem 0; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.section-heading { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); letter-spacing: -.02em; }
.venues-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

/* How it works */
.how-section { background: var(--bg); padding: 3.5rem 0; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
.step-item { text-align: center; }
.step-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--pink-light); color: var(--pink);
  font-size: 1.3rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
}
.step-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: .4rem; }
.step-desc { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }

/* Popular categories banner */
.banner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.banner-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 3/2; cursor: pointer; text-decoration: none;
  display: block;
}
.banner-card-bg {
  width: 100%; height: 100%;
  display: flex; align-items: flex-end; padding: 1.25rem;
}
.banner-card-label { font-size: 1rem; font-weight: 700; color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,.4); }

/* App download section */
.app-section { padding: 4rem 0; background: var(--text-primary); color: var(--white); }
.app-section-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.app-title { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: .75rem; }
.app-sub { font-size: .95rem; color: rgba(255,255,255,.65); margin-bottom: 1.75rem; line-height: 1.6; }
.app-stores { display: flex; gap: .75rem; }
.app-store-btn {
  padding: .75rem 1.4rem; border-radius: var(--r-md);
  border: 1.5px solid rgba(255,255,255,.3);
  color: var(--white); text-decoration: none; font-size: .85rem; font-weight: 500;
  transition: all var(--transition); display: flex; align-items: center; gap: .5rem;
}
.app-store-btn:hover { border-color: var(--white); background: rgba(255,255,255,.05); }
.app-phones { display: flex; justify-content: center; gap: .75rem; }
.phone-mockup {
  width: 130px; aspect-ratio: 9/19;
  background: rgba(255,255,255,.1); border-radius: 24px;
  border: 2px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 2.5rem;
}
.phone-mockup:first-child { transform: rotate(-5deg) translateY(10px); }
.phone-mockup:last-child { transform: rotate(5deg) translateY(10px); }

/* For business strip */
.biz-strip { background: var(--pink-light); padding: 1.5rem 0; }
.biz-strip-inner { display: flex; align-items: center; justify-content: space-between; }
.biz-strip-text h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: .2rem; }
.biz-strip-text p { font-size: .85rem; color: var(--text-secondary); }

/* City grid */
.cities-section { padding: 2.5rem 0; }
.cities-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.city-link { padding: .5rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--border); font-size: .82rem; color: var(--text-secondary); text-decoration: none; transition: all var(--transition); }
.city-link:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* Reviews section */
.reviews-section { padding: 3rem 0; border-top: 1px solid var(--border); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.review-card { background: var(--bg); border-radius: var(--r-lg); padding: 1.5rem; }
.review-stars { color: #FFB800; font-size: .85rem; margin-bottom: .75rem; }
.review-text { font-size: .88rem; color: var(--text-primary); line-height: 1.6; margin-bottom: 1rem; font-style: italic; }
.review-author { display: flex; align-items: center; gap: .6rem; }
.review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--pink-light); display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; color: var(--pink); flex-shrink: 0; }
.review-name { font-size: .82rem; font-weight: 600; color: var(--text-primary); }
.review-loc { font-size: .75rem; color: var(--text-muted); }

/* Counter strip */
.counter-strip { background: linear-gradient(135deg, var(--pink-light) 0%, var(--green-light) 100%); padding: 2.5rem 0; }
.counter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.counter-item { text-align: center; padding: 1.1rem 1rem; border-right: none; background: var(--white); border-radius: var(--r-lg); box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.counter-item:last-child { border-right: none; }
.counter-num { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); letter-spacing: -.03em; }
.counter-num .pk { color: var(--pink); }
.counter-lbl { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }


/* ── User dashboard styles ── */

/* Savings stat card */
.savings-num { font-size:1.65rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--green) }

/* Advance nudge banner */
.advance-nudge {
  display:flex;align-items:center;gap:.75rem;
  background:linear-gradient(135deg,#FFF8E1,#FFF3E0);
  border:1px solid #FFE082;border-radius:var(--r-md);
  padding:.65rem .9rem;font-size:.8rem;color:#7B5800;
  margin-top:.65rem;cursor:pointer;transition:box-shadow .18s;
}
.advance-nudge:hover{box-shadow:var(--shadow-xs)}
.advance-nudge strong{color:#5D4300}

/* Cancellation countdown */
.cancel-pill {
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:500;
  padding:.2rem .6rem;border-radius:var(--r-pill);
  background:#E6F7F4;color:#006644;
}
.cancel-pill.urgent{background:#FFF4E6;color:#C07000}

/* Discount badge on booking */
.saving-tag{
  display:inline-flex;align-items:center;gap:.2rem;
  font-size:.68rem;font-weight:700;
  padding:.15rem .5rem;border-radius:var(--r-pill);
  background:var(--green-light);color:var(--green);
}

/* ============================================================
   GLOWRIFI — RESPONSIVE LAYER
   Breakpoints:
     1024px  — tablet landscape / small laptop
      768px  — tablet portrait
      480px  — large phone
      360px  — small phone
   ============================================================ */

/* ── Global helpers ── */
@media (max-width: 768px) {
  body { font-size: 14px; }
  .container { padding: 0 1rem; }
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .show-mobile-only { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav { padding: 0 1rem; height: 60px; gap: .65rem; }
  :root { --nav-h: 60px; }
  .nav-account-label { display: none; }

  /* Hide nav search on mobile — use hero search instead */
  .nav-search { display: none; }

  /* Shrink nav links */
  .nav-links { gap: .1rem; }
  .nav-link   { padding: .35rem .55rem; font-size: .78rem; }
  .nav-spacer { min-width: 0; }
}
@media (max-width: 480px) {
  /* Show only essential nav links on tiny screens */
  .nav-link.outline { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --sb-w: 0px; --sb-col: 0px; }

  /* Sidebar slides off-screen by default on mobile */
  .sidebar {
    top: var(--nav-h);
    left: -240px;
    width: 240px !important;
    transition: left .25s cubic-bezier(.4,0,.2,1);
    z-index: 400;
  }
  /* When toggled open on mobile */
  .sidebar.mob-open { left: 0; }

  /* Sidebar info always visible on mobile (no collapsed state) */
  .sidebar .sb-info         { opacity: 1 !important; max-width: 160px !important; }
  .sidebar .sb-item-label   { opacity: 1 !important; width: auto !important; }
  .sidebar .sb-section      { opacity: 1 !important; pointer-events: auto !important; }
  .sidebar .sb-badge        { opacity: 1 !important; }
  .sidebar .sb-toggle-label { opacity: 1 !important; }

  /* Dash content takes full width on mobile */
  .dash-wrap { margin-left: 0 !important; }

  /* Mobile overlay when sidebar open */
  .sb-mob-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 399;
  }
  .sb-mob-overlay.show { display: block; }

  /* Hamburger button — injected by JS */
  .mob-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: none; background: transparent;
    cursor: pointer; font-size: 1.2rem; color: var(--text-primary);
    flex-shrink: 0;
  }
}
@media (min-width: 769px) {
  .mob-menu-btn { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD MAIN
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dash-main { padding: 1rem; }

  /* Stats row: 2 columns on mobile */
  .stats-row { grid-template-columns: 1fr 1fr; gap: .65rem; }

  /* Page title row */
  .dash-page-title { font-size: 1rem; }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat-num  { font-size: 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   DATA TABLE — horizontal scroll on mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Wrap tables in a scroll container */
  .panel { overflow-x: auto; }
  .data-table { min-width: 520px; }
  .data-table th, .data-table td { padding: .55rem .75rem; }

  /* Status tabs: scroll horizontally */
  .status-tabs { flex-wrap: nowrap; overflow-x: auto; padding: .6rem 1rem; gap: .3rem; scrollbar-width: none; }
  .status-tabs::-webkit-scrollbar { display: none; }
  .stab { flex-shrink: 0; }
}

/* ══════════════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 92vh;
    max-width: 100%;
    width: 100%;
    padding: 1.35rem 1.25rem 2rem;
    animation: slideUp .25s ease;
  }
  @keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
}

/* ══════════════════════════════════════════════════════════════
   FORM ROWS
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .form-row-2 { grid-template-columns: 1fr; gap: 0; }
  .form-row-3 { grid-template-columns: 1fr; gap: 0; }
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE HERO
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero { padding: 2.5rem 0 2rem; }
  .hero-search {
    flex-direction: column; height: auto; border-radius: var(--r-xl);
    padding: .5rem; gap: .35rem; border-width: 1.5px;
  }
  .hero-search-segment { padding: .5rem .9rem; border-radius: var(--r-lg); }
  .hero-search-segment:focus-within { background: var(--bg); }
  .hero-search-sep { display: none; }
  .hero-search-go {
    width: 100%; height: 46px; border-radius: var(--r-lg); margin: 0;
    font-size: .95rem;
  }
  .hero-search-val { font-size: .875rem; }
}
@media (max-width: 480px) {
  .hero { padding: 2rem 0 1.75rem; }
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE GRIDS
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .venues-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .categories-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .venues-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .categories-grid { grid-template-columns: repeat(3, 1fr); gap: .65rem; }
  .category-circle { width: 60px; height: 60px; font-size: 1.5rem; }
  .category-label  { font-size: .8rem; }
  .banner-grid { grid-template-columns: 1fr; gap: .75rem; }
  .steps-grid  { grid-template-columns: 1fr; gap: 1.5rem; }
  .reviews-grid { grid-template-columns: 1fr; gap: 1rem; }
  .counter-grid { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .counter-item { padding: 1rem .75rem; }
  .section-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
}
@media (max-width: 480px) {
  .venues-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .counter-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .counter-item { padding: .9rem .6rem; }
}

/* App section */
@media (max-width: 768px) {
  .app-section-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .app-stores { justify-content: center; }
  .app-phones { display: none; }
  .biz-strip-inner { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer { padding: 2rem 0 1.5rem; margin-top: 3rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; gap: .75rem; text-align: center; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   BROWSE PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .filter-strip { padding-bottom: .35rem; }
  /* Search bar on browse */
  .browse-search-bar { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════
   PROVIDER PAGE (public)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Gallery strip: show only main + 1 thumb */
  .gallery-strip {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    height: 220px;
  }
  .gallery-strip .gallery-thumb:nth-child(3),
  .gallery-strip .gallery-thumb:nth-child(4),
  .gallery-strip .gallery-thumb:nth-child(5) { display: none; }
  .gallery-main { grid-row: 1; }

  /* Provider info + booking panel: stack vertically */
  .provider-layout { flex-direction: column; }
  .provider-booking-panel {
    position: static !important;
    width: 100% !important;
    margin-top: 1.5rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary {
    position: static !important;
    order: -1; /* Show summary first on mobile */
    margin-bottom: 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   USER / ACCOUNT LAYOUT
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .acc-layout { grid-template-columns: 1fr; padding: 1rem 0 3rem; }
  .acc-sidebar {
    position: static;
    display: flex; gap: .5rem; flex-wrap: wrap;
  }
  .acc-profile-card { display: none; } /* hide on mobile, shown in page header */
  .acc-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; border-radius: var(--r-pill); }
  .acc-nav-item {
    flex-shrink: 0; padding: .5rem .9rem; font-size: .78rem;
    border-left: none; border-bottom: 2.5px solid transparent;
    border-radius: 0;
  }
  .acc-nav-item.active { border-bottom-color: var(--pink); border-left: none; }
}

/* ══════════════════════════════════════════════════════════════
   DRAWER
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .drawer { width: 100% !important; right: -100% !important; }
  .drawer.open { right: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  /* Admin tables scroll */
  .admin-table-wrap { overflow-x: auto; }
  /* Settings grid */
  .admin-settings-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   RANGE / DATE PILLS (bookings filter)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .range-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
  .range-pills::-webkit-scrollbar { display: none; }
  .range-pill { flex-shrink: 0; }
  .custom-date-row { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════
   SETTINGS PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   GALLERY GRID (provider gallery)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .gl-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .gl-dropzone { padding: 1.25rem; }
}
@media (max-width: 480px) {
  .gl-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lb-prev { left: .25rem; }
  .lb-next { right: .25rem; }
  .lb-btn  { width: 36px; height: 36px; font-size: 1rem; }
  .lb-thumbs { display: none; } /* too small on mobile */
}

/* ══════════════════════════════════════════════════════════════
   AUTH PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .auth-left { display: none !important; }
  .auth-right { flex: 1; }
}
@media (max-width: 480px) {
  .auth-right { padding: 1.5rem 1rem; }
  .auth-box { max-width: 100%; }
  .role-cards { gap: .5rem; }
  .role-card { padding: .9rem .5rem; }
  .role-card-icon { font-size: 1.4rem; }
}

/* ══════════════════════════════════════════════════════════════
   TOAST — bottom center, full width on tiny screens
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .toast {
    left: 1rem; right: 1rem; bottom: 2rem;
    transform: translateY(150%);
    width: auto; max-width: none;
    white-space: normal;
    border-radius: var(--r-lg);
  }
  .toast.show { transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE SIDEBAR TOGGLE — inject via JS
══════════════════════════════════════════════════════════════ */
/* This rule ensures the hamburger shows up in the nav on mobile */
@media (max-width: 768px) {
  #mobMenuBtn {
    display: flex !important;
    order: -1; /* put it before the logo */
  }
}