/* =========================================================
   Shunshig Monochrome Blue Luxury Theme
   Official primary color: #002E88
   No gold or champagne colors are used.
   This file is intentionally unminified.
   ========================================================= */

:root {
    --mono-navy-1000: #000817;
    --mono-navy-950: #000f2e;
    --mono-navy-900: #00163f;
    --mono-blue-850: #00246b;
    --mono-blue-800: #002e88;
    --mono-blue-700: #0b45a8;
    --mono-blue-600: #2868c4;
    --mono-blue-500: #4b7fd1;
    --mono-blue-400: #78a0dd;
    --mono-blue-300: #adc4e9;
    --mono-blue-200: #dce7f7;
    --mono-blue-100: #eff4fb;

    --mono-white: #ffffff;
    --mono-surface: #fbfcff;
    --mono-ink: #0c1830;
    --mono-muted: #66738b;
    --mono-line: rgba(0, 46, 136, 0.11);

    --mono-shadow-sm:
        0 12px 30px rgba(0, 31, 93, 0.08);

    --mono-shadow-md:
        0 24px 58px rgba(0, 31, 93, 0.14);

    --mono-shadow-lg:
        0 38px 90px rgba(0, 18, 55, 0.22);

    --mono-ease:
        300ms cubic-bezier(0.22, 1, 0.36, 1);

    /*
       Compatibility override:
       previous luxury.css variable names now resolve to blue,
       so no champagne/gold color remains in computed styles.
    */
    --luxury-champagne-600: #2868c4;
    --luxury-champagne-500: #4b7fd1;
    --luxury-champagne-400: #78a0dd;
}

/* ---------------------------------------------------------
   Remove champagne/gold styling from the previous layer
   --------------------------------------------------------- */

.section-kicker,
.text-gold,
.text-green,
.layout-card-number,
.material-detail-brand,
.material-navigation-card span,
.news-card time,
.project-scale-value,
.result-number,
.payment-alert .amount,
.featured-price,
.layout-detail-price,
.property-overview-price {
    color: var(--mono-blue-700) !important;
}

.section-kicker::before,
.text-center .section-kicker::after {
    background:
        linear-gradient(
            90deg,
            var(--mono-blue-400),
            transparent
        ) !important;
}

.text-center .section-kicker::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--mono-blue-600)
        ) !important;
}

.gold-divider,
.blue-divider {
    width: 72px;
    height: 2px;
    margin: 18px auto 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--mono-blue-700),
            transparent
        );
}

.project-feature-card i,
.feature-detail i,
.stat-item i,
.why-card-icon,
.contact-card i,
.material-benefit-card i,
.header-phone i,
.hero-feature i,
.portal-stat .icon,
.admin-dashboard-stat i,
.admin-activity-icon {
    color: var(--mono-blue-700) !important;
}

/* ---------------------------------------------------------
   Header and hero
   --------------------------------------------------------- */

.site-header-home .navbar {
    background:
        linear-gradient(
            180deg,
            rgba(0, 8, 23, 0.96) 0%,
            rgba(0, 22, 63, 0.65) 70%,
            rgba(0, 22, 63, 0) 100%
        ) !important;
}

.site-header-inner .navbar,
.site-header .navbar.navigation-scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow:
        0 14px 40px rgba(0, 31, 93, 0.09) !important;
}

.navbar .nav-link::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--mono-blue-600),
            transparent
        ) !important;
}

.nav-dropdown-icon {
    color: currentColor !important;
}

.navbar .luxury-hover-dropdown:hover .nav-dropdown-icon,
.navbar .luxury-hover-dropdown:focus-within .nav-dropdown-icon {
    color: var(--mono-blue-600) !important;
}

.navbar .luxury-hover-dropdown .dropdown-item::before {
    background: var(--mono-blue-600) !important;
}

.hero {
    min-height: 720px !important;
    padding-bottom: 80px !important;
}

.hero::before {
    background:
        linear-gradient(
            90deg,
            rgba(0, 8, 23, 0.97) 0%,
            rgba(0, 22, 63, 0.86) 40%,
            rgba(0, 46, 136, 0.20) 72%,
            rgba(0, 46, 136, 0.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 8, 23, 0.65) 0%,
            rgba(0, 8, 23, 0) 55%
        ) !important;
}

.hero::after {
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(120, 160, 221, 0.74),
            transparent
        ) !important;
}

.hero h1 {
    font-size: clamp(3.8rem, 7vw, 7.3rem) !important;
    font-weight: 500 !important;
}

.hero .btn-gold {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(0, 46, 136, 0.38) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px);
}

.hero .btn-gold:hover {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: var(--mono-blue-800) !important;
}

/* ---------------------------------------------------------
   Home advantages separated from hero
   --------------------------------------------------------- */

.home-advantages-section {
    position: relative;
    z-index: 4;
    padding: 58px 0 64px;
    background: #ffffff;
    border-bottom: 1px solid var(--mono-line);
}

.home-advantages-heading {
    margin-bottom: 34px;
}

.home-advantages-heading .section-title {
    margin: 0 auto;
    font-size: clamp(1.65rem, 2.6vw, 2.45rem);
}

.home-advantages-section .hero-feature-strip {
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
}

.home-advantages-section .hero-feature {
    min-height: 150px !important;
    height: 100%;
    flex-direction: column;
    justify-content: center !important;
    gap: 16px;
    padding: 24px 18px !important;
    border: 1px solid var(--mono-line) !important;
    background: #ffffff;
    color: var(--mono-ink) !important;
    text-align: center;
    box-shadow: var(--mono-shadow-sm);
    transition:
        transform var(--mono-ease),
        box-shadow var(--mono-ease),
        border-color var(--mono-ease);
}

.home-advantages-section .hero-feature:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 46, 136, 0.30) !important;
    box-shadow: var(--mono-shadow-md);
}

.home-advantages-section .hero-feature i {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(0, 46, 136, 0.16);
    border-radius: 0;
    background: var(--mono-blue-100);
    color: var(--mono-blue-800) !important;
    font-size: 1.3rem;
}

.home-advantages-section .hero-feature span {
    color: var(--mono-ink);
    font-weight: 700;
    line-height: 1.6;
}

.home-advantages-section .row {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 14px;
}

/* ---------------------------------------------------------
   Buttons and cards
   --------------------------------------------------------- */

.btn-gold,
.btn-copper {
    border-color: var(--mono-blue-700) !important;
    background:
        linear-gradient(
            135deg,
            var(--mono-blue-600),
            var(--mono-blue-800)
        ) !important;
    color: #ffffff !important;
    box-shadow:
        0 13px 28px rgba(0, 46, 136, 0.18) !important;
}

.btn-gold:hover,
.btn-copper:hover {
    border-color: var(--mono-blue-600) !important;
    background:
        linear-gradient(
            135deg,
            var(--mono-blue-700),
            var(--mono-blue-600)
        ) !important;
    color: #ffffff !important;
}

.btn-green,
.btn-brand {
    background:
        linear-gradient(
            135deg,
            var(--mono-blue-800),
            var(--mono-navy-900)
        ) !important;
}

.btn-outline-green,
.btn-outline-brand {
    border-color: rgba(0, 46, 136, 0.30) !important;
    color: var(--mono-blue-800) !important;
}

.btn-outline-green:hover,
.btn-outline-brand:hover {
    border-color: var(--mono-blue-800) !important;
    background: var(--mono-blue-800) !important;
    color: #ffffff !important;
}

.badge-soft {
    border-color: rgba(0, 46, 136, 0.10) !important;
    background: var(--mono-blue-100) !important;
    color: var(--mono-blue-800) !important;
}

.home-project-card:hover,
.news-card:hover,
.apartment-card:hover,
.layout-card:hover,
.contact-card:hover,
.material-benefit-card:hover,
.material-navigation-card:hover {
    border-color: rgba(0, 46, 136, 0.28) !important;
    box-shadow: var(--mono-shadow-md) !important;
}

.info-stat {
    border-left-color: var(--mono-blue-700) !important;
}

/* ---------------------------------------------------------
   Dark blue content blocks
   --------------------------------------------------------- */

.masterplan-band,
.project-feature-section,
.site-footer {
    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(75, 127, 209, 0.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(40, 104, 196, 0.18),
            transparent 34%
        ),
        var(--mono-navy-1000) !important;
}

.project-scale-card,
.project-feature-card {
    border-color: rgba(120, 160, 221, 0.20) !important;
}

.project-scale-value,
.project-feature-section .section-kicker,
.masterplan-band .section-kicker {
    color: var(--mono-blue-300) !important;
}

.project-feature-section .project-feature-card i {
    color: var(--mono-blue-300) !important;
}

/* ---------------------------------------------------------
   Booking steps as a full blue luxury band
   --------------------------------------------------------- */

.booking-luxury-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 14% 0%,
            rgba(75, 127, 209, 0.24),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 100%,
            rgba(40, 104, 196, 0.22),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--mono-blue-800),
            var(--mono-navy-950)
        );
    color: #ffffff;
}

.booking-luxury-section::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );
    background-size: 54px 54px;
    content: "";
    pointer-events: none;
}

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

.booking-luxury-section .section-kicker {
    color: var(--mono-blue-300) !important;
}

.booking-luxury-section .section-kicker::before,
.booking-luxury-section .text-center .section-kicker::after,
.booking-luxury-section .gold-divider {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--mono-blue-300),
            transparent
        ) !important;
}

.booking-luxury-section .section-title,
.booking-luxury-section .booking-step h3,
.booking-luxury-section .booking-step strong {
    color: #ffffff !important;
}

.booking-luxury-section .booking-step {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.booking-luxury-section .booking-step-icon {
    border-color: rgba(255, 255, 255, 0.45) !important;
    background: #ffffff !important;
    color: var(--mono-blue-800) !important;
}

.booking-luxury-section .booking-step p {
    color: rgba(255, 255, 255, 0.72) !important;
}

.booking-luxury-section
.booking-step-column:not(:last-child)::after {
    color: var(--mono-blue-300) !important;
}

/* ---------------------------------------------------------
   Layout, calculator and form areas
   --------------------------------------------------------- */

.layout-card-image,
.floorplan-wrap,
.layout-detail-image,
.layout-media-gallery {
    background:
        radial-gradient(
            circle at 50% 28%,
            rgba(255, 255, 255, 0.12),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            var(--mono-blue-700),
            var(--mono-navy-950)
        ) !important;
}

.result-card,
.payment-alert,
.project-information-form,
.inquiry-panel {
    background:
        radial-gradient(
            circle at 82% 0%,
            rgba(75, 127, 209, 0.20),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--mono-blue-800),
            var(--mono-navy-950)
        ) !important;
}

.result-card .result-number,
.payment-alert .amount {
    color: #ffffff !important;
}

/* ---------------------------------------------------------
   Customer and admin sidebars
   --------------------------------------------------------- */

.portal-sidebar,
.admin-sidebar {
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(120, 160, 221, 0.22),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #002e88 0%,
            #002776 60%,
            #001f5d 100%
        ) !important;
}

.portal-navigation a:hover,
.portal-navigation a.active {
    border-left-color: #ffffff !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.03)
        ) !important;
    color: #ffffff !important;
}

.portal-navigation a.active i,
.portal-navigation a:hover i {
    color: #ffffff !important;
}

.navigation-count {
    background: #ffffff !important;
    color: var(--mono-blue-800) !important;
}

.portal-manager {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.portal-stat::before,
.admin-dashboard-stat::before {
    background:
        linear-gradient(
            90deg,
            var(--mono-blue-800),
            var(--mono-blue-400)
        ) !important;
}

.progress-ring {
    background:
        conic-gradient(
            var(--mono-blue-700) 0 37.5%,
            #e5ebf4 37.5% 100%
        ) !important;
}

/* ---------------------------------------------------------
   jQuery UI dialog
   --------------------------------------------------------- */

.ui-dialog {
    border-color: rgba(0, 46, 136, 0.20) !important;
}

.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-buttonpane button:last-child {
    background:
        linear-gradient(
            135deg,
            var(--mono-blue-800),
            var(--mono-navy-950)
        ) !important;
    border-color: var(--mono-blue-800) !important;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .hero {
        min-height: 680px !important;
    }
}

@media (max-width: 991.98px) {
    .hero {
        min-height: 620px !important;
    }

    .home-advantages-section {
        padding: 48px 0 54px;
    }

    .home-advantages-section .hero-feature {
        min-height: 142px !important;
    }
}

@media (max-width: 767.98px) {
    .hero {
        min-height: 590px !important;
        padding-bottom: 58px !important;
    }

    .hero h1 {
        font-size: clamp(3.2rem, 15vw, 5rem) !important;
    }

    .home-advantages-section {
        padding: 42px 0 48px;
    }

    .home-advantages-section .hero-feature-strip .row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-advantages-section
    .hero-feature-strip
    .row > [class*="col-"] {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .home-advantages-section
    .hero-feature-strip
    .row > [class*="col-"]:last-child {
        grid-column: 1 / -1;
    }

    .home-advantages-section .hero-feature {
        min-height: 136px !important;
        padding: 20px 12px !important;
    }

    .home-advantages-section .hero-feature span {
        font-size: 0.68rem;
    }

    .booking-luxury-section .booking-step {
        padding: 18px 12px !important;
    }
}

@media (max-width: 480px) {
    .home-advantages-section .hero-feature {
        min-height: 128px !important;
    }

    .home-advantages-section .hero-feature i {
        width: 46px;
        height: 46px;
    }
}


/* =========================================================
   Compact typography and spacing refinement — V1.4
   ========================================================= */

h1 {
    font-size: clamp(2.35rem, 4.2vw, 4.4rem);
    line-height: 1.08;
}

h2 {
    font-size: clamp(1.85rem, 3.1vw, 3rem);
    line-height: 1.12;
}

h3 {
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    line-height: 1.25;
}

h4 {
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.9rem;
}

.section-title {
    margin-bottom: 20px;
    font-size: clamp(2rem, 3.4vw, 3.35rem);
    line-height: 1.09;
}

.section-space {
    padding-top: 66px;
    padding-bottom: 66px;
}

.partner-section {
    padding-top: 58px;
    padding-bottom: 58px;
}

.home-advantages-section {
    padding-top: 44px;
    padding-bottom: 48px;
}

.home-advantages-heading {
    margin-bottom: 26px;
}

.hero {
    min-height: 650px !important;
}

.hero h1 {
    max-width: 760px;
    margin-bottom: 24px;
    font-size: clamp(3.35rem, 6vw, 6rem) !important;
    line-height: 0.98;
}

.hero p {
    font-size: 0.94rem;
    line-height: 1.75;
}

.page-hero {
    padding-top: 158px;
    padding-bottom: 76px;
}

.page-hero h1 {
    font-size: clamp(2.55rem, 4.5vw, 3.5rem);
    line-height: 1.04;
}

.page-hero p {
    margin-top: 16px;
    font-size: 0.92rem;
}

.home-project-card h3,
.news-card h3,
.layout-card h3,
.apartment-card h3,
.why-card h3,
.booking-step h3,
.feature-detail h3,
.project-feature-card h3,
.material-benefit-card h3 {
    font-size: 1.03rem;
    line-height: 1.35;
}

.portal-card-header h2,
.admin-page-heading h1,
.portal-main h1 {
    font-size: clamp(1.55rem, 2.5vw, 2.1rem);
}

.result-card h3,
.property-overview-panel h2,
.featured-apartment-content h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.35rem);
}

.section-copy {
    margin-bottom: 0;
}

.text-center.mb-5,
.row.align-items-end.mb-5 {
    margin-bottom: 2.25rem !important;
}

@media (max-width: 991.98px) {
    .section-space {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .hero {
        min-height: 590px !important;
    }

    .hero h1 {
        font-size: clamp(3rem, 9vw, 4.8rem) !important;
    }

    .page-hero {
        padding-top: 138px;
        padding-bottom: 62px;
    }
}

@media (max-width: 767.98px) {
    h1 {
        font-size: clamp(2.15rem, 10vw, 3.15rem);
    }

    h2 {
        font-size: clamp(1.7rem, 8vw, 2.35rem);
    }

    h3 {
        font-size: 1.12rem;
    }

    .section-title {
        font-size: clamp(1.8rem, 8.6vw, 2.55rem);
    }

    .section-space {
        padding-top: 52px;
        padding-bottom: 52px;
    }

    .partner-section {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .hero {
        min-height: 540px !important;
        padding-bottom: 48px !important;
    }

    .hero h1 {
        font-size: clamp(2.85rem, 13vw, 4.15rem) !important;
        line-height: 1;
    }

    .hero p {
        font-size: 0.86rem;
    }

    .page-hero {
        padding-top: 126px;
        padding-bottom: 52px;
    }

    .page-hero h1 {
        font-size: clamp(2.15rem, 10vw, 3.25rem);
    }

    .home-advantages-section {
        padding-top: 38px;
        padding-bottom: 42px;
    }

    .text-center.mb-5,
    .row.align-items-end.mb-5 {
        margin-bottom: 1.75rem !important;
    }
}

@media (max-width: 480px) {
    .section-space {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    .hero {
        min-height: 510px !important;
    }

    .hero h1 {
        font-size: clamp(2.65rem, 13vw, 3.65rem) !important;
    }

    .section-title {
        font-size: clamp(1.7rem, 9vw, 2.25rem);
    }
}