h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Arabic (ar-IQ) pages render RTL; swap in a font with proper Arabic glyph support. */
[dir="rtl"] {
    font-family: 'Noto Sans Arabic', 'Inter', Roboto, Helvetica, Arial, sans-serif;
}

.mud-appbar {
    border-bottom: 1px solid #DCE3EA;
}

.mud-appbar-brand {
    color: inherit;
}

.mud-appbar-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
}

.mud-appbar-brand-text {
    margin-left: 8px;
}

.mud-footer-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
}

/* Trip-planning quick-quote hero: a contained "ticket card" photo with a form card overlapping its bottom edge. */
.trip-hero {
    z-index:-1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 28px 0 12px;
    background-image: linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.52)), url('Images/HeroBackground.webp');
    background-size: cover;
    background-position: center;
}

/* Reserves empty photo space for the form card to overlap into, so the card never rides up over the icon row. */
.trip-hero-spacer {
    height: 70px;
}

.trip-hero-card {
    margin-top: -50px;
    border-radius: 16px !important;
    background: #fff;
}

@media (min-width: 960px) {
    .trip-hero-spacer {
        height: 110px;
    }

    .trip-hero-card {
        margin-top: -90px;
    }
}

.trip-hero-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(18, 59, 99, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Trip-planning quick-quote form: a single bordered field group (one row on wide screens, stacked
   cards on small screens). Each field opens a fully custom panel - an anchored dropdown on wide
   screens, a centered modal on narrow ones (same markup, CSS just repositions it - see
   .trip-hero-panel below), so the three panel types (country / dates / travelers) stay visually
   and behaviorally consistent. */
.trip-hero-form {
    position: relative;
    padding: 20px 20px 8px;
}

.trip-hero-form-row {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trip-hero-field,
.trip-hero-dates-group {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default, #DCE3EA);
    border-radius: 12px;
    background: #EEF4FC;
    padding: 10px 16px;
    cursor: pointer;
}

.trip-hero-dates-group {
    display: flex;
    flex-direction: column;
    padding: 0;
    cursor: default;
}

.trip-hero-dates-group .trip-hero-field {
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.trip-hero-inner-divider {
    width: 100%;
    height: 1px;
    margin: 0;
    background: var(--mud-palette-lines-default, #DCE3EA);
}

.trip-hero-divider {
    display: none;
}

.trip-hero-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-primary);
    margin-bottom: 2px;
}

.trip-hero-value {
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-hero-value-placeholder {
    color: var(--mud-palette-text-secondary);
    font-weight: 300;
}

/* Backdrop sits below the field row (z-index 20) but above the rest of the page, so a click
   anywhere outside the row closes the open panel without any JS click-away interop. On narrow
   screens it also doubles as a dimmed modal scrim behind the centered panel. */
.trip-hero-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgba(15, 23, 42, 0.45);
}

/* Mobile-first: every panel is a centered modal with its own header, so all three feel like one
   consistent component regardless of what they contain. */
.trip-hero-panel {
    position: fixed;
    top: 50%;
    left: 16px;
    right: 16px;
    transform: translateY(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default, #DCE3EA);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.28);
    max-height: 82vh;
    overflow-y: auto;
    cursor: default;
}

.trip-hero-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #DCE3EA);
}

.trip-hero-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.trip-hero-panel-close {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trip-hero-panel-close:hover {
    background: #EEF4FC;
    color: var(--mud-palette-text-primary);
}

/* Pinned footer for panels that need an explicit confirmation step (dates, travelers, and the
   arrival country's Schengen follow-up) rather than closing themselves the instant a value changes. */
.trip-hero-panel-footer {
    flex: none;
    padding: 16px 20px;
    border-top: 1px solid var(--mud-palette-lines-default, #DCE3EA);
}

.trip-hero-continue-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: none;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.trip-hero-continue-btn:hover {
    background: var(--mud-palette-primary-darken, #0C2A48);
}

/* Country panel */
.trip-hero-country-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #DCE3EA);
}

.trip-hero-country-search-icon {
    color: var(--mud-palette-text-secondary);
    flex: none;
}

.trip-hero-country-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
}

.trip-hero-country-list {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 4px;
    padding: 10px;
    overflow-y: auto;
}

.trip-hero-country-item {
    text-align: left;
    padding: 12px 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: 0.92rem;
    cursor: pointer;
}

.trip-hero-country-item:hover {
    background: #EEF4FC;
}

.trip-hero-country-item.active {
    background: var(--mud-palette-primary);
    color: #fff;
    font-weight: 600;
}

.trip-hero-country-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
}

/* Arrival-only: the Schengen coverage follow-up, pinned below the country list. */
.trip-hero-country-extra {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--mud-palette-lines-default, #DCE3EA);
}

/* Dates panel */
.trip-hero-dates-panel-body {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
}

.trip-hero-dates-calendar {
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

.trip-hero-inline-picker.mud-picker {
    box-shadow: none !important;
    min-width: 0;
}

.trip-hero-dates-panel .mud-picker-paper {
    box-shadow: none !important;
}

/* Travelers panel */
.trip-hero-travelers-panel-body {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 24px;
}

.trip-hero-stepper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.trip-hero-stepper-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.trip-hero-stepper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.trip-hero-stepper-btn {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--mud-palette-primary);
    background: #fff;
    color: var(--mud-palette-primary);
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.trip-hero-stepper-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.trip-hero-stepper-btn:not(:disabled):hover {
    background: #EEF4FC;
}

.trip-hero-stepper-value {
    min-width: 2em;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.trip-hero-question-text {
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
    margin-bottom: 10px;
    font-weight: 500;
}

.trip-hero-yesno {
    display: flex;
    gap: 10px;
}

.trip-hero-yesno-btn {
    flex: 1 1 0;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default, #DCE3EA);
    background: #fff;
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.trip-hero-yesno-btn.active {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: #fff;
}

.trip-hero-card-footer {
    padding: 8px 20px 24px;
}

@media (min-width: 960px) {
    .trip-hero-form-row {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        border: 1px solid var(--mud-palette-lines-default, #DCE3EA);
        border-radius: 14px;
        background: #EEF4FC;
        overflow: visible;
    }

    .trip-hero-field,
    .trip-hero-dates-group {
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 10px 16px;
    }

    .trip-hero-dates-group {
        flex: 2 1 0;
        flex-direction: row;
        padding: 0;
    }

    .trip-hero-inner-divider {
        width: 1px;
        height: auto;
        align-self: stretch;
        margin: 14px 0;
    }

    .trip-hero-divider {
        display: block;
        align-self: stretch;
        width: 1px;
        margin: 14px 0;
        background: var(--mud-palette-lines-default, #DCE3EA);
    }

    /* Desktop: panels become anchored dropdowns instead of centered modals. All three share the
       same min-height so the row reads as one consistent design regardless of which is open. */
    .trip-hero-panel {
        position: absolute;
        top: calc(100% + 10px);
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
        min-height: 420px;
        max-height: none;
        overflow-y: visible;
    }

    .trip-hero-country-panel {
        inset-inline-start: 0;
        width: 460px;
        max-height: 520px;
    }

    .trip-hero-country-list {
        grid-template-columns: 1fr 1fr;
    }

    .trip-hero-dates-panel {
        inset-inline-start: 0;
        width: 100%;
    }

    .trip-hero-travelers-panel {
        inset-inline-end: 0;
        width: 420px;
    }
}

/* Full-width, hover-only mega menu for the top nav's dropdown groups (see TopNav.razor). */
.mega-menu-item {
    position: relative;
    display: inline-block;
}

.mega-menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 72px;
    padding: 0 12px;
}

.mega-menu-panel {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #DCE3EA;
    box-shadow: 0 12px 24px rgba(18, 59, 99, 0.12);
    z-index: 1200;
}

.mega-menu-item:hover .mega-menu-panel,
.mega-menu-item:focus-within .mega-menu-panel {
    display: block;
}

/* Forced shut right after a navigation (see app.js megaMenu.closeAll / TopNav.razor), overriding the
   :hover/:focus-within rules above until the mouse actually leaves the bar. */
.mega-menu-bar.mega-menu-force-closed .mega-menu-panel {
    display: none !important;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 24px;
}

.mega-menu-link {
    display: block;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.mega-menu-link:hover {
    background: #F7F9FC;
}

.mega-menu-link-title {
    font-weight: 600;
    color: #123B63;
    margin-bottom: 2px;
}

.mega-menu-link-desc {
    font-size: 0.8rem;
    color: #687586;
}

/* Full-viewport loading interstitial shown between the trip-planning form and the wizard. */
.quote-loading {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(18, 59, 99, 0.82), rgba(18, 59, 99, 0.88)), url('Images/hero-airport-crop.jpg');
    background-size: cover;
    background-position: center;
}

.quote-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px;
}

.quote-loading-logo {
    background: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    animation: xerter-pulse 1.8s ease-in-out infinite;
}

.quote-loading-logo img {
    height: 56px;
    display: block;
}

@keyframes xerter-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.85;
    }
}

/* Quotation page (step 2 of the wizard): "Your Trip" filter block and the 3-column plan card rows. */

/* Nudges the sidebar down on wide screens so its top edge lines up with the top of whatever heads
   the main column next to it (the "N plans found" label in Compare Plans, the "Traveler Details"
   heading in Traveler Details) - both sit a little lower than a bare card would. */
@media (min-width: 960px) {
    .quote-sidebar-col {
        margin-top: 32px;
    }
}

.quote-trip-card,
.quote-plan-card,
.quote-filters-card,
.quote-contact-card,
.quote-no-results-card {
    border: 1px solid #33475B;
    border-radius: 12px !important;
}

.quote-trip-card {
    background: #EEF4FC;
}

.quote-trip-field {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(51, 71, 91, 0.18);
}

.quote-trip-field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.quote-trip-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.quote-trip-field-icon {
    flex: none;
}

.quote-trip-field-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-align: end;
}

/* Payment step: the "Review Your Application" card groups Your Trip / Selected Plan / Contact /
   Traveler Details as collapsible sections in one bordered container, instead of four separate
   cards - each section reuses the .quote-trip-field row style above for its own details. */
.quote-review-card {
    background: #EEF4FC;
    border: 1px solid #33475B;
    border-radius: 12px !important;
    overflow: hidden;
}

.quote-review-card .mud-expand-panel {
    background: transparent;
}

.quote-review-card .mud-expand-panel-border {
    border-bottom-color: #33475B;
}

.quote-review-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.quote-review-panel-title-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Payment step: the checkout panel styled as an itemized receipt - a distinct tint, a dark border,
   and dashed rules between line items leading up to a clearly separated total. */
.quote-receipt-card {
    background: #EAF7F5;
    border: 1px solid #33475B;
    border-radius: 12px !important;
}

.quote-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(51, 71, 91, 0.35);
    font-size: 0.85rem;
}

.quote-receipt-row:last-of-type {
    border-bottom: none;
}

.quote-receipt-label {
    color: var(--mud-palette-text-secondary);
}

.quote-receipt-value {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.quote-receipt-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid #33475B;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Contract step: the insurance code callout, styled consistently with the other steps' cards. */
.quote-success-card {
    background: #EAF7F5;
    border: 1px solid #33475B;
    border-radius: 12px !important;
}

.quote-trip-summary {
    cursor: pointer;
    border: 1px solid #DCE3EA;
    border-radius: 10px;
    padding: 12px;
    transition: background 0.15s;
}

.quote-trip-summary:hover {
    background: #F7F9FC;
}

.quote-trip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.quote-card {
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid #33475B;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.quote-card:hover {
    box-shadow: 0 10px 28px rgba(18, 59, 99, 0.12) !important;
    transform: translateY(-2px);
}

.quote-card-row {
    display: flex;
    flex-wrap: wrap;
    min-height: 280px;
}

.quote-card-col {
    padding: 24px;
    flex: 1 1 0;
    min-width: 220px;
}

.quote-card-col-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    flex: 1 1 180px;
    min-width: 160px;
    border-inline-end: 1px solid #DCE3EA;
}

.quote-card-logo {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    object-fit: cover;
    margin-bottom: 14px;
    padding: 8px;
    background: #F7F9FC;
    border: 1px solid #E9EEF3;
}

.quote-card-tags {
    width: 100%;
}

.quote-card-col-guarantees {
    border-inline-end: 1px solid #DCE3EA;
    flex: 1.4 1 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.quote-card-col-price {
    background: linear-gradient(160deg, rgba(24, 169, 153, 0.10), rgba(24, 169, 153, 0.03));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 220px;
    border-radius: 14px;
    margin: 8px;
}

/* Below this, the card's own row wraps to one column per line (independent of the page grid's
   breakpoint) - force each section to the row's full width instead of a fixed/shrunk column, and
   swap the vertical dividers for horizontal ones. */
@media (max-width: 959.98px) {
    .quote-card-col-logo,
    .quote-card-col-guarantees,
    .quote-card-col-price {
        flex: 1 1 100%;
        border-inline-end: none;
    }

    .quote-card-col-logo,
    .quote-card-col-guarantees {
        border-bottom: 1px solid #DCE3EA;
    }

    .quote-card-col-price {
        margin: 8px 0 0;
    }
}

.quote-card-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.quote-card-price-whole {
    font-size: 2.25rem;
    font-weight: 700;
    color: #123B63;
}

.quote-card-price-decimal {
    font-size: 1.1rem;
    font-weight: 600;
    color: #123B63;
}

.quote-card-price-code {
    font-size: 0.9rem;
    color: #687586;
    margin-left: 4px;
}

/* Admin login (plain HTML form posted to /account/login - see Login.razor for why it isn't a MudForm/EditForm). */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F7F9FC;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    border-radius: 16px !important;
}

.login-field {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.login-field label {
    font-size: 0.8rem;
    color: #687586;
    font-weight: 600;
}

.login-field input {
    height: 44px;
    padding: 0 12px;
    border: 1px solid #DCE3EA;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
}

.login-field input:focus {
    outline: none;
    border-color: #18A999;
}

.login-submit {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: #18A999;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    margin-top: 8px;
}

.login-submit:hover {
    background: #128577;
}

/* Admin CRUD screens: icon picker grid (Tags) and the reusable multi-lingual text tabs. */
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
}

.icon-picker-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid #DCE3EA;
    border-radius: 8px;
    cursor: pointer;
    color: #687586;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.icon-picker-swatch:hover {
    background: #F7F9FC;
    border-color: #18A999;
}

.icon-picker-swatch-selected {
    background: rgba(24, 169, 153, 0.1);
    border-color: #18A999;
    color: #18A999;
}

.admin-logo-preview {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #DCE3EA;
    background: #fff;
}

/* CountryCodePhoneInput: a country-code dropdown (flag + dial code) fused visually with a phone
   number box, styled to match a default (Variant.Text) MudBlazor input - an underline rather than
   a boxed outline - so it sits flush with the plain MudTextFields around it. */
.ccp-field {
    width: 100%;
}

.ccp-label {
    display: block;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #687586);
    margin-bottom: 2px;
}

.ccp-row {
    display: flex;
    align-items: stretch;
    height: 32px;
    border: none;
    border-bottom: 1px solid var(--mud-palette-lines-inputs, #DCE3EA);
    border-radius: 0;
    background: transparent;
    overflow: visible;
    transition: border-color 0.15s, border-width 0.15s;
}

.ccp-row:hover:not(.ccp-row-error) {
    border-bottom-color: var(--mud-palette-text-primary, #17202A);
}

.ccp-row:focus-within {
    border-bottom: 2px solid var(--mud-palette-primary, #123B63);
}

.ccp-row-error {
    border-bottom-color: var(--mud-palette-error, #d32f2f);
}

.ccp-country-menu {
    display: flex;
}

.ccp-country-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 4px 0 0;
    cursor: pointer;
    border-inline-end: 1px solid var(--mud-palette-lines-inputs, #DCE3EA);
    margin-inline-end: 8px;
    white-space: nowrap;
}

.ccp-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

/* LanguageSwitcher.razor menu items. */
.language-switcher-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.ccp-dial {
    font-size: 0.95rem;
    color: #123B63;
}

.ccp-dial-placeholder {
    color: #687586;
}

.ccp-caret {
    margin-inline-start: -2px;
    color: #687586;
}

.ccp-phone-input {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 1rem;
    font-family: inherit;
    color: var(--mud-palette-text-primary, #212121);
}

.ccp-phone-input::placeholder {
    color: #9e9e9e;
}

.ccp-error-text {
    font-size: 0.75rem;
    color: #d32f2f;
    margin-top: 4px;
}

.ccp-popover {
    width: 300px;
}

.ccp-search-box {
    padding: 10px 12px 4px;
}

.ccp-option-list {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0 8px;
}

.ccp-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.ccp-option-row:hover {
    background: #F7F9FC;
}

.ccp-option-name {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.ccp-option-dial {
    font-size: 0.85rem;
    color: #687586;
}

.ccp-option-empty {
    padding: 16px 12px;
    text-align: center;
    color: #687586;
    font-size: 0.875rem;
}