/* Beldibi v3.8.2 — reservation clarity and programme booking fixes */

/* Make the WhatsApp contact in the reservation section crisp and clearly visible. */
.booking-whatsapp{
  padding:10px 14px 10px 10px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.12)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.booking-whatsapp img{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px;
  border-radius:12px!important;
  background:#25d366!important;
  object-fit:cover!important;
  opacity:1!important;
  filter:saturate(1.12) contrast(1.08)!important;
  box-shadow:0 7px 18px rgba(37,211,102,.32);
}
.booking-whatsapp small{color:rgba(255,255,255,.72)!important;font-size:9px!important}
.booking-whatsapp strong{color:#fff!important;font-size:11px!important}

/* Programme phone area: fixed, predictable layout on every desktop width. */
.detail-contact-row{grid-template-columns:1fr!important}
.detail-contact-row .phone-field{width:100%;min-width:0}
.detail-contact-row .phone-input-group{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
.detail-contact-row .phone-input-group select,
.detail-contact-row .phone-input-group input{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Hourly programme slots from 09:00 to 18:00. */
.detail-date-time-row{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.detail-time-field{min-width:0}
.detail-time-options{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important}
.detail-time-option{
  min-height:37px!important;
  padding:7px 3px!important;
  border-radius:10px!important;
  font-size:10px!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.detail-time-option:hover{transform:translateY(-1px);border-color:var(--teal-500);box-shadow:0 7px 16px rgba(7,63,67,.08)}
.detail-time-option.active{box-shadow:0 8px 18px rgba(8,122,128,.2)}
.hotel-arrival-note{
  margin:-2px 0 15px;
  padding:11px 12px;
  display:flex;
  align-items:flex-start;
  gap:9px;
  border:1px solid rgba(195,142,54,.22);
  border-radius:12px;
  background:#fff8e9;
  color:#5b4a2e;
  font-size:9.5px;
  line-height:1.55;
}
.hotel-arrival-note>span{width:25px;height:25px;display:grid;place-items:center;flex:0 0 25px;border-radius:50%;background:#fff;color:var(--gold-700);font-size:13px}
.hotel-arrival-note strong{font-weight:700}

/* Clear success confirmation shown before returning to the home page. */
body.booking-success-open{overflow:hidden}
.booking-success-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  padding:20px;
  display:grid;
  place-items:center;
  background:rgba(2,34,37,.76);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:bookingFadeIn .22s ease both;
}
.booking-success-card{
  width:min(480px,100%);
  padding:34px 30px 28px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:26px;
  background:#fffdfa;
  color:var(--ink);
  text-align:center;
  box-shadow:0 35px 95px rgba(0,0,0,.28);
  animation:bookingCardIn .28s ease both;
}
.booking-success-icon{
  width:68px;
  height:68px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#0c8d92,#07545a);
  color:#fff;
  font-size:30px;
  font-weight:900;
  box-shadow:0 14px 30px rgba(8,122,128,.25);
}
.booking-success-card h2{margin:0;color:var(--ink);font-family:var(--serif);font-size:36px;font-weight:600;line-height:1.03}
.booking-success-card>p{margin:13px auto 0;max-width:380px;color:var(--muted);font-size:12px;line-height:1.7}
.booking-success-reference{margin:20px 0 13px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#f4f8f7;color:var(--ink);font-size:11px}
.booking-success-reference strong{display:block;margin-top:4px;color:var(--gold-700);font-family:var(--serif);font-size:22px;letter-spacing:.02em}
.booking-success-countdown{display:block;margin-bottom:17px;color:#718486;font-size:9.5px}
.booking-success-card button{min-width:190px;min-height:46px;border:0;border-radius:13px;background:var(--teal-950);color:#fff;font-size:11px;font-weight:800;cursor:pointer}
.booking-success-card button:hover{background:var(--gold-500);color:var(--teal-950)}
@keyframes bookingFadeIn{from{opacity:0}to{opacity:1}}
@keyframes bookingCardIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

@media(max-width:720px){
  .detail-date-time-row{grid-template-columns:1fr!important}
  .detail-time-options{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(max-width:470px){
  .booking-whatsapp{width:100%;justify-content:flex-start}
  .detail-time-options{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .booking-success-card{padding:29px 20px 23px;border-radius:21px}
  .booking-success-card h2{font-size:31px}
}