/* ── United Heavy Haul – Site Styles ───────────────────────────────────────── */

:root {
    --uhh-dark:     #1a1f2e;
    --uhh-darker:   #141824;
    --uhh-orange:   #f59e0b;
    --uhh-orange-d: #d97706;
    --uhh-surface:  #f8f9fb;
    --uhh-border:   #e2e6ea;
}

/* ── Global ─────────────────────────────────────────────────────────────────── */
html, body {
    height: 100%;
    font-size: 0.92rem;
}

body {
    background-color: var(--uhh-surface);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Navbar ─────────────────────────────────────────────────────────────────── */
.uhh-navbar {
    background-color: var(--uhh-dark);
    border-bottom: 3px solid var(--uhh-orange);
}

.uhh-badge {
    background-color: var(--uhh-orange);
    color: #000;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
}

/* ── Main content area ───────────────────────────────────────────────────────── */
.uhh-main {
    flex: 1 0 auto;
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.uhh-footer {
    flex-shrink: 0;
    background-color: var(--uhh-dark);
    color: #6c757d;
    border-top: 1px solid #2d3348;
}

/* ── Login page ─────────────────────────────────────────────────────────────── */
.uhh-login-bg {
    background: linear-gradient(135deg, var(--uhh-darker) 0%, #2d3a5c 100%);
}

.uhh-login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.uhh-login-header {
    background: linear-gradient(135deg, var(--uhh-dark) 0%, #2d3a5c 100%);
}

/* ── Card headers ───────────────────────────────────────────────────────────── */
.uhh-card-header {
    background-color: var(--uhh-dark);
    color: #fff;
    padding: 0.75rem 1rem;
}

.uhh-card-header h5,
.uhh-card-header h6 {
    color: #fff;
}

/* ── Table header ───────────────────────────────────────────────────────────── */
.uhh-table-head th {
    background-color: var(--uhh-dark);
    color: #9aa5b4;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    border: none;
    white-space: nowrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn.uhh-btn-primary {
    background-color: var(--uhh-orange);
    border-color: var(--uhh-orange);
    color: #000;
    font-weight: 600;
    transition: background-color 0.15s ease;
}

.btn.uhh-btn-primary:hover,
.btn.uhh-btn-primary:focus {
    background-color: var(--uhh-orange-d);
    border-color: var(--uhh-orange-d);
    color: #000;
}

/* ── Rate display ────────────────────────────────────────────────────────────── */
.uhh-rate-display {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid #334155;
}

.uhh-rate-amount {
    color: var(--uhh-orange);
    font-size: 3rem;
    letter-spacing: -1px;
}

/* ── Info boxes ─────────────────────────────────────────────────────────────── */
.uhh-info-box {
    background-color: #f1f5f9;
    border: 1px solid var(--uhh-border);
}

/* ── Form controls ───────────────────────────────────────────────────────────── */
.form-control:focus,
.form-check-input:focus {
    border-color: var(--uhh-orange);
    box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.2);
}

.form-check-input:checked {
    background-color: var(--uhh-orange);
    border-color: var(--uhh-orange);
}

.input-group-text {
    background-color: #f1f5f9;
    border-color: #ced4da;
    color: #6c757d;
}

/* ── Oversize section toggle ────────────────────────────────────────────────── */
#oversizeSection {
    transition: opacity 0.2s ease;
}

/* ── Responsive tweaks ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .uhh-rate-amount {
        font-size: 2.25rem;
    }
}