/* ============================================================
   NY Headshots — RETOUCH FORM UI (dark Fluent Forms design system)
   Reusable component layer that restyles the live Fluent Forms markup into
   the dark, modern look. Load AFTER the FF plugin CSS and the form's own
   _custom CSS (form8_custom.css / form9_custom.css) so these overrides win.

   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. See REDESIGN_GUIDE.md for the rationale + tokens.
   ============================================================ */

/* ---------- 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;}

/* ---------- Apple Pay / Google Pay wallet button + divider ---------- */
.pr-wallet{margin:0 0 4px;}
.pr-wallet #paymentRequestButton{margin-bottom:14px;border:0;}
/* The border is wallet-dependent — class set in retouch-form.js / groomer-form.js
   from canMakePayment().applePay:
     .is-ap     Apple Pay draws NO border of its own and would disappear into the
                dark form, so we draw a 1px hairline + hover state.
     .is-native Google Pay / Link draw their OWN hairline inside their iframe at an
                inset and corner radius we can't reach. Ours on top of theirs shows
                as a double border, and clipping theirs away with overflow:hidden
                shaves their corner arcs. So we draw none and let the native stand. */
.pr-wallet #paymentRequestButton.is-ap{border:1px solid rgba(255,255,255,.28);border-radius:6px;overflow:hidden;transition:border-color .2s ease,box-shadow .25s ease;}
.pr-wallet #paymentRequestButton.is-ap:hover{border-color:rgba(255,255,255,.55);box-shadow:0 0 22px -8px rgba(255,255,255,.45);}
.pr-wallet #paymentRequestButton.is-native{border:0;border-radius:0;overflow:visible;}

/* Express Checkout host (retouch). The two wallet buttons are NOT symmetric, and
   this is settled — don't "simplify" it back:
     Google Pay — draws its OWN border inside Stripe's iframe. A second ring over
                  it was the Safari double border. It gets NOTHING from us.
     Apple Pay  — draws NO border at all; bare, it's a black button on a black
                  form. So `.is-ap` paints a hairline over the FIRST row (Stripe
                  always renders Apple Pay first), and only when Apple Pay is
                  actually available — otherwise the ring would land on Google's row.
   Radius must stay in step with appearance.variables.borderRadius (retouch-form.js). */
.pr-wallet #paymentRequestButton.is-ece{position:relative;border:0;border-radius:0;overflow:visible;}
.pr-wallet #paymentRequestButton.is-ece.is-ap::before{content:"";position:absolute;top:0;left:0;right:0;height:44px;border:1px solid rgba(255,255,255,.28);border-radius:10px;pointer-events:none;z-index:1;}
.pr-or{display:flex;align-items:center;text-align:center;gap:12px;margin:0 0 12px;color:rgba(255,255,255,.42);font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;}
.pr-or::before,.pr-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14);}

/* ---------- 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{
  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;
  animation:rimSpin 14s linear infinite !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;}
}
/* 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; }
@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;}