/*
 * Kartracing Anmeldung – Frontend-Stylesheet  v2.1
 * ─────────────────────────────────────────────────────────────────────────────
 * Alle --kr-* Custom Properties werden dynamisch von PHP gesetzt (wp_add_inline_style).
 *
 * Typografie: Das Formular nutzt automatisch die Elementor Global-Schriften:
 *   Fließtext → --e-global-typography-text-*
 *   Labels, Buttons, Tabs → --e-global-typography-accent-*
 */

/* ── Basis-Reset innerhalb des Wrappers ──────────────────────────────────── */
.kartracing-wrapper *,
.kartracing-wrapper *::before,
.kartracing-wrapper *::after {
    box-sizing: border-box;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.kartracing-wrapper {
    /* Typografie: Fließtext → Elementor "text"-Typografie */
    font-family:    var(--e-global-typography-text-font-family, inherit);
    font-size:      var(--e-global-typography-text-font-size, 1rem);
    font-weight:    var(--e-global-typography-text-font-weight, 400);
    line-height:    var(--e-global-typography-text-line-height, 1.6);

    color:          var(--kr-color-text, #202020);

    --kr-transition:    0.2s ease;
    --kr-shadow-sm:     0 2px 8px rgba(0,0,0,0.08);
    --kr-shadow-md:     0 4px 20px rgba(0,0,0,0.14);
    --kr-shadow-popup:  0 8px 40px rgba(0,0,0,0.25);
    --kr-radius-sm:     4px;
    --kr-radius-md:     8px;
    --kr-radius-lg:     12px;
}

/* ── Tab-Icon ────────────────────────────────────────────────────────────── */
.kr-tab-icon {
    font-size:   var(--kr-tab-icon-size, 1.15em);
    line-height: 1;
    display:     inline-block;
    margin-right: 4px;
}

/* ── 2-Spalten-Feldzeile (Name + Telefon) ────────────────────────────────── */
.kartracing-field-row {
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       var(--kr-field-spacing, 16px);
    margin-bottom: var(--kr-field-spacing, 16px);
}

.kartracing-field-row > .kartracing-field {
    margin-bottom: 0;
}

/* ── Tabs (Pill-Style) ───────────────────────────────────────────────────── */
.kartracing-tabs {
    display:        flex;
    gap:            8px;
    margin-bottom:  12px;
    flex-wrap:      wrap;
}

.kartracing-tab {
    flex:            1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         10px 18px;
    border:          2px solid transparent;
    border-radius:   999px;
    background:      rgba(255,255,255,0.75);
    color:           var(--kr-color-tab-text, #202020);
    cursor:          pointer;
    transition:      background var(--kr-transition), color var(--kr-transition),
                     border-color var(--kr-transition), box-shadow var(--kr-transition);
    backdrop-filter: blur(6px);

    /* Typografie → Elementor "accent" */
    font-family:     var(--e-global-typography-accent-font-family, inherit);
    font-size:       var(--e-global-typography-accent-font-size, 0.9rem);
    font-weight:     var(--e-global-typography-accent-font-weight, 600);
    text-transform:  var(--e-global-typography-accent-text-transform, none);
}

.kartracing-tab:hover:not(.kartracing-tab--active) {
    background:   rgba(255,255,255,0.95);
    border-color: rgba(0,0,0,0.12);
    box-shadow:   0 2px 8px rgba(0,0,0,0.08);
}

.kartracing-tab--active {
    background:   var(--kr-color-tab-active-bg, #D71F26);
    color:        var(--kr-color-tab-active-text, #FFFFFF);
    border-color: transparent;
    box-shadow:   0 3px 12px rgba(0,0,0,0.15);
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.kartracing-panel {
    background:    var(--kr-color-panel-bg, rgba(231,231,231,0.5));
    border:        none;
    border-radius: var(--kr-panel-radius, 10px);
    padding:       var(--kr-panel-padding, 2rem);
    margin:        0;
    box-shadow:    var(--kr-panel-shadow, 1px 1px 10px 0px rgba(0,0,0,0.1));
}

.kartracing-panel--hidden {
    display: none;
}

.kartracing-intro {
    margin:    0 0 20px 0;
    color:     var(--kr-color-text-muted, #656A74);
    font-size: var(--e-global-typography-text-font-size, 1rem);
}

/* ── Felder ──────────────────────────────────────────────────────────────── */
.kartracing-field {
    margin-bottom: var(--kr-field-spacing, 16px);
}

.kartracing-field--indented {
    margin-left:   20px;
    background:    var(--kr-color-indented-bg, rgba(232,237,242,0.7));
    border-left:   3px solid var(--kr-color-indented-border, #D71F26);
    border-radius: 0 var(--kr-radius-sm) var(--kr-radius-sm) 0;
    padding:       16px;
}

/* ── Labels ──────────────────────────────────────────────────────────────── */
.kartracing-label {
    display:        block;
    margin-bottom:  6px;
    color:          var(--kr-color-label, #131416);

    /* Typografie → Elementor "accent" */
    font-family:    var(--e-global-typography-accent-font-family, inherit);
    font-size:      var(--kr-label-font-size, var(--e-global-typography-accent-font-size, 0.875rem));
    font-weight:    var(--e-global-typography-accent-font-weight, 600);
    text-transform: var(--e-global-typography-accent-text-transform, none);
}

.kartracing-required {
    color:       var(--kr-color-required, #D71F26);
    margin-left: 2px;
}

.kartracing-hint {
    display:     block;
    margin-top:  6px;
    color:       var(--kr-color-text-muted, #656A74);
    font-size:   var(--kr-hint-font-size, var(--e-global-typography-text-font-size, 0.875rem));
}

/* ── Inputs & Selects ────────────────────────────────────────────────────── */
.kartracing-input,
.kartracing-select {
    display:      block;
    width:        100%;
    padding:      var(--kr-input-padding, 10px 16px);
    border:       var(--kr-input-border-width, 1.5px) var(--kr-input-border-style, solid) var(--kr-color-input-border, #E0E0E0);
    border-radius:var(--kr-input-border-radius, 8px);
    background:   var(--kr-color-input-bg, rgba(255,255,255,0.9));
    color:        var(--kr-color-text, #202020);

    /* Typografie → Elementor "text" */
    font-family:  var(--e-global-typography-text-font-family, inherit);
    font-size:    var(--e-global-typography-text-font-size, 1rem);
    font-weight:  var(--e-global-typography-text-font-weight, 400);
    line-height:  var(--e-global-typography-text-line-height, 1.6);

    appearance:   none;
    -webkit-appearance: none;
    transition:   border-color var(--kr-transition), box-shadow var(--kr-transition);
}

/* Platzhalter: 10 % kleiner, helles Grau */
.kartracing-input::placeholder {
    font-size:   calc(var(--e-global-typography-text-font-size, 1rem) * 0.9);
    color:       #b0b5bd;
    opacity:     1;
}

.kartracing-input:focus,
.kartracing-select:focus {
    outline:      none;
    border-color: var(--kr-color-input-focus, #D71F26);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--kr-color-input-focus, #D71F26) 18%, transparent);
}

.kartracing-input--number {
    max-width: 120px;
}

/* Grüner Rahmen bei korrekter Eingabe (on blur) */
.kartracing-input--valid,
.kartracing-select.kartracing-input--valid {
    border-color: #4CAF50 !important;
    box-shadow:   0 0 0 2px rgba(76,175,80,0.15) !important;
}

/* ── Kart-Dropdown ───────────────────────────────────────────────────────── */
.kartracing-select-wrapper {
    position: relative;
}

.kartracing-select-wrapper .kartracing-select {
    padding-right: 2.5rem;
    cursor: pointer;
}

.kartracing-select-wrapper::after {
    content:        '▾';
    position:       absolute;
    right:          14px;
    top:            50%;
    transform:      translateY(-50%);
    pointer-events: none;
    color:          var(--kr-color-text-muted, #656A74);
    font-size:      0.85em;
}


/* ── Fieldsets ───────────────────────────────────────────────────────────── */
.kartracing-fieldset {
    border:  none;
    margin:  0;
    padding: 0;
}

/* ── Radio-Gruppe ────────────────────────────────────────────────────────── */
.kartracing-radio-group {
    display:    flex;
    gap:        20px;
    flex-wrap:  wrap;
    margin-top: 6px;
}

.kartracing-radio-label {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    user-select: none;

    font-family: var(--e-global-typography-text-font-family, inherit);
    font-size:   var(--e-global-typography-text-font-size, 1rem);
    font-weight: var(--e-global-typography-text-font-weight, 400);
}

.kartracing-radio {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.kartracing-radio-custom {
    display:       inline-block;
    width:         20px;
    height:        20px;
    border:        2px solid var(--kr-color-input-border, #E0E0E0);
    border-radius: 50%;
    background:    var(--kr-color-input-bg, rgba(255,255,255,0.9));
    flex-shrink:   0;
    transition:    border-color var(--kr-transition), background var(--kr-transition);
    position:      relative;
}

.kartracing-radio:checked + .kartracing-radio-custom {
    border-color: var(--kr-color-control-active, #D71F26);
    background:   var(--kr-color-control-active, #D71F26);
}

.kartracing-radio:checked + .kartracing-radio-custom::after {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #fff;
}

.kartracing-radio:focus-visible + .kartracing-radio-custom {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kr-color-control-active, #D71F26) 25%, transparent);
}

/* ── Checkbox-Gruppe (Wetter) ────────────────────────────────────────────── */
.kartracing-checkbox-group {
    display:    flex;
    flex-wrap:  wrap;
    gap:        12px;
    margin-top: 6px;
}

.kartracing-checkbox-label {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    user-select: none;

    font-family: var(--e-global-typography-text-font-family, inherit);
    font-size:   var(--e-global-typography-text-font-size, 1rem);
    font-weight: var(--e-global-typography-text-font-weight, 400);
}

.kartracing-checkbox {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.kartracing-checkbox-custom {
    display:       inline-block;
    width:         20px;
    height:        20px;
    border:        2px solid var(--kr-color-input-border, #E0E0E0);
    border-radius: var(--kr-input-border-radius, 8px);
    background:    var(--kr-color-input-bg, rgba(255,255,255,0.9));
    flex-shrink:   0;
    transition:    border-color var(--kr-transition), background var(--kr-transition);
    position:      relative;
}

.kartracing-checkbox:checked + .kartracing-checkbox-custom {
    border-color: var(--kr-color-control-active, #D71F26);
    background:   var(--kr-color-control-active, #D71F26);
}

.kartracing-checkbox:checked + .kartracing-checkbox-custom::after {
    content:    '';
    position:   absolute;
    top:        3px;
    left:       6px;
    width:      5px;
    height:     9px;
    border:     2px solid #fff;
    border-top: none;
    border-left:none;
    transform:  rotate(45deg);
}

.kartracing-checkbox:focus-visible + .kartracing-checkbox-custom {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kr-color-control-active, #D71F26) 25%, transparent);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.kartracing-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         var(--kr-btn-padding, 1rem 3rem);
    border:          none;
    border-radius:   var(--kr-btn-radius, 0px) !important;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background var(--kr-transition), transform var(--kr-transition),
                     box-shadow var(--kr-transition);

    /* Typografie → Elementor "accent" */
    font-family:    var(--e-global-typography-accent-font-family, inherit);
    font-size:      var(--e-global-typography-accent-font-size, 1rem);
    font-weight:    var(--e-global-typography-accent-font-weight, 700);
    text-transform: var(--e-global-typography-accent-text-transform, none);
}

.kartracing-btn:active {
    transform: scale(0.97);
}

.kartracing-btn--primary {
    background: var(--kr-color-primary, #D71F26);
    color:      var(--kr-color-primary-text, #FFFFFF);
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}

.kartracing-btn--primary:hover:not(:disabled) {
    background: var(--kr-color-primary-hover, #131416);
    box-shadow: 0 5px 18px rgba(0,0,0,0.18);
    transform:  translateY(-1px);
}

.kartracing-btn--secondary {
    background: var(--kr-color-secondary, #131416);
    color:      var(--kr-color-secondary-text, #FFFFFF);
}

.kartracing-btn--danger {
    background: #D71F26;
    color:      #fff;
    box-shadow: 0 2px 8px rgba(215,31,38,0.25);
}

.kartracing-btn--danger:hover:not(:disabled) {
    background: #b01a1f;
    transform:  translateY(-1px);
}

.kartracing-btn--secondary:hover:not(:disabled) {
    filter: brightness(1.15);
}

.kartracing-btn:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

/* Lade-Indikator am Button */
.kartracing-btn--loading::after {
    content:       '';
    display:       inline-block;
    width:         14px;
    height:        14px;
    border:        2px solid rgba(255,255,255,0.4);
    border-top:    2px solid #fff;
    border-radius: 50%;
    animation:     kr-spin 0.7s linear infinite;
    margin-left:   8px;
}

.kartracing-submit-row {
    margin-top: 20px;
}

/* ── Fehler-Hinweis ──────────────────────────────────────────────────────── */
.kartracing-notice {
    margin-top:    16px;
    padding:       12px 20px;
    border-radius: var(--kr-radius-md);
    font-size:     var(--e-global-typography-text-font-size, 0.9rem);
    font-weight:   500;
}

.kartracing-notice--error {
    background:  var(--kr-color-error-bg, rgba(241,242,243,0.8));
    border-left: 4px solid var(--kr-color-error-text, #D71F26);
    color:       var(--kr-color-error-text, #D71F26);
}

.kartracing-notice--hidden {
    display: none;
}

/* ── Honeypot (unsichtbar für echte User) ────────────────────────────────── */
.kartracing-hp {
    position:   absolute;
    left:       -9999px;
    top:        -9999px;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    visibility: hidden;
    opacity:    0;
}

/* ── Overlay / Popup ─────────────────────────────────────────────────────── */
.kartracing-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.6);
    z-index:         99999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
    animation:       kr-fade-in 0.25s ease;
}

.kartracing-overlay--hidden {
    display: none;
}

.kartracing-popup {
    background:     var(--kr-color-popup-bg, #FFFFFF);
    border-radius:  var(--kr-radius-lg);
    padding:        32px;
    max-width:      460px;
    width:          100%;
    text-align:     center;
    box-shadow:     var(--kr-shadow-popup);
    animation:      kr-slide-up 0.3s ease;
}

.kartracing-popup__icon {
    font-size:     3rem;
    margin-bottom: 16px;
    line-height:   1;
}

.kartracing-popup__title {
    margin:        0 0 10px 0;
    color:         var(--kr-color-popup-title, #131416);

    font-family:   var(--e-global-typography-accent-font-family, inherit);
    font-size:     var(--e-global-typography-accent-font-size, 1.25rem);
    font-weight:   var(--e-global-typography-accent-font-weight, 700);
    text-transform:var(--e-global-typography-accent-text-transform, none);
}

.kartracing-popup__text {
    margin:        0 0 24px 0;
    color:         var(--kr-color-popup-text, #656A74);
    font-size:     var(--e-global-typography-text-font-size, 1rem);
    line-height:   1.7;
}

.kartracing-popup__text a {
    color:           var(--kr-color-popup-link, #D71F26);
    font-weight:     600;
    text-decoration: underline;
}

.kartracing-popup__text a:hover {
    filter: brightness(0.85);
}

/* ── App-Store-Badges im Popup ───────────────────────────────────────────── */
.kartracing-popup__appstore {
    display:         flex;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             10px;
    margin:          0 0 20px;
}

.kr-store-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    padding:        10px 16px;
    background:     #111;
    color:          #fff;
    border-radius:  10px;
    text-decoration:none;
    min-width:      145px;
    border:         1px solid #333;
    transition:     opacity 0.15s, transform 0.1s;
}

.kr-store-btn:hover {
    opacity:   0.88;
    transform: translateY(-1px);
}

.kr-store-btn__icon {
    display:    flex;
    align-items:center;
    flex-shrink:0;
    color:      #fff;
}

.kr-store-btn__text {
    display:       flex;
    flex-direction:column;
    line-height:   1.2;
    gap:           1px;
}

.kr-store-btn__text small {
    font-size:   0.6rem;
    opacity:     0.75;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.kr-store-btn__text strong {
    font-size:  0.92rem;
    font-weight:700;
}

/* ── Update-Banner (Bekannter Fahrer) ────────────────────────────────────── */
.kartracing-update-banner {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    background:    linear-gradient(135deg, rgba(215,31,38,0.07), rgba(215,31,38,0.03));
    border:        1px solid rgba(215,31,38,0.18);
    border-left:   4px solid var(--kr-color-primary, #D71F26);
    border-radius: 0 var(--kr-radius-md) var(--kr-radius-md) 0;
    padding:       14px 16px;
    margin-bottom: var(--kr-field-spacing, 16px);
    animation:     kr-fade-in 0.25s ease;
}

.kartracing-update-banner[hidden] {
    display: none;
}

.kartracing-update-banner__icon {
    font-size:  1.4rem;
    line-height:1;
    flex-shrink:0;
    margin-top: 1px;
}

.kartracing-update-banner__content strong:first-child {
    display:     block;
    font-size:   0.88rem;
    font-weight: 700;
    color:       var(--kr-color-primary, #D71F26);
    margin-bottom: 3px;
    font-family: var(--e-global-typography-accent-font-family, inherit);
}

.kartracing-update-banner__content p {
    margin:     0;
    font-size:  0.85rem;
    color:      var(--kr-color-text-muted, #656A74);
    line-height:1.5;
}

.kartracing-update-banner__content p strong {
    color:      var(--kr-color-text, #202020);
    font-weight:700;
}

/* ── Storno-Link ─────────────────────────────────────────────────────────── */
.kartracing-cancel-trigger {
    text-align: center;
    margin-top: 12px;
}

.kartracing-cancel-link {
    font-size:       0.82rem;
    color:           var(--kr-color-text-muted, #9ca3af);
    text-decoration: underline;
    text-decoration-style: dotted;
    transition:      color 0.15s;
}

.kartracing-cancel-link:hover {
    color: var(--kr-color-primary, #D71F26);
}

/* ── Storno-Bereich ──────────────────────────────────────────────────────── */
.kartracing-cancel-section {
    margin-top:    20px;
    background:    rgba(255,255,255,0.7);
    border:        1px solid rgba(0,0,0,0.08);
    border-radius: var(--kr-panel-radius, 10px);
    padding:       24px;
    box-shadow:    0 2px 12px rgba(0,0,0,0.06);
    animation:     kr-fade-in 0.2s ease;
}

.kartracing-cancel-section__header {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    margin-bottom: 20px;
    padding-bottom:16px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.kartracing-cancel-section__icon {
    font-size:  2rem;
    line-height:1;
    flex-shrink:0;
}

.kartracing-cancel-section__header h3 {
    margin:     0 0 4px;
    font-size:  1rem;
    font-weight:700;
    color:      var(--kr-color-text, #202020);
    font-family:var(--e-global-typography-accent-font-family, inherit);
}

.kartracing-cancel-section__header p {
    margin:    0;
    font-size: 0.875rem;
    color:     var(--kr-color-text-muted, #656A74);
}

.kartracing-cancel-confirm {
    margin-top: 12px;
    padding:    16px;
    background: rgba(215,31,38,0.05);
    border:     1px solid rgba(215,31,38,0.15);
    border-radius: var(--kr-radius-md);
    animation:  kr-fade-in 0.2s ease;
}

.kartracing-cancel-confirm p {
    margin:    0 0 14px;
    font-size: 0.9rem;
    color:     var(--kr-color-text, #202020);
}

.kartracing-cancel-actions {
    display:  flex;
    gap:      10px;
    flex-wrap:wrap;
}

.kartracing-cancel-success[hidden] {
    display: none;
}

.kartracing-cancel-success {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     20px;
    background:  rgba(76,175,80,0.07);
    border:      1px solid rgba(76,175,80,0.25);
    border-radius: var(--kr-radius-md);
    margin-top:  12px;
    animation:   kr-fade-in 0.25s ease;
}

.kartracing-cancel-success span {
    font-size:  1.8rem;
    line-height:1;
    flex-shrink:0;
}

.kartracing-cancel-success p {
    margin:    0;
    font-size: 0.95rem;
    color:     var(--kr-color-text, #202020);
    font-weight:500;
}

/* ── Hidden-Form ─────────────────────────────────────────────────────────── */
.kartracing-form--hidden {
    display: none;
}

/* ── Animationen ─────────────────────────────────────────────────────────── */
@keyframes kr-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes kr-slide-up {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes kr-spin {
    to { transform: rotate(360deg); }
}

/* ── Body bei geöffnetem Popup ───────────────────────────────────────────── */
body.kartracing-no-scroll {
    overflow: hidden;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .kartracing-field-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .kartracing-panel {
        padding: 2em 1.25em;
    }

    .kartracing-tab {
        font-size: 0.82rem;
        padding:   8px 12px;
    }

    .kartracing-radio-group,
    .kartracing-checkbox-group {
        flex-direction: column;
        gap: 8px;
    }

    .kartracing-btn {
        width:   100%;
        padding: 14px 20px;
    }

    .kartracing-popup {
        padding: 20px;
    }

    .kartracing-popup__appstore {
        flex-direction: column;
        align-items: center;
    }

    .kartracing-cancel-actions {
        flex-direction: column;
    }

    .kartracing-cancel-actions .kartracing-btn {
        width: 100%;
    }
}