/* ═══════════════════════════════════════════════════════════════
   Fixipro — minimal UI (shared by every page except admin)
   Flat surfaces · hairline borders · one green accent · no gradients
   Pages opt in via <body class="pg pg-…">; group classes below.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --g:#111113;--gd:#111113;--gdd:#111113;--gl:#F2F2F5;--g-soft:#F2F2F5;
  --bg:#fafafa;--text:#111827;--ink:#111827;--muted:#6b7280;--faint:#9ca3af;--border:#ececee;--line:#ececee;
  --danger:#dc2626;--red:#dc2626;
  /* per-page accent variables collapse into the single green accent */
  --or:#111113;--pur:#111113;--purl:#F2F2F5;--ev:#111113;--evd:#111827;--evl:#F2F2F5;--c:#111113;--c2:#111113;
  --accent:#111113;--accent-light:#F2F2F5;
  --radius-sm:12px;--radius-md:14px;--radius-lg:18px;--shadow-sm:none;--shadow-md:none;--shadow-lg:0 12px 32px -12px rgba(17,24,39,.18);
}
body.pg{background:var(--bg)!important;color:var(--text);-webkit-font-smoothing:antialiased}
body.pg ::-webkit-scrollbar-thumb{background:rgba(17,24,39,.15)}
body.pg :focus-visible{outline:2px solid var(--g);outline-offset:2px}

/* ── sticky top bar (service, list, events, cart, workers pages) ── */
.pgn nav{background:rgba(255,255,255,.92)!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important;height:56px;color:var(--ink)}
.pgn nav h1{color:var(--ink)!important;font-size:16px;font-weight:700;letter-spacing:-.2px}
.pgn nav .back-btn,.pgn nav .cart-btn,.pgn nav>button,.pgn nav>a.cart-btn{width:38px;height:38px;border-radius:50%!important;background:#fff!important;border:1px solid var(--border)!important;color:var(--ink)!important;box-shadow:none;transition:background .15s}
.pgn nav .back-btn:hover,.pgn nav .cart-btn:hover{background:#f5f5f6!important}
.pgn nav svg{stroke:var(--ink)}
.pgn nav .cart-badge{background:var(--g)!important;color:#fff;border:2px solid #fff}
.pgn .page{padding-top:18px}

/* ── generic surfaces ── */
.pg .card{background:#fff;border:1px solid var(--border)!important;border-radius:18px!important;box-shadow:none!important}
.pg .card-hdr,.pg .card-header{border-bottom:1px solid var(--border);font-weight:700;font-size:14px;letter-spacing:0;color:var(--ink)}
.pg .form-group label{font-size:12px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.pg .form-control,.pg input[type=text].fc,.pg select.form-control{background:#fff;border:1px solid var(--border)!important;box-shadow:none!important;border-radius:12px!important;color:var(--ink)}
.pg .form-control:focus{border-color:var(--ink)!important;box-shadow:none!important;background:#fff}
.pg .form-control::placeholder{color:var(--faint)}
.pg .btn-submit,.pg .btn-primary,.pg .btn-post{background:var(--g)!important;color:#fff;border:none;border-radius:14px!important;box-shadow:none!important;transition:background .15s,transform .15s}
.pg .btn-submit:hover,.pg .btn-primary:hover{background:var(--gd)!important;transform:none}
.pg .btn-submit:active,.pg .btn-primary:active{transform:scale(.98)}
.pg .btn-cancel,.pg .btn-outline{background:#fff;border:1px solid var(--border);color:var(--ink);border-radius:14px!important;box-shadow:none}
.pg .btn-outline:hover{background:#f5f5f6;color:var(--ink)}
.pg .toast{background:var(--ink)!important;color:#fff;border-radius:14px!important;box-shadow:0 12px 30px rgba(0,0,0,.2);}
.pg .success-icon,.pg .s-icon{background:var(--g)!important;box-shadow:none!important}
.pg .booking-id{background:#f3f4f6;border:0;color:var(--ink);border-radius:12px!important}

/* ── service pages: banner, sub-service grid, schedule ── */
.pg-svc .hero-banner,.pg-svc .hero{background:none!important;box-shadow:none!important;border-radius:0!important;padding:8px 2px 12px;color:var(--ink);gap:14px}
.pg-svc .hero-banner::after,.pg-svc .hero::after{display:none}
.pg-svc .hero-icon{width:52px;height:52px;border-radius:16px;border:1px solid var(--border);background:#fff;display:grid;place-items:center;font-size:0}
.pg-svc .hero-icon svg{stroke:var(--ink)!important;width:24px;height:24px}
.pg-svc .hero-title{color:var(--ink)!important;font-size:22px;font-weight:800;letter-spacing:-.5px}
.pg-svc .hero-sub{color:var(--muted)!important;font-size:13px}
.pg-svc .sub-hint{color:var(--muted)}
.pg-svc .sub-btn{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:none!important;transition:border-color .18s,background .18s}
.pg-svc .sub-btn:hover{transform:none;border-color:#d1d5db;box-shadow:none!important}
.pg-svc .sub-btn.active{background:var(--g-soft);border-color:var(--g);box-shadow:none!important}
.pg-svc .sub-ico{background:#f3f4f6!important;border-radius:14px;width:46px;height:46px;transition:background .18s}
.pg-svc .sub-ico svg{stroke:var(--ink)!important;width:21px;height:21px}
.pg-svc .sub-btn.active .sub-ico{background:var(--g)!important}
.pg-svc .sub-btn.active .sub-ico svg{stroke:#fff!important}
.pg-svc .sub-btn span{font-weight:600;color:var(--ink)}
.pg-svc .sub-chk{box-shadow:none}
.pg-svc .when-btn,.pg-svc .tchip,.pg-svc .urgency-btn{border:1px solid var(--border);border-radius:12px;box-shadow:none}
.pg-svc .when-btn.active,.pg-svc .tchip.on{background:var(--ink);border-color:var(--ink);box-shadow:none}
.pg-svc .when-btn.active b,.pg-svc .when-btn.active small{color:#fff}
.pg-svc .tchip.on{color:#fff}
.pg-svc .step-sel{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:none}
.pg-svc .step-sel button{color:var(--g);background:none;border:0;font-weight:600}
.pg-svc .price-tag,.pg-svc .sub-price{background:#f3f4f6;color:var(--muted)}

/* ── list pages: food / meat / groceries / item details ── */
.pg-list .srch-wrap{background:var(--bg);padding:12px 16px 2px}
.pg-list .srch{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:0 14px;height:46px}
.pg-list .srch:focus-within{border-color:var(--ink)}
.pg-list .srch input{font-size:14px!important}
.pg-list #catTabs{background:var(--bg)!important;border-bottom:0!important}
.pg-list .item-card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:none;transition:border-color .2s}
.pg-list .item-card:hover{border-color:#d1d5db;transform:none;box-shadow:none}
.pg-list .item-card img{background:#f5f5f6}
.pg-list .item-name{color:var(--ink);font-weight:600}
.pg-list .item-price{color:var(--ink)!important}
.pg-list .add-btn{background:#fff!important;color:var(--ink)!important;border:1px solid var(--border);border-radius:10px;box-shadow:none}
.pg-list .add-btn:hover{background:var(--g)!important;border-color:var(--g);color:#fff!important}
.pg-list .qty-ctrl button{border:1px solid var(--border);background:#fff;color:var(--ink);box-shadow:none}
.pg-list .qty-ctrl button.plus{background:var(--g);border-color:var(--g);color:#fff}
.pg-list .cat-tab,.pg-list .chip{border-radius:999px;box-shadow:none}
.pg-list .cat-tab.active,.pg-list .chip.on{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
.pg-list .sticky-cart,.pg-list .cart-bar,.pg-list .view-cart{background:var(--ink)!important;box-shadow:0 12px 28px -12px rgba(17,24,39,.5)!important;border-radius:16px!important}

/* ── events ── */
.pg-events .hero{background:none!important;color:var(--ink)!important;box-shadow:none!important;border-radius:0;padding:8px 2px 12px}
.pg-events .hero::after{display:none}
.pg-events .hero h2{color:var(--ink)}.pg-events .hero p{color:var(--muted);opacity:1}
.pg-events .sec-title{color:var(--muted);font-weight:700}
.pg-events .type{border:1px solid var(--border);box-shadow:none;border-radius:16px}
.pg-events .type:hover{border-color:#d1d5db;box-shadow:none}
.pg-events .type .cv{background:#f5f5f6}

/* ── cart ── */
.pg-cart .cart-row{border-bottom:1px solid var(--border)}
.pg-cart .tag-food,.pg-cart .tag-meat,.pg-cart .tag-grocery{background:#f3f4f6;color:var(--muted)}
.pg-cart .qty-ctrl button{border:1px solid var(--border);background:#fff;color:var(--ink)}
.pg-cart .qty-ctrl button.plus{background:var(--g);border-color:var(--g);color:#fff}
.pg-cart .empty-state .icon{color:var(--faint)}

/* ── workers ── */
.pg-workers nav{border-bottom:1px solid var(--border)!important}
.pg-workers .hero-badge{background:#f3f4f6;border:1px solid var(--border)}

/* ── account pages: profile & my orders ── */
.pg-acct .topbar{background:rgba(255,255,255,.92)!important;border-bottom:1px solid var(--border);box-shadow:none!important}
.pg-acct .topbar,.pg-acct .topbar *{color:var(--ink)!important}
.pg-acct .icbtn{background:#fff!important;border:1px solid var(--border)!important;box-shadow:none!important;border-radius:50%!important}
.pg-acct .icbtn svg,.pg-acct .topbar svg{stroke:var(--ink)!important}
.pg-acct .hero{background:none!important;border-radius:0!important;box-shadow:none!important;padding-bottom:22px!important}
.pg-acct .hero::before,.pg-acct .hero::after{display:none!important}
.pg-acct .hero,.pg-acct .hero *{color:var(--ink)!important}
.pg-acct .hero svg{stroke:var(--ink)!important}
.pg-acct .hero .chip{background:#f3f4f6!important;border:0!important}
.pg-acct .avatar,.pg-acct .hav{background:#f3f4f6!important;color:var(--ink)!important;box-shadow:none!important;border:1px solid var(--border)!important}
.pg-acct .stats{margin-top:0!important}
.pg-acct .seg{margin:0 16px!important;box-shadow:none!important;border:1px solid var(--border)!important}
.pg-acct .stat,.pg-acct .card,.pg-acct .tile,.pg-acct .hb,.pg-acct .order-card,.pg-acct .empty-ico{box-shadow:none!important;border:1px solid var(--border)!important;border-radius:18px}
.pg-acct .empty-ico{border-radius:50%}
.pg-acct .ftab.active{background:var(--ink)!important;color:#fff!important;box-shadow:none!important}
.pg-acct .btn,.pg-acct .btn-browse,.pg-acct .btn-call{background:var(--g)!important;box-shadow:none!important;border-radius:14px!important}
.pg-acct .btn-wa{background:#fff!important;color:var(--ink)!important;border:1px solid var(--border)!important}
.pg-acct .tile .ti,.pg-acct .hb .hi,.pg-acct .arow .ai,.pg-acct .rowi .ri{background:#f3f4f6!important}
.pg-acct .tile .ti svg,.pg-acct .hb .hi svg,.pg-acct .arow .ai svg,.pg-acct .rowi .ri svg{stroke:var(--ink)!important}
.pg-acct .tile .bdg{background:var(--g)}
.pg-acct .addr textarea:focus,.pg-acct .inp:focus-within{border-color:var(--ink)!important;box-shadow:none!important;background:#fff}
.pg-acct .ok,.pg-acct .success{background:var(--g-soft)!important;border-color:#cfe9da!important;color:var(--gdd)!important}
.pg-acct .stp.done i{box-shadow:none!important}
.pg-acct .flash-toast{background:var(--ink)!important}

/* ── login / forgot-password screens ── */
.pg-acct .screen{background:#fff!important;border:1px solid var(--border);box-shadow:none!important;border-radius:24px}
.pg-acct .top{color:var(--ink)!important}
.pg-acct .top::before,.pg-acct .top::after{display:none!important}
.pg-acct .top .logo,.pg-acct .top .tag{color:var(--ink)!important}
.pg-acct .top .logo span,.pg-acct .top .tag em{color:var(--g)!important}
.pg-acct .top .close{background:#f3f4f6!important;border:0}
.pg-acct .top .close svg{stroke:var(--ink)!important}
.pg-acct .cat{color:var(--muted)!important}
.pg-acct .cat span{background:#fff!important;box-shadow:none!important;border:1px solid var(--border)}
.pg-acct .cat span svg{stroke:var(--ink)!important}
.pg-acct .sheet{margin-top:0!important;border-radius:0!important;box-shadow:none!important;border-top:1px solid var(--border)}
.pg-acct .sheet::before{display:none!important}
.pg-acct .mb{box-shadow:var(--shadow-lg)!important}
.pg-acct .mc{background:#f3f4f6!important;color:var(--ink)!important}

/* ── static pages (terms, privacy, founders, delete_*) ── */
.pg-static .hero{background:#fff!important;color:var(--ink)!important;border-bottom:1px solid var(--border);box-shadow:none}
.pg-static .hero::before,.pg-static .hero::after{display:none}
.pg-static .hero h1,.pg-static .hero h2,.pg-static .hero p,.pg-static .hero span{color:var(--ink)}
.pg-static .hero p{color:var(--muted)}
.pg-static nav{box-shadow:none!important;border-bottom:1px solid var(--border)}

/* ── forgot-password card ── */
.pg-acct .card{box-shadow:none!important}
.pg-acct .card-head{background:#fff!important;border-bottom:1px solid var(--border)}
.pg-acct .card-head::after{display:none!important}
.pg-acct .card-head,.pg-acct .card-head *{color:var(--ink)!important}
.pg-acct .card-head .logo span{color:var(--g)!important}
.pg-acct .tabs{background:#f3f4f6!important}
.pg-acct .tab.active{background:#fff!important;color:var(--ink)!important;box-shadow:none!important}
.pg-acct .fg input{background:#fff!important}
.pg-acct .fg input:focus{border-color:var(--ink)!important;box-shadow:none!important}
.pg-acct .error{border-radius:12px}