/* ==========================================================================
   Custom frontend overrides
   Scope: homepage investment-plan carousel (tmpl/home.tpl, ".plans-list")
   Do not extend these rules to .plans-deposits, .box-modal-plan or any
   other plan display — this file only targets ".gc-plan-carousel".

   A note on specificity (read before adding !important):
   css/style.css and css/style-change.css both carry old, highly-specific
   selectors built on the full ancestor chain
   "section.header .header-plans .box-plans .plans-list[...]" (and, for the
   card itself, a *dormant* "...​.plans-list .slick-slide .plans-list_item"
   rule set from an unused compact-card layout that only started matching
   once Slick added the .slick-slide class onto our .gc-plan-slide
   elements — see the note above .gc-plan-carousel .plans-list_item
   below, and the DOM-structure note above .gc-plan-carousel
   .gc-plan-slide further down: .gc-plan-slide *is* .slick-slide, not
   its parent).
   A bare class selector like ".gc-plan-carousel ..." can't outrank those on
   specificity alone, so wherever this file needs to win over one of them it
   repeats that same full ancestor chain
   ("section.header .header-plans .box-plans .plans-list.gc-plan-carousel")
   so the two rules end up at EQUAL specificity — at that point the cascade
   falls back to source order, and since this file loads after both of
   those stylesheets, ours wins with no !important required. Only reach for
   !important where matching specificity genuinely isn't practical (see the
   ≤420px override at the bottom of this file for the one remaining case).
   Rules only need the long chain for the specific properties that actually
   collide with a legacy rule — everything else stays on the plain,
   shorter ".gc-plan-carousel ..." selector. */

/* ---- Pre-init fallback (no-JS / before Slick runs): a simple, safe
   single-row layout so the section never wraps into extra rows or causes
   layout shift while slick.min.js loads. ---- */
.gc-plan-carousel {
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 10px 0;
}

/* display/margin: style-change.css's "section.header .header-plans
   .box-plans .plans-list" rule (specificity 0,4,1) would otherwise beat
   the plain ".gc-plan-carousel" rule above and reintroduce the old block
   layout / -55px bleed. Matching its exact ancestor chain here brings us
   to equal specificity, and this file loading later wins the tie. */
section.header .header-plans .box-plans .plans-list.gc-plan-carousel {
  display: flex;
  margin: 0 -15px;
}

/* IMPORTANT — verified against the live DOM (getComputedStyle), not
   assumed: Slick does NOT wrap each card in a separate element. It adds
   "slick-slide slick-current slick-active" directly onto our existing
   .gc-plan-slide div — .gc-plan-slide and .slick-slide are literally the
   SAME element, never parent/child. An earlier version of this file
   assumed a separate Slick-created wrapper and set display:flex plus a
   height:100% on ".slick-slide"/".slick-slide > div" to fill it. Instead
   that turned .gc-plan-slide's three real children — .box-shield-garant,
   .plans-list_title, .plans-list_item — into a flex ROW: it squeezed the
   card down to ~60% of the slide's width (all the "narrow card" /
   "wrapping word-by-word" symptoms) and stretched the absolutely
   positioned shield badge to the full card height (the "shield escapes
   the card" symptom). Do not add display:flex or a height rule targeting
   ".slick-slide" or ".slick-slide > div" again — .gc-plan-slide must stay
   a plain block box so .plans-list_item, its only real in-flow child,
   naturally fills 100% of it. */
.gc-plan-carousel .gc-plan-slide {
  box-sizing: border-box;
  position: relative;
  outline: none;
  height: 100%;
  padding: 0 15px;
  /* pre-init flex-basis fallback; reset below once Slick sets its own
     inline slide width */
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

/* Once Slick takes over, let it manage slide sizing/positioning and drop
   our flex-basis fallback so the two don't fight (Slick sets its own
   inline width on this same element). */
section.header .header-plans .box-plans .plans-list.gc-plan-carousel.slick-initialized {
  display: block;
  overflow: visible;
  margin: 0 -15px;
}

.gc-plan-carousel.slick-initialized .gc-plan-slide {
  flex: none;
  max-width: none;
  width: auto;
}

.gc-plan-carousel .slick-list {
  overflow: hidden;
  margin: 0 15px;
}

.gc-plan-carousel .slick-track {
  display: flex;
  align-items: stretch;
}

/* ---- Card content: re-declare the existing look-and-feel so it survives
   the extra "plans-list_item" nesting inside .gc-plan-slide. Values below
   are ported as-is from the current (pre-carousel) grid styling in
   css/style-change.css — same colors, spacing and typography, just
   re-scoped to work through the carousel's DOM. ---- */
/* Package title, shown on the dark hero background just above the white
   card. .gc-plan-name is allowed to wrap to two lines for a long name
   without an unreadable font size; .gc-plan-duration is a smaller,
   always-one-line second line. In practice all seven names fit on one
   line at this card width (17px bold, ~329px available), so every
   title renders at a consistent 47px tall — verified live, not assumed.
   .box-shield-garant (below) is repositioned by that same fixed amount:
   see the note there for why. */
.gc-plan-carousel .plans-list_title {
  display: block;
  text-align: center;
  padding-bottom: 8px;
}

.gc-plan-carousel .plans-list_title .gc-plan-name {
  display: block;
  color: #f8f5ea;
  font-size: 17px;
  line-height: 1.15;
  font-weight: bold;
}

.gc-plan-carousel .plans-list_title .gc-plan-duration {
  display: block;
  color: rgba(248, 245, 234, 0.72);
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 3px;
  white-space: nowrap;
}

/* css/style.css positions this badge at "top: -23px" relative to
   .gc-plan-slide (verified live via getBoundingClientRect) — tuned for
   when .plans-list_title was empty, so -23px landed it right at the
   card's own top-right corner. Now .plans-list_title holds a real,
   measured 47px-tall title above the card, so the badge needs to clear
   that too: -23px + 47px = 24px keeps it in the same visual spot
   relative to the card itself (poking slightly above its top-right
   corner) instead of overlapping the title text. */
.gc-plan-carousel .box-shield-garant {
  top: 24px;
}

/* style.css / style-1.css ship a dormant "section.header .header-plans
   .box-plans .plans-list .slick-slide .plans-list_item" rule set
   (specificity 0,6,1) written for a different, compact 240px-tall card
   layout. It never matched anything before because .plans-list had no
   .slick-slide descendants — since .gc-plan-slide and .slick-slide are
   the same element (see note above), that dormant rule now structurally
   matches our cards too, so this rule repeats the same ancestor chain
   (see file-header note) to reach equal specificity and win on source
   order instead of stacking !important.

   width/max-width: .plans-list_item is the only in-flow child of
   .gc-plan-slide, so it already fills 100% by default block behavior —
   these are set explicitly anyway as a defensive, self-documenting
   guard against any future legacy width/max-width rule.

   No fixed/min height here: with the simplified field list (Plan Terms,
   Investment, Principal) content is short and consistent across all
   seven cards, and .slick-track's own flex/align-items:stretch (above)
   already equalizes every visible card to the tallest one in the row —
   an explicit floor is no longer needed. overflow stays visible so nothing
   is ever clipped if a plan name is unexpectedly long. */
.gc-plan-carousel .plans-list_item {
  flex-direction: column;
  overflow: visible;
  width: 100%;
  max-width: none;
  padding-right: 30px;
  padding-bottom: 0;
  background: url("../../images/plan-bg.jpeg") center center no-repeat, #fff;
  border-radius: 6px;
  box-shadow: 0px 21px 54px 0px rgba(113, 105, 100, 0.15);
}

section.header .header-plans .box-plans .plans-list.gc-plan-carousel .plans-list_item {
  position: relative;
  display: flex;
  height: 100%;
  padding-top: 139px;
  padding-left: 30px;
}

.gc-plan-carousel .plans-list_item > a {
  cursor: pointer;
  position: absolute;
  right: 58px;
  top: 112.5px;
  font-family: "Muller", sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f7ba32;
  line-height: 24px;
  font-size: 12px;
  z-index: 10;
}

/* left/top: the same dormant rule (see note above) also places this badge
   at left:0/top:106px for its compact layout; matching its ancestor chain
   here restores our left:28px/top:28px badge position without !important. */
section.header .header-plans .box-plans .plans-list.gc-plan-carousel .plans-list_item .box-percent {
  text-align: center;
  position: absolute;
  display: block;
  height: 104px;
  width: 104px;
  left: 28px;
  padding-top: 33px;
  top: 28px;
}

.gc-plan-carousel .plans-list_item .box-percent > i {
  position: absolute;
  left: -33px;
  top: -33px;
  height: 160px;
  width: 160px;
  display: block;
  transform: rotate(-40deg);
  background: url("../../images/round-rules.png") center center no-repeat;
}

.gc-plan-carousel .plans-list_item .box-percent > i.rotated {
  transform: rotate(320deg);
  transition: all 1.5s ease-in-out;
}

.gc-plan-carousel .plans-list_item .box-percent > i.rotated1 {
  transform: rotate(-400deg);
  transition: all 1.5s ease-in-out;
}

.gc-plan-carousel .plans-list_item .box-percent > i.focused {
  animation: anim-rotate-320 1.5s linear 0s infinite normal;
}

.gc-plan-carousel .plans-list_item .box-percent > i.poused {
  animation-play-state: paused;
}

.gc-plan-carousel .plans-list_item .box-percent span {
  display: block;
  color: #645f57;
  font-size: 40px;
  font-family: "Muller", sans-serif;
  font-weight: 200;
  line-height: 22px;
}

.gc-plan-carousel .plans-list_item .box-percent span small {
  font-size: 17px;
}

.gc-plan-carousel .plans-list_item .box-percent b {
  display: block;
  color: #f7b527;
  font-size: 11px;
  padding-right: 7px;
  font-weight: bold;
  letter-spacing: 0.24em;
  font-family: "Muller", sans-serif;
  text-transform: uppercase;
}

.gc-plan-carousel .plans-list_item .box-percent:before {
  content: '';
  display: block;
  position: absolute;
  height: 36px;
  width: 150px;
  left: 87px;
  top: 74px;
  background: url("../../images/plan-round-line.png") 0 0 no-repeat;
}

/* No fixed height/overflow:hidden here either — this list is what was
   actually getting truncated. It's a normal-flow block child of the new
   flex column above, so it simply takes the height its content needs.

   padding-bottom: 24px — measured live (getBoundingClientRect): the
   Invest Today button carries "margin-top: -23px" (see .box-bottom
   a.btn1 below), a decorative pull that lets it float slightly above
   .box-bottom's own gradient bar. The old fixed-height list design had
   enough natural slack below its last item that this never mattered;
   this list now sizes to its content with none, so the button's -23px
   pull reached 9px back up into the Principal field's text (measured:
   button top 1054px vs. text bottom 1063px). 24px of trailing space
   here cancels that pull and leaves a clean ~15px visible gap between
   the text and the button — comfortably inside the requested
   12–18px range. */
.gc-plan-carousel .plans-list_item > ul {
  height: auto;
  display: block;
  padding-top: 23px;
  padding-bottom: 24px;
  overflow: visible;
}

/* display only: the dormant rule sets this li to display:inline-block in
   a 3-column mini layout; matching its ancestor chain restores our
   single-column stacked list without !important.
   position/margin-bottom deliberately stay OFF this high-specificity
   selector and on the plain rule below — the dormant rule never sets
   position, so bundling it here served no purpose except to silently
   outrank "> ul > li.special { position: absolute }" below, which is
   exactly what forced the total-return badge out of its corner and into
   normal flow between cards. Lesson: only escalate the properties that
   actually collide with a legacy rule, nothing else. */
section.header .header-plans .box-plans .plans-list.gc-plan-carousel .plans-list_item > ul > li {
  display: block;
}

/* width: excludes li.special (the absolutely positioned total-return
   badge, further down) on purpose — it has no width of its own and is
   meant to size to its content; forcing width:100% here made it as wide
   as the list column while still anchored via right:70px, pushing its
   left edge out past the card's own left boundary. */
section.header .header-plans .box-plans .plans-list.gc-plan-carousel .plans-list_item > ul > li:not(.special) {
  width: 100%;
}

.gc-plan-carousel .plans-list_item > ul > li {
  position: relative;
  margin-bottom: 10px;
}

.gc-plan-carousel .plans-list_item > ul > li:before {
  content: '';
  display: block;
  position: absolute;
  height: 30px;
  width: 30px;
  background: url("../../images/subtitle-logo.png") center center no-repeat;
  background-size: auto 60%;
  top: -6px;
  margin-left: -15px;
}

section.header .header-plans .box-plans .plans-list.gc-plan-carousel .plans-list_item > ul > li > small {
  color: #a89b86;
  display: block;
  font-size: 14px;
}

section.header .header-plans .box-plans .plans-list.gc-plan-carousel .plans-list_item > ul > li span {
  display: block;
  color: #645f57;
  font-size: 16px;
  font-family: "Muller", sans-serif;
}

.gc-plan-carousel .plans-list_item > ul > li span small {
  font-size: 11px;
}

.gc-plan-carousel .plans-list_item > ul > li span b {
  font-weight: bold;
}

.gc-plan-carousel .plans-list_item > ul > li span b.special-b {
  color: #f9bb2a;
}

.gc-plan-carousel .plans-list_item > ul > li.special {
  position: absolute;
  right: 70px;
  top: 48px;
}

.gc-plan-carousel .plans-list_item > ul > li.special:before {
  display: none;
}

/* margin-top: auto pins this box itself to the bottom of the flex
   column above regardless of how tall the list content above it ends
   up being, and it lines up at the same position on every card once
   Slick stretches them to equal height. Note this only guarantees
   .box-bottom's own top edge stays clear of the list — its child button
   below carries its own negative margin-top and needed separate
   handling (see the ul's padding-bottom above) once it started reaching
   back up into the list. */
.gc-plan-carousel .plans-list_item .box-bottom {
  margin: auto -30px 0 -30px;
  height: 65px;
  background: url("../../images/plan-box-bottom-gradient.png") left top repeat-x;
  display: block;
  text-align: center;
  flex-shrink: 0;
}

/* Decorative: lets the button float slightly above .box-bottom's own
   gradient bar instead of sitting flush inside it. Kept as-is (matches
   the original, pre-carousel design) — the ul's padding-bottom above is
   what keeps this from reaching back into the list content now that the
   list has no fixed height providing slack of its own. */
.gc-plan-carousel .plans-list_item .box-bottom a.btn1 {
  margin-top: -23px;
}

.gc-plan-carousel .gc-plan-slide:hover .box-percent-round {
  animation: anim-rotate-320 1.5s linear 0s infinite normal;
}

/* ---- Arrows ----
   Verified live (via getBoundingClientRect on both buttons): when Slick
   is given custom prevArrow/nextArrow HTML (as js/scripts.js does here),
   it only ever adds its generic ".slick-arrow" class to them — it does
   NOT add ".slick-prev"/".slick-next". Positioning rules written against
   ".slick-prev"/".slick-next" therefore never matched either button, so
   both fell back to the same left:auto/right:auto static position and
   rendered on top of each other. The actual classes present are our own
   ".gc-plan-carousel-prev"/".gc-plan-carousel-next" (set via the
   prevArrow/nextArrow strings), so side positioning below targets those
   instead. Every rule here is written as ".gc-plan-carousel …" so it's
   more specific than css/slick-theme.css's plain ".slick-arrow" rules
   for other sliders on this site, and nothing here leaks to
   .plans-slider / .cert-slider. */
.gc-plan-carousel .slick-arrow {
  position: absolute;
  top: 50%;
  left: auto;
  right: auto;
  z-index: 20;
  width: 44px;
  height: 44px;
  margin: 0;
  margin-top: -22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #3a3128;
  color: #f7b527;
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease, transform 0.3s ease;
}

.gc-plan-carousel .slick-arrow:before {
  content: none;
  display: none;
}

.gc-plan-carousel .slick-arrow i {
  font-size: 16px;
  line-height: 44px;
}

.gc-plan-carousel .slick-arrow:hover,
.gc-plan-carousel .slick-arrow:focus {
  background: #f7b527;
  color: #3a3128;
  outline: none;
}

.gc-plan-carousel .slick-arrow:focus-visible {
  outline: 2px solid #f7b527;
  outline-offset: 3px;
}

.gc-plan-carousel .gc-plan-carousel-prev {
  left: -14px;
}

.gc-plan-carousel .gc-plan-carousel-next {
  right: -14px;
}

.gc-plan-carousel .slick-arrow.slick-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ---- Dots ---- */
.gc-plan-carousel .slick-dots {
  position: static;
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 0;
  text-align: center;
  line-height: 0;
}

.gc-plan-carousel .slick-dots li {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 4px;
}

.gc-plan-carousel .slick-dots li button {
  display: block;
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d9cdb8;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  cursor: pointer;
}

.gc-plan-carousel .slick-dots li button:before {
  display: none;
}

.gc-plan-carousel .slick-dots li.slick-active button {
  background: #f7b527;
}

/* Give the arrows room without disturbing the section's own padding */
.header-plans .box-plans {
  position: relative;
  padding: 0 46px;
}

/* style.css hard-codes "section.header .header-plans { height: 240px }"
   — a leftover sized for the old fixed-height cards. .header-plans is
   only ever used on the homepage (tmpl/home.tpl), so it's safe to correct
   here; matching the exact selector keeps specificity equal (0,2,1) and
   this file loading later wins the tie, no !important needed. */
section.header .header-plans {
  height: auto;
}

@media (max-width: 991px) {
  .gc-plan-carousel .gc-plan-slide {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 767px) {
  .gc-plan-carousel .gc-plan-slide {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .header-plans .box-plans {
    padding: 0 34px;
  }

  .gc-plan-carousel-prev {
    left: -6px;
  }

  .gc-plan-carousel-next {
    right: -6px;
  }
}

/* Guard against any accidental horizontal overflow on very narrow screens */
@media (max-width: 420px) {
  .gc-plan-carousel .plans-list_item {
    padding-left: 18px !important;
    padding-right: 18px;
  }

  .gc-plan-carousel .plans-list_item .box-bottom {
    margin-left: -18px;
    margin-right: -18px;
  }
}