/* ============================================================
   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:#79d100; }

/* NOTE: NY Headshots build — the page already provides its own dark-glass panel
   theme (hero background, .page-panel), so the iRolls "dark page" body/theme
   overrides are intentionally omitted here. Only the .irf-* form styling below
   is used. */

/* ---------- form shell ---------- */
.irf-wrap{max-width:680px;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(121,209,0,.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='%2379d100' 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 → glass cards ---------- */
.irf-group{border:0;margin:0 0 16px;padding:0;}
.irf-group .irf-label{margin-bottom:7px;}
.irf-group .irf-opts{display:flex;flex-wrap:wrap;gap:10px;}
.irf-opt{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;flex:1 1 220px;
  padding:13px 16px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.03);
  color:#e8e8e8;font-size:13.5px;letter-spacing:.3px;line-height:1.3;
  transition:border-color .2s,background .2s,box-shadow .25s;-webkit-user-select:none;user-select:none;}
.irf-opt input{accent-color:var(--irf-green);width:17px;height:17px;flex:0 0 auto;margin:0;cursor:pointer;}
.irf-opt:hover{border-color:rgba(121,209,0,.5);}
.irf-opt:has(input:checked){border-color:var(--irf-green);background:rgba(121,209,0,.08);
  box-shadow:0 8px 22px -16px rgba(121,209,0,.8);}
.irf-opt:has(input:checked) span{color:#fff;}

/* button-style choice group (converted from <select>): centered pills, no visible
   radio dot — the whole pill lights green when selected */
.irf-opts.irf-btns{gap:10px;}
.irf-opts.irf-btns .irf-opt{flex:0 1 auto;justify-content:center;text-align:center;padding:11px 22px;}
.irf-opts.irf-btns .irf-opt input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none;}

/* 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(121,209,0,.12);border:1px solid var(--irf-green);
  box-shadow:0 0 0 1px rgba(121,209,0,.5),0 0 16px rgba(121,209,0,.55),0 0 34px rgba(121,209,0,.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(121,209,0,.5);}
.irf-toggle:hover{border-color:rgba(121,209,0,.45);box-shadow:0 0 22px rgba(121,209,0,.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(121,209,0,.45);
  background:rgba(121,209,0,.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(121,209,0,.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(121,209,0,.75);}
.irf-cc .irf-cc-err{color:#ff7676;font-size:12.5px;margin-top:8px;min-height:1em;}

/* ---------- 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:rgba(255,255,255,.9);color:#111;border-color:rgba(255,255,255,.9);}
.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;}