/* ===== TripTea — Site footer =============================================
   Figma desktop node: 710:39977 (Footer inside 1920-main)
   Figma mobile  node: 741:47840 (Footer inside 390-main)

   Desktop: width 1920, padding 40 104, column gap 32 row, column heading->list
   gap 24/16. Bottom row: padding-top 33, 1px top border, copyright left,
   payments right.
   Mobile (≤768): padding 40 16, layout collapses to single-column + two-by-two
   nav grid per Figma layout_WRU6AT (row gap 32 between nav pairs).
*/

.tt-footer {
  background: #FFFFFF;
  border-top: 1px solid #EAEAEA;
  padding: 40px 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "cpsp";
  color: #2B2B2B;
}

/* Break out of bootstrap .container so the footer fills the full viewport. */
.tt-footer--breakout {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.tt-footer__inner {
  /* Figma 1920 desktop with padding 40 104 → inner = 1712. Cap below so
     smaller desktops keep side gutters. Section gap 48 between main columns
     and the bottom (copyright + payments) bar — matches Figma section.gap. */
  width: min(1712px, 100% - 32px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.tt-footer *, .tt-footer *::before, .tt-footer *::after {
  box-sizing: border-box;
}

/* ===== Top main row ===================================================== */

.tt-footer__main {
  display: grid;
  /* Figma desktop tracks: brand 489.59 + 4×273.6 + 4 gaps of 32 = 1712 (inner).
     We use fr units so the grid can shrink on tablets but keep the same ratio. */
  grid-template-columns:
    1.79fr  /* brand + address + socials  ~489.59 */
    1fr     /* Каталог                    ~273.60 */
    1fr     /* Сервіс                     ~273.60 */
    1fr     /* Контакти                   ~273.60 */
    1fr;    /* Робочий час                ~273.60 */
  gap: 32px;
  align-items: flex-start;
}

.tt-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.tt-footer__col--brand {
  gap: 24px;
}

/* ===== Brand ============================================================
   Reuses the same SVG asset as the header (logo.svg) at footer-scale.
   Figma footer brand box is 92.3×39 — logo.svg has the same 2.37:1 aspect
   ratio, so scaling by height alone keeps every pixel proportional. */

.tt-footer__brand {
  display: inline-flex;
  text-decoration: none;
  width: max-content;
}
.tt-footer__brand:hover { text-decoration: none; }

.tt-footer__brand-img {
  display: block;
  height: 39px;
  width: auto;
}

.tt-footer__address {
  margin: 0;
  font-family: 'Inter', 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #6B6B6B;
}

/* ===== Socials ========================================================== */

.tt-footer__socials {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 16px;
}

/* Social icons are self-contained 40×40 SVGs (Figma supplies the cream circle +
   dark-brown ink path). The wrapper is just an interaction surface — no own bg. */
.tt-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.tt-footer__social:hover {
  transform: translateY(-1px);
  opacity: 0.85;
  text-decoration: none;
}
.tt-footer__social svg { display: block; }

/* ===== Column headings (Каталог / Сервіс / Контакти / Робочий час) ===== */

.tt-footer__heading {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  color: #2B2B2B;
}

/* ===== Catalog / Service link lists ===================================== */

.tt-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-footer__link {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #6B6B6B;
  text-decoration: none;
  transition: color 0.15s ease;
}
/* Hover (any link): Tea Brown + underline. */
.tt-footer__link:hover {
  color: #8B5E3C;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

/* Active = the link points to the page the user is currently on.
   Default state stays gray + underlined. */
.tt-footer__link--active {
  color: #6B6B6B;
  text-decoration: underline;
}
/* Active + hover → Tea Brown (still underlined). */
.tt-footer__link--active:hover {
  color: #8B5E3C;
  text-decoration: underline;
}

/* ===== Contacts (phones + email) ======================================== */

.tt-footer__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-footer__contacts li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tt-footer__contacts a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #6B6B6B;
  text-decoration: none;
  transition: color 0.15s ease;
}
.tt-footer__contacts a:hover {
  color: #8B5E3C;
  text-decoration: none;
}

.tt-footer__icon {
  flex: 0 0 20px;
  color: #8B5E3C;
}
.tt-footer__icon--brown { color: #8B5E3C; }

/* ===== Working hours ==================================================== */

.tt-footer__week {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Day buttons — clickable to switch shown hours. Reset native button chrome
   so they look like plain text spans. */
.tt-footer__day {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #6B6B6B;
  min-width: 24px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
}
.tt-footer__day:focus-visible {
  outline: 2px solid #8B5E3C;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hover (non-today): Tea Brown text, NO underline */
.tt-footer__day:not(.tt-footer__day--today):hover {
  color: #8B5E3C;
  text-decoration: none;
}

/* Active (clicked, non-today): gray text + underline */
.tt-footer__day--active:not(.tt-footer__day--today) {
  color: #6B6B6B;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
/* Active + hover (non-today): Tea Brown + underline */
.tt-footer__day--active:not(.tt-footer__day--today):hover {
  color: #8B5E3C;
  text-decoration: underline;
}

.tt-footer__day--off {
  /* Non-working day — Figma uses Neutral Light Gray (#EAEAEA) */
  color: #EAEAEA;
}
/* Off day still gets the hover/active colour treatment so user gets feedback */
.tt-footer__day--off:not(.tt-footer__day--today):hover { color: #8B5E3C; }

.tt-footer__day--today {
  background: #8B5E3C;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 2px 4px;
  min-width: 28px;
  cursor: default;
}
/* Today never reacts to hover — it's permanently highlighted. */
.tt-footer__day--today:hover { color: #FFFFFF; background: #8B5E3C; }

.tt-footer__today {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8B5E3C;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
}

/* ===== Bottom row (copyright + payments) ================================ */

.tt-footer__bottom {
  border-top: 1px solid #EAEAEA;
  padding-top: 33px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.tt-footer__copy {
  margin: 0;
  font-family: 'Chivo', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #A1A1A1;
}

.tt-footer__payments {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.tt-footer__payments img {
  display: block;
  height: 24px;
  width: auto;
  object-fit: contain;
}

/* ===== Tablet / narrow desktop ========================================== */
@media (max-width: 1100px) and (min-width: 769px) {
  .tt-footer__main {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
  .tt-footer__col--brand { grid-column: 1 / -1; }
}

/* ===== Mobile (Figma 390 node 741:47840) ================================
   Figma mobile layout:
     row 1: Brand block (full width — logo + address + socials)
     row 2: Каталог | Сервіс         (two equal columns)
     row 3: Контакти | Робочий час   (two equal columns)
*/
@media (max-width: 768px) {
  .tt-footer {
    padding: 40px 0;
  }
  .tt-footer__inner {
    width: 100%;
    padding: 0 16px;
    /* Figma mobile section.gap = 24 between main grid and bottom row. */
    gap: 24px;
  }

  .tt-footer__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    /* Figma mobile content-block.gap = 32 between brand row, catalog/service
       pair, and contacts/hours pair. */
    row-gap: 32px;
    align-items: start;
  }

  /* Brand spans both columns. Каталог/Сервіс/Контакти/Робочий час each take
     one cell — they line up into 2×2 pairs naturally because order in HTML is
     catalog, service, contacts, hours. */
  .tt-footer__col--brand { grid-column: 1 / -1; }
  .tt-footer__col          { min-width: 0; }

  /* Bottom row stacks centred on mobile */
  .tt-footer__bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .tt-footer__copy {
    text-align: center;
  }
}