/* =====================================================================
   KOHWAN — footer
   Built to the reference: a pale sheet with a misty mountain range across
   the top, two promoted cards, a rule, then Contact / Services / Newsletter
   / Visit us on, the payment partners, and a navy legal bar closing it.

   The range is the footer's own background, top-centred at full width; the
   artwork's lower half is the same pale grey, so it blends into the sheet
   and the padding below it is what the content clears.

   Loaded after style.css, so these rules win on source order rather than by
   fighting specificity. The old navy footer's class names are gone with it.
   ===================================================================== */
.kfootn {
  --f-ink:   #2e4755;                    /* headings, links            */
  --f-body:  rgba(46, 71, 85, .78);      /* copy                       */
  --f-rule:  rgba(46, 71, 85, .16);      /* hairlines                  */
  /* Matched to the foot of the artwork (sampled #F5F5F5) — that edge is the
     one that meets the sheet, so the join is invisible. The picture's own
     sky is white and carries the top. */
  /* Matched to the foot of the snow-wave artwork (sampled #EDF6FE). */
  --f-sheet: #EDF6FE;
  position: relative;
  /* The range sits across the top of a 1.69-wide picture whose lower body is
     flat grey. Full width, anchored to the top, so the peaks span the footer
     and the grey runs on into the sheet.

     v3 is v2 with its empty white sky cropped off the top — 260px of the
     2100x1500 original. That sky scaled with the viewport, so on a wide
     screen it opened a band of nothing a couple of hundred pixels deep
     between the reviews and the peaks. The clearance below is cut to match;
     v2 is still in the folder if the sky is ever wanted back. */
  /* footer-waves.jpg is images/IMAGES/footerbgimagelatest.png with its
     transparent top strip cropped off, saved as JPEG. The mountain
     artwork (footer-mountains-v3.jpg) is still in the folder. */
  background: var(--f-sheet) url('../images/footer/footer-waves.jpg') top center / 100% auto no-repeat;
  color: var(--f-body);
  font-family: var(--font-body);
}
/* The artwork is a wash painting: loose grey haze drifts above the ridgeline
   and, against the white band the footer meets, it read as a smudge hanging
   over the peaks. No curve separates it from the range — the haze and the
   mountains are the same grey — so it is dissolved by position instead: white
   at the very top of the footer, fading out by the time the ridges begin. The
   range now rises out of the page rather than starting in a fog. */
.kfootn::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(46px, 5.4vw, 96px);
  background: linear-gradient(to bottom,
    #FFFFFF 0%, rgba(255, 255, 255, .92) 34%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
/* Nothing to hide on a sheet with no artwork. */
:root[data-theme="dark"] .kfootn::before { display: none; }

/* Clears the range before the first card: the peaks occupy roughly the top
   third of the picture, which is itself as wide as the footer. */
.kfootn__inner { padding-top: clamp(220px, 34vw, 560px); padding-bottom: clamp(30px, 3.4vw, 52px); }

/* ------------------------- seasonal experiences -------------------------
   Two cards under one heading, laid out to the reference: a wide
   photograph over an underlined title and a couple of lines of copy. */

/* Later in the sheet than the .kfootn__inner rule above, so it wins: this
   is the clearance the range needs before the first card. Cut to match the
   cropped artwork — the peaks now finish about a tenth of the footer's width
   down instead of nearly a quarter. */
.kfootn__inner { padding-top: clamp(90px, 13.6vw, 225px); }
/* The snow waves end about 16% of the footer's width down — clear them. */
.kfootn__inner { padding-top: clamp(140px, calc(16.5vw + 40px), 320px); }

/* Roboto, the face the reference sets on this heading. */
.kfootn__lead {
  margin: 0 0 clamp(22px, 2.6vw, 38px);
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  color: var(--f-ink);
}
/* The cards' type follows the heading. */
.fpromo__title,
.fpromo__text { font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* A rail rather than a fixed pair: two cards to a view, as the reference
   has, with the rest a swipe or an arrow-press away. */
.kfootn__promorail { position: relative; }
.kfootn__promos {
  --promo-gap: clamp(24px, 6%, 92px);
  display: flex;
  gap: var(--promo-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-bottom: clamp(30px, 3.4vw, 56px);
}
.kfootn__promos::-webkit-scrollbar { display: none; }
.fpromo {
  /* Exactly two across: the single gap between them comes out of the width. */
  flex: 0 0 calc((100% - var(--promo-gap)) / 2);
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
}

.promo-step {
  position: absolute;
  top: 28%;
  z-index: 2;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--f-ink);
  color: #FAF8F3;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(46, 71, 85, .2);
  transition: opacity .2s var(--ease), background-color .2s var(--ease);
}
.promo-step svg { width: 18px; height: 18px; }
.promo-step:hover { background: #16263c; }
.promo-step--prev { left: clamp(-19px, -1.4vw, -8px); }
.promo-step--next { right: clamp(-19px, -1.4vw, -8px); }
/* Each arrow shows only while there is more to scroll to on its side. */
.kfootn__promorail.is-start .promo-step--prev,
.kfootn__promorail.is-end .promo-step--next { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 620px) {
  .kfootn__promos { --promo-gap: 26px; }
  .fpromo { flex: 0 0 100%; }
  .promo-step { display: none; }
}
.fpromo__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(46, 71, 85, .06);
}
.fpromo__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.fpromo:hover .fpromo__media img { transform: scale(1.04); }
/* Centred and underlined, as in the reference. */
.fpromo__title {
  display: block;
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: clamp(1.02rem, 1.25vw, 1.25rem);
  font-weight: 700;
  text-align: center;
  color: var(--f-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.fpromo__text {
  display: block;
  margin-top: clamp(12px, 1.4vw, 18px);
  padding-inline: clamp(0px, 2%, 26px);
  font-size: clamp(.86rem, .98vw, .96rem);
  line-height: 1.65;
  color: var(--f-body);
}
@media (max-width: 620px) {
  .kfootn__promos { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

.kfootn__rule {
  height: 0;
  margin: 0 0 clamp(26px, 3vw, 48px);
  border: 0;
  border-top: 1px solid var(--f-rule);
}

/* ------------------------------- columns ------------------------------- */
.kfootn__cols {
  display: grid;
  /* Contact carries the long lines (email, address), so it is the wider one. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
}
.fcol__h {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--f-rule);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f-ink);
}

/* Contact: two solid buttons, label left and glyph right. */
.fbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 9px 12px;
  border: 0;
  border-radius: 2px;
  background: var(--f-ink);
  color: #FAF8F3;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.fbtn:hover { background: #16263c; }
.fbtn__ic { display: grid; place-items: center; flex: none; width: 17px; height: 17px; }
.fbtn__ic svg { width: 100%; height: 100%; }

.fcontact { margin: 14px 0 0; padding: 0; list-style: none; }
.fcontact li + li { margin-top: 7px; }
.fcontact a { font-size: .8rem; color: var(--f-body); text-decoration: none; }
.fcontact a:hover { color: var(--f-ink); text-decoration: underline; }
.fcontact__addr { max-width: 30ch; font-size: .8rem; line-height: 1.5; color: var(--f-body); }

/* The Support menu opens the contact column. Its own stylesheet centres the
   button; here it lines up with the heading and the lines below it. */
.fcol > .tooltip-wrapper { margin-bottom: 16px; }
.fcol > .tooltip-wrapper > .tooltip-container { justify-content: flex-start; margin: 0; padding: 0; }

/* Contact: a mark before each line, and the numbers on one line. */
.fcontact--icons li { display: flex; align-items: flex-start; gap: 9px; }
.fcontact--icons svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--f-ink); opacity: .8; }
.fcontact--icons li + li { margin-top: 10px; }
.fcontact--icons a { font-size: .8rem; }
/* A long address breaks after the "@" and stays inside its own column
   instead of running under the next one. */
.fcontact--icons li > :not(svg) { min-width: 0; }
.fcontact__mail { overflow-wrap: anywhere; }
/* With the sidebar open the column is narrowest here; a touch smaller keeps
   the part before the "@" on one line. */
@media (min-width: 1100px) and (max-width: 1199px) {
  .fcontact--icons .fcontact__mail { font-size: .74rem; }
}
.fcontact__phones span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.fcontact__phones i { font-style: normal; color: var(--f-rule); }
.fcontact--icons .fcontact__addr { max-width: 34ch; }
.fcontact--icons .fcontact__addr span { font-size: .8rem; line-height: 1.5; }

/* Services: a plain index. */
.flinks { margin: 0; padding: 0; list-style: none; }
.flinks li + li { margin-top: 9px; }
.flinks a {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--f-body);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.flinks a:hover { color: var(--f-ink); text-decoration: underline; }

/* Newsletter: a line of copy, the field, then the solid button. */
.fnote { margin: 0 0 12px; font-size: .8rem; line-height: 1.55; }
.fnews { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fnews input {
  width: 100%;
  max-width: 260px;
  padding: 9px 11px;
  border: 1px solid var(--f-rule);
  border-radius: 2px;
  background: #FAF8F3;
  font: inherit;
  font-size: .8rem;
  color: var(--f-ink);
  outline: none;
}
.fnews input:focus { border-color: var(--f-ink); }
.fnews input::placeholder { color: rgba(46, 71, 85, .45); }
.fnews button {
  padding: 9px 14px;
  border: 0;
  border-radius: 2px;
  background: var(--f-ink);
  color: #FAF8F3;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.fnews button:hover { background: #16263c; }
/* Same width as the field above it, so the two line up; on a narrow column
   the label wraps rather than pushing the button into the next column. */
.fnews button { width: 100%; max-width: 260px; justify-content: space-between; text-align: left; }
.fnews button .kx-btn__label { white-space: normal; }
.fnews button:disabled { opacity: .6; cursor: default; }
.fnews__msg { margin: 10px 0 0; font-size: .78rem; display: none; }
.fnews__msg.is-ok  { display: block; color: var(--f-ink); }
.fnews__msg.is-err { display: block; color: #8a2b2b; }

/* Visit us on: round marks, five to a row as in the reference. */
.fsocial { display: flex; flex-wrap: wrap; gap: 9px; max-width: 200px; }
.fsocial a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--f-ink);
  color: #FAF8F3;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.fsocial a:hover { background: #16263c; transform: translateY(-1px); }
.fsocial svg { width: 15px; height: 15px; }

/* ---------------------------- payment partners ---------------------------- */
.kfootn__partners { margin-top: clamp(30px, 3.4vw, 54px); }
.kfootn__partners .fcol__h { border-bottom: 0; padding-bottom: 0; margin-bottom: 18px; }
.fpartners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* With no plates behind the marks, the gap is the only thing separating
     one from the next, so it carries more of the spacing. */
  gap: clamp(20px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each method is its own lockup, straight on the sheet with no plate behind
   it: the symbol, then the brand name beside it where the artwork is a
   symbol rather than a finished wordmark (Visa and UPI already carry their
   own lettering, so those stand alone). */
.fpartner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
}
/* Every mark is fitted into the same box rather than matched on height.
   Matching heights is what made the row look irregular: at one height a long
   wordmark runs ~90px wide while a square glyph is ~22px. Fitted to a shared
   box, each mark is scaled down until it fits — wide ones by their width,
   square ones by their height — so the row reads evenly. */
.fpartner img {
  display: block;
  width: 64px;
  height: 26px;
  object-fit: contain;
  /* Centred, not left-aligned: a narrow mark left-aligned in a wide box
     leaves dead space on its right, which reads as an uneven gap. */
  object-position: center;
}
/* A mark with its name beside it drops the fixed box and shrink-wraps: the
   Mastercard circles are ~40px in a 64px box, and centring them left a dozen
   pixels of dead space between the mark and the word. */
.fpartner--named img { width: auto; max-width: 64px; }
/* Razorpay's lockup is the widest artwork here, so inside the shared box it
   is held by its width and comes out shorter than the rest. A slightly
   larger box levels its height with the other wordmarks. */
.fpartner--razorpay img { width: 84px; height: 28px; }
.fpartner span {
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1;
  color: var(--f-ink);
  white-space: nowrap;
}
/* Dark theme only: navy and black marks would disappear against a dark
   sheet, so there they keep a small light plate. */
:root[data-theme="dark"] .fpartner {
  height: auto;
  padding: 6px 10px;
  border-radius: 5px;
  background: #FAF8F3;
}
:root[data-theme="dark"] .fpartner span { color: rgba(46, 71, 85, .62); }

/* -------------------------------- legal bar -------------------------------- */
.kfootn__legal { margin-top: clamp(26px, 3vw, 46px); background: var(--f-ink); }
.kfootn__legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-block: 13px;
  font-size: .74rem;
  color: rgba(250, 248, 243, .86);
}
.kfootn__legal-inner i { font-style: normal; color: rgba(250, 248, 243, .38); }
.kfootn__legal-inner a { color: rgba(250, 248, 243, .86); text-decoration: none; }
.kfootn__legal-inner a:hover { color: #FAF8F3; text-decoration: underline; }

/* --------------------------------- dark theme --------------------------------- */
:root[data-theme="dark"] .kfootn {
  --f-ink:   #FAF8F3;
  --f-body:  rgba(250, 248, 243, .78);
  --f-rule:  rgba(250, 248, 243, .16);
  --f-sheet: #16263c;
  /* The artwork is drawn on pale grey, so it cannot sit on a dark sheet. */
  background-image: none;
}
:root[data-theme="dark"] .kfootn__inner { padding-top: clamp(40px, 5vw, 72px); }
:root[data-theme="dark"] .fbtn,
:root[data-theme="dark"] .fnews button,
:root[data-theme="dark"] .fsocial a { background: rgba(250, 248, 243, .12); color: #FAF8F3; }
:root[data-theme="dark"] .fbtn:hover,
:root[data-theme="dark"] .fnews button:hover,
:root[data-theme="dark"] .fsocial a:hover { background: rgba(250, 248, 243, .2); }
:root[data-theme="dark"] .fnews input { background: rgba(250, 248, 243, .06); color: #FAF8F3; }
:root[data-theme="dark"] .kfootn__legal { background: #0f1b2c; }

/* ================================= responsive ================================= */
@media (max-width: 900px) {
  .kfootn__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .kfootn { background-size: 150% auto; }
  /* The artwork is blown up to 150% here, so its peaks finish proportionally
     further down. */
  .kfootn__inner { padding-top: clamp(94px, calc(25vw + 24px), 244px); }
}
@media (max-width: 620px) {
  .kfootn__promos { grid-template-columns: minmax(0, 320px); }
  .kfootn__cols { grid-template-columns: 1fr; }
  .fsocial { max-width: none; }
  .kfootn__legal-inner { justify-content: flex-start; gap: 8px; }
  /* The FAQ link is left out of the legal bar on a phone. */
  .kfootn__legal-faq { display: none; }

  /* Payment partners on a phone: one line, every mark the same height, and
     the space shared out evenly so the row starts and ends flush with the
     column. At desktop size the five need ~480px and broke into two uneven
     rows on a 360px screen. */
  .kfootn__partners .fcol__h { margin-bottom: 14px; }
  .fpartners {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
    /* On a wider phone the even spacing would stretch into wide gaps; held
       to this width the row stays a compact strip under its heading. */
    max-width: 340px;
  }
  .fpartner {
    flex: 0 1 auto;
    min-width: 0;
    height: 20px;
    gap: 0;
  }
  .fpartner img,
  .fpartner--named img,
  .fpartner--razorpay img {
    width: auto;
    max-width: 100%;
    height: 17px;
  }
  /* The widest lockup is held a touch taller so it does not read as smaller
     than the rest once it is scaled to fit. */
  .fpartner--razorpay img { height: 19px; }
  /* Mastercard shows its circles alone here; the word stays for screen
     readers, since the image beside it is marked decorative. */
  .fpartner--named span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  :root[data-theme="dark"] .fpartner { padding: 4px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .fbtn, .fnews button, .fsocial a, .kframes__step { transition: none; }
}