/*
 * Front theme "v002" (Centrum Harmony design) — visual skin layered on top of
 * Bootstrap 4.6.2 (common/css/bootstrap.min.css), loaded after it in @layout.latte.
 *
 * Source of truth for the design tokens below: templates/v002/src/styles.css.
 * Keep token names identical to that file so a future template patch (v003, ...)
 * can be diffed/ported here with minimal rework.
 *
 * v001 -> v002 rebrand: primary accent hue moved from dusty rose (~12deg) to
 * an olive/sage green (~115-118deg); sage/gold/neutral tones shifted to match.
 * Hex fallbacks were recomputed from the new oklch() values (OKLab -> linear
 * sRGB -> sRGB, D65), same rounding approach as the original v001 port.
 *
 * Each color token is declared twice on purpose: a hex fallback first, then the
 * oklch() value. Browsers without oklch() support simply ignore the second,
 * invalid declaration and keep the hex fallback (CSS cascade progressive
 * enhancement, no @supports needed).
 */

@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:wght@600&display=swap');

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-ext-var.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/playfair-display-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/playfair-display-latin-ext-var.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --radius: 1rem;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;

    --background: #f9f3e9;
    --background: oklch(0.965 0.014 78);
    --foreground: #373322;
    --foreground: oklch(0.32 0.028 95);

    --cream: #f3ebde;
    --cream: oklch(0.942 0.019 80);
    --cream-deep: #ebe0d1;
    --cream-deep: oklch(0.912 0.024 78);

    --card: #fdf9f1;
    --card: oklch(0.982 0.011 82);

    --primary: #575c37;
    --primary: oklch(0.46 0.055 115);
    --primary-hover: #474b27;
    --primary-hover: oklch(0.4 0.055 115);
    --primary-foreground: #faf6ee;
    --primary-foreground: oklch(0.975 0.012 85);

    --secondary: #e6e4d3;
    --secondary: oklch(0.915 0.022 100);
    --secondary-foreground: #3e3f26;
    --secondary-foreground: oklch(0.36 0.04 110);

    --muted: #ece6da;
    --muted: oklch(0.925 0.017 84);
    --muted-foreground: #6d695a;
    --muted-foreground: oklch(0.52 0.024 95);

    --accent: #d7dcc5;
    --accent: oklch(0.885 0.032 118);
    --accent-foreground: #373b1f;
    --accent-foreground: oklch(0.34 0.045 115);

    --sage: #8a987b;
    --sage: oklch(0.66 0.045 128);
    --sage-soft: #d9e2ce;
    --sage-soft: oklch(0.9 0.028 128);
    --gold: #aa9f72;
    --gold: oklch(0.7 0.062 95);

    --destructive: #c13c3b;
    --destructive: oklch(0.55 0.17 25);
    --destructive-foreground: #fdfcf7;
    --destructive-foreground: oklch(0.99 0.006 90);

    --border: #dbd5c8;
    --border: oklch(0.875 0.019 88);

    --shadow-soft: 0 18px 45px -28px rgba(61, 40, 30, 0.35);
    --shadow-card: 0 24px 60px -34px rgba(61, 40, 30, 0.45);
}

html.dark {
    --background: #171610;
    --background: oklch(0.2 0.012 100);
    --foreground: #ece7de;
    --foreground: oklch(0.93 0.014 85);

    --cream: #211f18;
    --cream: oklch(0.24 0.014 100);
    --cream-deep: #28271e;
    --cream-deep: oklch(0.27 0.016 100);

    --card: #222119;
    --card: oklch(0.245 0.014 100);

    --primary: #a1aa80;
    --primary: oklch(0.72 0.06 118);
    --primary-hover: #929b71;
    --primary-hover: oklch(0.67 0.06 118);
    --primary-foreground: #19190e;
    --primary-foreground: oklch(0.21 0.02 110);

    --secondary: #2c2c21;
    --secondary: oklch(0.29 0.02 110);
    --secondary-foreground: #ebe8de;
    --secondary-foreground: oklch(0.93 0.014 90);

    --muted: #2a2921;
    --muted: oklch(0.28 0.014 100);
    --muted-foreground: #b3aea0;
    --muted-foreground: oklch(0.75 0.02 90);

    --accent: #343826;
    --accent: oklch(0.33 0.03 118);
    --accent-foreground: #ebe8de;
    --accent-foreground: oklch(0.93 0.014 90);

    --sage: #95a584;
    --sage: oklch(0.7 0.05 128);
    --sage-soft: #2c3323;
    --sage-soft: oklch(0.31 0.03 128);
    --gold: #c5b784;
    --gold: oklch(0.78 0.07 95);

    --destructive: #d24c49;
    --destructive: oklch(0.6 0.17 25);
    --destructive-foreground: #faf8f4;
    --destructive-foreground: oklch(0.98 0.006 90);

    --border: #3a382f;
    --border: oklch(0.34 0.016 100);

    --shadow-soft: 0 18px 45px -28px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 24px 60px -34px rgba(0, 0, 0, 0.7);
}

/* Base typography */

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

#main-content {
    line-height: 1.7;
}

#main-content h1 {
    font-size: 2.25rem;
    line-height: 1.25;
}

#main-content h2 {
    font-size: 1.875rem;
    line-height: 1.25;
}

#main-content h3 {
    font-size: 1.25rem;
    line-height: 1.35;
}

#main-content h4,
#main-content h5,
#main-content h6 {
    font-size: 1.125rem;
    line-height: 1.4;
}

@media (min-width: 576px) {
    #main-content h1 {
        font-size: 3rem;
    }

    #main-content h2 {
        font-size: 2.25rem;
    }
}

/* app/Core/Content/templates/default.latte (a shared, theme-agnostic core template used
   app-wide, not just by Front) ships its own inline "<style>.content-title{font-weight:bold}"
   as a generic fallback heading style. That inline block renders inside #main-content, i.e.
   later in the document than this external stylesheet's plain "h1{font-weight:500}" above, so
   for the equal ".content-title"-vs-"h1" specificity it wins by source order and every Front page
   title rendered through that shared template comes out bold instead of the theme's lighter
   Playfair Display 500 weight (confirmed via computed style against the reference design). The
   "#main-content" ancestor id (from @layout.latte) makes this specific enough to win regardless
   of order without having to touch that shared, non-Front-specific template. */
#main-content .content-title {
    font-weight: 500;
}

a {
    color: var(--primary);
}

a:hover, a:focus {
    color: var(--primary-hover);
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: var(--accent);
    color: var(--accent-foreground);
}

/* Buttons */

.btn {
    border-radius: 9999px;
    padding: 0.85rem 1.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.25s ease, color 0.25s ease,
        border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-sm {
    padding: 0.65rem 1.25rem;
    font-size: 0.8rem;
}

.btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--primary-foreground);
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.btn-outline-secondary {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--foreground);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--muted);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-danger {
    background-color: var(--destructive);
    border-color: var(--destructive);
    color: var(--destructive-foreground);
}

.btn-link {
    color: var(--primary);
    box-shadow: none;
}

/* Cards */

.card {
    background-color: var(--card);
    border-color: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

/* Embedded catalog cards inherit theme colors instead of Bootstrap's fixed text palette. */
.element-content-list .catalog-item-link {
    color: var(--foreground) !important;
}

.element-content-list .list-group-item {
    background-color: var(--card);
    border-color: var(--border);
}

.element-content-list .card-text.text-muted {
    color: var(--muted-foreground) !important;
}

.element-content-list-open {
    text-decoration: underline;
}

/* Keep series links readable on narrow screens regardless of the selected desktop width. */
@media (max-width: 575.98px) {
    .element-series {
        width: 100% !important;
    }
}

/* Front user settings
 *
 * Bootstrap's list groups, light alerts, badges, and form controls use fixed
 * light palette values. Scope their theme mapping to the user section so
 * plugin content follows the active Front theme without changing shared Admin
 * components that use the same Bootstrap classes.
 */

.user-settings .list-group-item {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--foreground);
}

.user-settings .list-group-item-action:hover,
.user-settings .list-group-item-action:focus {
    background-color: var(--cream-deep);
    color: var(--foreground);
}

.user-settings .list-group-item.active,
.user-settings .list-group-item.active:hover,
.user-settings .list-group-item.active:focus {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.user-settings .card-header,
.user-settings .card-footer,
.user-settings .input-group-text {
    background-color: var(--cream);
    border-color: var(--border);
    color: var(--foreground);
}

.user-settings .form-control,
.user-settings .custom-select {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--foreground);
}

.user-settings .form-control:focus,
.user-settings .custom-select:focus {
    background-color: var(--card);
    border-color: var(--primary);
    color: var(--foreground);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 25%, transparent);
}

.user-settings .form-control::placeholder {
    color: var(--muted-foreground);
}

.user-settings .form-control:disabled,
.user-settings .form-control[readonly],
.user-settings .custom-select:disabled {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

/* Front forms mirror the soft controls used by the v001 contact form. Keep the
 * scope below #main-content so shared form templates retain their Admin look. */
#main-content form label,
#main-content form .form-label {
    font-weight: 600;
}

#main-content form .form-control,
#main-content form .custom-select {
    height: auto;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
}

#main-content form textarea.form-control {
    min-height: 7rem;
}

/* Bootstrap modals/alerts embedded in front page content (e.g. the {uid-embed} form widget's
 * button+modal, or a plugin's confirmation dialog) otherwise render with zero theming - stock
 * square corners/white surface/system font next to this page's pill buttons, cream cards and
 * serif headings. Scoped below #main-content for the same reason as the form-control rules
 * above: keep shared Admin-reachable dialog templates (questionForm.latte etc.) on their
 * default look there. */
#main-content .modal-content {
    background-color: var(--card);
    border-color: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

#main-content .modal-header,
#main-content .modal-footer {
    border-color: var(--border);
}

#main-content .modal-title {
    font-family: var(--font-display);
    color: var(--foreground);
}

#main-content .modal-header .close {
    color: var(--foreground);
    text-shadow: none;
    opacity: 0.6;
}

#main-content .modal-header .close:hover {
    opacity: 1;
}

#main-content .alert {
    border-radius: var(--radius);
}

#main-content .alert-success {
    background-color: var(--sage-soft);
    border-color: var(--sage);
    color: var(--foreground);
}

#main-content .alert-danger {
    background-color: color-mix(in srgb, var(--destructive) 12%, var(--card));
    border-color: var(--destructive);
    color: var(--destructive);
}

/* Progressive content reveal ported from v001's Reveal component. JavaScript
 * enables the initial state in <head> so the page cannot flash fully visible
 * before the observer is attached. */
html.front-reveal-enabled #main-content .cms-section:not(.cms-section--first) .cms-section-inner > :not(script):not(style):not(.front-reveal-in),
html.front-reveal-enabled #main-content > .container:not(:has(.cms-section-inner)) > :not(script):not(style):not(.hidden-title):not(.front-reveal-in) {
    opacity: 0;
    transform: translateY(18px);
}

.front-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

.front-reveal.front-reveal-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

.user-settings .text-muted,
.user-settings .form-text {
    color: var(--muted-foreground) !important;
}

.user-settings .text-primary {
    color: var(--primary) !important;
}

.user-settings .text-secondary {
    color: var(--muted-foreground) !important;
}

.user-settings .alert-light,
.user-settings .badge-light {
    background-color: var(--muted);
    border-color: var(--border);
    color: var(--foreground);
}

.user-settings .badge-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.user-settings .badge-secondary {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

/* Testimonials
 *
 * The shared renderer exposes only this semantic class contract. All layout and
 * visual decisions stay in the active front theme so another theme can style
 * the same markup without changing the testimonial module.
 */

.testimonial-list {
    display: grid;
    gap: 2rem;
}

.testimonial-list--columns-1 {
    grid-template-columns: minmax(0, 1fr);
}

.testimonial-list--columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.testimonial-list--columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.testimonial-list--columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.testimonial {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 2rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.testimonial__quote {
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1;
}

.testimonial__text {
    flex: 1 1 auto;
    margin: 0.75rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.65;
}

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

.testimonial__author {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.testimonial__name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.125rem;
}

.testimonial__title {
    display: block;
    margin-top: 0.25rem;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .testimonial-list--columns-3,
    .testimonial-list--columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .testimonial-list--columns-2,
    .testimonial-list--columns-3,
    .testimonial-list--columns-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Related suggestions
 *
 * The shared renderer (app/Core/Shared/related-suggestions-widget.latte) exposes only this
 * semantic class contract plus a "--grid"/"--list" layout modifier. All visual and per-layout
 * decisions stay in the active front theme, same as Testimonials above, so another theme can
 * style the same markup without changing the module (Content/Audio use "--grid",
 * Videos' sidebar uses "--list").
 */

.widget-related-suggestion {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.widget-related-suggestion:hover,
.widget-related-suggestion:focus {
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transform: translateY(-2px);
}

.widget-related-suggestion:hover .widget-related-suggestion-title,
.widget-related-suggestion:focus .widget-related-suggestion-title {
    text-decoration: underline;
}

.widget-related-suggestion-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--foreground);
}

.widget-related-suggestion-meta,
.widget-related-suggestion-summary {
    display: block;
    color: var(--muted-foreground);
    font-size: 0.8rem;
}

/* --grid: card grid used by Content and Audio */

.widget-related-suggestions-list--grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.widget-related-suggestions-list--grid .widget-related-suggestion img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.widget-related-suggestions-list--grid .widget-related-suggestion-info {
    padding: 1rem 1.25rem 1.25rem;
}

.widget-related-suggestions-list--grid .widget-related-suggestion-title {
    font-size: 1rem;
}

.widget-related-suggestions-list--grid .widget-related-suggestion-meta,
.widget-related-suggestions-list--grid .widget-related-suggestion-summary {
    margin-top: 0.4rem;
}

@media (max-width: 991.98px) {
    .widget-related-suggestions-list--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .widget-related-suggestions-list--grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --list: compact sidebar list used by Videos */

.widget-related-suggestions-list--list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.widget-related-suggestions-list--list .widget-related-suggestion {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem;
    box-shadow: none;
}

.widget-related-suggestions-list--list .widget-related-suggestion:hover,
.widget-related-suggestions-list--list .widget-related-suggestion:focus {
    background-color: var(--muted);
    box-shadow: none;
}

.widget-related-suggestions-list--list .widget-related-suggestion img {
    flex-shrink: 0;
    width: 120px;
    height: 68px;
    object-fit: cover;
    border-radius: calc(var(--radius) - 4px);
}

.widget-related-suggestions-list--list .widget-related-suggestion-info {
    min-width: 0;
}

.widget-related-suggestions-list--list .widget-related-suggestion-title {
    font-size: 0.95rem;
}

@media (max-width: 900px) {
    .widget-related-suggestions-list--list .widget-related-suggestion img {
        width: 160px;
        height: 90px;
    }
}

/* Header / navbar */

/* Utility classes matching templates/v001 naming, kept minimal to what is
   actually used in @layout.latte (navbar brand). */
.font-display {
    font-family: var(--font-display);
}

.text-lg {
    font-size: 1.125rem;
}

.leading-tight {
    line-height: 1.25;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.text-foreground {
    color: var(--foreground);
}

#mainNavbar {
    /* matches v001's Navbar.tsx solid state (bg-background/90 backdrop-blur-md border-b
       border-border/70) - was var(--cream) before, which visually blended into a cream-background
       first section right below it. Switching to --background alone turned out not to be enough on
       its own: --background/--cream/--card are all near-white tones only a few RGB units apart in
       this palette (confirmed visually), so a 1px border in a similarly pale --border tone barely
       registers. A shadow is what actually reads as "separated" regardless of how close those tokens
       are - previously this only applied once scrolled (.navbar-shrink below), so the page looked
       unseparated right up until the first scroll. */
    padding: 10px 0;
    background-color: rgba(253, 249, 240, 0.85);
    /* matches v001's non-hero navbar state (bg-background/90 backdrop-blur-md) - a translucent,
       blurred bar rather than a fully solid one, so content scrolling underneath stays faintly
       visible through it. Declared twice on purpose (see file header): plain color first as a
       fallback, then the color-mix() version browsers without support simply ignore. */
    background-color: color-mix(in oklab, var(--background) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    /* Keep the separation visible without masking the content moving beneath the translucent bar. */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    transition: all 0.3s ease;
}

html.dark #mainNavbar,
html.dark #mainNavbar.navbar-shrink,
html.dark body.header-overlay #mainNavbar.navbar-shrink {
    background-color: rgba(25, 18, 14, 0.85);
    background-color: color-mix(in oklab, var(--background) 85%, transparent);
}

#mainNavbar.navbar-shrink {
    padding: 4px 0;
    background-color: rgba(253, 249, 240, 0.85);
    background-color: color-mix(in oklab, var(--background) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);
}

#mainNavbar .navbar-brand {
    font-family: var(--font-display);
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.navbar-brand-logo {
    /* Sized in em relative to .navbar-brand's own font-size (1.25rem via Bootstrap's
       .navbar-brand default, matching .navbar-brand-title below) so the logo always tracks
       whatever the current brand text size is, instead of a hardcoded pixel value. */
    display: block;
    height: 2.5em;
    width: auto;
}

.navbar-brand-text {
    display: flex;
    flex-direction: column;
}

#mainNavbar .container {
    /* Matches .cms-section-inner below exactly (max-width: 76rem; padding-inline: 1.25rem) instead
       of Bootstrap's own .container (width steps at 540/720/960/1140px, 15px padding) - confirmed
       against the reference design that its navbar and page content share literally the same
       "container-page" width/centering, so the logo and a page's heading/paragraph text start at
       the exact same x position, and the navbar's right edge lines up with where content ends. With
       Bootstrap's own .container this drifted: at a 1440px viewport the logo rendered 33px further
       right than the reference (150px+15px Bootstrap centering/padding vs. 112px+20px here), which
       is what read as the reported "logo/menu shifted right". This is also why .navbar-brand above
       no longer adds its own extra padding-left - the container's 1.25rem now plays that role, same
       as the reference (which doesn't pad its logo link at all beyond the shared container). */
    max-width: 76rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.navbar-brand-title {
    display: block;
    font-family: 'STIX Two Text', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.navbar-brand-subtitle {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--muted-foreground);
}

#mainNavbar .nav-link {
    white-space: nowrap;
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
}

#mainNavbar .navbar-nav .nav-link {
    padding-left: .875rem;
    padding-right: .875rem;
}

#mainNavbar .dropdown-item {
    white-space: nowrap;
    color: var(--foreground);
    font-size: 0.875rem;
}

#mainNavbar .nav-link:hover,
#mainNavbar.navbar-shrink .nav-link:hover {
    color: var(--primary);
}

#mainNavbar .navbar-nav .nav-link.link-selected,
#mainNavbar.navbar-shrink .nav-link.link-selected {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-color: var(--gold);
}

#mainNavbar .navbar-toggler {
    border-color: var(--border);
}

/* Bootstrap's default .navbar-light .navbar-toggler-icon is a fixed rgba(0,0,0,0.5) stroke,
   which barely clears contrast on the cream background and is nearly invisible on the dark
   theme's near-black background (#mainNavbar keeps the static navbar-light class in both
   themes). Replace it with the same SVG using a fully opaque stroke matching --foreground,
   so the icon tracks the theme like the rest of the navbar text. */
#mainNavbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23373322' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

html.dark #mainNavbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23ece7de' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border);
    background-color: var(--card);
    border-radius: 9999px;
    padding: 3px;
    margin-left: 0.5rem;
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.8rem;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle-btn:hover {
    color: var(--primary);
}

.theme-toggle-btn.active {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.dropdown-menu {
    /* Bootstrap's own .dropdown-menu background is a hardcoded white, never theme-aware. .dropdown-
       item's text color below already switches to a *light* tone in dark mode (var(--foreground)),
       so without this the submenu stayed light text on Bootstrap's white background - unreadable in
       dark mode specifically, even though it looked fine in light mode. */
    min-width: 220px;
    padding: 0.5rem;
    background-color: var(--card);
    border-color: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.dropdown-item {
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--muted);
    color: var(--primary);
}

@media (min-width: 992px) {
    #mainNavbar.navbar-menu-wide .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
    }

    #mainNavbar.navbar-menu-wide .navbar-brand {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    #mainNavbar.navbar-menu-wide .navbar-collapse {
        display: contents !important;
    }

    #mainNavbar.navbar-menu-wide .navbar-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        /* Full row width, matching #mainNavbar .container's max-width which is intentionally the
           same as the main-content section's width (see the .container comment above) - so wrapping
           here happens exactly when the menu no longer fits that section width. */
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.25rem;
        margin: 0 !important;
        padding-top: 0.75rem;
    }

    #mainNavbar.navbar-menu-wide .theme-toggle {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    .dropdown-menu {
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.2s ease;
        display: block;
        visibility: hidden;
    }

    .dropdown:hover .dropdown-menu {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }
}

/* Footer */

.site-footer {
    background: var(--cream);
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    padding: 3rem 0 1.5rem;
}

.footer-brand {
    font-size: 1.25rem;
    color: var(--foreground);
    margin-bottom: 0;
}

.footer-eyebrow {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--muted-foreground);
}

.gold-rule {
    height: 1px;
    width: 3.5rem;
    background: linear-gradient(90deg, var(--gold), transparent);
}

.footer-blurb {
    max-width: 20rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    white-space: pre-line;
}

.footer-heading {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--foreground);
    margin-bottom: 0;
}

.footer-links {
    margin-bottom: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.footer-bottom a {
    color: var(--muted-foreground);
    margin-left: 1.25rem;
}

.footer-bottom a:hover {
    color: var(--primary);
}

/* Cookie consent (Klaro - see app/Presentation/Front/privacy.latte) */

/* Klaro's own bundled stylesheet (www/js/klaro.js) themes almost everything through CSS custom
   properties read as e.g. "background-color:var(--dark1, #333)" - defining them here on .klaro
   is the mechanism Klaro itself is built for, so it reskins reliably regardless of the internal
   specificity/load-order of Klaro's own rules (confirmed by inspecting the rendered DOM/CSS: a
   plain class-based override here previously lost to Klaro's own, more specific
   ".klaro .cookie-notice:not(.cookie-modal-notice)" rule, injected after this stylesheet). */
.klaro {
    --font-family: var(--font-sans);
    /* fixes the cookie-notice heading falling back to Manrope: Klaro's own h1-h6 rule reads
       var(--title-font-family, inherit), which otherwise inherits the surrounding Manrope
       instead of the theme's Playfair Display heading font. */
    --title-font-family: var(--font-display);
    --border-radius: var(--radius);
    --border-width: 1px;

    /* card surface - Klaro's own default for both the notice bar and the modal box */
    --dark1: var(--card);
    /* secondary surface - divider/border color on header/footer, and the base .cm-btn
       background before a -success/-info modifier is applied */
    --dark2: var(--border);
    /* muted description text under each toggle */
    --dark3: var(--muted-foreground);

    /* text color against the --dark1 surface above - Klaro assumes a dark surface here, but
       --dark1 is now the light --card token, so this must be the normal dark foreground */
    --light1: var(--foreground);
    --light2: var(--border);
    /* "N Choose services" expand link inside a purpose row */
    --light3: var(--primary);

    /* accept button(s) + the "on" toggle color */
    --green1: var(--primary);
    --green2: var(--primary);
    --green3: var(--primary);
    --box-shadow-color: var(--primary);

    --button-text-color: var(--primary-foreground);
    --white2: var(--muted);
    --white3: var(--border);
}

/* Position/size are hardcoded literals in Klaro's own rule (not var()-based), matched via the
   notice's fixed internal id so this reliably wins over Klaro's own same-purpose rule regardless
   of class specificity or injection order (an id always outranks any number of classes). Turns
   the default edge-to-edge bar into a centered, bottom-anchored card like v001's CookieBanner. */
#klaro-cookie-notice {
    width: auto;
    max-width: 48rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    top: auto;
    margin-inline: auto;
    /* var(--border) is too close in tone to var(--card) to read as a border at all here (same
       near-white-vs-near-white issue called out elsewhere in this file for #mainNavbar) - mixing
       in --foreground instead gives a visible dark border in light mode and, since --foreground
       itself flips light in html.dark, a visible light border in dark mode, without needing a
       separate html.dark override. */
    border: 1px solid color-mix(in oklab, var(--foreground) 22%, transparent);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
}

.klaro .cn-ok {
    gap: 0.75rem;
}

.klaro .cm-btn {
    border-radius: 9999px;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
}

/* Reject/"Accept selected" have no dedicated color rule of their own in Klaro's stylesheet - they
   fall back to the plain .cm-btn background (--dark2, mapped to --border above for the header/
   footer divider use case), which paired with --button-text-color (--primary-foreground, a light
   tone) reads as near-white text on a barely-there pale background. Their real, full class lists
   (matched here) give this rule 5 classes of specificity - one more than Klaro's own 4-class
   ".klaro .cookie-notice .cm-btn.cm-btn-danger" - so it wins regardless of injection order, giving
   both an outline style like v001's secondary "btn-outline" button instead. */
.klaro .cookie-notice .cm-btn.cm-btn-danger.cn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-danger.cn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-info.cm-btn-accept {
    background-color: var(--card);
    border: 1px solid var(--border);
    color: var(--foreground);
}

.klaro .cookie-notice .cm-btn.cm-btn-danger.cn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger.cn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-info.cm-btn-accept:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.klaro .cookie-modal .cm-bg {
    background: rgba(0, 0, 0, 0.5);
}

.klaro .cookie-modal .cm-modal {
    border: 1px solid color-mix(in oklab, var(--foreground) 22%, transparent);
    box-shadow: var(--shadow-card);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ===== CMS sections (see ContentService::renderSections()) ===== */

.cms-section {
    /* full-bleed breakout: front pages always render content inside a Bootstrap .container, this
       lets a section's own background span the full viewport width regardless */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    background-color: var(--background);
}

.cms-section-inner {
    /* matches v001's container-page utility (max-width: 76rem) so ported sections keep the same
       reading width as the reference design, not Bootstrap's narrower default .container */
    max-width: 76rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* TinyMCE-authored bodies start/end with a plain <p> (or similar), which carries its own default
   browser margin. Without this, that margin collapses straight through .cms-section-inner (it has
   no padding-top/bottom of its own) and stacks on top of .cms-section's own padding, reading as an
   oversized, "unnatural" gap between the section's background and its visible content. */
.cms-section-inner > :first-child {
    margin-top: 0;
}

.cms-section-inner > :last-child {
    margin-bottom: 0;
}

/* Authoring utility ported from v001 (templates/git/src/styles.css @utility eyebrow) - available
   for content authors to use inside a section's TinyMCE body, e.g.
   <p class="eyebrow">Kosmeticke centrum</p><div class="gold-rule"></div> (.gold-rule already
   exists above, used by the footer) */
.eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
}

.cms-section--bg-cream {
    background-color: var(--cream);
}

.cms-section--bg-cream-deep {
    background-color: var(--cream-deep);
}

.cms-section--bg-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.cms-section--bg-primary a:not(.btn) {
    color: var(--primary-foreground);
}

.cms-section--bg-image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #ffffff;
}

.cms-section-background-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.cms-section--bg-image::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgba(20, 15, 16, 0.46);
    content: "";
}

.cms-section--bg-image a:not(.btn) {
    color: #ffffff;
}

.cms-section--hero {
    /* v001's actual homepage hero (large heading + image background + buttons) is intentionally
       tall (min-h-92vh). Forcing that same min-height on every "hero" section regardless of whether
       it has an image or how much text it holds left a
       large empty gap around ordinary short content (confirmed visually - a plain paragraph flex-
       centered in a 60vh box). Until image backgrounds exist, hero is just a bit more breathing
       room than a normal section, sized to its actual content like every other layout.
       No padding-top override outside header-overlay mode either: the navbar there is a normal
       sticky-top element that already reserves its own space, so an extra top offset here would
       just add another empty gap above the section (the header-overlay case below adds fixed-navbar
       clearance back in only when it's actually needed). */
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.cms-section--cta {
    text-align: center;
}

.cms-section--cta .cms-section-inner {
    max-width: 760px;
}

/* Homepage-style header overlay: the navbar floats transparent over a full-bleed first hero
   section and only becomes solid once the page is scrolled (see @layout.latte). */
body.header-overlay #mainNavbar {
    position: fixed;
    left: 0;
    right: 0;
    background-color: transparent;
    border-bottom-color: transparent;
    /* a shadow on an otherwise fully transparent bar would show as a stray line over the hero */
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Text/icon color while the navbar floats over the first section depends on THAT section's own
   background (see ContentService::getHeaderOverlayBackground()) - not a fixed color. 'default'/
   'cream'/'cream-deep' are the theme's own light-or-dark-depending-on-mode surfaces, so the normal
   --foreground already reads correctly against them in both light and dark mode (this was the bug:
   text was always forced to --primary-foreground, which is near-white in light mode and near-black
   in dark mode - unreadable against a same-toned background either way). Only 'primary' is a fixed,
   saturated accent color that specifically needs --primary-foreground for contrast. */
body.header-overlay #mainNavbar .nav-link,
body.header-overlay #mainNavbar .navbar-brand,
body.header-overlay #mainNavbar .navbar-brand-subtitle {
    color: var(--foreground);
}

body.header-overlay-bg-primary #mainNavbar .nav-link,
body.header-overlay-bg-primary #mainNavbar .navbar-brand,
body.header-overlay-bg-primary #mainNavbar .navbar-brand-subtitle {
    color: var(--primary-foreground);
}

body.header-overlay-bg-image #mainNavbar .nav-link,
body.header-overlay-bg-image #mainNavbar .navbar-brand,
body.header-overlay-bg-image #mainNavbar .navbar-brand-subtitle {
    color: #ffffff;
}

body.header-overlay-bg-primary #mainNavbar .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

body.header-overlay-bg-image #mainNavbar .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

body.header-overlay #mainNavbar.navbar-shrink {
    background-color: rgba(253, 249, 240, 0.85);
    background-color: color-mix(in oklab, var(--background) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    /* restores the shadow suppressed by the more specific "body.header-overlay #mainNavbar" rule
       above - once scrolled the bar is solid again and should look separated like everywhere else */
    box-shadow: var(--shadow-soft);
}

body.header-overlay #mainNavbar.navbar-shrink .nav-link,
body.header-overlay #mainNavbar.navbar-shrink .navbar-brand,
body.header-overlay #mainNavbar.navbar-shrink .navbar-brand-subtitle {
    color: var(--foreground);
}

body.header-overlay #main-flash,
body.header-overlay #main-content {
    padding-top: 0;
}

/* Clearance for the fixed transparent navbar - applies to whichever layout the first section uses
   (not just "hero"), since the PHP side (ContentService::shouldOverlayHeader()) already gates
   header-overlay purely on the section's 'overlapHeader' flag, independent of its layout.
   --navbar-h is kept in sync with the navbar's real rendered height by @layout.latte (it changes
   when the menu wraps onto a second row or the mobile menu opens) - the 88px fallback only
   applies before that JS runs (or with JS disabled), matching the old fixed single-line estimate. */
body.header-overlay .cms-section--first {
    padding-top: calc(var(--navbar-h, 88px) + 2rem);
}

/* Front-only theme mapping for shared content widgets. Their own templates contain
   light-mode fallback styles, so the #main-content scope deliberately has higher
   specificity and avoids changing the same widgets in Admin. */
#main-content .content-rating-btn,
#main-content .content-favorite-btn,
#main-content .share-button {
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--foreground);
}

#main-content .content-rating-btn:hover,
#main-content .content-favorite-btn:hover,
#main-content .share-button:hover {
    border-color: var(--primary);
    background-color: var(--muted);
    color: var(--primary);
}

#main-content .content-rating-btn.content-rating-active,
#main-content .content-favorite-btn.content-favorite-active {
    border-color: var(--primary);
    background-color: var(--accent);
    color: var(--accent-foreground);
}

#main-content .content-rating-note,
#main-content .content-favorite-note {
    color: var(--muted-foreground);
}

#main-content .share-dropdown {
    background-color: var(--card);
    border-color: var(--border);
    box-shadow: var(--shadow-card);
}

#main-content .share-option {
    color: var(--foreground);
}

#main-content .share-option:hover {
    background-color: var(--muted);
    color: var(--primary);
}

#main-content .share-option.copy-link {
    border-top-color: var(--border);
}

/* ===== Contact page boxes (see ContactService/Front/Contact) ===== */

.contact-box__map {
    /* Admin-pasted or Google-generated <iframe> embeds have no intrinsic height - without this
       they collapse to the browser default (~150px), which reads as a broken/empty map. */
    position: relative;
    width: 100%;
    min-height: 22rem;
}

.contact-box__map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.contact-box__hours li:last-child {
    border-bottom: 0 !important;
}

.contact-box__social {
    margin-bottom: 0;
}

.contact-box__social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.contact-box__map-link {
    display: inline-block;
    margin-top: 0.5rem;
}

/* Bounded "card" rendering for a box that shares its row with another box (width < 12, or several
   boxes packed into one row) - a full-bleed .cms-section background cannot work here since two
   different full-bleed backgrounds cannot sit side by side, so each box paints its own background
   token (reusing the existing .cms-section--bg-* color/foreground rules, see
   ContactService::getActiveBoxesForFront()) inside a normal, bounded, rounded panel instead. */
.contact-box-panel {
    height: 100%;
    padding: 2rem;
    border-radius: 1rem;
}

/* ===== Elements (see app/Services/Elements/Types/HintTooltipElementTypeService) ===== */

.element-hint-tooltip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background-color: var(--muted);
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.element-hint-tooltip:hover,
.element-hint-tooltip:focus {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    outline: none;
}

.element-hint-tooltip i {
    font-size: 0.95em;
}

/* Bootstrap's own tooltip popup (data-toggle="tooltip", initialized in the hint element's own
   inline <script>, see HintTooltipElementTypeService::renderElement()) is unstyled by default (a
   plain black bubble) - themed here to match the site's own elevated-surface look (same tokens as
   .card) instead of clashing with the warm/dark palette. Uses only custom properties already
   defined in :root/html.dark above, so it follows both themes with no separate dark override. */
.tooltip .tooltip-inner {
    max-width: 260px;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) / 2);
    background-color: var(--card);
    box-shadow: var(--shadow-soft);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 400;
    text-align: left;
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--card);
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--card);
}

.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--card);
}

.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--card);
}

/* CalendarScheduleElementTypeService's slot list - Bootstrap's own .list-group-item is hardcoded
   white with a light gray border regardless of theme, so on html.dark it stayed a bright white box
   with barely-visible gray text. Same token-based approach as .element-hint-tooltip above (no
   separate dark override needed - the tokens themselves already swap under html.dark). */
.element-calendar-schedule-slot {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--foreground);
}

.element-calendar-schedule-empty {
    color: var(--muted-foreground);
}

.element-calendar-schedule-cta {
    margin-top: 0.75rem;
}

/* ServiceVariantPickerElementTypeService's variant combobox - styled to match the same theme-aware
   look already used for the front user profile's own selects (.user-settings .form-control /
   "#main-content form .form-control" further up in this file, see UserSettingsFormFactory's
   language/currency fields), so this front-end embed's dropdown fits the site design in both light
   and dark mode instead of a plain unstyled browser <select>. A dedicated class rather than reusing
   ".form-control" - this select is not wrapped in a <form> (nothing here is submitted; the shared
   jQuery change handler in ServiceVariantPickerElementTypeService::renderElement() just rewrites the
   visible description/duration/price/CTA in place), so those two form-scoped selectors would not
   have matched it. Same token-based approach as .element-hint-tooltip/.element-calendar-schedule-slot
   above - no separate dark override needed, the tokens themselves already swap under html.dark. */
.element-service-variant-picker-select {
    display: block;
    width: 100%;
    height: auto;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    color: var(--foreground);
    font-family: var(--font-sans);
}

.element-service-variant-picker-select:focus {
    border-color: var(--primary);
    background-color: var(--card);
    color: var(--foreground);
    outline: none;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 25%, transparent);
}

.element-service-variant-picker-description {
    margin-top: 0.75rem;
    font-weight: 600;
    color: var(--foreground);
}

.element-service-variant-picker-details {
    margin-top: 0.35rem;
}

.element-service-variant-picker-cta {
    margin-top: 0.75rem;
}