* {
    box-sizing: border-box;
}

:root {
    --tap5-ink: #172033;
    --tap5-muted: #64748b;
    --tap5-brand: #0f766e;
    --tap5-brand-dark: #115e59;
    --tap5-surface: #ffffff;
    --tap5-border: #e2e8f0;
    --tap5-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--tap5-ink);
    background: #f8fafc;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px;
}

.site-header {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--tap5-border);
    color: #fff;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(12px);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    font-weight: 700;
    color: var(--tap5-ink);
    text-decoration: none;
    font-size: 1.2rem;
}

.brand-logo {
    display: block;
    width: 92px;
    height: auto;
    border-radius: 7px;
}

.site-nav a {
    margin-left: 20px;
    color: var(--tap5-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a.active {
    color: var(--tap5-brand);
}

.site-footer {
    margin-top: 48px;
    padding: 28px 0 18px;
    border-top: 1px solid var(--tap5-border);
    background: #fff;
    color: var(--tap5-muted);
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
}

.footer-grid strong { color: var(--tap5-ink); font-size: 1.15rem; }
.footer-grid span { font-size: .9rem; }
.footer-grid nav { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-grid nav a { color: var(--tap5-muted); text-decoration: none; }
.footer-grid nav a:hover { color: var(--tap5-brand); }
.footer-meta { margin: 22px 0 0; font-size: .78rem; }

button,
.button,
input,
select,
textarea {
    font: inherit;
}

button,
.button {
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

button:hover,
.button:hover {
    transform: translateY(-1px);
    box-shadow: var(--tap5-shadow);
}

input,
select,
textarea {
    border: 1px solid var(--tap5-border);
    border-radius: 10px;
    background: var(--tap5-surface);
    color: var(--tap5-ink);
    min-height: 42px;
    padding: 10px 12px;
}

.card,
.panel,
.product-card,
.dashboard-card {
    background: var(--tap5-surface);
    border: 1px solid var(--tap5-border);
    border-radius: 16px;
    box-shadow: var(--tap5-shadow);
}

.hero {
    padding: 60px 0;
    text-align: center;
}

.hero h1 {
    font-size: clamp(2.5rem, 4vw, 4rem);
    margin-bottom: 16px;
    line-height: 1.05;
}

.hero p {
    font-size: 1.05rem;
    max-width: 720px;
    margin: 0 auto 24px;
    color: #4b5563;
}

.cards,
.products,
.trust,
.steps {
    display: grid;
    gap: 16px;
}

.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0; }
.card,
.product,
.trust-symbol,
.box,
.panel {
    background: var(--tap5-surface);
    border: 1px solid var(--tap5-border);
    border-radius: 16px;
    padding: 18px;
}
.card { min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; }
.product { min-height: 180px; display: flex; flex-direction: column; gap: 10px; }
.product .eta { color: var(--tap5-muted); font-size: .85rem; }
.chip { border: 1px solid var(--tap5-border); background: #fff; color: var(--tap5-ink); padding: 8px 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pin { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 16px; padding: 20px; }
.trust-symbol { text-align: center; box-shadow: none; }
.discover { margin-top: 42px; }
.links { display: flex; flex-wrap: wrap; gap: 14px; }

.cart-summary,
.checkout-summary,
.order-card,
.tracking-card,
.account-card {
    background: var(--tap5-surface);
    border: 1px solid var(--tap5-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--tap5-shadow);
}
.cart-summary,
.checkout-summary { position: sticky; top: 88px; }
.order-list,
.tracking-timeline,
.form-grid { display: grid; gap: 14px; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-status,
.badge { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 5px 10px; background: #ecfdf5; color: var(--tap5-brand-dark); font-size: .8rem; font-weight: 650; }
.table-wrap { overflow-x: auto; border: 1px solid var(--tap5-border); border-radius: 14px; background: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--tap5-border); text-align: left; }
th { color: var(--tap5-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }

.page-section { padding: 28px 0; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-header h1, .section-header h2 { margin: 0; }
.dashboard-grid, .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dashboard-card, .metric, .review, .delivery, .map-panel, .rider-list { padding: 18px; }
.metric strong { display: block; color: var(--tap5-ink); font-size: 1.7rem; margin-top: 6px; }
.muted, .meta, .mapNote { color: var(--tap5-muted); font-size: .88rem; }
.tag, .status { display: inline-flex; border-radius: 999px; padding: 5px 10px; background: #f0fdfa; color: var(--tap5-brand-dark); font-size: .78rem; font-weight: 650; }
.map-panel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 16px; }
.map { min-height: 220px; border-radius: 14px; background: linear-gradient(135deg, #dff7f2, #eff6ff); border: 1px solid var(--tap5-border); }
.inline-form, .actions, .top, .review, .docs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.doc, .dish { background: #fff; border: 1px solid var(--tap5-border); border-radius: 12px; padding: 12px; }
.empty { border: 1px dashed #cbd5e1; border-radius: 14px; padding: 24px; text-align: center; color: var(--tap5-muted); }

@media (max-width: 760px) {
    .dashboard-grid, .grid { grid-template-columns: 1fr; }
    .section-header { align-items: flex-start; flex-direction: column; }
    .map-panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .form-grid { grid-template-columns: 1fr; }
    .cart-summary, .checkout-summary { position: static; }
}

@media (max-width: 760px) {
    .cards, .products { grid-template-columns: 1fr; }
    .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .container { padding: 16px; }
    .site-header .container { align-items: flex-start; gap: 10px; }
    .site-nav { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
    .site-nav a { margin-left: 0; white-space: nowrap; font-size: .88rem; }
    .brand-logo { width: 78px; }
    .hero { padding: 36px 0; }
    .footer-grid { flex-direction: column; }
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.button,
.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s ease, background 0.2s ease;
}

.button {
    background: #2563eb;
    color: #fff;
}

.button:hover,
.button-secondary:hover {
    transform: translateY(-2px);
}

.button-secondary {
    background: #e2e8f0;
    color: #111827;
}

.alert {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 20px;
}

.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.product-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 40px;
}

.grid article,
.product-card,
.page-section {
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.page-section {
    margin-bottom: 24px;
}

.product-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.product-card h2 {
    margin-top: 0;
}

.price {
    display: inline-block;
    margin-top: 16px;
    font-weight: 700;
    color: #2563eb;
}

.contact-form {
    display: grid;
    gap: 16px;
    max-width: 640px;
}

.contact-form label {
    font-weight: 600;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 14px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #f8fafc;
}

.inline-form select {
    min-width: 140px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #fff;
}

.contact-form button {
    width: fit-content;
    border: none;
    background: #2563eb;
    color: #fff;
    padding: 14px 28px;
    border-radius: 9999px;
    cursor: pointer;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.section-header h1 {
    margin: 0;
}

.dashboard-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 24px;
}

.dashboard-card,
.table-scroll,
.map-panel {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.table-scroll {
    overflow-x: auto;
}

.table-scroll table {
    width: 100%;
    border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
    text-align: left;
    padding: 14px;
    border-bottom: 1px solid #e5e7eb;
}

.table-scroll thead {
    background: #f9fafb;
}

.product-category {
    display: inline-block;
    margin-bottom: 12px;
    color: #2563eb;
    font-size: 0.9rem;
    font-weight: 700;
}

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.vendor-name {
    color: #6b7280;
    font-size: 0.95rem;
}

.restricted {
    opacity: 0.8;
    border: 1px solid #fca5a5;
}

.disabled {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

.location-summary {
    margin-top: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
}

.map-panel {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 24px;
}

.map {
    min-height: 420px;
    border-radius: 24px;
    overflow: hidden;
}

.rider-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rider-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rider-list li {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
}

@media (max-width: 900px) {
    .map-panel {
        grid-template-columns: 1fr;
    }
}

.site-footer {
    padding: 18px 0;
    text-align: center;
    color: #6b7280;
}

@media (max-width: 640px) {
    .site-header .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-nav {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
}


/* PWA install controls must remain invisible until pwa.js marks installation actionable. */
[data-tap5-install][hidden]{display:none!important}


/* Client-delivery public shell: align About, Company, Contact and confirmation pages with TAP5 black-gold glass language. */
:root{
  --tap5-ink:#f7f4eb;
  --tap5-muted:#bfb5a5;
  --tap5-brand:#e9c47c;
  --tap5-brand-dark:#bc8f46;
  --tap5-surface:#171613;
  --tap5-border:#b99b6b43;
  --tap5-shadow:0 18px 48px #0006;
}
html{min-height:100%;background:#080807}
body{
  min-height:100dvh;
  overflow-x:hidden;
  background:radial-gradient(circle at 82% 0,#7b56243a,transparent 30rem),#080807;
  color:var(--tap5-ink);
}
.site-header{
  border-bottom:1px solid var(--tap5-border);
  background:#090908ed;
  color:var(--tap5-ink);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}
.site-header .container{min-height:62px}
.brand{display:block;width:108px;height:46px;overflow:hidden;flex:none}
.brand-logo{display:block;width:108px;height:84px;object-fit:cover;object-position:center 36%;transform:translateY(-16px);border-radius:0}
.site-nav{display:flex;align-items:center;gap:.35rem;margin-left:auto;overflow-x:auto}
.site-nav a,.site-nav button{min-height:42px;display:inline-flex;align-items:center;padding:.55rem .72rem;border-radius:.6rem;color:#d8cdbc;white-space:nowrap;font-size:.8rem;font-weight:750}
.site-nav a:hover,.site-nav a.active{color:var(--tap5-brand);background:#d9b56f0d}
.site-nav .button,.site-nav .button-secondary{padding:.55rem .75rem;border:1px solid var(--tap5-border);background:transparent;color:var(--tap5-brand);box-shadow:none}
.site-footer{border-top:1px solid var(--tap5-border);background:#0b0a09;color:var(--tap5-muted)}
.footer-grid strong{color:#f7f4eb}.footer-grid nav a,.site-footer a{color:#d6c8b2}.footer-grid nav a:hover{color:var(--tap5-brand)}
.page-section,.grid article,.product-card{
  border:1px solid var(--tap5-border);
  background:radial-gradient(circle at 12% 0,#d8a94a12,transparent 42%),linear-gradient(145deg,#24221dcf,#12110eed);
  color:#f7f4eb;
  box-shadow:0 18px 48px #0005;
}
.page-section{margin-top:1rem}
.page-section h1{margin:.2rem 0 1rem;font-size:clamp(2.4rem,6vw,4.8rem);line-height:1;letter-spacing:-.055em}
.page-section h2,.page-section h3{color:#fff2d8}
.page-section p,.page-section li{color:var(--tap5-muted);line-height:1.7}
.eyebrow,.tag,.status,.product-category,.price{color:var(--tap5-brand)!important}
.feature-list,.company-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.4rem 0}
.feature-list>div,.company-details>div{padding:1rem;border:1px solid var(--tap5-border);border-radius:.9rem;background:#d9b56f08}
input,select,textarea,.contact-form input,.contact-form textarea,.contact-form select{
  border-color:#bd9d6680;
  background:#161511;
  color:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--tap5-brand);outline-offset:2px}
.button,.contact-form button{
  border:1px solid #d9b56f;
  background:linear-gradient(135deg,#ffe1a0,#bc8f46);
  color:#1b1207;
  font-weight:800;
}
.button-secondary{border:1px solid var(--tap5-border);background:transparent;color:var(--tap5-brand)}
.alert{border-color:#9d4b4770;background:#471c1a;color:#ffd6d1}
.card,.panel,.dashboard-card,.cart-summary,.checkout-summary,.order-card,.tracking-card,.account-card,.table-wrap,.table-scroll,.map-panel{
  border-color:var(--tap5-border);
  background:linear-gradient(145deg,#24221dcf,#12110eed);
  color:#f7f4eb;
  box-shadow:var(--tap5-shadow);
}
th{color:var(--tap5-brand)}td{color:#e9dfd0}
.empty{border-color:#b99b6b55;color:var(--tap5-muted)}
@media(max-width:760px){
  .site-header .container{align-items:center;flex-direction:row}
  .site-nav{width:100%;margin-top:.4rem;padding-bottom:.25rem}
  .feature-list,.company-details{grid-template-columns:1fr}
}