/* =========================================================
   Shunshig 2026 Logo Brand Update
   Logo palette:
   #041990 → #1B25AB → #3030C6
   This file is intentionally unminified.
   ========================================================= */

:root {
    --logo-blue-top: #041990;
    --logo-blue-middle: #1b25ab;
    --logo-blue-bottom: #3030c6;
    --logo-blue-soft: #eef0ff;
    --logo-blue-line: rgba(27, 37, 171, 0.14);

    /*
       Update existing monochrome variables so the complete
       website follows the new official logo palette.
    */
    --mono-navy-1000: #000713;
    --mono-navy-950: #000c29;
    --mono-navy-900: #07104d;
    --mono-blue-850: #071987;
    --mono-blue-800: #101e9c;
    --mono-blue-700: #1b25ab;
    --mono-blue-600: #3030c6;
    --mono-blue-500: #5555d6;
    --mono-blue-400: #8888e5;
    --mono-blue-300: #b5b5ee;
    --mono-blue-200: #ddddf8;
    --mono-blue-100: #f1f1fc;
}

/* Logo sizing and switching */

.brand-logo {
    width: 172px !important;
    height: 70px !important;
    object-fit: contain;
    object-position: left center;
}

.offcanvas-logo,
.footer-logo,
.portal-brand img {
    object-fit: contain;
}

.offcanvas-logo {
    width: 170px;
    max-height: 78px;
}

.footer-logo {
    width: 188px;
    max-height: 88px;
}

.portal-brand img {
    width: 176px;
    max-height: 84px;
}

.site-header-home
.navbar:not(.navigation-scrolled)
.brand-logo-light {
    display: block;
}

.site-header-home
.navbar:not(.navigation-scrolled)
.brand-logo-dark {
    display: none;
}

.site-header-inner .brand-logo-light,
.site-header .navbar.navigation-scrolled .brand-logo-light {
    display: none;
}

.site-header-inner .brand-logo-dark,
.site-header .navbar.navigation-scrolled .brand-logo-dark {
    display: block;
}

/* Logo-derived gradient surfaces */

.btn-green,
.btn-brand,
.btn-gold,
.btn-copper,
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-buttonpane button:last-child {
    border-color: var(--logo-blue-middle) !important;
    background:
        linear-gradient(
            135deg,
            var(--logo-blue-top) 0%,
            var(--logo-blue-middle) 52%,
            var(--logo-blue-bottom) 100%
        ) !important;
}

.btn-green:hover,
.btn-brand:hover,
.btn-gold:hover,
.btn-copper:hover {
    border-color: var(--logo-blue-bottom) !important;
    background:
        linear-gradient(
            135deg,
            #0c1ca2 0%,
            #2930bf 55%,
            #4141d3 100%
        ) !important;
}

.page-hero,
.booking-luxury-section,
.result-card,
.payment-alert,
.project-information-form,
.inquiry-panel {
    background:
        radial-gradient(
            circle at 85% 4%,
            rgba(136, 136, 229, 0.22),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--logo-blue-top) 0%,
            var(--logo-blue-middle) 55%,
            var(--logo-blue-bottom) 100%
        ) !important;
}

.portal-sidebar,
.admin-sidebar {
    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(181, 181, 238, 0.20),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            var(--logo-blue-top) 0%,
            var(--logo-blue-middle) 56%,
            #151a82 100%
        ) !important;
}

.masterplan-band,
.project-feature-section,
.site-footer {
    background:
        radial-gradient(
            circle at 18% 8%,
            rgba(85, 85, 214, 0.19),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 82%,
            rgba(48, 48, 198, 0.22),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #000713,
            #07104d 66%,
            #101e9c
        ) !important;
}

.layout-card-image,
.floorplan-wrap,
.layout-detail-image,
.layout-media-gallery {
    background:
        radial-gradient(
            circle at 50% 26%,
            rgba(255, 255, 255, 0.13),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            var(--logo-blue-middle),
            var(--logo-blue-top)
        ) !important;
}

/* Header and navigation */

.site-header-home .navbar {
    background:
        linear-gradient(
            180deg,
            rgba(0, 7, 19, 0.97) 0%,
            rgba(4, 25, 144, 0.57) 70%,
            rgba(4, 25, 144, 0) 100%
        ) !important;
}

.site-header-inner .navbar,
.site-header .navbar.navigation-scrolled {
    border-bottom-color: var(--logo-blue-line) !important;
}

.navbar .nav-link::after,
.gold-divider,
.blue-divider,
.portal-stat::before,
.admin-dashboard-stat::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--logo-blue-middle),
            var(--logo-blue-bottom),
            transparent
        ) !important;
}

.section-kicker,
.text-gold,
.text-green,
.layout-card-number,
.material-detail-brand,
.material-navigation-card span,
.news-card time {
    color: var(--mono-blue-400) !important;
}

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

/* Cards, fields and active states */

.badge-soft,
.home-advantages-section .hero-feature i {
    border-color: var(--logo-blue-line) !important;
    background: var(--logo-blue-soft) !important;
    color: var(--logo-blue-middle) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--logo-blue-middle) !important;
    box-shadow:
        0 0 0 0.2rem rgba(27, 37, 171, 0.12) !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(48, 48, 198, 0.28) !important;
}

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

/* Original logo reference card for brand documentation */

.logo-brand-reference {
    overflow: hidden;
    border-radius: 26px;
    background:
        linear-gradient(
            180deg,
            var(--logo-blue-top),
            var(--logo-blue-bottom)
        );
}

@media (max-width: 767.98px) {
    .brand-logo {
        width: 145px !important;
        height: 60px !important;
    }

    .offcanvas-logo {
        width: 150px;
    }

    .portal-brand img {
        width: 150px;
    }
}