/* ============================================================
   ATL Pallet Quotes — styled to match atl.co.uk inner pages
   All values measured from the live site (computed styles):
     font       "Noto Sans", Arial, sans-serif · 16px · w400
     topbar     #161616, slim
     header     #183262 solid, 107px, logo 75px, white nav (ls 1.008px)
     photo      200px full-width cover strip
     headings   #183262, CAPS, H1 32px / H2 22px, w400
     buttons    pill r48, 16px w700, ls 1.008px, CAPS;
                form buttons = outlined 2px #183262
     footer     white, centred, 40px navy LinkedIn icon
   ============================================================ */

:root {
    --atl-navy: #183262;
    --atl-navy-hover: #243F74;
    --atl-navy-deep: #122750;
    --atl-ink: #1b1b1b;
    --atl-grey: #5E5E5E;
    --atl-line: #e5e5e5;
    --atl-font: "Noto Sans", Arial, sans-serif;

    /* Re-brand the Radzen "material" theme to ATL navy. */
    --rz-primary: #183262;
    --rz-primary-dark: #122750;
    --rz-primary-light: #243F74;
    --rz-primary-lighter: #e7ecf5;
    --rz-secondary: #5E5E5E;
    --rz-text-color: #1b1b1b;
    --rz-link-color: #183262;
    --rz-text-font-family: "Noto Sans", Arial, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--atl-font);
    font-size: 16px;
    color: var(--atl-ink);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--atl-navy);
}

/* ---------- page shell ---------- */
.atl-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.atl-main {
    flex: 1 0 auto;
}

/* ---------- top bar (customer portal) ---------- */
.atl-topbar {
    background: #161616;
    text-align: center;
    padding: 4px 1rem;
}

.atl-topbar a {
    color: #ffffff;
    font-size: 15px;
    text-decoration: none;
    font-family: var(--atl-font);
}

.atl-topbar a:hover {
    text-decoration: underline;
}

/* ---------- header (solid navy, like inner pages) ---------- */
.atl-header {
    background: var(--atl-navy);
}

.atl-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    min-height: 107px;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.atl-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.atl-logo {
    height: 75px;
    width: auto;
    display: block;
}

.atl-nav {
    display: flex;
    gap: 1.75rem;
    margin-left: auto;
    flex-wrap: wrap;
    align-items: center;
}

.atl-nav a {
    color: #ffffff;
    text-decoration: none;
    font-family: var(--atl-font);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.008px;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
}

.atl-nav a:hover {
    border-bottom-color: #ffffff;
}

/* ---------- photo strip (200px, like /warehousing) ---------- */
.atl-photo-strip {
    height: 200px;
    width: 100%;
    background-image: url("https://img1.wsimg.com/isteam/ip/fc8b30c9-d83f-469e-8172-f202214bc4d3/AVI06009.jpg/:/cr=t:0%25,l:0%25,w:100%25,h:100%25/rs=w:1920,m");
    background-size: cover;
    background-position: 50% 50%;
}

/* ---------- intro / headings ---------- */
.atl-intro {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 1.5rem 0;
    text-align: center;
}

.atl-page-title {
    font-family: var(--atl-font);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--atl-navy);
    margin: 0 0 1rem;
}

.atl-intro-sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--atl-grey);
    max-width: 720px;
    margin: 0 auto;
}

.atl-section-title {
    font-family: var(--atl-font);
    font-size: 22px;
    font-weight: 400;
    color: var(--atl-navy);
    margin: 0 0 1.25rem;
}

/* ---------- form ---------- */
.atl-form-wrap {
    max-width: 860px;
    margin: 0 auto 3.5rem;
    padding: 0 1.5rem;
}

.atl-card {
    padding: 2.5rem 0 0;
}

.atl-form-section {
    margin: 0;
}

.atl-label {
    display: block;
    font-family: var(--atl-font);
    font-weight: 400;
    font-size: 15px;
    margin-bottom: 0.35rem;
    color: var(--atl-ink);
}

.atl-hint {
    margin: 0 0 0.75rem;
    color: var(--atl-grey);
    font-size: 0.9rem;
}

.atl-input {
    width: 100%;
}

/* Restyle Radzen material inputs to the site's plain bordered boxes */
.atl-form-wrap .rz-textbox,
.atl-form-wrap .rz-spinner,
.atl-form-wrap .rz-dropdown {
    width: 100%;
    font-family: var(--atl-font);
    font-size: 16px;
    background: #ffffff;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    box-shadow: none;
}

.atl-form-wrap .rz-textbox:enabled:focus,
.atl-form-wrap .rz-spinner:focus-within,
.atl-form-wrap .rz-dropdown:not(.rz-state-disabled):focus-within,
.atl-form-wrap .rz-dropdown.rz-state-focused {
    border-color: var(--atl-navy);
    box-shadow: 0 0 0 1px var(--atl-navy);
    outline: none;
}

.atl-pallet {
    display: flex;
    flex-direction: column;
}

.atl-pallet-label {
    font-weight: 700;
    margin-bottom: 0.35rem;
}

/* consent row */
.atl-consent {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.atl-consent-label {
    margin: 0;
    font-weight: 400;
    color: var(--atl-ink);
}

/* ---------- pill buttons (atl.co.uk style) ---------- */
.atl-pill {
    display: inline-block;
    font-family: var(--atl-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.008px;
    border-radius: 48px;
    padding: 10px 40px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.atl-pill-outline {
    background: transparent;
    border: 2px solid var(--atl-navy);
    color: var(--atl-navy);
}

.atl-pill-outline:hover:enabled,
.atl-pill-outline:hover {
    background: var(--atl-navy);
    color: #ffffff;
}

.atl-pill-solid {
    background: var(--atl-navy);
    border: 2px solid var(--atl-navy);
    color: #ffffff;
}

.atl-pill-solid:hover {
    background: var(--atl-navy-hover);
    border-color: var(--atl-navy-hover);
}

.atl-pill:disabled {
    opacity: 0.55;
    cursor: default;
}

.atl-submit-row {
    text-align: center;
    padding-top: 0.5rem;
}

.atl-secondary-btn {
    margin-top: 1.25rem;
}

.atl-privacy {
    text-align: center;
    color: var(--atl-grey);
    font-size: 0.85rem;
    margin: 0;
}

/* ---------- thank-you ---------- */
.atl-thanks {
    text-align: center;
    padding: 3rem 1rem;
}

.atl-thanks-icon {
    font-size: 3.5rem !important;
    color: #2e7d32;
    margin-bottom: 0.75rem;
}

/* ---------- footer (white, centred, like atl.co.uk) ---------- */
.atl-footer {
    flex-shrink: 0;
    background: #ffffff;
    border-top: 1px solid var(--atl-line);
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    font-family: var(--atl-font);
}

.atl-footer-social {
    display: inline-block;
    color: var(--atl-navy);
    margin-bottom: 1rem;
}

.atl-footer-social:hover {
    color: var(--atl-navy-hover);
}

.atl-footer-address {
    font-size: 16px;
    color: var(--atl-ink);
    margin: 0 0 0.5rem;
}

.atl-footer-contact {
    font-size: 16px;
    color: var(--atl-ink);
    margin: 0 0 1.5rem;
}

.atl-footer-contact a {
    color: var(--atl-navy);
    text-decoration: none;
}

.atl-footer-contact a:hover {
    text-decoration: underline;
}

.atl-footer-legal {
    font-size: 14px;
    color: var(--atl-grey);
    margin: 0;
    line-height: 1.8;
}

.atl-footer-legal a {
    color: var(--atl-navy);
    text-decoration: none;
}

.atl-footer-legal a:hover {
    text-decoration: underline;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
    .atl-header-inner {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .atl-nav {
        margin-left: 0;
        justify-content: center;
        gap: 0.9rem;
    }

    .atl-nav a {
        font-size: 15px;
    }

    .atl-logo {
        height: 60px;
    }

    .atl-photo-strip {
        height: 150px;
    }

    .atl-page-title {
        font-size: 26px;
    }
}

/* Blazor's default error UI */
#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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