:root{
  --green:#137a3f;
  --dark:#0a542e;
  --light:#eaf7ed;
  --pale:#f6fbf6;
  --lime:#c9e780;
  --ink:#173021;
  --muted:#657369;
  --line:#d7e7da;
  --danger:#b9372a
}
.simple-steps{grid-template-columns:1.1fr repeat(4,1fr)}
body{
  background:
    radial-gradient(circle at 8% 8%,#e7f5e8 0,transparent 25rem),
    linear-gradient(180deg,#fff 0,#f7fbf7 100%);
}
.site-header{
  border-bottom-color:#dbe9dd;
  background:#fffffff2;
}
.brand>span,.footer-brand>span{
  border-color:var(--lime);
  box-shadow:0 0 0 2px #137a3f1c;
}
.header-order,.official-badge,.hero-button,.pick-button,.pay-button{
  box-shadow:0 9px 25px #137a3f2e;
}
.hero-card{
  box-shadow:0 18px 50px #0b512b22;
}
.hero-shade{
  background:linear-gradient(90deg,#041b0fdf 0%,#0a3e24b8 55%,#08291938 100%);
}
.hero-tagline{
  border-color:#d9f1c96b;
  background:#0b512b80;
}
.order-note{
  border-color:#d7e7da;
  background:linear-gradient(135deg,#f7fcf7,#edf8ef);
}
.package-card.popular{
  border-color:#91caa1;
  box-shadow:0 13px 34px #137a3f17;
}
.popular-label{
  border-color:#b9e1c5;
  background:#f0fff4;
}
.modal-backdrop{
  background:#071b11b5;
}
.modal-close{
  background:#edf8f0;
}
.customer-fields input:focus,
.customer-fields textarea:focus,
.customer-fields select:focus{
  outline:2px solid #91d4a4;
  border-color:var(--green);
}
.location-button,.quote-button{
  grid-column:1/-1;
  width:100%;
  min-height:48px;
  margin-top:3px;
  padding:12px;
  border:1px solid #a9d4b5;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
}
.location-button{
  background:#f1faf3;
  color:#0d6736;
}
.quote-button{
  border-color:var(--green);
  background:var(--green);
  color:#fff;
}
.location-button:disabled,.quote-button:disabled{opacity:.55}
.location-status{
  grid-column:1/-1;
  margin:0 2px;
  color:#617266;
  font-size:11px;
}
.location-status b{color:var(--dark)}
.location-detect{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.location-detect span{
  min-width:0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  display:grid;
  grid-template-columns:30px 1fr;
  background:#f8fbf8;
}
.location-detect i{
  grid-row:1/3;
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e4ece6;
  color:var(--muted);
  font-style:normal;
  font-weight:900;
}
.location-detect b{font-size:11px}
.location-detect small{overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.location-detect span.is-done{border-color:#8bc39b;background:var(--light)}
.location-detect span.is-done i{background:var(--green);color:#fff}
.delivery-price{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  padding:12px 14px;
  border-radius:12px;
  background:#eaf7ed;
  color:#0a542e;
}
.delivery-price[hidden]{display:none}
.customer-fields select{
  width:100%;
  min-height:46px;
  margin-top:5px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fcfefc;
}
.customer-fields .pickup-field{grid-column:1/-1}
.customer-flow{
  position:sticky;
  z-index:35;
  top:84px;
  margin:18px 0 30px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:18px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  background:#ffffffed;
  box-shadow:0 10px 28px #0b512b12;
  backdrop-filter:blur(12px);
}
.customer-flow span{min-width:0;padding:8px 3px;border-radius:12px;display:flex;flex-direction:column;align-items:center;color:var(--muted);font-size:10px}
.customer-flow i{width:25px;height:25px;margin-bottom:4px;border-radius:50%;display:grid;place-items:center;background:#edf4ef;font-style:normal;font-weight:900}
.customer-flow .is-active{background:var(--light);color:var(--dark)}.customer-flow .is-active i{background:var(--green);color:#fff}
.outlet-picker{scroll-margin-top:150px;margin-bottom:35px}
.outlet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.outlet-choice{min-width:0;min-height:96px;padding:13px;border:1px solid var(--line);border-radius:17px;display:grid;grid-template-columns:43px 1fr 18px;align-items:center;gap:10px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;transition:.18s}
.outlet-choice:hover,.outlet-choice.is-selected{border-color:#4fa36d;box-shadow:0 10px 25px #137a3f18;transform:translateY(-1px)}
.outlet-choice.is-selected{outline:3px solid #9bd4aa66}
.outlet-icon{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:var(--green);color:#fff;font-size:12px;font-weight:1000}
.outlet-copy{display:flex;min-width:0;flex-direction:column}.outlet-copy b{font-size:14px}.outlet-copy small{overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:10px;white-space:nowrap}.outlet-copy em{margin-top:5px;color:var(--green);font-size:10px;font-style:normal;font-weight:900}
.outlet-choice.is-closed .outlet-icon{background:#8d6a18}.outlet-choice.is-closed .outlet-copy em{color:#8d6a18}.outlet-arrow{font-size:25px;color:var(--green)}
.flavour-control.is-sold-out{opacity:.58;background:#f0f1f0}
.flavour-control.is-sold-out small{color:#a43a31;font-weight:900}
.flavour-control button:disabled{cursor:not-allowed;opacity:.45}
.pick-button:disabled{background:#9aa79e!important;color:#fff!important;box-shadow:none!important}
.selected-outlet-note{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--light);color:var(--dark);font-size:12px}
.packages{position:relative;scroll-margin-top:150px}.packages.is-locked .package-grid{opacity:.24;pointer-events:none;filter:grayscale(.5)}.package-lock{display:none}.packages.is-locked .package-lock{position:absolute;z-index:2;inset:78px 0 auto;padding:18px;border:1px solid #b7d7c0;border-radius:15px;display:block;background:#fff;text-align:center;color:var(--dark);font-weight:900;box-shadow:0 12px 30px #0b512b1a}
.modal-outlet-summary{grid-column:1/-1;padding:11px 13px;border-radius:12px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;background:var(--light)}.modal-outlet-summary span{grid-row:1/3;color:var(--green);font-size:10px;font-weight:1000}.modal-outlet-summary b{font-size:14px}.modal-outlet-summary small{color:var(--muted)}
.preorder-field{grid-column:1/-1;padding:12px;border:1px solid #e1c37a;border-radius:12px;background:#fff8e7}.preorder-field[hidden]{display:none}.preorder-field small{display:block;margin-top:4px;color:#7f6119}
.order-status-flow{max-width:680px;margin:22px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.order-status-flow span{padding:12px 8px;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;background:#fff;color:var(--muted)}.order-status-flow i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#edf3ef;font-style:normal;font-weight:900}.order-status-flow b{margin-top:4px}.order-status-flow small{font-size:9px;text-transform:capitalize}.order-status-flow .active{border-color:#dfbd67;background:#fff9e8;color:#795a10}.order-status-flow .done{border-color:#8bc39b;background:var(--light);color:var(--dark)}.order-status-flow .done i{background:var(--green);color:#fff}
.payment-result-page{position:relative;min-height:calc(100dvh - 78px);padding:28px 16px;display:grid;place-items:center;overflow:hidden}
.payment-result-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 12%,#dff3e4 0,transparent 28rem),linear-gradient(180deg,#eff8f1,#f8fcf9)}
.payment-result-popup{position:relative;z-index:1;width:min(460px,100%);padding:30px;border:1px solid #cfe2d4;border-radius:25px;background:#fff;text-align:center;box-shadow:0 24px 70px #0b512b24;animation:payment-pop .28s ease-out}
@keyframes payment-pop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.payment-result-icon{width:72px;height:72px;margin:0 auto 15px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-size:35px;font-weight:1000;box-shadow:0 12px 28px #137a3f32}
.payment-state-failed .payment-result-icon{background:#b9372a;box-shadow:0 12px 28px #b9372a2e}
.payment-state-pending .payment-result-icon{background:#a87816;box-shadow:0 12px 28px #a878162e}
.payment-result-popup>small{color:var(--green);font-size:10px;font-weight:1000;letter-spacing:.8px}
.payment-result-popup h1{margin:5px 0 9px;font-size:31px;line-height:1.05;letter-spacing:-1.2px}
.payment-result-popup>p{margin:0;color:var(--muted)}
.payment-result-summary{margin:20px 0;padding:13px;border-radius:14px;display:grid;grid-template-columns:1fr 1fr;background:var(--light)}
.payment-result-summary span{display:flex;flex-direction:column;color:var(--muted);font-size:10px}
.payment-result-summary b{margin-top:3px;color:var(--dark);font-size:15px}
.payment-result-actions{display:grid;gap:9px;margin-top:18px}
.payment-result-actions a{min-height:52px;padding:12px 16px;border-radius:14px;display:grid;place-items:center;font-weight:900}
.payment-primary{background:var(--green);color:#fff;box-shadow:0 9px 25px #137a3f2e}
.payment-state-failed .payment-primary{background:#b9372a}
.payment-secondary{border:1px solid var(--line);background:#fff;color:var(--dark)}
.payment-countdown{color:var(--muted);font-size:10px}
.payment-safe-note{margin:0!important;padding:10px 12px;border-radius:11px;background:#fff8e7;color:#755a18!important;font-size:10px}
.payment-help{margin-top:17px!important;font-size:11px}
.payment-help a{color:var(--green);font-weight:900}
.live-order-status{max-width:680px;margin:20px auto;padding:12px;border:1px solid var(--line);border-radius:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#fff;box-shadow:0 12px 30px #0b512b12}
.live-order-status>div{min-width:0;padding:12px;border-radius:13px;background:var(--pale);display:flex;flex-direction:column}
.live-order-status small{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.3px}
.live-order-status b{margin-top:4px;color:var(--dark);font-size:13px;line-height:1.25}
.live-order-status a{margin-top:6px;color:var(--green);font-size:11px;font-weight:900}
.live-order-status .live-updated{grid-column:1/-1;padding:0 4px;text-align:right}
.admin-delivery-status{margin:0 0 15px;padding:13px;border:1px solid var(--line);border-radius:13px;display:flex;flex-direction:column;background:var(--light)}
.admin-delivery-status small{color:var(--muted);font-size:9px;font-weight:900}
.admin-delivery-status b{margin-top:3px;color:var(--dark)}
.admin-delivery-status span,.admin-delivery-status a{margin-top:4px;font-size:11px}
.admin-delivery-status a{color:var(--green);font-weight:900}
.billplz-sync-form{margin:0 0 16px;padding:12px;border:1px solid #e1c37a;border-radius:13px;background:#fff8e7}
.billplz-sync-form button{width:100%}
.billplz-sync-form small{display:block;margin-top:7px;color:#755a18;text-align:center}
.simple-steps{
  border:1px solid #d7e7da;
  background:linear-gradient(135deg,#eef8f0,#e4f3e7);
}
.site-footer{
  background:#fff;
  box-shadow:0 14px 38px #0b512b0a;
}
@media(max-width:620px){
  .simple-steps{grid-template-columns:1fr 1fr}.simple-steps>b{grid-column:1/-1}
  .hero-shade{background:linear-gradient(90deg,#041b0fe8 0%,#0a492bb3 74%,#08311c2b)}
  .header-order{min-width:135px}
  .customer-flow{top:68px;margin:11px 0 23px;padding:6px}.customer-flow span{font-size:8px}.customer-flow i{width:22px;height:22px}
  .outlet-grid{grid-template-columns:1fr}.outlet-choice{min-height:82px}
  .outlet-picker,.packages{scroll-margin-top:130px}
  .order-status-flow{grid-template-columns:1fr 1fr;gap:6px}.order-status-flow span{padding:10px 4px}.order-status-flow b{font-size:11px}
  .payment-result-page{min-height:calc(100dvh - 64px);padding:14px}
  .payment-result-popup{padding:25px 18px;border-radius:22px}
  .payment-result-popup h1{font-size:27px}
  .live-order-status{grid-template-columns:1fr}
  .live-order-status .live-updated{grid-column:1}
}