/* ==========================================================================
   Home 43 - Flash SALE (So Deals, store_layout = home43)
   Scoped to .so-deals-home43. Visual contract follows the Popular Tours
   (So Extra Slider) card/marker set so both rows read as one design.
   Loaded AFTER layout43.css (see common/header.twig) on purpose: several
   overlay rules there use !important and must be overridden here.
   ========================================================================== */

.so-deals-home43 {
  --hfc-green: #066168;
  --hfc-green-dark: #04474c;
  --hfc-yellow: #ffaa0d;
  padding: 8px 0 24px;
}

/* ---- width contract -------------------------------------------------------
   Home 43 rows are Page Builder rows: the row decides full width / boxed and the
   module's # Column setting decides how many cards fit.  The vendor sheet still
   insets `.trv-popular-tours` by a FIXED 60px from 576px up
   (`.trv-popular-tours{margin:0 60px}` in layout43.css) while So Deals had no
   inset at all, so on desktop Flash SALE sat 60px further left and was 120px
   wider than Popular Tours.  Replace that magic number with ONE viewport
   proportional value shared by both rows: 60px at >=1440px, 41px at 992px, 24px
   at 576px and 0 on phones (matches the vendor's own <=575px rule).  Both rows
   therefore stay aligned at every width without hard-coding a column width, and
   if the row is switched to "not full width" the Bootstrap container of the row
   keeps working on top of this inset. */
body.layout-43 { --home43-row-inset: clamp(0px, 4.1667vw, 60px); }
@media (max-width: 575px) {
  body.layout-43 { --home43-row-inset: 0px; }
}
body.layout-43 .home43-tour-module.trv-popular-tours,
body.layout-43 .home43-tour-module.so-deals-home43 {
  margin-left: var(--home43-row-inset);
  margin-right: var(--home43-row-inset);
}

/* Promo word of the head ("SALE" in "Flash SALE") - yellow like the mock-up. */
.so-deals-home43 .trv-head-title .hfc-sale-word { color: var(--hfc-yellow); }


.so-deals-home43 .section-head.trv-head-title-wrap { margin-bottom: 26px; }
.so-deals-home43 .section-head.trv-head-title-wrap .trv-head-title {
  font-family: Afacad, Figtree, sans-serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hfc-green);
  margin-bottom: 10px;
}
.so-deals-home43 .section-head.trv-head-title-wrap .trv-head-discription { font-size: 16px; }
.so-deals-home43 .section-head.trv-head-title-wrap .trv-head-title-image img { width: 470px; }
/* `travlla_teal.css` carries `#content .module h2 { font-size:16px; color:#000;
   font-weight:700; text-transform:uppercase; margin-top:30px }` (1 id / 1 class /
   1 element), which outranks the three `.so-deals-home43 ... .trv-head-title`
   blocks above, so the Flash SALE head rendered as a small black uppercase label
   instead of the 46px Afacad/teal heading every other Home 43 section uses.
   Repeat the same head contract with an id on the selector (and keep the
   1024px / 767px steps in sync with the blocks above, otherwise these widths
   would fall back to 46px). */
#content .so-deals-home43 .section-head.trv-head-title-wrap .trv-head-title {
  font-family: Afacad, Figtree, sans-serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hfc-green);
  text-transform: none;
  margin: 0 0 10px;
}
@media (max-width: 1024px) {
  #content .so-deals-home43 .section-head.trv-head-title-wrap .trv-head-title { font-size: 40px; }
}
@media (max-width: 767px) {
  #content .so-deals-home43 .section-head.trv-head-title-wrap .trv-head-title { font-size: 30px; margin-top: 0; }
}

/* ---- countdown: four solid blocks (vendor screenshot 3) ------------------ */
.so-deals-home43 .home43-flash-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 20px auto 0;
  font-family: Figtree, Roboto, sans-serif;
}
.so-deals-home43 .hfc-label-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hfc-green);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
.so-deals-home43 .hfc-label-row .bi-alarm { font-size: 20px; }
.so-deals-home43 .hfc-boxes {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
}
.so-deals-home43 .hfc-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  padding: 20px 16px 12px;
  border-radius: 20px;
  background: var(--hfc-green);
  color: #fff;
  box-shadow: 0 10px 22px rgba(6, 97, 104, .18);
}
.so-deals-home43 .hfc-num {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.so-deals-home43 .hfc-unit {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.so-deals-home43 .home43-flash-countdown.is-finished { opacity: .55; }

/* ---- category tabs (desktop) -------------------------------------------- */
.so-deals-home43 .home43-flash-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 auto 26px;
  max-width: 100%;
}
.so-deals-home43 .home43-flash-tabs.is-single { justify-content: flex-end; }
.so-deals-home43 .home43-flash-tab {
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid rgba(6, 97, 104, .22);
  border-radius: 999px;
  background: #fff;
  color: var(--hfc-green);
  font-family: Figtree, Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.so-deals-home43 .home43-flash-tab:hover,
.so-deals-home43 .home43-flash-tab.is-active {
  background: var(--hfc-green);
  border-color: var(--hfc-green);
  color: #fff;
}
.so-deals-home43 .home43-flash-tab .hfc-count {
  display: inline-block;
  min-width: 22px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(6, 97, 104, .12);
  color: inherit;
  font-size: 12px;
  font-weight: 600;
}
.so-deals-home43 .home43-flash-tab.is-active .hfc-count { background: rgba(255, 255, 255, .22); }
.so-deals-home43 .home43-flash-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  margin-left: auto;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--hfc-yellow);
  color: #3a2a00;
  font-weight: 700;
  text-decoration: none;
}
.so-deals-home43 .home43-flash-viewall:hover { background: #f09b00; color: #3a2a00; }

/* ---- phone category tabs (same pill row, horizontally swipeable) --------- */
/* The row lives inside a full-bleed module, so the strip carries the 16px page
   gutter itself and scrolls inside it - the page never gains a scrollbar. */
.so-deals-home43 .home43-flash-mobile-tabs {
  display: none;
  margin: 0 0 16px;
  /* 16px page gutter on phones; grows with the row inset on tablets so the strip
     keeps the same left line as the section head. */
  padding: 0 calc(var(--home43-row-inset, 0px) + 16px);
}
.so-deals-home43 .home43-flash-mobile-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 0 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.so-deals-home43 .home43-flash-mobile-scroll::-webkit-scrollbar { display: none; }
.so-deals-home43 .home43-flash-mobile-scroll .home43-flash-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 15px;
}

/* ---- panels / swiper / controls ----------------------------------------- */
.so-deals-home43 .home43-flash-panel { display: none; }
.so-deals-home43 .home43-flash-panel.is-active { display: block; }
/* The row itself is styled by .home43-tour-module/.home43-has-pagination in
   layout43-theme.css (48px pagination clearance, 8px card gutters on phones),
   exactly like Popular Tours. */
.so-deals-home43 .home43-flash-empty {
  padding: 42px 20px;
  border: 1px dashed rgba(6, 97, 104, .25);
  border-radius: 24px;
  background: #fff;
  color: #346065;
  text-align: center;
  font-size: 16px;
}

/* ---- "promotion not started" notice (both switches off) ------------------ */
/* Replaces countdown + tabs + cards: the row keeps its head (so the section is
   still visible/findable) and states that the activity has not started yet. */
.so-deals-home43 .home43-flash-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
  padding: 28px 20px;
  border: 1px dashed rgba(6, 97, 104, .25);
  border-radius: 24px;
  background: #fff;
  color: #346065;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}
.so-deals-home43 .home43-flash-notice .bi {
  font-size: 22px;
  color: var(--hfc-yellow);
}
@media (max-width: 767px) {
  .so-deals-home43 .home43-flash-notice {
    padding: 20px 16px;
    font-size: 16px;
    line-height: 1.6;
  }
}

/* ---- controls / pagination / card: inherit the Popular Tours contract --- */
/* Row spacing (48px pagination clearance), the 56px circles and their hover,
   the dots position, the 30px card radius/shadow, .trv-content padding (30px),
   the overlay alphas and the card hover all come from layout43.css +
   .home43-tour-module in layout43-theme.css. Redefining them here made the
   Flash SALE row drift away from Popular Tours, so only flash-specific extras
   are declared below. */
.so-deals-home43 .home43-flash-promo-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  max-width: calc(100% - 28px);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(6, 97, 104, .92);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-deals-home43 .home43-tour-post-text { margin-top: 20px; text-align: center; }
/* ---- price hint (same behaviour as So Extra Slider) --------------------- */
.so-deals-home43 .trv-tour-price .trv-price-hint {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 4px;
  row-gap: 0;
  min-height: 16px;
  max-width: 100%;
  line-height: 16px;
  white-space: nowrap;
}
.so-deals-home43 .trv-tour-price .trv-price-hint .price-hint {
  margin: 0;
  color: #777;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
}
.so-deals-home43 .trv-tour-price .trv-price-hint.is-stacked {
  flex-direction: column;
  align-items: flex-start;
  column-gap: 0;
}
.so-deals-home43 .trv-tour-price .trv-price-hint .price-old {
  display: inline-block;
  height: auto;
  margin: 0;
  line-height: 16px;
  white-space: nowrap;
}
.so-deals-home43 .trv-tour-price .trv-price-hint.is-hint-only {
  flex: 0 0 100%;
  width: 100%;
}
@media (max-width: 1199px) {
  .so-deals-home43 .trv-content-head-section .trv-tour-price.has-price-hint { display: block !important; }
}

/* `layout43-theme.css` lifts the arrow row by 28px
   (`.home43-tour-controls-top { margin:-28px 0 24px }`) because Popular Tours has
   nothing but the section head above it.  This module puts its tab row (desktop)
   or its category select (phones) in exactly that gap, so the arrows landed ON
   that row - measured at 1440px: tabs bottom 13117 / arrows top 13115, and at
   390px: select bottom 16429 / arrows top 16417.  Keep the arrows under their
   own row instead of on top of it. */
body.layout-43 .home43-tour-module.so-deals-home43 .home43-tour-controls-top {
  margin-top: 0;
}

/* City strip on the tour cards.  Three sheets disagree: the vendor
   `.trv-popular-tour-st1 .trv-media .trv-tour-title` paints rgba(6,97,104,.31),
   `layout43.css` repaints rgba(6,97,104,.5) with a 0/6/1 selector (so the .8 in
   layout43-theme.css never wins) and only the <=639px bundle agreed on .8.  The
   .5 band is what made the label look punched out of the photo, and because the
   strip is full-width (unlike the small "1 Day" chip / sale badge, both .8) it
   dominated the card.  Repaint it at .8 for every width, loaded last so it beats
   the .5 sheet, and keep the label itself white on that band. */
/* specificity note: `layout43.css` repaints this strip with
   `body.layout-43:not(.mobilelayout-4) ...` (0/6/1), so mirror the two :not()
   guards to actually win the cascade - a bare .home43-tour-module selector is
   one class short and silently loses. */
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-tour-module .trv-popular-tour-st1 .trv-media .trv-tour-title,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-tour-module .trv-media .trv-tour-title,
body.layout-43:not(.mobilelayout-4):not(.mobilelayout-5) .home43-tour-module .trv-tour-duration {
  background: rgba(6, 97, 104, .8) !important;
  color: #fff !important;
}
body.layout-43 .home43-tour-module .trv-media .trv-tour-title .trv-title a,
body.layout-43 .home43-tour-module .trv-media .trv-tour-title .trv-title a i {
  color: #fff !important;
}

/* ---- card hover: identical motion to "Home 43 - Explore Latest News" ------ */
/* So Latest Blog lifts its media + info panels 6px with a soft shadow at
   >=992px.  Popular Tours (So Extra Slider) and Flash SALE (So Deals) share the
   same two-panel card, so mirror it instead of inventing a third effect.  The
   image keeps its own micro-zoom inside the overflow:hidden image link. */
@media (min-width: 992px) {
  body.layout-43 .home43-tour-module .trv-popular-tour-st1 .trv-media,
  body.layout-43 .home43-tour-module .trv-popular-tour-st1 .trv-content {
    transition: transform .35s cubic-bezier(.19, 1, .22, 1), box-shadow .35s ease;
  }
  body.layout-43 .home43-tour-module .trv-popular-tour-st1:hover .trv-media,
  body.layout-43 .home43-tour-module .trv-popular-tour-st1:hover .trv-content {
    box-shadow: 0 18px 28px rgba(0, 0, 0, .22);
    transform: translateY(-6px);
  }
  body.layout-43 .home43-tour-module .trv-popular-tour-st1:hover .home43-tour-primary-image {
    transform: scale(1.04);
  }
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .so-deals-home43 .section-head.trv-head-title-wrap .trv-head-title { font-size: 40px; }
}
@media (max-width: 767px) {
  .so-deals-home43 .section-head.trv-head-title-wrap .trv-head-title { font-size: 30px; }
  .so-deals-home43 .section-head.trv-head-title-wrap { margin-bottom: 20px; }
  .so-deals-home43 .home43-flash-tabs { display: none; }
  .so-deals-home43 .home43-flash-mobile-tabs { display: block; }
  /* Phones: the module is full-bleed (inset 0), so header controls carry the
     16px page gutter themselves - same line as the section head. */
  .so-deals-home43 .home43-flash-countdown { width: 100%; padding: 0 16px; }
  .so-deals-home43 .hfc-boxes { width: 100%; max-width: 360px; gap: 8px; }
  .so-deals-home43 .hfc-box { flex: 1 1 0; min-width: 0; padding: 16px 6px 10px; border-radius: 16px; }
  .so-deals-home43 .hfc-num { font-size: 32px; }
  .so-deals-home43 .hfc-unit { font-size: 10px; letter-spacing: .04em; margin-top: 8px; }
  .so-deals-home43 .hfc-label-row { font-size: 15px; }
  .so-deals-home43 .hfc-label-row .bi-alarm { font-size: 17px; }
  .so-deals-home43 .home43-flash-promo-label { left: 10px; bottom: 10px; font-size: 11px; }
}