.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;

}

/* Arabic glyphs hang lower than latin ones, so the line ends up over the text at the default offset. */
.under-text-line-lowered::after {
    bottom: -8px;
}

.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;
}

.hand-hover {
    cursor: pointer;
}

/*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;
    padding: 10px;
}

.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;
}

/* BLOG CARD

   Blogs-only, used by BlogCard.razor. Deliberately kept separate from the .news-* rules above:
   the blogs carousel needs a fixed 16:9 photo frame and uniform card heights, while the service
   pages keep the taller, unclamped news card. Either can change without affecting the other. */

.blog-card {
    width: 450px;
    margin-bottom: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* The frame matches the ~16:9 photos that get uploaded, so `object-fit: cover` on the image
   crops very little. Do NOT give this a fixed height: the card goes full-width on mobile, and
   a fixed height would flip the frame to portrait and crop landscape photos hard. */
.blog-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 45px;
    flex-shrink: 0;
}

/* Pinned to the frame rather than sized with height:100%. MudImage renders an inline <img>,
   and an inline replaced element resolves height:100% against an aspect-ratio box back to its
   own intrinsic height — which let taller photos drag the frame off 16:9 and made neighbouring
   cards different heights. Out of flow, the frame is always exactly 16:9 whatever is uploaded. */
.blog-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
}

.blog-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;
}

/* Title, description and button are clamped/pinned so every card in the carousel lines up. */
.blog-title-box .mud-typography {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-content {
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

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

.blog-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%;
    }

    .blog-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;
    }
}