@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{ --ag-azure:#0d6fe5; --ag-cyan:#03b8b7; --ag-mint:#06d6a0; --ag-ink:#0f2f4c; --ag-sky:#f4faff; }

/* ---- typography to match marketing ---- */
body, body *:not(i):not(mat-icon):not([class*="material-icons"]):not([class*="mat-icon"]):not([class*="fa-"]):not([class*="-icon"]):not([class*="icon-"]):not([class*="boldProx"]):not([class*="semiBoldProx"]):not(h1):not(h2):not(h3):not([class*="title"]):not([class*="Title"]){
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif !important;
}
h1,h2,h3,h4,h5,h6,[class*="title"],[class*="Title"],[class*="heading"],[class*="Heading"],
.rank-button,[class*="hotel-name"],[class*="card__name"],[class*="hotelName"]{
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif !important;
  letter-spacing:-.01em;
}
body{ background:var(--ag-sky) !important; }

/* ---- vendor branding + native footers off ---- */
a[href*="pathfndr.io"], a[href*="pathfndr"]{ display:none !important; }
.footer-nc,
[id^="footer-socialLinks"],[id^="footer-customerDetails"],[id^="footer-otherLinks"],[id^="footer-mandatoryLinks"],
#footer_section_1,#section_ne8y3ctq6bn,#section_738dto5omid,#section_9v75xnopmxc{ display:none !important; }

/* ---- special-fares nudge + scroll-lock (every page) ---- */
.cdk-overlay-pane.splFareDialogRef{ display:none !important; }
html.cdk-global-scrollblock{ position:static !important; overflow:visible !important; width:auto !important; top:auto !important; left:auto !important; }

/* ================= marketing footer, self-contained ================= */
.agft{ position:relative; overflow:hidden; color:#fff; margin-top:56px;
  background:linear-gradient(105deg,rgba(11,87,201,.94) 0%,rgba(13,111,229,.88) 42%,rgba(8,145,178,.86) 100%),
    url('https://affordablegetaways.net/img/beach.jpg') center 62%/cover no-repeat; }
.agft::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(40rem 18rem at 10% -20%,rgba(255,255,255,.20),transparent 62%),
    radial-gradient(34rem 18rem at 90% 120%,rgba(6,214,160,.26),transparent 62%); }
.agft-in{ position:relative; max-width:1180px; margin:0 auto; padding:64px 24px 32px;
  display:grid; gap:32px; grid-template-columns:1.3fr 1fr 1fr; }
.agft a{ color:#d8fbff !important; text-decoration:none !important; }
.agft a:hover{ color:#fff !important; }
.agft h4{ font-family:'Plus Jakarta Sans',sans-serif !important; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.8); margin:0 0 14px; }
.agft p,.agft li{ color:rgba(255,255,255,.92); text-shadow:0 1px 10px rgba(6,32,60,.35); }
.agft-brand img{ height:44px; margin-bottom:14px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.3)); }
.agft-links{ list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:15px; }
.agft-social{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); color:#fff; }
.agft-social:hover{ background:rgba(255,255,255,.24); transform:translateY(-2px); }
.agft-bottom{ position:relative; max-width:1180px; margin:0 auto;
  border-top:1px solid rgba(255,255,255,.18); padding:22px 24px; display:flex; gap:24px;
  justify-content:space-between; flex-wrap:wrap; font-size:14px; color:rgba(255,255,255,.85); }
@media(max-width:900px){ .agft-in{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .agft-in{ grid-template-columns:1fr; } }

/* ================= design polish: match home, kill the stock look ============ */
/* the navy step/summary bars -> the marketing azure gradient */
mat-expansion-panel-header{
  background:linear-gradient(105deg,#0b57c9 0%,#0d6fe5 45%,#0891b2 100%) !important;
  border-radius:14px !important;
}
mat-expansion-panel-header, mat-expansion-panel-header *{ color:#fff !important; }
mat-expansion-panel-header .mat-expansion-indicator svg{ stroke:#fff; }

/* the "Modify" button -> azure like the marketing CTA */
.modify-button, button.modify-button{
  background:linear-gradient(135deg,#0d6fe5,#03b8b7) !important;
  border:0 !important; color:#fff !important; border-radius:999px !important;
  box-shadow:0 10px 22px -12px rgba(13,111,229,.6) !important;
}
.modify-button *{ color:#fff !important; }

/* hotel / result cards -> rounded, soft shadow, hairline border like home cards */
.hotels-card-t4-container, .extendedHotelCard, [class*="hotel-card"]:not([class*="dates"]):not([class*="date"]){
  border-radius:20px !important;
  box-shadow:0 14px 34px -22px rgba(8,109,178,.40) !important;
  border:1px solid rgba(13,111,229,.10) !important;
  overflow:hidden;
}

/* rank badge already azure; give the sort tab underline the brand azure */
[class*="sort"] .mdc-tab-indicator__content--underline,
.mat-mdc-tab-header .mdc-tab-indicator__content--underline{ border-color:#0d6fe5 !important; }

/* primary action buttons -> azure gradient (Select / raised) */
.mdc-button--raised, .selected-hotel-btn{
  background:linear-gradient(135deg,#0d6fe5,#03b8b7) !important; color:#fff !important;
}


/* some panel headers carry the navy via a higher-specificity rule; id selector wins */
mat-expansion-panel-header[id^="mat-expansion-panel-header"]{
  background:linear-gradient(105deg,#0b57c9 0%,#0d6fe5 45%,#0891b2 100%) !important;
}






/* the azure bars sat on a panel that still had navy bg + 4px radius + elevation
   shadow, so dark corners leaked around the rounded header. Flatten the panel. */
mat-expansion-panel{
  background:transparent !important; box-shadow:none !important;
  border-radius:14px !important; overflow:hidden !important;
}
mat-expansion-panel .mat-expansion-panel-content,
mat-expansion-panel .mat-expansion-panel-body{ background:transparent !important; }


/* Material elevation shadows leak dark corners behind rounded pills/bars */
.rank-button, .rank-button.mdc-button, [class*="rank-button"],
mat-expansion-panel-header, [class*="pagination-btn"]{
  box-shadow:none !important;
}


/* hotel Select/Selected must read as two states, not one azure blob */
.selected-hotel-btn, button.selected-hotel-btn{
  background:linear-gradient(135deg,#0d6fe5,#03b8b7) !important; background-image:linear-gradient(135deg,#0d6fe5,#03b8b7) !important;
  color:#fff !important; border:0 !important;
}
.selected-hotel-btn *{ color:#fff !important; }
.select-hotel-btn, button.select-hotel-btn{
  background:#fff !important; background-image:none !important;
  color:#0d6fe5 !important; border:1.5px solid #0d6fe5 !important; box-shadow:none !important;
}
.select-hotel-btn *{ color:#0d6fe5 !important; }


/* ===== Popular Destinations (kraft top-dest cards) on the booking home ===== */
/* image must fill without stretching */
#section_iahk9ea7nwl img, #section_iahk9ea7nwl [class*="img"]{
  object-fit:cover !important; width:100% !important; height:100% !important;
}
/* drop the Explore button; clicking the card already opens the destination */
#section_iahk9ea7nwl button, #section_iahk9ea7nwl .mdc-button{ display:none !important; }
/* name/desc: legible white text on a bottom gradient, no stacked white pills */
#section_iahk9ea7nwl{ position:relative !important; }
#section_iahk9ea7nwl::after{
  content:"" !important; position:absolute !important; inset:auto 0 0 0 !important; height:78% !important;
  background:linear-gradient(180deg,transparent 0%,rgba(6,26,48,.35) 45%,rgba(6,26,48,.85) 100%) !important;
  z-index:1 !important; pointer-events:none;
}
#section_iahk9ea7nwl p, #section_iahk9ea7nwl [class*="placeholderText"]{
  position:relative !important; z-index:2 !important; color:#fff !important;
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 3px 16px rgba(3,26,58,.9) !important;
  padding:0 !important; text-align:left !important;
  font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:700 !important;
}


/* trust cards (700+ / BEST PRICE / TOP NOTCH) were stuck together — higher
   specificity than the tagline CSS so the gap actually applies */
body #section_sjuxmjs7ck .kraft-cell, html body #section_sjuxmjs7ck [class*="kraft-cell"]{
  margin-left:22px !important; margin-right:22px !important;
}
@media(max-width:760px){ body #section_sjuxmjs7ck .kraft-cell{ margin:0 0 16px !important; } }


/* summary/banner image was object-fit:fill -> stretched; cover it */
.summaryCss, img.summaryCss, [class*="summaryCss"]{ object-fit:cover !important; }
/* Pathfndr heading classes (Proxima) -> Plus Jakarta Sans like the marketing headings */
body .boldProx, body .semiBoldProx, body [class*="boldProx"], body [class*="semiBoldProx"],
body .font30, body .font24, body .font20, html body p.boldProx{
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif !important;
}


/* ===== gallery / lightbox viewer: was a flat grey box, make it premium ===== */
.ag-gallery{
  background:radial-gradient(120% 120% at 50% 0%, rgba(13,58,110,.92), rgba(6,16,30,.97)) !important;
  backdrop-filter:blur(10px) saturate(140%) !important;
}
.ag-gallery img{ border-radius:16px !important; box-shadow:0 30px 70px -30px rgba(0,0,0,.7) !important; }
/* the small thumbnails row */
.ag-gallery img[width], .ag-gallery [class*="thumb"] img, .ag-gallery img:not([class*="summary"]){
  transition:transform .18s, box-shadow .18s, outline-color .18s;
}
.ag-gallery [class*="active"] img, .ag-gallery img[class*="active"]{
  outline:3px solid #0d6fe5 !important; outline-offset:2px !important;
}
.ag-gallery p, .ag-gallery span{
  color:#e8f4ff !important; font-family:'Plus Jakarta Sans',sans-serif !important;
  letter-spacing:.01em !important;
}




/* breathing room between the Popular Destinations header (+ View All) and cards */
#section_iahk9ea7nwl{ margin-top:26px !important; }
#section_ee5y3uul9r, #section_18pxbm43f3b{ margin-bottom:18px !important; }