/* =========================================================================
   Brennholzbuben — "Frank's Firewood" premium dark theme.
   Self-hosted (fonts via Google Fonts <link> in the header). No CDN JS.
   ========================================================================= */

:root {
  --bg:        #090909;
  --bg-2:      #0d0d0f;
  --panel:     rgba(255,255,255,0.05);
  --panel-bd:  rgba(255,255,255,0.08);
  --text:      #f6f6f8;
  --muted:     #c7c7d1;       /* brighter for readability */
  --line:      rgba(255,255,255,0.16);
  --panel:     rgba(255,255,255,0.06);
  --panel-bd:  rgba(255,255,255,0.14);
  --fire-1:    #ff9d00;
  --fire-2:    #ff6200;
  --orange:    #f97316;
  --orange-hi: #fb923c;
  --radius:    18px;
  --radius-lg: 34px;
}

* { box-sizing: border-box; scroll-behavior: smooth; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

.headline { font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: .04em; font-weight: 400; }

a { color: var(--orange-hi); text-decoration: none; }
a:hover { color: var(--fire-1); }

h1, h2, h3 { line-height: 1.05; }
h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: .2em 0 .4em; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin: .8em 0 .4em; }
h3 { font-size: 1.2rem; }

.page-title { margin-top: 1rem; }

/* ---- glassmorphism ---- */
.glass {
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-bd);
  border-radius: var(--radius);
}
.card-pad { padding: 1rem 1.15rem; margin: .7rem 0; }

.gradient-text {
  background: linear-gradient(to right, var(--fire-1), var(--fire-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.fire-glow { box-shadow: 0 0 20px rgba(255,120,0,.4), 0 0 60px rgba(255,120,0,.25), 0 0 120px rgba(255,120,0,.15); }

/* ---- embers ---- */
#embers { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ember {
  position: absolute; bottom: -20px; width: 6px; height: 6px;
  background: var(--orange); border-radius: 9999px; filter: blur(1px);
  opacity: .6; animation: floatUp linear infinite;
}
@keyframes floatUp {
  from { transform: translateY(0) scale(1); opacity: .7; }
  to   { transform: translateY(-110vh) scale(0); opacity: 0; }
}

/* ---- scroll reveal ---- */
.section-fade { opacity: 0; transform: translateY(50px); transition: opacity .9s ease, transform .9s ease; }
.section-fade.in { opacity: 1; transform: none; }

/* =========================== navbar (shop) ============================== */
.navbar { position: sticky; top: 0; z-index: 50; padding: .55rem .75rem; }
.navbar-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.4rem; border-radius: var(--radius);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); }
.brand .headline { font-size: 1.9rem; }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 14px rgba(255,120,0,.7); }
.nav-links { display: flex; align-items: center; gap: 1.4rem; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .12em; }
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--fire-1); }
.nav-cta { background: var(--orange); color: #1a1300 !important; padding: .55rem 1rem;
  border-radius: 12px; font-weight: 700; letter-spacing: .04em; }
.nav-cta:hover { background: var(--orange-hi); }
@media (max-width: 720px){ .nav-links { gap: .8rem; font-size: .72rem; flex-wrap: wrap; justify-content: flex-end; } .brand .headline { font-size: 1.4rem; } }

/* internal topbar (admin/driver) */
.topbar {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: .9rem 1.4rem; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.topbar .brand { font-weight: 700; }
.topbar nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.topbar .user { color: var(--muted); margin-left: auto; }

/* =============================== layout ================================= */
.container { max-width: 1180px; margin: 0 auto; padding: 1rem 1.1rem 2.5rem; position: relative; z-index: 1; }
.lead { color: var(--muted); font-size: 1.05rem; }
.meta { color: var(--muted); font-size: .9rem; }
.req { color: var(--fire-1); }
.full { display: block; }
.right { text-align: right; }
.num { font-variant-numeric: tabular-nums; }

/* =============================== buttons ================================ */
.btn {
  display: inline-block; cursor: pointer; font: inherit; font-weight: 600;
  padding: .7rem 1.3rem; border-radius: 14px; border: 1px solid var(--panel-bd);
  background: var(--panel); color: var(--text); transition: all .25s ease;
  text-align: center;
}
.btn:hover { background: rgba(255,255,255,.1); color: var(--text); }
.btn-primary { background: var(--orange); border-color: transparent; color: #1a1300; }
.btn-primary:hover { background: var(--orange-hi); color: #1a1300; }
.btn-danger { background: #3a1414; border-color: #7f1d1d; color: #fecaca; }
.btn-danger:hover { background: #531a1a; color: #fff; }
.btn-small { padding: .25rem .55rem; border-radius: 10px; font-size: .85rem; }
.btn.big, .btn-primary.big { padding: 1rem 2rem; font-size: 1.1rem; border-radius: 18px; }
.btn-fire { position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(255,120,0,.35); }
.btn-fire::before { content:''; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.3), transparent);
  transform: translateX(-100%); transition: .7s; }
.btn-fire:hover::before { transform: translateX(100%); }
.inline { display: inline; }

/* =============================== forms ================================== */
label { display: block; margin: .45rem 0; color: var(--text); }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], input[type=time], input[type=number], select, textarea {
  width: 100%; padding: .55rem .7rem; margin-top: .2rem;
  background: rgba(255,255,255,.09); border: 1px solid var(--panel-bd);
  border-radius: 12px; color: var(--text); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
select option { color: #111; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
@media (max-width: 560px){ .grid-2 { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--panel-bd); border-radius: 12px; }
legend { padding: 0 .4rem; }
.radio, .check { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; }
.radio input, .check input { width: auto; margin: 0; }

/* =============================== notices ================================ */
.notice { padding: 1rem 1.2rem; border-radius: var(--radius); margin: 1rem 0; }
.notice-warn { border: 1px solid #b45309; background: rgba(180,83,9,.12); }
.notice-good { border: 1px solid #15803d; background: rgba(21,128,61,.14); }
.errors, .error { color: #fca5a5; }
.error { background: rgba(127,29,29,.25); border: 1px solid #7f1d1d; padding: .6rem .8rem; border-radius: 12px; }
.legal-note { color: var(--muted); font-size: .82rem; }

/* ============================= hero (home) ============================== */
.hero {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem); margin: .6rem 0 1.4rem;
  background:
    radial-gradient(circle at top, rgba(255,120,0,0.22), transparent 40%),
    linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.92));
  border: 1px solid var(--panel-bd);
}
.hero .badge-pill { display:inline-block; padding:.5rem 1.1rem; border-radius:999px;
  background: var(--panel); border:1px solid var(--panel-bd); color: var(--fire-1);
  text-transform: uppercase; letter-spacing:.25em; font-size:.72rem; margin-bottom: 1.2rem; }
.hero h1 { font-family:'Bebas Neue',Impact,sans-serif; font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height:.92; margin:.1em 0 .4em; }
.hero p { color: var(--muted); font-size: 1.02rem; max-width: 40rem; margin:.3rem 0; }
.hero-actions { display:flex; gap:1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero-stats { display:grid; grid-template-columns: repeat(3,auto); gap: 1.6rem; margin-top: 1.4rem; }
.hero-stats .n { font-family:'Bebas Neue',sans-serif; font-size: 2.4rem; }
.hero-stats .l { color: var(--muted); font-size:.82rem; }

/* ============================ product grid ============================== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.6rem; margin: 1.5rem 0; }
.product-card {
  background: var(--panel); border: 1px solid var(--panel-bd);
  border-radius: var(--radius-lg); overflow: hidden; transition: transform .4s ease, box-shadow .4s ease;
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(255,120,0,.18); }
.product-img { width: 100%; height: 170px; object-fit: cover; background:#15151a; display:block; }
.product-card .pad { padding: .9rem 1rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.product-card h3 { font-family:'Bebas Neue',sans-serif; font-size: 2rem; margin:0; }
.product-card .variant { color: var(--muted); }
.product-card .price { font-size: 1.5rem; font-weight: 800; }
.product-card .price .gradient-text { font-weight: 900; }
.product-card form { margin-top: auto; }

/* ============================== tables ================================== */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
td.right, th.right { text-align: right; }

/* ============================= dashboards =============================== */
.stat { background: var(--panel); border:1px solid var(--panel-bd); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.stat .num { font-size: 2rem; font-weight: 800; display:block; }
.stat .lbl { color: var(--muted); font-size: .85rem; }

/* ============================= addresses ================================ */
.address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: .8rem; margin: 1rem 0; }
.address-card, .offer-card, .driver-card, .order-card { background: var(--panel); border:1px solid var(--panel-bd);
  border-radius: var(--radius); padding: 1rem 1.2rem; }
.addr-roles { margin: 0 0 .4rem; }
.badge { display:inline-block; font-size:.72rem; font-weight:600; padding:.12rem .55rem; border-radius:999px; margin-right:.3rem; }
.badge-bill { background: rgba(99,102,241,.2); color:#c7d2fe; }
.badge-ship { background: rgba(22,163,74,.22); color:#bbf7d0; }
.addr-roles-pick { padding:.7rem .9rem; margin:.6rem 0; }
.addr-roles-pick legend { font-weight:600; }
.addr-roles-pick .check { display:inline-flex; margin-right:1.4rem; }
.address-pick { display:flex; gap:.6rem; align-items:flex-start; background: rgba(255,255,255,.03);
  border:1px solid var(--panel-bd); border-radius:12px; padding:.6rem .8rem; margin:.5rem 0; cursor:pointer; }
.address-pick input { margin-top:.3rem; }

/* ====================== checkout date calendar ========================= */
.cal-pick { margin: 1rem 0; }
.cal-pick-head { display:grid; grid-template-columns: repeat(7,1fr); gap:.4rem; color:var(--muted);
  font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.3rem; }
.cal-pick-head span { text-align:center; }
.cal-pick-row { display:grid; grid-template-columns: repeat(7,1fr); gap:.4rem; margin-bottom:.4rem; }
.cal-cell { display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height: 54px; border-radius:12px; font-variant-numeric:tabular-nums; }
.cal-cell.muted { color: rgba(255,255,255,.18); border:1px dashed rgba(255,255,255,.06); }
.cal-cell.selectable { position:relative; cursor:pointer; background: rgba(255,255,255,.04);
  border:1px solid var(--panel-bd); transition: all .2s ease; }
.cal-cell.selectable:hover { border-color: var(--orange); }
.cal-cell.selectable input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.cal-cell .cal-dom { font-size:1.15rem; font-weight:700; }
.cal-cell .cal-mon { font-size:.65rem; text-transform:uppercase; color:var(--muted); }
.cal-cell.selectable:has(input:checked) { background: var(--orange); color:#1a1300;
  box-shadow: 0 0 18px rgba(255,120,0,.5); border-color: transparent; }
.cal-cell.selectable:has(input:checked) .cal-mon { color:#3a2a00; }

/* ===================== admin week calendar (5 weeks) ==================== */
.cal-toolbar { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin:1rem 0; }
.cal-multiweek { display:flex; flex-direction:column; gap:.6rem; }
.cal-weeklabel { font-size:.82rem; color:var(--muted); margin:.4rem 0 .1rem; }
.cal-week { display:grid; grid-template-columns: repeat(7,1fr); gap:.5rem; }
@media (max-width:900px){ .cal-week { grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .cal-week { grid-template-columns: 1fr; } }
.cal-day { background: var(--panel); border:1px solid var(--panel-bd); border-radius:14px; padding:.5rem; min-height:5.5rem; }
.cal-day h2 { font-size:.85rem; margin:0 0 .35rem; font-family: 'Inter',sans-serif; }
.cal-empty { color: rgba(255,255,255,.25); font-size:.8rem; }
.cal-events { list-style:none; margin:0; padding:0; }
.cal-ev { font-size:.78rem; padding:.28rem .4rem; margin-bottom:.28rem; border-radius:8px;
  display:flex; gap:.3rem; align-items:baseline; flex-wrap:wrap; background: rgba(255,255,255,.06); }
.cal-ev.cal-block { background: rgba(220,38,38,.25); }
.cal-ev.cal-arrival { background: rgba(22,163,74,.25); }
.cal-ev.cal-unload { background: rgba(202,138,4,.25); }
.cal-ev.cal-departure { background: rgba(79,70,229,.25); }
.cal-time { font-weight:700; font-variant-numeric:tabular-nums; }
.cal-title { flex:1 1 auto; }
.cal-block-form { margin-top:1.4rem; }

/* ============================== auth ==================================== */
.auth-page { display:flex; align-items:center; justify-content:center; min-height: 100vh; }
.auth-box { width: 100%; max-width: 26rem; margin: 3rem auto; background: var(--panel);
  border:1px solid var(--panel-bd); border-radius: var(--radius-lg); padding: 2rem; }
.auth-box h1 { font-family:'Bebas Neue',sans-serif; }
.totp-enroll { background: rgba(255,255,255,.04); border:1px solid var(--panel-bd); border-radius:12px; padding:.8rem 1rem; margin:1rem 0; }
.totp-secret code { font-size:1.05rem; letter-spacing:.08em; word-break:break-all; }
.totp-uri code { font-size:.72rem; color:var(--muted); word-break:break-all; }
.totp-qr { display:flex; justify-content:center; margin:1rem 0; }
.totp-qr svg { width:220px; height:220px; background:#fff; border-radius:12px; padding:8px; }

/* ============================== footer ================================== */
.footer { border-top:1px solid var(--line); padding: 2rem 1rem; text-align:center; color: var(--muted); position: relative; z-index:1; }
.legal-nav { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin-bottom:.8rem; }
.legal-nav a { color: var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; }
.legal-nav a:hover { color: var(--fire-1); }

/* status timeline + misc */
.status-timeline { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.status-timeline li { background: var(--panel); border:1px solid var(--panel-bd); border-radius:999px; padding:.3rem .8rem; font-size:.8rem; }
.status-timeline li.done { background: var(--orange); color:#1a1300; }
.empty { color: var(--muted); }

/* ===================== dashboard stat grid (side by side) =============== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 1rem 0 1.4rem; }
.stat { text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: .15rem; }
.stat:hover { border-color: var(--orange); color: var(--text); }
.stat .num { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.stat.warn { border-color: rgba(180,83,9,.6); }
.stat.warn .num { color: #fdba74; }
.stat.good { border-color: rgba(21,128,61,.6); }
.stat.good .num { color: #86efac; }
.quick-links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: .5rem; }
.quick-links a { display: block; background: var(--panel); border: 1px solid var(--panel-bd); border-radius: 12px; padding: .6rem .9rem; color: var(--text); }
.quick-links a:hover { border-color: var(--orange); color: var(--fire-1); }

/* ============================ cart badge =============================== */
.cart-link { position: relative; }
.cart-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; margin-left: .35rem;
  background: var(--orange); color: #1a1300; font-size: .72rem; font-weight: 800;
  border-radius: 999px; vertical-align: middle; box-shadow: 0 0 10px rgba(255,120,0,.6); }

/* ====================== address actions / lock ========================= */
.addr-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.lock-note { font-size: .8rem; }

/* =========================== checkout time ============================= */
.time-pick { max-width: 16rem; margin-top: .8rem; }
.time-pick select { background: rgba(255,255,255,.09); }

/* ===================== calendar order link + edit ====================== */
.cal-orderlink { color: var(--fire-1); text-decoration: underline; }
.cal-orderlink:hover { color: #fff; }
.cal-edit { display: inline; }
.cal-edit summary { cursor: pointer; list-style: none; font-size: .8rem; }
.cal-edit summary::-webkit-details-marker { display: none; }
.cal-edit form { display: grid; gap: .25rem; margin-top: .35rem; background: rgba(0,0,0,.3); padding: .4rem; border-radius: 8px; }
.cal-edit input { padding: .3rem .4rem; font-size: .8rem; }

/* =============================== tours ================================= */
.tour-stops { display: flex; flex-direction: column; gap: .7rem; }
.tour-stop-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .3rem; }
.tour-no { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem;
  border-radius: 999px; background: var(--orange); color: #1a1300; font-weight: 800; }
.tour-time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.tour-order { color: var(--fire-1); font-weight: 600; }
.tour-edit { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.tour-edit label { margin: 0; }
.tour-edit input, .tour-edit select { width: auto; }

/* ===================== status / generic badges ========================= */
.badge-warn { background: rgba(180,83,9,.3); color: #fdba74; }
.badge-pending_payment { background: rgba(180,83,9,.3); color: #fdba74; }
.badge-paid, .badge-confirmed { background: rgba(21,128,61,.3); color: #86efac; }
.badge-in_delivery, .badge-unloaded { background: rgba(79,70,229,.3); color: #c7d2fe; }
.badge-delivered, .badge-picked_up, .badge-completed { background: rgba(255,120,0,.25); color: #fdba74; }
.badge-cancelled { background: rgba(127,29,29,.4); color: #fecaca; }

.reschedule { border-color: rgba(255,120,0,.35); }
.delivery-photo { max-width: 320px; border-radius: 14px; border: 1px solid var(--panel-bd); }
.dispo .grid-2 { max-width: 720px; }
.addr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }