/* ============================================================
   iRolls — static form styling (replaces the old Ninja Forms)
   Dark design system ported from NY Headshots (booking-ui.css /
   retouch-ui.css): black page, translucent green line inputs, glass
   option cards, hollow pill submit, dark confirmation panel.
   Loaded ONLY on the 10 form pages, so the dark-page overrides below
   are safely scoped to those pages. Pairs with irolls-forms.js +
   /functions/api/[form].js.
   ============================================================ */
:root{ --irf-green:#7EF9FF; }

/* ---------- dark page (these pages only) ---------- */
body{ background:#000 !important; color:#e8e8e8 !important; }
/* The theme footer is position:fixed; z-index:-1 — a "reveal" footer that the
   opaque page content normally scrolls over. Make the content opaque black so
   it covers it, and let the footer flow normally so it can't bleed through the
   form. */
main.tourog-page,.wpb-content-wrapper,.content-section,
section.content-section{ background:#000 !important; }
footer.footer{ position:static !important; z-index:auto !important; }
/* some pages (groomer, fried-frank) have a WPBakery row with an inline
   vc_custom background-color:#fff — kill it so it doesn't draw a white box on black */
.content-section [class*="vc_custom_"]{ background-color:transparent !important; }
/* surrounding page copy → light so it reads on black */
.content-section h1,.content-section h2,.content-section h3,
.content-section h4,.text-content-block h1,.text-content-block h2,
.text-content-block h3,.text-content-block p{ color:#fff !important; }
.content-section p,.text-content-block{ color:#cfcfcf !important; }
.content-section a:not(.vc_btn3):not(.irf-submit){ color:var(--irf-green) !important; }

/* ---------- form shell ---------- */
.irf-wrap{max-width:720px;margin:0 auto;text-align:left;}
.irf-form{font-family:inherit;color:#e8e8e8;}
.irf-form *{box-sizing:border-box;}

.irf-field{margin:0 0 16px;}
/* inline field rows: wrap two/three .irf-field in .irf-grid-2 / .irf-grid-3.
   The wrapper carries the row's bottom margin; cells are flex columns whose
   label grows so the inputs bottom-align even when one label wraps an extra
   line. Collapses to a single column on narrow screens. */
.irf-grid-2,.irf-grid-3{display:grid;gap:0 18px;margin:0 0 16px;}
.irf-grid-2{grid-template-columns:1fr 1fr;}
.irf-grid-3{grid-template-columns:2fr 1.4fr 1fr;}
.irf-grid-2 > .irf-field,.irf-grid-3 > .irf-field{display:flex;flex-direction:column;min-width:0;margin:0;}
.irf-grid-2 > .irf-field > .irf-label,.irf-grid-3 > .irf-field > .irf-label{flex:1 0 auto;}
@media(max-width:560px){
  .irf-grid-2,.irf-grid-3{grid-template-columns:1fr;}
  .irf-grid-2 > .irf-field,.irf-grid-3 > .irf-field{margin:0 0 16px;}
  .irf-grid-2 > .irf-field:last-child,.irf-grid-3 > .irf-field:last-child{margin-bottom:0;}
  .irf-grid-2 > .irf-field > .irf-label,.irf-grid-3 > .irf-field > .irf-label{flex:0 0 auto;}
}

.irf-label{display:block;font-size:12px;font-weight:500;letter-spacing:.6px;
  text-transform:uppercase;color:#9a9a9a;margin:0 0 2px;line-height:1.2;}
.irf-req{color:var(--irf-green);margin-left:3px;font-weight:700;}
.irf-help{display:block;font-size:12px;font-weight:400;color:#8d8d8d;margin-top:4px;text-transform:none;letter-spacing:0;}

/* ---------- line inputs (text / email / date / tel / number / textarea) ----------
   Every box property is forced with !important so theme/WPBakery/bootstrap CSS
   (e.g. js_composer's bare `select{border:1px solid #ccc;height:30px}`) can't
   re-box the fields — same approach as the NYH booking-ui.css. */
.irf-form .irf-input{
  width:100% !important;height:auto !important;background:transparent !important;border:0 !important;
  border-bottom:1.5px solid rgba(255,255,255,.20) !important;border-radius:0 !important;
  padding:4px 2px 8px !important;color:#fff !important;font-family:inherit !important;font-size:17px !important;
  font-weight:400 !important;letter-spacing:.3px !important;caret-color:var(--irf-green);box-shadow:none !important;
  transition:border-color .3s ease, box-shadow .35s ease !important;-webkit-appearance:none !important;appearance:none !important;}
.irf-form textarea.irf-input{min-height:60px !important;resize:vertical !important;font-size:16px !important;}
.irf-form .irf-input::placeholder{color:rgba(255,255,255,.34) !important;font-size:15px !important;letter-spacing:.6px !important;}
.irf-form .irf-input:focus{outline:0 !important;border-bottom-color:var(--irf-green) !important;
  box-shadow:0 1.5px 0 0 var(--irf-green), 0 14px 30px -16px rgba(126,249,255,.75) !important;}
/* mask browser autofill yellow → keep white-on-dark */
.irf-form input.irf-input:-webkit-autofill,
.irf-form input.irf-input:-webkit-autofill:hover,
.irf-form input.irf-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;caret-color:var(--irf-green);
  -webkit-box-shadow:0 0 0 1000px #0c0c0c inset;box-shadow:0 0 0 1000px #0c0c0c inset;
  transition:background-color 99999s ease-out 0s;}
/* dark date picker */
.irf-form input[type="date"].irf-input{color-scheme:dark;}
.irf-form input[type="date"].irf-input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.5;cursor:pointer;}

/* ---------- selects: line input + green chevron ---------- */
.irf-form select.irf-input{
  padding:11px 28px 11px 2px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237EF9FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 2px center;}
.irf-form select.irf-input option{background:#101010;color:#fff;}

/* ---------- radio / checkbox groups → PILL CHIPS (no boxed glass cards) ---------- */
.irf-group{border:0;margin:0 0 16px;padding:0;}
.irf-group .irf-label{margin-bottom:9px;}
.irf-group .irf-opts{display:flex;flex-wrap:wrap;gap:10px;}
/* every option is a fully-rounded pill chip. The native input is visually hidden;
   the whole chip lights cyan when its input is checked. */
.irf-opt{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;flex:0 1 auto;
  padding:10px 18px;border:1px solid rgba(255,255,255,.30);border-radius:999px;background:transparent;
  color:#e8e8e8;font-size:13.5px;letter-spacing:.3px;line-height:1.3;
  transition:border-color .2s,background .2s,box-shadow .25s,color .2s;-webkit-user-select:none;user-select:none;}
.irf-opt input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none;}
.irf-opt:hover{border-color:rgba(126,249,255,.55);}
.irf-opt:has(input:checked){border-color:var(--irf-green);background:rgba(126,249,255,.08);
  box-shadow:0 0 0 1px rgba(126,249,255,.35),0 0 18px -4px rgba(126,249,255,.55);}
.irf-opt:has(input:checked) span{color:#fff;}
/* fallback for browsers without :has — JS mirrors the checked state onto the label */
.irf-opt.is-checked{border-color:var(--irf-green);background:rgba(126,249,255,.08);
  box-shadow:0 0 0 1px rgba(126,249,255,.35),0 0 18px -4px rgba(126,249,255,.55);}
.irf-opt.is-checked span{color:#fff;}

/* keep the older .irf-btns hook working (same pill look, centered) */
.irf-opts.irf-btns{gap:10px;}
.irf-opts.irf-btns .irf-opt{justify-content:center;text-align:center;}

/* ---------- single-choice → SEGMENTED SLIDER (auto-built by irolls-forms.js) ----------
   The .irf-group gets .irf-as-slider; .irf-opts becomes the pill track with a sliding
   glowing thumb. The real radios stay in the DOM (visually hidden inside each .irf-opt). */
.irf-group.irf-as-slider .irf-opts{position:relative;display:grid;flex-wrap:nowrap;gap:0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:5px;max-width:100%;transition:border-color .25s,box-shadow .25s;}
.irf-group.irf-as-slider:hover .irf-opts{border-color:rgba(126,249,255,.45);box-shadow:0 0 22px rgba(126,249,255,.16);}
.irf-group.irf-as-slider .irf-thumb{position:absolute;top:5px;left:5px;height:calc(100% - 10px);
  border-radius:999px;z-index:0;pointer-events:none;transition:transform .42s cubic-bezier(.65,.05,.36,1);
  background:rgba(126,249,255,.12);border:1px solid var(--irf-green);
  box-shadow:0 0 0 1px rgba(126,249,255,.5),0 0 16px rgba(126,249,255,.55),0 0 34px rgba(126,249,255,.3);}
.irf-group.irf-as-slider .irf-opt{position:relative;z-index:1;flex:1 1 0;justify-content:center;text-align:center;
  border:0;border-radius:999px;background:none;padding:11px 12px;color:rgba(255,255,255,.55);box-shadow:none;
  font-size:13px;font-weight:600;letter-spacing:.5px;}
.irf-group.irf-as-slider .irf-opt:hover{background:none;border:0;box-shadow:none;color:rgba(255,255,255,.8);}
.irf-group.irf-as-slider .irf-opt:has(input:checked),
.irf-group.irf-as-slider .irf-opt.is-checked{background:none;border:0;box-shadow:none;}
.irf-group.irf-as-slider .irf-opt:has(input:checked) span,
.irf-group.irf-as-slider .irf-opt.is-checked span{color:#fff;text-shadow:0 0 12px rgba(126,249,255,.5);}
@media(max-width:560px){
  .irf-group.irf-as-slider .irf-opt{font-size:11.5px;letter-spacing:.3px;padding:10px 6px;}
}

/* service choice: 3 equal columns, each an on/off button with its description below */
.irf-svc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.irf-svc-col{display:flex;flex-direction:column;}
.irf-svc-grid .irf-opt{width:100%;justify-content:center;text-align:center;padding:13px 16px;}
.irf-svc-grid .irf-opt input,.irf-svc-none .irf-opt input{display:none;}
.irf-svc-desc{margin:10px 2px 0;}
.irf-svc-desc p{margin:0;font-size:12.5px;line-height:1.5;color:#9a9a9a;}
.irf-svc-none{margin:14px 0 0;}
.irf-svc-none .irf-opt{width:100%;justify-content:center;text-align:center;padding:13px 16px;}
@media(max-width:560px){.irf-svc-grid{grid-template-columns:1fr;gap:16px;}}

/* ---------- file inputs ---------- */
.irf-file input[type=file]{display:block;width:100%;font-size:13px;color:#cfcfcf;
  border:0;border-radius:0;padding:6px 0;background:transparent;cursor:pointer;}
.irf-file input[type=file]::-webkit-file-upload-button,
.irf-file input[type=file]::file-selector-button{
  background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#e0e0e0;
  padding:7px 16px;margin-right:12px;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;}
.irf-file-names{display:block;font-size:12px;color:#9a9a9a;margin-top:8px;}

/* ---------- intro copy now uses the theme's .section-title + .text-content-block
   (Fjalla One title + Splitting/WOW animation), matching the events page ---------- */

/* ---------- notes (intro / total / media-mgmt copy carried from old forms) ---------- */
.irf-note{font-size:13.5px;line-height:1.6;color:#cfcfcf;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:15px 17px;margin:0 0 16px;}
.irf-note h2{font-size:20px;font-weight:400;color:#fff;margin:0 0 10px;}
.irf-note p{margin:0 0 8px;}.irf-note p:last-child{margin:0;}
.irf-note b,.irf-note strong{color:var(--irf-green);}

/* ---------- segmented toggle (HMU service: One Person/Full Day; location) ---------- */
.irf-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:520px;
  margin:6px auto 26px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:5px;transition:border-color .25s,box-shadow .25s;}
.irf-toggle-thumb{position:absolute;top:5px;left:5px;width:calc(50% - 5px);height:calc(100% - 10px);
  border-radius:999px;z-index:0;transition:transform .42s cubic-bezier(.65,.05,.36,1);
  background:rgba(126,249,255,.12);border:1px solid var(--irf-green);
  box-shadow:0 0 0 1px rgba(126,249,255,.5),0 0 16px rgba(126,249,255,.55),0 0 34px rgba(126,249,255,.3);}
.irf-toggle[data-mode="day"] .irf-toggle-thumb,
.irf-toggle[data-mode="office"] .irf-toggle-thumb{transform:translateX(100%);}
.irf-toggle-opt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;background:none;border:0;cursor:pointer;padding:10px 6px;border-radius:999px;
  color:rgba(255,255,255,.5);font-family:inherit;transition:color .3s,text-shadow .3s;}
.irf-toggle-main{font-size:13px;font-weight:700;letter-spacing:.6px;}
.irf-toggle-sub{font-size:10.5px;letter-spacing:.4px;opacity:.85;}
.irf-toggle[data-mode="one"] .irf-toggle-opt:first-of-type,
.irf-toggle[data-mode="studio"] .irf-toggle-opt:first-of-type,
.irf-toggle[data-mode="day"] .irf-toggle-opt:last-of-type,
.irf-toggle[data-mode="office"] .irf-toggle-opt:last-of-type{color:#fff;text-shadow:0 0 12px rgba(126,249,255,.5);}
.irf-toggle:hover{border-color:rgba(126,249,255,.45);box-shadow:0 0 22px rgba(126,249,255,.18);}
@media(max-width:560px){.irf-toggle-main{font-size:11.5px;letter-spacing:.3px;}.irf-toggle-sub{font-size:9.5px;}}
.irf-total-note{text-align:center;font-size:16px;color:#fff;border-color:rgba(126,249,255,.45);
  background:rgba(126,249,255,.06);}
.irf-total-note b{color:var(--irf-green);font-size:18px;}

/* ---------- Stripe card fields (groomer / HMU) ---------- */
.irf-cc .irf-cc-number,.irf-cc .irf-cc-cell{
  border-bottom:1.5px solid rgba(255,255,255,.20);padding:12px 2px;transition:border-color .3s,box-shadow .35s;}
.irf-cc .irf-cc-number.StripeElement--focus,
.irf-cc .irf-cc-cell.StripeElement--focus{border-bottom-color:var(--irf-green);
  box-shadow:0 1.5px 0 0 var(--irf-green),0 14px 30px -16px rgba(126,249,255,.75);}
.irf-cc .irf-cc-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px;margin-top:14px;}
@media(max-width:560px){.irf-cc .irf-cc-row{grid-template-columns:1fr;gap:0;}.irf-cc .irf-cc-cell,.irf-cc .irf-cc-zip{margin-top:14px;}}
.irf-cc .irf-cc-zip{background:transparent;border:0;border-bottom:1.5px solid rgba(255,255,255,.20);border-radius:0;
  padding:12px 2px;color:#fff;font-family:inherit;font-size:17px;letter-spacing:.3px;caret-color:var(--irf-green);
  transition:border-color .3s,box-shadow .35s;-webkit-appearance:none;appearance:none;}
.irf-cc .irf-cc-zip::placeholder{color:rgba(255,255,255,.34);font-size:15px;letter-spacing:.6px;}
.irf-cc .irf-cc-zip:focus{outline:0;border-bottom-color:var(--irf-green);
  box-shadow:0 1.5px 0 0 var(--irf-green),0 14px 30px -16px rgba(126,249,255,.75);}
.irf-cc .irf-cc-err{color:#ff7676;font-size:12.5px;margin-top:8px;min-height:1em;}

/* ---------- Apple Pay / Google Pay wallet button + divider ---------- */
.irf-cc .pr-wallet{margin:0 0 4px;}
.irf-cc .pr-wallet #paymentRequestButton{margin-bottom:14px;border:0;}
/* The border is wallet-dependent — class set in irolls-groomer.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. */
.irf-cc .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;}
.irf-cc .pr-wallet #paymentRequestButton.is-ap:hover{border-color:rgba(255,255,255,.55);box-shadow:0 0 22px -8px rgba(255,255,255,.45);}
.irf-cc .pr-wallet #paymentRequestButton.is-native{border:0;border-radius:0;overflow:visible;}
.irf-cc .pr-or{display:flex;align-items:center;text-align:center;gap:12px;margin:0 0 14px;color:rgba(255,255,255,.42);font-size:12px;letter-spacing:.6px;text-transform:uppercase;}
.irf-cc .pr-or::before,.irf-cc .pr-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.16);}

/* ---------- submit (hollow pill) ---------- */
.irf-submit-wrap{text-align:center;margin:32px 0 6px;}
.irf-submit{display:inline-block;cursor:pointer;border:1px solid rgba(255,255,255,.55);background:transparent;
  color:#fff;font-family:inherit;font-weight:600;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
  padding:14px 46px;border-radius:999px;transition:background .2s,color .2s,border-color .2s;}
.irf-submit:hover{background:#7EF9FF;color:#111;border-color:#7EF9FF;box-shadow:0 0 34px -6px rgba(126,249,255,.6);}
.irf-submit:disabled{opacity:.55;cursor:default;}

/* ---------- validation ---------- */
.irf-field.irf-error .irf-input{border-bottom-color:#ff7676;
  box-shadow:0 1.5px 0 0 #ff7676;}
.irf-file.irf-error input[type=file]{border-color:#ff7676;}
.irf-group.irf-error .irf-label{color:#ff7676;}
.irf-group.irf-error .irf-opt{border-color:rgba(255,118,118,.6);}

/* ---------- confirmation panel ---------- */
.irf-confirm{display:none;text-align:center;padding:40px 22px;color:#fff;}
.irf-confirm.show{display:block;}
.irf-confirm h3{font-size:24px;font-weight:400;color:#fff;margin:0 0 14px;}
.irf-confirm p{font-size:14px;line-height:1.6;color:#cfcfcf;margin:8px 0;}
.irf-confirm a{color:var(--irf-green);text-decoration:none;}