/* Overlay + container */
body.deal-lock { overflow: hidden; }
.deal-modal__backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9998; }
.deal-modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:9999; }
.deal-modal__content{ pointer-events:auto; background:#fff; border-radius:18px; width:min(1100px, 94vw); max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 24px 60px rgba(0,0,0,.25); }

/* Close */
.deal-close {
    margin: 0 auto;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    border: 0;
    background: #ce2027;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
    cursor: pointer;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    color: #fff;
}

/* Layout */
.fp-grid{ display:grid; grid-template-columns: 600px 1fr; gap:24px; padding:24px; }
@media (max-width: 720px){ 
.fp-grid{ 
grid-template-columns: 1fr; 
} 
.fp-left img
 {
    width: 100%;
    height: 37vh !important;
}
}

/* Left image */
.fp-left img{ width:100%; height:75vh; border-radius:12px; display:block; object-fit:cover; }

/* Right */
.fp-title{ font-size:24px; margin:4px 0 4px; font-weight:700; }
.fp-price{ font-size:18px; font-weight:600; color:#111; margin-bottom:6px; }
.fp-desc{ color:#555; margin-bottom:12px; }

/* Sections */
.fp-section{ margin:14px 0; }
.fp-section-title{ font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.fp-section-title .required{ background:#ffcc00; color:#111; font-size:12px; padding:2px 6px; border-radius:6px; }

/* Lists */
.fp-list{ list-style:none; margin:0; padding:0; border:1px solid #eee; border-radius:10px; max-height:240px; overflow:auto; }
.fp-list li + li{ border-top:1px solid #eee; }
.fp-row{ display:flex; align-items:center; gap:10px; padding:12px 12px; }
.fp-name{ flex:1; }
.fp-amount{ opacity:.85; }

/* Textarea */
.fp-note{ width:100%; padding:10px 12px; border:1px solid #e3e3e3; border-radius:10px; resize:vertical; }

/* Footer (sticky inside modal) */
.fp-footer{ position:sticky; bottom:0; background:#fff; border-top:1px solid #eee; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.fp-total{ display:flex; align-items:baseline; gap:10px; font-size:16px; }
.fp-total-amount{ font-size:18px; }

/* CTA */
.fp-add{ background:#0d6efd; color:#fff; border-radius:10px; padding:12px 18px; font-weight:600; border:0; cursor:pointer; }
.fp-add:hover{ filter:brightness(0.95); }
/* === Brand color === */
:root { --brand:#CD2027; --brand-darker:#B11B21; --brand-faint:#F8E8E9; }

/* Button */
.fp-add{
  background: var(--brand);
  color:#fff; border:0; border-radius:10px; padding:12px 18px;
  font-weight:600; cursor:pointer;
}
.fp-add:hover{ background: var(--brand-darker); }
.fp-add:disabled{ opacity:.7; cursor:not-allowed; }

/* Simple, widely-supported styling (Chrome/Edge/Firefox/Safari) */
.deal-modal input.deal-variation,
.deal-modal input.deal-addon{
  accent-color: var(--brand);
  width:18px; height:18px; margin-right:8px;
}

/* Fancy checkboxes (keeps accessibility) — used when custom appearance is supported */
@supports (-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) {
  .deal-modal input[type="checkbox"].deal-variation,
  .deal-modal input[type="checkbox"].deal-addon{
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; margin-right:10px;
    border:2px solid var(--brand); border-radius:6px;
    display:inline-grid; place-content:center; background:#fff;
    transition:background .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .deal-modal input[type="checkbox"].deal-variation:checked,
  .deal-modal input[type="checkbox"].deal-addon:checked{
    background:var(--brand); border-color:var(--brand);
  }
  .deal-modal input[type="checkbox"].deal-variation:checked::after,
  .deal-modal input[type="checkbox"].deal-addon:checked::after{
    content:""; width:6px; height:10px;
    border:2px solid #fff; border-top:0; border-left:0;
    transform:rotate(45deg);
  }
  .deal-modal input[type="checkbox"].deal-variation:focus-visible,
  .deal-modal input[type="checkbox"].deal-addon:focus-visible{
    outline:3px solid rgba(205,32,39,.35); outline-offset:2px;
  }
}

/* Scrollbar (lists inside the modal) */
.fp-list{ scrollbar-width: thin; scrollbar-color: var(--brand) var(--brand-faint); }
.fp-list::-webkit-scrollbar{ width:10px; }
.fp-list::-webkit-scrollbar-track{ background: var(--brand-faint); border-radius:8px; }
.fp-list::-webkit-scrollbar-thumb{ background: var(--brand); border-radius:8px; }
.fp-list::-webkit-scrollbar-thumb:hover{ background: var(--brand-darker); }

/* If your modal body itself scrolls, color its scrollbar too */
.deal-modal__content{ scrollbar-width: thin; scrollbar-color: var(--brand) var(--brand-faint); }
.deal-modal__content::-webkit-scrollbar{ width:10px; }
.deal-modal__content::-webkit-scrollbar-track{ background: var(--brand-faint); }
.deal-modal__content::-webkit-scrollbar-thumb{ background: var(--brand); border-radius:8px; }
.deal-modal__content::-webkit-scrollbar-thumb:hover{ background: var(--brand-darker); }
/* === Lighter, brighter modal === */
.deal-modal__backdrop{
  background: rgb(0 0 0 / 0%) !important;   /* was ~.62 — much lighter now */
}

/* Crisp white card with softer shadow */
.deal-modal__content{
  background: #fff !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.06) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Ensure text & controls aren’t dimmed by any inherited opacity */
.fp-title, .fp-price, .fp-desc, .fp-section, .fp-list, .fp-footer, .fp-total-amount{
  opacity: 1 !important;
}
/* right-side control column in each row */
.fp-item{ display:grid; grid-template-columns: 1fr auto; align-items:center; }
.fp-row{ padding-right:12px; }

/* "Add" pill */
.fp-addbtn{
  background:#CD2027; color:#fff; border:0; border-radius:999px;
  padding:6px 14px; font-weight:600; cursor:pointer; transition:filter .15s;
}
.fp-addbtn[disabled]{ opacity:.5; cursor:not-allowed; }
.fp-addbtn:hover{ filter:brightness(.95); }

/* qty stepper */
.fp-qtyctl{ display:flex; align-items:center; gap:8px; }
.fp-qtyctl.hidden{ display:none; }
.fp-minus, .fp-plus{
  width:28px; height:28px; border-radius:50%; border:0; cursor:pointer;
  background:#CD2027; color:#fff; font-weight:700; line-height:28px; text-align:center;
}
.fp-minus[disabled], .fp-plus[disabled]{ opacity:.5; cursor:not-allowed; }
.fp-qty{
  width:38px; text-align:center; border:1px solid #eee; border-radius:8px;
  padding:4px 0; font-weight:600;
}
/* Force the modal content above anything; backdrop cannot eat clicks */
.deal-modal { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; }
.deal-modal__content { position: relative !important; z-index: 2147483647 !important; isolation: isolate !important; }
.deal-modal__backdrop { z-index: 2147483646 !important; pointer-events: none !important; }  /* TEMP: disable backdrop clicks */

/* Ensure the interactive area is definitely clickable */
.deal-modal__content, 
.deal-modal__content * { pointer-events: auto !important; }

/* Target the list rows explicitly */
.fp-list, .fp-item, .fp-row, .fp-right-ctl, .deal-variations, .deal-variations * {
  position: relative !important; 
  z-index: 2147483647 !important; 
  pointer-events: auto !important;
}

/* Utility the JS uses */
.hidden { display: none !important; }
/* Badges + helper line */
.fp-badges{
  margin-left:auto;
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.fp-badge{
  font-size:12px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  line-height:1;
  display:inline-block;
}
.fp-badge-required{ background:#ffcc00; color:#111; }  /* same look as your screenshot */
.fp-badge-complete{ background:#16a34a; color:#fff; display:none; } /* hidden until completed */

.fp-remaining{
  margin-top:6px;
  color:#CD2027;
  font-size:12px;
  font-weight:700;
}
/* === Compact, clean stepper inside the deal modal === */
.deal-modal .fp-right-ctl{
  display:flex;
  align-items:center;
  gap:10px;
}

/* container for the +/- and qty */
.deal-modal .fp-qtyctl{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* reset any Elementor/Astra button looks */
.deal-modal .fp-qtyctl .fp-minus,
.deal-modal .fp-qtyctl .fp-plus{
  all: unset;                    /* wipe inherited button styles */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px !important;
  height:32px !important;
  border-radius:8px !important;  /* was 50%, made them neat squares with rounded corners */
  background:var(--brand) !important; /* #CD2027 */
  color:#fff !important;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  user-select:none;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.deal-modal .fp-qtyctl .fp-minus:hover,
.deal-modal .fp-qtyctl .fp-plus:hover{
  filter:brightness(.95);
}
.deal-modal .fp-qtyctl .fp-minus:active,
.deal-modal .fp-qtyctl .fp-plus:active{
  transform:translateY(1px);
}

/* the number box */
.deal-modal .fp-qtyctl .fp-qty{
  width:48px !important;
  height:32px !important;
  padding:0 !important;
  text-align:center;
  font-weight:600;
  border:1px solid #e5e7eb !important;
  border-radius:8px !important;
  background:#fff !important;
}

/* keep the "Add" pill visually consistent next to the stepper (optional) */
.deal-modal .fp-addbtn{
  height:32px;
  padding:0 14px;
  border-radius:999px;
  line-height:32px;
}

/* if any theme rules still try to make the stepper oval, nuke it */
.deal-modal .fp-qtyctl .fp-minus,
.deal-modal .fp-qtyctl .fp-plus,
.deal-modal .fp-qtyctl .fp-qty{
  max-width:none !important;
}
/* Delete (trash) state — keep icon bright and opaque */
.fp-qtyctl .fp-minus.is-delete{
  background: #dc2626;          /* red pill (tweak as you like) */
  color: #ffffff !important;     /* makes the SVG white via currentColor */
  opacity: 1 !important;         /* defeat theme's low-opacity buttons */
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  line-height: 1;
  padding: 0;
  display: inline-grid;
  place-items: center;
  box-shadow: none;
}
.fp-qtyctl .fp-minus.is-delete:hover,
.fp-qtyctl .fp-minus.is-delete:focus{
  background: #b91c1c;          /* darker on hover */
  color: #ffffff;
  opacity: 1;
  outline: none;
}
.fp-qtyctl .fp-minus.is-delete::before{ content: none; } /* kill theme pseudo-icons */

.fp-qtyctl .fp-minus.is-delete svg{
  width: 25px;
  height: 25px;
  display: block;
}
.fp-qtyctl .fp-minus.is-delete svg path{
  fill: currentColor;            /* belt-and-braces */
  opacity: 1;
}