/*!
 * Oyolloo Elements — J10 Form widget.
 *
 * Scoped to .oo-form-sec: no element selector, no :root, nothing leaks.
 * The fields themselves are markup printed by the form plugin, dressed here.
 */

.oo-form-sec{
  --oob-maxw:1220px;
  --oob-pad:clamp(18px,4.5vw,44px);
  --oob-r:12px;
  --oob-r-sm:6px;

  --oob-yellow:#F7BE27;
  --oob-red:#E3000E;
  --oob-red-dk:#BE0009;
  --oob-brown:#642F21;
  --oob-ink:#212121;
  --oob-muted:#757575;
  --oob-faint:#A1A1A1;
  --oob-surface:#FFFFFF;
  --oob-border:#EAEAEA;
  --oob-border-2:#D9D9D9;

  --oob-f-display:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --oob-f-head:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --oob-f-body:'Roboto','Roboto Fallback','Segoe UI',Helvetica,Arial,sans-serif;

  --oob-sh:0 2px 8px rgba(100,47,33,.06), 0 18px 40px -24px rgba(100,47,33,.34);
  --oob-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23642F21' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --oob-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Crect x='1.8' y='3.3' width='12.4' height='11' rx='2' stroke='%23642F21' stroke-width='1.6'/%3E%3Cpath d='M1.8 6.6h12.4M5.3 1.8v3M10.7 1.8v3' stroke='%23642F21' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  position:relative;
  padding:clamp(50px,6.5vw,92px) 0;
  background:#F7F7F7; color:var(--oob-ink);
  font-family:var(--oob-f-body); font-size:16px; line-height:1.7; font-weight:400;
}

/* box-sizing is set on the widget's own subtree, never globally */
.oo-form-sec,.oo-form-sec *,.oo-form-sec *::before,.oo-form-sec *::after{ box-sizing:border-box; }

.oo-form-sec--white{ background:#FFFFFF; }
.oo-form-sec--alt{ background:#F7F7F7; }
.oo-form-sec--cool{ background:#EFF6F8; }
.oo-form-sec--alt::before,.oo-form-sec--cool::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--oob-border-2),transparent);
}

.oo-form-sec__in{ max-width:var(--oob-maxw); margin-inline:auto; padding-inline:var(--oob-pad); }

/* ================= section head ================= */
.oo-form-sec__head{ margin-bottom:34px; text-align:center; }
.oo-form-sec__eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font-family:var(--oob-f-head); font-weight:600; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--oob-brown);
}
.oo-form-sec__eyebrow::before{ content:""; flex:none; width:22px; height:2px; background:currentColor; opacity:.5; }
.oo-form-sec__title{
  position:relative; margin:14px 0 0; padding-bottom:18px;
  font-family:var(--oob-f-display); font-weight:700;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1;
  letter-spacing:.012em; text-transform:uppercase; color:var(--oob-red);
}
.oo-form-sec__title::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:58px; height:3px; border-radius:3px; background:var(--oob-yellow);
}
.oo-form-sec__lede{ margin:14px auto 0; max-width:64ch; color:var(--oob-muted); font-size:1rem; }
@media (max-width:620px){ .oo-form-sec__eyebrow::before{ display:none; } }

.oo-form-sec__split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.oo-form-sec__split--single{ grid-template-columns:minmax(0,720px); justify-content:center; }
@media (max-width:880px){ .oo-form-sec__split{ grid-template-columns:1fr; } }

/* ================= fields =================
   Everything below dresses whatever the form plugin printed. The selectors
   stay inside .oo-form-sec__form so no other form on the page is touched. */
.oo-form-sec__form label{
  display:block; margin-bottom:7px;
  font-family:var(--oob-f-head); font-weight:500; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--oob-brown);
}
.oo-form-sec__form input[type=text],
.oo-form-sec__form input[type=email],
.oo-form-sec__form input[type=tel],
.oo-form-sec__form input[type=url],
.oo-form-sec__form input[type=date],
.oo-form-sec__form input[type=time],
.oo-form-sec__form input[type=number],
.oo-form-sec__form select,
.oo-form-sec__form textarea{
  width:100%; padding:13px 15px;
  /* the theme sets line-height:14px on a bare select, which is shorter than
     the text inputs beside it and clips the chosen option — an explicit value
     keeps every field the same height */
  line-height:1.7;
  font-family:var(--oob-f-body); font-size:.96rem; color:var(--oob-ink);
  background:var(--oob-surface); border:1px solid var(--oob-border-2);
  border-radius:var(--oob-r-sm);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.oo-form-sec__form textarea{ resize:vertical; min-height:120px; }
.oo-form-sec__form input:focus,
.oo-form-sec__form select:focus,
.oo-form-sec__form textarea:focus{
  outline:none; border-color:var(--oob-yellow);
  box-shadow:0 0 0 3px rgba(247,190,39,.2);
}

/* the native select and date chrome differs per browser and clashes with the
   brand, so both controls draw their own mark */
.oo-form-sec__form select{
  /* something in the theme holds every select down to 34px — a bare one
     dropped beside this field measures the same. A floor built from the same
     line-height and padding as the text inputs puts it back in line with
     them, without having to outshout an !important. */
  min-height:calc(1.7em + 28px);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:44px; cursor:pointer;
  background-image:var(--oob-arrow);
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
}
.oo-form-sec__form input[type=date]{ cursor:pointer; }
.oo-form-sec__form input[type=date]::-webkit-calendar-picker-indicator{
  width:16px; height:16px; margin:0; cursor:pointer; opacity:.75;
  background-image:var(--oob-cal);
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
.oo-form-sec__form input[type=date]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

.oo-form-sec__form input[type=submit],
.oo-form-sec__form button[type=submit]{
  width:auto; padding:14px 30px; cursor:pointer;
  background:var(--oob-red); color:#fff; border:2px solid transparent;
  border-radius:var(--oob-r-sm);
  font-family:var(--oob-f-head); font-weight:600; font-size:.86rem;
  letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 6px 18px -9px rgba(227,0,14,.6);
  transition:background-color .2s ease, transform .12s ease;
}
.oo-form-sec__form input[type=submit]:hover,
.oo-form-sec__form button[type=submit]:hover{ background:var(--oob-red-dk); color:#fff; transform:translateY(-1px); }
.oo-form-sec__form input[type=submit]:active,
.oo-form-sec__form button[type=submit]:active{ transform:translateY(1px); }

.oo-form-sec__form p{ margin:0 0 18px; }


/* Contact Form 7 prints its own status and spinner; keep them in the palette */
.oo-form-sec__form .wpcf7-spinner{ margin:0 0 0 12px; }
.oo-form-sec__form .wpcf7-not-valid-tip{
  margin-top:6px; color:var(--oob-red); font-size:.8rem;
}
.oo-form-sec__form .wpcf7-response-output{
  margin:18px 0 0 !important; padding:14px 18px !important;
  border-width:0 0 0 4px !important; border-style:solid !important;
  border-radius:0 var(--oob-r-sm) var(--oob-r-sm) 0;
  border-color:var(--oob-yellow) !important;
  background:#FEF7E2; color:var(--oob-muted); font-size:.86rem;
}
.oo-form-sec__form form.invalid .wpcf7-response-output,
.oo-form-sec__form form.failed .wpcf7-response-output{
  border-color:var(--oob-red) !important; background:#FDECEC;
}

.oo-form-sec__note{ margin:14px 0 0; font-size:.82rem; color:var(--oob-faint); }

/* ================= beside the form ================= */
.oo-form-sec__aside{ display:grid; gap:20px; }
/* Elementor's frontend stylesheet resets the radius on every img it can
   reach; naming the section as well as the image clears it. */
.oo-form-sec .oo-form-sec__img{
  width:100%; max-width:100%; height:auto; display:block;
  border:0; border-radius:var(--oob-r);
  box-shadow:0 2px 6px rgba(33,33,33,.06), 0 14px 30px -18px rgba(33,33,33,.28);
}
.oo-form-sec__hours{
  padding:28px 26px;
  background:var(--oob-surface); border:1px solid var(--oob-border);
  border-radius:var(--oob-r); box-shadow:var(--oob-sh);
}
.oo-form-sec__hours-k{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 8px;
  font-family:var(--oob-f-head); font-weight:600; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--oob-brown);
}
.oo-form-sec__hours-k::before{ content:""; flex:none; width:22px; height:2px; background:currentColor; opacity:.5; }
.oo-form-sec__hours-row{
  display:flex; justify-content:space-between; gap:14px;
  padding:7px 0; font-size:.92rem; border-bottom:1px dotted var(--oob-border);
}
.oo-form-sec__hours-row:last-child{ border-bottom:0; }
.oo-form-sec__hours-row span:first-child{
  font-family:var(--oob-f-head); font-weight:500; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.oo-form-sec__hours-row span:last-child{ color:var(--oob-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.oo-form-sec__hours-row.oo-is-closed span:last-child{ color:var(--oob-red); font-weight:600; }

.oo-form-sec :focus-visible{ outline:3px solid var(--oob-yellow); outline-offset:2px; border-radius:2px; }

/* ================= reveal ================= */
.oo-js .oo-form-sec .oo-reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.oo-js .oo-form-sec .oo-reveal.oo-is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .oo-js .oo-form-sec .oo-reveal{ opacity:1; transform:none; transition:none; } }

/* ================= theme hardening =================
   A theme styles bare h2, p, label, input and button; those rules beat
   inheritance however low their specificity. */
.oo-form-sec__eyebrow,.oo-form-sec__title,.oo-form-sec__lede,.oo-form-sec__note{ margin-block-end:0; }
.oo-form-sec__hours-k{ margin-block-end:8px; }

body.elementor-editor-active .oo-form-sec .oo-reveal{ opacity:1; transform:none; }

/* ================= field layout =================
   The original build lays a form out itself: 18px between rows, 7px between a
   label and its field, two-up where the fields are short. The form plugin
   wraps each control in a <p> and a <span>, so those are flattened here and
   the grid does the spacing instead — otherwise the plugin's margins stack on
   top of ours and the rows drift apart. */
.oo-form-sec__form .oo-form{ display:grid; gap:18px; }
.oo-form-sec__form .oo-row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .oo-form-sec__form .oo-row2{ grid-template-columns:1fr; } }
.oo-form-sec__form .oo-field{ display:flex; flex-direction:column; gap:7px; }
.oo-form-sec__form .oo-field label{ margin:0; }
/* wpautop wraps each label and control in a <p>, so that <p> becomes the
   column instead of the .oo-field itself */
.oo-form-sec__form .oo-field > p{ display:flex; flex-direction:column; gap:7px; margin:0; }
/* the plugin gives its own wrapper a 30px bottom margin, which is what was
   pushing the rows apart — the grid gap does that job here */
.oo-form-sec__form .oo-field .wpcf7-form-control-wrap{ display:block; margin:0; }
/* the field is a column, which would stretch the button across it — the
   design has it at the width of its own label */
.oo-form-sec__form .oo-field input[type=submit],
.oo-form-sec__form .oo-field button[type=submit]{ align-self:flex-start; }
.oo-form-sec__form .oo-form > p,
.oo-form-sec__form .oo-form > br{ display:none; }