/* Presentation only: no booking, approval or payment behaviour is changed. */
.my-booking-hero:has(.booking-reference) {
  background:radial-gradient(ellipse at 92% 10%,rgba(40,161,155,.21),transparent 56%),linear-gradient(115deg,#081d3d,#113956);
  color:#fff;
  border-bottom:1px solid #d7e4ee;
}
.my-booking-hero:has(.booking-reference) .my-booking-hero__inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
  min-height:0;
  padding-top:44px;
  padding-bottom:46px;
}
.my-booking-hero:has(.booking-reference) .my-booking-hero__inner > div:first-child { min-width:0; }
.my-booking-hero:has(.booking-reference) .eyebrow { display:none; }
.my-booking-hero:has(.booking-reference) h1 {
  max-width:740px;
  margin:0 0 14px;
  color:#fff;
  font:800 clamp(28px,3.2vw,42px)/1.16 Manrope,sans-serif;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.my-booking-hero:has(.booking-reference) p { max-width:640px; margin:0; color:#d2e1ee; font-size:15px; line-height:1.7; }
.my-booking-hero .booking-reference {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:20px;
  row-gap:3px;
  align-items:center;
  min-width:0;
  width:max-content;
  max-width:100%;
  box-sizing:border-box;
  padding:16px 24px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  background:#f8fbff;
  box-shadow:0 8px 28px rgba(0,12,30,.16);
  text-align:left;
}
.my-booking-hero .booking-reference > span { grid-column:1; grid-row:1; color:#60758d; font:700 9px/1.5 "DM Sans",sans-serif; text-transform:uppercase; letter-spacing:.1em; }
.my-booking-hero .booking-reference > strong { grid-column:1; grid-row:2; margin:0; color:#102f51; font:800 20px/1.3 Manrope,sans-serif; letter-spacing:.09em; overflow-wrap:anywhere; }
.my-booking-hero .booking-reference > small { grid-column:2; grid-row:1/3; max-width:130px; padding:6px 0 6px 18px; border-left:1px solid #d5e1eb; color:#395873; font:700 10px/1.5 "DM Sans",sans-serif; text-transform:uppercase; letter-spacing:.055em; overflow-wrap:anywhere; }
.my-booking-hero:has(.booking-reference) + .my-booking-section { padding-top:40px; }
@media(max-width:900px) {
  .my-booking-hero:has(.booking-reference) .my-booking-hero__inner { grid-template-columns:minmax(0,1fr); gap:24px; padding-top:30px; padding-bottom:34px; }
  .my-booking-hero .booking-reference { grid-row:1; justify-self:start; }
  .my-booking-hero:has(.booking-reference) h1 { max-width:650px; font-size:34px; }
}
@media(max-width:600px) {
  .my-booking-hero:has(.booking-reference) .my-booking-hero__inner { width:calc(100% - 36px); gap:23px; padding-top:26px; padding-bottom:30px; }
  .my-booking-hero:has(.booking-reference) h1 { font-size:29px; line-height:1.2; margin-bottom:12px; }
  .my-booking-hero:has(.booking-reference) p { font-size:14px; line-height:1.65; }
  .my-booking-hero .booking-reference { padding:12px 19px; column-gap:16px; }
  .my-booking-hero .booking-reference > strong { font-size:18px; }
  .my-booking-hero .booking-reference > small { max-width:104px; padding-left:14px; font-size:9px; }
  .my-booking-hero:has(.booking-reference) + .my-booking-section { padding-top:24px; }
}
@media print {
  .my-booking-hero:has(.booking-reference) { background:#fff; color:#102f51; }
  .my-booking-hero:has(.booking-reference) h1,.my-booking-hero:has(.booking-reference) p { color:#102f51; }
  .my-booking-hero .booking-reference { box-shadow:none; border-color:#c7d6e3; }
}