/*!
 * Oyolloo Elements - J10 Contact widget.
 * Scoped to .oo-contact-sec: no element selector, no :root, nothing leaks.
 * Font stacks are unquoted here; CSS accepts space-separated identifiers.
 */
.oo-contact-sec{
  --ooi-maxw:1220px;
  --ooi-pad:clamp(18px,4.5vw,44px);
  --ooi-r:12px;
  --ooi-r-sm:6px;
  --ooi-yellow:#F7BE27;
  --ooi-yellow-dk:#E0A812;
  --ooi-red:#E3000E;
  --ooi-brown:#642F21;
  --ooi-red-dk:#BE0009;
  /* the native select and date chrome clashes with the brand, so both
     controls draw their own mark */
  --ooi-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");
  --ooi-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");
  --ooi-ink:#212121;
  --ooi-muted:#757575;
  --ooi-surface:#FFFFFF;
  --ooi-border:#EAEAEA;
  --ooi-border-2:#D9D9D9;
  --ooi-f-display:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --ooi-f-head:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --ooi-f-body:'Roboto','Roboto Fallback','Segoe UI',Helvetica,Arial,sans-serif;
  --ooi-sh:0 2px 8px rgba(100,47,33,.06), 0 18px 40px -24px rgba(100,47,33,.34);

  position:relative;
  padding:clamp(50px,6.5vw,92px) 0;
  background:#FFFFFF; color:var(--ooi-ink);
  font-family:var(--ooi-f-body); font-size:16px; line-height:1.7; font-weight:400;
}
.oo-contact-sec,.oo-contact-sec *,.oo-contact-sec *::before,.oo-contact-sec *::after{ box-sizing:border-box; }

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

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

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

/* ---- cards ---- */
.oo-contact__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:44px; }
@media (max-width:900px){ .oo-contact__cards{ grid-template-columns:1fr; } }

.oo-contact__card{
  display:flex; flex-direction:column; gap:11px;
  padding:28px 26px;
  background:var(--ooi-surface); border:1px solid var(--ooi-border);
  border-radius:var(--ooi-r); box-shadow:var(--ooi-sh);
}
.oo-contact__card-k{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font-family:var(--ooi-f-head); font-weight:600; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ooi-brown);
}
.oo-contact__card-k::before{ content:""; flex:none; width:22px; height:2px; background:currentColor; opacity:.5; }
.oo-contact__card-t{
  margin:0;
  font-family:var(--ooi-f-head); font-weight:600; font-size:1.25rem;
  text-transform:uppercase; color:var(--ooi-brown);
}
.oo-contact__card-p{ margin:0; color:var(--ooi-muted); font-size:.9rem; }
.oo-contact__row{
  display:flex; justify-content:space-between; gap:14px;
  padding:7px 0; font-size:.92rem; border-bottom:1px dotted var(--ooi-border);
}
.oo-contact__row:last-of-type{ border-bottom:0; }
.oo-contact__row span:first-child{
  font-family:var(--ooi-f-head); font-weight:500; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.oo-contact__row span:last-child{ color:var(--ooi-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.oo-contact__card-cta{ margin:auto 0 0; padding-top:6px; }
.oo-contact__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 20px; border-radius:var(--ooi-r-sm); border:2px solid var(--ooi-border-2);
  color:var(--ooi-ink); text-decoration:none;
  font-family:var(--ooi-f-head); font-weight:600; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.oo-contact__btn:hover{ border-color:var(--ooi-ink); color:var(--ooi-ink); }

/* ---- map ---- */
.oo-contact__map{
  position:relative; overflow:hidden;
  aspect-ratio:16/10;
  border:1px solid var(--ooi-border); border-radius:var(--ooi-r);
  background:#F7F7F7;
}
.oo-contact__map-img{
  display:block; width:100%; height:100%; max-width:none;
  object-fit:cover; border:0; border-radius:0;
}
/* the picture is centred on the restaurant, so the pin sits dead centre */
.oo-contact__pin{
  position:absolute; left:50%; top:50%; z-index:2;
  width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  background:var(--ooi-red); border:3px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.oo-contact__pin::after{
  content:""; position:absolute; inset:-11px; border-radius:50%;
  border:2px solid var(--ooi-red); animation:ooMapPulse 2.6s ease-out infinite;
}
@keyframes ooMapPulse{ 0%{ transform:scale(.55); opacity:.75; } 100%{ transform:scale(1.5); opacity:0; } }

.oo-contact__map-card{
  position:absolute; left:16px; bottom:16px; z-index:3;
  display:flex; flex-direction:column; gap:3px; text-align:left;
  padding:12px 18px;
  background:var(--ooi-surface); border:2px solid var(--ooi-yellow);
  border-radius:var(--ooi-r-sm);
  box-shadow:0 2px 6px rgba(33,33,33,.06), 0 14px 30px -18px rgba(33,33,33,.28);
}
.oo-contact__map-card small{
  font-family:var(--ooi-f-head); font-weight:500; font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ooi-muted);
}
.oo-contact__map-card b{
  font-family:var(--ooi-f-head); font-weight:600; font-size:.98rem;
  letter-spacing:.02em; color:var(--ooi-brown);
}
.oo-contact__map-cta{
  position:absolute; right:16px; top:16px; z-index:3;
  padding:9px 15px; border-radius:var(--ooi-r-sm);
  background:var(--ooi-yellow); color:#211A05; text-decoration:none;
  font-family:var(--ooi-f-head); font-weight:500; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  transition:background-color .2s ease;
}
.oo-contact__map-cta:hover{ background:var(--ooi-yellow-dk); color:#211A05; }
.oo-contact__map-credit{
  position:absolute; right:7px; bottom:6px; z-index:3;
  padding:2px 7px; border-radius:3px;
  background:rgba(255,255,255,.84); color:#3B3B3B;
  font-size:.6rem; line-height:1.4;
}
@media (max-width:560px){
  .oo-contact__map-card{ left:10px; bottom:10px; padding:10px 13px; }
  .oo-contact__map-cta{ right:10px; top:10px; }
}
@media (prefers-reduced-motion:reduce){ .oo-contact__pin::after{ animation:none; opacity:0; } }

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

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

/* theme hardening: a theme styles bare h2/h3/p/a/img, and those beat inheritance */
.oo-contact-sec__eyebrow,.oo-contact-sec__title,.oo-contact__card-k,
.oo-contact__card-t,.oo-contact__card-p{ margin-block-end:0; }
body.elementor-editor-active .oo-contact-sec .oo-reveal{ opacity:1; transform:none; }

/* ================= map beside the message form =================
   Two columns, aligned to the top, exactly as the design has them. With no
   form the map simply takes the whole width. */
.oo-contact__split{
  /* Two to one, the map taking the larger share: it is the thing a visitor
     came to this section for, and the form beside it is six short fields.
     minmax(0,…) rather than a bare fr: the map image is wider than its share
     and a bare fr floor is min-content, which would let it push past that. */
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,2.5fr);
  gap:20px; align-items:start;
}
.oo-contact__split--map{ grid-template-columns:minmax(0,1fr); }
@media (max-width:880px){ .oo-contact__split{ grid-template-columns:1fr; } }

.oo-contact__form-t{
  /* in the design the heading is a row of the form grid, so it sits the same
     18px above the first field as the rows sit apart */
  margin:0 0 18px; font-family:var(--ooi-f-display); font-weight:700;
  font-size:1.6rem; line-height:1.1; text-transform:uppercase; color:var(--ooi-brown);
}

/* ================= 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-contact__form .oo-form{ display:grid; gap:18px; }
.oo-contact__form .oo-row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .oo-contact__form .oo-row2{ grid-template-columns:1fr; } }
.oo-contact__form .oo-field{ display:flex; flex-direction:column; gap:7px; }
.oo-contact__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-contact__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-contact__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-contact__form .oo-field input[type=submit],
.oo-contact__form .oo-field button[type=submit]{ align-self:flex-start; }
.oo-contact__form .oo-form > p,
.oo-contact__form .oo-form > br{ display:none; }

/* ================= message form =================
 * The same field dressing the booking section uses, on this widget's own
 * tokens. The plugin only prints the controls; how they look is ours.
 */
.oo-contact__form label{
  display:block; margin-bottom:7px;
  font-family:var(--ooi-f-head); font-weight:500; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ooi-brown);
}
.oo-contact__form input[type=text],
.oo-contact__form input[type=email],
.oo-contact__form input[type=tel],
.oo-contact__form input[type=url],
.oo-contact__form input[type=date],
.oo-contact__form input[type=time],
.oo-contact__form input[type=number],
.oo-contact__form select,
.oo-contact__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(--ooi-f-body); font-size:.96rem; color:var(--ooi-ink);
  background:var(--ooi-surface); border:1px solid var(--ooi-border-2);
  border-radius:var(--ooi-r-sm);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.oo-contact__form textarea{ resize:vertical; min-height:100px; }
.oo-contact__form input:focus,
.oo-contact__form select:focus,
.oo-contact__form textarea:focus{
  outline:none; border-color:var(--ooi-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-contact__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(--ooi-arrow);
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
}
.oo-contact__form input[type=date]{ cursor:pointer; }
.oo-contact__form input[type=date]::-webkit-calendar-picker-indicator{
  width:16px; height:16px; margin:0; cursor:pointer; opacity:.75;
  background-image:var(--ooi-cal);
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
.oo-contact__form input[type=date]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

.oo-contact__form input[type=submit],
.oo-contact__form button[type=submit]{
  width:auto; padding:14px 30px; cursor:pointer;
  background:var(--ooi-red); color:#fff; border:2px solid transparent;
  border-radius:var(--ooi-r-sm);
  font-family:var(--ooi-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-contact__form input[type=submit]:hover,
.oo-contact__form button[type=submit]:hover{ background:var(--ooi-red-dk); color:#fff; transform:translateY(-1px); }
.oo-contact__form input[type=submit]:active,
.oo-contact__form button[type=submit]:active{ transform:translateY(1px); }