/* DS-896 — Payment Page Redesign. Loaded last, layers over the legacy CSS. */

/* Fonts */
@font-face{font-family:"Apris";src:url("https://cdn.destify.dev/0601625f-5d0d-4fc2-b11b-facafeb0c1dc.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Graphik";src:url("https://cdn.destify.dev/2d593ee7-f425-417c-9853-22241774ebac.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Styrene II";src:url("https://cdn.destify.dev/5bf52b5b-4bed-4515-aa72-90ba75d4e838.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* Tokens */
:root{
  --ds-lagoon:#096B81E6; --ds-lagoon-dark:#064c5c;
  --ds-deep-sea:#08182D; --ds-contrast:#FFFEF2; --ds-coral:#FF7158;
  --ds-font-display:"Apris",Georgia,serif;
  --ds-font-body:"Graphik","Open Sans",Arial,sans-serif;
  --ds-font-label:"Styrene II","Open Sans",Arial,sans-serif;
  --ds-header-h:71px;
}

/* Page shell */
html,body{ margin:0; }
body.travelzap_theme{ background:#fff !important; color:var(--ds-deep-sea); font-family:var(--ds-font-body); }
.content_wrapper{ background:#fff; }
.top_block h1, h1,h2,h3,h4{ font-family:var(--ds-font-display); color:var(--ds-deep-sea); text-transform:none; letter-spacing:normal; }
.top_block h1{ font-weight:500; font-size:44px; line-height:44px; margin:0; }
.top_block .reservation_number{ font-family:var(--ds-font-body); font-size:15px; line-height:1.4; color:#4A5661; margin:12px 0 0; }
.top_block .reservation_number strong, .top_block .reservation_number b{ color:#08182d; font-weight:700; }

/* Header (teal) */
header.main_header{ background:var(--ds-lagoon) !important; box-shadow:none; backdrop-filter: blur(8px);}
header.main_header .logo img{ filter:brightness(0) invert(1); }
header.main_header .main_nav_list a{ color:var(--ds-contrast); font-family:var(--ds-font-label); font-weight:400 !important; }
header.main_header .main_nav_list a:hover{ opacity:.70; color:var(--ds-contrast); }
header.main_header .menu_bt{ filter:brightness(0) invert(1); }

/* Footer (teal) */
footer.main_footer{ background:#096B81; color:#FFFEF0; text-align:center; padding:64px 48px; background-image: url('https://booking.destify.dev/images/Lagoon-texture.jpg'); background-size: 512px 512px;}
footer.main_footer a{ color:#FFFEF0; text-decoration:none; }
footer.main_footer a:hover{ text-decoration:underline; }
.ds-footer2__inner{ max-width:1536px; margin:0 auto; display:flex; flex-direction:column; gap:48px; }
.ds-footer2__group{ border-bottom:1px solid #085F72; padding-bottom:49px; display:flex; flex-direction:column; gap:48px; width:100%; }
.ds-footer2__section{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.ds-footer2__heading{ font-family:var(--ds-font-label); font-weight:500; text-transform:uppercase; letter-spacing:.48px; font-size:16px; color:#FFFEF0; margin:0; }
.ds-footer2__links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
.ds-footer2__links a{ font-family:var(--ds-font-body); font-size:14px; line-height:20px; }
.ds-footer2__pricematch p{ font-family:var(--ds-font-body); font-size:16px; line-height:24px; max-width:640px; margin:0; }
.ds-footer2__learnmore{ font-family:var(--ds-font-body); font-size:14px; line-height:20px; color:#71BDF4 !important; }
.ds-footer2__wordmark{ width:auto; height:64px; }
.ds-footer2__address p{ font-family:var(--ds-font-body); font-size:16px; line-height:24px; margin:0; }
.ds-footer2__callus{ display:flex; align-items:center; gap:8px; }
.ds-footer2__callus svg{ width:24px; height:24px; flex:0 0 auto; }
.ds-footer2__callus a{ font-family:var(--ds-font-body); font-size:16px; line-height:24px; }
.ds-footer2__bottom{ font-family:var(--ds-font-body); font-size:14px; line-height:20px; color:#FFFEF0; margin:0; }
@media (min-width:901px){
  footer.main_footer{ text-align:left; }
  .ds-footer2__group{ flex-direction:row; align-items:flex-start; justify-content:space-between; gap:64px; }
  .ds-footer2__section{ align-items:flex-start; text-align:left; }
  .ds-footer2__brand{ flex:1 1 0; }
  .ds-footer2__pricematch{ flex:0 1 400px; }
  .ds-footer2__pricematch p{ max-width:none; }
}

/* Step cards + inputs */
.content_wrapper .container, .main_header .container{ width:100%; max-width:1400px; padding-left:16px; padding-right:16px; }
.top_block{ text-align:left; margin:32px 0 24px; }
.wrapp_block, .wrapp_card_form{
  background:rgba(255,254,242,0.5); border:none; border-radius:20px;
  box-shadow:0 8px 24px rgba(8,24,45,0.08); padding:28px; margin:0 0 20px;
  max-width:none; width:100%;
}
.control-label{
  font-family:var(--ds-font-display) !important; font-size:22px !important; font-weight:500 !important;
  text-transform:none !important; text-align:left !important; color:var(--ds-deep-sea) !important;
  display:flex !important; flex-wrap:nowrap !important; align-items:center !important; width:100%;
  margin:0 0 18px !important;
}
.form-control{
  width:100% !important; border:1px solid #08182d !important; border-radius:8px !important;
  padding:10px 12px !important; min-height:47px; box-sizing:border-box;
  font-family:var(--ds-font-body); font-size:15px;
  color:var(--ds-deep-sea); background:#fff !important; height:auto; box-shadow:none !important;
  background-image:none !important;
}
.form-control:focus{ border:2px solid #096b81 !important; outline:none; box-shadow:0 0 0 3px rgba(9,107,129,.12) !important; }
.form-control::placeholder{ color:#757575; }
input.InputElement::placeholder, input.form-control::placeholder{ font-size: 16px; }

/* Stripe element boxes styled as inputs (block + vertical padding so the mounted iframe
   stays full-width and interactive — flex collapses it) */
#card-element-number, #card-element-expiry, #card-element-cvc{
  border:1px solid #08182d !important; border-radius:8px !important;
  padding:13px 12px !important; background:#fff !important; min-height:47px;
  margin:0 !important; height:auto !important;
  box-sizing:border-box; color:#757575; font-size:15px;
}
#card-element-expiry, #card-element-cvc{ width:100% !important; }
#card-element-number.StripeElement--focus, #card-element-expiry.StripeElement--focus, #card-element-cvc.StripeElement--focus{
  border:2px solid #096b81 !important; box-shadow:0 0 0 3px rgba(9,107,129,.12) !important;
}

.ds-divider{ border:none; border-top:1px solid rgba(8,24,45,0.1); margin:2px 0 18px; }

/* Card brand logos (right side of the step title) */
.control-label .ds-card-brands{
  display:flex !important; flex:0 0 auto !important; width:auto !important; max-width:none !important;
  gap:6px; align-items:center; list-style:none; padding:0; margin:0 0 0 auto !important;
}
.control-label .ds-card-brands li{ display:flex; width:auto !important; }
.control-label .ds-card-brands li svg{ height:20px; width:32px; display:block; }

/* Field rows: 2-up on desktop */
.wrap_card .row, .wrapp_block .row{ display:flex; flex-wrap:wrap; gap:16px; margin:0 0 16px; }
.wrap_card .row > .col-md-6, .wrapp_block .row > .col-md-6{ flex:1 1 calc(50% - 8px); max-width:calc(50% - 8px); padding:0; }
.wrap_card .row .row, .wrapp_block .row .row{ margin:0; width:100%; }

/* Buttons → teal pill */
.btn, button[type=submit], .jsSubmitBtn{
  background:var(--ds-lagoon); color:var(--ds-contrast); border:none; border-radius:999px;
  padding:14px 28px; font-family:var(--ds-font-label); font-size:15px; cursor:pointer;
}
.btn:hover, button[type=submit]:hover, .jsSubmitBtn:hover{ background:var(--ds-lagoon-dark); }

/* Neutralize the legacy inner .wrap_card + any .wrapp_block nested inside a step card (no card-in-card) */
.wrap_card{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.ds-card-amount .wrapp_block, .wrapp_card_form .wrapp_block, .ds-card-auth .wrapp_block{
  background:transparent !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:0 0 12px;
}

/* Desktop 2-col layout + summary card */
@media (min-width:901px){
  .content_wrapper .container{ display:grid; grid-template-columns:minmax(0,1fr) 380px; column-gap:32px; row-gap:0; align-items:start; }
  .content_wrapper .container > .top_block{ grid-column:1 / -1; margin:24px 0 28px; }
  .ds-form-col, .content_wrapper .container > form{ min-width:0; }
  .ds-summary--desktop{ margin-bottom:50px; }
}
.ds-summary{ position:sticky; top:calc(var(--ds-header-h) + 24px); background:#fff; border:none; border-radius:20px; box-shadow:0 8px 24px rgba(8,24,45,0.1); overflow:hidden; }
.ds-summary__img{ width:100%; height:150px; object-fit:cover; display:block; background:linear-gradient(135deg, #FFA058 0%, #FF7158 48%, #096B81 100%); }
.ds-summary__body{ padding:22px; background:rgba(255,254,242,0.5); }
.ds-summary__head{ display:flex; justify-content:space-between; align-items:center; }
.ds-summary__place{ font-family:var(--ds-font-label); text-transform:uppercase; letter-spacing:2px; font-size:10px; color:var(--ds-lagoon); margin:0; }
.ds-summary__toggle{
  display:flex; align-items:center; gap:4px; background:none; border:none; padding:1px 6px; cursor:pointer;
  font-family:var(--ds-font-label); text-transform:uppercase; letter-spacing:1.08px; font-size:12px; color:#4A5661;
  width:100%; justify-content:flex-end;
}
.ds-summary__toggle svg{ width:12px; height:12px; }
.ds-summary__hotel{ font-family:var(--ds-font-display); font-size:22px; line-height:23.1px; margin:4px 0 0; }
.ds-summary__room{ font-size:13px; color:#4A5661; margin:0; }
.ds-summary__divider{ border:none; border-top:1px solid rgba(8,24,45,0.1); margin:0; }
.ds-summary__rows{ display:flex; flex-direction:column; gap:10px; padding-top:17px; }
.ds-summary__row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.ds-summary__row span:first-child{ color:#4A5661; }
.ds-summary__row span:last-child{ text-align:right; color:var(--ds-deep-sea); }
.ds-summary__due{ display:flex; justify-content:space-between; align-items:center; background:#fff; border-radius:12px; margin-top:17px; padding:0 16px; height:62px; box-sizing:border-box; }
.ds-summary__due-label{ font-family:var(--ds-font-label); text-transform:uppercase; letter-spacing:1.54px; font-size:11px; color:#4A5661; }
.ds-summary__due-amt{ font-family:var(--ds-font-display); font-size:30px; color:var(--ds-deep-sea); }
.ds-summary__due-amt sup{ font-size:18px; top:0; }
.ds-summary__pay.ds-summary__pay{
  display:flex !important; align-items:center; justify-content:center; width:100%; box-sizing:border-box;
  background:#096B81 !important; background-color:#096B81 !important; background-image:none !important;
  color:#FFFEF2 !important; -webkit-text-fill-color:#FFFEF2;
  border:none !important; outline:none !important; box-shadow:none !important; filter:none !important;
  border-radius:999px !important; padding:16px !important;
  font-family:var(--ds-font-label) !important; font-weight:500 !important; font-size:13px !important;
  text-transform:uppercase !important; letter-spacing:1.04px !important; line-height:normal !important;
  margin-top:16px; cursor:pointer; text-decoration:none !important; appearance:none !important;
}
.ds-summary__pay:hover, .ds-summary__pay:focus, .ds-summary__pay:active{
  background:var(--ds-lagoon-dark) !important; background-color:var(--ds-lagoon-dark) !important;
  color:#FFFEF2 !important; box-shadow:none !important;
}
.ds-summary__secure{ text-align:center; font-size:12px; color:#4A5661; margin-top:12px; }

/* Mobile summary: sticky sidebar hides <900px, inline collapsible block takes over */
.ds-summary-mobile{ display:none; }
@media (max-width:900px){
  .ds-summary-mobile{ display:block; margin:0 0 20px; }
  .ds-summary--desktop{ display:none; }
}
.ds-summary-mobile .ds-summary{ position:static; width:auto; }
.ds-summary-mobile__collapsed.ds-summary-mobile__collapsed{
  display:flex !important; gap:14px; align-items:center; width:100% !important; box-sizing:border-box;
  background:rgba(255,254,242,0.5) !important; background-image:none !important;
  padding:14px !important; margin:0 !important; min-height:0 !important; height:auto !important;
  border:none !important; outline:none !important; box-shadow:0 8px 24px rgba(8,24,45,0.08) !important;
  border-radius:16px !important; appearance:none !important; -webkit-appearance:none !important;
  font:inherit; line-height:normal !important; cursor:pointer; text-align:left;
}
.ds-summary-mobile.is-open .ds-summary-mobile__collapsed.ds-summary-mobile__collapsed{ display:none !important; }
.ds-summary-mobile__thumb{ width:52px; height:52px; border-radius:12px; flex:0 0 auto; object-fit:cover; background:linear-gradient(135deg, #FFA058 0%, #FF7158 48%, #096B81 100%); }
.ds-summary-mobile__info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ds-summary-mobile__hotel{ font-family:var(--ds-font-display); font-weight:500; font-size:15px; line-height:16.5px; color:var(--ds-deep-sea); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-summary-mobile__sub{ font-family:var(--ds-font-body); font-size:12px; color:#4A5661; margin:0; }
.ds-summary-mobile__chevron{ flex:0 0 auto; width:16px; height:16px; }
.ds-summary-mobile__expanded{ display:none; }
.ds-summary-mobile.is-open .ds-summary-mobile__expanded{ display:block; }
.ds-summary-mobile .ds-summary__pay{ display:none !important; }

/* Mobile header: text links, no hamburger; defeat legacy full-width dropdown nav */
@media (max-width:900px){
  body{ padding-top:53px !important; }
  header.main_header .inner_wrapp{ flex-wrap:nowrap !important; padding-top:16px !important; padding-bottom:17px !important; }
  header.main_header .logo{ height:auto; }
  header.main_header .logo img{ width:105px !important; height:auto !important; }
  header.main_header .wrap_menu_bt{ display:none !important; }
  header.main_header .main_nav{ display:flex !important; width:auto !important; }
  header.main_header .main_nav_list{ display:flex !important; align-items:center; gap:8px; width:auto !important; border-top:none !important; margin:0 !important; padding:0 !important; }
  header.main_header .main_nav_list > li{ padding:0 !important; text-align:left; }
  header.main_header .main_nav_list a{ font-size:16px !important; padding:8px 10px !important; display:inline-flex; align-items:center; min-height:44px; }
  header.main_header .ds-nav-full{ display:none !important; }
}

/* Mobile layout: 20px sides, tighter gaps, 18px card padding, 30px title, "N · Title" headings */
@media (max-width:900px){
  .content_wrapper.wrapper_step_2 > .container{ padding-left:20px !important; padding-right:20px !important; }
  .top_block{ margin:20px 0 14px !important; }
  .top_block h1{ font-size:30px !important; line-height:30px !important; }
  .top_block .reservation_number{ font-size:14px; margin-top:4px; }
  .wrapp_block, .wrapp_card_form, .ds-alert, .ds-summary-mobile{ margin-bottom:14px !important; }
  .wrapp_block, .wrapp_card_form{ padding:18px !important; }
  .ds-form-col > *:last-child{ margin-bottom:0 !important; }
  .wrap_card > .row > .col-md-6, .wrapp_block > .row > .col-md-6{ flex-basis:100%; max-width:100%; }
  .wrap_card .row, .wrapp_block .row{ gap:12px; margin:0 0 12px; }
  .wrap_card .form-group, .wrapp_block .form-group{ margin-bottom:12px !important; }
  .ds-form-col{ counter-reset:ds-step; }
  .ds-form-col > .wrapp_block, .ds-form-col > .wrapp_card_form{ counter-increment:ds-step; }
  .control-label{ font-size:18px !important; margin:0 0 14px !important; }
  .control-label .ds-step-badge{ display:none !important; }
  .control-label::before{ content:counter(ds-step) " \00b7 "; }
  .ds-desktop-text{ display:none !important; }
  .ds-mobile-text{ display:inline !important; }
}
.ds-mobile-text{ display:none; }

/* Numbered step badge (desktop) */
.ds-step-badge{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--ds-lagoon); color:var(--ds-contrast); font-family:var(--ds-font-label); font-size:13px; margin-right:12px; flex:0 0 auto; }

/* Field labels above inputs (injected by JS from each input's placeholder) */
.ds-field-label{ display:block; font-family:var(--ds-font-label); font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:#4A5661; margin:0 0 7px; }
.ds-labeled .form-control::placeholder{ color:#b3bec4; }

/* Past-due alert banner — shown only in the past-due state ($showFullPaymentAlert) */
.ds-alert{ display:none; }
[data-payment-state="past-due"] .ds-alert{
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(255,113,88,0.12); border:1px solid rgba(255,113,88,0.55); border-radius:12px;
  padding:16px 18px; margin:0 0 20px;
}
.ds-alert__icon{ flex:0 0 auto; width:22px; height:22px; margin-top:1px; }
.ds-alert__icon svg{ width:100%; height:100%; display:block; }
.ds-alert__title{ font-family:var(--ds-font-label); text-transform:uppercase; letter-spacing:.13em; font-size:11px; color:#C8452F; margin:0 0 4px; }
.ds-alert__body{ font-size:14px; line-height:1.5; color:var(--ds-deep-sea); margin:0; }

/* Amount selector (①) */
.ds-amount{ display:flex; flex-direction:column; gap:10px; margin:0 0 18px; }
.ds-amount-opt{ display:flex; align-items:center; gap:12px; border:1px solid rgba(8,24,45,0.16); border-radius:12px; padding:17px; cursor:pointer; background:#fff; }
.ds-amount-opt.is-selected, .ds-amount-opt:has(input[type=radio]:checked){ border-color:var(--ds-lagoon); background:rgba(9,107,129,0.05); }
.ds-amount-opt.is-disabled{ background:rgba(8,24,45,0.12); border-color:rgba(8,24,45,0.16); cursor:not-allowed; }
.ds-amount-opt input[type=radio]{
  -webkit-appearance:none !important; appearance:none !important; opacity:1 !important;
  position:static !important; box-shadow:none !important;
  width:18px !important; height:18px !important; margin:0 !important; flex:0 0 auto;
  border:2px solid #767676 !important; border-radius:50% !important; background:#fff !important; cursor:pointer;
}
.ds-amount-opt input[type=radio]:checked{ background:var(--ds-lagoon) !important; border-color:#767676 !important; }
.ds-amount-opt.is-disabled input[type=radio]{ background:rgba(8,24,45,0.12) !important; cursor:not-allowed; }
.ds-amount-opt__main{ flex:1 1 auto; min-width:0; }
.ds-amount-opt__title{ display:block; font-family:var(--ds-font-body); font-weight:400; font-size:15px; color:var(--ds-deep-sea); }
.ds-amount-opt__sub{ display:none; }
[data-payment-state="past-due"] .ds-amount-opt__sub{ display:block; font-size:13px; color:#4A5661; margin-top:2px; }
.ds-amount-opt__amt{ flex:0 0 auto; font-family:var(--ds-font-display); font-size:18px; color:var(--ds-lagoon); }
.ds-amount-opt__input{ flex:0 0 auto; width:120px !important; height:41px; padding:11px 13px !important; border:1px solid #08182d !important; border-radius:8px !important; text-align:left; font-size:15px; color:var(--ds-deep-sea); background:#fff; }
.ds-amount-opt.is-disabled .ds-amount-opt__input{ background:rgba(8,24,45,0.12) !important; border-color:#08182d !important; color:rgba(8,24,45,0.38) !important; }
.ds-amount-opt.is-disabled .ds-amount-opt__input::placeholder{ color:rgba(8,24,45,0.38); }
@media (max-width:900px){
  .ds-amount{ gap:8px; margin-bottom:12px; }
  .ds-amount-opt{ padding:14px 15px; }
  .ds-amount-opt__title{ font-size:14px !important; }
  .ds-amount-opt__sub{ display:none !important; }
  .ds-amount-opt__amt{ font-size:15px !important; }
  .ds-amount-opt__input{ width:96px !important; height:auto; padding:10px 11px !important; font-size:14px; }
}

/* Authorization (③) */
.ds-auth__terms{ font-family:var(--ds-font-body); font-size:13px; line-height:20.8px; color:#4A5661; margin:0 0 16px; }
.ds-auth__terms strong{ color:#08182d; }
.ds-auth__terms a{ color:var(--ds-lagoon); text-decoration:underline; }
.ds-sign-block{ background:transparent; border-radius:8px; padding:12px 16px 16px; }
.ds-sign__hint{ font-family:var(--ds-font-body); font-size:13px; line-height:20.8px; color:#64748B; margin:0 0 8px; }
.ds-sign{ position:relative; }
.ds-sign input.form-control{ border:2px solid #096b81; border-radius:4px !important; padding:18.5px 13px 19px 41px !important; min-height:0; font-size:16px; color:var(--ds-deep-sea); }
.ds-sign input.form-control::placeholder{ color:rgba(7,21,44,0.4); }
.ds-sign__label{ position:absolute; top:-9px; left:12px; background:#fff; padding:0 4px; font-family:var(--ds-font-body); font-size:12px; line-height:16px; color:rgba(7,21,44,0.6); }
.ds-sign__icon{ position:absolute; left:12px; top:0; bottom:0; display:flex; align-items:center; }
.ds-sign__icon svg{ width:20px; height:20px; display:block; }

/* Card ② — brand logos pinned top-right of the card; drop legacy "Expiration Date:" label */
.wrapp_card_form{ position:relative; }
.wrapp_card_form .list_payment{ position:absolute; top:28px; right:28px; display:flex; gap:6px; margin:0; padding:0; list-style:none; }
.wrapp_card_form .list_payment li{ width:32px; display:flex; }
.wrapp_card_form .list_payment li svg{ width:32px; height:20px; display:block; }
#label-card-expiry{ display:none !important; }
@media (max-width:900px){ .wrapp_card_form .list_payment{ top:18px; right:18px; } }
/* State select: fill its column + match input height, keep the native dropdown arrow */
.wrapp_card_form .wrap_select{ width:100%; }
.wrapp_card_form select.form-control{ min-height:47px; -webkit-appearance:auto !important; appearance:auto !important; font-size:16px; }

/* Card ③ — typed-name signature (Figma). Style terms; hide the legacy checkbox, drawing
   pad, and submit button. All stay in the DOM as the payment contract: the .ds-sign field
   writes #output and checks #agreement (both validated by the payment JS), and the Pay
   buttons still trigger the hidden #submit-button. */
.ds-card-auth .form_text{ font-family:var(--ds-font-body) !important; font-size:13px !important; line-height:20.8px !important; color:#4A5661 !important; }
.ds-card-auth .form_text a{ color:var(--ds-lagoon) !important; text-decoration:underline; }
.ds-card-auth .form_text strong{ color:#08182d !important; }
.ds-card-auth .form_text .custom-control{ display:none !important; }
.ds-card-auth .sigPad{ display:none !important; }
.ds-card-auth #submit-button{ display:none !important; }
.ds-card-auth .payment-errors{ display:block; text-align:center; margin-top:8px; }