/* ── MODALS ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:500;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--modal-bg);border:1px solid var(--modal-border);padding:48px;max-width:480px;width:100%;position:relative;max-height:90vh;overflow-y:auto}
.modal-x{position:absolute;top:14px;right:18px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:0.55rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;font-family:var(--sans);cursor:pointer;transition:color .2s,border-color .2s,background .2s;padding:5px 10px}
.modal-x:hover{color:var(--red);border-color:var(--red)}
.modal-overlay.shop-modal .modal-x,.modal.modal-shop .modal-x{border-color:var(--red);color:var(--red);background:transparent}
.modal-overlay.shop-modal .modal-x:hover,.modal.modal-shop .modal-x:hover{background:var(--red);color:#fff}
.modal-overlay.aathaar-modal .modal-x,.modal.modal-aathaar .modal-x{border-color:var(--gold3);color:var(--gold3);background:transparent}
.modal-overlay.aathaar-modal .modal-x:hover,.modal.modal-aathaar .modal-x:hover{background:var(--gold3);color:#fff}
.modal-title{font-family:var(--serif);font-size:1.6rem;font-weight:300;margin-bottom:4px;color:var(--text)}
.modal-product{font-size:0.6875rem;color:var(--gold3);letter-spacing:0.1em;margin-bottom:6px}
html.dark .modal-product,html.aathaar-dark .modal-product{color:var(--gold)}
.modal-sub{font-size:0.875rem;color:var(--text3);margin-bottom:28px;line-height:1.75}
.fg{margin-bottom:16px}
.fl{display:block;font-size:0.55rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fi,.fs,.fta{width:100%;background:var(--input-bg);border:1px solid var(--input-border);color:var(--text);padding:11px 15px;font-family:var(--sans);font-size:0.76rem;outline:none;transition:border-color .2s}
.fi:focus,.fs:focus,.fta:focus{border-color:var(--red)}
.fta{height:80px;resize:none}
.fs{appearance:none}
.btn-submit{width:100%;background:var(--gold3);color:#fff;border:none;padding:15px;font-family:var(--sans);font-size:0.62rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;cursor:pointer;margin-top:4px;transition:background .2s}
.btn-submit:hover{background:var(--gold)}
.btn-submit.red-submit{background:var(--red);color:#fff}
.btn-submit.red-submit:hover{background:var(--red2)}

/* Modals/popups */
.modal-overlay{z-index:900}
.modal-overlay.open{display:flex;align-items:flex-start;overflow-y:auto;padding-top:18px;padding-bottom:60px}
.modal{margin-top:20px;margin-bottom:60px}
.fs,select.fs{position:relative;z-index:2;pointer-events:auto;-webkit-appearance:menulist;appearance:auto}
.modal-rows-container{max-height:none}
.odyn-item,.dyn-item{break-inside:avoid}
@media(max-width:700px){
  .modal-overlay.open{padding:12px}
}

.modal-overlay{transition:opacity .2s ease}
.modal{transition:transform .2s ease}

/* ============================================================
   Popup form theme restore
   Theme-aware styles for modal customisation forms generated with
   .ofg/.ofl/.ofi/.ofs/.ofta and dynamic row classes.
   ============================================================ */
.modal-overlay.theme-shop,
.modal-overlay.shop-modal{
  --modal-accent:var(--red);
  --modal-accent-strong:var(--red2);
  --modal-accent-soft:rgba(186,24,18,0.08);
  --modal-accent-border:rgba(186,24,18,0.28);
}

.modal-overlay.theme-aathaar,
.modal-overlay.aathaar-modal{
  --modal-accent:var(--gold3);
  --modal-accent-strong:var(--gold);
  --modal-accent-soft:rgba(201,169,110,0.10);
  --modal-accent-border:rgba(201,169,110,0.34);
}

.modal-overlay.theme-shop .modal,
.modal-overlay.shop-modal .modal{
  border-color:var(--modal-accent-border);
}

.modal-overlay.theme-aathaar .modal,
.modal-overlay.aathaar-modal .modal{
  border-color:var(--modal-accent-border);
}

.modal-overlay .ofg{
  margin-bottom:16px;
  max-width:100%;
}

.modal-overlay .ofl{
  display:block;
  font-size:0.55rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}

.modal-overlay .ofi,
.modal-overlay .ofs,
.modal-overlay .ofta{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  color:var(--text);
  padding:11px 15px;
  font-family:var(--sans);
  font-size:0.76rem;
  outline:none;
  border-radius:0;
  transition:border-color .2s,background .2s;
}

.modal-overlay .ofi:focus,
.modal-overlay .ofs:focus,
.modal-overlay .ofta:focus{
  border-color:var(--modal-accent,var(--red))!important;
}

.modal-overlay .ofta{
  min-height:80px;
  resize:vertical;
}

.modal-overlay .ofs{
  -webkit-appearance:menulist;
  appearance:auto;
}

.modal-overlay .onotice,
.modal-overlay .form-notice{
  border-left:3px solid var(--modal-accent,var(--red));
  background:var(--modal-accent-soft,rgba(186,24,18,0.08));
  color:var(--modal-accent,var(--red));
  padding:10px 14px;
  font-size:0.76rem;
  line-height:1.55;
  margin:0 0 16px;
}

.modal-overlay .odyn-item,
.modal-overlay .dyn-item{
  border:1px solid var(--border);
  border-left:3px solid var(--modal-accent,var(--red));
  background:var(--surface2);
  padding:12px;
  margin:0 0 12px;
  box-sizing:border-box;
}

.modal-overlay .odyn-lbl,
.modal-overlay .dyn-item-lbl{
  font-size:0.58rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--modal-accent,var(--red));
  margin-bottom:10px;
  font-weight:600;
}

.modal-overlay.theme-aathaar .modal-title,
.modal-overlay.aathaar-modal .modal-title,
.modal.aathaar-modal .modal-title,
.modal.modal-aathaar .modal-title{
  color:var(--text);
}

.modal-overlay.theme-aathaar .modal-product,
.modal-overlay.aathaar-modal .modal-product,
.modal.aathaar-modal .modal-product,
.modal.modal-aathaar .modal-product{
  color:var(--gold3);
}

.modal-overlay.theme-aathaar .btn-add-basket,
.modal-overlay.aathaar-modal .btn-add-basket,
.modal.aathaar-modal .btn-add-basket,
.modal.modal-aathaar .btn-add-basket,
.modal-overlay.theme-aathaar .btn-submit:not(.red-submit),
.modal-overlay.aathaar-modal .btn-submit:not(.red-submit){
  background:var(--gold3)!important;
  border-color:var(--gold3)!important;
  color:#fff!important;
}

.btn-add-basket,.btn-buy-now{
  box-sizing:border-box;
  width:100%;
  padding:14px;
  font-family:var(--sans);
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  cursor:pointer;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:none;
  outline:none;
  color:#fff;
  background:var(--modal-accent,var(--red));
}
.btn-add-basket:hover,.btn-add-basket:active,.btn-add-basket:focus,
.btn-buy-now:hover,.btn-buy-now:active,.btn-buy-now:focus{
  filter:none;
  outline:none;
  color:#fff;
  background:var(--modal-accent,var(--red));
}

/* Popup mobile compatibility baseline */
.modal-overlay,
.modal{
  box-sizing:border-box;
}

.modal-overlay .dynamic-personalisation-rows,
.modal-overlay .modal-rows-container,
.modal-overlay .ofg,
.modal-overlay .fg{
  max-width:100%;
  min-width:0;
}

.modal-overlay .product-action-row,
.modal-overlay .modal-action-row{
  max-width:100%;
}