/* ==========================================================================
   Nelson's Car Hire — Shared component polish
   Loaded AFTER each page's stylesheet so consistent interaction states apply
   site-wide without editing six near-identical nav/footer blocks.
   Visual/CSS only — no layout or logic changes.
   ========================================================================== */

/* --- Top navigation links ---------------------------------------------- */
.nav-bar-links ul li a {
    position: relative;
    transition: color var(--dur) var(--ease);
}

.nav-bar-links ul li a:hover,
.nav-bar-links ul li a:focus-visible {
    color: var(--brand-cyan);
}

/* Animated underline for the hovered (non-active) link */
.nav-bar-links ul li a:not(.nav-bar-link-active)::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -4px;
    height: 2px;
    border-radius: var(--r-xs);
    background-color: var(--brand-cyan);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur) var(--ease);
}

.nav-bar-links ul li a:not(.nav-bar-link-active):hover::after,
.nav-bar-links ul li a:not(.nav-bar-link-active):focus-visible::after {
    transform: scaleX(1);
}

/* --- Language switch ---------------------------------------------------- */
.nav-bar-lang-btn {
    transition: background-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

.nav-bar-lang-btn:hover:not(.nav-bar-lang-btn-active) {
    background-color: rgba(255, 255, 255, 0.18);
}

/* --- Footer links ------------------------------------------------------- */
.footer-container-links-container-1 ul li a,
.footer-container-links-container-2 ul li a,
.footer-container-copyright a {
    transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.footer-container-links-container-1 ul li a:hover,
.footer-container-links-container-2 ul li a:hover,
.footer-container-links-container-1 ul li a:focus-visible,
.footer-container-links-container-2 ul li a:focus-visible {
    color: var(--brand-cyan);
}

.footer-container-copyright a:hover,
.footer-container-copyright a:focus-visible {
    color: var(--brand-cyan);
}

/* Keep the focus ring visible against the dark footer */
.footer a:focus-visible {
    outline-color: var(--brand-cyan);
    outline-offset: 3px;
}

/* --- Mobile side-nav links --------------------------------------------- */
.side-nav-bar ul li a {
    transition: color var(--dur) var(--ease);
}

.side-nav-bar ul li:hover a,
.side-nav-bar ul li a:focus-visible {
    color: var(--brand-cyan);
}

/* --- Booking modal (shared across home / fleets / offers) --------------- */
/* Appearance only — each page keeps its own modal width/position/flow. */
.booking-container-body {
    background-color: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.booking-form-body-user-details input,
.booking-form-body-user-details textarea {
    font-family: var(--font-body);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.booking-form-body-user-details input:focus-visible,
.booking-form-body-user-details textarea:focus-visible {
    outline: none;
    border-color: var(--brand-cyan);
    box-shadow: var(--focus-ring);
}

.booking-form-body-user-details input.booking-form-body-user-details-warning {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(215, 39, 46, 0.18);
}

.booking-confirmation-and-btns button {
    background-color: var(--brand-cyan);
    color: var(--ink);
    border-radius: var(--r-sm);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--dur) var(--ease);
}

.booking-confirmation-and-btns button:first-of-type:hover,
.booking-confirmation-and-btns button:first-of-type:focus-visible {
    background-color: var(--brand-cyan-dark);
}

.booking-confirmation-and-btns button:last-child {
    background-color: transparent;
    box-shadow: none;
    font-weight: var(--fw-medium);
    color: var(--brand-red);
    transition: color var(--dur) var(--ease);
}

.booking-confirmation-and-btns button:last-child:hover,
.booking-confirmation-and-btns button:last-child:focus-visible {
    color: var(--brand-red-dark);
}

.booking-confirmation-p {
    border-bottom: 1px solid var(--border-soft);
}

.booking-confirmation-p:last-child {
    border-bottom: 0;
}

.booking-confirmation-p span:first-child {
    color: var(--muted);
    font-size: var(--fs-sm);
}

.booking-confirmation-p span:last-child {
    font-weight: var(--fw-semibold);
    color: var(--ink);
}