.oh-search-wrapper{display:flex;justify-content:center;width:100%}
.oh-search-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:nowrap;padding:14px;border-radius:12px;background:transparent}
.oh-field{display:flex;flex-direction:column;gap:6px;min-width:120px;flex:0 1 auto}
.oh-btn{padding:11px 18px;border:0;border-radius:10px;cursor:pointer;font-weight:600;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.oh-results{margin:20px 0}
.oh-table{width:100%;border-collapse:collapse}
.oh-table th,.oh-table td{border:1px solid #ddd;padding:10px;vertical-align:top}
.oh-desc{opacity:.8;margin-top:6px}
.oh-notice{padding:12px;border:1px solid #ddd;background:#fff;margin:12px 0}
.oh-cart{margin-top:16px;padding:12px;border:1px solid #ddd;background:#fff}
.oh-checkout{padding:12px;border:1px solid #ddd;background:#fff}


@media (max-width: 720px){.oh-search-bar{flex-wrap:wrap}.oh-field{min-width:140px;flex:1 1 140px}.oh-btn{width:100%}}


/* Professional "pill" search wizard */
.oh-search-wrapper{justify-content:center}
.oh-search-bar--pill{width:100vw;max-width:none;box-sizing:border-box;padding:20px;margin:0 auto;}
.oh-pill{flex-wrap:wrap;
  display:flex;
  align-items:stretch;
  gap:0;
  width:100%;
  border-radius:10px;
  overflow:hidden;
  background:#2f4aa0; /* matches screenshot vibe */
  padding:0;
}
.oh-pill__seg{
  display:flex;
  align-items:center;
  background:#fff;
  border-right:2px solid rgba(255, 196, 0, .9);
  padding:10px 12px;
  gap:10px;
}
.oh-pill__seg:last-child{border-right:0}
.oh-pill__icon{display:inline-flex;opacity:.8}
.oh-pill__control{
  border:0;
  background:transparent;
  outline:none;
  font:inherit;
  min-height:24px;
}
.oh-pill__seg--location .oh-pill__control{min-width:210px}
.oh-pill__dates{display:flex;align-items:center;gap:10px}
.oh-pill__date{min-width:160px}
.oh-pill__dash{opacity:.5}
.oh-pill__guests{display:flex;align-items:baseline;gap:8px}
.oh-pill__adults{width:70px}
.oh-pill__hint{opacity:.7;font-size:.95em;white-space:nowrap}
.oh-pill__seg--submit{
  background:transparent;
  padding:0;
}
.oh-pill__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:100%;
  border:0;
  cursor:pointer;
  padding:0 22px;
  font-weight:700;
  letter-spacing:.2px;
  border-radius:0;
  background:#3d5bd6;
  color:#fff;
}
.oh-pill__btn:focus{outline:2px solid rgba(255,255,255,.7);outline-offset:-2px}
.oh-pill__btn:hover{filter:brightness(1.03)}
/* Mobile: stack cleanly */
@media (max-width: 820px){
  .oh-pill{flex-wrap:wrap;flex-wrap:wrap;border-radius:12px;overflow:visible;background:transparent;gap:10px}
  .oh-pill__seg{flex:1 1 260px;border-right:0;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
  .oh-pill__seg--submit{flex:1 1 100%;background:transparent;padding:0}
  .oh-pill__btn{width:100%;border-radius:12px;min-height:44px}
}


/* Ensure native date picker icon remains visible */
.oh-pill__date{
  padding-right: 10px;
}
.oh-pill__date::-webkit-calendar-picker-indicator{
  opacity: 1;
  cursor: pointer;
}
.oh-pill__date::-webkit-inner-spin-button,
.oh-pill__date::-webkit-clear-button{
  opacity: 1;
}

/* Allow pill to wrap gracefully when not enough horizontal space */
.oh-pill{flex-wrap:wrap;
  flex-wrap: wrap;
}
.oh-pill__seg{
  flex: 1 1 auto;
}
.oh-pill__seg--submit{
  flex: 0 0 auto;
}


/* --- Search wizard layout fixes (widescreen stays one line; wrap only when needed) --- */
.oh-pill{flex-wrap:wrap;flex-wrap:nowrap;}
.oh-pill__seg{flex:0 0 auto;}
.oh-pill__seg--location .oh-pill__control{min-width:240px;}
.oh-pill__date{min-width:170px;}
.oh-pill__seg--submit{flex:0 0 auto;}
.oh-pill__btn{min-height:44px;border-radius:0;padding:0 22px;}

/* Wrap gracefully only when the container is actually narrow */
@media (max-width: 980px){
  .oh-pill{flex-wrap:wrap;flex-wrap:wrap;background:transparent;gap:10px;overflow:visible;border-radius:12px}
  .oh-pill__seg{flex:1 1 260px;border-right:0;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
  .oh-pill__seg--submit{flex:0 0 auto;background:transparent;padding:0}
  .oh-pill__btn{border-radius:12px}
}

/* On very small screens, make the button full width */
@media (max-width: 620px){
  .oh-pill__seg--submit{flex:1 1 100%}
  .oh-pill__btn{width:100%}
}

/* --- Wizard: location + dates + search only --- */
.oh-pill__seg--dates{flex:0 0 auto;}
.oh-pill__seg--submit{background:transparent; padding:0;}
.oh-pill__btn{min-height:44px; padding:0 24px; border-radius:0; white-space:nowrap;}


/* --- Wizard stacked layout: Location, Dates, Guests, Search --- */
.oh-search-bar--pill{max-width:760px}
.oh-pill{flex-wrap:wrap;
  flex-direction:column;
  background:transparent;
  gap:12px;
  overflow:visible;
}
.oh-pill__seg{
  border-right:0;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  padding:12px 14px;
}
.oh-pill__seg--submit{
  padding:0;
  box-shadow:none;
  background:transparent;
}
.oh-pill__btn{
  width:100%;
  border-radius:14px;
  min-height:46px;
}
.oh-pill__seg--location .oh-pill__control{min-width:0;width:100%}
.oh-pill__dates{width:100%}
.oh-pill__date{width:100%}
.oh-pill__dates{gap:12px}
.oh-pill__dash{flex:0 0 auto}
.oh-pill__adults{width:90px}
.oh-pill__sr{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Fix: ensure dates segment is visible in stacked wizard */
.oh-pill__seg--dates{display:flex}
.oh-pill__dates{flex:1 1 auto}

/* --- Wizard layout: row 1 (location+dates), row 2 (guests+search) --- */
.oh-pill{flex-wrap:wrap;
  display:grid;
  grid-template-columns: 2.5fr 1fr 1.5fr 1fr 1.2fr;
  grid-template-areas:
    "location dates"
    "guests submit";
  gap:12px;
}

.oh-pill__seg--location{grid-area:location}
.oh-pill__seg--dates{grid-area:dates}
.oh-pill__seg--guests{grid-area:guests}
.oh-pill__seg--submit{grid-area:submit}

@media (max-width: 720px){
  .oh-pill{flex-wrap:wrap;
    grid-template-columns: 1fr;
    grid-template-areas:
      "location"
      "dates"
      "guests"
      "submit";
  }
}

/* --- FORCE 2-row layout (location+dates / guests+search) --- */
.oh-search-bar--pill .oh-pill{flex-wrap:wrap;
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "location dates"
    "guests submit" !important;
  gap:12px !important;
  flex-direction:initial !important;
  flex-wrap:initial !important;
}
.oh-search-bar--pill .oh-pill__seg{width:auto !important}
.oh-search-bar--pill .oh-pill__seg--location{grid-area:location !important}
.oh-search-bar--pill .oh-pill__seg--dates{grid-area:dates !important}
.oh-search-bar--pill .oh-pill__seg--guests{grid-area:guests !important}
.oh-search-bar--pill .oh-pill__seg--submit{grid-area:submit !important}

@media (max-width: 720px){
  .oh-search-bar--pill .oh-pill{flex-wrap:wrap;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "location"
      "dates"
      "guests"
      "submit" !important;
  }
}


/* === Ourhotels Search Wizard (professional) === */
.oh-search-wrapper{justify-content:center}
.oh-wizard-card{
  width:100%;
  max-width: 1400px;
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:16px;
  padding:18px;
  box-shadow:0 8px 30px rgba(17,24,39,.06);
}
.oh-wizard-title{
  font-size:14px;
  font-weight:700;
  letter-spacing:.2px;
  color:rgba(17,24,39,.78);
  margin:0 0 12px 2px;
}
.oh-search-bar--pill{width:100%;max-width:860px}

/* Force 2-row layout: row1 location+dates, row2 guests+button */
.oh-search-bar--pill .oh-pill{flex-wrap:wrap;
  display:grid !important;
  grid-template-columns: 1.05fr 1.35fr;
  grid-template-areas:
    "location dates"
    "guests submit";
  gap:14px;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.oh-search-bar--pill .oh-pill__seg{
  grid-auto-flow:column;
  align-items:center;
  background:#fff;
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  padding:12px 14px;
  gap:12px;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.oh-search-bar--pill .oh-pill__seg:hover{
  background:#f7f9ff;
  border-color:rgba(61,91,214,.25);
}
.oh-search-bar--pill .oh-pill__seg:focus-within{
  border-color:rgba(61,91,214,.55);
  box-shadow:0 0 0 4px rgba(61,91,214,.12);
}
.oh-search-bar--pill .oh-pill__seg--location{grid-area:location}
.oh-search-bar--pill .oh-pill__seg--dates{grid-area:dates; cursor:pointer}
.oh-search-bar--pill .oh-pill__seg--guests{grid-area:guests}
.oh-search-bar--pill .oh-pill__seg--submit{grid-area:submit; border:0; padding:0; background:transparent; box-shadow:none}
.oh-pill__icon{display:inline-flex;opacity:.85}
.oh-pill__body{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto}
.oh-pill__label{font-size:12px;font-weight:700;color:rgba(17,24,39,.6);line-height:1}
.oh-pill__control{
  border:0;
  background:transparent;
  outline:none;
  font:inherit;
  color:rgba(17,24,39,.92);
  min-height:24px;
  padding:0;
}
.oh-pill__seg--location .oh-pill__control{width:100%}
.oh-pill__dates{display:flex;align-items:center;gap:12px}
.oh-pill__date{
  min-width:160px;
  padding-right:10px;
}
.oh-pill__dash{opacity:.5}

/* Show native date picker icon */
.oh-pill__date::-webkit-calendar-picker-indicator{opacity:1;cursor:pointer}
.oh-pill__date::-webkit-inner-spin-button,
.oh-pill__date::-webkit-clear-button{opacity:1}

/* Guests stepper */
.oh-stepper{display:inline-flex;align-items:center;gap:10px}
.oh-stepper__btn{
  width:38px;height:38px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.oh-stepper__btn:hover{background:#f7f9ff;border-color:rgba(61,91,214,.35)}
.oh-stepper__btn:active{transform:translateY(1px)}
.oh-stepper__btn:disabled{opacity:.45;cursor:not-allowed}
.oh-stepper__value{min-width:22px;text-align:center;font-weight:800}

/* CTA button */
.oh-pill__btn{
  width:100%;
  min-height:48px;
  border:0;
  border-radius:14px;
  cursor:pointer;
  background:#3d5bd6;
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 10px 20px rgba(61,91,214,.22);
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}
.oh-pill__btn:hover{filter:brightness(1.03); box-shadow:0 12px 24px rgba(61,91,214,.26)}
.oh-pill__btn:active{transform:translateY(1px)}

/* Responsive */
@media (max-width: 860px){
  .oh-wizard-card{padding:16px}
  .oh-search-bar--pill .oh-pill{flex-wrap:wrap;
    grid-template-columns: 1fr;
    grid-template-areas:
      "location"
      "dates"
      "guests"
      "submit";
  }
  .oh-pill__dates{flex-wrap:wrap}
  .oh-pill__date{min-width:140px;flex:1 1 140px}
}

/* Center the booking wizard horizontally */
.oh-search-wrapper{
  display:flex;
  justify-content:center;
}

.oh-full-width-row {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    padding: 20px 0;
}

.oh-qty-minus, .oh-qty-plus {
    background: #eee;
    border: none;
    padding: 6px 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
}
.oh-qty-input {
    width: 50px;
    text-align: center;
    margin: 0 5px;
    padding: 6px;
}

.oh-cart a.oh-btn {
    display: inline-block;
    margin: 20px auto 0;
    text-align: center;
}


/* === Search results redesign === */
.oh-results h2{margin:0 0 14px}
.oh-results-list{display:flex;flex-direction:column;gap:12px;margin:12px 0 18px}
.oh-room-card{
  display:flex;
  gap:16px;
  align-items:stretch;
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 30px rgba(17,24,39,.04);
}
.oh-room-card__main{flex:1 1 auto;min-width:0}
.oh-room-card__title{font-weight:800;font-size:18px;line-height:1.2;margin:2px 0 8px;color:rgba(17,24,39,.92)}
.oh-room-card__desc{color:rgba(17,24,39,.72);font-size:14px;line-height:1.45}
.oh-room-card__aside{flex:0 0 320px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.oh-room-card__price{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.oh-room-card__label{font-size:12px;font-weight:700;color:rgba(17,24,39,.6);text-transform:uppercase;letter-spacing:.2px}
.oh-room-card__value{font-weight:900;font-size:18px;color:rgba(17,24,39,.92)}
.oh-room-card__controls{display:flex;gap:10px;align-items:center}
.oh-room-card__qty{flex:0 0 auto}
.oh-room-card__add{flex:1 1 auto;border-radius:12px;min-height:44px}
.oh-room-card__hint{font-size:12px;color:rgba(17,24,39,.55)}
.oh-results-continue{display:flex;justify-content:center;margin:18px 0 0}
.oh-results-continue .oh-pill__btn{min-height:46px;border-radius:14px;padding:0 28px}

@media (max-width: 900px){
  .oh-room-card{flex-direction:column}
  .oh-room-card__aside{flex:1 1 auto}
  .oh-room-card__controls{flex-wrap:wrap}
  .oh-room-card__add{width:100%}
}


/* === Booking.com-like qty controls (results) === */
.oh-room-card__controls{align-items:flex-start}
.oh-room-card__qty{
  display:inline-flex;
  align-items:center;
  gap:0;
  border:1px solid rgba(17,24,39,.18);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.oh-room-card__qty .oh-qty-minus,
.oh-room-card__qty .oh-qty-plus{
  width:40px;
  height:40px;
  padding:0;
  border:0;
  background:#f3f4f6;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.oh-room-card__qty .oh-qty-minus:active,
.oh-room-card__qty .oh-qty-plus:active{transform:translateY(1px)}
.oh-room-card__qty .oh-qty-input{
  width:52px;
  height:40px;
  border:0;
  text-align:center;
  font-weight:800;
  background:#fff;
  -moz-appearance:textfield;
}
.oh-room-card__qty .oh-qty-input::-webkit-outer-spin-button,
.oh-room-card__qty .oh-qty-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

.oh-room-card__max{
  font-size:12px;
  color:rgba(17,24,39,.55);
  margin-top:6px;
  text-align:center;
  width:100%;
}

/* Remove extra spacing in qty wrapper we reused from wizard */
.oh-pill__guests.oh-room-card__qty{box-shadow:none;padding:0}

/* Cart summary booking.com-like */
#oh-cart-summary{
  margin:12px 0 0;
  padding:14px;
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  background:#fff;
}
#oh-cart-summary h3{margin:0 0 10px;font-size:14px;font-weight:900;color:rgba(17,24,39,.9)}
#oh-cart-summary ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
#oh-cart-summary li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid rgba(17,24,39,.08);border-radius:12px;background:#fafafa}
#oh-cart-summary li form{margin:0}
#oh-cart-summary .button-link{
  border:0;
  background:transparent;
  color:#3d5bd6;
  font-weight:800;
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
}
#oh-cart-summary .button-link:hover{background:rgba(61,91,214,.08)}
#oh-cart-summary .button{
  border:1px solid rgba(17,24,39,.18);
  background:#fff;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}
#oh-cart-summary .button:hover{background:#f3f4f6}

/* Continue should be below cart summary */
.oh-results-continue{margin-top:14px}


/* === Checkout styling (match wizard/results) === */
.oh-checkout{margin:20px 0;display:flex;justify-content:center}
.oh-checkout-card{max-width:860px}
.oh-checkout-dates{font-weight:800;color:rgba(17,24,39,.75);margin:0 0 12px 2px}
.oh-checkout-section{margin-top:10px}
.oh-checkout-section__title{font-weight:900;margin:6px 0 10px;color:rgba(17,24,39,.9)}
.oh-checkout-rooms{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.oh-checkout-room{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid rgba(17,24,39,.08);border-radius:12px;background:#fafafa}
.oh-checkout-form{margin-top:14px}
.oh-checkout-grid{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(240px,2fr) minmax(160px,1fr);gap:12px}
.oh-checkout-field{display:flex;flex-direction:column;gap:6px;font-weight:800;color:rgba(17,24,39,.8)}
.oh-checkout-field input{height:44px;border:1px solid rgba(17,24,39,.14);border-radius:12px;padding:0 12px;font-weight:700;width:100%}
.oh-checkout-actions{display:flex;justify-content:center;margin-top:14px}
.oh-checkout-submit{min-height:46px;border-radius:14px;padding:0 28px}

@media (max-width:720px){
  .oh-checkout-grid{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(240px,2fr) minmax(160px,1fr);gap:12px}
}


/* === Booking.com-like qty (results) === */
.oh-room-card__controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.oh-qty{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(17,24,39,.18);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.oh-qty-step{
  width:40px;height:40px;border:0;background:#f3f4f6;cursor:pointer;font-size:18px;line-height:1;
}
.oh-qty-value{
  width:52px;height:40px;display:flex;align-items:center;justify-content:center;font-weight:900;
}
.oh-room-card__max{font-size:12px;color:rgba(17,24,39,.55);margin-top:0}


/* === Results layout tweaks (requested) === */
.oh-results{
  max-width: 1200px;  /* wider and centered */
  margin-left: auto;
  margin-right: auto;
}

/* Make cards feel wider by reducing side constraints */
.oh-results-list{max-width: 1200px; margin-left:auto; margin-right:auto;}

/* Controls inline: qty + add button on the right */
.oh-room-card__controls{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
}

/* Keep qty box fixed size */
.oh-qty{flex:0 0 auto}

/* Add room button matches qty control size */
.oh-room-card__add{
  height:40px !important;
  min-height:40px !important;
  width:132px !important; /* 40 + 52 + 40 */
  padding:0 !important;
  border-radius:12px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.06) !important;
}

/* Ensure aside doesn't force the button below */
.oh-room-card__aside{
  flex:0 0 420px !important;
}

/* On small screens allow wrapping */
@media (max-width: 900px){
  .oh-room-card__controls{flex-wrap:wrap !important; justify-content:flex-start !important;}
  .oh-room-card__add{width:100% !important;}
}


/* === Results: +/- is add/remove, plus is blue === */
.oh-qty--cart .oh-qty-step--plus{
  background:#3d5bd6 !important;
  color:#fff !important;
}
.oh-qty--cart .oh-qty-step--minus{
  background:#f3f4f6 !important;
  color:#111827 !important;
}

/* Remove any old add-room sizing if present */
.oh-room-card__add{display:none !important;}


/* Force + button blue in results stepper */
.oh-results .oh-qty--cart .oh-qty-step--plus,
.oh-results .oh-qty--cart .oh-qty-step--plus:hover,
.oh-results .oh-qty--cart .oh-qty-step--plus:focus{
  background-color:#3d5bd6 !important;
  color:#fff !important;
}


/* Checkout payment block styling */
.oh-pay-card{
  margin-top:12px;
  padding:14px;
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  background:#fff;
}
.oh-pay-title{font-weight:900;margin:0 0 10px;color:rgba(17,24,39,.9)}
.oh-pay-element{
  padding:12px;
  border:1px solid rgba(17,24,39,.14);
  border-radius:12px;
  background:#fff;
}
.oh-pay-error{margin-top:10px;color:#b91c1c;font-weight:700}


/* FORCE plus button blue (strong override) */
.oh-qty-step--plus{
  background-color:#3d5bd6 !important;
  color:#fff !important;
}
.oh-qty-step--plus:hover,
.oh-qty-step--plus:focus{
  background-color:#2f4cc7 !important;
  color:#fff !important;
}


/* Phone input with country flag */
.oh-checkout-field .iti{
  width:100%;
}
.oh-checkout-field .iti input{
  width:100%;
  height:44px;
}
.oh-checkout-field .iti__flag-container{
  border-right:1px solid rgba(17,24,39,.14);
}

/* Coupon UI */
.oh-pay-summary{display:grid;gap:8px;margin:10px 0 14px}
.oh-pay-summary > div{display:flex;justify-content:space-between;align-items:center;font-weight:800}
.oh-pay-summary__pay{border-top:1px solid rgba(17,24,39,.10);padding-top:8px}
.oh-coupon{margin:10px 0 14px}
.oh-coupon__label{display:block;font-weight:900;margin:0 0 6px}
.oh-coupon__row{display:flex;gap:10px}
#oh-coupon-code{flex:1;height:44px;border:1px solid rgba(17,24,39,.14);border-radius:12px;padding:0 12px}
.oh-coupon__apply{height:44px;border-radius:12px;border:0;padding:0 14px;cursor:pointer;background:#3d5bd6;color:#fff;font-weight:900}
.oh-coupon__msg{margin-top:6px;font-weight:800}
.oh-coupon__msg.is-ok{color:#065f46}
.oh-coupon__msg.is-bad{color:#b91c1c}


/* Search results: new card layout */
.oh-room-card{
  display:grid;
  grid-template-columns: 1.6fr 220px 120px 170px;
  gap:16px;
  align-items:center;
}
.oh-room-card__col{min-width:0}
.oh-room-card__col--details{align-self:start}
.oh-room-card__meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.oh-term-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid rgba(17,24,39,.10);
  border-radius:999px;
  font-size:12px;
  color:rgba(17,24,39,.78);
  background:rgba(17,24,39,.02);
}
.oh-term-chip__icon img{display:block}
.oh-term-chip img{width:18px;height:18px;object-fit:contain}
.oh-guests{display:inline-flex;align-items:center;gap:8px;font-weight:800}
.oh-guests__icon{font-size:18px;line-height:1}
.oh-gallery{display:flex;gap:8px;overflow:auto;padding-bottom:2px}
.oh-gallery__img img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid rgba(17,24,39,.08)}
@media (max-width: 980px){
  .oh-room-card{grid-template-columns: 1fr; align-items:stretch}
  .oh-room-card__col--guests,.oh-room-card__col--price,.oh-room-card__col--qty{display:flex;justify-content:flex-start}
}

.oh-room-card__title-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.oh-room-card__guests-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  color:rgba(17,24,39,.82);
  white-space:nowrap;
}

/* Wider results container */
.oh-results{
  width:100%;
  max-width:1200px;
  margin:20px auto;
  padding:0 16px;
  box-sizing:border-box;
}

.oh-gallery__btn{
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:inline-flex;
}
.oh-gallery__btn img{
  width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid rgba(17,24,39,.08);
}
#oh-gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}
#oh-gallery-lightbox.is-open{display:block;}
#oh-gallery-lightbox .oh-glb__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
}
#oh-gallery-lightbox .oh-glb__panel{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  max-width:min(92vw, 1000px);
  max-height:86vh;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
#oh-gallery-lightbox .oh-glb__img{
  display:block;
  width:100%;
  height:auto;
  max-height:86vh;
  object-fit:contain;
  background:#000;
}
#oh-gallery-lightbox .oh-glb__close{
  position:absolute;
  right:10px; top:8px;
  width:36px; height:36px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.9);
  font-size:22px;
  line-height:36px;
  cursor:pointer;
}
html.oh-glb__lock{overflow:hidden;}

.oh-room-card__guests-inline .oh-guests__icon{
  display:inline-flex;
  align-items:center;
}

/* Table-like search results layout */
.oh-room-card{
  align-items:start;
}
.oh-room-card__col--details{grid-column:1}
.oh-room-card__title-row{
  font-weight:700;
}

/* Results card alignment fix */
.oh-room-card{
  align-items:center;
}
.oh-room-card__col--details{
  align-self:stretch;
}
.oh-room-card__col--price,
.oh-room-card__col--qty{
  justify-self:end;
}

/* Search results: column layout */
.oh-room-card{
  width:100%;
  align-items:stretch;
}
.oh-room-card__col{
  padding:16px 18px;
}
.oh-room-card__col + .oh-room-card__col{
  border-left:1px solid rgba(17,24,39,.10);
}
.oh-room-card__col--occ,
.oh-room-card__col--price{
  display:flex;
  align-items:center;
  justify-content:center;
}
.oh-room-card__col--qty{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.oh-room-card__title{
  font-weight:800;
  font-size:18px;
}
.oh-room-card__guests-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  white-space:nowrap;
}
.oh-room-card__meta{
  margin-top:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
@media (max-width: 980px){
  .oh-room-card{grid-template-columns:1fr;}
  .oh-room-card__col + .oh-room-card__col{border-left:0;border-top:1px solid rgba(17,24,39,.10);}
  .oh-room-card__col--qty{justify-content:flex-start;}
}

/* Occupancy column fixed width */
.oh-room-card__col--occ{
  padding-left:6px;
  padding-right:6px;
  justify-content:center;
}


/* OH override: search results column widths */
@media (min-width: 981px){
  .oh-results .oh-room-card{
    display:grid !important;
    grid-template-columns: 20% 5% 20% 20% 20%;
    gap:0 !important;
    align-items:stretch !important;
  }
  .oh-results .oh-room-card__col--qty{
    justify-content:flex-end;
  }
}

.oh-price-per-night{display:block;font-size:13px;font-weight:400;color:#6b7280;margin-top:2px;}

/* PRICE 20% */
@media (min-width:981px){
  .oh-results .oh-room-card{
    grid-template-columns: 20% 5% 20% 20% 20% !important;
  }
}


/* Empty column before price */
.oh-room-card__col--extra{
  width:20%;
}

.oh-room-card__location{margin-top:4px;font-size:14px;line-height:1.2;color:rgba(17,24,39,.72)}



/* Room results: show tags, amenities and terms as plain icon + text (no bubbles) */
.oh-room-card__meta--tags,
.oh-room-card__meta--amenities,
.oh-room-card__meta--terms{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}

.oh-room-card__meta--tags .oh-term-chip,
.oh-room-card__meta--amenities .oh-term-chip,
.oh-room-card__meta--terms .oh-term-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:14px;
  color:rgba(17,24,39,.78);
}

.oh-room-card__meta--tags .oh-term-chip__label,
.oh-room-card__meta--amenities .oh-term-chip__label,
.oh-room-card__meta--terms .oh-term-chip__label{
  line-height:1.2;
}


.oh-room-card__meta--terms .oh-term-chip__icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:block;
}
.oh-room-card__meta--terms .oh-term-chip__icon img{
  width:18px;
  height:18px;
  object-fit:cover;
  display:block;
}




/* === 6-column grid (room results) v7 - explicit column placement === */
.oh-room-card{
  display: grid;
  grid-template-columns:
    minmax(160px, 2.2fr)   /* 1 Room */
    minmax(56px, 80px)     /* 2 Guests */
    minmax(100px, 1.2fr)   /* 3 Features */
    minmax(100px, 1.2fr)   /* 4 Conditions */
    minmax(60px, 90px)     /* 5 Price */
    minmax(100px, 120px);  /* 6 Quantity */
  gap: 8px;
  align-items: start;
}

/* Force each cell into a fixed grid column (avoids auto-placement surprises) */
.oh-room-card > .oh-room-card__col{ grid-row: 1; }
.oh-room-card > .oh-room-card__col--name{ grid-column: 1; }
.oh-room-card > .oh-room-card__col--occ{ grid-column: 2; }
.oh-room-card > .oh-room-card__col--included{ grid-column: 3; }
.oh-room-card > .oh-room-card__col--extra{ grid-column: 4; }
.oh-room-card > .oh-room-card__col--price{ grid-column: 5; justify-self: end; }
.oh-room-card > .oh-room-card__col--qty{ grid-column: 6; justify-self: end; width: auto !important; }

/* Price stack */
.oh-room-card__price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.oh-room-card__value{ font-size:18px; line-height:1.1; }
.oh-price-per-night{ font-size:12px; line-height:1.1; color: rgba(17,24,39,.62); }

/* Quantity control must respect column cap */
.oh-room-card__col--qty .oh-qty{ width: 100%; max-width: 120px; }

/* Mobile: stack */
@media (max-width: 768px){
  .oh-room-card{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Reset explicit placement so natural flow stacks */
  .oh-room-card > .oh-room-card__col{
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
  .oh-room-card__price{ align-items:flex-start; }
}



/* === v8: center price column === */
.oh-room-card > .oh-room-card__col--price{
  justify-self: center;
}

.oh-room-card__price{
  align-items: center;
  text-align: center;
}



/* === v9: Mobile-friendly layout for room cards === */
@media (max-width: 768px){
  /* 2-column header (name + price), then stacked details, then qty full-width */
  .oh-room-card{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name price"
      "occ occ"
      "included included"
      "extra extra"
      "qty qty";
    gap: 12px;
    align-items: start;
  }

  /* Map columns to areas */
  .oh-room-card > .oh-room-card__col--name{ grid-area: name !important; }
  .oh-room-card > .oh-room-card__col--price{ grid-area: price !important; justify-self: end !important; }
  .oh-room-card > .oh-room-card__col--occ{ grid-area: occ !important; }
  .oh-room-card > .oh-room-card__col--included{ grid-area: included !important; }
  .oh-room-card > .oh-room-card__col--extra{ grid-area: extra !important; }
  .oh-room-card > .oh-room-card__col--qty{ grid-area: qty !important; justify-self: stretch !important; }

  /* Price stays compact on mobile */
  .oh-room-card__price{
    align-items: flex-end;
    text-align: right;
  }

  /* Make chips wrap nicely */
  .oh-room-card__meta{
    gap: 8px;
  }
  .oh-term-chip{
    max-width: 100%;
  }

  /* Quantity control: full-width and thumb-friendly */
  .oh-room-card__col--qty .oh-qty{
    max-width: none;
    width: 100%;
    justify-content: space-between;
    border-radius: 14px;
  }
  .oh-room-card__col--qty .oh-qty-step{
    min-width: 52px;
    min-height: 44px;
    font-size: 22px;
  }
  .oh-room-card__col--qty .oh-qty-value{
    min-width: 56px;
    text-align: center;
    font-size: 18px;
  }

  /* Reduce vertical dividers (if present) so it doesn't look like a table */
  .oh-room-card__col{
    border-right: 0 !important;
    padding-right: 0 !important;
  }
}

/* Small phones: let header stack if needed */
@media (max-width: 420px){
  .oh-room-card{
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "price"
      "occ"
      "included"
      "extra"
      "qty";
  }
  .oh-room-card > .oh-room-card__col--price{
    justify-self: start !important;
  }
  .oh-room-card__price{
    align-items: flex-start;
    text-align: left;
  }
}



/* === v10: Mobile two-column layout for features + conditions === */
@media (max-width: 768px){
  .oh-room-card{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name price"
      "occ occ"
      "included extra"
      "qty qty";
    gap: 12px;
  }

  .oh-room-card > .oh-room-card__col--included{ grid-area: included !important; }
  .oh-room-card > .oh-room-card__col--extra{ grid-area: extra !important; }

  /* Ensure clean wrapping inside half-width columns */
  .oh-room-card__meta{
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* Very small phones: stack again */
@media (max-width: 420px){
  .oh-room-card{
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "price"
      "occ"
      "included"
      "extra"
      "qty";
  }
}


/* Rooms tonight (mobile quick actions) */
.oh-tonight { display: none; }
@media (max-width: 768px) {
  .oh-tonight { display: block; margin: 12px 0 16px; }
  .oh-tonight__title { font-weight: 700; margin-bottom: 8px; }
  .oh-tonight__actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .oh-tonight__btn {
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    cursor: pointer;
  }
}


/* Room types by location (accordion) */

.oh-roomtypes { margin: 16px 0; }
.oh-roomtype { margin: 14px 0; }
.oh-roomtype-details { border: 1px solid rgba(0,0,0,.12); border-radius: 10px; overflow: hidden; background: #fff; }
.oh-roomtype-summary { cursor: pointer; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oh-roomtype-summary::-webkit-details-marker { display: none; }
.oh-roomtype-title { font-weight: 600; }
.oh-roomtype-chevron { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; margin-left: 12px; opacity: .7; }
details[open] .oh-roomtype-chevron { transform: rotate(-135deg); }
.oh-roomtype-body { padding: 0 16px 16px; }
.oh-roomtype-desc { margin-top: 8px; }
.oh-roomtype-amenities, .oh-roomtype-tags { margin-top: 10px; }
.oh-roomtype-more { margin-top: 12px; }
.oh-roomtype-more a { text-decoration: underline; }
.oh-rt-hero img { width: 100%; height: auto; border-radius: 10px; display: block; margin-top: 12px; }
.oh-rt-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.oh-rt-gallery-img { width: 100%; height: auto; border-radius: 8px; display: block; }
@media (max-width: 800px) {
  .oh-rt-gallery { grid-template-columns: repeat(2, 1fr); }
}

.oh-roomtype-capacity{margin-top:10px;}



/* Offer buttons */
.oh-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:14px;
  border:0;
  cursor:pointer;
  font-weight:700;
  font-size:18px;
  line-height:1;
  background:#3f5bd8;
  color:#fff;
}
.oh-btn-primary:hover{filter:brightness(0.95);}
.oh-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:14px;
  border:2px solid #3f5bd8;
  cursor:pointer;
  font-weight:700;
  font-size:18px;
  line-height:1;
  background:transparent;
  color:#3f5bd8;
}
.oh-btn-secondary:hover{background:rgba(63,91,216,0.08);}
.oh-badge-discount{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:rgba(255,255,255,0.18);
}

/* Offer 2-column divider */
@media (min-width: 768px){
  .oh-offer-columns{display:flex;gap:28px;}
  .oh-offer-columns .oh-col-left{flex:1;}
  .oh-offer-columns .oh-col-right{flex:1;position:relative;padding-left:28px;}
  .oh-offer-columns .oh-col-right:before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:1px;
    background:rgba(0,0,0,0.12);
  }
}



/* Divider for offer columns (current markup uses .oh-row + .oh-col-right) */
@media (min-width: 768px){
  .oh-card .oh-row{display:flex;gap:28px;align-items:flex-start;}
  .oh-card .oh-row > .oh-col{flex:1;}
  .oh-card .oh-row .oh-col-right{position:relative;padding-left:28px;}
  .oh-card .oh-row .oh-col-right:before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:1px;
    background:rgba(0,0,0,0.12);
  }
}


/* Make offer action links look like buttons */
.oh-offer-actions a.oh-btn-primary, .oh-offer-actions a.oh-btn-secondary{display:inline-block; text-decoration:none;}


/* ============================================================================
 * Ourhotels 5.6.0 mobile / visual polish layer
 * ----------------------------------------------------------------------------
 * This block is appended (not merged into the rules above) so that a visual
 * regression is easy to spot and revert: delete everything below this banner
 * to return to 5.5.0 styling. Every rule is additive.
 * ========================================================================= */

/* Design tokens — CSS custom properties so the whole theme can be retuned
 * from one place and a dark-mode override can swap a handful of values. */
:root {
    --oh-bg: #ffffff;
    --oh-fg: #111827;
    --oh-fg-muted: rgba(17, 24, 39, 0.72);
    --oh-fg-subtle: rgba(17, 24, 39, 0.55);
    --oh-surface: #ffffff;
    --oh-surface-2: #f9fafb;
    --oh-border: #e5e7eb;
    --oh-border-strong: #d1d5db;
    --oh-accent: #1f6feb;
    --oh-accent-contrast: #ffffff;
    --oh-danger: #b91c1c;
    --oh-success: #166534;

    --oh-radius-sm: 6px;
    --oh-radius: 10px;
    --oh-radius-lg: 14px;

    --oh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --oh-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Modular type scale at 1.2. Baseline 16px. */
    --oh-text-xs:  12px;
    --oh-text-sm:  14px;
    --oh-text-md:  16px;
    --oh-text-lg:  19px;
    --oh-text-xl:  23px;
    --oh-text-2xl: 28px;

    --oh-line-body: 1.6;
    --oh-line-tight: 1.3;

    --oh-tap-min: 44px;
}

/* Dark mode: respects OS preference. Opt-out by setting
 * `html[data-oh-theme="light"]` from the host theme if ever needed. */
@media (prefers-color-scheme: dark) {
    :root {
        --oh-bg: #0b0f17;
        --oh-fg: #f3f4f6;
        --oh-fg-muted: rgba(243, 244, 246, 0.78);
        --oh-fg-subtle: rgba(243, 244, 246, 0.58);
        --oh-surface: #111827;
        --oh-surface-2: #1f2937;
        --oh-border: #374151;
        --oh-border-strong: #4b5563;
        --oh-accent: #60a5fa;
        --oh-accent-contrast: #0b0f17;
        --oh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --oh-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    .oh-room-card,
    .oh-cart,
    .oh-checkout,
    .oh-notice {
        background: var(--oh-surface);
        color: var(--oh-fg);
        border-color: var(--oh-border);
    }
    .oh-table th,
    .oh-table td { border-color: var(--oh-border); }
}

/* ---------- Mobile-critical fixes ----------------------------------------- */

/* iOS Safari zooms any focused input with computed font-size < 16px and never
 * zooms back. Force 16px on all form controls to prevent the zoom trap. */
.oh-search-bar input,
.oh-search-bar select,
.oh-pill input,
.oh-pill select,
.oh-pill__control,
.oh-checkout input,
.oh-checkout select,
.oh-checkout textarea,
.oh-search-bar--pill input,
.oh-search-bar--pill select {
    font-size: 16px !important;
}

/* 100vw causes horizontal scroll on any device with a vertical scrollbar
 * because 100vw includes the scrollbar width. Use 100% on a box-sized
 * container instead. */
.oh-search-bar--pill {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Tap target minimums. WCAG 2.5.5 / Apple HIG call for 44x44px. We set this as
 * min dimensions so buttons can still be larger when the design calls for it. */
.oh-btn,
.oh-pill__btn,
.oh-terms-preset,
.oh-tonight__btn,
button[type="submit"].oh-pill__btn {
    min-height: var(--oh-tap-min);
    min-width: var(--oh-tap-min);
    padding-left: 16px;
    padding-right: 16px;
}

/* Small numeric inputs (guest counts, room quantities) were 70px wide, which
 * on mobile is below the tap-target minimum. Let them grow. */
.oh-pill__adults,
input.oh-gb-qty,
input[type="number"].oh-small {
    min-width: 72px;
    min-height: var(--oh-tap-min);
    font-size: 16px;
}

/* ---------- Type / readability -------------------------------------------- */

.oh-room-card__desc,
.oh-notice p,
.oh-cart,
.oh-checkout {
    line-height: var(--oh-line-body);
}

/* Generous, viewport-aware gaps. Replaces fixed 10-16px gaps that feel tight on phones. */
.oh-pill,
.oh-pill__dates,
.oh-pill__guests {
    gap: clamp(8px, 2vw, 16px);
}

/* ---------- Sticky mobile CTA on checkout --------------------------------- */
/* When the on-screen keyboard opens, submit buttons often disappear below the
 * fold. Pin the checkout primary action to the bottom on small viewports. */
@media (max-width: 720px) {
    .oh-checkout .oh-btn[type="submit"],
    .oh-checkout .oh-pill__btn[type="submit"] {
        position: sticky;
        bottom: 0;
        width: 100%;
        z-index: 5;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    }
    /* Ensure the form has enough bottom padding so the sticky button doesn't
     * cover the last field when scrolled to the bottom. */
    .oh-checkout form {
        padding-bottom: 72px;
    }
}

/* ---------- Skeleton loader (for async availability — see CHANGELOG) ------ */
.oh-skeleton {
    display: inline-block;
    background: linear-gradient(90deg,
        var(--oh-surface-2) 0%,
        var(--oh-border) 50%,
        var(--oh-surface-2) 100%);
    background-size: 200% 100%;
    animation: oh-shimmer 1.2s linear infinite;
    border-radius: var(--oh-radius-sm);
    color: transparent !important;
    min-width: 60px;
    min-height: 1em;
}
@keyframes oh-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .oh-skeleton { animation: none; }
}

/* ---------- Focus visibility (a11y, often missing in existing styles) ----- */
.oh-btn:focus-visible,
.oh-pill__btn:focus-visible,
.oh-search-bar input:focus-visible,
.oh-pill input:focus-visible,
.oh-checkout input:focus-visible,
.oh-checkout select:focus-visible,
.oh-checkout textarea:focus-visible {
    outline: 2px solid var(--oh-accent);
    outline-offset: 2px;
}


/* ----------------------------------------------------------------------------
 * Restored in 5.7.0: the selectors below apply to `.oh-group-booking` forms
 * in general, including the search results form at Shortcodes::search_results
 * which reuses this class name. An earlier commit removed them as "dead CSS"
 * based on the now-removed group-booking shortcode; that was wrong — the class
 * has additional callers. Group-booking-specific pieces (.oh-gb-offer-grid,
 * .oh-terms-presets) are NOT restored — those genuinely have zero callers.
 * ------------------------------------------------------------------------- */
.oh-group-booking .oh-pill__control,
.oh-group-booking input[type="text"],
.oh-group-booking input[type="email"],
.oh-group-booking input[type="number"],
.oh-group-booking input[type="date"],
.oh-group-booking select,
.oh-group-booking textarea {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    padding: 10px 12px;
    font: inherit;
    background: #fff;
}

.oh-group-booking .oh-pill__btn {
    border-radius: 999px;
    padding: 12px 18px;
}

@media (min-width: 992px) {
    .oh-group-booking {
        max-width: 60%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ============================================================================
 * Ourhotels 5.7.1 — Available Rooms tightening
 * ----------------------------------------------------------------------------
 * Requested: wider columns, 50% less whitespace on the results page.
 * Delete this block to revert to 5.7.0 spacing.
 * ========================================================================= */

/* Wider container — +20% horizontal room for each card. */
.oh-results,
.oh-results-list {
    max-width: 1440px;
}

/* Halve the card padding (16 → 8) and the gap between card columns (16 → 8). */
.oh-room-card {
    padding: 8px;
    gap: 8px;
}

/* Halve the vertical space between cards (12 → 6) and the outer list margin. */
.oh-results-list {
    gap: 6px;
    margin: 6px 0 9px;
}

/* Halve the heading margin (14 → 7) and the container's vertical breathing room. */
.oh-results {
    margin: 10px auto;
}
.oh-results h2 {
    margin: 0 0 7px;
}

/* Halve the aside inner gap (10 → 5) — the price/add-button column. */
.oh-room-card__aside {
    gap: 5px;
}

/* Halve the title's bottom margin (8 → 4) and reduce label spacing. */
.oh-room-card__title {
    margin: 1px 0 4px;
}

/* Tighter "continue to checkout" row. */
.oh-results-continue {
    margin: 9px 0 0;
}

/* Preserve the mobile stack behavior from the original @media (max-width: 900px)
 * rule — but slightly relax the tightening on small screens where cramped
 * cards become hard to tap. */
@media (max-width: 720px) {
    .oh-room-card {
        padding: 10px;
        gap: 10px;
    }
    .oh-results-list {
        gap: 8px;
    }
}

/* ============================================================================
 * v8.75.94 — Hero booking widget overlap + centering (moved from theme to plugin)
 *
 * front-page.php (in the ourhotels theme) renders <div class="hero-booking
 * hero-booking--desktop">…</div> AFTER the [oh_hero] shortcode closes — it's
 * a sibling of <section class="hero">, not a child. The theme's existing CSS
 * rules use descendant selectors (.hero .hero-booking--desktop) which don't
 * match siblings, so the widget falls into the regular flow underneath the
 * hero instead of overlapping it.
 *
 * Originally tried to fix this in the theme's style.css (v3.66.5) but
 * theme-side changes are slower to propagate — heavy browser caching and
 * page-cache plugins were sitting on the old style.css. Plugin frontend.css
 * gets a cache-busting ?ver= query string tied to the plugin version, so
 * bumping the plugin version forces a fresh fetch.
 *
 * !important on the breakout-neutralizing rules because the plugin's own
 * .oh-full-width-row rule earlier in this same file uses width:100vw +
 * negative margin to break out — we have to actively undo that when the
 * widget lives inside .hero-booking.
 * ========================================================================== */

.hero-booking {
    width: 100%;
    box-sizing: border-box;
}

.hero-booking--desktop {
    /* v8.75.95: pulled deeper into the hero (was -120px). Operator wanted
       the widget to read as "floating IN the hero image" rather than just
       overlapping its bottom edge. */
    margin-top: -240px;
    /* v8.75.97: counter-shift the next section back down so the negative
       margin only affects where the booking widget renders, not where
       [oh_why_us] (and everything after) flows. Without this, the negative
       margin pulled the whole subsequent layout up by 240px and caused
       Why Us to render visually inside / overlapping the hero.
       The 240 figure here matches the negative top so the net flow shift
       is zero. */
    margin-bottom: 240px;
    position: relative;
    z-index: 5;
    pointer-events: none; /* container is transparent; only inner card catches clicks */
}

.hero-booking--desktop > .container {
    pointer-events: auto;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Neutralize the .oh-full-width-row breakout when nested inside hero-booking
   so the widget stays centered within .container above instead of breaking
   out to 100vw. The breakout is correct on dedicated search pages (where the
   widget lives in the page main content area) but wrong here. */
.hero-booking .oh-full-width-row {
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

.hero-booking .oh-search-wrapper {
    width: 100%;
    justify-content: center;
}

/* v8.75.95: the white-card backdrop wrapping the booking pill was removed.
   The booking pill itself already has its own styling (shown rendered as
   the rounded white "Check availability" card). Wrapping it in a SECOND
   white card was creating a double-frame effect — operator asked for the
   outer wrapper gone so the booking pill floats directly on the hero.

   v8.75.96: also strip the .oh-wizard-card backdrop (white card, border,
   shadow, padding) inside .hero-booking — that was the wrapper still
   visible behind the booking pill in v8.75.95. The pill segments each
   have their own styling so they read fine on top of the hero image
   without an outer card. Also hides the "Check availability" heading
   (.oh-wizard-title) and the "Rooms tonight" tonight-button cluster
   since those add visual clutter on the hero overlay; users can still
   click any pill segment directly. */
.hero-booking .oh-wizard-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100%;
}
.hero-booking .oh-wizard-title,
.hero-booking .oh-tonight {
    display: none !important;
}

/* v8.75.96: lay Adults + Children side-by-side. Existing grid put them on
   different rows because .oh-pill__seg--children wasn't in the original
   grid-template-areas. Override to a 5-column single-row layout for the
   hero context (we have horizontal real estate to spare since the pill
   is centered at max-width 1100px).

   v8.75.97: rebalance to four logical fields of equal width — Location,
   Dates, Guests (adults+children combined), Check availability. Internally
   adults and children still live in separate DOM nodes, so we use a
   5-column grid where columns 3 and 4 are zero-gap and proportioned to
   add up to the same width as columns 1, 2, and 5. The visual divider
   between adults and children is the segment's own border styling that
   already exists. */
.hero-booking .oh-search-bar--pill .oh-pill {
    display: grid !important;
    grid-template-columns: 1fr 1fr 0.5fr 0.5fr 1fr !important;
    grid-template-areas: "location dates adults children submit" !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    /* Tighten the gap between adults and children specifically so they
       read as one combined cell. The grid still gets 8px gaps between
       all other columns. */
}
.hero-booking .oh-search-bar--pill .oh-pill__seg--location { grid-area: location !important; }
.hero-booking .oh-search-bar--pill .oh-pill__seg--dates    { grid-area: dates !important; }
.hero-booking .oh-search-bar--pill .oh-pill__seg--guests   { grid-area: adults !important; }
.hero-booking .oh-search-bar--pill .oh-pill__seg--children { grid-area: children !important; }
.hero-booking .oh-search-bar--pill .oh-pill__seg--submit   { grid-area: submit !important; }

/* v8.75.98: visually fuse Adults + Children into one column.
   Each .oh-pill__seg comes with its own white background, border, and
   border-radius (lines 267-275 above), so previously they rendered as
   two separate rounded cards sitting next to each other. To make them
   read as a single combined "Guests" cell:
     - Adults loses its right-side rounding + right border
     - Children loses its left-side rounding + left border
     - They butt up flush with negative margin closing the column gap
   The two halves still focus / hover independently which is fine —
   they're discrete inputs. The visual seam (a 1px subtle line between
   adults' right-content padding and children's left-content padding)
   reads as a divider within one card, not a gap between two cards. */
.hero-booking .oh-search-bar--pill .oh-pill__seg--guests {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
    margin-right: -1px !important; /* close the visible 8px column gap */
    padding-right: 8px !important;
}
.hero-booking .oh-search-bar--pill .oh-pill__seg--children {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid rgba(17,24,39,.08) !important; /* thin visual divider */
    margin-left: -8px !important; /* close the 8px column-gap entirely */
    padding-left: 8px !important;
}
/* When either half is hovered/focused, lift both halves to keep the
   "one card" illusion intact. Without this, the neighbour's border
   would pop visible at the seam. */
.hero-booking .oh-search-bar--pill .oh-pill__seg--guests:hover,
.hero-booking .oh-search-bar--pill .oh-pill__seg--guests:focus-within,
.hero-booking .oh-search-bar--pill .oh-pill__seg--children:hover,
.hero-booking .oh-search-bar--pill .oh-pill__seg--children:focus-within {
    z-index: 1;
}

/* Below 900px, collapse to 2 rows:
     location dates
     adults  children submit                                  */
@media (max-width: 900px) {
    .hero-booking .oh-search-bar--pill .oh-pill {
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-areas:
            "location location dates"
            "adults   children submit" !important;
    }
}

@media (max-width: 1024px) {
    .hero-booking--desktop {
        /* v8.75.95: scaled to match the new -240px baseline above
           (proportionally smaller overlap on tablets where the hero is
           shorter relative to viewport).
           v8.75.97: counter-shift bottom margin same as desktop. */
        margin-top: -160px;
        margin-bottom: 160px;
    }
}

@media (max-width: 768px) {
    /* Below 768px the desktop variant is hidden by theme rules; the mobile
       variant flows in regular position (no overlap needed). */
    .hero-booking--desktop {
        margin-top: 0;
        margin-bottom: 0;
    }
}