/**
 * Fahrschule Kostenrechner – Frontend-Styles
 *
 * DESIGNPRINZIP: Dieses Stylesheet definiert NUR Struktur (Layout, Spacing,
 * Proportionen). Alle visuellen Eigenschaften – Farben, Typografie, Border-
 * Radius, Box-Shadows – werden von Elementor geerbt.
 *
 * Elementors globale CSS-Custom-Properties:
 *   Farben:      --e-global-color-primary / -secondary / -text / -accent
 *   Typografie:  --e-global-typography-*-font-family / -font-weight
 *
 * Ohne Elementor greifen die Fallback-Variablen aus class-fkr-assets.php.
 *
 * @package FahrschuleKostenrechner
 * @since   1.0.0
 */

/* ─────────────────────────────────────────────────────────────────
   Interne Alias-Variablen – Elementor-Tokens auf kurze Namen mappen.
   Nur hier anpassen, wenn sich Elementors Variablenname ändert.
   ───────────────────────────────────────────────────────────────── */
.fkr-calculator {
    --fkr-primary:      var(--e-global-color-primary,   #f7a600);
    --fkr-secondary:    var(--e-global-color-secondary, #457b9d);
    --fkr-text:         var(--e-global-color-text,      #212529);
    --fkr-accent:       var(--e-global-color-accent,    var(--fkr-primary));

    --fkr-font:         var(--e-global-typography-text-font-family,    inherit);
    --fkr-font-heading: var(--e-global-typography-primary-font-family, inherit);
    --fkr-weight-body:  var(--e-global-typography-text-font-weight,    400);
    --fkr-weight-head:  var(--e-global-typography-primary-font-weight, 700);

    /* Border-Radius: Elementors Button-Radius als Basis */
    --fkr-radius:    var(--e-global-button-border-radius, 4px);
    --fkr-radius-sm: var(--e-global-button-border-radius, 4px);

    /* Strukturelle Abstände */
    --fkr-space-sm: .75rem;
    --fkr-space-md: 1.25rem;
    --fkr-space-lg: 1.5rem;

    --fkr-transition: var(--e-global-transition, 200ms ease);
}

/* ─────────────────────────────────────────────────────────────────
   Wrapper
   ───────────────────────────────────────────────────────────────── */
.fkr-calculator {
    font-family:   var(--fkr-font);
    font-weight:   var(--fkr-weight-body);
    color:         var(--fkr-text);
    border:        1px solid color-mix(in srgb, var(--fkr-text) 12%, transparent);
    border-radius: var(--fkr-radius);
    overflow:      hidden;
    max-width:     720px;
}

/* ─────────────────────────────────────────────────────────────────
   Header
   ───────────────────────────────────────────────────────────────── */
.fkr-header {
    display:     flex;
    align-items: center;
    gap:         1rem;
    background:  var(--fkr-primary);
    color:       #fff;
    padding:     var(--fkr-space-md) var(--fkr-space-lg);
}

.fkr-header__badge {
    flex-shrink:     0;
    width:           52px;
    height:          52px;
    background:      rgba(255, 255, 255, .18);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.fkr-header__class {
    font-family: var(--fkr-font-heading);
    font-weight: var(--fkr-weight-head);
    font-size:   1.35em;
}

.fkr-header__title {
    margin:      0 0 .15rem;
    font-family: var(--fkr-font-heading);
    font-weight: var(--fkr-weight-head);
    font-size:   inherit;
    line-height: 1.3;
}

.fkr-header__meta {
    margin:   0;
    font-size:.875em;
    opacity:  .85;
}

/* ─────────────────────────────────────────────────────────────────
   Bedingte Optionen
   ───────────────────────────────────────────────────────────────── */
.fkr-options {
    padding:       var(--fkr-space-md) var(--fkr-space-lg);
    background:    color-mix(in srgb, var(--fkr-text) 4%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--fkr-text) 10%, transparent);
}

.fkr-options__label {
    margin:         0 0 .75rem;
    font-family:    var(--fkr-font-heading);
    font-weight:    var(--fkr-weight-head);
    font-size:      .75em;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity:        .6;
}

.fkr-option {
    display:     flex;
    align-items: flex-start;
    gap:         .65rem;
    padding:     .4rem 0;
    cursor:      pointer;
    user-select: none;
}

.fkr-option__input {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.fkr-option__box {
    flex-shrink:   0;
    width:         20px;
    height:        20px;
    border:        2px solid color-mix(in srgb, var(--fkr-text) 30%, transparent);
    border-radius: var(--fkr-radius-sm);
    background:    transparent;
    margin-top:    .15em;
    transition:    border-color var(--fkr-transition), background var(--fkr-transition);
    position:      relative;
}

.fkr-option__box::after {
    content:       '';
    display:       block;
    position:      absolute;
    top:           3px;
    left:          5px;
    width:         7px;
    height:        4px;
    border-left:   2px solid #fff;
    border-bottom: 2px solid #fff;
    transform:     rotate(-45deg) scale(0);
    transition:    transform var(--fkr-transition);
}

.fkr-option__input:checked + .fkr-option__box {
    background:   var(--fkr-primary);
    border-color: var(--fkr-primary);
}

.fkr-option__input:checked + .fkr-option__box::after {
    transform: rotate(-45deg) scale(1);
}

.fkr-option__input:focus-visible + .fkr-option__box {
    outline:        2px solid var(--fkr-primary);
    outline-offset: 2px;
}

.fkr-option__text {
    font-size:   1em;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────
   Kostenaufschlüsselung
   ───────────────────────────────────────────────────────────────── */
.fkr-breakdown {
    padding: var(--fkr-space-md) var(--fkr-space-lg);
}

.fkr-breakdown__section + .fkr-breakdown__section {
    margin-top:  var(--fkr-space-lg);
    padding-top: var(--fkr-space-lg);
    border-top:  1px solid color-mix(in srgb, var(--fkr-text) 10%, transparent);
}

.fkr-breakdown__heading {
    margin:         0 0 .75rem;
    font-family:    var(--fkr-font-heading);
    font-weight:    var(--fkr-weight-head);
    font-size:      .75em;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity:        .55;
}

.fkr-breakdown__list {
    list-style: none;
    margin:     0 0 .75rem;
    padding:    0;
}

.fkr-breakdown__item {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             1rem;
    padding:         .45rem 0;
    border-bottom:   1px solid color-mix(in srgb, var(--fkr-text) 6%, transparent);
    transition:      opacity var(--fkr-transition), max-height var(--fkr-transition);
    overflow:        hidden;
    max-height:      80px;
}

.fkr-breakdown__item:last-child { border-bottom: none; }

.fkr-breakdown__item.fkr-item--hidden {
    opacity:        0;
    max-height:     0;
    padding:        0;
    pointer-events: none;
}

.fkr-breakdown__name {
    font-size:   1em;
    display:     flex;
    align-items: center;
    gap:         .35rem;
    flex-wrap:   wrap;
}

.fkr-breakdown__qty {
    display:       inline-block;
    font-size:     .78em;
    opacity:       .6;
    background:    color-mix(in srgb, var(--fkr-text) 6%, transparent);
    border-radius: var(--fkr-radius-sm);
    padding:       .05em .4em;
    white-space:   nowrap;
}

.fkr-breakdown__amount {
    font-family:          var(--fkr-font-heading);
    font-weight:          var(--fkr-weight-head);
    font-variant-numeric: tabular-nums;
    white-space:          nowrap;
}

.fkr-breakdown__subtotal {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         .6rem .75rem;
    background:      color-mix(in srgb, var(--fkr-text) 5%, transparent);
    border-radius:   var(--fkr-radius);
    font-size:       .875em;
    opacity:         .8;
}

.fkr-subtotal {
    font-family:          var(--fkr-font-heading);
    font-weight:          var(--fkr-weight-head);
    font-variant-numeric: tabular-nums;
    opacity:              1;
}

/* ─────────────────────────────────────────────────────────────────
   Gesamtsumme
   ───────────────────────────────────────────────────────────────── */
.fkr-total {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         var(--fkr-space-md) var(--fkr-space-lg);
    background:      var(--fkr-primary);
    color:           #fff;
}

.fkr-total__label {
    font-family: var(--fkr-font-heading);
    font-weight: var(--fkr-weight-head);
    font-size:   1em;
}

.fkr-total__amount {
    font-family:          var(--fkr-font-heading);
    font-weight:          var(--fkr-weight-head);
    font-size:            1.75em;
    font-variant-numeric: tabular-nums;
}

@keyframes fkr-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.fkr-total__amount--updated { animation: fkr-pop 280ms ease; }

/* ─────────────────────────────────────────────────────────────────
   Inline Item-Stepper (nutzer-editierbare Menge)
   ───────────────────────────────────────────────────────────────── */
.fkr-item-stepper {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    white-space: nowrap;
}

.fkr-item-stepper__btn {
    appearance:      none;
    -webkit-appearance: none;
    width:           28px;
    height:          28px;
    min-width:       28px;
    border:          2px solid color-mix(in srgb, var(--fkr-primary) 45%, transparent);
    background:      transparent;
    border-radius:   50%;
    font-size:       1.1rem;
    font-weight:     700;
    line-height:     1;
    cursor:          pointer;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    color:           var(--fkr-primary);
    padding:         0;
    margin:          0;
    box-shadow:      none;
    text-shadow:     none;
    font-family:     inherit;
    transition:      background var(--fkr-transition), color var(--fkr-transition), border-color var(--fkr-transition);
}

.fkr-item-stepper__btn:hover,
.fkr-item-stepper__btn:focus {
    background:   var(--fkr-primary);
    border-color: var(--fkr-primary);
    color:        #fff;
    outline:      none;
    box-shadow:   none;
}

.fkr-item-stepper__btn:active {
    transform: scale(.92);
}

.fkr-item-stepper__input {
    width:           46px;
    height:          22px;
    border:          none;
    background:      transparent;
    font-size:       .875em;
    font-family:     var(--fkr-font);
    font-weight:     var(--fkr-weight-head);
    text-align:      center;
    color:           var(--fkr-text);
    -moz-appearance: textfield;
    padding:         0;
}

.fkr-item-stepper__input::-webkit-outer-spin-button,
.fkr-item-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; }

.fkr-item-stepper__input:focus { outline: none; color: var(--fkr-primary); }

.fkr-item-stepper__unit {
    font-size: .78em;
    opacity:   .6;
    padding-right: 3px;
}

@keyframes fkr-amount-flash {
    0%   { color: var(--fkr-primary); }
    100% { color: var(--fkr-text); }
}

.fkr-breakdown__item--editable .fkr-breakdown__amount--changed {
    animation: fkr-amount-flash 400ms ease forwards;
}

/* ─────────────────────────────────────────────────────────────────
   Tooltip
   ───────────────────────────────────────────────────────────────── */
.fkr-tooltip {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           16px;
    height:          16px;
    border-radius:   50%;
    background:      color-mix(in srgb, var(--fkr-text) 10%, transparent);
    font-size:       .7em;
    font-weight:     var(--fkr-weight-head);
    cursor:          help;
    position:        relative;
}

.fkr-tooltip::before {
    content:        attr(data-tip);
    display:        none;
    position:       absolute;
    bottom:         calc(100% + 8px);
    left:           50%;
    transform:      translateX(-50%);
    background:     var(--fkr-text);
    color:          #fff;
    font-size:      .8em;
    padding:        .4rem .65rem;
    border-radius:  var(--fkr-radius);
    white-space:    normal;
    max-width:      220px;
    text-align:     center;
    line-height:    1.4;
    z-index:        99;
    pointer-events: none;
}

.fkr-tooltip:hover::before,
.fkr-tooltip:focus::before { display: block; }

/* ─────────────────────────────────────────────────────────────────
   Disclaimer
   ───────────────────────────────────────────────────────────────── */
.fkr-disclaimer {
    margin:      0;
    padding:     .75rem var(--fkr-space-lg) 1rem;
    font-size:   .75em;
    opacity:     .55;
    border-top:  1px solid color-mix(in srgb, var(--fkr-text) 10%, transparent);
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────
   Admin-Fehleranzeige
   ───────────────────────────────────────────────────────────────── */
.fkr-admin-error {
    padding:       .75rem 1rem;
    background:    #fff3cd;
    border:        1px solid #ffc107;
    border-radius: var(--fkr-radius);
    font-size:     .875em;
    color:         #664d03;
}

/* ─────────────────────────────────────────────────────────────────
   Responsive – kleine Screens (< 400px)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 399px) {
    .fkr-header {
        flex-direction: column;
        align-items:    flex-start;
        gap:            .5rem;
    }
    .fkr-total {
        flex-direction: column;
        align-items:    flex-start;
        gap:            .25rem;
    }
    .fkr-total__amount         { font-size: 1.4em; }
    .fkr-breakdown__item       { flex-direction: column; gap: .1rem; }
    .fkr-breakdown__amount     { align-self: flex-end; }
}

/* ─────────────────────────────────────────────────────────────────
   Barrierefreiheit – Reduced Motion
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fkr-total__amount--updated,
    .fkr-breakdown__item--editable .fkr-breakdown__amount--changed { animation: none; }

    .fkr-breakdown__item,
    .fkr-hours-btn,
    .fkr-item-stepper__btn,
    .fkr-option__box,
    .fkr-option__box::after { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Intro- & Schlusstext
   ───────────────────────────────────────────────────────────────── */
.fkr-intro-text {
    margin-bottom: 1.25rem;
    font-family:   var(--e-global-typography-text-font-family,    inherit);
    font-size:     1em;
    line-height:   1.7;
    color:         var(--e-global-color-text, inherit);
}

.fkr-outro-text {
    margin-top:  1.25rem;
    font-family: var(--e-global-typography-text-font-family, inherit);
    font-size:   1em;
    line-height: 1.7;
    color:       var(--e-global-color-text, inherit);
}

/* ─────────────────────────────────────────────────────────────────
   Modifier: Kompakter Modus
   ───────────────────────────────────────────────────────────────── */
.fkr-calculator--compact {
    --fkr-space-sm: .4rem;
    --fkr-space-md: .75rem;
    --fkr-space-lg: 1rem;
}

.fkr-calculator--compact .fkr-breakdown__item { padding: .3rem 0; }
.fkr-calculator--compact .fkr-hours-section,
.fkr-calculator--compact .fkr-options          { padding: .75rem 1rem; }

/* ─────────────────────────────────────────────────────────────────
   Modifier: Kein Schatten
   ───────────────────────────────────────────────────────────────── */
.fkr-calculator--no-shadow {
    box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────
   Skin: Flat
   Header ohne Hintergrundfarbe, Akzentlinie stattdessen.
   ───────────────────────────────────────────────────────────────── */
.fkr-calculator--skin-flat {
    border-top: 4px solid var(--fkr-primary);
}

.fkr-calculator--skin-flat .fkr-header {
    background: transparent;
    color:      var(--fkr-text);
    border-bottom: 1px solid color-mix(in srgb, var(--fkr-text) 10%, transparent);
}

.fkr-calculator--skin-flat .fkr-header__badge {
    background: color-mix(in srgb, var(--fkr-primary) 12%, transparent);
}

.fkr-calculator--skin-flat .fkr-header__class,
.fkr-calculator--skin-flat .fkr-header__title {
    color: var(--fkr-primary);
}

.fkr-calculator--skin-flat .fkr-total {
    background: color-mix(in srgb, var(--fkr-primary) 8%, transparent);
    color:      var(--fkr-text);
    border-top: 2px solid var(--fkr-primary);
}

.fkr-calculator--skin-flat .fkr-total__amount {
    color: var(--fkr-primary);
}

/* ─────────────────────────────────────────────────────────────────
   Skin: Minimal
   Keine Box, kein Rahmen – nur Inhalt auf der Seite.
   ───────────────────────────────────────────────────────────────── */
.fkr-calculator--skin-minimal {
    border:        none;
    border-radius: 0;
    box-shadow:    none;
}

.fkr-calculator--skin-minimal .fkr-header {
    background:    transparent;
    color:         var(--fkr-text);
    padding-left:  0;
    padding-right: 0;
    border-bottom: 2px solid var(--fkr-primary);
}

.fkr-calculator--skin-minimal .fkr-header__badge {
    background: color-mix(in srgb, var(--fkr-primary) 12%, transparent);
}

.fkr-calculator--skin-minimal .fkr-header__class,
.fkr-calculator--skin-minimal .fkr-header__title {
    color: var(--fkr-primary);
}

.fkr-calculator--skin-minimal .fkr-options,
.fkr-calculator--skin-minimal .fkr-hours-section,
.fkr-calculator--skin-minimal .fkr-breakdown {
    padding-left:  0;
    padding-right: 0;
}

.fkr-calculator--skin-minimal .fkr-total {
    background:    transparent;
    color:         var(--fkr-text);
    padding-left:  0;
    padding-right: 0;
    border-top:    2px solid color-mix(in srgb, var(--fkr-text) 15%, transparent);
}

.fkr-calculator--skin-minimal .fkr-total__amount {
    font-size: 2em;
    color:     var(--fkr-primary);
}

/* ─────────────────────────────────────────────────────────────────
   Skin: Bold
   Starke Kontraste, volle Breite, alles in Primärfarbe.
   ───────────────────────────────────────────────────────────────── */
.fkr-calculator--skin-bold {
    border: none;
}

.fkr-calculator--skin-bold .fkr-header {
    padding-top:    2rem;
    padding-bottom: 2rem;
}

.fkr-calculator--skin-bold .fkr-header__badge {
    width:  64px;
    height: 64px;
    background: rgba(255,255,255,.25);
}

.fkr-calculator--skin-bold .fkr-header__class { font-size: 1.6em; }
.fkr-calculator--skin-bold .fkr-header__title { font-size: 1.2em; }

.fkr-calculator--skin-bold .fkr-total {
    padding-top:    1.75rem;
    padding-bottom: 1.75rem;
}

.fkr-calculator--skin-bold .fkr-total__amount { font-size: 2.25em; }

.fkr-calculator--skin-bold .fkr-hours-btn:not(:hover),
.fkr-calculator--skin-bold .fkr-item-stepper__btn:not(:hover) {
    font-weight: bold;
}

/* ─────────────────────────────────────────────────────────────────
   Header-Layout: Zentriert
   ───────────────────────────────────────────────────────────────── */
.fkr-calculator--header-centered .fkr-header {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            .6rem;
}

/* ─────────────────────────────────────────────────────────────────
   Header-Layout: Slim (kein Badge, kompakte Höhe)
   ───────────────────────────────────────────────────────────────── */
.fkr-calculator--header-slim .fkr-header {
    padding-top:    .85rem;
    padding-bottom: .85rem;
}

/* ─────────────────────────────────────────────────────────────────
   PDF-Drucken-Button
   ───────────────────────────────────────────────────────────────── */
.fkr-print-bar {
    display:         flex;
    justify-content: flex-end;
    padding:         .6rem var(--fkr-space-lg);
    border-top:      1px solid color-mix(in srgb, var(--fkr-text) 8%, transparent);
    background:      color-mix(in srgb, var(--fkr-text) 2%, transparent);
}

.fkr-print-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .45rem;
    padding:         .45rem 1rem;
    border:          1.5px solid color-mix(in srgb, var(--fkr-primary) 50%, transparent);
    border-radius:   var(--fkr-radius);
    background:      transparent;
    color:           var(--fkr-primary);
    font-family:     var(--fkr-font);
    font-size:       .875em;
    font-weight:     var(--fkr-weight-head);
    cursor:          pointer;
    transition:      background var(--fkr-transition),
                     color      var(--fkr-transition),
                     border-color var(--fkr-transition);
}

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

.fkr-print-btn svg {
    flex-shrink: 0;
    transition:  transform var(--fkr-transition);
}

.fkr-print-btn:hover svg {
    transform: translateY(1px);
}

/* Button im Skin Flat / Minimal / Bold anpassen */
.fkr-calculator--skin-minimal .fkr-print-bar {
    padding-left:  0;
    padding-right: 0;
    background:    transparent;
    border-top:    1px solid color-mix(in srgb, var(--fkr-text) 10%, transparent);
    justify-content: flex-start;
}