/* Custom HLM overrides on top of the bundled theme.
   Group rules by section with a comment header so this file stays readable
   as more sections are added. */

/* ==========================================================================
   Top utility bar — mobile redesign (≤768px)
   Source: resources/views/layouts/hlm/header.blade.php (.top-bar)
   Desktop styling is untouched — all rules live inside the mobile media query.

   Goal: clean, modern, professional layout that fits the small viewport.
   Layout (top → bottom):
     1. Pill-style secondary link chips (wrap)
     2. Three full-width CTA buttons with subtle elevation
     3. Compact marquee
   ========================================================================== */

@media only screen and (max-width: 768px) {
    /* ---------- Container ----------
       Warm off-white instead of pure white reads as more editorial/premium.
       Thin top accent line ties into the brand. */
    .top-bar {
        background: #fafaf7;
        padding: 14px 0 16px;
        border-top: 2px solid #f5b400;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: none;
    }
    .top-bar .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }
    .top-bar > .container-fluid > .row.justify-content-between {
        margin: 0;
        flex-direction: column;
        gap: 14px;
    }

    /* ---------- Secondary link chips (pill style, wrapped) ---------- */
    .top-bar .dlab-topbar-left {
        width: 100%;
        max-width: 100%;
        padding: 0;
        position: relative;
        padding-bottom: 14px;
    }
    /* Hairline divider between the chip row and the CTA row */
    .top-bar .dlab-topbar-left::after {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        bottom: 0;
        height: 1px;
        background: linear-gradient(
            to right,
            transparent,
            rgba(0, 0, 0, 0.08),
            transparent
        );
    }
    .top-bar .mobile-sound-play {
        flex-direction: row !important;
        width: 100%;
    }
    /* 3-column grid → all 6 chips lay out as 2 rows of 3, regardless of
       label length. Long labels wrap to two lines inside their pill;
       grid auto-balances row heights so the row stays even. */
    .top-bar .mobile-sound-play ul,
    .top-bar .dlab-topbar-left ul {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        align-items: stretch;
        justify-items: stretch;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
    }

    /* Reset the theme's stacked layout + dividers. Each li fills its cell. */
    .top-bar .mobile-sound-play ul li,
    .top-bar .dlab-topbar-left ul li {
        display: flex !important;
        flex: 1 1 auto;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1;
        position: static;
        min-width: 0;
    }
    .top-bar .mobile-sound-play ul li:after,
    .top-bar .dlab-topbar-left ul li:after {
        content: none !important;
        display: none !important;
    }

    /* Default chip — fills its grid cell, centred text, wraps inside the
       pill when label is too long for the cell. */
    .top-bar .mobile-sound-play ul li a,
    .top-bar .dlab-topbar-left ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        width: 100%;
        padding: 6px 8px !important;
        font-size: 10px;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: 0.15px;
        color: #475569 !important;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 999px;
        text-decoration: none;
        text-align: center;
        white-space: normal;
        word-break: keep-all;
        transition:
            background 0.15s ease,
            border-color 0.15s ease,
            color 0.15s ease,
            transform 0.1s ease;
    }
    .top-bar .mobile-sound-play ul li a:hover,
    .top-bar .dlab-topbar-left ul li a:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #0f172a !important;
    }
    .top-bar .mobile-sound-play ul li a:active,
    .top-bar .dlab-topbar-left ul li a:active {
        transform: translateY(1px);
    }

    /* Hide low-priority links on mobile to keep the strip compact.
       Contact Us is also already reachable from the sticky bottom nav. */
    .top-bar .mobile-sound-play ul li:has(a[href*="upcoming-events"]),
    .top-bar .mobile-sound-play ul li:has(a[href*="creative-at-hlm"]),
    .top-bar .mobile-sound-play ul li:has(a[href*="Admission%20Portal"]),
    .top-bar .mobile-sound-play ul li:has(a[href*="Admission Portal"]) {
        display: none !important;
    }

    /* Drop the " & Happenings" suffix from the Events chip on mobile so
       it fits on a single line in its pill. */
    .top-bar .mobile-sound-play ul li a .hide-on-mobile {
        display: none;
    }

    /* Highlighted chip — replace the blinking flash-bg with a calm cream
       pill + amber dot indicator. Reads as "live / important" without
       the noise. */
    .top-bar .mobile-sound-play ul li a.flash-bg {
        animation: none !important;
        position: relative;
        background: #fffaf0 !important;
        color: #78350f !important;
        font-weight: 600;
        border-color: #fcd9a4 !important;
        padding-left: 22px !important;
        padding-right: 12px !important;
    }
    .top-bar .mobile-sound-play ul li a.flash-bg::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 50%;
        width: 6px;
        height: 6px;
        margin-top: -3px;
        border-radius: 50%;
        background: #d97706;
        box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.18);
        animation: hlm-pulse-dot 1.8s ease-in-out infinite;
    }
    @keyframes hlm-pulse-dot {
        0%,
        100% {
            box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.18);
        }
        50% {
            box-shadow: 0 0 0 5px rgba(217, 119, 6, 0.05);
        }
    }

    /* Hide the "Enquire Now" CTA on mobile — the bottom nav's Apply button
       opens the same enquiry modal, so this is redundant on small screens. */
    .top-bar .dlab-topbar-right #open-popup-link2 {
        display: none !important;
    }

    /* ---------- Primary CTA buttons (sleek / refined) ----------
       Sharper corners (4px), tighter typography (smaller font + wider
       tracking), inset top highlight, two-layer drop shadow, and a
       refined hover lift + brightness shift. */
    .top-bar .dlab-topbar-right {
        display: flex !important;
        width: 100%;
        gap: 8px;
        padding: 0;
        margin: 0;
        justify-content: stretch;
        align-items: stretch;
    }
    .top-bar .dlab-topbar-right .site-button {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        padding: 13px 6px;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 1px;
        text-align: center;
        text-transform: uppercase;
        white-space: normal;
        overflow-wrap: break-word;
        border-radius: 4px;
        border: 0;
        position: relative;
        /* Inset top highlight for a subtle 3D feel + soft layered shadow. */
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.28),
            inset 0 -1px 0 rgba(0, 0, 0, 0.08),
            0 1px 2px rgba(0, 0, 0, 0.08),
            0 3px 6px rgba(0, 0, 0, 0.05);
        transition:
            transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1),
            box-shadow 0.18s ease,
            filter 0.18s ease;
    }
    .top-bar .dlab-topbar-right .site-button:hover,
    .top-bar .dlab-topbar-right .site-button:focus {
        transform: translateY(-1px);
        filter: brightness(1.04);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.28),
            inset 0 -1px 0 rgba(0, 0, 0, 0.08),
            0 4px 10px rgba(0, 0, 0, 0.14),
            0 8px 18px rgba(0, 0, 0, 0.06);
        text-decoration: none;
    }
    .top-bar .dlab-topbar-right .site-button:active {
        transform: translateY(0);
        filter: brightness(0.96);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            inset 0 -1px 0 rgba(0, 0, 0, 0.1),
            0 1px 2px rgba(0, 0, 0, 0.08);
    }

    /* ---------- Marquee strip ---------- */
    .top-bar .action-area.marquee-head {
        font-size: 12px;
        padding: 6px 8px;
        border-radius: 6px;
        margin-top: 10px;
    }
    .top-bar .action-area.marquee-head.marquee ul li {
        font-size: 12px;
        line-height: 1.3;
    }
}

/* ==========================================================================
   Home page hero banner — use the designed desktop carousel on mobile too
   Source: resources/views/pages/home.blade.php (#mobile-banner / #desktop-banner)
   Theme default (skin-hlm2.css) swaps to #mobile-banner under 767px which
   shows plain event photos. We want the same designed banners everywhere.
   ========================================================================== */

@media (max-width: 767px) {
    /* The theme hides #desktop-banner under 767px (skin-hlm2.css). The
       separate #mobile-banner block has been removed from home.blade.php,
       so override the theme and keep the desktop banner visible on mobile. */
    #desktop-banner {
        display: block !important;
    }
    /* Hide the prev/next arrows on the hero banner on mobile — they overlap
       the banner art and look intrusive on small screens. Swipe still works. */
    #desktop-banner .owl-nav,
    #desktop-banner .owl-prev,
    #desktop-banner .owl-next {
        display: none !important;
    }

    /* Shrink the sticky main menu from the theme's 120px (skin-hlm2.css)
       to 100px on mobile for a tighter header. */
    .main-bar {
        height: 100px !important;
    }
    /* Shrink the HLM logo on mobile (theme sets 215–220px which dominates
       the bar). */
    .logo-header img {
        width: 150px !important;
        max-width: 150px !important;
        height: auto !important;
    }

    /* Logo flush left, hamburger flush right, both vertically centred.
       Overrides the theme's centered/floated header layout on mobile and
       cancels the Bootstrap `mt-5` utility on the toggler. */
    .main-bar {
        display: flex;
        align-items: center;
    }
    .main-bar > .container {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }
    .main-bar > .container > .logo-header {
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        text-align: left;
    }
    .main-bar > .container > .navbar-toggler,
    .main-bar > .container > .navbar-toggler.mt-5 {
        margin: 0 !important;
        padding: 8px !important;
        float: none !important;
        align-self: center;
        margin-left: auto !important;
    }
    /* Push the banner down by the menu height so the sticky menu doesn't
       cover the top of the slide. */
    .home-banner {
        margin-top: 105px !important;
    }

    /* Clip any stray Owl overflow at the parent so adjacent slides cannot
       peek through on mobile. The Owl margin between items is set to 0 in
       hlm.js so widths now line up with the viewport cleanly. */
    .home-banner {
        overflow: hidden;
        width: 100%;
    }
    #desktop-banner .owl-item img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }
}

/* ==========================================================================
   Sticky mobile bottom navigation
   Source: resources/views/layouts/hlm/app.blade.php (.mobile-bottom-nav)
   Hidden on desktop, shown as a fixed bottom bar on mobile with a centred
   elevated "Apply" CTA button.
   ========================================================================== */

.mobile-bottom-nav {
    display: none;
}

@media only screen and (max-width: 768px) {
    .mobile-bottom-nav {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.06);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-bottom-nav ul {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .mobile-bottom-nav li {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        justify-content: center;
    }
    .mobile-bottom-nav li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 10px 4px 8px;
        color: #475569;
        text-decoration: none;
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
        transition: color 0.15s ease;
        width: 100%;
        text-align: center;
    }
    .mobile-bottom-nav li a:hover,
    .mobile-bottom-nav li a:focus {
        color: #1f2937;
        text-decoration: none;
    }
    .mobile-bottom-nav li .mbn-icon {
        font-size: 18px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-bottom-nav li .mbn-label {
        white-space: nowrap;
    }

    /* Active state — orange/gold to match brand */
    .mobile-bottom-nav li.is-active a,
    .mobile-bottom-nav li.is-active .mbn-icon {
        color: #f5b400;
    }

    /* WhatsApp brand green */
    .mobile-bottom-nav li.mbn-whatsapp .mbn-icon {
        color: #25d366;
    }

    /* Centered elevated "Apply" CTA */
    .mobile-bottom-nav li.mbn-cta {
        position: relative;
    }
    .mobile-bottom-nav li.mbn-cta a {
        padding-top: 0;
    }
    .mobile-bottom-nav li.mbn-cta .mbn-icon {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        color: #1a1a1a;
        font-size: 22px;
        margin-top: -24px;
        margin-bottom: 2px;
        box-shadow:
            0 6px 14px rgba(245, 158, 11, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.08);
        border: 4px solid #ffffff;
    }
    .mobile-bottom-nav li.mbn-cta .mbn-label {
        color: #f59e0b;
        font-weight: 700;
    }

    /* Make room for the fixed bar so the bottom of the page isn't covered. */
    body {
        padding-bottom: 70px;
    }

    /* Hide the floating WhatsApp bubble on mobile — WhatsApp is already
       reachable from the bottom nav, and the floating button collides
       with the sticky nav + sometimes the modal close button. */
    #whatsapp-button,
    .whatsapp-button {
        display: none !important;
    }
}

/* ==========================================================================
   Welcome / top-icon-box — mobile redesign (≤768px)
   Source: resources/views/pages/home.blade.php (.top-icon-box)
   Replaces the theme's playful 2-column block of solid color cards with a
   professional stacked list: dark card, colored left accent stripe,
   tinted icon tile, clean typography. Desktop styling stays untouched.
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* Container — leave a small side gutter so the dark card doesn't
       bleed to the viewport edges. */
    .top-icon-box {
        width: calc(100% - 24px) !important;
        margin: 0 12px !important;
        top: 0 !important;
        border-radius: 14px;
        padding: 26px 16px 14px;
    }

    /* Header block — tighter typography, brand gold instead of generic gold */
    .top-icon-box .container > .row > .col-lg-3:first-child {
        margin-bottom: 20px;
        padding: 0;
    }
    .top-icon-box h3 {
        font-size: 22px;
        font-weight: 700;
        margin: 0 0 2px;
        letter-spacing: -0.3px;
    }
    .top-icon-box h4 {
        font-size: 19px;
        font-weight: 700;
        margin: 0 0 10px;
        color: #f5b400;
        letter-spacing: -0.2px;
    }
    .top-icon-box .container > .row > .col-lg-3:first-child p {
        font-size: 13px;
        line-height: 1.55;
        opacity: 0.78;
        margin: 0;
    }

    /* Stack the four feature cards full-width as a list. */
    .top-icon-box .col-lg-9 > .row {
        margin: 0;
        gap: 8px 0;
    }
    .top-icon-box .col-lg-9 .col-6,
    .top-icon-box .col-lg-9 .col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 0 8px !important;
    }

    /* Replace solid color backgrounds with a subtle dark surface and a
       thin colored accent stripe on the left (color comes from the
       theme's nth-child rules below). */
    .top-icon-box .col-lg-3:nth-child(1) .icon-bx-wraper,
    .top-icon-box .col-lg-3:nth-child(2) .icon-bx-wraper,
    .top-icon-box .col-lg-3:nth-child(3) .icon-bx-wraper,
    .top-icon-box .col-lg-3:nth-child(4) .icon-bx-wraper {
        background-color: rgba(255, 255, 255, 0.04) !important;
    }

    .top-icon-box .icon-bx-wraper {
        height: auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px;
        padding: 13px 14px 13px 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        text-align: left !important;
        position: relative;
        overflow: hidden;
    }
    .top-icon-box .icon-bx-wraper::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: 0 2px 2px 0;
    }
    .top-icon-box .col-lg-3:nth-child(1) .icon-bx-wraper::before {
        background: #febd0b;
    }
    .top-icon-box .col-lg-3:nth-child(2) .icon-bx-wraper::before {
        background: #91b606;
    }
    .top-icon-box .col-lg-3:nth-child(3) .icon-bx-wraper::before {
        background: #f05920;
    }
    .top-icon-box .col-lg-3:nth-child(4) .icon-bx-wraper::before {
        background: #2fc8c5;
    }

    /* Tinted square icon tile in the matching accent color. */
    .top-icon-box .icon-bx-sm {
        width: 44px !important;
        height: 44px !important;
        line-height: 1 !important;
        margin: 0 !important;
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
    .top-icon-box .icon-bx-sm .icon-cell {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    .top-icon-box .col-lg-3:nth-child(1) .icon-bx-sm {
        background: rgba(254, 189, 11, 0.12);
    }
    .top-icon-box .col-lg-3:nth-child(2) .icon-bx-sm {
        background: rgba(145, 182, 6, 0.15);
    }
    .top-icon-box .col-lg-3:nth-child(3) .icon-bx-sm {
        background: rgba(240, 89, 32, 0.12);
    }
    .top-icon-box .col-lg-3:nth-child(4) .icon-bx-sm {
        background: rgba(47, 200, 197, 0.15);
    }
    .top-icon-box .col-lg-3:nth-child(1) .icon-bx-sm i {
        color: #febd0b !important;
    }
    .top-icon-box .col-lg-3:nth-child(2) .icon-bx-sm i {
        color: #91b606 !important;
    }
    .top-icon-box .col-lg-3:nth-child(3) .icon-bx-sm i {
        color: #f05920 !important;
    }
    .top-icon-box .col-lg-3:nth-child(4) .icon-bx-sm i {
        color: #2fc8c5 !important;
    }
    .top-icon-box .icon-bx-sm i {
        font-size: 22px !important;
    }

    /* Right side — title + description. */
    .top-icon-box .icon-content {
        flex: 1;
        min-width: 0;
    }
    .top-icon-box .icon-content .dlab-tilte,
    .top-icon-box .icon-content h5 {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        margin: 0 0 3px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.5px !important;
        color: #ffffff !important;
    }
    .top-icon-box .icon-content p {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin: 0 !important;
        opacity: 0.7;
    }
}

/* ==========================================================================
   Masonry block (Placements / Certifications / Infrastructure / Alumni)
   Mobile redesign (≤768px)
   Source: resources/views/pages/home.blade.php (.masonry-block)
   The desktop layout interleaves 4 hero images with 4 color cards. On a
   phone that stacks into 8 tall blocks (way too much vertical scroll).
   On mobile we hide the image cells and arrange the 4 content cards as
   a compact 2×2 grid with tight, scannable typography.
   Desktop untouched.
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* Override the theme's 35px outer + 50px inner padding (skin-hlm2.css)
       so cards have a proper content area, not a 4-word-wide column. */
    .masonry-block {
        margin: 18px 0 8px !important;
        padding: 0 12px !important;
    }
    .masonry-block > .container {
        padding: 0;
    }

    /* Drop the standalone image columns — they add scroll, not info. */
    .masonry-block .image-cover {
        display: none !important;
    }

    /* 2-column grid of the 4 content cards. CSS grid auto-handles equal
       heights so even the longer descriptions don't make cards unequal. */
    .masonry-block .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 0;
    }
    .masonry-block .row > [class*="col-"] {
        flex: unset;
        max-width: unset;
        width: auto;
        padding: 0 !important; /* defeats theme's 25px 50px col-lg-3 padding */
        margin: 0;
    }

    /* Card wrapper — keep brand colour, round corners, full height. */
    .masonry-block .bg-secondary2 {
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        align-items: stretch;
    }

    /* Card body — left-aligned typography, proper width, sensible spacing.
       Theme defaults: align-items:center + flex-direction:column + p {text-align:center}
       all need to be reset. */
    .masonry-block .service-box {
        padding: 16px 14px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 8px;
        height: 100%;
        width: 100%;
    }
    .masonry-block .service-box .title {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        letter-spacing: -0.2px !important;
        color: #ffffff !important;
        text-align: left !important;
        text-transform: none;
    }
    .masonry-block .service-box p {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        opacity: 0.9;
        flex: 1 1 auto;
        text-align: left !important;
        color: #ffffff !important;
        /* Clamp to 4 lines so cards stay reasonable. */
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .masonry-block .service-box a.site-button {
        align-self: flex-start;
        margin: 4px 0 0 !important;
        padding: 7px 14px !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.7px !important;
        text-transform: uppercase !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, 0.7) !important;
        background: transparent !important;
        color: #ffffff !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        text-decoration: none;
        transition:
            background 0.15s ease,
            color 0.15s ease;
    }
    .masonry-block .service-box a.site-button:hover,
    .masonry-block .service-box a.site-button:active {
        background: #ffffff !important;
        color: #111 !important;
    }
}

/* ==========================================================================
   Admission Enquiry modal — redesign (desktop + mobile)
   Source: resources/views/layouts/hlm/app.blade.php (.hlm-enquiry-modal)
   White card with maroon accent strip, clean two-column layout (image
   left / form right) on desktop, single-column on mobile. Modern inputs
   with maroon focus ring + sleek submit CTA.
   ========================================================================== */

.hlm-enquiry-modal .modal-dialog {
    max-width: 920px;
    margin: 1.75rem auto;
}
.hlm-enquiry-modal .modal-content {
    border: 0;
    border-radius: 12px;
    /* Intentionally no overflow:hidden here — it would clip the absolutely
       positioned close button at the rounded corners. Inner elements that
       need to respect the rounded corners (accent strip, image panel)
       carry their own border-radius. */
    background: #ffffff;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 6px 18px rgba(0, 0, 0, 0.1);
    position: relative;
}
/* Maroon top accent strip ties the modal to the brand without flooding
   the background. Rounded top corners match the card. */
.hlm-enquiry-modal .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #871f1f 0%, #b91c1c 50%, #f5b400 100%);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    z-index: 2;
}
.hlm-enquiry-modal .modal-body {
    padding: 0;
}

/* Close button — circular, sits over the top-right corner.
   Bootstrap's .btn-close uses box-sizing:content-box + an em-based padding,
   which inflates the rendered size and pushes the right half off-screen on
   mobile. Force border-box and zero padding so width/right behave intuitively. */
.hlm-enquiry-modal .hlm-enquiry-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    box-sizing: border-box;
    padding: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 1;
    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}
.hlm-enquiry-modal .hlm-enquiry-close:hover,
.hlm-enquiry-modal .hlm-enquiry-close:focus {
    background-color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Two-column layout on desktop, stacks on mobile. */
.hlm-enquiry-modal .hlm-enquiry-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: stretch;
    min-height: 0;
}

.hlm-enquiry-modal .hlm-enquiry-visual {
    background: linear-gradient(135deg, #871f1f 0%, #5b0f0f 100%);
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Match the parent card's rounded corners on the left side so the maroon
       gradient doesn't bleed past the corner curve. */
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.hlm-enquiry-modal .hlm-enquiry-visual img {
    width: 100%;
    height: auto;
    max-height: 100%;
    border-radius: 8px;
    display: block;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.hlm-enquiry-modal .hlm-enquiry-form-col {
    padding: 36px 36px 32px;
    background: #ffffff;
}

/* Header block */
.hlm-enquiry-modal .hlm-enquiry-head {
    margin-bottom: 22px;
    text-align: left;
}
.hlm-enquiry-modal .hlm-enquiry-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #b91c1c;
    background: #fef2f2;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.hlm-enquiry-modal .hlm-enquiry-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
    letter-spacing: -0.2px;
}
.hlm-enquiry-modal .hlm-enquiry-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #64748b;
}

/* Form internals (Livewire component) — scoped to the modal. */
.hlm-enquiry-modal .form_content .form-group {
    margin-bottom: 14px;
}
.hlm-enquiry-modal .form_content .form-control,
.hlm-enquiry-modal .form_content .form-select {
    height: auto;
    padding: 12px 14px 12px 42px; /* 42px left padding leaves room for the icon */
    font-size: 14px;
    line-height: 1.4;
    color: #0f172a;
    background-color: #f8fafc;
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
    background-clip: padding-box;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: none;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
    width: 100%;
}

/* Per-field icons (slate-400 line style) — selected by placeholder / type / id
   so the form HTML doesn't need to change. */
.hlm-enquiry-modal .form_content input[placeholder*="Full Name"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.8' stroke='%23f5b400'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z' /%3E%3C/svg%3E");
}
.hlm-enquiry-modal .form_content input[placeholder*="Mobile"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.8' stroke='%23f5b400'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z' /%3E%3C/svg%3E");
}
.hlm-enquiry-modal .form_content input[type="email"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.8' stroke='%23f5b400'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75' /%3E%3C/svg%3E");
}
.hlm-enquiry-modal .form_content select#program,
.hlm-enquiry-modal .form_content .form-select {
    background-image:
        /* graduation-cap icon on the left */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.8' stroke='%23f5b400'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5' /%3E%3C/svg%3E"),
        /* chevron-down on the right */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23f5b400'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position:
        14px center,
        calc(100% - 14px) center;
    background-size:
        16px 16px,
        14px 14px;
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
}
.hlm-enquiry-modal .form_content .form-control::placeholder {
    color: #94a3b8;
    opacity: 1;
}
.hlm-enquiry-modal .form_content .form-control:focus,
.hlm-enquiry-modal .form_content .form-select:focus {
    background-color: #ffffff;
    border-color: #871f1f;
    box-shadow: 0 0 0 3px rgba(135, 31, 31, 0.15);
    outline: none;
}
.hlm-enquiry-modal .form_content .form-control.is-invalid,
.hlm-enquiry-modal .form_content .form-select.is-invalid {
    border-color: #ef4444;
    background-color: #fef2f2;
}
.hlm-enquiry-modal .form_content .form-control.is-invalid:focus,
.hlm-enquiry-modal .form_content .form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.hlm-enquiry-modal .form_content .validation-message {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #dc2626;
}

/* Agree row */
.hlm-enquiry-modal .form_content .check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 18px;
}
.hlm-enquiry-modal .form_content .check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #871f1f;
    margin: 0;
    flex: 0 0 auto;
}
.hlm-enquiry-modal .form_content .agree-condition {
    display: inline !important;
    margin: 0 !important;
    text-align: left !important;
    color: #64748b !important;
    font-size: 12.5px;
    line-height: 1.4;
}

/* Submit button — full width, maroon, sleek hover */
.hlm-enquiry-modal .form_content .btn[type="submit"],
.hlm-enquiry-modal .form_content button[type="submit"].site-button {
    display: block;
    width: 100%;
    padding: 13px 18px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff !important;
    background: linear-gradient(180deg, #a32424 0%, #871f1f 100%) !important;
    border: 0;
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 4px rgba(135, 31, 31, 0.25),
        0 4px 12px rgba(135, 31, 31, 0.18);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
    cursor: pointer;
}
.hlm-enquiry-modal .form_content .btn[type="submit"] span,
.hlm-enquiry-modal .form_content button[type="submit"].site-button span {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
}
.hlm-enquiry-modal .form_content .btn[type="submit"]:hover,
.hlm-enquiry-modal .form_content button[type="submit"].site-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 6px 14px rgba(135, 31, 31, 0.3),
        0 10px 24px rgba(135, 31, 31, 0.18);
}
.hlm-enquiry-modal .form_content .btn[type="submit"]:active,
.hlm-enquiry-modal .form_content button[type="submit"].site-button:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

/* Success alert — softer styling that fits the new look */
.hlm-enquiry-modal .alert {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
}

/* ---------- Tablet & mobile ---------- */
@media (max-width: 991px) {
    .hlm-enquiry-modal .hlm-enquiry-grid {
        grid-template-columns: 1fr;
    }
    .hlm-enquiry-modal .hlm-enquiry-visual {
        padding: 18px;
        max-height: 200px;
        /* When stacked, the visual sits at the top — round only the top corners. */
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 0;
    }
    .hlm-enquiry-modal .hlm-enquiry-visual img {
        max-height: 170px;
        object-fit: contain;
    }
    .hlm-enquiry-modal .hlm-enquiry-form-col {
        padding: 26px 22px 24px;
    }
}

/* ----- Mobile redesign: bottom-sheet pattern (≤576px) -----
   Anchors the modal to the bottom edge, slides up on open, shows a
   drag handle at the top, hides the subtitle/eyebrow for compactness,
   and keeps the submit button always accessible at the bottom. */
@media (max-width: 576px) {
    /* Bootstrap's .modal has horizontal padding and the dialog has a
       0.5rem margin on mobile — both need to be zeroed out so the sheet
       reaches the viewport edges (otherwise the close button sits over
       the small gap and looks cropped). */
    .hlm-enquiry-modal.modal {
        padding: 0 !important;
    }
    .hlm-enquiry-modal .modal-dialog {
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        min-width: 100vw !important;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        align-items: flex-end;
    }
    .hlm-enquiry-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Override the default top-slide animation with a bottom slide-up. */
    .hlm-enquiry-modal.fade .modal-dialog {
        transform: translate3d(0, 100%, 0);
        transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
    }
    .hlm-enquiry-modal.show .modal-dialog {
        transform: translate3d(0, 0, 0);
    }

    .hlm-enquiry-modal .modal-content {
        border-radius: 18px 18px 0 0;
        max-height: 92vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Drag-handle pill at the top — a familiar mobile-sheet affordance. */
    .hlm-enquiry-modal .modal-content::before {
        content: "";
        position: sticky;
        top: 0;
        display: block;
        width: 40px;
        height: 4px;
        margin: 10px auto 0;
        background: #cbd5e1;
        border-radius: 999px;
        opacity: 1;
        /* Cancel the desktop accent-strip styling. */
        left: auto;
        right: auto;
        height: 4px;
        background-image: none;
    }

    /* Hide the image and trim the header on small screens to keep the
       sheet shallow. The form is the point on mobile. */
    .hlm-enquiry-modal .hlm-enquiry-visual {
        display: none;
    }
    .hlm-enquiry-modal .hlm-enquiry-form-col {
        padding: 8px 18px 20px;
    }
    .hlm-enquiry-modal .hlm-enquiry-head {
        margin-bottom: 16px;
        text-align: center;
    }
    .hlm-enquiry-modal .hlm-enquiry-eyebrow {
        margin-bottom: 8px;
        font-size: 10px;
        padding: 3px 9px;
    }
    .hlm-enquiry-modal .hlm-enquiry-title {
        font-size: 19px;
        margin-bottom: 2px;
    }
    /* Subtitle hidden on mobile — title + eyebrow give enough context. */
    .hlm-enquiry-modal .hlm-enquiry-sub {
        display: none;
    }

    /* Inputs: 15px to prevent iOS zoom, slightly tighter vertical spacing. */
    .hlm-enquiry-modal .form_content .form-control,
    .hlm-enquiry-modal .form_content .form-select {
        font-size: 15px;
        padding: 12px 14px 12px 42px;
    }
    .hlm-enquiry-modal .form_content .form-group {
        margin-bottom: 10px;
    }
    .hlm-enquiry-modal .form_content .check {
        margin: 8px 0 14px;
        text-align: left;
    }

    /* Close button — moved below the rounded corner curve into the flat
       area of the card, in line with the eyebrow tag.
       All key properties forced with !important to defeat any lingering
       Bootstrap .btn-close defaults that were re-introducing the corner
       position / sizing. */
    /* Stand-out close button on mobile — maroon brand circle with white X,
       white ring around it for definition, and a soft maroon glow shadow. */
    .hlm-enquiry-modal button.hlm-enquiry-close,
    .hlm-enquiry-modal .hlm-enquiry-close.btn-close,
    .hlm-enquiry-modal .hlm-enquiry-close {
        position: absolute !important;
        top: 22px !important;
        right: 14px !important;
        left: auto !important;
        bottom: auto !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        background-color: #871f1f !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 13px 13px !important;
        border: 3px solid #ffffff !important;
        border-radius: 50% !important;
        box-shadow:
            0 0 0 1px rgba(135, 31, 31, 0.25),
            0 4px 12px rgba(135, 31, 31, 0.35),
            0 2px 4px rgba(0, 0, 0, 0.08) !important;
        opacity: 1 !important;
        z-index: 100 !important;
        transform: none !important;
        transition:
            transform 0.15s ease,
            box-shadow 0.15s ease !important;
    }
    .hlm-enquiry-modal .hlm-enquiry-close:hover,
    .hlm-enquiry-modal .hlm-enquiry-close:focus {
        transform: scale(1.06) !important;
        box-shadow:
            0 0 0 1px rgba(135, 31, 31, 0.3),
            0 6px 16px rgba(135, 31, 31, 0.45),
            0 2px 6px rgba(0, 0, 0, 0.1) !important;
    }

    /* Submit button stays prominent. */
    .hlm-enquiry-modal .form_content .btn[type="submit"],
    .hlm-enquiry-modal .form_content button[type="submit"].site-button {
        padding: 14px 18px;
    }
}