/* ══════════════════════════════════════════════════════════
   Online narudžba pizza — Glovo-style tema
   Žuta (#FFC244) + tirkizno-zelena (#00A082) + crna na bijelom.
   Zaobljeno, hrabro, razigrano. Klase iste kao prije (pizza.js).
   ══════════════════════════════════════════════════════════ */

:root{
  --bg:#fafafa;
  --surface:#ffffff;
  --surface-2:#f6f6f4;
  --ink:#1a1a1a;
  --ink-2:#6b6b6b;
  --ink-3:#9b9b9b;
  --line:#ededed;
  --line-2:#e2e2e2;

  --brand:#72ab3e;          /* Zelena iz logotipa (Međimurska hiža) — promijeni ovdje za točan ton */
  --brand-strong:#5e9130;   /* tamnija zelena (hover) */
  --brand-ink:#ffffff;      /* tekst/ikone na zelenoj = bijelo */
  --brand-tint:#edf4dd;     /* svijetli zeleni wash */

  --teal:#00a082;           /* Glovo zelena */
  --teal-strong:#00806a;
  --teal-tint:#e0f3ee;

  --warn:#b7791f;
  --warn-tint:#fbf0d8;

  --font-display:'Poppins',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-body:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --r-card:20px;
  --r-ctrl:14px;
  --r-chip:11px;
  --sh-sm:0 1px 2px rgba(26,26,26,.05), 0 1px 1px rgba(26,26,26,.03);
  --sh-md:0 6px 20px -8px rgba(26,26,26,.12);
  --sh-lg:0 16px 38px -14px rgba(26,26,26,.22);
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

#onp-wrap{ max-width:540px; margin:0 auto; padding:22px 16px 40px; }

/* ── Logo ── */
.onp-logo{ text-align:center; margin:6px 0 20px; }
.onp-logo img{ max-height:175px; width:auto; }

/* ── Step tracker ── */
.onp-prog-wrap{ margin:2px 0 18px; }
.onp-prog{ display:flex; align-items:flex-start; justify-content:center; }
.onp-prog-step{ display:flex; flex-direction:column; align-items:center; flex:0 0 auto; width:82px; }
.onp-pnum{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--surface); color:var(--ink-3);
  border:2px solid var(--line-2); box-shadow:var(--sh-sm); transition:.2s;
}
.onp-pnum.act{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); box-shadow:0 5px 14px -4px rgba(114,171,62,.9); }
.onp-pnum.done{ background:var(--brand-strong); color:#fff; border-color:var(--brand-strong); }
.onp-plabel{ margin-top:8px; font-size:11.5px; font-weight:600; color:var(--ink-3); text-align:center; white-space:nowrap; }
.onp-plabel.act{ color:var(--ink); }
.onp-pline{ flex:0 0 auto; width:30px; height:3px; background:var(--line-2); margin:15px 0 0; border-radius:3px; }
.onp-pline.done{ background:var(--brand-strong); }

/* ── Screen card ── */
.onp-screen{
  background:transparent; border:0;
  border-radius:0; box-shadow:none; padding:6px 20px;
}
.onp-anim{ animation:onp-rise .34s cubic-bezier(.22,.9,.3,1) both; }
@keyframes onp-rise{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

.onp-title{ font-family:var(--font-display); font-weight:800; font-size:27px; line-height:1.1; letter-spacing:-.02em; margin:0 0 4px; text-align:center; }
.onp-subtitle{ margin:0 0 18px; color:var(--ink-2); font-size:14px; font-weight:500; text-align:center; }

/* ── Category tabs ── */
.onp-cats{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; margin:0 -20px 8px; padding-left:20px; padding-right:20px; scrollbar-width:none; }
.onp-cats::-webkit-scrollbar{ display:none; }
.onp-cat-tab{
  flex:0 0 auto; cursor:pointer;
  background:var(--surface); color:var(--ink); border:2px solid var(--line-2); border-radius:999px;
  padding:8px 15px; font-family:inherit; font-size:13.5px; font-weight:700;
  display:inline-flex; align-items:center; gap:7px; transition:.15s;
}
.onp-cat-tab:hover{ border-color:var(--ink-3); }
.onp-cat-tab.active{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.onp-cat-count{ font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; background:rgba(0,0,0,.08); border-radius:999px; padding:1px 7px; min-width:20px; text-align:center; }
.onp-cat-tab.active .onp-cat-count{ background:rgba(0,0,0,.14); }

/* ── Pizza list ── */
.onp-pizza-list{ display:flex; flex-direction:column; }
.onp-pizza-row{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); }
.onp-pizza-row:first-child{ padding-top:4px; }
.onp-pizza-row:last-child{ border-bottom:0; padding-bottom:2px; }
.onp-pizza-row.has-order{
  background:var(--brand-tint); margin:0 -20px; padding-left:20px; padding-right:20px;
  border-radius:16px; border-bottom-color:transparent;
}

.onp-pizza-thumb{ flex:0 0 auto; cursor:pointer; position:relative; }
.onp-vege{
  position:absolute; top:-6px; right:-6px; width:24px; height:24px; border-radius:50%;
  background:#fff; border:1.5px solid var(--brand); box-shadow:var(--sh-sm);
  display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1;
}
.onp-modal-photo .onp-vege{ top:12px; left:12px; right:auto; }
.onp-vege-lg{ width:38px; height:38px; font-size:20px; border-width:2px; }
.onp-pizza-img, .onp-pizza-img-ph{ width:84px; height:84px; border-radius:16px; object-fit:cover; display:block; box-shadow:var(--sh-sm); }
.onp-pizza-img-ph{ display:flex; align-items:center; justify-content:center; font-size:38px; background:var(--surface-2); border:1px solid var(--line); }

.onp-pizza-info{ flex:1 1 auto; min-width:0; }
.onp-pizza-name{ font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em; cursor:pointer; }
.onp-pizza-desc{ color:var(--ink-2); font-size:13px; line-height:1.45; margin-top:2px; font-weight:500; }

.onp-info-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
.onp-extras-toggle{ cursor:pointer; background:none; border:0; padding:0; color:var(--teal-strong); font-family:inherit; font-size:13px; font-weight:700; }
.onp-extras-toggle:hover{ text-decoration:underline; }
.onp-tag{ font-size:11.5px; font-weight:700; color:var(--teal-strong); background:var(--teal-tint); border-radius:999px; padding:3px 10px; white-space:nowrap; }

/* ── Extras panel ── */
.onp-extras{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.onp-extras-size{ font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.onp-extras-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.onp-extra-chip{
  cursor:pointer; background:var(--surface); border:2px solid var(--line-2); border-radius:var(--r-chip);
  padding:6px 11px; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink);
  display:inline-flex; align-items:center; gap:6px; transition:.13s;
}
.onp-extra-chip span{ color:var(--ink-3); font-weight:700; }
.onp-extra-chip:hover{ border-color:var(--ink-3); }
.onp-extra-chip.sel{ background:var(--brand-tint); border-color:var(--brand); color:var(--ink); }
.onp-extra-chip.sel span{ color:var(--warn); }

/* ── Size / price options ── */
.onp-pizza-sizes{ flex:0 0 auto; display:flex; flex-direction:column; gap:7px; width:152px; }
.onp-opt{
  width:100%; cursor:pointer; text-align:left;
  background:var(--surface); border:2px solid var(--line-2); border-radius:var(--r-ctrl);
  padding:8px 11px; font-family:inherit; transition:.14s;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.onp-opt:hover{ border-color:var(--brand); }
.onp-opt.on{ background:var(--brand-tint); border-color:var(--brand); cursor:default; }
.onp-opt-info{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.onp-opt-size{ font-size:11px; font-weight:600; color:var(--ink-2); }
.onp-opt-price{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.onp-opt-add{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--brand); color:var(--brand-ink); font-size:15px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; }

.onp-opt-qty{ flex:0 0 auto; display:flex; align-items:center; gap:3px; }
.onp-opt-qty button{
  width:26px; height:26px; border-radius:9px; cursor:pointer;
  background:var(--brand); border:0; color:var(--brand-ink);
  font-size:16px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; transition:.12s;
}
.onp-opt-qty button:hover{ background:var(--brand-strong); }
.onp-opt-qty span{ min-width:16px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }

/* ── Sticky cart bar ── */
.onp-sticky{
  position:sticky; bottom:12px; z-index:5;
  display:flex; align-items:center; gap:10px; margin:20px -20px 0; padding:10px 14px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-lg);
}
.onp-btn-back{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink); font-size:19px; line-height:1; transition:.14s;
}
.onp-btn-back:hover{ background:#fff; border-color:var(--ink-3); }
.onp-cart-pill{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; padding-left:6px; line-height:1.2; }
.onp-cart-pill>span:first-child{ font-size:12px; color:var(--ink-2); font-weight:600; }
.onp-cart-price{ font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.onp-btn{
  flex:0 0 auto; cursor:pointer;
  background:var(--brand); color:var(--brand-ink); border:0; border-radius:14px;
  padding:14px 22px; font-family:inherit; font-size:15px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px; transition:.15s;
  box-shadow:0 7px 18px -6px rgba(114,171,62,.95);
}
.onp-btn:hover:not(:disabled){ background:var(--brand-strong); }
.onp-btn:disabled{ opacity:.6; cursor:default; }
.onp-btn-arrow{ font-size:16px; transition:transform .15s; }
.onp-btn:hover:not(:disabled) .onp-btn-arrow{ transform:translateX(3px); }

.onp-cta-empty{ margin-top:18px; text-align:center; padding:18px; border:2px dashed var(--line-2); border-radius:16px; }
.onp-cta-empty p{ margin:0; color:var(--ink-2); font-size:14px; font-weight:600; }

/* ── Checkout: form fields ── */
.onp-fields{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.onp-field input, .onp-field select, .onp-field textarea, .onp-select, .onp-textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:2px solid var(--line-2); border-radius:var(--r-ctrl);
  padding:12px 14px; transition:.15s; -webkit-appearance:none; appearance:none;
}
.onp-field input::placeholder, .onp-textarea::placeholder{ color:var(--ink-3); }
.onp-field input:focus, .onp-field select:focus, .onp-field textarea:focus, .onp-select:focus, .onp-textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-tint);
}
.onp-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239b9b9b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer;
}
.onp-select.empty{ color:var(--ink-3); }
.onp-textarea{ resize:vertical; min-height:64px; line-height:1.5; }
.onp-ferr{ margin:6px 2px 0; color:#c0392b; font-size:12.5px; font-weight:600; }

/* ── Zone info ── */
/* Spremljena adresa (prijavljeni gost) */
.onp-saved-addr{ background:var(--surface-2); border:1.5px solid var(--line-2); border-radius:14px; padding:14px 16px; }
.onp-sa-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:4px; }
.onp-sa-val{ font-size:15px; font-weight:700; color:var(--ink); }
.onp-sa-change{ margin-top:10px; background:none; border:0; padding:0; cursor:pointer; color:var(--brand-strong); font-family:inherit; font-size:13px; font-weight:700; text-decoration:underline; }

.onp-zone-info{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; padding:10px 13px; border-radius:13px; background:var(--teal-tint); font-size:13px; color:var(--teal-strong); font-weight:500; }
.onp-zone-info.warn{ background:var(--warn-tint); color:var(--warn); }
.onp-zone-badge{ font-weight:700; background:rgba(0,0,0,.06); border-radius:999px; padding:2px 10px; font-size:12px; }
.onp-zone-info strong{ font-weight:700; }

/* ── Order review ── */
.onp-order-review{ background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:14px 16px; }
.onp-review-title{ font-family:var(--font-display); font-weight:700; font-size:14px; margin-bottom:8px; }
.onp-review-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line-2); font-size:14px; }
.onp-review-row:last-of-type{ border-bottom:0; }
.onp-review-left{ min-width:0; }
.onp-review-cat{ color:var(--ink-3); font-weight:600; font-size:12px; }
.onp-review-badge{ display:inline-block; font-size:10.5px; font-weight:700; border-radius:6px; padding:1px 6px; margin:0 2px; text-transform:capitalize; }
.onp-review-badge.mala{ background:#eef0f2; color:#5a6675; }
.onp-review-badge.velika{ background:var(--brand-tint); color:var(--warn); }
.onp-review-extras{ color:var(--ink-2); font-size:12px; }
.onp-review-price{ font-family:var(--font-display); font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.onp-review-total{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:2px solid var(--line-2); font-family:var(--font-display); font-weight:800; }
.onp-review-total span:last-child{ font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ── Payment ── */
.onp-pay-opts{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.onp-pay-opt{
  cursor:pointer; text-align:left; width:100%; color:var(--ink);
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border:2px solid var(--line-2); border-radius:16px;
  padding:14px 16px; font-family:inherit; transition:.15s; position:relative;
}
.onp-pay-opt:hover{ border-color:var(--ink-3); }
.onp-pay-opt.active{ border-color:var(--brand); background:var(--brand-tint); }
.onp-pay-icon{ flex:0 0 auto; width:46px; height:46px; border-radius:14px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:22px; border:1px solid var(--line); }
.onp-pay-opt.active .onp-pay-icon{ background:#fff; border-color:var(--brand); }
.onp-pay-title{ font-weight:700; font-size:15px; }
.onp-pay-sub{ color:var(--ink-2); font-size:12.5px; font-weight:500; }
.onp-pay-check{ margin-left:auto; flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--brand); color:var(--brand-ink); font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.6); transition:.16s; }
.onp-pay-opt.active .onp-pay-check{ opacity:1; transform:none; }
.onp-pay-err{ margin:10px 2px 0; color:#c0392b; font-size:13px; font-weight:600; }

.onp-stripe-box{ margin-top:14px; padding:16px; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; }
.onp-stripe-lock{ font-size:12px; color:var(--ink-2); font-weight:600; margin-bottom:10px; }
#onp-card-el{ background:#fff; border:2px solid var(--line-2); border-radius:12px; padding:12px 14px; }

.onp-spinner{ display:inline-block; width:15px; height:15px; border:2px solid rgba(0,0,0,.25); border-top-color:var(--brand-ink); border-radius:50%; animation:onp-spin .7s linear infinite; vertical-align:-2px; }

/* ── Loading ── */
.onp-loading{ padding:56px 0; text-align:center; }
.onp-spin{ display:inline-block; width:36px; height:36px; border:4px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:onp-spin .7s linear infinite; }
.onp-loading p{ margin-top:16px; font-size:14px; color:var(--ink-3); font-weight:500; }
@keyframes onp-spin{ to{ transform:rotate(360deg) } }

/* ── Done ── */
.onp-done{ text-align:center; padding:12px 4px; }
.onp-done-circle{ width:76px; height:76px; margin:6px auto 16px; border-radius:50%; background:var(--teal-tint); display:flex; align-items:center; justify-content:center; font-size:40px; animation:onp-pop .4s cubic-bezier(.2,1.3,.5,1) both; }
@keyframes onp-pop{ from{ transform:scale(.4); opacity:0 } to{ transform:none; opacity:1 } }
.onp-done h2{ font-family:var(--font-display); font-weight:800; font-size:24px; margin:0 0 8px; letter-spacing:-.01em; }
.onp-done p{ color:var(--ink-2); font-size:14px; margin:0 auto 18px; max-width:38ch; font-weight:500; }
.onp-done p strong{ color:var(--ink); font-weight:700; }
.onp-done-summary{ text-align:left; margin-bottom:18px; }
.onp-done .onp-btn-back{ width:auto; height:auto; padding:13px 24px; border-radius:14px; font-family:inherit; font-size:14px; font-weight:700; }

/* ── Closed ── */
.onp-closed{ text-align:center; padding:26px 8px; }
.onp-closed-icon{ font-size:48px; margin-bottom:10px; }
.onp-closed h2{ font-family:var(--font-display); font-weight:800; font-size:22px; margin:0 0 10px; }
.onp-closed p{ color:var(--ink-2); font-size:14.5px; margin:0 auto; max-width:40ch; line-height:1.6; font-weight:500; }

/* ── Error ── */
.onp-error{ text-align:center; padding:34px 8px; }
.onp-error-icon{ font-size:42px; margin-bottom:8px; }
.onp-error h3{ font-family:var(--font-display); font-weight:800; font-size:19px; margin:0 0 8px; }
.onp-error p{ color:var(--ink-2); font-size:14px; margin:0 auto 16px; max-width:40ch; font-weight:500; }
.onp-error button{ cursor:pointer; background:var(--brand); color:var(--brand-ink); border:0; border-radius:14px; padding:12px 22px; font-family:inherit; font-size:14px; font-weight:700; }

/* ── Footer ── */
.onp-footer{ text-align:center; margin-top:22px; color:var(--ink-3); font-size:12.5px; line-height:1.6; font-weight:500; }
.onp-footer-logo{ margin-top:10px; }
.onp-footer-logo img{ height:26px; width:auto; opacity:.85; }

/* ── Responsive ── */
@media (max-width:440px){
  #onp-wrap{ padding:16px 12px 32px; }
  .onp-screen{ padding:18px 15px; }
  .onp-title{ font-size:24px; }
  .onp-pizza-row.has-order{ margin:0 -15px; padding-left:15px; padding-right:15px; }
  .onp-sticky{ margin-left:-15px; margin-right:-15px; }
  .onp-cats{ margin-left:-15px; margin-right:-15px; padding-left:15px; padding-right:15px; }
  .onp-prog-step{ width:72px; }
  .onp-pline{ width:22px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ── Desni stupac na kartici: cijene + "+" ── */
.onp-psel{ flex:0 0 auto; align-self:center; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.onp-pizza-prices{ display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 16px; margin-top:9px; }
.onp-price-item{ display:inline-flex; align-items:baseline; gap:6px; }
.onp-price-size{ font-size:12px; color:var(--ink-2); font-weight:500; }
.onp-price-val{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.onp-add-btn{
  position:relative; margin-top:2px; align-self:flex-end; cursor:pointer;
  width:31px; height:31px; border-radius:10px;
  background:var(--brand); color:var(--brand-ink); border:0;
  font-size:17px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:.14s;
  box-shadow:0 6px 16px -6px rgba(114,171,62,.95);
}
.onp-add-btn:hover{ background:var(--brand-strong); transform:translateY(-1px); }
.onp-rem-btn{ background:#bfe09a; color:#33540f; box-shadow:0 4px 12px -6px rgba(114,171,62,.7); font-size:20px; }
.onp-rem-btn:hover{ background:#aed687; }
.onp-add-count{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  background:var(--teal); color:#fff; border:2px solid #fff; border-radius:999px;
  font-size:11px; font-weight:700; line-height:16px; text-align:center; font-variant-numeric:tabular-nums;
}

/* ── Glovo-style modal ── */
.onp-modal-ov{
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:100; background:rgba(26,26,26,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.onp-modal-ov.onp-open{ animation:onp-fade .2s ease both; }
@keyframes onp-fade{ from{opacity:0} to{opacity:1} }
.onp-modal{
  background:var(--surface); width:100%; max-width:460px; max-height:90vh;
  border-radius:22px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--sh-lg);
}
.onp-modal.onp-open{ animation:onp-sheet .28s cubic-bezier(.22,.9,.3,1) both; }
@keyframes onp-sheet{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }

.onp-modal-photo{ position:relative; height:200px; background:var(--surface-2); flex:0 0 auto; }
.onp-modal-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Blagi fade na dnu slike — stapanje u sadržaj umjesto oštrog reza */
.onp-modal-photo::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,0), var(--surface)); }
.onp-modal-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:76px; background:radial-gradient(circle at 50% 40%, #fff, var(--surface-2)); }
.onp-modal-close{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.95); border:0; color:var(--ink); font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-sm);
}
.onp-modal-close:hover{ background:#fff; }

.onp-modal-body{ padding:18px 20px 8px; overflow-y:auto; flex:1 1 auto; }
.onp-modal-name{ font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.02em; line-height:1.15; }
.onp-modal-desc{ color:var(--ink-2); font-size:14px; margin-top:4px; font-weight:500; }

.onp-modal-sec{ margin-top:18px; }
.onp-modal-sec-t{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:9px; }
.onp-modal-sizes{ display:flex; gap:10px; }
.onp-size-opt{
  flex:1 1 0; cursor:pointer; color:var(--ink); background:var(--surface); border:2px solid var(--line-2); border-radius:14px;
  padding:12px 14px; font-family:inherit; transition:.14s;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
}
.onp-size-opt:hover{ border-color:var(--ink-3); }
.onp-size-opt.sel{ border-color:var(--brand); background:var(--brand-tint); }
.onp-size-name{ font-size:14px; font-weight:700; }
.onp-size-price{ font-family:var(--font-display); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; }

.onp-modal-qty{ display:inline-flex; align-items:center; gap:16px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:6px 10px; }
.onp-modal-qty button{
  width:36px; height:36px; border-radius:11px; cursor:pointer; background:#fff; border:1.5px solid var(--line-2); color:var(--ink);
  font-size:20px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; transition:.12s;
}
.onp-modal-qty button:hover{ background:var(--surface-2); border-color:var(--ink-3); }
.onp-modal-qty span{ min-width:22px; text-align:center; font-family:var(--font-display); font-weight:700; font-size:17px; font-variant-numeric:tabular-nums; }

.onp-modal-foot{
  flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:14px 20px;
  border-top:1px solid var(--line); background:var(--surface);
}
.onp-modal-total{ display:flex; flex-direction:column; line-height:1.2; }
.onp-modal-total span{ font-size:12px; color:var(--ink-2); font-weight:600; }
.onp-modal-total strong{ font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.onp-modal-add{
  margin-left:auto; cursor:pointer; background:var(--brand); color:var(--brand-ink); border:0; border-radius:14px;
  padding:15px 30px; font-family:inherit; font-size:16px; font-weight:700; transition:.15s;
  box-shadow:0 7px 18px -6px rgba(114,171,62,.95);
}
.onp-modal-add:hover{ background:var(--brand-strong); }

/* Modal na mobitelu = bottom sheet */
@media (max-width:540px){
  .onp-modal-ov{ align-items:flex-end; padding:0; }
  .onp-modal{ max-width:none; max-height:92vh; border-radius:24px 24px 0 0; }
  .onp-modal.onp-open{ animation:onp-sheet-up .3s cubic-bezier(.22,.9,.3,1) both; }
  @keyframes onp-sheet-up{ from{transform:translateY(100%)} to{transform:none} }
  .onp-modal-photo{ height:180px; }
}

/* Mobilni: kompaktnije cijene */
@media (max-width:440px){
  .onp-pizza-prices{ gap:4px 12px; }
  .onp-price-size{ font-size:11px; }
  .onp-price-val{ font-size:14px; }
}

/* ── Pizzeria: treća veličina (jumbo) ── */
.onp-review-badge.jumbo{ background:var(--brand); color:var(--brand-ink,#fff); }
@media (max-width:440px){
  .onp-modal-sizes{ gap:7px; }
  .onp-size-opt{ padding:10px 10px; }
}

/* ══════════════════════════════════════════════════════════
   Kloopa pozadina (glavna stranica + svi demo linkovi)
   Bež pozadina umjesto bijele; sadržaj na bijeloj kartici.
   Boje gumba dolaze iz Admin → Postavke (glavna stranica) ili iz demo-a klijenta.
   ══════════════════════════════════════════════════════════ */
/* Ista bež i iza Safari traka / kod povlačenja stranice (iPhone) */
html.onp-kloopa-html{ background-color:#f3ece0; }
body.onp-kloopa{
  --kl-bg:#f3ece0;
  background:transparent; /* boja je na html-u, uzorak na fiksnom sloju ispod */
  min-height:100vh; min-height:100dvh;
}
/* Pozadina na fiksnom sloju — iOS Safari ne podržava background-attachment:fixed,
   pa bi se prijelazi rastegnuli po cijeloj duljini stranice i boja bi se mijenjala */
body.onp-kloopa::before{
  content:""; position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1; pointer-events:none;
  background-color:var(--kl-bg);
  background-image:
    radial-gradient(700px 460px at 15% 38%, rgba(255,255,255,.55), transparent 62%), /* odsjaj niže — vrh ostaje #f3ece0 kao Safari traka */
    radial-gradient(760px 520px at 110% 45%, rgba(226,212,188,.55), transparent 60%),
    radial-gradient(rgba(15,38,32,.045) 1px, transparent 1.2px);
  background-size:auto, auto, 22px 22px;
}
/* Sadržaj na bijeloj kartici */
body.onp-kloopa .onp-screen{
  background:var(--surface); border-radius:26px; padding:22px 20px 18px;
  box-shadow:0 18px 44px -22px rgba(74,56,30,.35), 0 1px 3px rgba(74,56,30,.08);
}
body.onp-kloopa .onp-sticky{ margin-bottom:-4px; }
/* Tabovi kategorija: razmak od ruba kartice (i kad se slider pomakne na današnji dan) */
body.onp-kloopa .onp-screen{ overflow:clip; }
body.onp-kloopa .onp-cats{ scroll-padding-left:20px; scroll-padding-right:20px; }
/* Koraci i podnožje na bež pozadini */
body.onp-kloopa .onp-pnum:not(.act):not(.done){ background:#fffaf2; border-color:#e3d8c6; }
body.onp-kloopa .onp-pline:not(.done){ background:#e3d8c6; }
body.onp-kloopa .onp-plabel{ color:#8a7f6e; }
body.onp-kloopa .onp-plabel.act{ color:var(--ink); }
body.onp-kloopa .onp-footer{ color:#8a7f6e; }
body.onp-kloopa .onp-footer-logo img{ filter:brightness(.6); }
/* Glavna stranica: hover u toploj žutoj (potiče apetit); boje gumba iz Postavki */
body.onp-kloopa-main{ --kl-yellow:#ffc244; --kl-yellow-ink:#2b2210; }
body.onp-kloopa-main .onp-add-btn,
body.onp-kloopa-main .onp-pnum.act{ box-shadow:0 6px 16px -6px rgba(0,0,0,.28); }
body.onp-kloopa-main .onp-btn:hover:not(:disabled),
body.onp-kloopa-main .onp-add-btn:hover,
body.onp-kloopa-main .onp-modal-add:hover,
body.onp-kloopa-main .onp-opt-qty button:hover,
body.onp-kloopa-main .onp-auth-submit:hover{
  background:var(--kl-yellow); color:var(--kl-yellow-ink); box-shadow:0 8px 20px -8px rgba(255,170,30,.9);
}
body.onp-kloopa-main .onp-cat-tab:not(.active):hover{ border-color:var(--kl-yellow); background:#fff8e6; }
body.onp-kloopa-main .onp-rem-btn{ background:var(--brand-tint); color:var(--brand-strong); box-shadow:none; }
body.onp-kloopa-main .onp-rem-btn:hover{ background:var(--kl-yellow); color:var(--kl-yellow-ink); }
@media (max-width:440px){
  body.onp-kloopa .onp-screen{ padding:18px 15px 14px; border-radius:22px; }
}