.iframe-height {
    height: 320px !important;
}

.under-text-line {
    position: relative;
    display: inline-block;
}

.under-text-line::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 7px;
    background-color: #F9C216;

}

.bold {
    font-weight: bold !important;
}

.mud-swipearea {
    touch-action: pan-y !important;
}

.card-hover:hover {
    transform: translateY(-6px);
    transition: transform 0.3s ease-in-out;
}

.mud-scroll-to-top.visible {
    bottom: 80px !important;
    right: 16px !important;
}



#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.mud-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.mud-main-content {
    flex: 1;
}

.mud-nav-link{
    justify-content: center !important;
}

.full-width-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.round-button {
    border-radius: 47px !important;
    min-height: 40px;
}

.grey-bg-color {
    background-color: #D9D9D933;
}

.text-dark {
    color: #000000 !important;
}

.cursor-pointer:hover {
    background-color: var(--mud-palette-secondary);
}

.w-50 {
    width: 50%;
}

.w-100 {
    width: 100%;
}

.seo {
    display: none;
}

/*FOOTER*/

.footer {
    margin-top: auto;
}

.footer-bottom-bar {
    padding: 0 0 10px 0;
}


/*LEASE CARD*/

.lease-card-image {
    height: 196px;
    width: 323px;
}

.lease-card-size {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    height: 406px;
    width: 382px;
    border: 1px solid #E0E0E0;
}

.promotion-lease-card-size {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    width: 382px;
    border: 1px solid #E0E0E0;
}

.promotion-masonry-grid {
    column-count: 3;
    column-gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.promotion-masonry-grid > * {
    break-inside: avoid;
    margin-bottom: 16px;
}



/*EXPLORE OUR SERVICE CARD*/
.explore-our-service-card {
    height: 300px;
    width: 350px;
    border-radius: 20px;
}


/*OFFER CARD*/

.offer-card {
    border-radius: 24px !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    background-color: #F6F6F6 !important;
    width: 380px;
    height: 100%;
    border: 1px solid #E0E0E0;
}

.offer-image-container {
    position: relative;
    height: 280px;
}

.offer-image {
    width: 100%;
    height: 100%;
    border-radius: 24px 24px 0 0;
}

.offer-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    color: white;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    padding: 8px;
}

.offer-title {
    color: #000000;
    font-weight: 600 !important;
    line-height: 1.2;
}

/* NEWS CARD */

.news-card {
    width: 400px;
    margin-bottom: 24px;
}

.news-image-container {
    position: relative;
    width: 100%;
    height: 380px;
    margin-bottom: 45px;
    flex-shrink: 0;
}

.news-image {
    width: 100%;
    height: 100%;
    border-radius: 24px;
}

.news-title-box {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    height: 100px;
    padding: 18px 20px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    width: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.news-content {
    padding: 0 5px;
}

/* Uniform-height variant (used by the blogs carousel): make the card a flex column,
   clamp the title and description to 2 lines, and pin the button to the bottom so every
   card lines up. Cards WITHOUT this class (e.g. the service pages) keep full, unclamped text. */
.news-card-clamp {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-card-clamp .news-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.news-card-clamp .news-title-box .mud-typography {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-clamp .news-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
}

.news-card-clamp .news-button-row {
    margin-top: auto;
    padding-top: 8px;
}

/* LEADERSHIP */

/* Corporate team card (single column): photo on top, name + title below. */
.leadership-card {
    width: 200px;
    /* no horizontal padding so the first card's photo aligns flush-left with the CEO photo;
       gaps between cards come from the carousel's Spacing. */
    /* CarousalHelper's desktop row centers items vertically; top-align them instead. */
    align-self: flex-start;
}

.leadership-photo {
    width: 100%;
    height: 250px;
    border-radius: 8px;
    background-color: #EFEFEF;
    flex-shrink: 0;
}

/* Featured CEO (two columns): large photo left, text column right. */
.leadership-card-horizontal {
    width: 100%;
    padding: 0;
}

.leadership-card-horizontal .leadership-photo {
    width: 330px;
    height: 420px;
}

.leadership-card-horizontal .leadership-info {
    flex: 1;
}

/* short rule under the CEO's title */
.leadership-divider {
    width: 120px;
    height: 2px;
    background-color: #E0E0E0;
    margin: 8px 0;
}

/* separator between the CEO and the team carousel: left-aligned on desktop, centered on mobile */
.leadership-section-divider {
    width: 120px;
    height: 2px;
    background-color: #E0E0E0;
    align-self: flex-start;
}

.leadership-card-horizontal .leadership-description {
    text-align: justify;
    max-width: 820px;
}

/* Below 1280px the cards render inside the mobile MudCarousel (one per slide) — center them. */
@media (max-width: 1279.98px) {
    .leadership-card {
        align-self: center;
        margin-left: auto;
        margin-right: auto;
    }

    .leadership-section-divider {
        align-self: center;
    }
}

/* stack the CEO card on small screens */
@media (max-width: 700px) {
    .leadership-card-horizontal {
        flex-direction: column !important;
    }

    .leadership-card-horizontal .leadership-photo {
        width: 100%;
        height: 100%;
    }
}

/* GOOGLE REVIEW */

.google-review-card {
    background: #FFFFFF;
    border-radius: 40px;
    padding: 25px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
    width: 300px;
    height: 320px;
}

.google-review-header {
    margin-bottom: 25px;
}

.google-verified-icon {
    color: #4B88F4;
    font-size: 24px !important;
    margin-left: 12px;
}

.google-review-text {
    margin-bottom: 25px !important;
    overflow: scroll;
    height: 150px;
}

.google-review-divider {
    height: 1px;
    background-color: #E0E0E0;
    margin-bottom: 25px;
    width: 100%;
}


.contact-form-container {
    background-color: rgba(255, 255, 255, 0.4) !important; /* Semi-transparent background */
    backdrop-filter: blur(10px); /* Apply the blur effect to the background */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    border-radius: 8px;
}

/*SUBMIT YOUR INQUIRY*/

.submit-inquiry-container {
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #E1E1E1;
    margin: 20px;
}

.submit-inquiry-image {
    border-radius: 15px !important;
}

.submit-inquiry-form {
    border-radius: 15px !important;
}

/*MANAGE BOOKING*/

.manage-booking-container {
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #E1E1E1;
}

/*INFO COMPONENT*/

.info-card-image {
    border-radius: 24px !important;
}

/*FAQ COMPONENT*/

.faq-item {
    border-radius: 16px;
    padding: 20px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.faq-icon {
    border-radius: 50%;
}

/*CAR DETAILS*/

.car-details-thumbnail-img {
    width: 100%;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s;
}

.car-details-thumbnail-img:hover {
    transform: scale(1.05);
}

.car-details-main-car-image {
    width: 100%;
    border-radius: 24px !important;
}

.car-details-overview-item {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border: 1px solid #E0E0E0;
    border-radius: 50px;
    min-width: 180px;
    gap: 16px;
    background-color: white;
}

.car-details-text-grey {
    color: #757575;
}

.car-details-spec-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/*BOOKING DETAILS*/

.booking-details-form {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #E0E0E0;
    padding: 25px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
}

.image-fit {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/*CHAT*/

/* Floating Chat Button */
.floating-chat-button {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 9999;
    cursor: pointer;
    transition: transform 0.2s ease;
}



.floating-chat-button:hover {
    transform: scale(1.1);
}

/* Chat Window */
.chat-window {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 380px;
    max-height: 600px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    transform: translateY(100%) scale(0.8);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-window.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: all;
}

/* Chat Header */
.chat-header {
    background: linear-gradient(135deg, #102a56 0%, #2b5fb8 100%);
    color: white;
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Chat Body */
.chat-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 540px;
}

/* Chat Form */
.chat-form {
    padding: 24px;
    overflow-y: auto;
}

/* Chat Messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    max-height: 380px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.waiting-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    color: #757575;
}

/* Message Bubbles */
.message {
    display: flex;
    margin-bottom: 8px;
}

.user-message {
    justify-content: flex-end;
}

.admin-message {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    word-wrap: break-word;
}

.user-message .message-bubble {
    background: linear-gradient(135deg, #102a56 0%, #2b5fb8 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.admin-message .message-bubble {
    background: #f5f5f5;
    color: #333;
    border-bottom-left-radius: 4px;
}

.message-time {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Chat Input */
.chat-input {
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
}

/* Chat Actions */
.chat-actions {
    padding: 8px 16px 12px;
    text-align: center;
}


/* Responsive */

@media (max-width: 400px) {
    .lease-card-size {
        width: 100%;
    }

    .lease-card-image {
        width: 100%;
    }

    .promotion-lease-card-size {
        width: 100%;
    }

    .offer-card {
        width: 100%;
    }

    .news-card {
        width: 100%;
    }

    .explore-our-service-card {
        width: 100%;
        height: auto;
        min-height: 250px;
    }

    .google-review-card {
        width: 100%;
        box-sizing: border-box;
    }

    .car-details-overview-item {
        min-width: unset;
        padding: 10px 10px;
    }

    .submit-inquiry-container {
        margin: 8px;
    }
}


@media (max-width: 600px) {
    .chat-window {
        width: calc(100vw - 32px);
        right: 16px;
        bottom: 90px;
        max-height: 80vh;
    }

    .floating-chat-button {
        bottom: 16px;
        right: 16px;
    }

    .chat-messages {
        max-height: calc(80vh - 200px);
        overflow-y: auto;
    }
}

@media (max-width: 800px) {
    .promotion-masonry-grid {
        column-count: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}


@media (max-width: 1200px) {
    .promotion-masonry-grid {
        column-count: 2;
    }
}

/* The desktop app bar switches on at Lg (1280px), so 1280px is the tightest width
   and the nav links squash. Compress button padding, font size and item gaps in the
   1280-1500px band so all links fit without dropping to the hamburger drawer. */
@media (min-width: 1280px) and (max-width: 1500px) {
    .mud-appbar .round-button,
    .mud-appbar .mud-menu .mud-button-root {
        min-width: 0;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 0.8125rem;
    }

    /* tighten the horizontal gaps between bar items */
    .mud-appbar .mud-stack-row {
        gap: 4px !important;
    }

    /* slim the language / country selectors */
    .mud-appbar .mud-input-control {
        font-size: 0.8125rem;
    }

    .mud-appbar .mud-select {
        min-width: 0;
    }
}