/*
Theme Name: Roasted by ChefMagz
Theme URI: https://roastedbychefmagz.co.uk
Author: Chef Magz
Description: Custom WooCommerce theme for Roasted by ChefMagz. Sage-and-cream brand, built to match the companion mobile app (Home, Order, Basket, Account, Social) with a Starbucks-style Rewards system, Saturday delivery-date picker with cut-off/blocked-date logic, and DPD tracking on the order confirmation screen.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
WC requires at least: 8.0
WC tested up to: 11.2
Text Domain: roasted-chefmagz
*/

@font-face{
  font-family:'Gobold Lowplus';
  src:url('assets/fonts/GoboldLowplus.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --bg:#F2EDE0; --card:#EBE4D1; --card-deep:#E0D9C6; --border:#D4C9B0; --border-light:#E8E0CE;
  --sage:#6B7C5C; --sage-dark:#5E6F50; --sage-light:#8A9E79;
  --ink:#2C2416; --ink-mid:#6B5F4E; --ink-muted:#B5A990; --ink-faint:#D4C9B0;
  --gold:#C8A951; --brown:#8B6F3E; --red:#C16B6B;
}

/* ==========================================================================
   Base
   ========================================================================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--ink); margin:0; overflow-x:hidden;
  padding-bottom:84px; /* clears fixed bottom nav on mobile */
}
@media (min-width:900px){ body{ padding-top:84px; padding-bottom:0; } }
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }
img{ max-width:100%; display:block; }
.wordmark{ font-family:'Gobold Lowplus','Anton',sans-serif; letter-spacing:-0.01em; color:var(--sage-dark); }
.screen-reader-text{ position:absolute; left:-9999px; }

/* ==========================================================================
   Top nav (desktop) / Bottom nav (mobile) — shared by every template
   ========================================================================== */
#topnav{
  display:none;
  position:fixed; top:0; left:0; right:0; z-index:40;
  align-items:center; justify-content:space-between;
  padding:16px 40px;
  background:rgba(242,237,224,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-light);
}
#topnav .brand img{ height:52px; width:auto; }
#topnav .right{ display:flex; align-items:center; gap:36px; }
#topnav nav{ display:flex; gap:32px; }
#topnav nav a{ font-size:14px; font-weight:600; color:var(--ink-mid); letter-spacing:0.02em; }
#topnav nav a.current,
#topnav nav a:hover{ color:var(--sage-dark); }
#topnav .basket-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px; background:var(--card); color:var(--sage-dark);
  transition:background .15s ease;
}
#topnav .basket-btn:hover{ background:var(--card-deep); }
#topnav .basket-btn svg{ width:22px; height:22px; }
#topnav .basket-count{
  position:absolute; top:-3px; right:-3px;
  background:var(--sage-dark); color:var(--bg); font-size:10px; font-weight:700;
  min-width:17px; height:17px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
  border:2px solid var(--bg);
}
@media (min-width:900px){ #topnav{ display:flex; } }

#bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:space-around;
  background:var(--bg); border-top:1px solid var(--border);
  padding:10px 6px calc(10px + env(safe-area-inset-bottom));
}
#bottomnav a{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--ink-mid); font-size:11px; font-weight:600; flex:1;
}
#bottomnav a svg{ width:22px; height:22px; }
#bottomnav a.current{ color:var(--sage-dark); }
@media (min-width:900px){ #bottomnav{ display:none; } }

/* ==========================================================================
   Splash + hero (front page)
   ========================================================================== */
#splash{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  padding:0 36px;
  transition:transform .75s cubic-bezier(.6,0,.3,1), opacity .75s ease;
}
#splash img{ width:min(72vw,440px); filter:drop-shadow(0 2px 10px rgba(44,36,22,0.08)); }
#splash .tagline{
  font-family:'Caveat', cursive; font-weight:600; font-size:clamp(22px,4.4vw,34px);
  color:var(--ink-mid); max-width:480px; text-align:center; line-height:1.3;
}
#splash.hide{ transform:translateY(-100%); }

#hero{
  position:relative; height:100svh; min-height:560px; width:100%;
  background-image:var(--hero-mobile); background-size:cover; background-position:center 30%;
  display:flex; align-items:center; justify-content:center;
}
@media (min-width:768px){ #hero{ background-image:var(--hero-desktop); background-position:center 40%; } }
#hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(44,36,22,0.18) 0%, rgba(44,36,22,0.22) 45%, rgba(44,36,22,0.45) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; max-width:520px; padding:0 24px; text-align:center; }
.order-btn{
  display:inline-block; background:var(--bg); color:var(--ink);
  font-size:16px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:16px 44px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,0.28);
  transition:transform .15s ease, background .15s ease;
}
.order-btn:hover{ background:var(--card); }
.order-btn:active{ transform:scale(0.97); }

#next{ padding:56px 24px 100px; max-width:640px; margin:0 auto; text-align:center; }
#next h2{ font-family:'Gobold Lowplus','Anton',sans-serif; font-size:24px; color:var(--sage-dark); margin-bottom:10px; }
#next p{ font-size:15px; color:var(--ink-mid); line-height:1.6; }
@media (min-width:900px){ #next{ padding-top:88px; } }

/* ==========================================================================
   Cards, buttons, form fields — shared utility classes
   ========================================================================== */
.rc-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; }
.rc-section-label{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--ink-mid); margin:22px 0 10px;
}
.rc-btn-solid{
  display:inline-block; padding:13px 26px; border-radius:999px;
  background:var(--sage-dark); color:var(--bg); font-size:14.5px; font-weight:700; letter-spacing:0.02em;
}
.rc-btn-solid:hover{ background:var(--sage); }
.rc-btn-outline{
  display:inline-block; padding:12px 26px; border-radius:999px;
  border:1.5px solid var(--sage-dark); color:var(--sage-dark); background:transparent;
  font-size:14.5px; font-weight:700; letter-spacing:0.02em;
}
.rc-btn-outline:hover{ background:var(--card); }
.rc-field{ margin-bottom:14px; }
.rc-field label{
  display:block; font-size:12px; font-weight:700; color:var(--ink-mid);
  margin-bottom:6px; letter-spacing:0.02em; text-transform:uppercase;
}
.rc-field input, .rc-field textarea, .rc-field select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg); font-size:15px; color:var(--ink); font-family:inherit;
}
.rc-field input:focus, .rc-field textarea:focus, .rc-field select:focus{
  outline:2px solid var(--sage-light); outline-offset:1px;
}

/* ==========================================================================
   Order landing (page-order.php) — category tiles
   ========================================================================== */
.rc-page-head{ padding:28px 24px 8px; max-width:1000px; margin:0 auto; text-align:center; }
.rc-page-head h1{ font-size:clamp(26px,5vw,38px); line-height:1.05; }
.rc-page-head p{ color:var(--ink-mid); font-size:14px; margin-top:8px; }

.tiles-grid{ display:grid; grid-template-columns:1fr; gap:20px; max-width:1100px; margin:0 auto; padding:8px 20px 40px; }
@media (min-width:800px){ .tiles-grid{ grid-template-columns:repeat(3,1fr); } }
.tile{
  position:relative; border-radius:22px; overflow:hidden; aspect-ratio:3/4;
  box-shadow:0 12px 30px rgba(44,36,22,0.14); transition:transform .2s ease;
}
.tile:hover{ transform:translateY(-4px); }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0.62; }
.tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(44,36,22,0.02) 0%, rgba(44,36,22,0.32) 100%);
}
.tile-panel{
  position:absolute; top:16px; left:16px; right:16px; z-index:2;
  background:rgba(242,237,224,0.93); border-radius:14px; padding:16px 18px 18px;
  box-shadow:0 6px 16px rgba(44,36,22,0.16);
}
.tile-badge{
  display:inline-block; background:var(--gold); color:var(--ink);
  font-size:10.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px; margin-bottom:8px;
}
.tile-panel h3{ font-family:'Gobold Lowplus','Anton',sans-serif; color:var(--sage-dark); font-size:clamp(19px,2.8vw,25px); line-height:1.08; }
.tile-panel .tap{
  display:block; margin-top:10px; font-size:11.5px; font-weight:700; color:var(--ink-mid);
  letter-spacing:0.04em; text-transform:uppercase;
}

/* ==========================================================================
   Delivery date picker (Order page + Cart page)
   ========================================================================== */
.date-picker-wrap{ max-width:640px; margin:0 auto 24px; padding:16px 18px 18px; background:var(--card); border:1px solid var(--border); border-radius:16px; }
.dp-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.dp-head .clock{ width:30px; height:30px; border-radius:999px; flex-shrink:0; background:rgba(107,124,92,0.14); color:var(--sage-dark); display:flex; align-items:center; justify-content:center; }
.dp-head .clock svg{ width:16px; height:16px; }
.dp-head .dp-title{ font-size:14px; font-weight:700; color:var(--ink); }
.dp-sub{ font-size:12px; color:var(--ink-mid); line-height:1.5; margin-bottom:14px; }
.dp-sub strong{ color:var(--sage-dark); }
.date-scroll{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; }
.date-chip{
  flex:0 0 66px; display:flex; flex-direction:column; align-items:center;
  padding:10px 4px 9px; border-radius:12px; background:var(--bg); border:1.5px solid var(--border);
  font-size:11px; color:var(--ink-mid); cursor:pointer;
}
.date-chip .dow{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; }
.date-chip .dnum{ font-size:19px; font-weight:800; color:var(--ink); line-height:1; }
.date-chip .dmon{ font-size:10.5px; margin-top:3px; }
.date-chip:hover:not(.disabled){ border-color:var(--sage); }
.date-chip.selected{ background:var(--sage-dark); border-color:var(--sage-dark); }
.date-chip.selected .dow, .date-chip.selected .dnum, .date-chip.selected .dmon{ color:var(--bg); }
.date-chip.disabled{ background:var(--card-deep); color:var(--ink-faint); cursor:not-allowed; opacity:0.6; }
.date-chip.disabled .dnum{ color:var(--ink-faint); text-decoration:line-through; }
.date-chip.blocked .dmon{ color:var(--red); }
.dp-selected{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-size:13.5px; color:var(--ink); }
.dp-selected strong{ color:var(--sage-dark); }

/* ==========================================================================
   Rewards (My Account endpoint)
   ========================================================================== */
.rewards-hero{ display:flex; align-items:center; gap:18px; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; margin-bottom:14px; }
.ring-wrap{ position:relative; width:88px; height:88px; flex-shrink:0; }
.ring{ width:88px; height:88px; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:var(--border); stroke-width:9; }
.ring-fill{ fill:none; stroke:var(--sage-dark); stroke-width:9; stroke-linecap:round; }
.ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-points{ font-size:22px; font-weight:800; color:var(--sage-dark); line-height:1; }
.ring-label{ font-size:9.5px; font-weight:700; color:var(--ink-mid); text-transform:uppercase; letter-spacing:0.03em; margin-top:2px; }
.rewards-next{ font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:5px; }
.rewards-sub{ font-size:12px; color:var(--ink-mid); line-height:1.5; font-style:italic; }
.tier-scroll{ display:flex; gap:12px; overflow-x:auto; padding:2px 2px 10px; }
.tier-card{ flex:0 0 152px; background:var(--card); border:1.5px solid var(--border); border-radius:14px; padding:16px 14px; text-align:center; }
.tier-card.unlocked{ border-color:var(--sage-dark); background:rgba(107,124,92,0.08); }
.tier-card.coming-soon{ border-style:dashed; opacity:0.75; }
.tier-emoji{ font-size:26px; margin-bottom:8px; }
.tier-points{ font-size:11px; font-weight:700; color:var(--sage-dark); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.tier-title{ font-size:14.5px; font-weight:700; margin-bottom:6px; }
.tier-desc{ font-size:11.5px; color:var(--ink-mid); line-height:1.4; margin-bottom:12px; min-height:44px; }
.tier-btn{ width:100%; padding:9px 0; border-radius:999px; font-size:12.5px; font-weight:700; background:var(--sage-dark); color:var(--bg); }
.tier-btn:disabled{ background:var(--card-deep); color:var(--ink-muted); cursor:default; }

/* ==========================================================================
   Order status tracker (Thank-you page)
   ========================================================================== */
.kitchen-scene{ position:relative; width:190px; height:150px; margin:0 auto 6px; }
.pot{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:140px; height:66px; background:linear-gradient(180deg,var(--sage),var(--sage-dark)); border-radius:0 0 36px 36px; box-shadow:0 8px 18px rgba(44,36,22,0.18); }
.pot::before{ content:''; position:absolute; top:-9px; left:-8px; right:-8px; height:18px; background:var(--ink); border-radius:50%; }
.pot::after{ content:''; position:absolute; top:-3px; left:8px; right:8px; height:12px; background:#3A2F1E; border-radius:50%; }
.pot-handle{ position:absolute; top:14px; width:12px; height:22px; border:4px solid var(--ink); }
.pot-handle.left{ left:-14px; border-right:none; border-radius:8px 0 0 8px; }
.pot-handle.right{ right:-14px; border-left:none; border-radius:0 8px 8px 0; }
.steam{ position:absolute; bottom:70px; width:9px; height:9px; background:rgba(242,237,224,0.65); border-radius:50%; filter:blur(3px); animation:rc-rise 2.6s ease-in infinite; opacity:0; }
.steam.s1{ left:38%; animation-delay:0s; } .steam.s2{ left:48%; animation-delay:0.9s; } .steam.s3{ left:58%; animation-delay:1.7s; }
@keyframes rc-rise{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 25%{ opacity:.6; } 100%{ transform:translateY(-46px) scale(1.4); opacity:0; } }
.spoon-pivot{ position:absolute; left:50%; top:2px; width:2px; height:2px; animation:rc-orbit 2.4s linear infinite; }
@keyframes rc-orbit{ from{ transform:translateX(-50%) rotate(0deg); } to{ transform:translateX(-50%) rotate(360deg); } }
.spoon{ position:absolute; top:0; left:0; transform:translateX(-50%); width:4px; height:64px; background:var(--brown); border-radius:3px; }
.spoon::after{ content:''; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); width:13px; height:9px; background:var(--brown); border-radius:50%; }
.status-track{ position:relative; display:flex; justify-content:space-between; max-width:400px; margin:28px auto 34px; padding:0 4px; }
.status-line{ position:absolute; top:11px; left:26px; right:26px; height:3px; background:var(--border); border-radius:2px; }
.status-line-fill{ position:absolute; top:11px; left:26px; height:3px; background:var(--sage-dark); border-radius:2px; transition:width .5s ease; }
.status-step{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; flex:1; }
.status-dot{ width:24px; height:24px; border-radius:999px; background:var(--card); border:3px solid var(--border); display:flex; align-items:center; justify-content:center; }
.status-step.done .status-dot{ background:var(--sage-dark); border-color:var(--sage-dark); }
.status-step.active .status-dot{ background:var(--bg); border-color:var(--sage-dark); animation:rc-pulse 1.6s ease-in-out infinite; }
@keyframes rc-pulse{ 0%,100%{ box-shadow:0 0 0 5px rgba(107,124,92,.16); } 50%{ box-shadow:0 0 0 9px rgba(107,124,92,.06); } }
.status-label{ margin-top:9px; font-size:11px; font-weight:700; text-align:center; color:var(--ink-mid); max-width:82px; line-height:1.35; }
.status-step.done .status-label, .status-step.active .status-label{ color:var(--ink); }


/* ==========================================================================
   Christmas with RoastedbyChefMagz (seasonal)
   ========================================================================== */
:root{ --xmas-red:#8E2B2B; --xmas-red-dark:#6E1F20; --xmas-pine:#2F4A3A; }
.xmas-hero, .xmas-banner{
  position:relative; color:var(--bg); text-align:center; overflow:hidden;
  background-color:var(--xmas-red);
  background-image:
    radial-gradient(circle at 12% 22%, rgba(200,169,81,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 14%, rgba(242,237,224,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 70%, rgba(242,237,224,.35) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 90% 64%, rgba(200,169,81,.5) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 55% 40%, rgba(242,237,224,.3) 0 1.5px, transparent 2.5px);
  background-size:180px 180px, 220px 220px, 160px 160px, 240px 240px, 200px 200px;
  border-bottom:6px solid var(--gold);
}
.xmas-hero{ padding:64px 22px 56px; }
.xmas-banner{ padding:48px 22px; border-top:6px solid var(--gold); }
.xmas-hero-inner, .xmas-banner-inner{ position:relative; max-width:620px; margin:0 auto; }
.xmas-kicker{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--xmas-red-dark); background:var(--gold); padding:6px 14px; border-radius:999px; margin:0 0 16px; }
.xmas-title{ font-family:'Gobold Lowplus','Anton',sans-serif; font-weight:400; font-size:clamp(40px,8vw,72px); line-height:.95; letter-spacing:-.01em; color:var(--bg); margin:0 0 16px; }
.xmas-sub{ font-size:15.5px; line-height:1.6; color:var(--bg); opacity:.95; margin:0 auto 22px; max-width:520px; }
.xmas-btn{ display:inline-block; background:var(--gold); color:var(--ink); font-weight:700; font-size:15px; letter-spacing:.04em; text-transform:uppercase; padding:15px 34px; border-radius:999px; box-shadow:0 8px 22px rgba(0,0,0,.25); }
.xmas-btn:hover{ background:var(--bg); }
.xmas-cutoff{ font-size:13px; color:var(--bg); margin:14px 0 0; }
.xmas-body{ max-width:900px; margin:0 auto; padding:30px 20px 50px; }
.xmas-grid-2{ display:grid; gap:16px; }
@media (min-width:760px){ .xmas-grid-2{ grid-template-columns:1fr 1fr; } }
.xmas-card{ border-top:4px solid var(--xmas-red); }
.xmas-card p{ font-size:14px; line-height:1.6; color:var(--ink); margin:0 0 10px; }
.xmas-h2{ font-family:'Gobold Lowplus','Anton',sans-serif; font-weight:400; font-size:26px; color:var(--xmas-red); margin:0 0 12px; letter-spacing:-.01em; }
.xmas-label{ font-size:10.5px !important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--xmas-pine) !important; margin:12px 0 2px !important; }
.xmas-list{ margin:0; padding-left:18px; font-size:14px; line-height:1.9; }
.xmas-list li::marker{ color:var(--gold); }
.xmas-sizes{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:640px){ .xmas-sizes{ grid-template-columns:repeat(5,1fr); } }
.xmas-size{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px 10px; text-align:center; }
.xmas-size-for{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mid); }
.xmas-size-n{ font-family:'Gobold Lowplus','Anton',sans-serif; font-size:26px; color:var(--xmas-pine); line-height:1.1; margin:2px 0 6px; }
.xmas-size-price{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.xmas-size-btn{ display:inline-block; background:var(--xmas-red); color:var(--bg); font-size:13px; font-weight:700; padding:8px 18px; border-radius:999px; }
.xmas-size-btn:hover{ background:var(--xmas-red-dark); }
.xmas-note{ border-top:4px solid var(--xmas-red); }