/* ==========================================================================
   iOS Liquid Glass Theme — Kourtis Group Portfolio
   Loaded AFTER styles.css so it overrides cleanly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT — Montserrat everywhere
   -------------------------------------------------------------------------- */
body {
    font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hero-title,
.hero-subtitle,
.section-title,
.section-subtitle,
.project-title,
#modal-title,
.modal-location,
.modal-section h3,
.modal-prices h3,
.footer-section h3,
.header-title {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   2. GLASS TOKENS
   -------------------------------------------------------------------------- */
:root {
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.74);
    --glass-bg-soft: rgba(255, 255, 255, 0.38);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-edge: rgba(255, 255, 255, 0.8);
    --glass-blur: blur(22px) saturate(180%);
    --glass-blur-sm: blur(12px) saturate(160%);
    --glass-radius: 22px;
    --glass-radius-lg: 30px;
    --glass-shadow: 0 10px 40px rgba(10, 42, 94, 0.10);
    --glass-shadow-hover: 0 18px 52px rgba(10, 42, 94, 0.18);
    --glass-navy: rgba(10, 42, 94, 0.88);
    --glass-navy-strong: rgba(10, 42, 94, 0.94);
    --glass-accent: rgba(10, 42, 94, 0.94);
    --ios-blue: #0a2a5e;
    --ios-blue-glass: rgba(10, 42, 94, 0.88);
}

/* --------------------------------------------------------------------------
   3. AURORA BACKGROUND (makes the blur visible)
   -------------------------------------------------------------------------- */
body {
    background-color: #e8eef7;
}

.bg-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(1200px 820px at 8% -8%, rgba(255, 255, 255, 0.16), transparent 60%),
        radial-gradient(1100px 760px at 92% 6%, rgba(10, 42, 94, 0.22), transparent 58%),
        radial-gradient(900px 720px at 50% 108%, rgba(10, 42, 94, 0.12), transparent 60%),
        radial-gradient(760px 640px at 102% 62%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(180deg, #f5f8fd 0%, #e8eef7 100%);
}

.bg-aurora::before,
.bg-aurora::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    will-change: transform;
}

.bg-aurora::before {
    width: 52vw;
    height: 52vw;
    left: -8vw;
    top: -12vw;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.32), transparent 70%);
    animation: auroraFloatA 26s ease-in-out infinite alternate;
}

.bg-aurora::after {
    width: 48vw;
    height: 48vw;
    right: -10vw;
    bottom: -14vw;
    background: radial-gradient(circle at 50% 50%, rgba(10, 42, 94, 0.38), transparent 70%);
    animation: auroraFloatB 32s ease-in-out infinite alternate;
}

@keyframes auroraFloatA {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(9vw, 7vh, 0) scale(1.15); }
}

@keyframes auroraFloatB {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(-8vw, -6vh, 0) scale(0.95); }
}

/* --------------------------------------------------------------------------
   4. HEADER — frosted glass bar
   -------------------------------------------------------------------------- */
.header {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(10, 42, 94, 0.10);
    box-shadow: inset 0 -1px 0 var(--glass-edge), 0 10px 40px rgba(10, 42, 94, 0.08);
}

.header-title {
    color: var(--primary-color);
}

.nav-link {
    color: var(--primary-color);
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.nav-link:hover {
    color: var(--primary-color);
    background: var(--glass-bg-soft);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    border-color: var(--glass-border);
}

.nav-link.active {
    color: #fff;
    background: var(--glass-navy);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 8px 22px rgba(10, 42, 94, 0.22);
}

.nav-link.active::after {
    display: none;
}

/* --------------------------------------------------------------------------
   5. HERO — translucent navy glass band
   -------------------------------------------------------------------------- */
.hero {
    background: #0a2a5e;
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero-subtitle {
    color: var(--accent-light);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   6. FILTER BAR + SELECTS
   -------------------------------------------------------------------------- */
.filter-bar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(10, 42, 94, 0.08);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}

.filter-select {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    color: var(--primary-color);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    padding: 1rem 1.6rem;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 8px 22px rgba(10, 42, 94, 0.12);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

.filter-select:hover,
.filter-select:focus {
    border-color: var(--accent-color);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 8px 22px rgba(10, 42, 94, 0.14);
    outline: none;
}

.results-count {
    color: var(--text-light);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. PROJECT CARDS — liquid glass
   -------------------------------------------------------------------------- */
.projects {
    padding: 4rem 0 5rem;
}

.project-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow-hover);
    border-color: rgba(255, 255, 255, 0.85);
}

.project-content {
    padding: 1.6rem 1.8rem 1.8rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.project-card-bottom {
    margin-top: auto;
}

.project-title {
    color: var(--primary-color);
}

.project-location {
    color: var(--text-light);
}

.project-description {
    color: var(--text-color);
}

.project-meta,
.project-availability {
    border-top-color: rgba(10, 42, 94, 0.10);
}

.project-price,
.availability-value {
    color: var(--accent-dark);
}

.project-badge {
    background: var(--glass-navy);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 6px 16px rgba(10, 42, 94, 0.25);
}

/* --------------------------------------------------------------------------
   8. BUTTONS — unified liquid glass pills
   -------------------------------------------------------------------------- */
.btn,
.project-cta,
.map-control-btn,
.map-project-link,
.gallery-nav,
.modal-close {
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 6px 20px rgba(10, 42, 94, 0.14);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.btn:hover,
.project-cta:hover,
.map-control-btn:hover,
.map-project-link:hover,
.gallery-nav:hover,
.modal-close:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 12px 30px rgba(10, 42, 94, 0.22);
}

/* Primary — frosted navy */
.btn-primary {
    background: var(--glass-navy);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--glass-navy-strong);
    color: #fff;
}

/* Secondary — frosted white */
.btn-secondary {
    background: var(--glass-bg-strong);
    color: var(--primary-color);
    border: 1px solid var(--glass-border);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
}

/* Card CTA */
.project-cta {
    background: var(--glass-navy);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 999px;
}

.project-cta:hover {
    background: var(--glass-accent);
    color: #fff;
}

/* Map link */
.map-project-link {
    background: var(--glass-navy);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.map-project-link:hover {
    background: var(--glass-accent);
    color: #fff;
}

/* Gallery / map control / close circles */
.gallery-nav {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--primary-color);
    border: 1px solid var(--glass-border);
}

.gallery-nav:hover {
    background: var(--glass-accent);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.map-control-btn {
    width: 38px;
    height: 38px;
    background: var(--glass-bg-strong);
    color: var(--primary-color);
}

.map-control-btn:hover {
    background: var(--glass-accent);
    color: #fff;
    border-color: var(--glass-accent);
}

.modal-close {
    background: var(--glass-bg-strong);
    color: var(--primary-color);
    border: 1px solid var(--glass-border);
}

.modal-close:hover {
    background: var(--glass-accent);
    color: #fff;
    border-color: var(--glass-accent);
}

/* Step number circles */
.step-number {
    background: var(--glass-accent);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 6px 18px rgba(10, 42, 94, 0.35);
}

/* --------------------------------------------------------------------------
   9. LANGUAGE SELECTOR
   -------------------------------------------------------------------------- */
.language-btn {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    color: var(--primary-color);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 6px 20px rgba(10, 42, 94, 0.12);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
}

.language-btn:hover {
    border-color: var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 10px 26px rgba(10, 42, 94, 0.2);
}

.language-menu {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 18px 50px rgba(10, 42, 94, 0.2);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    overflow: hidden;
}

.language-menu a {
    color: var(--primary-color);
    border-bottom: 1px solid rgba(10, 42, 94, 0.08);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.language-menu a:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   10. MAP SECTION
   -------------------------------------------------------------------------- */
.map-section {
    background: transparent;
}

.section-title {
    color: var(--primary-color);
}

.section-subtitle {
    color: var(--text-light);
}

.projects-map {
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-lg);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 16px 50px rgba(10, 42, 94, 0.16);
}

.map-legend {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 6px 20px rgba(10, 42, 94, 0.08);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
}

.map-note {
    color: var(--text-light);
}

.map-note-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.map-glass-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.35rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-navy);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 8px 22px rgba(10, 42, 94, 0.18);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.25s ease;
}

.map-glass-btn i {
    font-size: 0.9rem;
}

.map-glass-btn:hover {
    background: var(--glass-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 12px 30px rgba(10, 42, 94, 0.26);
}

@media (max-width: 480px) {
    .map-note-actions {
        gap: 0.5rem;
    }
    .map-glass-btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.78rem;
        gap: 0.4rem;
    }
}

/* --------------------------------------------------------------------------
   11. PROJECT MODAL — frosted full-screen panel
   -------------------------------------------------------------------------- */
.modal {
    background: rgba(232, 238, 247, 0.82);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

.modal-content {
    background: transparent;
}

#modal-title {
    color: var(--primary-color);
}

.modal-location,
.modal-description {
    color: var(--text-color);
}

.modal-section {
    border-bottom-color: rgba(10, 42, 94, 0.10);
}

.modal-section h3 {
    color: var(--primary-color);
}

/* Inner info tiles — glass */
.status-item,
.feature-item,
.spec-item,
.location-item,
.unit-type,
.unit-visualization,
.pay-plan-item,
.price-item,
.contact-item {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 4px 14px rgba(10, 42, 94, 0.06);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
}

.spec-value,
.price-value,
.step-percentage {
    color: var(--accent-dark);
}

.status-value {
    color: var(--primary-color);
}

.highlight-item {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--accent-color);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 4px 14px rgba(10, 42, 94, 0.06);
}

.pay-plan-item {
    border-left: 4px solid var(--accent-color);
}

.modal-prices {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

.modal-prices h3 {
    color: var(--primary-color);
}

.modal-map-container {
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 10px 30px rgba(10, 42, 94, 0.1);
}

.map-address {
    background: var(--glass-bg-soft);
    border-top: 1px solid rgba(10, 42, 94, 0.10);
}

.progress-item,
.floorplan-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 6px 20px rgba(10, 42, 94, 0.08);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
}

.progress-caption,
.floorplan-caption {
    background: transparent;
    color: var(--text-light);
}

/* --------------------------------------------------------------------------
   12. CONTACT MODAL — glass card
   -------------------------------------------------------------------------- */
#contact-modal {
    background: rgba(10, 42, 94, 0.38);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

#contact-modal .modal-content {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-lg);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 30px 80px rgba(10, 42, 94, 0.35);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

#contact-modal .modal-header h1 {
    color: var(--primary-color);
}

#contact-modal .modal-section h3 {
    color: var(--primary-color);
}

#contact-modal .modal-section h3::before {
    background-color: var(--accent-color);
}

#contact-modal .contact-item {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--accent-color);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 4px 14px rgba(10, 42, 94, 0.06);
}

#contact-modal .contact-item strong {
    color: var(--primary-color);
}

#contact-modal .contact-item p {
    color: var(--text-color);
}

#contact-modal .social-link-modal {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    color: var(--primary-color);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 4px 14px rgba(10, 42, 94, 0.06);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
}

#contact-modal .social-link-modal:hover {
    background: var(--glass-navy);
    color: #fff;
    border-color: var(--glass-border);
    transform: translateY(-3px);
}

#contact-modal .social-link-modal:hover i {
    color: #fff;
}

#contact-modal .modal-section p {
    color: var(--text-light);
}

/* --------------------------------------------------------------------------
   13. FOOTER — dark glass
   -------------------------------------------------------------------------- */
.footer {
    background: rgba(10, 42, 94, 0.9);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
}

.footer-section h3 {
    color: var(--accent-light);
}

.footer-section p,
.social-link {
    color: rgba(255, 255, 255, 0.82);
}

.social-link:hover {
    color: var(--accent-light);
}

.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   14. LIGHTBOX
   -------------------------------------------------------------------------- */
.lightbox-overlay {
    background: rgba(6, 22, 44, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

.lightbox-nav {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

#lightbox-image {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   14b. NEW COMPONENTS — filter labels, pagination, card specs
   -------------------------------------------------------------------------- */
/* Filter groups (label + icon above select) */
.filter-content {
    align-items: flex-end;
}
.filter-controls {
    gap: 1rem;
    flex-wrap: wrap;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.filter-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.10rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 4px 14px rgba(10, 42, 94, 0.08);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    width: fit-content;
}
.filter-label i {
    color: var(--accent-color);
    font-size: 1.05rem;
}

/* Footer admin link */
.footer-admin-link {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 6px 18px rgba(10, 42, 94, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.footer-admin-link i { margin-right: 0.35rem; }
.footer-admin-link:hover {
    transform: translateY(-2px);
    color: var(--glass-navy);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 10px 26px rgba(10, 42, 94, 0.2);
}

/* Pagination — "Page 1 / 2 / 3" iOS blue liquid glass, top right */
.pagination {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(10, 42, 94, 0.28);
    background: rgba(10, 42, 94, 0.10);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.pagination-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ios-blue);
    margin-right: 0.15rem;
}
.pagination-num {
    min-width: 34px;
    height: 34px;
    padding: 0 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ios-blue);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.pagination-num:hover {
    transform: translateY(-1px);
    background: rgba(10, 42, 94, 0.14);
}
.pagination-num.active {
    background: var(--ios-blue-glass);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 18px rgba(10, 42, 94, 0.35);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
}
.pagination-sep {
    color: rgba(10, 42, 94, 0.45);
    font-weight: 700;
    font-size: 0.95rem;
    user-select: none;
}
.pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

/* Card — location line */
.project-location::before {
    content: none;
}
.project-location {
    gap: 0.5rem;
    font-weight: 500;
}
.project-location i {
    color: var(--accent-color);
}
.project-location-link {
    text-decoration: none;
    color: var(--text-light);
    cursor: pointer;
    width: fit-content;
    transition: color 0.2s ease, transform 0.2s ease;
}
.project-location-link:hover {
    color: var(--accent-color);
}
.project-location-link:hover i {
    color: var(--accent-color);
}

/* Card — price range */
.project-price-range {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent-dark);
    margin: 0.35rem 0 0.5rem;
    letter-spacing: -0.01em;
}
.project-price-range.muted {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-light);
}

/* Card — tags */
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.project-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(10, 42, 94, 0.08);
    color: var(--accent-dark);
    border: 1px solid rgba(10, 42, 94, 0.22);
}

/* Card — specs grid */
.project-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
    margin: 0.25rem 0 0.75rem;
}
.spec-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
    background: rgba(10, 42, 94, 0.10);
    border: 1px solid rgba(10, 42, 94, 0.18);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
}
.spec-tile i {
    color: var(--accent-color);
    font-size: 1.15rem;
}
.spec-tile-inner {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.spec-tile-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    opacity: 0.78;
}
.spec-tile-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

/* Card — footer (delivery + availability) */
.project-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(10, 42, 94, 0.10);
    flex-wrap: wrap;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-light);
}
.project-delivery,
.project-avail {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.project-delivery i,
.project-avail i {
    color: var(--accent-color);
}
.project-avail {
    color: var(--primary-color);
}

/* Availability status bar — green (available) / orange (>50% sold) / red (sold out) */
.availability-bar-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.35rem;
}
.availability-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(10, 42, 94, 0.10);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-edge);
    overflow: hidden;
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
}
.availability-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}
.availability-bar-label {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Card — "Chat with us" CTA */
.project-chat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.8rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary-color), #1a3a6b);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(10, 42, 94, 0.28);
}
.project-chat-btn i {
    font-size: 1.05rem;
}
.project-chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(10, 42, 94, 0.38);
}

@media (max-width: 768px) {
    .pagination {
        margin-top: 0.25rem;
    }
    .project-specs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .project-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bg-aurora::before,
    .bg-aurora::after {
        animation: none;
    }
    .project-card,
    .btn,
    .project-cta,
    .map-control-btn,
    .gallery-nav,
    .modal-close {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE — kill horizontal scroll, tablet + mobile layout
   -------------------------------------------------------------------------- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

/* ---------- Tablet (769px – 1024px) ---------- */
@media (max-width: 1024px) and (min-width: 769px) {
    .header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    .nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .logo img {
        max-width: 260px;
        height: 72px;
    }
    .header-title {
        font-size: 1.4rem;
        white-space: normal;
        line-height: 1.2;
    }
    .hero {
        padding: 3.5rem 0;
    }
    .hero-title {
        font-size: 2.6rem;
    }
    .hero-subtitle {
        font-size: 1.8rem;
        margin-top: 1rem;
    }
    .filter-controls {
        width: 100%;
    }
}

/* ---------- Mobile (≤768px) ---------- */
@media (max-width: 768px) {
    .header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    .logo-area {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    .hero {
        padding: 3rem 0;
    }
    .hero-title {
        font-size: 2.2rem;
    }
    .hero-subtitle {
        font-size: 1.5rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }
    .filter-content {
        gap: 1.25rem;
    }
    .filter-group {
        width: 100%;
    }
    .filter-select {
        width: 100%;
        max-width: 100%;
        font-size: 0.85rem;
        padding: 0.45rem 0.9rem;
        border-radius: 10px;
    }
    .filter-label {
        font-size: 0.72rem;
        padding: 0.3rem 0.7rem;
        gap: 0.35rem;
    }
    .filter-label i {
        font-size: 0.8rem;
    }
    .pagination {
        align-self: flex-start;
        max-width: 100%;
    }
    .projects {
        padding: 2.5rem 0 3.5rem;
    }
    .projects-grid {
        gap: 1.5rem;
    }
    .project-image {
        height: 220px;
    }
    .map-note {
        text-align: left;
    }
    .map-container {
        overflow: visible;
    }
    .modal-body {
        padding: 1.5rem 1rem 3rem;
    }
    .modal-close {
        top: 0.75rem;
        right: 0.75rem;
    }
    .thumbnail-strip {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
}

/* ---------- Small mobile (≤480px) ---------- */
@media (max-width: 480px) {
    .logo img {
        max-width: 220px;
        height: 56px;
    }
    .header-title {
        font-size: 1.25rem;
    }
    .hero-title {
        font-size: 1.9rem;
    }
    .hero-subtitle {
        font-size: 1.3rem;
    }
    .projects-grid {
        gap: 1.2rem;
    }
    .project-content {
        padding: 1.2rem 1.3rem 1.4rem;
    }
    .pagination {
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    .pagination-num {
        min-width: 30px;
        height: 30px;
        padding: 0 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   17. MODAL RESPONSIVE — fix internal grids that refuse to shrink
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .modal-info {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.5rem !important;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    .modal-details,
    .modal-sidebar {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* unit breakdown: 4 fixed columns -> 2 shrinking columns */
    .unit-breakdown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .unit-type h4 {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    /* any remaining grid that resists shrinking */
    .status-grid,
    .features-grid,
    .specs-grid,
    .location-grid,
    .highlights-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .modal-description {
        white-space: pre-wrap !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .price-item,
    .spec-item,
    .highlight-item {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .unit-breakdown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem;
    }
    .modal-prices {
        padding: 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   18. LANGUAGE SWITCHER — keep it clickable above an open modal
   -------------------------------------------------------------------------- */
.language-selector {
    z-index: 2011 !important;
}

/* When a modal is open, drop the selector below the × close button (right side is empty) */
.modal-open .language-selector {
    top: 84px !important;
}