.woocod-opc-plus{--card-bg:var(--wbg,#fff);--card-bor:var(--wbor,#e5e7eb);--card-r:var(--wrad,14px);--card-w:var(--wmax,680px);--pri:var(--wpri,#111);--txt:#0f172a;--muted:#64748b;--ring: color-mix(in srgb, var(--pri) 32%, transparent);border:1px solid var(--card-bor);border-radius:var(--card-r);background:var(--card-bg);max-width:var(--card-w);box-shadow:0 8px 30px rgba(2,6,23,.08);padding:18px}
.woocod-opc-plus .woocod-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.woocod-opc-plus .woocod-header .title h3{margin:0 0 6px 0;font-size:18px;line-height:1.2;color:var(--txt)}
.woocod-opc-plus .woocod-header .small{font-size:12px;color:var(--muted)}
.woocod-opc-plus .woocod-pricebox{display:flex;justify-content:flex-end;gap:8px;margin:10px 0;font-weight:700;color:var(--txt)}
.woocod-opc-plus .woocod-pricebox .label{opacity:.7}
.woocod-opc-plus .row{display:flex;gap:14px;margin:10px 0}
.woocod-opc-plus .row.two>*{flex:1}
.woocod-opc-plus label{display:flex;flex-direction:column;gap:8px;position:relative}
.woocod-opc-plus .lab{font-size:13px;font-weight:600;color:var(--txt);opacity:.9}
.woocod-opc-plus input,.woocod-opc-plus select,.woocod-opc-plus textarea{padding:12px 12px 12px 44px;border:1px solid #d1d5db;border-radius:12px;outline:none;background:#fff;color:#0f172a}
:root[dir="rtl"] .woocod-opc-plus input,:root[dir="rtl"] .woocod-opc-plus select,:root[dir="rtl"] .woocod-opc-plus textarea{padding:12px 44px 12px 12px}
.woocod-opc-plus input:focus,.woocod-opc-plus select:focus,.woocod-opc-plus textarea:focus{border-color:var(--pri);box-shadow:0 0 0 4px var(--ring)}
.woocod-opc-plus .ico{position:absolute;inset-inline-start:12px;top:36px;width:18px;height:18px;color:var(--pri);opacity:.75;pointer-events:none}
:root[dir="rtl"] .woocod-opc-plus .ico{right:12px;left:auto}
.woocod-opc-plus .actions{display:flex;align-items:center;gap:12px;margin-top:12px}
.woocod-opc-plus .btn-submit{padding:14px 18px;border:none;border-radius:12px;background:var(--pri);color:var(--wqtytxt,#fff);cursor:pointer;font-weight:700;letter-spacing:.2px;transition:transform .12s ease}
.woocod-opc-plus .btn-submit:hover{transform:translateY(-1px)}
/* Pulse without glow */
.btn-submit.pulse{animation:ctaSmoothPulse 2.1s cubic-bezier(.22,.61,.36,1) infinite;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
@keyframes ctaSmoothPulse{0%{transform:scale(1)}45%{transform:scale(1.03)}100%{transform:scale(1)}}
.woocod-opc-plus .flash{font-size:12px;color:#b91c1c}
.woocod-opc-plus .bump{align-items:end;flex-direction:row;gap:8px}
.woocod-opc-plus .woocod-msg{margin-top:8px;color:#b91c1c;min-height:20px}
.woocod-opc-plus .hp{display:none !important}

/* Upsell modal */
.woocod-upsell{position:fixed;inset:0;z-index:9999;display:block}
.woocod-upsell[hidden]{display:none}
.woocod-upsell__overlay{position:absolute;inset:0;background:rgba(2,6,23,.55);backdrop-filter:saturate(140%) blur(2px)}
.woocod-upsell__card{position:relative;z-index:1;margin:8vh auto;background:#fff;border-radius:16px;max-width:680px;box-shadow:0 12px 40px rgba(2,6,23,.25);overflow:hidden;display:flex;gap:0}
.woocod-upsell__media{flex:0 0 36%;background:#f8fafc;display:flex;align-items:center;justify-content:center}
.woocod-upsell__media img{max-width:100%;height:auto;display:block}
.woocod-upsell__body{flex:1;padding:18px}
.woocod-upsell__title{font-weight:800;font-size:18px;margin-bottom:6px}
.woocod-upsell__txt{color:#334155;margin-bottom:10px}
.woocod-upsell__price{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.woocod-upsell__price .old{text-decoration:line-through;opacity:.6}
.woocod-upsell__price .new{font-weight:800}
.woocod-upsell__actions{display:flex;gap:10px}
.woocod-upsell__actions .btn-accept{background:var(--pri,#111);color:#fff;border:none;border-radius:12px;padding:12px 14px;cursor:pointer;font-weight:700}
.woocod-upsell__actions .btn-decline{background:#e5e7eb;border:none;border-radius:12px;padding:12px 14px;cursor:pointer;font-weight:600}
.woocod-upsell__close{position:absolute;top:6px;right:8px;background:transparent;border:none;font-size:22px;cursor:pointer;opacity:.7}

/* v1.6.2 Mobile-first & bottom sheet */
@media (max-width: 740px){
  .woocod-opc-plus{padding:14px;border-radius:14px;box-shadow:0 6px 24px rgba(2,6,23,.06);max-width:100%}
  .woocod-opc-plus .row{flex-direction:column;gap:10px}
  .woocod-opc-plus .actions{position:sticky;bottom:8px;z-index:5;
    /*
     * Colour the mobile sticky actions bar using the primary colour instead
     * of the card background.  This ensures the call‑to‑action at the bottom
     * of the page inherits the same hue as the product/form (e.g. red or
     * blue), as requested.  We keep a simple solid fill rather than the
     * gradient from white to card colour so the bar matches the primary
     * palette consistently across products.
     */
    background:var(--pri);
    padding-top:8px}
  .woocod-opc-plus .btn-submit{width:100%;padding:15px 18px;border-radius:14px;font-size:16px}
  .woocod-opc-plus .ico{top:38px}
  .woocod-opc-plus .woocod-pricebox{justify-content:space-between}
  .woocod-upsell__card{position:fixed;left:0;right:0;bottom:0;margin:0;border-radius:18px 18px 0 0;max-width:none;min-height:auto;animation:sheetIn .24s ease;display:block}
  .woocod-upsell__media{display:flex;justify-content:center;align-items:center;padding:14px 14px 0;background:#fff}
  .woocod-upsell__body{padding:14px}
  .woocod-upsell__title{font-size:20px;line-height:1.2;margin-bottom:8px;text-align:center}
  .woocod-upsell__txt{font-size:15px;text-align:center}
  .woocod-upsell__price{justify-content:center}
  .woocod-upsell__actions{flex-direction:column}
  .woocod-upsell__actions .btn-accept,.woocod-upsell__actions .btn-decline{width:100%;padding:14px 16px;border-radius:14px}
  .woocod-upsell__close{top:10px;right:12px}
}
@keyframes sheetIn{from{transform:translateY(16px);opacity:.0}to{transform:translateY(0);opacity:1}}

/* inputs */
.woocod-opc-plus input[type=number]{-moz-appearance:textfield}
.woocod-opc-plus input[type=number]::-webkit-outer-spin-button,
.woocod-opc-plus input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.woocod-opc-plus .coupon-use input,.woocod-opc-plus .bump input{width:18px;height:18px}

/* ---- v1.6.3: Mobile perfect polish ---- */
.woocod-opc-plus{font-size:clamp(14px, 2.4vw, 16px); -webkit-text-size-adjust:100%}
.woocod-opc-plus .lab{font-size:clamp(12px,2vw,13px)}
.woocod-opc-plus input,.woocod-opc-plus select,.woocod-opc-plus textarea{font-size:16px;min-height:46px}
@media (max-width: 740px){
  .woocod-opc-plus{padding:clamp(12px,2.8vw,16px)}
  .woocod-opc-plus .row{gap:clamp(8px,2.6vw,12px)}
  .woocod-opc-plus input,.woocod-opc-plus select,.woocod-opc-plus textarea{min-height:52px;padding-block:13px}
  .woocod-opc-plus .ico{top:42px;width:20px;height:20px}
  .woocod-opc-plus .actions{bottom:0;padding:10px 0  calc(12px + env(safe-area-inset-bottom));}
  .woocod-opc-plus .btn-submit{padding:16px;border-radius:16px}
}
@media (max-width: 360px){
  .woocod-opc-plus .woocod-header .title h3{font-size:16px}
  .woocod-opc-plus .btn-submit{font-size:15px}
}
/* Tablet 2-col grid that collapses well */
@media (min-width: 741px) and (max-width: 1024px){
  .woocod-opc-plus .row.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
}
/* Invalid states */
.woocod-opc-plus .invalid{border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.18) !important}
.woocod-opc-plus .field-error{font-size:12px;color:#b91c1c;margin-top:6px}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-submit.pulse{animation:none}
}

/* v1.6.4 heading */
.woocod-form-heading{font-weight:700;color:#0f172a;margin:8px 0 6px;font-size:15px;opacity:.94}
@media (max-width:740px){ .woocod-form-heading{font-size:16px;margin-top:2px} }

/* v1.7.0 quantity deals */
.woocod-qtydeals{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.woocod-qtydeals .deal{display:flex;align-items:center;gap:10px;border:2px dashed rgba(2,6,23,.08);background:linear-gradient(180deg,#fff, #fafafa);border-radius:12px;padding:10px 12px;cursor:pointer;position:relative}
.woocod-qtydeals .deal input{display:none}
.woocod-qtydeals .deal .badge{position:absolute;inset-inline-start:12px;top:10px;font-size:12px;
/*
 * Use a CSS variable for the badge background so merchants can customize the
 * colour per–product (via –wbadge).  Fall back to the original orange if
 * no variable is defined.  Likewise, honour the –wqtytxt variable for the
 * text colour.
 */
/*
 * Update the default badge colours.  If merchants do not explicitly set
 * a custom --wbadge or --wqtytxt colour via per‑product settings, fall
 * back to the primary colour (–pri) for both the badge background and
 * percentage text.  This ensures the quantity deal badge and percent
 * indicator harmonise with the overall colour scheme of the form.  Only
 * when a custom --wbadge is provided will it override the primary hue.
 */
background:var(--wbadge,var(--pri));color:var(--wqtytxt,#fff);border-radius:999px;padding:4px 8px}
:root[dir="rtl"] .woocod-qtydeals .deal .badge{right:12px;left:auto}
.woocod-qtydeals .deal .right{margin-inline-start:auto;display:flex;align-items:center;gap:10px;color:#111}
.woocod-qtydeals .deal .pct{
  /*
   * Align the percent discount colour with the badge.  Instead of a
   * fixed red (#ef4444), derive the colour from the custom --wbadge
   * variable when defined, or fall back to the primary colour.  This
   * keeps the percentage indicator cohesive with the badge and overall
   * palette while retaining bold weight for emphasis.
   */
  color:var(--wbadge,var(--pri));
  font-weight:700;
}
.woocod-qtydeals .deal.active{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb, var(--pri) 18%, transparent)}
