/* ============================================================
   iRolls — RETOUCH FORM UI (dark design system, ported from NY Headshots)
   Component layer that styles the retouch markup into the dark, modern look.

   NOTE (iRolls): unlike NYH, these static iRolls pages do NOT load the Fluent
   Forms plugin base CSS. The "iRolls base layout" block at the END of this file
   supplies the foundational layout (.fluentform, .ff-el-group, dropzone,
   checkbox cards, submit, Flow-C person rows) that the component rules below
   layer on top of. Page chrome (body dark bg + tourog footer fix) comes from
   irolls-forms.css, which loads alongside this file on the 4 retouch pages.

   Components: glass upload dropzone (animated spectrum rim), glowing line
   inputs, two-column option cards (name left / price right), reference row,
   split Stripe card line, delivery/help notes, before/after gallery,
   confirmation panel.
   ============================================================ */
:root{ --green:#79d100; }

/* ---------- before/after example gallery (top of panel) ---------- */
.gal{position:relative;width:100%;height:300px;overflow:hidden;background:#111;}
.gal .gslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease-in-out;}
.gal .gslide.on{opacity:1;}
.gal .gcap{position:absolute;left:0;bottom:0;z-index:3;padding:14px 18px;color:#fff;font-family:"Roboto",Arial,sans-serif;font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.7);}
.gal .gdots{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;gap:7px;}
.gal .gdots b{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;}
.gal .gdots b.on{background:var(--green);}
.gal-tag{position:absolute;top:0;left:0;z-index:3;background:rgba(228,174,46,.92);color:#1c252c;font-weight:700;font-size:12px;letter-spacing:.5px;padding:6px 14px;}
.gal + .rt-head{padding-top:18px;}

/* ---------- uploaded image previews (mimic FF .ff-upload-preview) ---------- */
.ff-uploaded-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.ff-upload-preview{position:relative;width:74px;height:74px;border-radius:6px;overflow:hidden;background:#1a1a1a;border:1px solid #333;}
.ff-upload-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.ff-upload-preview .rm{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;font-size:12px;line-height:18px;text-align:center;cursor:pointer;}
input[type=file].ff_file_upload{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}

/* ---------- modern line inputs (name / email / notes) ---------- */
.fluentform input[type="text"].ff-el-form-control,
.fluentform input[type="email"].ff-el-form-control,
.fluentform textarea.ff-el-form-control{
  background:transparent !important;
  border:0 !important;
  border-bottom:1.5px solid rgba(255,255,255,.20) !important;
  border-radius:0 !important;
  padding:12px 2px !important;
  color:#fff !important;
  font-family:"Open Sans",Arial,sans-serif !important;
  font-size:19px !important;font-weight:400 !important;letter-spacing:.3px !important;
  caret-color:var(--green) !important;
  box-shadow:none !important;
  transition:border-color .3s ease, box-shadow .35s ease !important;
}
.fluentform textarea.ff-el-form-control{font-size:16px !important;resize:vertical !important;min-height:54px !important;}
.fluentform input[type="text"].ff-el-form-control::placeholder,
.fluentform input[type="email"].ff-el-form-control::placeholder,
.fluentform textarea.ff-el-form-control::placeholder{
  color:rgba(255,255,255,.34) !important;font-size:15px !important;font-weight:400 !important;letter-spacing:.6px !important;
}
.fluentform input[type="text"].ff-el-form-control:focus,
.fluentform input[type="email"].ff-el-form-control:focus,
.fluentform textarea.ff-el-form-control:focus{
  outline:0 !important;
  border-bottom-color:var(--green) !important;
  box-shadow:0 1.5px 0 0 var(--green), 0 14px 30px -16px rgba(121,209,0,.75) !important;
}
/* keep autofilled native inputs white-on-dark (override iOS/Chrome autofill yellow).
   Selectors MUST out-specify the base .ff-el-form-control rules (which force
   transparent bg / box-shadow:none / green focus glow with !important) — incl. the
   :focus state — or the masking inset shadow gets cancelled and the yellow shows. */
.fluentform input[type="text"].ff-el-form-control:-webkit-autofill,
.fluentform input[type="text"].ff-el-form-control:-webkit-autofill:hover,
.fluentform input[type="text"].ff-el-form-control:-webkit-autofill:focus,
.fluentform input[type="text"].ff-el-form-control:-webkit-autofill:active,
.fluentform input[type="email"].ff-el-form-control:-webkit-autofill,
.fluentform input[type="email"].ff-el-form-control:-webkit-autofill:hover,
.fluentform input[type="email"].ff-el-form-control:-webkit-autofill:focus,
.fluentform input[type="email"].ff-el-form-control:-webkit-autofill:active{
  -webkit-text-fill-color:#fff !important;
  caret-color:var(--green) !important;
  -webkit-box-shadow:0 0 0 1000px #0c0c0c inset !important;
  box-shadow:0 0 0 1000px #0c0c0c inset !important;
  transition:background-color 99999s ease-out 0s !important;
}

/* ---------- two-column option cards: ADD-ONs (left) | FORMATTING (right) ---------- */
.opts-2col{display:grid !important;grid-template-columns:1fr 1fr;column-gap:14px;align-items:start;}
.fluentform .opts-2col .opt-head h3{margin-top:0 !important;color:#9a9a9a !important;font-weight:300 !important;}
.fluentform .opts-2col .pricing-checkboxes .ff-el-form-check{margin-bottom:12px !important;}
.fluentform .opts-2col .pricing-checkboxes .ff-el-form-check-label{padding:14px 16px !important;gap:8px;}
.fluentform .opts-2col .pricing-checkboxes .ff-el-form-check-label span{font-size:13px;letter-spacing:.3px;line-height:1.25;}
/* option text: name left, price right — flex so they never overlap at any width */
.fluentform .opts-2col .pricing-checkboxes .opt-name{flex:1 1 auto;min-width:0;text-align:left;}
.fluentform .opts-2col .pricing-checkboxes .opt-price{flex:0 0 auto;text-align:right;white-space:nowrap;color:#cfcfcf;}
@media(max-width:760px){
  .opts-2col{column-gap:8px;}
  .fluentform .opts-2col .pricing-checkboxes .ff-el-form-check-label{padding:11px 11px !important;border-radius:14px !important;}
  .fluentform .opts-2col .pricing-checkboxes .ff-el-form-check-label span{font-size:11px;letter-spacing:.2px;}
}

/* ---------- uniform 16px left indent for headings / intro / lower fields ---------- */
.fluentform .opts-2col .opt-head .ff-el-input--content{padding-left:16px !important;}
.fluentform .ff-el-group.lpad > .ff-el-input--content{padding-left:16px !important;}
.fluentform .ff_columns_container.lpad{padding-left:16px !important;}

/* ---------- delivery / help notes (small, indented) ---------- */
.fluentform .delivery-note{margin-bottom:36px !important;}
.fluentform .delivery-note .ff-el-input--content{padding-left:16px !important;}
.fluentform .delivery-note p{font-size:11px !important;line-height:1.45 !important;margin:0 0 10px !important;}
.fluentform .delivery-note p:last-child{margin-bottom:0 !important;}

/* ---------- reference: optional → smaller button; note left, button right ---------- */
.fluentform .ff-el-group.ref-images-btn label span.ff_upload_btn.ff-btn{
  padding:6px 13px !important;font-size:10px !important;letter-spacing:.5px !important;
  color:rgba(255,255,255,.7) !important;border-color:rgba(255,255,255,.25) !important;
}
.fluentform .ref-images-btn .ref-row{display:flex !important;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 16px;padding-left:16px;}
.fluentform .ref-images-btn .ref-note{flex:1 1 220px;margin:0 !important;font-size:11px;line-height:1.4;}
.fluentform .ref-images-btn .ref-note em{color:#bdbdbd;}
.fluentform .ref-images-btn .ff-el-image-upload{flex:0 0 auto;text-align:right;}
.fluentform .ref-images-btn .ff-uploaded-list{flex-basis:100%;text-align:right;}

/* ---------- first + last name on a single line ---------- */
.ff_columns_container.ff_columns_total_2{display:grid !important;grid-template-columns:1fr 1fr;gap:0 16px;}
.ff_columns_container.ff_columns_total_2 > .ff-t-cell{width:auto !important;min-width:0 !important;}

/* ---------- Stripe card fields: no resting line; soft glow on focus only ---------- */
.cc-row{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:0 16px;margin-top:6px;align-items:center;}
.fluentform .ff-el-stripe-card_element,
.fluentform .ff_stripe_card_element{border:0 !important;transition:box-shadow .35s ease !important;}
.fluentform .ff-el-stripe-card_element:focus-within,
.fluentform .ff_stripe_card_element:focus-within{box-shadow:0 12px 28px -18px rgba(121,209,0,.6) !important;}

/* ---------- centered submit ---------- */
.fluentform .ff_submit_btn_wrapper .ff-el-input--content{text-align:center !important;}

/* ---------- button text not selectable ---------- */
.fluentform .ff_upload_btn,
.fluentform .ff_file_upload_holder,
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.fluentform .pricing-checkboxes .ff-el-form-check-label{
  -webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;
}

/* ---------- glass dropzone: slow spectrum-rim orbit (colours rotate, button still) ---------- */
@property --rimAng{ syntax:'<angle>'; inherits:false; initial-value:250deg; }
.fluentform .ff-el-file.ff-el-upload label.ff_file_upload_holder::before{
  content:"" !important;
  position:absolute !important;
  inset:-10px !important;
  border-radius:36px !important;
  pointer-events:none !important;
  background:
    radial-gradient(90% 110% at 86% 18%, rgba(0,255,255,0.95) 0%, rgba(40,140,255,0.90) 26%, rgba(140,80,255,0.85) 46%, rgba(255,110,60,0.80) 68%, rgba(0,0,0,0) 78%),
    radial-gradient(65% 80% at 92% 28%, rgba(255,230,90,0.85) 0%, rgba(255,120,80,0.70) 30%, rgba(0,0,0,0) 62%),
    conic-gradient(from var(--rimAng) at 72% 30%, rgba(0,0,0,0) 0deg, rgba(0,255,255,0.95) 40deg, rgba(0,140,255,0.95) 85deg, rgba(120,80,255,0.90) 125deg, rgba(255,80,120,0.88) 165deg, rgba(255,170,60,0.92) 205deg, rgba(255,230,90,0.92) 245deg, rgba(0,255,255,0.95) 300deg, rgba(0,0,0,0) 360deg) !important;
  filter:blur(16px) saturate(165%) contrast(115%) !important;
  opacity:0.80 !important;
  transform:rotate(-0.8deg) !important;
  animation:rimSpin 14s linear infinite !important;
}
/* inner black panel: masks the centre so only the blurred rim glows at the edge */
.fluentform .ff-el-file.ff-el-upload label.ff_file_upload_holder::after{
  content:"" !important;
  position:absolute !important;
  inset:3px !important;
  border-radius:23px !important;
  pointer-events:none !important;
  background:
    radial-gradient(120% 180% at 78% 18%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 34%, rgba(0,0,0,0) 62%),
    radial-gradient(120% 160% at 12% 110%, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0) 60%),
    #000000 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 0 22px rgba(255,255,255,0.04) inset !important;
}
@keyframes rimSpin{ from{--rimAng:250deg;} to{--rimAng:610deg;} }
@media (prefers-reduced-motion: reduce){
  .fluentform .ff-el-file.ff-el-upload label.ff_file_upload_holder::before{animation:none !important;}
}
.fluentform .ff-el-file.ff-el-upload label.ff_file_upload_holder:hover::before{
  opacity:0.96 !important;
  filter:blur(18px) saturate(185%) contrast(120%) !important;
}
@media(max-width:760px){ .gal{height:200px;} }

/* ---------- footer block inside the form ---------- */
.rt-foot{text-align:center;padding:26px 4px 6px;color:#cfcfcf;}
.rt-foot .ln{font-size:12px;line-height:1.6;}
.rt-foot .cards-img{display:block;margin:8px auto;filter:brightness(0) invert(.85);}
.rt-foot .guarantee{font-size:13px;margin-top:6px;font-weight:600;color:#fff;}
.rt-policies{margin-top:16px;font-size:13px;color:#b9b9b9;line-height:1.8;}
.rt-policies a{color:#e0e0e0;text-decoration:none;border-bottom:1.5px solid transparent;transition:color .2s,border-color .25s,box-shadow .25s;}
.rt-policies a:hover{color:#fff;text-decoration:none;border-bottom-color:var(--green);box-shadow:0 3px 8px -3px rgba(121,209,0,.75);}
.rt-policies .dot{color:#666;margin:0 8px;}

/* ---------- confirmation panel (post-submit) ---------- */
.ff-confirm{display:none;padding:30px 26px;color:#fff;}
.ff-confirm.show{display:block;}
.ff-confirm h1{font-size:16px;font-weight:700;margin:0 0 14px;}
.ff-confirm h6{font-size:16px;font-weight:400;margin:14px 0;}
.ff-confirm a{color:var(--green);}

/* dark translucent panel — match retouch.html (show slideshow through) */
.page-panel{background:rgba(12,12,12,.75) !important;-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);}
.panel-body{background:transparent !important;}
.fluentform{background-color:transparent !important;background:transparent !important;}

/* ============================================================
   Animated total roll + sticky order-summary overlay
   (shared by retouch/basic + retouch/advanced; built by retouch-form.js)
   ============================================================ */

/* live total + summary total: subtle directional bob synced to the count direction */
#live-total-display{display:inline-block;}
#live-total-display.roll-up,.os-total.roll-up{animation:osRollUp .52s ease;}
#live-total-display.roll-down,.os-total.roll-down{animation:osRollDown .52s ease;}
@keyframes osRollUp{0%{transform:translateY(5px)}55%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@keyframes osRollDown{0%{transform:translateY(-5px)}55%{transform:translateY(2px)}100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  #live-total-display.roll-up,#live-total-display.roll-down,
  .os-total.roll-up,.os-total.roll-down{animation:none;}
}

/* docked summary: last flex child of .page-panel, so it pins to the panel bottom while .panel-body scrolls */
.order-summary{flex:0 0 auto;position:relative;z-index:9;background:rgba(11,11,11,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -20px 44px -26px rgba(0,0,0,.92);}
.os-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;background:none;border:0;cursor:pointer;color:#fff;font-family:"Open Sans",Arial,sans-serif;padding:13px 22px;transition:background .2s;}
.os-bar:hover{background:rgba(255,255,255,.04);}
.os-toggle{display:flex;align-items:center;gap:11px;font-size:13px;letter-spacing:.4px;color:rgba(255,255,255,.78);min-width:0;}
.os-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.os-chev{flex:0 0 auto;width:8px;height:8px;border-right:2px solid rgba(255,255,255,.65);border-bottom:2px solid rgba(255,255,255,.65);transform:rotate(-45deg);transition:transform .3s ease,border-color .2s;}
.order-summary.open .os-chev{transform:rotate(45deg);}
.os-bar:hover .os-chev{border-color:var(--green);}
.os-total-wrap{display:flex;align-items:baseline;gap:8px;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap;}
.os-total{display:inline-block;font-size:22px;font-weight:700;letter-spacing:.3px;color:#fff;text-transform:none;}
.os-detail{max-height:0;overflow:hidden;transition:max-height .34s ease;}
.order-summary.open .os-detail{max-height:46vh;overflow-y:auto;}
.os-list{list-style:none;margin:0;padding:2px 22px 16px;}
.os-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid rgba(255,255,255,.07);font-size:13px;line-height:1.3;color:#e6e6e6;}
.os-row span:last-child{color:#cfcfcf;white-space:nowrap;}
.os-row.os-base span:last-child,.os-row.os-base span:first-child{color:#fff;}
.os-row .os-free{color:var(--green);font-weight:600;}

@media(max-width:760px){
  .os-bar{padding:11px 16px;}
  .os-total{font-size:19px;}
  .os-list{padding:2px 16px 14px;}
  .order-summary.open .os-detail{max-height:40vh;}
}

/* ── billing ZIP / postal code ──────────────────────────────────────────
   Split Stripe card elements (cardNumber/Expiry/Cvc) don't collect a postal
   code, so we gather it here and pass billing_details.address.postal_code.
   Styled to match the MM/YY card field: no border, transparent, white text. */
.fluentform input.cc-zip,.cc-zip{display:block;width:100%;align-self:center;
  margin:0;padding:0;height:auto;
  background:transparent !important;border:0 !important;outline:0;color:#fff !important;
  box-shadow:none;-webkit-appearance:none;appearance:none;border-radius:0;
  font:400 18px/1.45 "Open Sans",Arial,sans-serif;
  transition:box-shadow .35s ease;}
.cc-zip::placeholder{color:rgba(255,255,255,.34);}
.cc-zip:focus{box-shadow:0 12px 28px -18px rgba(121,209,0,.6);}
.cc-zip:-webkit-autofill{-webkit-text-fill-color:#fff !important;
  transition:background-color 9999s ease-out;}

/* ============================================================
   iRolls BASE LAYOUT  (replaces the Fluent Forms plugin base CSS, which the
   static iRolls pages no longer load). Defines the structural layout the
   component rules above expect. Kept un-!important where possible so the
   skin rules above (which use !important) still win.
   ============================================================ */
.fluentform{
  max-width:680px; margin:0 auto; text-align:left;
  color:#fff; font-family:"Open Sans",Arial,sans-serif; background:transparent;
}
.fluentform fieldset{ border:0; margin:0; padding:0; min-inline-size:100%; }
.fluentform .ff-el-group{ margin-bottom:22px; }
.fluentform .ff-el-input--label{ margin-bottom:6px; }
.fluentform .ff-el-input--content{ position:relative; }

/* base line inputs (the !important rules near the top of this file refine these) */
.fluentform input[type="text"].ff-el-form-control,
.fluentform input[type="email"].ff-el-form-control,
.fluentform input[type="tel"].ff-el-form-control,
.fluentform textarea.ff-el-form-control{
  display:block; width:100%; box-sizing:border-box;
  background:transparent; color:#fff;
  border:0; border-bottom:1.5px solid rgba(255,255,255,.20); border-radius:0;
  padding:12px 2px; font-size:19px; line-height:1.4; outline:0;
}
.fluentform textarea.ff-el-form-control{ resize:vertical; min-height:54px; }

/* file upload holder (the spectrum-rim ::before/::after up top decorates this) */
.fluentform .ff-el-file{ position:relative; }
/* breathing room above the upload dropzone (not the small reference button) */
.fluentform .ff-el-file.ff-el-upload{ margin-top:34px; }
.fluentform .ref-images-btn .ff-el-file.ff-el-upload{ margin-top:0; }
/* by-name: space between the heading and the first person row */
.fluentform #personRows{ margin-top:34px; }
.fluentform input[type="file"].ff_file_upload{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.fluentform .ff_file_upload_holder{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; min-height:96px; padding:28px 22px; border-radius:26px; cursor:pointer;
  background:#000; border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 20px 70px rgba(0,0,0,.82);
  overflow:hidden; transition:border-color .25s ease, box-shadow .30s ease;
}
.fluentform .ff_file_upload_holder:hover{ border-color:rgba(255,255,255,.22); }
/* active drag-over state (dropping files onto the zone) */
.fluentform .ff_file_upload_holder.dz-drag{ border-color:rgba(255,255,255,.55) !important; box-shadow:0 0 0 2px rgba(255,255,255,.28) inset, 0 0 46px rgba(0,200,255,.30) !important; }
.fluentform .ff_file_upload_holder.dz-drag .ff_upload_btn{ color:#fff !important; }
.fluentform .ff_file_upload_holder .ff_upload_btn{
  position:relative; z-index:2; background:transparent; border:0; box-shadow:none; padding:0;
  color:rgba(255,255,255,.92); font-size:14px; font-weight:650; letter-spacing:2.4px;
  text-transform:uppercase; text-shadow:0 1px 0 rgba(0,0,0,.72), 0 0 18px rgba(255,255,255,.14);
}

/* inner glow-fill: soft colour blobs behind the button text (NYH-style fill, clipped by the holder) */
.fluentform .ff-el-file.ff-el-upload label.ff_file_upload_holder > span.ff_upload_btn.ff-btn::before,
.fluentform .ff-el-file.ff-el-upload label.ff_file_upload_holder > span.ff_upload_btn.ff-btn::after{
  content:"" !important; position:absolute !important; pointer-events:none !important; z-index:-1 !important;
}
.fluentform .ff-el-file.ff-el-upload label.ff_file_upload_holder > span.ff_upload_btn.ff-btn::before{
  width:520px !important; height:220px !important; right:-220px !important; top:-120px !important; border-radius:999px !important;
  background:radial-gradient(circle at 30% 60%, rgba(0,255,255,0.26) 0%, rgba(0,140,255,0.22) 22%, rgba(140,80,255,0.18) 44%, rgba(255,170,60,0.16) 64%, rgba(0,0,0,0) 72%) !important;
  filter:blur(18px) saturate(170%) !important; transform:rotate(-18deg) !important;
}
.fluentform .ff-el-file.ff-el-upload label.ff_file_upload_holder > span.ff_upload_btn.ff-btn::after{
  width:420px !important; height:180px !important; right:-210px !important; top:-40px !important; border-radius:999px !important;
  background:radial-gradient(circle at 32% 50%, rgba(255,230,90,0.20) 0%, rgba(255,110,60,0.18) 26%, rgba(120,80,255,0.14) 52%, rgba(0,0,0,0) 72%) !important;
  filter:blur(18px) saturate(170%) !important; transform:rotate(-26deg) !important;
}

/* pricing-checkbox cards (base; the .is-checked glow rule lives elsewhere) */
.fluentform .pricing-checkboxes .ff-el-form-check{ margin-bottom:14px; }
.fluentform .pricing-checkboxes input[type="checkbox"]{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.fluentform .pricing-checkboxes .ff-el-form-check-label{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  padding:18px 22px; border-radius:18px; cursor:pointer; user-select:none;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#fff;
  transition:background .2s ease, border-color .2s ease, box-shadow .25s ease, transform .08s ease;
}
/* option name/price layout for ALL pricing-checkboxes (not just the .opts-2col add-on grid) */
.fluentform .pricing-checkboxes .opt-name{ flex:1 1 auto; min-width:0; text-align:left; }
.fluentform .pricing-checkboxes .opt-price{ flex:0 0 auto; text-align:right; white-space:nowrap; color:#cfcfcf; }
.fluentform .pricing-checkboxes .ff-el-form-check-label:hover{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); transform:translateY(-1px);
}
.fluentform .pricing-checkboxes .ff-el-form-check.is-checked .ff-el-form-check-label,
.fluentform .pricing-checkboxes .ff-el-form-check:has(input:checked) .ff-el-form-check-label{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.60);
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 0 28px rgba(255,255,255,.32),
             0 0 70px rgba(255,255,255,.18), 0 22px 46px rgba(0,0,0,.68);
  transform:translateY(-1px);
}

/* submit button (smooth invert; matches the live iRolls retouch look) */
.fluentform .ff_submit_btn_wrapper{ text-align:center; margin-top:38px; }
.fluentform .ff-btn-submit, .fluentform button[type="submit"]{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background:rgba(255,255,255,.10); background-image:none;
  border:1px solid rgba(255,255,255,.45); color:#fff;
  border-radius:999px; padding:16px 36px; font-size:16px; font-weight:600; letter-spacing:.4px;
  box-shadow:0 18px 40px rgba(0,0,0,.75);
  transition:background .35s, color .35s, border-color .35s, box-shadow .35s, transform .12s ease;
}
.fluentform .ff-btn-submit:hover, .fluentform button[type="submit"]:hover{
  background:#fff; color:#000; border-color:#fff;
  box-shadow:0 22px 60px rgba(0,0,0,.85), 0 0 35px rgba(255,255,255,.25);
}
.fluentform .ff-btn-submit:active, .fluentform button[type="submit"]:active{ transform:scale(.98); }
.fluentform .ff-btn-submit:disabled, .fluentform button[type="submit"]:disabled{ opacity:.6; cursor:default; }

/* reference-image button: small pill (no spectrum rim) */
.fluentform .ref-images-btn .ff_file_upload_holder{
  min-height:0; padding:0; background:transparent; border:0; box-shadow:none; display:inline-flex;
}
.fluentform .ref-images-btn .ff_file_upload_holder::before,
.fluentform .ref-images-btn .ff_file_upload_holder::after,
.fluentform .ref-images-btn .ff_upload_btn::before,
.fluentform .ref-images-btn .ff_upload_btn::after{ content:none !important; }
.fluentform .ref-images-btn .ff_upload_btn{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.35);
  color:rgba(255,255,255,.88); border-radius:999px; padding:10px 18px;
  font-size:12px; letter-spacing:.6px; text-transform:uppercase;
}

/* two-up name row + add-on columns (base grids) */
.fluentform .ff_columns_total_2,
.fluentform .ff-column-container.ff_columns_total_2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.fluentform .opts-2col{ display:grid; grid-template-columns:1fr 1fr; column-gap:14px; align-items:start; }
.fluentform .live-total{ font-size:16px; font-weight:bold; color:#e0e0e0; }
.fluentform .delivery-note p, .fluentform .ref-note{ font-size:12px; line-height:1.5; color:#bdbdbd; margin:0 0 8px; }

/* uploaded image previews (fallback layout; matches the .ff-upload-preview skin) */
.fluentform .ff-uploaded-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.fluentform .ff-upload-preview{ position:relative; width:74px; height:74px; border-radius:6px; overflow:hidden; background:#1a1a1a; border:1px solid #333; }
.fluentform .ff-upload-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.fluentform .ff-upload-preview .rm{ position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.7); color:#fff; font-size:12px; line-height:18px; text-align:center; cursor:pointer; }

/* corporate notice block (FOR EXISTING CORPORATE CLIENTS ONLY / invoiced) */
.fluentform .corp-notice{
  border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:16px 18px; margin-bottom:24px;
  background:rgba(255,255,255,.03); font-size:13px; line-height:1.6; color:#cfcfcf;
}
.fluentform .corp-notice strong{ color:#fff; }

/* ---------- Flow C — by-name repeatable person rows ---------- */
.fluentform .person-rows{ display:flex; flex-direction:column; gap:16px; margin-bottom:22px; }
.fluentform .person-row{
  border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:18px;
  background:rgba(255,255,255,.03); margin-bottom:0;
}
.fluentform .person-row-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.fluentform .person-row-n{ font-size:13px; letter-spacing:.6px; color:rgba(255,255,255,.6); text-transform:uppercase; }
.fluentform .person-row-rm{
  background:none; border:0; color:rgba(255,255,255,.55); font-size:12px; letter-spacing:.4px;
  cursor:pointer; text-transform:uppercase; padding:4px 8px; border-radius:8px; transition:color .2s, background .2s;
}
.fluentform .person-row-rm:hover{ color:#fff; background:rgba(255,255,255,.08); }
.fluentform .person-row-names{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.fluentform .person-row .person-row-upload{ margin-top:14px; }
.fluentform .person-row .ff_file_upload_holder{ min-height:64px; padding:18px; border-radius:18px; }
.fluentform .person-row textarea.pr-notes{ margin-top:10px; }
.fluentform .add-row-wrap{ text-align:center; margin-bottom:22px; }
.fluentform #addPersonRow{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.30); color:#fff;
  border-radius:999px; padding:10px 22px; font-size:13px; letter-spacing:.4px; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.fluentform #addPersonRow:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.55); }

@media(max-width:600px){
  .fluentform .opts-2col,
  .fluentform .person-row-names,
  .fluentform .ff_columns_total_2,
  .fluentform .ff-column-container.ff_columns_total_2{ grid-template-columns:1fr; }
}

/* confirmation panel (iRolls — not inside a .page-panel) */
.ff-confirm{ max-width:680px; margin:0 auto; }