/*
 * CRITICAL CSS - Phase 3 (74-3)
 * ============================================
 * This file documents critical above-fold CSS for reference.
 * Contents are inlined in templates/base.html <style> tag.
 *
 * Purpose: Render above-fold content immediately without waiting
 * for Bootstrap CSS (232KB) to download.
 *
 * Size target: ~5KB uncompressed, ~1.5KB gzipped
 *
 * Last updated: 2026-01-06 (added pricing page utilities)
 * See: docs/delivery/74-bootstrap-vanilla-css/74-3.md
 */

/* === ROOT VARIABLES ===
 * Extracted from global_bootstrap.css lines 1-47
 * Only include variables actually used in critical CSS
 */
:root {
    /* Theme colors */
    --bs-primary: #8B4513;     /* Saddle Brown */
    --primary-hover: color-mix(in srgb, var(--bs-primary) 85%, black);
    --bs-secondary: #2F4F4F;   /* Dark Slate Gray */
    --bs-body-bg: #F5F5DC;     /* Beige */
    --bs-border-color: #D2B48C; /* Tan */

    /* Layout */
    --navbar-height: 56px;
    --sticky-top-offset: var(--navbar-height);
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
}

/* Z-index hierarchy (subset needed for navbar) */
:root {
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-navbar: 1030;
}

/* Larger navbar on large screens - must match base.css */
@media (min-width: 992px) {
    :root {
        --navbar-height: 60px;
        --sticky-top-offset: var(--navbar-height);
    }
}

/* === REBOOT ESSENTIALS ===
 * Minimal subset of Bootstrap's reboot.css
 * Ensures consistent box-sizing and typography
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #F5F5DC;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Navbar brand images - explicit dimensions prevent CLS */
.brand-quotewise .navbar-brand img { width: 144px; height: 32px; aspect-ratio: 144 / 32; }
.brand-quotosaurus .navbar-brand img { width: 28px; height: 28px; aspect-ratio: 1; }

/* === CONTAINER & GRID ===
 * Bootstrap grid essentials for layout
 */
.container-fluid {
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

/* Bootstrap .container - must match CDN version to prevent CLS */
.container {
    --bs-gutter-x: 1.5rem;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

/* Column widths used above the fold */
.col {
    flex: 1 0 0%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

@media (min-width: 768px) {
    .col-md-8 {
        flex: 0 0 auto;
        width: 66.6667%;
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.3333%;
    }
}

@media (min-width: 992px) {
    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.6667%;
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.3333%;
    }
}

/* Bootstrap row-cols - responsive grid columns to prevent CLS */
.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-3 > * { flex: 0 0 auto; width: 33.3333%; }
.row-cols-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-6 > * { flex: 0 0 auto; width: 16.6667%; }
@media (min-width: 576px) {
    .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; }
    .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.3333%; }
    .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; }
}
@media (min-width: 768px) {
    .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
    .row-cols-md-3 > * { flex: 0 0 auto; width: 33.3333%; }
    .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
    .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; }
    .row-cols-md-6 > * { flex: 0 0 auto; width: 16.6667%; }
}
@media (min-width: 992px) {
    .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.3333%; }
    .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; }
    .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; }
    .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.6667%; }
    .row-cols-lg-8 > * { flex: 0 0 auto; width: 12.5%; }
}
@media (min-width: 1200px) {
    .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; }
    .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; }
    .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.6667%; }
}

/* Gap utilities */
.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.g-1 { --bs-gutter-x: 0.25rem; --bs-gutter-y: 0.25rem; }
.g-2 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

/* Bootstrap spacing utilities - prevent CLS from deferred CSS */
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

/* Responsive padding utilities - prevent CLS from deferred Bootstrap */
@media (min-width: 768px) {
    .py-md-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .mb-md-4 { margin-bottom: 1.5rem !important; }
}

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

/* From global_bootstrap.css:86-88 */
main.container-fluid > .row {
    --bs-gutter-x: 0;
}

/* === MAIN CONTENT LAYOUT ===
 * From global_bootstrap.css:91-102
 * Prevents content jumping under fixed navbar
 */
.main-content {
    position: relative;
    left: 0 !important;
    margin-left: 0;
    width: 100%;
    min-height: calc(100vh - var(--navbar-height) - 80px);
    padding-top: calc(var(--navbar-height) + 14px);  /* Tracks navbar + breathing room */
    padding-bottom: 2rem;
    padding-left: 0;
    padding-right: 0;
    overflow-x: clip;
}

/* Sticky header geometry - prevents CLS on originator/source pages */
#stickyHeader {
    --sticky-header-offset: 24px;
    background-color: white;
    border-bottom: 3px solid var(--bs-primary);
    margin-top: -7px;
    margin-left: calc(-1 * var(--sticky-header-offset));
    margin-right: calc(-1 * var(--sticky-header-offset));
    padding-left: var(--sticky-header-offset);
    padding-right: var(--sticky-header-offset);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

@media (max-width: 575.98px) {
    /* Bug fix 038: Eliminate negative margins on mobile to prevent overflow */
    #stickyHeader {
        --sticky-header-offset: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Sticky positioning - prevents CLS when layout.css loads late */
.sticky-top {
    position: sticky !important;
    top: var(--sticky-top-offset) !important;
    z-index: var(--z-index-sticky, 1020);
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* === NAVBAR ===
 * Essential navbar styling for above-fold rendering
 */
.navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: var(--navbar-height);  /* Explicit height prevents CLS from icon/font loading */
    z-index: var(--z-index-navbar);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

/* Bootstrap: .navbar > .container-fluid must be flex to prevent CLS when Bootstrap loads */
.navbar > .container-fluid {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

.navbar.bg-secondary {
    background-color: #2F4F4F !important;
}

.navbar-brand {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
    color: white;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.nav-link:hover,
.nav-link:focus {
    color: rgba(255, 255, 255, 0.75);
}

/* Align nav links with logo wordmark baseline */
.navbar-nav .nav-link {
    padding-top: 0.7rem;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    cursor: pointer;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1);
}

/* Hamburger icon for mobile */
.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* === RESPONSIVE UTILITIES ===
 * Display utilities used in navbar
 */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-1 { gap: 0.25rem !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.flex-grow-1 { flex: 1 1 auto !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.text-center { text-align: center !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.min-width-0 { min-width: 0 !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.start-0 { left: 0 !important; }
.end-0 { right: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }

/* Spacing utilities */
.pt-2 { padding-top: 0.5rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.ms-auto { margin-left: auto !important; }
.ms-2 { margin-left: 0.5rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* List utilities */
.list-unstyled {
    padding-left: 0;
    list-style: none;
}

/* Medium breakpoint (768px) - matches Bootstrap's md */
@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-flex { display: flex !important; }
    .d-md-block { display: block !important; }
    .d-md-inline-block { display: inline-block !important; }
    .justify-content-md-end { justify-content: flex-end !important; }
    .flex-md-row { flex-direction: row !important; }
    .mt-md-0 { margin-top: 0 !important; }

    /* Bootstrap navbar-expand-md: prevent CLS from flex-wrap change on Bootstrap load */
    .navbar-expand-md {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    /* Navbar expand at md breakpoint */
    .navbar-expand-md .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-md .navbar-nav {
        flex-direction: row;
    }

    /* Hide toggler on md+ */
    .navbar-expand-md .navbar-toggler {
        display: none;
    }
}

@media (max-width: 767.98px) {
    /* Mobile: collapse dropdown overlays content below navbar */
    .navbar-expand-md .navbar-collapse {
        display: none;
        position: absolute;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        background-color: #2F4F4F;  /* Match navbar bg-secondary */
        z-index: var(--z-index-dropdown);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    }
    .navbar-expand-md .navbar-collapse.show,
    .navbar-expand-md .navbar-collapse.collapsing {
        display: block !important;
        height: auto !important;  /* Override collapsing height:0 */
    }

    /* Mobile menu: stack items vertically */
    .navbar-expand-md .navbar-nav {
        flex-direction: column;
        padding: 0.5rem 0;
    }
    .navbar-expand-md .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        color: rgba(255, 255, 255, 0.9);
    }
    .navbar-expand-md .navbar-nav .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Mobile nav icons row */
    .mobile-nav-icons {
        display: flex;
    }

    /* Prevent navbar container-fluid from wrapping on mobile */
    .navbar .container-fluid {
        flex-wrap: nowrap !important;
    }
}

/* === BOOTSTRAP ICONS ===
 * Reserve space before icon font loads (prevents CLS)
 * Note: font-display: swap requires self-hosting (see 74-5)
 */
.bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.125em;
    width: 1em;
    height: 1em;
    fill: currentcolor;
}

.bi.fs-5 {
    width: 1.25rem;
    height: 1.25rem;
}

/* Collect icon: fixed dimensions prevent CLS on font load and state change */
.collect-icon {
    width: var(--qs-collect-icon-size, 1.25rem);
    height: var(--qs-collect-icon-size, 1.25rem);
}

/* === FOCUS RING (keyboard-only) ===
 * From global_bootstrap.css:123-130
 * Prevents persistent highlight after click/tap
 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn-link:focus:not(:focus-visible),
[data-bs-toggle]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* === BUTTON BASE ===
 * Minimal button styling for navbar buttons
 */
.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
}

/* Secondary button (used in navbar) */
.btn-secondary {
    color: #fff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

/* Outline secondary */
.btn-outline-secondary {
    color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-primary {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Fix: btn-check + btn-outline-primary hover for search mode tabs */
.btn-check + .btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Checked btn-outline-primary hover: darken slightly for feedback */
.btn-check:checked + .btn-outline-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-success {
    color: #198754;
    border-color: #198754;
}

.btn-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.btn-link {
    font-weight: 400;
    color: var(--bs-primary);
    text-decoration: none;
    padding: 0;
    background-color: transparent;
    border: 0;
}

.btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.btn-group > .btn {
    position: relative;
    flex: 1 1 auto;
}

.btn-group > .btn + .btn {
    margin-left: -1px;
}

/* === FORMS === */
.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

/* === TEXT & DECORATION UTILITIES === */
.text-decoration-none { text-decoration: none !important; }
.text-muted { color: #6c757d !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-primary { color: var(--bs-primary) !important; }
.text-white { color: #fff !important; }
.text-success { color: #198754 !important; }
.text-danger { color: #dc3545 !important; }
.bg-white { background-color: #fff !important; }
.bg-light { background-color: #f8f9fa !important; }
.bg-danger { background-color: #dc3545 !important; }
.bg-gradient { background-image: linear-gradient(180deg, rgba(255,255,255,.15), rgba(0,0,0,.15)); }
.small, small { font-size: 0.875em; font-weight: 400; }
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}
.h2 {
    font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
    .h2 {
        font-size: 2rem;
    }
}
.h4 { font-size: calc(1.275rem + 0.3vw); }
@media (min-width: 1200px) { .h4 { font-size: 1.5rem; } }
.h5 { font-size: 1.25rem; }
.h6 {
    font-size: 1rem;
}
.display-1 {
    font-size: calc(1.625rem + 4.5vw);
    font-weight: 300;
    line-height: 1.2;
}
@media (min-width: 1200px) { .display-1 { font-size: 5rem; } }
.lead {
    font-size: 1.25rem;
    font-weight: 300;
}
.display-4 {
    font-size: calc(1.475rem + 2.7vw);
    font-weight: 300;
    line-height: 1.2;
}
@media (min-width: 1200px) { .display-4 { font-size: 3.5rem; } }
.fw-bold { font-weight: 700 !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-2 { font-size: calc(1.325rem + 0.9vw) !important; }
@media (min-width: 1200px) { .fs-2 { font-size: 2rem !important; } }
.fs-1 { font-size: calc(1.625rem + 4.5vw) !important; }
@media (min-width: 1200px) { .fs-1 { font-size: 3rem !important; } }
.lh-base { line-height: 1.5 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }

/* === CARD === */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.375rem;
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem 1rem;
}

.card-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.175);
}

.card-header:first-child {
    border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;
}

.card-title {
    margin-bottom: 0.5rem;
}

.card-text:last-child {
    margin-bottom: 0;
}

.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.bg-light { background-color: #f8f9fa !important; }

.border-primary {
    --bs-border-opacity: 1;
    border-color: rgba(139, 69, 19, var(--bs-border-opacity)) !important;
}

.border-opacity-25 {
    --bs-border-opacity: 0.25;
}

.border-danger {
    border-color: #dc3545 !important;
}

.border-success {
    border-color: #198754 !important;
}

.border-top {
    border-top: 1px solid var(--bs-border-color) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--bs-border-color) !important;
}

.bg-success {
    background-color: #198754 !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* Quote card essentials to prevent above-fold shifts */
.quote-card {
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    position: relative;
    margin-bottom: 0.5rem;
    overflow: visible;
    z-index: auto;
}

/* Override Bootstrap mb-3 (16px) with 8px spacing */
.quote-card.mb-3 {
    margin-bottom: 0.5rem !important;
}

.quote-card .card-body {
    padding: 1rem;
}

.quote-card hr {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.quote-card.quote-card-collected {
    background-color: rgba(var(--bs-warning-rgb, 255,193,7), 0.05);
    border: 2px solid var(--bs-warning, #ffc107);
    box-shadow: 0 0 0 1px var(--bs-warning, #ffc107);
}

.quote-text {
    font-style: italic;
    color: var(--bs-secondary);
    font-size: 1.1rem;
    line-height: 1.5;
}

.quote-originator,
.quote-card-source {
    display: inline-flex;
    max-width: 100%;
}

.quote-source-container {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
}

.quote-tags-and-language {
    flex: 1 1 0;
    max-width: calc(100% - 360px);
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 0.125rem;
}

.quote-tags-and-language .badge {
    margin-bottom: 0.125rem;
    margin-top: 0.125rem;
    margin-right: 0.25rem;
}

.quote-actions {
    margin-left: auto;
    margin-top: 0.25rem;
    white-space: nowrap;
}

/* Reserve space for quote feed while deferred CSS loads */
#quote-container {
    min-height: 320px;
}

/* Ad placeholder: reserve space before async ad load */
.ad-placeholder {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}

.adsbygoogle[data-adsbygoogle-status="done"] + .ad-placeholder {
    display: none;
}

/* === ALERTS === */
.alert {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
}

.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.25rem 1rem;
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3e%3cpath d='M.293 1.707 1.707.293 8 6.586 14.293.293l1.414 1.414L9.414 8l6.293 6.293-1.414 1.414L8 9.414l-6.293 6.293-1.414-1.414L6.586 8 .293 1.707Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em;
    border: 0;
    border-radius: 0.375rem;
    opacity: 0.5;
}

.btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    opacity: 1;
}

.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    background-color: var(--bs-secondary);
}

/* === PAGINATION ===
 * Bootstrap pagination styles - prevent CLS on paginated pages
 */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
}

.page-link {
    position: relative;
    display: block;
    padding: 0.375rem 0.75rem;
    color: var(--bs-primary);
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.page-item:first-child .page-link {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.page-item:last-child .page-link {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.page-item.active .page-link {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
}

.page-link + .page-link {
    margin-left: -1px;
}

/* === STRETCHED LINK === */
.stretched-link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
}

/* === SPINNERS === */
@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.blockquote {
    margin: 0 0 1rem;
}

.blockquote-footer {
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875em;
    color: #6c757d;
}

/* Collapse (used in source detail header) */
.collapse:not(.show) {
    display: none;
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

/* Nav tabs */
.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-tabs {
    border-bottom: 1px solid var(--bs-border-color);
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    background: none;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    color: inherit;
}

.nav-tabs .nav-link.active {
    color: #212529;
    background-color: #fff;
    border-color: var(--bs-border-color);
    border-bottom-color: #fff;
}

.tab-content {
    padding-top: 0.5rem;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.fade {
    transition: opacity 0.15s linear;
}

.fade:not(.show) {
    opacity: 0;
}

/* === ORIGINATOR/SOURCE TAB CONTENT - CSS Grid Stacking ===
 * Prevents CLS by stacking tab panes in same grid cell.
 * All panes rendered but hidden, toggle visibility not display.
 * Eliminates height variance when switching tabs.
 */
.originator-tab-content {
    display: grid;
}

.originator-tab-content > .tab-pane {
    grid-area: 1 / 1;
    display: block !important;  /* Override Bootstrap display:none */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s linear;
}

.originator-tab-content > .tab-pane.show.active {
    visibility: visible;
    opacity: 1;
}

/* === SIMILAR QUOTES SEARCH (above the fold on /q/.../similar) === */
.similar-quotes-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.similar-quotes-input-container {
    position: relative;
    width: 100%;
    margin: 0;
    flex: 1 1 auto;
}

.similar-quotes-input {
    width: 100%;
    margin: 0;
    padding: 12px 40px 12px 12px;
    min-height: 80px;
    line-height: 1.5;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    resize: none;
}

.similar-quotes-submit {
    width: 100%;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 3rem;
    font-size: 1.3rem;
}

@media (min-width: 768px) {
    .similar-quotes-form {
        gap: 1rem;
        align-items: center;
    }

    .similar-quotes-submit {
        width: auto;
        flex: 0 0 auto;
        min-width: 120px;
    }
}

/* === AUTH FORM CRITICAL (signup/login above-fold) ===
 * Prevents FOUC for authentication pages
 */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.auth-form p { margin: 0; }

.errorlist {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #dc3545;
    font-size: 0.875rem;
}

.helptext {
    font-size: 0.875rem;
    color: #6c757d;
}

#password-match-error {
    min-height: 1.25rem;
    color: #dc3545;
    font-size: 0.875rem;
}

/* Cloudflare Turnstile placeholder (prevents CLS) */
.cf-turnstile {
    min-height: 65px;
    min-width: 300px;
}

/* Button loading state for Turnstile pending */
#signup-button[data-turnstile-pending="true"] {
    opacity: 0.65;
    cursor: wait;
}
#signup-button[data-turnstile-pending="true"] .signup-btn-text { display: none; }
#signup-button[data-turnstile-pending="true"] .signup-btn-loading { display: inline-flex !important; }

/* Password reset button loading state */
#reset-button[data-turnstile-pending="true"] {
    opacity: 0.65;
    cursor: wait;
}
#reset-button[data-turnstile-pending="true"] .reset-btn-text { display: none; }
#reset-button[data-turnstile-pending="true"] .reset-btn-loading { display: inline-flex !important; }