﻿:root {
    --q-brand-blue: #21277E;
    --q-accent-orange: #F38019;
    --q-light-bg: #F4F4F8;
    --q-step-gray: #C7C9DE;
    --q-text: #1E1E1E;
    --q-success: #008000;
    --q-white: #FFFFFF;
    --q-border: #1E1E1E;
    --q-border-soft: #d9dce7;
    --q-radius-md: 8px;
    --q-radius-sm: 4px;
    --q-shadow-soft: 0 1px 3px rgba(0,0,0,.06);
    --q-shadow-tooltip: 0 0 15px rgba(0, 0, 0, 0.25);
    --q-font-family: 'Source Sans Pro', Arial, sans-serif;
    --q-control-height: 42px;
    --q-addon-width: 48px;
    --q-btn-height: 38px;
    --q-label-col-width-lg: 33.3333%;
    --q-input-col-width-lg: 66.6667%;
}

/* =========================================
   1. Site shell
   ========================================= */

.quote-site-shell {
    min-height: 100vh;
    background: var(--q-white);
}

.quote-site-main {
    width: 100%;
}

/* =========================================
   2. Site header
   ========================================= */

.quote-site-header {
    width: 100%;
    background: var(--q-brand-blue);
}

.quote-site-header__inner {
    max-width: 1440px;
    margin: 0 auto;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem 0 0.5rem;
    color: var(--q-white);
}

.quote-site-header__brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.quote-site-header__brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.quote-site-header__logo {
    display: block;
    max-height: 58px;
    width: auto;
}

.quote-site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    flex: 1 1 auto;
}

.quote-site-header__action-link {
    color: var(--q-white);
    text-decoration: none;
    font-family: var(--q-font-family);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

    .quote-site-header__action-link:hover,
    .quote-site-header__action-link:focus {
        color: var(--q-white);
        text-decoration: underline;
    }

/* =========================================
   3. Shared quote form layout
   ========================================= */

.quote-form-row {
    margin-bottom: 1rem;
}

.quote-label-col {
    display: flex;
    align-items: center;
    min-height: var(--q-control-height);
}

.quote-label {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 400;
    color: var(--q-text);
}

/* =========================================
   4. Shared responsive header behavior
   ========================================= */

@media (max-width: 991.98px) {
    .quote-site-header__inner {
        min-height: 76px;
        padding: 0 0.75rem 0 0.5rem;
    }

    .quote-site-header__logo {
        max-height: 46px;
    }

    .quote-site-header__action-link {
        font-size: 12px;
    }
}

@media (max-width: 575.98px) {
    .quote-site-header__inner {
        min-height: 64px;
        padding: 0 0.5rem;
    }

    .quote-site-header__logo {
        max-height: 38px;
    }

    .quote-site-header__actions {
        gap: 0.75rem;
    }

    .quote-site-header__action-link {
        font-size: 11px;
        letter-spacing: 0.03em;
    }
}
