/* ==========================================================================
   AAFRIN INTERNATIONAL — BRAND REDESIGN
   Inspired by the supplied Aafrin logo + MadTravels visual direction.
   Loaded after mad.css so the existing application structure/functionality
   remains intact.
   ========================================================================== */

:root {
  --c-brand: #010256;
  --c-brand-600: #000143;
  --c-brand-700: #000032;
  --c-brand-050: #eef0ff;

  --c-lime: #5CB816;
  --c-lime-600: #4a990f;
  --c-lime-050: #E8F5E1;
  --c-green: #4f9f16;

  --c-ink: #333333;
  --c-body: #5f6368;
  --c-muted: #858585;
  --c-line: #e8e8e8;
  --c-surface: #ffffff;
  --c-surface-2: #f7f8f7;
  --c-surface-3: #eef4eb;

  --f-head: "Poppins", "Manrope", system-ui, sans-serif;
  --f-body: "Poppins", "Inter", system-ui, sans-serif;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --e-1: 0 2px 8px rgba(1, 2, 86, .05);
  --e-2: 0 8px 24px rgba(1, 2, 86, .09);
  --e-3: 0 18px 45px rgba(1, 2, 86, .14);
}

/* Base */
body {
  font-family: var(--f-body);
  color: var(--c-body);
  background: #fff;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--f-head);
  color: var(--c-ink);
}

a { color: var(--c-brand); }
a:hover { color: var(--c-lime-600); }

/* Top utility strip: keep the interface clean like the reference prototype. */
.mad-topbar {
  background: var(--c-brand);
  color: rgba(255,255,255,.82);
  border: 0;
}
.mad-topbar a,
.mad-topbar i { color: rgba(255,255,255,.88); }

/* Header */
.mad-header {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid #ededed;
  box-shadow: 0 2px 14px rgba(1,2,86,.04);
  backdrop-filter: blur(10px);
}
.mad-header__inner { min-height: 82px; }
.mad-logo img { max-height: 62px; width: auto; }
.mad-nav__link {
  color: #333;
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
}
.mad-nav__link:hover,
.mad-nav__item.is-open > .mad-nav__link {
  background: var(--c-lime-050);
  color: var(--c-brand);
}
.mad-nav__panel {
  border-color: #e5e5e5;
  box-shadow: var(--e-3);
}

/* Buttons */
.mad-btn {
  background: var(--c-lime);
  border-color: var(--c-lime);
  color: #fff;
  border-radius: 8px;
  font-family: var(--f-head);
  font-weight: 600;
  box-shadow: 0 5px 14px rgba(92,184,22,.18);
}
.mad-btn:hover {
  background: var(--c-lime-600);
  border-color: var(--c-lime-600);
  color: #fff;
  transform: translateY(-1px);
}
.mad-btn--ghost {
  background: #fff;
  color: var(--c-brand);
  border-color: var(--c-brand);
  box-shadow: none;
}
.mad-btn--ghost:hover {
  background: var(--c-brand);
  color: #fff;
}
.mad-btn--onbrand {
  background: #fff;
  border-color: #fff;
  color: var(--c-brand);
  box-shadow: none;
}
.mad-btn--onbrand:hover {
  background: var(--c-lime);
  border-color: var(--c-lime);
  color: #fff;
}

/* Home hero */
.mad-hero {
  background: var(--c-brand);
}
.mad-hero__slide {
  min-height: clamp(480px, 68vh, 680px);
}
.mad-hero__media::after {
  background:
    linear-gradient(90deg, rgba(1,2,86,.97) 0%, rgba(1,2,86,.84) 38%, rgba(1,2,86,.34) 72%, rgba(1,2,86,.12) 100%);
}
.mad-hero__body { max-width: 700px; }
.mad-hero__eyebrow {
  background: rgba(92,184,22,.18);
  border: 1px solid rgba(92,184,22,.48);
  color: #fff;
}
.mad-hero__title {
  font-size: clamp(2.3rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -.035em;
}
.mad-hero__text { max-width: 600px; }
.mad-hero__actions { gap: 12px; }

/* Search */
.mad-searchpanel {
  border: 1px solid #e7e7e7;
  border-radius: 16px;
  box-shadow: var(--e-3);
}
.mad-searchpanel__title { color: var(--c-brand); }

/* Section rhythm */
.mad-section { padding-block: clamp(52px, 7vw, 92px); }
.mad-section--muted { background: #f7f8f7; }
.mad-section--tight { padding-block: 42px; }

.mad-head__eyebrow {
  color: var(--c-lime-600);
  font-weight: 700;
  letter-spacing: .08em;
}
.mad-head__title {
  color: var(--c-brand);
  font-weight: 800;
  letter-spacing: -.025em;
}
.mad-head__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 12px;
  background: var(--c-lime);
  border-radius: 10px;
}
.mad-head--center .mad-head__title::after {
  margin-left: auto;
  margin-right: auto;
}

/* Cards */
.mad-card,
.mad-feature,
.mad-quote,
.mad-panel,
.mad-post,
.mad-tile {
  border-color: #e8e8e8;
  border-radius: 16px;
  box-shadow: 0 3px 16px rgba(1,2,86,.055);
}
.mad-card:hover,
.mad-feature:hover,
.mad-post:hover,
.mad-tile:hover {
  border-color: rgba(92,184,22,.42);
  box-shadow: var(--e-2);
  transform: translateY(-4px);
}
.mad-card__media,
.mad-post__media,
.mad-tile {
  overflow: hidden;
}
.mad-card__title,
.mad-feature__title,
.mad-post__title {
  color: var(--c-brand);
}
.mad-card__body,
.mad-feature,
.mad-post__body { background: #fff; }

.mad-tile {
  min-height: 260px;
}
.mad-tile::after {
  background: linear-gradient(180deg, transparent 30%, rgba(1,2,86,.92) 100%);
}
.mad-tile__title { color: #fff; }

/* Trust / feature icons */
.mad-trust__item {
  border-radius: 14px;
  background: #fff;
  border-color: #e9e9e9;
}
.mad-trust__icon,
.mad-feature__icon {
  background: var(--c-lime-050);
  color: var(--c-lime-600);
  border-radius: 12px;
}
.mad-trust__title { color: var(--c-brand); }

/* Breadcrumb / inner page hero */
.mad-crumb {
  background: #f7f8f7;
  border-bottom: 1px solid #e8e8e8;
}
.mad-crumb--hero {
  background:
    linear-gradient(110deg, rgba(1,2,86,.98), rgba(1,2,86,.88));
  padding-block: 76px;
}
.mad-crumb--hero .mad-crumb__title {
  font-weight: 800;
}
.mad-crumb__nav a { color: var(--c-lime); }

/* Forms */
.form-control,
.form-select,
select.form-control {
  min-height: 46px;
  border: 1px solid #dedede;
  border-radius: 8px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--c-lime);
  box-shadow: 0 0 0 3px rgba(92,184,22,.12);
}

/* Package list */
.mad-quickfilter {
  border-color: #e0e0e0;
}
.mad-quickfilter.is-active {
  background: var(--c-lime);
  border-color: var(--c-lime);
}
.mad-toolbar {
  border-color: #e8e8e8;
  background: #fff;
}
.mad-panel--brand {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.mad-pricebox {
  background: var(--c-lime-050);
  border-color: #d8ebcf;
}

/* Package detail */
.mad-gallery-main {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--e-2);
}
.mad-detail__title { color: var(--c-brand); font-weight: 800; }
.mad-tabs .nav-link {
  color: var(--c-brand);
  font-family: var(--f-head);
  font-weight: 600;
}
.mad-tabs .nav-link.active {
  color: var(--c-brand);
  border-bottom-color: var(--c-lime);
}
.mad-itin__head {
  background: var(--c-brand);
}
.mad-itin__day {
  background: var(--c-lime-050);
  color: var(--c-brand);
}

/* CTA */
.mad-cta {
  background: var(--c-brand);
  border-radius: 18px;
  box-shadow: var(--e-2);
}
.mad-cta h2,
.mad-cta h3,
.mad-cta p { color: #fff; }
.mad-cta .mad-btn {
  background: var(--c-lime);
  color: #fff;
}

/* Footer */
.mad-footer {
  background: var(--c-brand);
  color: rgba(255,255,255,.72);
  border-top: 0;
}
.mad-footer h4 { color: #fff; }
.mad-footer a { color: rgba(255,255,255,.76); }
.mad-footer a:hover { color: var(--c-lime); }
.mad-footer__bottom {
  border-top-color: rgba(255,255,255,.14);
}
.mad-footer::after {
  content: "";
  display: block;
  height: 7px;
  background: var(--c-lime);
  margin-top: 28px;
}

/* Floating actions */
.mad-fab--brand {
  background: var(--c-lime);
  color: #fff;
}
.mad-fab--brand:hover {
  background: var(--c-lime-600);
  color: #fff;
}

/* Mobile */
@media (max-width: 991px) {
  .mad-header__inner { min-height: 70px; }
  .mad-logo img { max-height: 54px; }
}
@media (max-width: 767px) {
  .mad-hero__slide { min-height: 520px; }
  .mad-hero__title { font-size: 2.25rem; }
  .mad-crumb--hero { padding-block: 54px; }
}

/* =========================================================================
   Missing-image fallbacks + mobile pass
   ========================================================================= */

/* ---- 1. Never render an empty media box -------------------------------
   A tile/card whose image is absent or fails to load gets .is-noimg (set
   by the img onerror handler) or simply has no <img> at all. Either way a
   branded panel shows instead of a blank rectangle. */
.mad-tile,
.mad-card__media,
.mad-post__media,
.mad-gallery-main,
.mad-shot {
  background-color: var(--c-brand-050);
  background-image: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-600) 100%);
}

/* Watermark glyph, only when there is no image to show */
.mad-tile.is-noimg::before,
.mad-card__media.is-noimg::before,
.mad-post__media.is-noimg::before,
.mad-tile:not(:has(img))::before,
.mad-card__media:not(:has(img))::before,
.mad-post__media:not(:has(img))::before {
  content: "\f5a0";                       /* map-location */
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.28);
  z-index: 1;
}

.mad-card__media,
.mad-post__media { position: relative; }

/* Tile text must stay legible over the fallback panel */
.mad-tile.is-noimg::after,
.mad-tile:not(:has(img))::after {
  background: linear-gradient(180deg, rgba(21, 29, 95, 0) 30%, rgba(21, 29, 95, 0.9) 100%);
}

/* ---- 2. Mobile pass ---------------------------------------------------- */
@media (max-width: 767px) {
  /* The page was very tall — tighten vertical rhythm between sections. */
  .mad-section { padding-block: var(--s-6); }
  .mad-section--tight { padding-block: var(--s-5); }

  /* Travel-style tiles: 1:1 wasted height at 2-up. Wider is easier to scan. */
  .mad-tile { aspect-ratio: 4 / 3; }
  .mad-tile__body { padding: var(--s-3); }
  .mad-tile__title { font-size: var(--t-sm); }
  .mad-tile__note { font-size: 11px; }

  /* Long testimonials pushed the section to full-screen height. */
  .mad-quote__text {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mad-quote { padding: var(--s-4); }

  /* Section headings and intro text sit closer together. */
  .mad-head { margin-bottom: var(--s-4); }
  .mad-head-row { gap: var(--s-3); margin-bottom: var(--s-4); }

  /* Heading + "view all" button share a row instead of stacking tall. */
  .mad-head-row { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .mad-head-row .mad-btn { min-height: 40px; padding: 0 var(--s-4); font-size: var(--t-xs); }

  /* Package cards: trim the image so more of the card fits on screen. */
  .mad-card__media { aspect-ratio: 16 / 9; }
  .mad-post__media { aspect-ratio: 16 / 9; }

  /* Search panel sat awkwardly under the hero on small screens. */
  .mad-searchpanel { padding: var(--s-4); border-radius: var(--r-md); }
}

@media (max-width: 400px) {
  /* Two tiles per row get cramped on very narrow phones. */
  .mad-tile__title { font-size: var(--t-xs); }
  .mad-hero__title { font-size: 1.65rem; }
}

/* ---- Slider layout fixes ------------------------------------------------
   Swiper slides default to a fixed height from the tallest item, which made
   tiles of differing content overlap their neighbours. `height: auto` lets
   each slide size itself and the flex row keep them aligned. */
.swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
}

.swiper-slide > * { width: 100%; }

/* A slider sitting directly inside .container clipped its edge slide flush
   against the padding. Let it breathe to the container edge instead. */
.swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 auto; }

/* Slider arrows were reachable but visually inert when at either end. */
.mad-slider__btn.swiper-button-disabled { opacity: 0.35; }

@media (max-width: 767px) {
  /* Arrow controls are redundant next to a swipeable, peeking carousel. */
  .mad-head-row .mad-slider__nav { display: none; }
  /* Tiles keep a consistent height when slides auto-size. */
  .mad-tile { height: 100%; }
}

/* =========================================================================
   Mobile header + search overlay fixes
   ========================================================================= */

/* ---- 1. Header alignment ------------------------------------------------
   The right-hand actions were pushed over by `.mad-nav { margin-left:auto }`.
   Below 992px the nav is display:none, so nothing pushed them and the search
   icon + hamburger sat directly beside the logo. Own the alignment on the
   actions themselves so it holds at every width: logo left, actions right. */
.mad-header__actions { margin-left: auto; }

@media (max-width: 991px) {
  .mad-header__inner { gap: var(--s-3); }
  /* Logo must not squeeze the actions off the row. */
  .mad-logo { flex: 0 1 auto; min-width: 0; }
  .mad-logo img { max-height: 42px; }
  .mad-header__actions { flex: 0 0 auto; }
}

@media (max-width: 400px) {
  .mad-logo img { max-height: 36px; }
  .mad-iconbtn { width: 40px; height: 40px; }
}

/* ---- 2. Search overlay --------------------------------------------------
   A flex child with an <input> has an intrinsic minimum width, so the input
   refused to shrink and pushed the Search button off-screen. min-width:0
   lets it shrink; below 480px the button drops to its own full-width row. */
.mad-searchform { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.mad-searchform .form-control { flex: 1 1 220px; min-width: 0; }
.mad-searchform .mad-btn { flex: 0 0 auto; }

.mad-searchbar { max-height: 100vh; overflow-y: auto; }
.mad-searchbar .container { padding-inline: var(--s-4); }

@media (max-width: 479px) {
  .mad-searchform .form-control { flex: 1 1 100%; }
  .mad-searchform .mad-btn { flex: 1 1 100%; }
}

/* Hero search panel: same intrinsic-width problem on narrow screens. */
.mad-searchpanel .form-control { min-width: 0; }
.mad-searchpanel .row { --bs-gutter-x: 0.75rem; }

/* =========================================================================
   Horizontal overflow guards
   The page was wider than the viewport on phones, which scrolled the layout
   sideways and pushed the logo off the left edge. mad.css only guarded
   overflow below 575px; these apply at every width and stop any single
   element from forcing the page wider than the screen.
   ========================================================================= */
html,
body {
  max-width: 100%;
  overflow-x: clip;          /* clip keeps position:sticky working */
}

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Nothing may exceed the viewport width */
/* NOTE: .container is deliberately excluded here. Bootstrap gives it a
   max-width per breakpoint (960/1140/1320px) and overriding that with
   100% stretched every section edge-to-edge. Containers are already
   width:100% with padding, so they can never exceed the viewport. */
.mad-section,
.mad-hero,
.mad-crumb,
.mad-footer,
.mad-topbar,
.mad-header {
  max-width: 100%;
}

/* Comfortable reading measure on very wide screens, matching the
   1320px Bootstrap already uses at the xxl breakpoint. */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

/* Flex children need min-width:0 or their content forces the row wider */
.mad-header__inner,
.mad-topbar__inner,
.mad-card,
.mad-card__body,
.mad-post,
.mad-post__body,
.mad-quote,
.mad-trust__item,
.mad-itin__row,
.mad-detail__meta,
.swiper-slide {
  min-width: 0;
}

.mad-header__inner { flex-wrap: nowrap; }

/* Long unbroken strings (URLs, emails, package titles) are a classic cause */
.mad-card__title,
.mad-post__title,
.mad-crumb__title,
.mad-hero__title,
.mad-footer__contact,
.mad-detail__title,
.mad-rt {
  overflow-wrap: anywhere;
}

/* Media can never be wider than its box */
img, svg, video, iframe, table { max-width: 100%; }

/* Bootstrap rows use negative margins; keep them from spilling */
.row { --bs-gutter-x: 1.5rem; }
@media (max-width: 575px) {
  .row { --bs-gutter-x: 1rem; }
  .container { padding-inline: 1rem; }
}

/* Fixed-position furniture must not create scroll width */
.mad-drawer,
.mad-scrim,
.mad-searchbar,
.mad-actionbar,
.mad-fabs,
.mad-rail-social {
  max-width: 100vw;
}


/* =========================================================================
   Blog layout fixes
   ========================================================================= */

/* The featured post used `aspect-ratio: auto`, so a tall portrait photo set
   its own height and stretched the card to thousands of pixels, dragging the
   whole page layout with it. Lock the ratio and crop instead. */
.mad-post--featured .mad-post__media {
  flex: 0 0 44%;
  aspect-ratio: 4 / 3;
  max-height: 380px;
  overflow: hidden;
}

.mad-post--featured .mad-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mad-post--featured { align-items: stretch; }
.mad-post--featured .mad-post__body { min-width: 0; }

/* Non-featured cards in the list read better as a wide row than a tall stack */
@media (min-width: 768px) {
  .th-blog-list .mad-post {
    flex-direction: row;
    align-items: stretch;
  }
  .th-blog-list .mad-post .mad-post__media {
    flex: 0 0 38%;
    aspect-ratio: 4 / 3;
    max-height: 260px;
  }
  .th-blog-list .mad-post .mad-post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .th-blog-list .mad-post .mad-post__body {
    justify-content: center;
    min-width: 0;
  }
}

/* Every post image is bounded, whatever its source dimensions */
.mad-post__media { max-height: 420px; }


/* -------------------------------------------------------------------------
   Blog list: stop a post claiming the full column height
   `.mad-post` carries height:100% so it fills a grid cell. In the blog list
   the posts are stacked in a Bootstrap column, and a column in a flex row
   has a definite (stretched) height — so a post placed directly in it grew
   to the height of the entire column, leaving a huge gap under the text.
   Each post now sits in its own wrapper with an auto height.
   ---------------------------------------------------------------------- */
.th-blog-list__item { margin-bottom: var(--s-5); }
.th-blog-list__item:last-child { margin-bottom: 0; }

.th-blog-list > .mad-post,
.th-blog-list__item > .mad-post {
  height: auto;
}


/* Mobile travel-style grid: prevent tile height/width from overflowing the viewport. */
.mad-travel-styles {
  overflow: hidden;
}

.mad-travel-styles .row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.mad-travel-styles .col-6 {
  min-width: 0;
}

@media (max-width: 767px) {
  .mad-travel-styles .mad-tile {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
    width: 100%;
  }

  .mad-travel-styles .mad-tile__body {
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 400px) {
  .mad-travel-styles .row {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .75rem;
  }
}

/* Footer brand logo */
.mad-footer__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
  text-decoration: none;
}
.mad-footer__logo img {
  display: block;
  width: 190px;
  height: auto;
  max-width: 100%;
}

/* =========================================================================
   Home quick services / mobile service dock
   ========================================================================= */
.mad-services { padding-top: 24px; }
.mad-services__shell {
  background: #fff;
  border: 1px solid #e8e9ed;
  border-radius: 22px;
  box-shadow: var(--e-2);
  padding: 24px;
}
.mad-services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.mad-services__title {
  margin: 5px 0 0;
  color: var(--c-brand);
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -.02em;
}
.mad-services__view {
  color: var(--c-brand);
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}
.mad-services__view i { margin-left: 4px; }
.mad-services__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
}
.mad-service {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 18px 10px 15px;
  border: 1px solid #ececf0;
  border-radius: 16px;
  background: linear-gradient(180deg,#fff,#fafbfc);
  color: var(--c-ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mad-service:hover {
  transform: translateY(-3px);
  border-color: rgba(92,184,22,.45);
  box-shadow: var(--e-2);
  color: var(--c-brand);
}
.mad-service__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef6e9;
  color: var(--c-brand);
  font-size: 23px;
}
.mad-service__name {
  color: var(--c-brand);
  font-family: var(--f-head);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.2;
}
.mad-service__note {
  color: var(--c-muted);
  font-size: .72rem;
  line-height: 1.25;
}

@media (max-width: 991px) {
  .mad-services__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 767px) {
  .mad-services { padding-top: 8px; padding-bottom: 18px; }
  .mad-services__shell {
    padding: 14px;
    border-radius: 18px;
  }
  .mad-services__head {
    align-items: flex-start;
    margin-bottom: 12px;
  }
  .mad-services__view { font-size: .75rem; }
  .mad-services__grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
  }
  .mad-service {
    padding: 12px 5px 11px;
    border-radius: 13px;
  }
  .mad-service__icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
  .mad-service__name { font-size: .75rem; }
  .mad-service__note { font-size: .62rem; }
}

/* =========================================================================
   Travel services + exclusive deals hub
   ========================================================================= */
.mad-booking-hub { padding-top: 22px; }
.mad-booking-hub__services {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  max-width:900px;
  margin:0 auto 34px;
  padding:18px 20px;
  border:1px solid #e6e7eb;
  border-radius:24px;
  background:#fff;
  box-shadow:var(--e-2);
}
.mad-booking-hub__service {
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 6px;
  border-radius:16px;
  color:var(--c-ink);
  font-family:var(--f-head);
  font-weight:700;
  font-size:.92rem;
  text-decoration:none;
  transition:.2s ease;
}
.mad-booking-hub__service:hover,
.mad-booking-hub__service--active { color:var(--c-brand); background:#f3f8ff; }
.mad-booking-hub__service-icon { font-size:31px; line-height:1; }
.mad-booking-hub__badge {
  position:absolute;
  top:-2px;
  right:18px;
  padding:3px 7px;
  border-radius:999px;
  background:#5c1df2;
  color:#fff;
  font-size:.62rem;
  font-weight:800;
}
.mad-deals-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:12px;
}
.mad-deals-head__view { color:#3c8fdc; font-weight:800; white-space:nowrap; }
.mad-deals-tabs {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:0 0 14px;
  scrollbar-width:none;
}
.mad-deals-tabs::-webkit-scrollbar { display:none; }
.mad-deals-tabs button {
  flex:0 0 auto;
  border:1px solid #dce1e9;
  border-radius:999px;
  background:#fff;
  color:#4f5058;
  padding:10px 22px;
  font:700 .95rem var(--f-head);
}
.mad-deals-tabs button.is-active { background:#1757ad; border-color:#1757ad; color:#fff; }
.mad-deals-track {
  display:grid;
  /* Single row, one column per deal. grid-auto-flow:column means the track
     never wraps to a second row no matter how many deals are published —
     extra deals extend the row and are reached by scrolling instead. */
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 28px) / 3);
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:6px;
}
.mad-deals-track::-webkit-scrollbar { display:none; }
.mad-deal-card {
  position:relative;
  min-height:190px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  padding:24px;
  border-radius:22px;
  color:#fff;
  text-decoration:none;
  box-shadow:var(--e-2);
}
.mad-deal-card::after {
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-28px;
  bottom:-60px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
}
.mad-deal-card--blue { background:linear-gradient(135deg,#1857b1,#2f76da); }
.mad-deal-card--dark { background:linear-gradient(135deg,#151b35,#2f394f); }
.mad-deal-card--green { background:linear-gradient(135deg,#138c52,#42bd73); }
.mad-deal-card__tag { font-size:.67rem; font-weight:900; letter-spacing:.08em; }
.mad-deal-card__eyebrow { margin-top:8px; font-size:.9rem; opacity:.9; }
.mad-deal-card strong { margin-top:4px; max-width:68%; position:relative; z-index:2; font:800 1.8rem/1.05 var(--f-head); }
.mad-deal-card strong em { font-style:normal; color:#ffe64e; }
.mad-deal-card__note { max-width:72%; margin-top:8px; font-size:.8rem; line-height:1.35; opacity:.9; }
.mad-deal-card__icon { position:absolute; right:24px; top:54%; transform:translateY(-50%); font-size:64px; opacity:.78; z-index:0; pointer-events:none; }
@media (max-width:767px) {
  .mad-booking-hub { padding-top:10px; }
  .mad-booking-hub__services { grid-template-columns:repeat(3,minmax(0,1fr)); padding:14px 10px; margin-bottom:24px; border-radius:20px; }
  .mad-booking-hub__service { padding:9px 4px; font-size:.78rem; }
  .mad-booking-hub__service-icon { font-size:25px; }
  .mad-booking-hub__badge { right:10px; }
  .mad-deals-head { align-items:center; }
  .mad-deals-head .mad-head__title { font-size:1.55rem; }
  .mad-deals-head__view { font-size:.82rem; }
  .mad-deals-track { grid-auto-columns:82vw; padding-bottom:4px; }
  .mad-deal-card { min-height:165px; scroll-snap-align:start; padding:18px; border-radius:18px; }
  .mad-deal-card strong { max-width:67%; font-size:1.45rem; line-height:1.02; }
  .mad-deal-card__note { max-width:68%; }
  .mad-deal-card__icon { right:16px; top:56%; font-size:48px; }
}
.mad-deal-card--purple { background:linear-gradient(135deg,#34106c,#6b2caf); }
.mad-deal-card__promo {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  padding:6px 13px; border-radius:0 0 8px 8px;
  background:#ffd92e; color:#18203a; font-size:.72rem; font-weight:800;
  white-space:nowrap; z-index:1;
}
.mad-deal-card__promo strong { font:800 .82rem var(--f-head); color:#17255b; }
.mad-deal-card__promo--red { background:#ff4d4d; color:#fff; }
.mad-deal-card__promo--red strong { color:#fff; }
@media (max-width:767px) {
  .mad-deal-card__promo { font-size:.62rem; padding:5px 10px; }
}