/* ============================================================
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; }
/* ---------- 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: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 26px;}
.irf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
@media(max-width:560px){.irf-grid-2{grid-template-columns:1fr;}}
.irf-label{display:block;font-size:12px;font-weight:500;letter-spacing:.6px;
text-transform:uppercase;color:#9a9a9a;margin:0 0 9px;line-height:1.35;}
.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:11px 2px !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,");
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 26px;padding:0;}
.irf-group .irf-label{margin-bottom:11px;}
.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