/* === Base Reset === */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* === Light Theme === */
body[data-bs-theme="light"] {
    background-color: #f9f9f9;
    color: #111;
    --app-accordion-text: #111827;
    --app-accordion-muted: rgba(55, 65, 81, 0.78);
    --app-accordion-border: rgba(17, 24, 39, 0.1);
    --app-accordion-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 246, 248, 0.96));
    --app-accordion-button-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 250, 251, 0.95));
    --app-accordion-button-open-bg: linear-gradient(180deg, rgba(243, 244, 246, 0.98), rgba(255, 255, 255, 0.96));
    --app-accordion-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    --app-accordion-icon-filter: none;
}

a:not(.btn) {
    color: #111;
    text-decoration: none;
}

a:not(.btn):hover {
    text-decoration: underline;
}

a.underline:hover {
    text-decoration: underline !important;
}

/* Light specific components */
body[data-bs-theme="light"] .bg-dark {
    background-color: rgb(240, 240, 240) !important;
}

/* === Dark Theme === */
body[data-bs-theme="dark"] {
    background-color: #1a1a1a;
    color: #fff;
    --app-accordion-text: #f8fafc;
    --app-accordion-muted: rgba(226, 232, 240, 0.72);
    --app-accordion-border: rgba(148, 163, 184, 0.16);
    --app-accordion-surface: linear-gradient(180deg, rgba(44, 44, 44, 0.98), rgba(24, 24, 24, 0.94));
    --app-accordion-button-bg: linear-gradient(180deg, rgba(56, 56, 56, 0.94), rgba(33, 33, 33, 0.96));
    --app-accordion-button-open-bg: linear-gradient(180deg, rgba(74, 74, 74, 0.96), rgba(36, 36, 36, 0.96));
    --app-accordion-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
    --app-accordion-icon-filter: invert(1);
}

body[data-bs-theme="dark"] a:not(.btn) {
    color: #fff;
    text-decoration: none;
}

/* Dark specific components */
body[data-bs-theme="dark"] #kyroNavbar {
    background-color: #1a1a1a;
}

body[data-bs-theme="dark"] #burgerToggle {
    color: #fff;
}

body[data-bs-theme="dark"] .offcanvas {
    background-color: #222;
    color: #fff;
}

body[data-bs-theme="dark"] .offcanvas .btn-close {
    background-color: #fefeff;
    filter: invert(1);
}


body[data-bs-theme="dark"] #kyroNavbar .header-title {
    color: #fff;
}

/* === Reusable === */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

input, select, textarea, button {
    font-family: inherit;
    font-size: 1rem;
}

#loadingOverlay {
    position: fixed;
    inset: 0;
    background-color: #fff;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

#loadingOverlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#kyroNavbar {
    width: 100%;
    background: #f9f9f9;
}

#burgerToggle {
    border: 2px solid;
    border-radius: 5px;
    padding: 0 5px;
}

#toggleMode {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding-inline: 0.75rem;
}

#toggleMode:focus,
#toggleMode:active,
#toggleMode:hover {
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.site-ui.public-language-overlay-open {
    overflow: hidden;
}

.offcanvas ul li a {
    display: block;
    padding: 0.75rem 0;
    color: inherit;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.modern-btn {
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 36px;
    border: 2px solid;
    border-radius: 49px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.modern-btn:hover {
    transform: scale(1.05);
    text-decoration: none !important;
}

body[data-bs-theme="dark"] .modern-btn {
    color: #fff;
    border-color: #fff;
}

body[data-bs-theme="light"] .modern-btn {
    color: #000;
    border-color: #000;
}

body[data-bs-theme="light"] .modern-btn:hover {
    color: #111;
}

/* === Bootstrap === */
body[data-bs-theme="light"] .btn-outline-light {
    --bs-btn-color: #111;
    --bs-btn-border-color: #111;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #111;
    --bs-btn-hover-border-color: #111;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #111;
    --bs-btn-active-border-color: #111;
    --bs-btn-disabled-color: #111;
    --bs-btn-disabled-border-color: #111;
}

body[data-bs-theme="dark"] {
    --bs-body-bg: #292929
}

/* = CARDS = */
body[data-bs-theme="dark"] .card {
    --bs-card-bg: #292929
}

/* = TITLES = */
body[data-bs-theme="dark"] .h1,
body[data-bs-theme="dark"] .h2,
body[data-bs-theme="dark"] .h3,
body[data-bs-theme="dark"] .h4,
body[data-bs-theme="dark"] .h5,
body[data-bs-theme="dark"] .h6,
body[data-bs-theme="dark"] h1,
body[data-bs-theme="dark"] h2,
body[data-bs-theme="dark"] h3,
body[data-bs-theme="dark"] h4,
body[data-bs-theme="dark"] h5,
body[data-bs-theme="dark"] h6 {
    --bs-heading-color: white;
}

/* = BUTTONS = */
body[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-color: #111;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #ffffff;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-active-color: #111;
    --bs-btn-disabled-border-color: #ffffff;
}

body[data-bs-theme="dark"] .btn-dark {
    --bs-btn-color: #111;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-color: #111;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-active-color: #111;
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #ffffff;
    --bs-btn-disabled-color: #111;
    --bs-btn-disabled-bg: #ffffff;
    --bs-btn-disabled-border-color: #ffffff;
}

/* = accordion = */
.accordion {
    --bs-accordion-color: var(--app-accordion-text);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--app-accordion-border);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-color: var(--app-accordion-text);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--app-accordion-text);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon-width: 1rem;
}

.accordion-item {
    color: var(--app-accordion-text);
    background: var(--app-accordion-surface);
    border: 1px solid var(--app-accordion-border);
    border-radius: 22px !important;
    overflow: hidden;
    box-shadow: var(--app-accordion-shadow);
    backdrop-filter: blur(14px);
}

.accordion-item + .accordion-item {
    margin-top: 0.9rem;
}

.accordion-header {
    margin: 0;
}

.accordion-button {
    padding: 1rem 1.2rem;
    background: var(--app-accordion-button-bg);
    color: var(--app-accordion-text);
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: 0 !important;
}

.accordion-button:hover {
    background: var(--app-accordion-button-open-bg);
}

.accordion-button:not(.collapsed) {
    background: var(--app-accordion-button-open-bg);
    color: var(--app-accordion-text);
    box-shadow: inset 0 -1px 0 var(--app-accordion-border);
}

.accordion-button.collapsed {
    color: var(--app-accordion-text);
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button::after {
    filter: var(--app-accordion-icon-filter);
    opacity: 0.82;
}

.accordion-body {
    background: transparent;
    color: var(--app-accordion-text);
    padding: 1rem 1.2rem 1.2rem;
}

.accordion-body > :last-child {
    margin-bottom: 0;
}

body[data-bs-theme="dark"] .list-group-item {
    background-color: #222;
    color: #f0f0f0;
    border-color: #333;
}

body[data-bs-theme="dark"] .list-group-item span[data-id-ingredient] {
    font-weight: 500;
}

body[data-bs-theme="dark"] .badge.bg-dark {
    background-color: #0f1012;
    color: #fff;
}