/* ==========================================================
   SALVIN REALTORS
   APARTMENT DETAIL PAGE
   apartment.css
   ========================================================== */


/* ====================================================== */
/* ROOT VARIABLES */
/* ====================================================== */

:root {
    --bg-main: #11151b;
    --bg-secondary: #171c24;
    --card: #1b212a;
    --card-light: #202731;

    --accent: #d3ad47;
    --accent-light: #ebcc74;
    --accent-soft: rgba(211, 173, 71, 0.10);

    --text: #f4f6f8;
    --muted: #99a4af;

    --border: rgba(255, 255, 255, 0.09);
    --border-accent: rgba(211, 173, 71, 0.30);

    --success: #2fba74;
    --success-soft: rgba(47, 186, 116, 0.15);

    --blue: #5178de;
    --orange: #c67b35;

    --radius-sm: 9px;
    --radius: 14px;
    --radius-lg: 20px;

    --max: 1240px;

    --shadow:
        0 12px 35px rgba(0, 0, 0, 0.28);

    --shadow-heavy:
        0 18px 50px rgba(0, 0, 0, 0.40);
}


/* ====================================================== */
/* GLOBAL */
/* ====================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        'Montserrat',
        Arial,
        sans-serif;

    background: var(--bg-main);

    color: var(--text);

    line-height: 1.6;

    overflow-x: hidden;
}

body.gallery-modal-open {
    overflow: hidden;
}

a {
    color: inherit;

    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
}


/* ====================================================== */
/* TOP PROPERTY HERO */
/* ====================================================== */

.header-title {
    width: 100%;
}

.hero1 {
    position: relative;

    width: 100%;

    height: 520px;

    overflow: hidden;

    background: var(--bg-secondary);
}

.hero1-img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform: scale(1.001);
}

.hero1::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 8, 12, 0.94) 0%,
            rgba(5, 8, 12, 0.62) 35%,
            rgba(5, 8, 12, 0.16) 75%,
            rgba(5, 8, 12, 0.08) 100%
        );

    pointer-events: none;
}


/* ====================================================== */
/* HERO OVERLAY */
/* ====================================================== */

.hero1 > .overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    align-items: flex-end;
}

.hero1 .meta {
    width: 100%;

    max-width: var(--max);

    margin: 0 auto;

    padding:
        0 24px
        52px;
}

.hero-badges {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 15px;
}

.badge {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        7px
        12px;

    border-radius: 30px;

    background: var(--accent);

    color: #111;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.03em;

    text-transform: uppercase;
}

.badge.verified {
    background: var(--success);

    color: white;
}

.badge.featured {
    background:
        rgba(
            15,
            18,
            23,
            0.88
        );

    color: var(--accent);

    border:
        1px solid
        var(--border-accent);

    backdrop-filter: blur(8px);
}

.hero1 .title {
    max-width: 900px;

    margin:
        0
        0
        14px;

    color: white;

    font-size:
        clamp(
            34px,
            5vw,
            58px
        );

    font-weight: 800;

    line-height: 1.08;

    text-shadow:
        0
        3px
        20px
        rgba(0, 0, 0, 0.35);
}

.hero1 .sub {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        10px
        20px;

    color: #d9dee3;

    font-size: 14px;
}

.hero1 .sub > span {
    display: inline-flex;

    align-items: center;

    gap: 7px;
}

.hero1 .sub i {
    color: var(--accent);
}

.hero-price {
    color: var(--accent) !important;

    font-size: 22px;

    font-weight: 800;
}


/* ====================================================== */
/* PROPERTY STATUS */
/* ====================================================== */

.status {
    padding:
        6px
        11px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;
}

.status.ready {
    color: #bff1d5;

    background:
        rgba(
            47,
            186,
            116,
            0.18
        );
}

.status.off-plan {
    color: #cbd8ff;

    background:
        rgba(
            81,
            120,
            222,
            0.22
        );
}

.status.construction {
    color: #ffd6aa;

    background:
        rgba(
            198,
            123,
            53,
            0.22
        );
}


/* ====================================================== */
/* MAIN TWO-COLUMN LAYOUT */
/* ====================================================== */

.container {
    width: 100%;

    max-width: var(--max);

    margin:
        0 auto;

    padding:
        42px
        22px
        80px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        390px;

    align-items: start;

    gap: 34px;
}

.left {
    min-width: 0;
}

.right {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 20px;

    align-self: start;
}


/* ====================================================== */
/* GALLERY */
/* ====================================================== */

.gallery {
    width: 100%;

    margin-bottom: 28px;
}

.gallery .hero {
    position: relative;

    width: 100%;

    height: 500px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    background: var(--card);

    box-shadow: var(--shadow);
}

.gallery .hero.gallery-open {
    cursor: zoom-in;
}

.gallery .hero img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform
        0.4s ease;
}

.gallery .hero:hover img {
    transform: scale(1.015);
}

.gallery .hero .overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.18),
            transparent 35%
        );
}


/* ====================================================== */
/* OPEN GALLERY INDICATOR */
/* ====================================================== */

.gallery-open-indicator {
    position: absolute;

    right: 18px;

    bottom: 18px;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.20
        );

    border-radius: 30px;

    background:
        rgba(
            10,
            13,
            18,
            0.78
        );

    color: white;

    font-size: 12px;

    font-weight: 700;

    backdrop-filter: blur(8px);

    pointer-events: none;
}

.gallery-open-indicator i {
    color: var(--accent);
}


/* ====================================================== */
/* THUMBNAILS */
/* ====================================================== */

.thumb-row {
    width: 100%;
}

.thumb-wrapper {
    display: flex;

    align-items: center;

    gap: 9px;
}

.thumbs {
    flex: 1;

    display: flex;

    gap: 9px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    padding:
        2px
        0;
}

.thumbs::-webkit-scrollbar {
    display: none;
}

.thumb {
    flex:
        0 0
        105px;

    width: 105px;

    height: 76px;

    padding: 0;

    overflow: hidden;

    border:
        2px solid
        transparent;

    border-radius: 9px;

    background: transparent;

    cursor: zoom-in;

    opacity: 0.65;

    transition:
        opacity
        0.2s ease,
        border-color
        0.2s ease,
        transform
        0.2s ease;
}

.thumb:hover {
    opacity: 1;

    transform:
        translateY(
            -2px
        );
}

.thumb.active {
    opacity: 1;

    border-color: var(--accent);
}

.thumb img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}

.thumb-btn {
    flex: 0 0 40px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        var(--border);

    border-radius: 50%;

    background: var(--card);

    color: white;

    cursor: pointer;

    transition:
        0.2s ease;
}

.thumb-btn:hover {
    background: var(--accent);

    border-color: var(--accent);

    color: #111;
}

.thumb-progress {
    height: 3px;

    margin-top: 10px;

    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );
}

.thumb-progress i {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--accent);

    transition:
        width
        0.2s ease;
}


/* ====================================================== */
/* FULLSCREEN GALLERY MODAL */
/* ====================================================== */

.gallery-modal {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;

    align-items: center;

    justify-content: center;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity
        0.22s ease,
        visibility
        0.22s ease;
}

.gallery-modal.open {
    visibility: visible;

    opacity: 1;
}

.gallery-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            4,
            6,
            9,
            0.96
        );

    backdrop-filter: blur(5px);
}

.gallery-modal-dialog {
    position: relative;

    z-index: 2;

    width:
        min(
            96vw,
            1500px
        );

    height: 94vh;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    padding:
        58px
        80px
        105px;
}


/* ====================================================== */
/* MODAL IMAGE */
/* ====================================================== */

.gallery-modal-image-wrap {
    width: 100%;

    height: 100%;

    min-height: 0;

    display: flex;

    align-items: center;

    justify-content: center;
}

.gallery-modal-image-wrap img {
    display: block;

    max-width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

    border-radius: 8px;

    box-shadow:
        0 18px
        70px
        rgba(
            0,
            0,
            0,
            0.55
        );

    user-select: none;
}


/* ====================================================== */
/* MODAL CLOSE */
/* ====================================================== */

.gallery-modal-close {
    position: absolute;

    top: 8px;

    right: 16px;

    z-index: 5;

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    color: white;

    font-size: 21px;

    cursor: pointer;

    transition:
        background
        0.2s ease,
        transform
        0.2s ease;
}

.gallery-modal-close:hover {
    background: var(--accent);

    color: #111;

    transform: rotate(4deg);
}


/* ====================================================== */
/* MODAL COUNTER */
/* ====================================================== */

.gallery-modal-counter {
    position: absolute;

    top: 19px;

    left: 50%;

    transform:
        translateX(
            -50%
        );

    z-index: 5;

    padding:
        7px
        13px;

    border-radius: 20px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    color: #dce1e6;

    font-size: 12px;

    font-weight: 700;
}


/* ====================================================== */
/* MODAL NAVIGATION */
/* ====================================================== */

.gallery-modal-nav {
    position: absolute;

    top: 50%;

    z-index: 5;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius: 50%;

    background:
        rgba(
            17,
            21,
            27,
            0.85
        );

    color: white;

    font-size: 18px;

    cursor: pointer;

    transform:
        translateY(
            -50%
        );

    transition:
        background
        0.2s ease,
        color
        0.2s ease;
}

.gallery-modal-nav:hover {
    background: var(--accent);

    color: #111;
}

.gallery-modal-prev {
    left: 12px;
}

.gallery-modal-next {
    right: 12px;
}


/* ====================================================== */
/* MODAL THUMBNAILS */
/* ====================================================== */

.gallery-modal-thumbs {
    position: absolute;

    left: 80px;

    right: 80px;

    bottom: 14px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    overflow-x: auto;

    padding:
        5px
        3px;

    scrollbar-width: none;
}

.gallery-modal-thumbs::-webkit-scrollbar {
    display: none;
}

.gallery-modal-thumb {
    flex:
        0 0
        82px;

    width: 82px;

    height: 60px;

    padding: 0;

    overflow: hidden;

    border:
        2px solid
        transparent;

    border-radius: 7px;

    background: transparent;

    opacity: 0.50;

    cursor: pointer;

    transition:
        opacity
        0.2s ease,
        border-color
        0.2s ease,
        transform
        0.2s ease;
}

.gallery-modal-thumb:hover {
    opacity: 0.90;
}

.gallery-modal-thumb.active {
    opacity: 1;

    border-color: var(--accent);

    transform:
        translateY(
            -2px
        );
}

.gallery-modal-thumb img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}


/* ====================================================== */
/* GENERAL CONTENT SECTION */
/* ====================================================== */

.content-section {
    margin-bottom: 24px;

    padding: 28px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    background: var(--card);

    box-shadow:
        0 8px
        24px
        rgba(
            0,
            0,
            0,
            0.16
        );
}

.section-heading {
    margin-bottom: 20px;
}

.section-label {
    display: inline-block;

    margin-bottom: 5px;

    color: var(--accent);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.section-heading h2 {
    margin: 0;

    font-size: 25px;

    line-height: 1.25;
}


/* ====================================================== */
/* DESCRIPTION */
/* ====================================================== */

.description p {
    margin: 0;

    color: #c8d0d8;

    font-size: 15px;

    line-height: 1.8;

    white-space: pre-line;
}


/* ====================================================== */
/* DETAILS GRID */
/* ====================================================== */

.details-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.detail-item {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 85px;

    padding:
        15px
        16px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        rgba(
            255,
            255,
            255,
            0.02
        );
}

.detail-item > i {
    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--accent-soft);

    color: var(--accent);

    font-size: 17px;
}

.detail-item div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.detail-item span {
    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.detail-item strong {
    color: var(--text);

    font-size: 14px;

    font-weight: 700;
}


/* ====================================================== */
/* DEVELOPMENT */
/* ====================================================== */

.development-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.development-info {
    padding: 17px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        rgba(
            211,
            173,
            71,
            0.04
        );
}

.development-info span {
    display: block;

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;
}

.development-info strong {
    display: block;

    color: var(--text);

    font-size: 14px;

    line-height: 1.4;
}


/* ====================================================== */
/* AMENITIES */
/* ====================================================== */

.amenities-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.amenity-item {
    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 52px;

    padding:
        11px
        13px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-sm);

    background:
        rgba(
            255,
            255,
            255,
            0.02
        );

    color: #dbe0e5;

    font-size: 13px;
}

.amenity-item i {
    width: 20px;

    color: var(--accent);

    text-align: center;
}


/* ====================================================== */
/* INVESTMENT SECTION */
/* ====================================================== */

.investment-section {
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(
                211,
                173,
                71,
                0.12
            ),
            transparent 35%
        ),
        var(--card);
}

.investment-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.investment-card {
    min-width: 0;

    padding: 18px;

    border:
        1px solid
        var(--border-accent);

    border-radius:
        var(--radius);

    background:
        rgba(
            211,
            173,
            71,
            0.055
        );
}

.investment-card i {
    margin-bottom: 15px;

    color: var(--accent);

    font-size: 22px;
}

.investment-card span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 11px;
}

.investment-card strong {
    display: block;

    color: var(--accent);

    font-size: 19px;

    word-break: break-word;
}

.investment-disclaimer {
    margin:
        17px
        0
        0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.6;
}


/* ====================================================== */
/* PAYMENT PLAN */
/* ====================================================== */

.deposit-highlight {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-bottom: 18px;
}

.deposit-highlight > div {
    padding: 18px;

    border:
        1px solid
        var(--border-accent);

    border-radius:
        var(--radius);

    background: var(--accent-soft);
}

.deposit-highlight span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;
}

.deposit-highlight strong {
    color: var(--accent);

    font-size: 21px;
}

.payment-plan-description {
    color: #cdd4da;

    font-size: 14px;

    line-height: 1.7;
}

.payment-plan-description p {
    margin:
        0
        0
        10px;
}


/* ====================================================== */
/* MAP */
/* ====================================================== */

.map {
    width: 100%;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);
}

.map iframe {
    width: 100%;

    height: 370px;

    display: block;

    border: 0;
}


/* ====================================================== */
/* RIGHT SIDEBAR CARDS */
/* ====================================================== */

.purchase-card,
.mortgage-card,
.offplan-card {
    position: relative;

    width: 100%;

    padding: 24px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    background: var(--card);

    box-shadow: var(--shadow);
}


/* ====================================================== */
/* MORTGAGE CARD */
/* ====================================================== */

.mortgage-card {
    order: 1;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                211,
                173,
                71,
                0.10
            ),
            transparent 38%
        ),
        var(--card);
}


/* ====================================================== */
/* PURCHASE CARD */
/* ====================================================== */

.purchase-card {
    order: 2;

    /*
       Deliberately NOT sticky.

       The old position: sticky caused the property card to
       float over the mortgage calculator as the page moved.
       The sidebar now behaves as a normal vertical stack.
    */
    position: relative;
}

.sidebar-label {
    margin:
        0
        0
        5px;

    color: var(--accent);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.09em;
}

.purchase-card-header h2 {
    margin:
        0
        0
        8px;

    font-size: 23px;

    line-height: 1.3;
}

.purchase-card .location {
    margin:
        0
        0
        14px;

    color: var(--muted);

    font-size: 13px;
}

.purchase-card .location i {
    margin-right: 5px;

    color: var(--accent);
}

.purchase-card .price {
    margin:
        0
        0
        18px;

    color: var(--accent);

    font-size: 28px;

    font-weight: 800;

    line-height: 1.25;
}


/* ====================================================== */
/* OFF PLAN CARD */
/* ====================================================== */

.offplan-card {
    order: 3;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                81,
                120,
                222,
                0.13
            ),
            transparent 40%
        ),
        var(--card);
}


/* ====================================================== */
/* SIDEBAR PROPERTY SUMMARY */
/* ====================================================== */

.sidebar-property-summary {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    margin-bottom: 20px;

    padding:
        14px
        0;

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);
}

.sidebar-property-summary > div {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    padding:
        0
        5px;

    text-align: center;

    font-size: 11px;

    color: #ccd2d8;
}

.sidebar-property-summary > div:not(:last-child) {
    border-right:
        1px solid
        var(--border);
}

.sidebar-property-summary i {
    color: var(--accent);

    font-size: 17px;
}


/* ====================================================== */
/* BUTTONS */
/* ====================================================== */

.btn {
    width: 100%;

    min-height: 49px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 10px;

    padding:
        11px
        15px;

    border: 0;

    border-radius:
        var(--radius-sm);

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform
        0.2s ease,
        background
        0.2s ease,
        border-color
        0.2s ease;
}

.btn:hover {
    transform:
        translateY(
            -1px
        );
}

.primary-btn {
    background: var(--accent);

    color: #111;
}

.primary-btn:hover {
    background: var(--accent-light);
}

.whatsapp-enquiry-btn {
    border:
        1px solid
        rgba(
            37,
            211,
            102,
            0.40
        );

    background:
        rgba(
            37,
            211,
            102,
            0.11
        );

    color: #4ce280;
}

.whatsapp-enquiry-btn:hover {
    background:
        rgba(
            37,
            211,
            102,
            0.18
        );
}

.purchase-help {
    margin:
        17px
        0
        0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.6;

    text-align: center;
}


/* ====================================================== */
/* SIDEBAR SECTION HEADING */
/* ====================================================== */

.sidebar-section-heading {
    margin-bottom: 20px;
}

.sidebar-section-heading > span {
    display: block;

    margin-bottom: 4px;

    color: var(--accent);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.sidebar-section-heading h3 {
    margin:
        0
        0
        6px;

    font-size: 19px;
}

.sidebar-section-heading p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}


/* ====================================================== */
/* MORTGAGE CALCULATOR */
/* ====================================================== */

.mortgage-card form {
    display: flex;

    flex-direction: column;
}

.mortgage-card label {
    margin:
        0
        0
        6px;

    color: #cdd3d9;

    font-size: 11px;

    font-weight: 700;
}

.mortgage-card input,
.mortgage-card select {
    width: 100%;

    height: 45px;

    margin-bottom: 15px;

    padding:
        0
        12px;

    outline: none;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-sm);

    background: #10151c;

    color: white;

    font-size: 13px;

    transition:
        border-color
        0.2s ease,
        box-shadow
        0.2s ease;
}

.mortgage-card input:focus,
.mortgage-card select:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0
        3px
        rgba(
            211,
            173,
            71,
            0.08
        );
}


/* ====================================================== */
/* INPUT PREFIX */
/* ====================================================== */

.input-prefix {
    position: relative;
}

.input-prefix > span {
    position: absolute;

    left: 12px;

    top: 14px;

    z-index: 2;

    color: var(--muted);

    font-size: 12px;
}

.input-prefix input {
    padding-left: 50px;
}


/* ====================================================== */
/* MORTGAGE RESULTS */
/* ====================================================== */

.mortgage-results {
    margin-top: 7px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        rgba(
            0,
            0,
            0,
            0.13
        );
}

.mortgage-results > div {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding:
        12px
        13px;

    border-bottom:
        1px solid
        var(--border);
}

.mortgage-results > div:last-child {
    border-bottom: 0;
}

.mortgage-results span {
    color: var(--muted);

    font-size: 11px;
}

.mortgage-results strong {
    color: white;

    font-size: 12px;

    text-align: right;
}

.mortgage-results .monthly-payment {
    background: var(--accent-soft);
}

.mortgage-results .monthly-payment span {
    color: #d6d2c4;
}

.mortgage-results .monthly-payment strong {
    color: var(--accent);

    font-size: 15px;
}

.calculator-disclaimer {
    margin:
        14px
        0
        0;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.6;
}


/* ====================================================== */
/* OFF-PLAN ROWS */
/* ====================================================== */

.offplan-row {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    padding:
        12px
        0;

    border-bottom:
        1px solid
        var(--border);
}

.offplan-row:last-child {
    border-bottom: 0;
}

.offplan-row span {
    color: var(--muted);

    font-size: 11px;
}

.offplan-row strong {
    max-width: 58%;

    color: white;

    font-size: 12px;

    text-align: right;
}


/* ====================================================== */
/* FLOATING WHATSAPP */
/* ====================================================== */

#whatsapp-chat {
    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 1000;

    display: flex;

    align-items: center;

    gap: 10px;
}

.whatsapp-btn {
    width: 58px;

    height: 58px;

    flex: 0 0 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #25d366;

    color: white;

    font-size: 29px;

    box-shadow:
        0
        5px
        20px
        rgba(
            0,
            0,
            0,
            0.30
        );

    transition:
        transform
        0.2s ease;
}

.whatsapp-btn:hover {
    transform: scale(1.06);
}

.whatsapp-text {
    padding:
        9px
        14px;

    border-radius: 20px;

    background: white;

    color: #222;

    font-size: 12px;

    font-weight: 600;

    box-shadow:
        0
        3px
        15px
        rgba(
            0,
            0,
            0,
            0.25
        );

    transition:
        opacity
        0.25s ease,
        transform
        0.25s ease;
}

.whatsapp-text.hidden {
    opacity: 0;

    pointer-events: none;

    transform:
        translateX(
            10px
        );
}


/* ====================================================== */
/* TABLET */
/* ====================================================== */

@media (
    max-width: 1050px
) {

    .container {
        grid-template-columns:
            minmax(0, 1fr)
            340px;

        gap: 24px;
    }

    .gallery .hero {
        height: 430px;
    }

    .amenities-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .investment-grid {
        grid-template-columns: 1fr;
    }

    .development-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* ====================================================== */
/* SMALL TABLET */
/* ====================================================== */

@media (
    max-width: 850px
) {

    .hero1 {
        height: 440px;
    }

    .container {
        display: block;

        padding-top: 30px;
    }

    .right {
        margin-top: 28px;
    }

    .gallery .hero {
        height: 460px;
    }

    .development-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


/* ====================================================== */
/* MOBILE */
/* ====================================================== */

@media (
    max-width: 700px
) {

    .hero1 {
        height: 420px;
    }

    .hero1 .meta {
        padding:
            0
            17px
            30px;
    }

    .hero1 .title {
        font-size: 34px;
    }

    .hero1 .sub {
        gap:
            8px
            12px;

        font-size: 12px;
    }

    .hero-price {
        width: 100%;

        margin-top: 3px;

        font-size: 20px;
    }

    .container {
        padding:
            22px
            15px
            60px;
    }

    .gallery .hero {
        height: 360px;

        border-radius:
            var(--radius);
    }

    .gallery-open-indicator {
        right: 12px;

        bottom: 12px;

        padding:
            8px
            11px;

        font-size: 11px;
    }

    .thumb {
        flex-basis: 85px;

        width: 85px;

        height: 65px;
    }

    .thumb-btn {
        display: none;
    }

    .content-section {
        padding: 21px;

        border-radius:
            var(--radius);
    }

    .section-heading h2 {
        font-size: 22px;
    }

    .details-grid {
        grid-template-columns: 1fr;
    }

    .development-grid {
        grid-template-columns: 1fr;
    }

    .amenities-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .investment-grid {
        grid-template-columns: 1fr;
    }

    .deposit-highlight {
        grid-template-columns: 1fr;
    }

    .map iframe {
        height: 300px;
    }

    .purchase-card,
    .mortgage-card,
    .offplan-card {
        padding: 20px;
    }

    .purchase-card .price {
        font-size: 25px;
    }


    /* ================================================== */
    /* MOBILE FULLSCREEN GALLERY */
    /* ================================================== */

    .gallery-modal-dialog {
        width: 100vw;

        height: 100vh;

        padding:
            60px
            10px
            92px;
    }

    .gallery-modal-image-wrap img {
        border-radius: 4px;
    }

    .gallery-modal-close {
        top: 10px;

        right: 12px;

        width: 42px;

        height: 42px;
    }

    .gallery-modal-counter {
        top: 17px;
    }

    .gallery-modal-nav {
        width: 44px;

        height: 44px;

        background:
            rgba(
                9,
                12,
                16,
                0.72
            );
    }

    .gallery-modal-prev {
        left: 8px;
    }

    .gallery-modal-next {
        right: 8px;
    }

    .gallery-modal-thumbs {
        left: 8px;

        right: 8px;

        bottom: 10px;

        height: 70px;
    }

    .gallery-modal-thumb {
        flex-basis: 76px;

        width: 76px;

        height: 56px;
    }

}


/* ====================================================== */
/* SMALL MOBILE */
/* ====================================================== */

@media (
    max-width: 480px
) {

    .hero1 {
        height: 380px;
    }

    .hero1 .title {
        font-size: 30px;
    }

    .hero-badges {
        margin-bottom: 10px;
    }

    .badge {
        padding:
            5px
            9px;

        font-size: 9px;
    }

    .gallery .hero {
        height: 285px;
    }

    .amenities-grid {
        grid-template-columns: 1fr;
    }

    .sidebar-property-summary {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .sidebar-property-summary span {
        font-size: 10px;
    }

    .investment-card strong {
        font-size: 17px;
    }

    .whatsapp-text {
        display: none;
    }

    #whatsapp-chat {
        right: 14px;

        bottom: 14px;
    }

    .whatsapp-btn {
        width: 54px;

        height: 54px;

        flex-basis: 54px;

        font-size: 26px;
    }

}


/* ====================================================== */
/* VERY SMALL MOBILE */
/* ====================================================== */

@media (
    max-width: 360px
) {

    .hero1 .title {
        font-size: 27px;
    }

    .content-section {
        padding:
            18px
            15px;
    }

    .purchase-card,
    .mortgage-card,
    .offplan-card {
        padding:
            18px
            16px;
    }

    .sidebar-property-summary {
        gap: 3px;
    }

    .gallery-modal-nav {
        width: 40px;

        height: 40px;
    }

}