/* =========================================================
   THARA VILLAS CATALOG
   Luxury Light Edition
   Mobile First
========================================================= */

:root {
    --v-bg: #f8f6ef;
    --v-bg-soft: #fcfbf7;
    --v-card: rgba(255, 255, 255, 0.94);
  
    --v-text: #26231d;
    --v-muted: #7d786c;
  
    --v-gold: #b99655;
    --v-gold-dark: #876a37;
    --v-gold-soft: #eee2c6;
  
    --v-border: rgba(95, 79, 49, 0.12);
  
    --v-radius: 28px;
    --v-radius-small: 16px;
  
    --v-shadow:
      0 18px 55px rgba(69, 57, 34, 0.09);
  
    --v-shadow-hover:
      0 30px 80px rgba(69, 57, 34, 0.15);
  }
  
  
  /* =========================================================
     GENERAL
  ========================================================= */
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    background:
      radial-gradient(
        circle at 90% 10%,
        rgba(190, 157, 95, 0.08),
        transparent 35%
      ),
      var(--v-bg);
  
    color: var(--v-text);
  }
  
  main {
    overflow: visible;
  }
  
  .active-page {
    color: var(--v-gold-dark) !important;
  }
  
  
  /* =========================================================
     HERO
  ========================================================= */
  
  .catalog-hero {
    position: relative;
  
    margin: 88px 14px 30px;
  
    min-height: 390px;
  
    display: flex;
    align-items: flex-end;
  
    padding: 38px 24px;
  
    border-radius: 32px;
  
    overflow: hidden;
  
    background:
      linear-gradient(
        180deg,
        rgba(30, 27, 21, 0.05) 10%,
        rgba(25, 22, 17, 0.66) 100%
      ),
      url("assets/IMG_4604.JPG") center / cover no-repeat;
  
    box-shadow:
      0 25px 70px rgba(39, 31, 18, 0.14);
  }
  
  .catalog-hero::after {
    content: "";
  
    position: absolute;
    inset: 0;
  
    background:
      linear-gradient(
        120deg,
        rgba(194, 158, 91, 0.08),
        transparent 50%
      );
  
    pointer-events: none;
  }
  
  
  .catalog-hero-content {
    position: relative;
    z-index: 2;
  
    max-width: 580px;
  
    text-align: right;
  }
  
  
  .catalog-hero .eyebrow {
    color: #ead5a8;
  
    font-size: 0.72rem;
  
    letter-spacing: 2px;
  
    margin-bottom: 8px;
  }
  
  
  .catalog-hero h1 {
    margin: 0;
  
    font-family: "Marhey", sans-serif;
  
    font-size: clamp(2.1rem, 9vw, 4.4rem);
  
    font-weight: 500;
  
    color: #ffffff;
  
    line-height: 1.35;
  }
  
  
  .catalog-hero p:last-child {
    margin: 12px 0 0;
  
    max-width: 500px;
  
    color: rgba(255, 255, 255, 0.82);
  
    line-height: 1.9;
  
    font-size: 0.93rem;
  }
  
  
  /* =========================================================
     FILTERS
  ========================================================= */
  
  .catalog-filter-section {
    position: sticky;
  
    top: 72px;
  
    z-index: 50;
  
    padding: 10px 14px 22px;
  }
  
  
  .filter-scroll {
    display: flex;
  
    gap: 8px;
  
    overflow-x: auto;
  
    padding: 9px;
  
    border: 1px solid rgba(255, 255, 255, 0.7);
  
    border-radius: 999px;
  
    background: rgba(251, 249, 243, 0.88);
  
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  
    box-shadow:
      0 10px 35px rgba(56, 46, 27, 0.08);
  
    scrollbar-width: none;
  }
  
  
  .filter-scroll::-webkit-scrollbar {
    display: none;
  }
  
  
  .filter-btn {
    flex: 0 0 auto;
  
    min-height: 40px;
  
    padding: 8px 17px;
  
    border: 0;
  
    border-radius: 999px;
  
    background: transparent;
  
    color: var(--v-muted);
  
    font-family: "Cairo", sans-serif;
  
    font-weight: 700;
  
    font-size: 0.82rem;
  
    cursor: pointer;
  
    transition: all 0.25s ease;
  }
  
  
  .filter-btn:hover {
    color: var(--v-text);
  }
  
  
  .filter-btn.active {
    background:
      linear-gradient(
        135deg,
        #c6a566,
        #a98346
      );
  
    color: #ffffff;
  
    box-shadow:
      0 7px 18px rgba(173, 137, 70, 0.26);
  }
  
  
  /* =========================================================
     GRID
  ========================================================= */
  
  .villas-grid {
    width: min(100%, 1250px);
  
    margin: 0 auto;
  
    padding: 8px 14px 70px;
  
    display: grid;
  
    grid-template-columns: 1fr;
  
    gap: 28px;
  }
  
  
  /* =========================================================
     CARD
  ========================================================= */
  
  .villa-catalog-card {
    position: relative;
  
    overflow: hidden;
  
    background: var(--v-card);
  
    border: 1px solid var(--v-border);
  
    border-radius: var(--v-radius);
  
    box-shadow: var(--v-shadow);
  
    opacity: 0;
  
    transform: translateY(24px);
  
    transition:
      opacity 0.55s ease,
      transform 0.55s ease,
      box-shadow 0.35s ease;
  }
  
  
  .villa-catalog-card.catalog-visible {
    opacity: 1;
  
    transform: translateY(0);
  }
  
  
  /* =========================================================
     IMAGE
  ========================================================= */
  
  .villa-image {
    position: relative;
  
    height: 300px;
  
    margin: 7px;
  
    border-radius: 23px;
  
    overflow: hidden;
  }
  
  
  .villa-image::after {
    content: "";
  
    position: absolute;
  
    inset: 0;
  
    background:
      linear-gradient(
        180deg,
        transparent 55%,
        rgba(28, 24, 17, 0.24)
      );
  
    pointer-events: none;
  }
  
  
  .villa-image img {
    width: 100%;
    height: 100%;
  
    display: block;
  
    object-fit: cover;
  
    transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
  }
  
  
  .villa-catalog-card:hover .villa-image img {
    transform: scale(1.045);
  }
  
  
  /* =========================================================
     BADGE
  ========================================================= */
  
  .villa-badge {
    position: absolute;
  
    z-index: 3;
  
    top: 15px;
    right: 15px;
  
    padding: 7px 13px;
  
    border: 1px solid rgba(255,255,255,.65);
  
    border-radius: 999px;
  
    background: rgba(255,255,255,.88);
  
    backdrop-filter: blur(12px);
  
    color: var(--v-gold-dark);
  
    font-size: 0.7rem;
  
    font-weight: 800;
  
    box-shadow:
      0 9px 25px rgba(0,0,0,.08);
  }
  
  
  /* =========================================================
     CONTENT
  ========================================================= */
  
  .villa-content {
    padding: 17px 21px 23px;
  }
  
  
  .villa-location {
    margin: 0 0 2px;
  
    color: var(--v-gold-dark);
  
    font-size: 0.72rem;
  
    font-weight: 800;
  
    letter-spacing: 0.4px;
  }
  
  
  .villa-title-area h2 {
    margin: 0;
  
    font-family: "Marhey", sans-serif;
  
    color: var(--v-text);
  
    font-size: 1.55rem;
  
    font-weight: 500;
  }
  
  
  /* =========================================================
     DETAILS
  ========================================================= */
  
  .villa-details {
    display: flex;
  
    flex-wrap: wrap;
  
    gap: 7px;
  
    margin-top: 15px;
  }
  
  
  .villa-details span {
    display: inline-flex;
  
    align-items: center;
  
    gap: 4px;
  
    padding: 7px 10px;
  
    background: #f5f2e9;
  
    border-radius: 11px;
  
    color: #514c41;
  
    font-size: 0.75rem;
  
    font-weight: 700;
  }
  
  
  /* =========================================================
     DESCRIPTION
  ========================================================= */
  
  .villa-description {
    margin: 17px 0 0;
  
    color: var(--v-muted);
  
    line-height: 1.85;
  
    font-size: 0.87rem;
  }
  
  
  /* =========================================================
     FEATURE PILLS
  ========================================================= */
  
  .villa-features {
    display: flex;
  
    flex-wrap: wrap;
  
    gap: 7px;
  
    margin-top: 15px;
  }
  
  
  .villa-features span {
    padding: 6px 11px;
  
    border: 1px solid rgba(185, 150, 85, 0.2);
  
    border-radius: 999px;
  
    background:
      rgba(185, 150, 85, 0.06);
  
    color: var(--v-gold-dark);
  
    font-size: 0.7rem;
  
    font-weight: 700;
  }
  
  
  /* =========================================================
     ACTIONS
  ========================================================= */
  
  .villa-actions {
    display: grid;
  
    grid-template-columns: 1fr 1fr;
  
    gap: 9px;
  
    margin-top: 21px;
  }
  
  
  .villa-actions .button {
    min-height: 48px;
  
    display: flex;
  
    justify-content: center;
    align-items: center;
  
    padding: 10px 12px;
  
    border-radius: 14px;
  
    text-decoration: none;
  
    font-family: "Cairo", sans-serif;
  
    font-size: 0.8rem;
  
    font-weight: 800;
  
    cursor: pointer;
  }
  
  
  .details-button {
    border: 1px solid var(--v-border);
  
    background: #faf9f5;
  
    color: var(--v-text);
  
    transition: all 0.25s ease;
  }
  
  
  .details-button:hover {
    background: #f2eee3;
  
    border-color: rgba(185,150,85,.3);
  
    color: var(--v-gold-dark);
  }
  
  
  .villa-actions .button-gold {
    border: 0;
  
    background:
      linear-gradient(
        135deg,
        #c6a566,
        #a98447
      );
  
    color: white;
  
    box-shadow:
      0 9px 24px rgba(171, 133, 67, 0.21);
  
    transition: all 0.25s ease;
  }
  
  
  .villa-actions .button-gold:hover {
    transform: translateY(-2px);
  
    box-shadow:
      0 13px 28px rgba(171, 133, 67, 0.3);
  }
  
  
  /* =========================================================
     HELP CTA
     NO BLACK BOX
  ========================================================= */
  
  .catalog-help {
    position: relative;
  
    overflow: hidden;
  
    max-width: 1180px;
  
    margin: 0 14px 70px;
  
    padding: 42px 24px;
  
    text-align: center;
  
    border: 1px solid rgba(185,150,85,.18);
  
    border-radius: 30px;
  
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.96),
        #f1eadb
      );
  
    box-shadow:
      0 22px 65px rgba(73,59,32,.08);
  }
  
  
  .catalog-help::before {
    content: "";
  
    position: absolute;
  
    width: 250px;
    height: 250px;
  
    top: -140px;
    left: -100px;
  
    border-radius: 50%;
  
    background:
      rgba(194,158,89,.12);
  
    filter: blur(10px);
  }
  
  
  .catalog-help > * {
    position: relative;
  
    z-index: 2;
  }
  
  
  .catalog-help .eyebrow {
    margin-bottom: 7px;
  
    color: var(--v-gold-dark);
  }
  
  
  .catalog-help h2 {
    margin: 0;
  
    color: var(--v-text);
  
    font-family: "Marhey", sans-serif;
  
    font-size: 1.7rem;
  
    font-weight: 500;
  }
  
  
  .catalog-help p:not(.eyebrow) {
    max-width: 500px;
  
    margin: 12px auto 23px;
  
    color: var(--v-muted);
  
    line-height: 1.85;
  
    font-size: 0.88rem;
  }
  
  
  .catalog-help .button-gold {
    display: inline-flex;
  
    justify-content: center;
    align-items: center;
  
    min-height: 49px;
  
    padding: 10px 25px;
  
    border: 0;
  
    border-radius: 14px;
  
    text-decoration: none;
  
    background:
      linear-gradient(
        135deg,
        #c6a566,
        #a98447
      );
  
    color: #ffffff;
  
    font-weight: 800;
  
    box-shadow:
      0 10px 26px rgba(171,133,67,.22);
  }
  
  
  /* =========================================================
     MODAL
  ========================================================= */
  
  .villa-modal {
    position: fixed;
  
    inset: 0;
  
    z-index: 10000;
  
    display: none;
  
    align-items: flex-end;
  
    justify-content: center;
  }
  
  
  .villa-modal.active {
    display: flex;
  }
  
  
  .villa-modal-overlay {
    position: absolute;
  
    inset: 0;
  
    background:
      rgba(35, 30, 22, 0.42);
  
    backdrop-filter: blur(10px);
  }
  
  
  .villa-modal-box {
    position: relative;
  
    z-index: 2;
  
    width: 100%;
  
    max-height: 92dvh;
  
    overflow-y: auto;
  
    padding: 20px 17px 35px;
  
    border-radius: 30px 30px 0 0;
  
    background: #faf8f2;
  
    box-shadow:
      0 -25px 80px rgba(40,32,19,.18);
  
    animation:
      villaModalUp .38s cubic-bezier(.2,.8,.2,1);
  }
  
  
  @keyframes villaModalUp {
  
    from {
      opacity: 0;
      transform: translateY(70px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  
  }
  
  
  /* CLOSE */
  
  .villa-modal-close {
    position: sticky;
  
    top: 5px;
  
    z-index: 10;
  
    display: flex;
  
    align-items: center;
    justify-content: center;
  
    width: 43px;
    height: 43px;
  
    margin-right: auto;
  
    border: 1px solid var(--v-border);
  
    border-radius: 50%;
  
    background:
      rgba(255,255,255,.91);
  
    backdrop-filter: blur(10px);
  
    color: var(--v-text);
  
    font-size: 1.65rem;
  
    cursor: pointer;
  
    box-shadow:
      0 7px 22px rgba(0,0,0,.08);
  }
  
  
  /* MODAL TITLE */
  
  .modal-villa-title {
    margin: 8px 0 0;
  
    font-family: "Marhey", sans-serif;
  
    color: var(--v-text);
  
    font-size: 1.85rem;
  
    font-weight: 500;
  }
  
  
  .modal-villa-description {
    margin-top: 7px;
  
    color: var(--v-muted);
  
    line-height: 1.85;
  
    font-size: .88rem;
  }
  
  
  /* MODAL GALLERY */
  
  .modal-gallery {
    display: grid;
  
    grid-template-columns: 1fr 1fr;
  
    gap: 7px;
  
    margin-top: 21px;
  }
  
  
  .modal-gallery img {
    width: 100%;
  
    height: 155px;
  
    object-fit: cover;
  
    border-radius: 14px;
  }
  
  
  .modal-gallery img:first-child {
    grid-column: 1 / -1;
  
    height: 245px;
  
    border-radius: 19px;
  }
  
  
  /* MODAL FEATURES */
  
  .modal-features {
    display: grid;
  
    grid-template-columns: 1fr 1fr;
  
    gap: 8px;
  
    margin: 20px 0;
  }
  
  
  .modal-feature {
    padding: 12px;
  
    border: 1px solid var(--v-border);
  
    border-radius: 13px;
  
    background: rgba(255,255,255,.8);
  
    color: var(--v-text);
  
    font-size: .8rem;
  
    font-weight: 700;
  }
  
  
  /* MODAL WHATSAPP */
  
  .modal-whatsapp-button {
    position: sticky;
  
    bottom: 8px;
  
    width: 100%;
  
    min-height: 52px;
  
    display: flex;
  
    align-items: center;
    justify-content: center;
  
    border-radius: 15px;
  
    text-decoration: none;
  
    background:
      linear-gradient(
        135deg,
        #c6a566,
        #a98447
      );
  
    color: white;
  
    font-weight: 800;
  
    box-shadow:
      0 12px 30px rgba(171,133,67,.25);
  }
  
  
  /* =========================================================
     FILTERING
  ========================================================= */
  
  .villa-catalog-card.hide {
    display: none;
  }
  
  
  .villa-catalog-card.show-card {
    animation: villaFilterIn .35s ease;
  }
  
  
  @keyframes villaFilterIn {
  
    from {
      opacity: 0;
      transform: translateY(12px) scale(.99);
    }
  
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  
  }
  
  
  /* =========================================================
     TABLET
  ========================================================= */
  
  @media (min-width: 700px) {
  
    .catalog-hero {
      min-height: 470px;
  
      margin:
        105px 28px
        40px;
  
      padding: 55px 45px;
    }
  
  
    .catalog-filter-section {
      max-width: 1180px;
  
      margin-inline: auto;
  
      padding-inline: 28px;
    }
  
  
    .filter-scroll {
      width: fit-content;
  
      margin-inline: auto;
    }
  
  
    .villas-grid {
      grid-template-columns:
        repeat(2, minmax(0,1fr));
  
      padding-inline: 28px;
    }
  
  
    .villa-image {
      height: 330px;
    }
  
  
    .catalog-help {
      margin-inline: 28px;
    }
  
  
    .villa-modal {
      align-items: center;
  
      padding: 30px;
    }
  
  
    .villa-modal-box {
      max-width: 900px;
  
      padding: 28px;
  
      border-radius: 30px;
    }
  
  
    .modal-gallery img {
      height: 205px;
    }
  
  
    .modal-gallery img:first-child {
      height: 390px;
    }
  
  }
  
  
  /* =========================================================
     DESKTOP
  ========================================================= */
  
  @media (min-width: 1050px) {
  
    .catalog-hero {
      max-width: 1250px;
  
      margin-inline: auto;
  
      min-height: 520px;
    }
  
  
    .villas-grid {
      grid-template-columns:
        repeat(3, minmax(0,1fr));
  
      gap: 30px;
    }
  
  
    .villa-catalog-card:hover {
      transform: translateY(-8px);
  
      box-shadow: var(--v-shadow-hover);
    }
  
  
    .villa-image {
      height: 305px;
    }
  
  
    .catalog-help {
      margin-inline: auto;
    }
  
  }
  /* =========================================================
   VILLA IMAGE SLIDER
========================================================= */

.villa-slider {
    position: relative;
    overflow: hidden;
  }
  
  
  /* TRACK */
  
  .villa-slider-track {
    display: flex;
  
    width: 100%;
    height: 100%;
  
    direction: ltr;
  
    transition:
      transform 0.5s cubic-bezier(.22,.61,.36,1);
  }
  
  
  .villa-slider-track img {
    flex: 0 0 100%;
  
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  
    transform: none !important;
  }
  
  
  /* DARK FADE */
  
  .villa-slider::after {
    content: "";
  
    position: absolute;
  
    inset: 0;
  
    z-index: 1;
  
    pointer-events: none;
  
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0.05),
        transparent 55%,
        rgba(0,0,0,0.28)
      );
  }
  
  
  /* ARROWS */
  
  .slider-arrow {
    position: absolute;
  
    z-index: 5;
  
    top: 50%;
  
    width: 38px;
    height: 38px;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    transform: translateY(-50%);
  
    border: 1px solid rgba(255,255,255,.6);
  
    border-radius: 50%;
  
    background:
      rgba(255,255,255,.82);
  
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  
    color: #29251e;
  
    font-size: 1.6rem;
  
    line-height: 1;
  
    cursor: pointer;
  
    opacity: 0;
  
    transition:
      opacity .25s ease,
      transform .25s ease,
      background .25s ease;
  }
  
  
  .slider-prev {
    left: 13px;
  }
  
  
  .slider-next {
    right: 13px;
  }
  
  
  .villa-slider:hover .slider-arrow {
    opacity: 1;
  }
  
  
  .slider-arrow:hover {
    background: white;
  }
  
  
  .slider-arrow:active {
    transform:
      translateY(-50%)
      scale(.9);
  }
  
  
  /* DOTS */
  
  .slider-dots {
    position: absolute;
  
    z-index: 5;
  
    bottom: 14px;
  
    left: 50%;
  
    transform: translateX(-50%);
  
    display: flex;
  
    gap: 6px;
  }
  
  
  .slider-dot {
    width: 6px;
    height: 6px;
  
    padding: 0;
  
    border: none;
  
    border-radius: 999px;
  
    background:
      rgba(255,255,255,.55);
  
    cursor: pointer;
  
    transition:
      width .3s ease,
      background .3s ease;
  }
  
  
  .slider-dot.active {
    width: 20px;
  
    background: #ffffff;
  }
  
  
  /* BADGE ABOVE SLIDER */
  
  .villa-slider .villa-badge {
    z-index: 6;
  }
  
  
  /* MOBILE */
  
  @media (max-width: 699px) {
  
    .slider-arrow {
      opacity: 1;
  
      width: 34px;
      height: 34px;
  
      font-size: 1.35rem;
    }
  
  }
  /* =========================================================
   PREMIUM VILLA DETAILS
========================================================= */

.villa-modal-box {
    padding: 15px;
  
    background:
      #f8f6ef;
  
    border:
      1px solid rgba(185,150,85,.15);
  }
  
  
  /* =========================================================
     LAYOUT
  ========================================================= */
  
  .premium-modal-layout {
    display: grid;
  
    grid-template-columns: 1fr;
  
    gap: 25px;
  
    padding-top: 5px;
  }
  
  
  /* =========================================================
     MAIN GALLERY
  ========================================================= */
  
  .premium-main-image {
    position: relative;
  
    width: 100%;
  
    height: 340px;
  
    overflow: hidden;
  
    border-radius: 23px;
  
    background: #eeeae0;
  }
  
  
  .premium-main-image::after {
    content: "";
  
    position: absolute;
  
    inset: 0;
  
    pointer-events: none;
  
    background:
      linear-gradient(
        180deg,
        rgba(20,18,14,.05),
        transparent 55%,
        rgba(20,18,14,.3)
      );
  }
  
  
  .premium-main-image img {
    width: 100%;
    height: 100%;
  
    display: block;
  
    object-fit: cover;
  
    transition:
      opacity .2s ease,
      transform .5s ease;
  }
  
  
  .premium-main-image img.changing {
    opacity: .35;
  
    transform: scale(1.015);
  }
  
  
  /* =========================================================
     BADGE
  ========================================================= */
  
  .premium-modal-badge {
    position: absolute;
  
    z-index: 4;
  
    top: 15px;
    right: 15px;
  
    padding: 7px 14px;
  
    border-radius: 999px;
  
    background:
      rgba(255,255,255,.88);
  
    backdrop-filter: blur(12px);
  
    color: #876a37;
  
    font-size: .72rem;
  
    font-weight: 800;
  
    box-shadow:
      0 8px 22px rgba(0,0,0,.08);
  }
  
  
  /* =========================================================
     IMAGE COUNTER
  ========================================================= */
  
  .modal-image-counter {
    position: absolute;
  
    z-index: 4;
  
    left: 15px;
    bottom: 15px;
  
    padding: 6px 11px;
  
    border-radius: 999px;
  
    background:
      rgba(255,255,255,.88);
  
    backdrop-filter: blur(10px);
  
    color: #29251e;
  
    font-size: .72rem;
  
    font-weight: 800;
  }
  
  
  /* =========================================================
     GALLERY ARROWS
  ========================================================= */
  
  .modal-gallery-arrow {
    position: absolute;
  
    z-index: 5;
  
    top: 50%;
  
    width: 40px;
    height: 40px;
  
    display: flex;
  
    justify-content: center;
    align-items: center;
  
    transform:
      translateY(-50%);
  
    border: 1px solid rgba(255,255,255,.6);
  
    border-radius: 50%;
  
    background:
      rgba(255,255,255,.82);
  
    backdrop-filter: blur(10px);
  
    color: #29251e;
  
    font-size: 1.6rem;
  
    cursor: pointer;
  
    box-shadow:
      0 8px 22px rgba(0,0,0,.09);
  
    transition:
      transform .2s ease,
      background .2s ease;
  }
  
  
  .modal-gallery-prev {
    left: 13px;
  }
  
  
  .modal-gallery-next {
    right: 13px;
  }
  
  
  .modal-gallery-arrow:active {
    transform:
      translateY(-50%)
      scale(.9);
  }
  
  
  /* =========================================================
     THUMBNAILS
  ========================================================= */
  
  .premium-thumbnails {
    display: flex;
  
    gap: 8px;
  
    margin-top: 9px;
  
    padding-bottom: 4px;
  
    overflow-x: auto;
  
    scrollbar-width: none;
  }
  
  
  .premium-thumbnails::-webkit-scrollbar {
    display: none;
  }
  
  
  .premium-thumbnail {
    flex: 0 0 74px;
  
    width: 74px;
    height: 64px;
  
    padding: 3px;
  
    overflow: hidden;
  
    border:
      2px solid transparent;
  
    border-radius: 13px;
  
    background: transparent;
  
    cursor: pointer;
  
    transition:
      border-color .25s ease,
      transform .25s ease;
  }
  
  
  .premium-thumbnail img {
    width: 100%;
    height: 100%;
  
    display: block;
  
    object-fit: cover;
  
    border-radius: 9px;
  }
  
  
  .premium-thumbnail.active {
    border-color: #b99655;
  }
  
  
  .premium-thumbnail:active {
    transform: scale(.95);
  }
  
  
  /* =========================================================
     INFO
  ========================================================= */
  
  .premium-modal-info {
    padding: 2px 6px 10px;
  }
  
  
  .premium-location {
    margin: 0 0 3px;
  
    color: #9c7d43;
  
    font-size: .75rem;
  
    font-weight: 800;
  }
  
  
  .premium-modal-info > h2 {
    margin: 0;
  
    font-family:
      "Marhey",
      sans-serif;
  
    font-size: 2rem;
  
    font-weight: 500;
  
    color: #28251f;
  }
  
  
  .premium-description {
    margin: 10px 0 0;
  
    color: #797469;
  
    font-size: .87rem;
  
    line-height: 1.9;
  }
  
  
  /* =========================================================
     FACTS
  ========================================================= */
  
  .premium-facts {
    display: grid;
  
    grid-template-columns:
      repeat(2, 1fr);
  
    gap: 8px;
  
    margin-top: 20px;
  }
  
  
  .premium-fact {
    display: flex;
  
    align-items: center;
  
    gap: 10px;
  
    padding: 12px;
  
    border:
      1px solid rgba(95,79,49,.1);
  
    border-radius: 15px;
  
    background:
      rgba(255,255,255,.72);
  }
  
  
  .premium-fact-icon {
    width: 35px;
    height: 35px;
  
    display: flex;
  
    align-items: center;
    justify-content: center;
  
    flex-shrink: 0;
  
    border-radius: 11px;
  
    background:
      rgba(185,150,85,.09);
  
    font-size: 1rem;
  }
  
  
  .premium-fact strong {
    display: block;
  
    color: #302c25;
  
    font-size: .82rem;
  }
  
  
  .premium-fact small {
    display: block;
  
    margin-top: 1px;
  
    color: #8c877c;
  
    font-size: .65rem;
  }
  
  
  /* =========================================================
     FEATURES
  ========================================================= */
  
  .premium-features-section {
    margin-top: 25px;
  }
  
  
  .premium-features-section h3 {
    margin: 0 0 13px;
  
    color: #302c25;
  
    font-size: 1rem;
  
    font-weight: 800;
  }
  
  
  .premium-feature-list {
    display: grid;
  
    grid-template-columns:
      repeat(2, 1fr);
  
    gap: 10px 15px;
  
    padding: 0;
  
    margin: 0;
  
    list-style: none;
  }
  
  
  .premium-feature-list li {
    display: flex;
  
    align-items: center;
  
    gap: 7px;
  
    color: #625d53;
  
    font-size: .79rem;
  
    font-weight: 600;
  }
  
  
  .feature-check {
    width: 22px;
    height: 22px;
  
    display: inline-flex;
  
    align-items: center;
    justify-content: center;
  
    flex-shrink: 0;
  
    border-radius: 50%;
  
    background:
      rgba(185,150,85,.12);
  
    color: #99793e;
  
    font-size: .7rem;
  
    font-weight: 900;
  }
  
  
  /* =========================================================
     INQUIRY BOX
  ========================================================= */
  
  .premium-inquiry-box {
    margin-top: 27px;
  
    padding: 18px;
  
    border:
      1px solid rgba(185,150,85,.17);
  
    border-radius: 21px;
  
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.95),
        #f2ecdf
      );
  
    box-shadow:
      0 13px 38px rgba(78,62,34,.07);
  }
  
  
  .premium-inquiry-heading {
    display: flex;
  
    align-items: center;
  
    justify-content: space-between;
  
    margin-bottom: 14px;
  }
  
  
  .premium-inquiry-heading span {
    color: #312d26;
  
    font-size: .95rem;
  
    font-weight: 800;
  }
  
  
  .premium-inquiry-heading small {
    padding: 5px 9px;
  
    border-radius: 999px;
  
    background:
      rgba(185,150,85,.1);
  
    color: #98783e;
  
    font-size: .62rem;
  
    font-weight: 700;
  }
  
  
  /* =========================================================
     FORM
  ========================================================= */
  
  .premium-inquiry-fields {
    display: grid;
  
    grid-template-columns: 1fr;
  
    gap: 10px;
  }
  
  
  .premium-inquiry-fields label {
    display: block;
  }
  
  
  .premium-inquiry-fields label > span {
    display: block;
  
    margin-bottom: 6px;
  
    color: #777166;
  
    font-size: .7rem;
  
    font-weight: 700;
  }
  
  
  .premium-inquiry-fields input,
  .premium-inquiry-fields select {
    width: 100%;
  
    min-height: 48px;
  
    padding: 0 13px;
  
    border:
      1px solid rgba(95,79,49,.12);
  
    border-radius: 13px;
  
    outline: none;
  
    background: #ffffff;
  
    color: #312d26;
  
    font-family:
      "Cairo",
      sans-serif;
  
    font-size: .8rem;
  
    transition:
      border-color .2s ease,
      box-shadow .2s ease;
  }
  
  
  .premium-inquiry-fields input:focus,
  .premium-inquiry-fields select:focus {
    border-color:
      rgba(185,150,85,.7);
  
    box-shadow:
      0 0 0 3px
      rgba(185,150,85,.09);
  }
  
  
  /* =========================================================
     INQUIRY BUTTON
  ========================================================= */
  
  .premium-inquiry-button {
    width: 100%;
  
    min-height: 51px;
  
    margin-top: 12px;
  
    border: 0;
  
    border-radius: 14px;
  
    background:
      linear-gradient(
        135deg,
        #c6a566,
        #a98447
      );
  
    color: #ffffff;
  
    font-family:
      "Cairo",
      sans-serif;
  
    font-size: .83rem;
  
    font-weight: 800;
  
    cursor: pointer;
  
    box-shadow:
      0 10px 25px
      rgba(171,133,67,.22);
  
    transition:
      transform .2s ease,
      box-shadow .2s ease;
  }
  
  
  .premium-inquiry-button:hover {
    transform:
      translateY(-2px);
  
    box-shadow:
      0 14px 30px
      rgba(171,133,67,.3);
  }
  
  
  .premium-inquiry-note {
    margin:
      8px 0 0;
  
    text-align: center;
  
    color: #969084;
  
    font-size: .62rem;
  }
  
  
  /* =========================================================
     TABLET / DESKTOP
  ========================================================= */
  
  @media (min-width: 700px) {
  
    .premium-main-image {
      height: 430px;
    }
  
  
    .premium-inquiry-fields {
      grid-template-columns:
        1fr 1fr;
    }
  
  }
  
  
  @media (min-width: 950px) {
  
    .villa-modal-box {
      max-width: 1100px;
  
      max-height: 90vh;
  
      padding: 22px;
    }
  
  
    .premium-modal-layout {
      grid-template-columns:
        minmax(0, 1.15fr)
        minmax(350px, .85fr);
  
      gap: 32px;
  
      align-items: start;
    }
  
  
    .premium-main-image {
      height: 510px;
    }
  
  
    .premium-modal-info {
      padding-top: 7px;
    }
  
  
    .premium-modal-info > h2 {
      font-size: 2.25rem;
    }
  
  
    .premium-facts {
      margin-top: 24px;
    }
  
  
    .premium-inquiry-box {
      margin-top: 28px;
    }
  
  }