.detail-booking-panel {
  padding: 104px 0;
}

.detail-booking-panel > .page-wrap {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: 88px;
  align-items: center;
}

.detail-booking-panel h2 {
  margin: 0;
  font: 800 clamp(38px, 4vw, 58px)/1.02 Outfit, "DM Sans", sans-serif;
  letter-spacing: -2px;
}

.booking-panel-copy > p:not(.detail-kicker),
.custom-quote-content > p {
  margin: 20px 0 0;
  max-width: 570px;
  font-size: 16px;
  line-height: 1.7;
}

.detail-fixed-booking {
  color: #fff;
  background: radial-gradient(circle at 85% 12%, rgba(65, 192, 255, .28), transparent 30%), linear-gradient(125deg, #052c75, #075dcc);
}

.detail-fixed-booking .detail-kicker { color: #9fdcff; }
.detail-fixed-booking .booking-panel-copy > p:not(.detail-kicker) { color: #d7eaff; }

.fixed-price {
  display: grid;
  gap: 5px;
  margin-top: 30px;
}

.fixed-price small,
.offline-contact small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.fixed-price strong { font: 800 30px/1 Outfit, "DM Sans", sans-serif; }

.departure-choice-card {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  color: #172a4c;
  background: #fff;
  box-shadow: 0 24px 55px rgba(0, 24, 73, .32);
}

.departure-choice-card h3 {
  margin: 0 0 18px;
  font: 800 23px/1.2 Outfit, "DM Sans", sans-serif;
}

.departure-choice-list { display: grid; gap: 8px; }

.departure-choice-list > div {
  display: grid;
  grid-template-columns: minmax(90px, .55fr) minmax(220px, 1.45fr);
  gap: 18px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid #dce8f6;
  border-radius: 10px;
  background: #f7fbff;
}

.departure-choice-list span { color: #65748b; font-size: 12px; }
.departure-choice-list strong { font-size: 13px; text-align: right; }
.departure-empty { color: #66748a; line-height: 1.6; }

.detail-booking-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
  padding: 15px 18px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: #0756d8;
  font: 800 14px/1 "DM Sans", Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.detail-booking-action span { font-size: 20px; }

.detail-custom-booking {
  color: #10264d;
  background: linear-gradient(120deg, #eef6ff, #fff 62%);
}

.detail-custom-booking > .page-wrap { grid-template-columns: minmax(390px, .95fr) minmax(0, 1.05fr); }

.custom-quote-status {
  position: relative;
  overflow: hidden;
  min-height: 410px;
  padding: 40px;
  border-radius: 24px;
  color: #fff;
  background: radial-gradient(circle at 86% 8%, rgba(255, 194, 55, .34), transparent 30%), linear-gradient(145deg, #073681, #075fcd);
  box-shadow: 0 24px 52px rgba(7, 61, 139, .22);
}

.custom-quote-status::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 240px;
  height: 240px;
  border: 38px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
}

.custom-quote-status .detail-kicker { color: #a8dcff; }

.custom-quote-status > strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 55px;
  font: 800 clamp(36px, 4.1vw, 61px)/.94 Outfit, "DM Sans", sans-serif;
  letter-spacing: -2px;
}

.custom-quote-status > span {
  position: absolute;
  z-index: 1;
  left: 40px;
  bottom: 38px;
  color: #d9ebff;
  font-size: 13px;
}

.custom-quote-content h2 { max-width: 620px; }
.custom-quote-content > p { color: #5d6d85; }
.custom-quote-content .detail-booking-action { max-width: 360px; }

.offline-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}

.offline-contact > div {
  display: grid;
  gap: 7px;
  padding: 17px;
  border: 1px solid #d9e6f5;
  border-radius: 10px;
  background: #fff;
}

.offline-contact small { color: #72819a; }
.offline-contact a { overflow-wrap: anywhere; color: #0756d8; font-size: 13px; font-weight: 800; text-decoration: none; }

.detail-practical {
  padding: 88px 0;
  background: linear-gradient(180deg, #f7faff, #fff);
}

.detail-practical-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  gap: 8px 56px;
  align-items: end;
  margin-bottom: 30px;
}

.detail-practical-heading .detail-kicker { grid-column: 1 / -1; }
.detail-practical-heading h2 { margin: 0; max-width: 760px; color: #10264d; font: 800 clamp(34px, 3.8vw, 52px)/1.04 Outfit, "DM Sans", sans-serif; letter-spacing: -1.6px; }
.detail-practical-heading > p:last-child { margin: 0 0 4px; color: #607089; font-size: 15px; line-height: 1.7; }
.detail-practical-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.detail-practical-grid article { padding: 28px; border: 1px solid #dce7f4; border-radius: 18px; background: #fff; box-shadow: 0 16px 38px rgba(15, 58, 119, .07); }
.detail-practical-grid article > span { display: block; margin-bottom: 8px; color: #0756d8; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.detail-practical-grid h3 { margin: 0; color: #122d58; font: 800 22px/1.2 Outfit, "DM Sans", sans-serif; }
.detail-practical-grid ul { display: grid; gap: 11px; margin: 20px 0 0; padding: 0; list-style: none; }
.detail-practical-grid li { position: relative; padding-left: 25px; color: #53647d; font-size: 15px; line-height: 1.55; }
.detail-practical-grid li::before { position: absolute; left: 0; top: 0; color: #16a66a; font-weight: 900; content: "✓"; }
.detail-practical-grid .is-excluded li::before { color: #d66d54; content: "—"; }
.detail-practical-grid .practical-note { background: #f8fbff; }
.detail-practical-grid .practical-note p { margin: 18px 0 0; color: #53647d; font-size: 15px; line-height: 1.7; }

@media (max-width: 900px) {
  .detail-booking-panel > .page-wrap,
  .detail-custom-booking > .page-wrap { grid-template-columns: 1fr; gap: 46px; }
  .detail-practical-heading { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 620px) {
  .detail-booking-panel { padding: 64px 0; }
  .custom-quote-status { min-height: 340px; padding: 28px; }
  .custom-quote-status > strong { margin-top: 40px; font-size: 42px; }
  .custom-quote-status > span { left: 28px; bottom: 28px; max-width: 250px; }
  .departure-choice-card { padding: 20px; }
  .departure-choice-list > div { grid-template-columns: 1fr; gap: 5px; }
  .departure-choice-list strong { text-align: left; }
  .offline-contact { grid-template-columns: 1fr; }
  .detail-practical { padding: 62px 0; }
  .detail-practical-heading { margin-bottom: 22px; }
  .detail-practical-heading h2 { font-size: 32px; letter-spacing: -.8px; }
  .detail-practical-grid { grid-template-columns: 1fr; }
  .detail-practical-grid article { padding: 23px 20px; border-radius: 15px; }
  .detail-practical-grid h3 { font-size: 20px; }
}