/* ------------------------------------------------------------- footer ----- */
/* The site footer (_FooterHome.cshtml), on every page since the dark _Footer was retired.
   Its own file, not homepage.css, because /search has Layout = null and links its own
   stylesheets; it links this one. The hp- prefix is kept from when it was homepage-only. */

.hp-foot {
  box-sizing: border-box;
  margin-top: 80px;
  border-top: 1px solid #E5E7EB;
  /* No background of its own: body is bg-gray-50, and the design separates the
     footer from the page with the hairline above it, not with a colour change. */
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
}

.hp-foot * { box-sizing: border-box; }

.hp-foot__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 52px 32px 40px;
}

.hp-foot__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

.hp-foot__logo { display: block; height: 28px; width: auto; }

.hp-foot__blurb {
  margin: 16px 0 0;
  max-width: 280px;
  font: 400 13.5px/1.6 Inter, sans-serif;
  color: #6B7280;
}

/* Real contact details, kept from the dark footer — the design's brand column
   carried social icons, but Hotely has no accounts to link yet. */
.hp-foot__contact {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 20px;
  font-style: normal;
}

.hp-foot__contact-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font: 400 13.5px/1.55 Inter, sans-serif;
  color: #6B7280;
}

.hp-foot__contact-row svg { flex: none; margin-top: 2px; color: #9CA3AF; }
.hp-foot__contact-row a { color: #6B7280; text-decoration: none; transition: color .15s ease; }
.hp-foot__contact-row a:hover { color: #087C8F; }

.hp-foot__col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* Sentence case, not the design's all-caps: only the first letter is
   capitalised, matching the links beneath each heading. */
.hp-foot__head {
  font: 600 13px Inter, sans-serif;
  letter-spacing: -.005em;
  color: #111827;
  margin-bottom: 3px;
}

.hp-foot__link {
  font: 400 13.5px Inter, sans-serif;
  color: #6B7280;
  text-decoration: none;
  transition: color .15s ease;
}

.hp-foot__link:hover { color: #087C8F; }

/* "Cookie settings" opens the consent panel; it is a button, so it must look like the links. */
button.hp-foot__link {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.hp-foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid #F3F4F6;
}

.hp-foot__copy {
  font: 400 13px Inter, sans-serif;
  color: #9CA3AF;
}

.hp-foot__pay {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hp-foot__pay-label {
  font: 400 12.5px Inter, sans-serif;
  color: #9CA3AF;
}

.hp-foot__cards {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hp-foot__card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 6px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  flex: none;
}

.hp-foot__card img { height: 12px; width: auto; object-fit: contain; }

@media (max-width: 900px) {
  .hp-foot__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .hp-foot { margin-top: 56px; }
  .hp-foot__inner { padding: 40px 20px 32px; }
  .hp-foot__cols { grid-template-columns: 1fr; gap: 32px; }
  .hp-foot__blurb { max-width: none; }
  .hp-foot__bar {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }
  /* Centred under the rule on a phone, like booking.com; left-aligned it looked unfinished (Nadav, 2026-10-15). */
  .hp-foot__pay,
  .hp-foot__cards { justify-content: center; }
  /* currency.css pins the button beside the copyright with an auto margin; on a phone it sits on its own row. */
  .hp-foot .hp-foot__bar .hcur-trigger--footer { margin: 0; }
}

/* Auth pages (/signin, /find-booking ...) paint a dark photo ground on the body, and this
   footer has no background of its own, so it read as grey on navy. Give it the light ground
   it was designed on, flush under the shell. */
body.hau-page .hp-foot {
  margin-top: 0;
  background: #fff;
}