html {
    font-size: 14px;
}

* {
    font-family: "Outfit", sans-serif;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@font-face {
    font-family: 'Buran';
    src: url('../fonts/Buran.ttf');
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #f4f1ec;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.border-custom {
    border-color: #ddd8d0 !important;
}

.elevated {
    background-color: #f5f4f0;
}

.btn-lg {
    font-size: 1rem !important;
    font-weight: bolder !important;
}

.footer {
    background-color: #f4f1ec;
    position: unset !important;
}

.accordion > * {
    outline: 0 !important;
    border: 0 !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.accordion-inner {
    border-top: 0 none;
}

.accordion-button {
    box-shadow: none !important;
}

.accordion-item {
    border: none !important;
}

.accordion-button:not(.collapsed) {
    border-bottom: none !important;
    box-shadow: none !important;
}

.card {
    overflow: hidden !important;
}

.buran {
    font-family: "Buran";
}

/* Blog post rich-text content — force color to inherit so author-applied
   inline color styles don't become unreadable when the theme changes. */
.blog-content {
    color: #333 !important;
}

    .blog-content * {
        color: inherit !important;
    }

/* Navbar blurred backdrop */
.navbar-backdrop {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.75);
    transition: background-color 0.2s;
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */

/* Page background */
[data-bs-theme="dark"] body {
    background-color: #191a1c !important;
}

/* .text-dark is used site-wide for nav links, headings, etc. It uses
   --bs-dark-rgb which doesn't change in dark mode, so we override here. */
[data-bs-theme="dark"] .text-dark {
    color: #dee2e6 !important;
}

/* Cards — hardcoded --bs-card-bg: #fefdfb in the custom Bootstrap build
   doesn't pick up the global dark-mode variable override. */
[data-bs-theme="dark"] .card {
    --bs-card-bg: #1e2124;
}

/* .table-light thead — hardcoded --bs-table-bg: #f8f9fa, same issue. */
[data-bs-theme="dark"] .table-light {
    --bs-table-color: #dee2e6;
    --bs-table-bg: #2a2d30;
    --bs-table-border-color: #495057;
}

/* Blog content readable in dark mode */
[data-bs-theme="dark"] .blog-content {
    color: #dee2e6 !important;
}


/* Buttons — invert .btn-dark to a light button in dark mode */
[data-bs-theme="dark"] .btn-dark {
    --bs-btn-color: #212529;
    --bs-btn-bg: #dee2e6;
    --bs-btn-border-color: #dee2e6;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #c8cdd1;
    --bs-btn-hover-border-color: #c8cdd1;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #bec4c9;
    --bs-btn-active-border-color: #b6bcbe;
}

/* btn-primary uses the site's near-black #1e2a2c — flip it like btn-dark */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #212529;
    --bs-btn-bg: #dee2e6;
    --bs-btn-border-color: #dee2e6;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #c8cdd1;
    --bs-btn-hover-border-color: #c8cdd1;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #bec4c9;
    --bs-btn-active-border-color: #b6bcbe;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #dee2e6;
    --bs-btn-border-color: #dee2e6;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #dee2e6;
    --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #dee2e6;
    --bs-btn-active-border-color: #dee2e6;
}

[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #dee2e6;
    --bs-btn-border-color: #dee2e6;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #dee2e6;
    --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #dee2e6;
    --bs-btn-active-border-color: #dee2e6;
}

/* Custom classes */
[data-bs-theme="dark"] .border-custom {
    border-color: #2e3236 !important;
}

[data-bs-theme="dark"] .elevated {
    background-color: #222428 !important;
}

[data-bs-theme="dark"] .footer {
    background-color: #191a1c !important;
}

/* Navbar */
[data-bs-theme="dark"] .navbar-backdrop {
    background-color: rgba(20, 21, 23, 0.88);
}

/* Basket / Account pill-buttons in the navbar that use bg-white */
[data-bs-theme="dark"] .nav-link.bg-white {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* .bg-light is used on data panels, test result boxes, checkout summary etc. */
[data-bs-theme="dark"] .bg-light {
    background-color: #2a2d30 !important;
}

/* Badges */
[data-bs-theme="dark"] .badge.bg-dark {
    background-color: #495057 !important;
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: #495057 !important;
    color: #dee2e6 !important;
}