/* ==========================================================
   ES HOMES — COMPREHENSIVE DESIGN FIXES
   Loaded after all other stylesheets to patch inconsistencies,
   missing components, and mobile-responsiveness gaps.
   ========================================================== */

/* ----------------------------------------------------------
   1. APARTMENT CARD — unify conflicting styles across pages
   ---------------------------------------------------------- */

/* Remove the legacy border-radius from .apartment-card.gl-card
   (gl-card sets --radius-lg = 18px, but _pages.css sets --radius-xl = 28px)
   Use a consistent, moderate radius everywhere. */
.apartment-card {
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Make sure the image wrapper on index cards uses the same aspect-ratio */
.apartment-card .apartment-image,
.apartment-card .apartment-card__image {
  position: relative;
  overflow: hidden;
  border-radius: 0;           /* card handles outer radius */
  aspect-ratio: 4 / 3;
  height: auto !important;    /* override the old 250px fixed height */
  flex-shrink: 0;
}

.apartment-card .apartment-image img,
.apartment-card .apartment-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-smooth);
}

.apartment-card:hover .apartment-image img,
.apartment-card:hover .apartment-card__image img {
  transform: scale(1.08);
}

/* Body padding — consistent across index / apartments page */
.apartment-card .apartment-content,
.apartment-card .apartment-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Title */
.apartment-card .apartment-title,
.apartment-card .apartment-card__title {
  font-family: var(--font-display);
  font-size: var(--text-scale-4);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}

/* Meta row */
.apartment-card .apartment-meta,
.apartment-card .apartment-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid rgba(26,46,85,0.08);
  color: var(--color-ink-soft);
  font-size: var(--text-scale-0);
  font-weight: 500;
}
.apartment-card .apartment-meta i,
.apartment-card .apartment-card__meta i {
  color: var(--color-gold);
  margin-right: 4px;
}

/* Description */
.apartment-card .apartment-description,
.apartment-card .apartment-card__desc {
  color: var(--color-ink-soft);
  line-height: var(--line-relaxed);
  margin: 0 0 var(--space-5);
  font-size: var(--text-scale-1);
  flex: 1;
}

/* Footer actions */
.apartment-card .apartment-actions,
.apartment-card .apartment-card__foot {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
}

/* Fix ::after pseudo (gold bottom bar) — ensure it doesn't break layout */
.apartment-card.gl-card::after {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ----------------------------------------------------------
   2. MISSING BUTTON VARIANTS
   ---------------------------------------------------------- */

/* btn-navy — used in index.html and about.html */
.btn-navy {
  background: var(--color-primary-dark);
  color: var(--color-bg-warm);
  border: 1.5px solid var(--color-primary-dark);
  border-radius: var(--radius-pill);
}
.btn-navy:hover {
  background: var(--color-primary);
  color: var(--color-bg-warm);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -18px rgba(11,30,63,0.7);
}

/* btn-ghost-navy — used in index.html */
.btn-ghost-navy {
  background: transparent;
  color: var(--color-primary-dark);
  border: 1.5px solid rgba(11,30,63,0.25);
  border-radius: var(--radius-pill);
}
.btn-ghost-navy:hover {
  background: var(--color-primary-dark);
  color: var(--color-bg-warm);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
}

/* btn-ghost-white — used in index.html hero & CTA */
.btn-ghost-white {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-pill);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.85);
  color: #fff;
}

/* btn-lg — larger size variant */
.btn-lg {
  padding: 18px 34px;
  font-size: 1rem;
}

/* btn-shine — shine sweep effect (already handled for btn-primary, add to btn-shine) */
.btn-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: skewX(-18deg);
  transition: left var(--duration-lg) var(--ease-io);
  z-index: -1;
}
.btn-shine:hover::before {
  left: 120%;
}

/* btn-block — full width */
.btn-block {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ----------------------------------------------------------
   3. FOOTER — fix missing utility class aliases
   ---------------------------------------------------------- */

/* The templates use .gl-footer__links / .gl-footer__contacts / .gl-footer__blurb
   / .gl-footer__socials / .gl-footer__social — map them to the actual styles */

.gl-footer__links,
.gl-footer__contacts {
  list-style: none;
  padding: 0;
  margin: 0;
}
.gl-footer__links li + li,
.gl-footer__contacts li + li {
  margin-top: 10px;
}
.gl-footer__links a {
  color: rgba(246,243,237,0.75);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--duration-sm), transform var(--duration-sm);
}
.gl-footer__links a:hover {
  color: var(--color-gold-light);
  transform: translateX(2px);
}
.gl-footer__contacts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(246,243,237,0.75);
  font-size: var(--text-scale-1);
  line-height: 1.55;
}
.gl-footer__contacts li i {
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px;
  text-align: center;
}
.gl-footer__contacts a {
  color: rgba(246,243,237,0.75);
  transition: color var(--duration-sm);
}
.gl-footer__contacts a:hover {
  color: var(--color-gold-light);
}
.gl-footer__blurb {
  color: rgba(246,243,237,0.70);
  max-width: 32ch;
  margin-top: 14px;
  line-height: 1.7;
  font-size: var(--text-scale-1);
}
/* Social icons in footer */
.gl-footer__socials {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.gl-footer__social {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(246,243,237,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background var(--duration-sm), transform var(--duration-sm) var(--ease-spring), color var(--duration-sm);
}
.gl-footer__social:hover {
  background: var(--color-gold);
  color: #1C1203;
  transform: translateY(-3px) rotate(-3deg);
  border-color: var(--color-gold);
}
.gl-footer__title {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.1rem;
  margin: 0 0 22px;
  position: relative;
  padding-bottom: 10px;
}
.gl-footer__title::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 44px; height: 2px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
  border-radius: 2px;
}
.gl-footer__address {
  align-items: flex-start !important;
}
.gl-footer__fine {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: rgba(246,243,237,0.55);
}

/* ----------------------------------------------------------
   4. GLASS INPUT ICON (missing .gl-input-icon — used in forms)
   ---------------------------------------------------------- */
.gl-input-icon {
  position: relative;
}
.gl-input-icon > i:first-child {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gold);
  pointer-events: none;
  z-index: 1;
}
.gl-input-icon .gl-input {
  padding-left: 44px;
}
.gl-field__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
  margin-bottom: 6px;
}

/* ----------------------------------------------------------
   5. PAGE BANNER — fix invalid clamp() with single arg
   ---------------------------------------------------------- */
.pg-pagebanner__inner {
  width: 100%;
  padding-block: 160px 80px; /* was clamp(140px) — invalid */
  text-align: center;
}

/* ----------------------------------------------------------
   6. MOBILE PANEL — ensure it slides correctly,
      and the backdrop opacity works
   ---------------------------------------------------------- */
.gl-mobile-backdrop[hidden]    { display: none !important; }
.gl-mobile-panel[hidden]       { display: block !important; transform: translateX(100%); }
body.gl-mobile-open .gl-mobile-backdrop { display: block !important; opacity: 1; pointer-events: auto; }
body.gl-mobile-open .gl-mobile-panel    { transform: translateX(0) !important; }

/* ----------------------------------------------------------
   7. RADIUS — --radius-2xl not defined, define it
   ---------------------------------------------------------- */
:root {
  --radius-2xl:   40px;
  --line-loose:   1.85;
}

/* ----------------------------------------------------------
   8. GLOBAL MOBILE RESPONSIVENESS GAPS
   ---------------------------------------------------------- */

/* ---- 8a. Hero section on mobile ---- */
@media (max-width: 720px) {
  .pg-hero__inner {
    grid-template-columns: 1fr;
    padding-top: 100px;
    gap: var(--space-8);
  }
  .pg-hero__booking {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
  }
  .pg-hero__title {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
  }
  .pg-hero__copy {
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .pg-hero__actions {
    flex-direction: column;
    width: 100%;
  }
  .pg-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .pg-hero__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 8b. Feature strip ---- */
@media (max-width: 540px) {
  .gl-feature-strip {
    grid-template-columns: 1fr;
  }
}

/* ---- 8c. About collage ---- */
@media (max-width: 720px) {
  .pg-about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .pg-collage {
    max-width: 100%;
    aspect-ratio: 4 / 3.5;
  }
}

/* ---- 8d. Apartments grid ---- */
@media (max-width: 1080px) {
  .pg-apartments__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .pg-apartments__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 8e. Amenities ---- */
@media (max-width: 1080px) {
  .pg-amenities__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .pg-amenities__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 8f. Gallery grid ---- */
@media (max-width: 720px) {
  .pg-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
    gap: var(--space-3);
  }
}
@media (max-width: 420px) {
  .pg-gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
  }
  .pg-gallery__item--wide,
  .pg-gallery__item--tall { grid-column: span 1; grid-row: span 1; }
}

/* ---- 8g. Testimonials ---- */
@media (max-width: 1080px) {
  .pg-testimonials__grid {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-inline: auto;
  }
  .pg-testimonial--feature { transform: none; }
}
@media (max-width: 640px) {
  .pg-testimonials__grid { max-width: 100%; }
}

/* ---- 8h. CTA card ---- */
@media (max-width: 900px) {
  .pg-cta__card {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }
  .pg-cta__actions {
    justify-self: center;
    flex-direction: row;
    max-width: 100%;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .pg-cta__actions {
    flex-direction: column;
    width: 100%;
  }
  .pg-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- 8i. Footer grid ---- */
@media (max-width: 992px) {
  .gl-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}
@media (max-width: 560px) {
  .gl-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .gl-footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }
  .gl-footer__fine {
    justify-content: center;
  }
}

/* ----------------------------------------------------------
   9. INTERIOR PAGES — Banner, Contact, Booking mobile
   ---------------------------------------------------------- */

/* ---- 9a. Page banner inner ---- */
@media (max-width: 900px) {
  .pg-pagebanner__inner {
    padding-block: 140px 60px;
  }
}
@media (max-width: 600px) {
  .pg-pagebanner__inner {
    padding-block: 120px 48px;
  }
  .pg-pagebanner__title {
    font-size: clamp(1.7rem, 6.5vw, 2.4rem);
  }
  .pg-pagebanner__sub {
    font-size: var(--text-scale-2);
  }
}

/* ---- 9b. Filter bar ---- */
@media (max-width: 720px) {
  .pg-filterbar {
    margin-top: -32px;
  }
  .pg-filterbar__card {
    padding: var(--space-6);
  }
  .pg-filterbar__form {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .pg-filterbar__submit {
    width: 100%;
  }
  .pg-filterbar__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ---- 9c. About page story grid ---- */
@media (max-width: 1080px) {
  .pg-storygrid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .pg-storygrid__visual {
    max-width: 480px;
    margin: 0 auto;
  }
  .pg-mvgrid {
    grid-template-columns: 1fr;
  }
  .pg-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pg-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .pg-values__grid {
    grid-template-columns: 1fr;
  }
  .pg-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pg-mvcard {
    padding: var(--space-7);
  }
}
@media (max-width: 400px) {
  .pg-team__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 9d. Contact page split ---- */
@media (max-width: 1080px) {
  .pg-contactus__split {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .pg-contactform__card {
    grid-template-columns: 1fr;
  }
  .pg-contactform__visual {
    min-height: 320px;
  }
}
@media (max-width: 600px) {
  .pg-contactform__body {
    padding: var(--space-7) var(--space-5);
  }
  .pg-contactform__visual {
    padding: var(--space-8) var(--space-6);
  }
  .pg-formrow {
    grid-template-columns: 1fr;
  }
  .pg-contactitem {
    grid-template-columns: 48px 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
  }
  .pg-contactitem__icon {
    width: 48px; height: 48px;
  }
}

/* ---- 9e. Booking page ---- */
@media (max-width: 1080px) {
  .pg-bookgrid__cols {
    grid-template-columns: 1fr;
  }
  .pg-steps {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .pg-steps::before {
    display: none;
  }
}
@media (max-width: 640px) {
  .pg-bookform {
    padding: var(--space-6) var(--space-5);
  }
  .pg-booksum {
    padding: var(--space-6);
  }
}

/* ---- 9f. Profile page ---- */
@media (max-width: 1080px) {
  .pg-profile__grid {
    grid-template-columns: 1fr;
  }
  .pg-profile__head-card {
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
  }
  .pg-profile__head-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media (max-width: 640px) {
  .pg-profile__head-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-5);
  }
  .pg-profile__avatar {
    margin: 0 auto;
  }
  .pg-profile__head-actions {
    flex-direction: column;
    width: 100%;
  }
  .pg-profile__head-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .pg-profile__stats {
    justify-content: center;
  }
  .pg-booking-card__body {
    grid-template-columns: 1fr;
  }
  .pg-booking-card__img {
    width: 100%;
    max-width: 100%;
  }
  .pg-booking-card__details-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pg-booking-card__price {
    min-width: unset;
    width: 100%;
    text-align: left;
  }
}
@media (max-width: 400px) {
  .pg-booking-card__details-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 9g. Apartment detail page ---- */
@media (max-width: 1080px) {
  .pg-detail__grid {
    grid-template-columns: 1fr;
  }
  .pg-detail__sidebar {
    position: static;
  }
  .pg-similar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pg-detail__amenities {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .pg-similar-grid {
    grid-template-columns: 1fr;
  }
  .pg-gallery__thumbs {
    grid-template-columns: repeat(5, 1fr);
  }
  .pg-detail__amenities {
    grid-template-columns: 1fr;
  }
}

/* ---- 9h. Payment page ---- */
@media (max-width: 1080px) {
  .pg-payment__grid {
    grid-template-columns: 1fr;
  }
  .pg-payment__side {
    position: static;
  }
}
@media (max-width: 640px) {
  .pg-payment__details {
    padding: var(--space-7) var(--space-5);
  }
  .pg-payment__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pg-payment__apt {
    flex-direction: column;
    align-items: flex-start;
  }
  .pg-payment__apt-img {
    width: 100%;
    max-width: 280px;
  }
  .pg-payment__trust {
    grid-template-columns: 1fr;
  }
}

/* ---- 9i. Auth (login/register) pages ---- */
@media (max-width: 1080px) {
  .pg-auth__split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .pg-auth__hero {
    display: none;
  }
  .pg-auth__panel {
    min-height: 100svh;
    padding: var(--space-8) var(--space-5);
  }
}
@media (max-width: 480px) {
  .pg-auth__form-wrap {
    padding: var(--space-7) var(--space-5);
  }
  /* Keep remember-me + forgot on one row, just smaller */
  .pg-auth__form-extras {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    font-size: 0.82rem;
    gap: var(--space-1);
  }
}

/* ---- 9j. Thank you page ---- */
@media (max-width: 1080px) {
  .pg-thanks__grid {
    grid-template-columns: 1fr;
  }
  .pg-thanks__col--wide {
    order: -1;
  }
}
@media (max-width: 640px) {
  .pg-thanks__card {
    padding: var(--space-7) var(--space-5);
  }
  .pg-thanks__actions {
    justify-content: center;
    flex-direction: column;
  }
  .pg-thanks__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .pg-thanks__check {
    width: 120px; height: 120px;
  }
}

/* ----------------------------------------------------------
   10. SECTION HEADING WRAPPING ON MOBILE
   ---------------------------------------------------------- */
@media (max-width: 600px) {
  .gl-heading {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    max-width: 100%;
  }
  .gl-lead {
    font-size: var(--text-scale-2);
  }
  .gl-section-head {
    margin-bottom: var(--space-8);
  }
}

/* ----------------------------------------------------------
   11. CONTAINER HORIZONTAL OVERFLOW — prevent bleed
   ---------------------------------------------------------- */
.gl-section {
  overflow-x: clip;
}

/* ----------------------------------------------------------
   12. BACK-TO-TOP BUTTON — ensure it's always visible/styled
   ---------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  color: var(--color-primary-dark);
  border: none;
  display: grid;
  place-items: center;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity var(--duration-md) var(--ease-smooth),
    visibility var(--duration-md) var(--ease-smooth),
    transform var(--duration-md) var(--ease-smooth),
    box-shadow var(--duration-md) var(--ease-smooth);
  z-index: 200;
  box-shadow: var(--shadow-gold), var(--shadow-3);
}
.back-to-top.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -14px rgba(168,133,56,0.85), var(--shadow-4);
}

/* ----------------------------------------------------------
   13. FIX: legacy .apartments-grid from style.css conflict
       (the main grid is now .pg-apartments__grid and .pg-aptlisting__grid)
   ---------------------------------------------------------- */
.apartments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-7);
}
@media (max-width: 640px) {
  .apartments-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------
   14. NAV — ensure the desktop nav hides the toggle properly
   ---------------------------------------------------------- */
@media (min-width: 993px) {
  .gl-nav-toggle { display: none !important; }
  .gl-nav         { display: flex !important; }
}

/* ----------------------------------------------------------
   15. PRELOADER — enforce correct spinner style
   ---------------------------------------------------------- */
.preloader .loading-spinner {
  width: 56px; height: 56px;
  border: 3px solid rgba(201,169,98,0.15);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: fx-spin 900ms linear infinite;
}

/* ----------------------------------------------------------
   16. MISC VISUAL POLISH
   ---------------------------------------------------------- */

/* Remove duplicate h2::after underline (conflicts with gl-heading / section-title) */
.gl-section h2:not(.section-title):not(.gl-heading):after {
  display: none;
}

/* Ensure apartment tag (Featured) sits above image */
.apartment-card .apartment-tag {
  position: absolute;
  top: 14px; right: 14px;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  color: var(--color-primary-dark);
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-gold);
  z-index: 2;
}

/* Floating price badge on apartment image */
.apartment-card .apartment-card__price {
  position: absolute;
  bottom: 14px; right: 14px;
  top: auto; left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(11,30,63,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 2;
  box-shadow: 0 4px 18px -6px rgba(0,0,0,0.35);
}
.apartment-card .apartment-card__price .currency {
  font-size: 0.72rem;
  color: var(--color-gold-light);
  font-weight: 600;
  align-self: center;
}
.apartment-card .apartment-card__price .amount {
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}
.apartment-card .apartment-card__price .per {
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(246,243,237,0.72);
}

/* Fix hidden legacy price row */
.apartment-card .apartment-price[hidden] {
  display: none !important;
}

/* Make the gl-section--dark text readable */
.gl-section--dark .gl-eyebrow { color: var(--color-gold-light); }
.gl-section--dark .gl-heading { color: var(--color-white); }
.gl-section--dark .gl-lead    { color: rgba(246,243,237,0.82); }

/* About section quote background fix */
.pg-about__quote > i { background: var(--color-bg-cream); }

/* ----------------------------------------------------------
   17. SECTION PADDING ON SMALL SCREENS
   ---------------------------------------------------------- */
@media (max-width: 600px) {
  .gl-section { padding-block: clamp(48px, 8vw, 80px); }
  .gl-section--tight { padding-block: clamp(24px, 5vw, 48px); }
  .gl-container { padding-inline: 16px; }
}

/* ----------------------------------------------------------
   18. BOOKING FORM — ensure select/input have consistent height
   ---------------------------------------------------------- */
.gl-input, .gl-textarea, .gl-select, select.gl-input {
  min-height: 52px;
  appearance: none;
  -webkit-appearance: none;
}
select.gl-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C9A962' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

/* ----------------------------------------------------------
   19. MOBILE HEADER — ensure nav items have safe tap targets
   ---------------------------------------------------------- */
@media (max-width: 992px) {
  .gl-mobile-panel__link {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    font-weight: 500;
    color: var(--color-primary-dark);
    font-size: 1.05rem;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .gl-mobile-panel__cta {
    margin-top: var(--space-4);
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* ----------------------------------------------------------
   20. FIX: Contact form row on mobile
   ---------------------------------------------------------- */
@media (max-width: 720px) {
  .pg-formrow {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ----------------------------------------------------------
   21. AUTH PAGE — Password toggle + checkbox + form layout
   ---------------------------------------------------------- */

/* Password-toggle button: absolute inside .gl-input-icon */
.gl-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink-muted);
  padding: 4px 6px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: color var(--duration-sm);
}
.gl-password-toggle:hover { color: var(--color-gold); }

/* Ensure password input has room for both left icon AND right toggle */
.gl-input-icon .gl-input[type="password"],
.gl-input-icon .gl-input[type="text"] {
  padding-left: 44px;
  padding-right: 44px;
}

/* Custom checkbox (.gl-check) */
.gl-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}
.gl-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.gl-check__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-xs);
  background: var(--color-bg-cream);
  flex-shrink: 0;
  transition: border-color var(--duration-sm), background var(--duration-sm);
}
.gl-check__box i {
  font-size: 10px;
  color: transparent;
  transition: color var(--duration-sm);
}
.gl-check input[type="checkbox"]:checked ~ .gl-check__box {
  background: var(--color-gold);
  border-color: var(--color-gold);
}
.gl-check input[type="checkbox"]:checked ~ .gl-check__box i {
  color: var(--color-white);
}
.gl-check:hover .gl-check__box {
  border-color: var(--color-gold);
}

/* pg-auth form-extras: keep checkbox + forgot on one line always */
.pg-auth__form-extras {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

/* Auth panel — centered content, fills column */
.pg-auth__panel {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Auth section: don't force extra height, let content dictate */
.pg-auth {
  min-height: auto;
}
.pg-auth__split {
  min-height: 100svh;
}

/* Form card: ensure overflow is visible so animations don't clip */
.pg-auth__form-wrap {
  overflow: visible;
  width: 100%;
}
/* Keep the gold top-bar clipped to the card */
.pg-auth__form-wrap::before {
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

/* Spacious padding so the title never hugs the left edge */
@media (min-width: 481px) {
  .pg-auth__form-wrap {
    padding: var(--space-10) var(--space-10);
  }
}

/* Mobile: section should not expand beyond visible content */
@media (max-width: 1080px) {
  .pg-auth,
  .pg-auth__split,
  .pg-auth__panel {
    min-height: 0 !important;
    height: auto !important;
  }
  .pg-auth__panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 80px var(--space-5) var(--space-8);
  }
  .pg-auth__panel-inner {
    width: 100%;
    max-width: 480px;
  }
}

/* Remove footer top margin/gap on auth pages (login, register)
   where pg-auth directly precedes the footer */
main:has(.pg-auth) + .gl-footer,
main:has(.pg-auth) ~ .gl-footer {
  margin-top: 0;
}