/* ============================================================
   BUZZ 82 — Living Quarter
   style.css
   ============================================================

   TABLE OF CONTENTS
   -----------------
   00. CSS Custom Properties (Design Tokens)
   01. Base / Reset
   02. Navbar
   03. Breadcrumb
   04. Photo Grid
   05. Property Header
   06. Section Titles
   07. Amenities
   08. Booking Card
   09. Video Section
   10. Reviews
   11. FAQ
   12. Location
   13. Footer
   14. Utility / Background Helpers
   ============================================================ */


/* ============================================================
   00. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand colours */
  --clr-primary:        #ED5565;
  --clr-primary-dark:   #d03a20;
  --clr-primary-light:  #fff3f0;
  --clr-primary-border: #ED5565;

  /* Neutrals */
  --clr-dark:       #1a1a1a;
  --clr-dark-card:  #1c1c1c;
  --clr-text:       #333333;
  --clr-muted:      #666666;
  --clr-subtle:     #888888;
  --clr-faint:      #999999;
  --clr-border:     #ED5565;
  --clr-border-light: #f0f0f0;
  --clr-white:      #ffffff;
  --clr-bg-light:   #f8f8f8;
  --clr-bg-form:    #f9f9f9;

  /* Star / badge accent */
  --clr-star:       #f5a623;
  --clr-review-badge: #ED5565;

  /* Chip icon backgrounds */
  --clr-chip-orange-bg: #fff3f0;
  --clr-chip-orange-fg: #ED5565;
  --clr-chip-red-bg:    #fff0f0;
  --clr-chip-red-fg:    #e83030;
  --clr-chip-blue-bg:   #f0f4ff;
  --clr-chip-blue-fg:   #4060e8;
  --clr-chip-green-bg:  #f0fff4;
  --clr-chip-green-fg:  #28a060;

  /* Typography scale */
  --fs-xs:    0.6875rem;   /* 11px */
  --fs-sm:    0.75rem;     /* 12px */
  --fs-base:  0.8125rem;   /* 13px */
  --fs-body:  0.84375rem;  /* 13.5px */
  --fs-md:    0.875rem;    /* 14px */
  --fs-lg:    1rem;        /* 16px  — Bootstrap default */
  --fs-xl:    1.125rem;    /* 18px */
  --fs-2xl:   1.25rem;     /* 20px */
  --fs-3xl:   1.375rem;    /* 22px */
  --fs-4xl:   clamp(1.25rem, 4vw, 1.625rem); /* 20–26px */

  /* Spacing */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  14px;
  --radius-pill: 20px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.07);
  --shadow-nav:  0 2px 8px rgba(0, 0, 0, 0.35);

  /* Transitions */
  --transition-base: 0.2s ease;
  --transition-slide: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   01. BASE / RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-md);
  color: var(--clr-dark);
  background-color: var(--clr-white);
}


/* ============================================================
   02. NAVBAR
   ============================================================ */
.navbar-top {
  background-color: var(--clr-dark);
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 1030;
  /* box-shadow: var(--shadow-nav); */
  display: flex;
  justify-content: space-between;
}

.logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem; /* ~32px */
}

.nav-links a {
  color: var(--clr-white);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 400;
}

.nav-locations {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-locations-icon {
  font-size: var(--fs-xs);
}


/* ============================================================
   03. BREADCRUMB
   ============================================================ */
.breadcrumb-bar {
  padding: 10px 0;
  border-bottom: 1px solid var(--clr-border-light);
}

.breadcrumb-bar a {
  color: var(--clr-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.breadcrumb-bar .sep {
  color: var(--clr-subtle);
  font-size: var(--fs-sm);
  margin: 0 6px;
}

.breadcrumb-bar .current {
  color: var(--clr-primary);
  font-size: var(--fs-sm);
}


/* ============================================================
   04. PHOTO GRID
   ============================================================ */
.gallery-wrapper img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius: 10px;
}
.gallery-item{
    display:block;
    overflow:hidden;
    width:100%;
    aspect-ratio: 1 / 1;
    border-radius:10px;
    height: 100%;
}
.gallery-main{
    overflow:hidden;
    height: 100%;
}

.gallery-view-btn{
    position:absolute;
    bottom:10px;
    right:10px;
    background:#ffffff;
    border:none;
    padding:6px 14px;
    font-size:14px;
    border-radius:20px;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

/* ============================================================
   05. PROPERTY HEADER
   ============================================================ */
.badge-rental {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--clr-primary-light);
  color: var(--clr-primary);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
}

.property-title {
  font-size: var(--fs-4xl);
  font-weight: 700;
  color: var(--clr-dark);
}

/* Property meta row */
.property-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-muted);
  font-size: var(--fs-base);
}

.property-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.property-tagline {
  color: var(--clr-muted);
  font-size: var(--fs-base);
}

.stars        { color: var(--clr-star); }
.rating-score { font-weight: 600; color: var(--clr-dark); }
.rating-count { color: var(--clr-subtle); font-size: var(--fs-base); }

/* About text */
.about-text {
  font-size: var(--fs-body);
  color: var(--clr-muted);
  line-height: 1.75;
}


/* ============================================================
   06. SECTION TITLES
   ============================================================ */
.section-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--clr-dark);
}

.section-subtitle {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--clr-dark);
}

.section-description {
  font-size: var(--fs-base);
  color: var(--clr-subtle);
}


/* ============================================================
   07. AMENITIES
   ============================================================ */
.amenities-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--clr-primary-light);
  color: var(--clr-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
}

.amenity-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background-color: var(--clr-primary);
  flex-shrink: 0;
}

.amenity-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.amenity-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background-color: #fff5f3;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.amenity-icon i {
  color: var(--clr-primary);
  font-size: var(--fs-md);
}

.amenity-label {
  font-size: var(--fs-base);
  color: var(--clr-text);
}


/* ============================================================
   08. BOOKING CARD
   ============================================================ */
.booking-card {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  background-color: var(--clr-white);
  box-shadow: var(--shadow-card);
}

@media (min-width: 992px) {
  .booking-card, .faq-images { position: sticky; top: 76px; }
}

/* Occupancy badge */
.occupancy-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--clr-subtle);
}

/* Price */
.price-line {
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  color: var(--clr-dark);
}

.price-unit {
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--clr-subtle);
}

.price-note {
  font-size: var(--fs-xs);
  color: #aaa;
}

/* Booking form heading */
.booking-heading {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--clr-dark);
}

.booking-subtext {
  font-size: var(--fs-sm);
  color: var(--clr-subtle);
}

/* Form elements */
.form-label-custom {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #444;
}

.form-control-custom {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: var(--fs-base);
  outline: none;
  color: var(--clr-dark);
  background-color: var(--clr-white);
  transition: border-color var(--transition-base);
}

.form-control-custom::placeholder {
  color: #bbb;
}

.form-control-custom:focus {
  border-color: var(--clr-primary);
}

/* Phone field composite */
.phone-group {
  display: flex;
}

.phone-prefix {
  border: 1px solid #e0e0e0;
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 9px 10px;
  font-size: var(--fs-base);
  background-color: var(--clr-bg-form);
  color: var(--clr-muted);
  white-space: nowrap;
}

.phone-input-field {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 9px 12px;
  font-size: var(--fs-base);
  outline: none;
  color: var(--clr-dark);
  transition: border-color var(--transition-base);
}

.phone-input-field:focus {
  border-color: var(--clr-primary);
}

/* CTA button */
.btn-schedule {
  width: 100%;
  background-color: var(--clr-primary);
  color: var(--clr-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 11px;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.btn-schedule:hover {
  background-color: var(--clr-primary-dark);
}


/* ============================================================
   09. VIDEO SECTION
   ============================================================ */
.video-section{
    position:relative;
    background-image:url("/buzz-82/images/lq-1.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
}

.video-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
}

.video-section .container{
    position:relative;
    z-index:2;
}

/* Left content */

.video-content h3{
    color:#fff;
    font-size:32px;
    font-weight:700;
    margin-bottom:12px;
}

.video-content p{
    color:rgba(255,255,255,0.75);
    line-height:1.7;
}

/* Video */

.video-box{
    text-align: center;
    display: flex;
    justify-content: center;
}

.video-box video{
    height: 450px;
    display: block;
    border-radius: 10px;
}

/* ══════════════════════════════
       REVIEWS SECTION
    ══════════════════════════════ */
    .reviews-section { background: #fff; }

    /* Header row */
    .reviews-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.5rem;
    }

    .reviews-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--clr-dark);
      margin: 0;
    }

    .reviews-rating-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #fff8f0;
      border: 1px solid #fde8cc;
      border-radius: var(--radius-pill);
      padding: 4px 12px;
      font-size: var(--fs-base);
      font-weight: 600;
      color: #e8762a;
    }

    .reviews-description {
      font-size: var(--fs-base);
      color: var(--clr-subtle);
      margin-bottom: 1.5rem;
    }

    /* ── Swiper host ── */
    .reviews-swiper-wrapper {
      /* let prev/next cards peek in */
      overflow: hidden;
      padding: 4px 0 8px;
    }

    #reviewsSwiper {
      overflow: visible !important;
    }

    /* ── Slide card ── */
    #reviewsSwiper .swiper-slide {
      height: auto;
      opacity: 0.45;
      transform: scale(0.94);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    #reviewsSwiper .swiper-slide-active {
      opacity: 1;
      transform: scale(1);
    }

    #reviewsSwiper .swiper-slide-prev,
    #reviewsSwiper .swiper-slide-next {
      opacity: 0.7;
      transform: scale(0.96);
    }

    .review-card {
      border: 1px solid var(--clr-border-light);
      border-radius: 10px;
      padding: 20px;
      background: #fff;
      height: 100%;
    }

    .review-stars { color: var(--clr-star); font-size: var(--fs-base); }

    .review-score {
      font-weight: 600;
      font-size: var(--fs-sm);
      color: var(--clr-dark);
    }

    .review-text {
      font-size: var(--fs-base);
      color: #444;
      line-height: 1.65;
    }

    .reviewer-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .reviewer-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .reviewer-name {
      font-size: var(--fs-base);
      font-weight: 600;
      color: var(--clr-dark);
    }

    .reviewer-role {
      font-size: var(--fs-xs);
      color: var(--clr-subtle);
    }

    /* ── Pagination dots ── */
    .reviews-pagination {
      display: flex !important;
      justify-content: center;
      gap: 6px;
      margin-top: 20px;
      position: static !important;
    }

    .reviews-pagination .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #e0e0e0;
      opacity: 1 !important;
      margin: 0 !important;
      transition: background 0.25s, transform 0.25s;
    }

    .reviews-pagination .swiper-pagination-bullet-active {
      background: var(--clr-primary) !important;
      transform: scale(1.2);
    }

/* ============================================================
   11. FAQ
   ============================================================ */
.faq-section-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--clr-dark);
}

.faq-section-description {
  font-size: var(--fs-base);
  color: var(--clr-subtle);
}

.faq-item {
  border: 1px solid var(--clr-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 14px 16px;
  width: 100%;
  background-color: var(--clr-white);
  border: none;
  outline: none;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--clr-dark);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* Active (open) state */
.faq-question:not(.collapsed) {
  background-color: var(--clr-primary);
  color: var(--clr-white);
}

.faq-question i {
  font-size: var(--fs-sm);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq-question:not(.collapsed) i {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 14px 16px;
  font-size: var(--fs-base);
  color: var(--clr-muted);
  line-height: 1.65;
  border-top: 1px solid var(--clr-border-light);
}

/* Side images */
.faq-image{
    overflow:hidden;
    border-radius:10px;
}

.faq-image img{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
}


/* ============================================================
   12. LOCATION
   ============================================================ */
.location-section {
  background-color: var(--clr-bg-light);
}

.location-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--clr-dark);
}

.location-subtitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-base);
  color: var(--clr-muted);
}

/* Proximity chip */
.location-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--clr-white);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

.chip-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chip-icon.orange { background-color: var(--clr-chip-orange-bg); color: var(--clr-chip-orange-fg); }
.chip-icon.red    { background-color: var(--clr-chip-red-bg);    color: var(--clr-chip-red-fg);    }
.chip-icon.blue   { background-color: var(--clr-chip-blue-bg);   color: var(--clr-chip-blue-fg);   }
.chip-icon.green  { background-color: var(--clr-chip-green-bg);  color: var(--clr-chip-green-fg);  }

.chip-label {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  line-height: 1.3;
}

.chip-time {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-dark);
}

/* Map embed */
.map-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 280px;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}


/* ============================================================
   13. FOOTER
   ============================================================ */
footer {
  background-color: var(--clr-dark);
}

/* Logo block */
.footer-address {
  font-size: var(--fs-sm);
  color: var(--clr-white);
  line-height: 1.8;
}

/* Column headings */
.footer-col-title {
  color: var(--clr-white);
  font-size: var(--fs-base);
  font-weight: 600;
}

/* Links */
.footer-link {
  color: var(--clr-white);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--transition-base);
}

.footer-link:hover {
  color: var(--clr-white);
}

/* Contact items */
.contact-item {
  font-size: var(--fs-sm);
  color: var(--clr-white);
  margin-bottom: 15px;
}
.contact-item a{
  text-decoration: none;
  color: var(--clr-white);
}
.contact-item i {
  color: #c29d43;
  width: 14px;
  margin-right: 10px;
}

/* Social icons */
.social-links-row {
  display: flex;
  gap: 0.5rem;
}

.social-link {
  width: 32px;
  height: 32px;
  background-color: #333;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-white);
  text-decoration: none;
  font-size: var(--fs-base);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.social-link:hover {
  background-color: var(--clr-primary);
  color: var(--clr-white);
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid #333;
  font-size: var(--fs-xs);
  color: var(--clr-white);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.footer-bottom a {
  color: #c29d43;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--clr-white);
}


/* ============================================================
   14. UTILITY / BACKGROUND HELPERS
   ============================================================ */
.bg1 { background: linear-gradient(135deg, #c9b89a, #a89070); }
.bg2 { background: linear-gradient(135deg, #d4c4a8, #b8a878); }
.bg3 { background: linear-gradient(135deg, #b8a888, #9a8860); }
.bg4 { background: linear-gradient(135deg, #c4b498, #a89068); }

@media only screen and (max-width: 575.98px) {
  .gallery-view-btn{
    padding: 6px 10px;
    font-size: 12px;
  }
}