/**
 * Quform Custom Styling FINAL - PROSIMO PROBEFAHRT
 * ================================================
 * Komplette Übersteuerung aller Styles mit !important
 * Dunkles Glasmorphismus-Design
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORM & CONTAINER - ALLE PARENT ELEMENTE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform,
.quform-5,
#quform-368a1a,
.quform-wrapper,
.quform-container,
.quform-form,
.elementor-shortcode {
    background: linear-gradient(135deg, #17172a 0%, #1a1a2e 50%, #17172a 100%) !important;
    color: #e8e8e8 !important;
}

.quform,
.quform-5 {
    padding: 48px 32px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    background: linear-gradient(135deg, #17172a 0%, #1a1a2e 50%, #17172a 100%) !important;
    margin: 0 !important;
}

.quform-form-inner,
.quform-form-inner-5,
.quform-inner,
.quform-inner-radio,
.quform-inner-checkbox,
.quform-inner-select,
.quform-inner-text,
.quform-inner-email,
.quform-inner-tel,
.quform-inner-date,
.quform-inner-time,
.quform-inner-textarea,
.quform-inner-name,
.quform-input,
.quform-input-radio,
.quform-input-checkbox {
    background: transparent !important;
    border: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORM TITLE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-form-title,
.quform-form-title-description h2 {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-bottom: 32px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORM ELEMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-element {
    margin-bottom: 24px !important;
}

.quform-spacer {
    margin-bottom: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LABELS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-label,
.quform-label-text {
    color: #e8e8e8 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    display: block !important;
    transition: color 0.3s ease !important;
}

.quform-label:hover,
.quform-label-text:hover {
    color: #EEE820 !important;
}

.quform-required,
.quform-required::after {
    color: #EEE820 !important;
    font-weight: bold !important;
}

.quform-sub-label {
    color: rgba(232, 232, 232, 0.7) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INPUT FIELDS - ALLE TYPEN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-input,
.quform-field,
.quform-field-text,
.quform-field-email,
.quform-field-tel,
.quform-field-number,
.quform-field-date,
.quform-field-time,
.quform-field-textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
textarea,
select {
    width: 100% !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(238, 232, 32, 0.25) !important;
    border-radius: 10px !important;
    color: #e8e8e8 !important;
    font-size: 15px !important;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(232, 232, 232, 0.5) !important;
}

/* HOVER */
.quform-field:hover,
.quform-input:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(238, 232, 32, 0.5) !important;
    box-shadow: 0 4px 15px rgba(238, 232, 32, 0.12) !important;
}

/* FOCUS */
.quform-field:focus,
.quform-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #EEE820 !important;
    box-shadow: 0 0 20px rgba(238, 232, 32, 0.35),
                inset 0 0 20px rgba(238, 232, 32, 0.05) !important;
    transform: translateY(-2px) !important;
}

/* Kendo DatePicker / TimePicker Inputs */
.k-input,
.k-picker-wrap input {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(238, 232, 32, 0.25) !important;
    color: #e8e8e8 !important;
}

.k-input:hover,
.k-picker-wrap input:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(238, 232, 32, 0.5) !important;
}

.k-input:focus,
.k-picker-wrap input:focus {
    border-color: #EEE820 !important;
    box-shadow: 0 0 20px rgba(238, 232, 32, 0.35) !important;
}

/* Select Dropdown Arrow */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEE820' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 20px !important;
    padding-right: 40px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RADIO BUTTONS (FAHRZEUG-AUSWAHL)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-options,
.quform-input-radio,
.quform-inner-radio {
    background: transparent !important;
    padding: 0 !important;
}

.quform-input-radio .quform-options {
    background: transparent !important;
}

.quform-option,
.quform-option-label,
.quform-option-label-5_6_1,
.quform-option-label-5_6_2,
.quform-option-label-5_6_3,
.quform-option-label-5_6_4 {
    display: block !important;
}

.quform-option-label {
    padding: 12px 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.quform-option-text {
    color: #e8e8e8 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.quform-option input[type="radio"],
input[type="radio"].quform-field {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
    accent-color: #EEE820 !important;
    border: 2px solid rgba(238, 232, 32, 0.4) !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
}

.quform-option input[type="radio"]:hover {
    border-color: #EEE820 !important;
    box-shadow: 0 0 10px rgba(238, 232, 32, 0.3) !important;
}

.quform-option input[type="radio"]:checked {
    background-color: #EEE820 !important;
    border-color: #EEE820 !important;
}

.quform-option input[type="radio"]:checked ~ label .quform-option-text {
    color: #EEE820 !important;
    font-weight: 600 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CHECKBOXES (FÜHRERSCHEINKLASSEN)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-input-checkbox,
.quform-element-checkbox {
    background: transparent !important;
}

.quform-option input[type="checkbox"],
input[type="checkbox"].quform-field {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
    accent-color: #EEE820 !important;
    border: 2px solid rgba(238, 232, 32, 0.4) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
}

.quform-option input[type="checkbox"]:hover {
    border-color: #EEE820 !important;
    box-shadow: 0 0 10px rgba(238, 232, 32, 0.3) !important;
}

.quform-option input[type="checkbox"]:checked {
    background-color: #EEE820 !important;
    border-color: #EEE820 !important;
}

.quform-option input[type="checkbox"]:checked ~ label .quform-option-text {
    color: #EEE820 !important;
    font-weight: 600 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIGNATURE PAD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.signature-pad,
canvas.signature-pad {
    border: 2px solid rgba(238, 232, 32, 0.3) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    cursor: crosshair !important;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4) !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    transition: all 0.3s ease !important;
    margin-bottom: 12px !important;
}

.signature-pad:hover,
canvas.signature-pad:hover {
    border-color: #EEE820 !important;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(238, 232, 32, 0.25) !important;
}

.signature-clear {
    display: inline-block !important;
    padding: 8px 16px !important;
    background: rgba(238, 232, 32, 0.15) !important;
    border: 1px solid rgba(238, 232, 32, 0.4) !important;
    border-radius: 6px !important;
    color: #e8e8e8 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    margin-top: 10px !important;
}

.signature-clear:hover {
    background: rgba(238, 232, 32, 0.25) !important;
    border-color: #EEE820 !important;
    color: #EEE820 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FILE UPLOAD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-upload-button,
.quform-button-style-theme .quform-input-file {
    padding: 16px 20px !important;
    background: rgba(238, 232, 32, 0.12) !important;
    border: 2px dashed rgba(238, 232, 32, 0.4) !important;
    color: #e8e8e8 !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.quform-upload-button:hover {
    background: rgba(238, 232, 32, 0.18) !important;
    border-color: #EEE820 !important;
    color: #EEE820 !important;
}

.quform-upload-button-text {
    color: inherit !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-submit,
.quform-button,
button.quform-button,
input[type="submit"] {
    padding: 15px 40px !important;
    background: linear-gradient(135deg, #EEE820 0%, #FFD700 100%) !important;
    color: #17172a !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 10px 30px rgba(238, 232, 32, 0.35) !important;
    text-transform: uppercase !important;
    min-width: 200px !important;
    outline: none !important;
}

.quform-submit:hover,
.quform-button:hover,
button.quform-button:hover,
input[type="submit"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(238, 232, 32, 0.45) !important;
    letter-spacing: 1px !important;
}

.quform-submit:active,
.quform-button:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(238, 232, 32, 0.3) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MESSAGES - ERROR, SUCCESS, ALERT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-error,
.quform-error-message,
.quform-error-box {
    background: rgba(255, 66, 66, 0.12) !important;
    border: 2px solid rgba(255, 66, 66, 0.5) !important;
    color: #FF8888 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.quform-success,
.quform-success-message {
    background: rgba(76, 175, 80, 0.12) !important;
    border: 2px solid rgba(76, 175, 80, 0.5) !important;
    color: #66BB6A !important;
    padding: 16px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.quform-alert {
    background: rgba(238, 232, 32, 0.12) !important;
    border: 2px solid rgba(238, 232, 32, 0.4) !important;
    color: #EEE820 !important;
    padding: 14px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   KENDO DATEPICKER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.k-popup,
.k-datepicker,
.k-timepicker {
    background: #1a1a2e !important;
    border: 2px solid rgba(238, 232, 32, 0.3) !important;
    border-radius: 8px !important;
    color: #e8e8e8 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.k-header {
    background: linear-gradient(135deg, #17172a, #1a1a2e) !important;
    border-bottom: 1px solid rgba(238, 232, 32, 0.2) !important;
    color: #EEE820 !important;
    font-weight: 600 !important;
}

.k-state-default,
.k-link {
    background: transparent !important;
    color: #e8e8e8 !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.k-state-hover,
.k-state-focused {
    background: rgba(238, 232, 32, 0.2) !important;
    color: #EEE820 !important;
    font-weight: 600 !important;
}

.k-state-selected,
.k-state-active {
    background: #EEE820 !important;
    color: #17172a !important;
    font-weight: 700 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ROWS & COLUMNS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-element-row {
    background: transparent !important;
}

.quform-element-column {
    background: transparent !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GROUP STYLES - BORDERED CONTAINERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-group-style-bordered > .quform-child-elements,
.quform-group-style-bordered > .quform-spacer > .quform-child-elements {
    border: 1px solid rgba(238, 232, 32, 0.25) !important;
    background-color: transparent !important;
    padding: 20px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HTML ELEMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-element-html {
    color: #e8e8e8 !important;
}

.quform-element-html h2,
.quform-element-html h3,
.quform-element-html h4 {
    color: #EEE820 !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
}

.quform-element-html strong {
    color: #e8e8e8 !important;
    font-weight: 600 !important;
}

.quform-element-html em {
    color: rgba(232, 232, 232, 0.8) !important;
    font-style: italic !important;
}

.quform-element-html ol,
.quform-element-html ul {
    color: #e8e8e8 !important;
    line-height: 1.6 !important;
}

.quform-element-html ol li,
.quform-element-html ul li {
    margin-bottom: 8px !important;
}

.quform-element-html a {
    color: #EEE820 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.quform-element-html a:hover {
    color: #FFD700 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
    .quform,
    .quform-5 {
        padding: 32px 20px !important;
        border-radius: 12px !important;
    }

    .quform-field,
    .quform-input,
    input,
    textarea,
    select {
        font-size: 14px !important;
        padding: 12px 14px !important;
    }

    .quform-submit {
        width: 100% !important;
        min-width: unset !important;
    }
}

@media (max-width: 480px) {
    .quform,
    .quform-5 {
        padding: 24px 16px !important;
    }

    .quform-field,
    .quform-input,
    input,
    textarea {
        font-size: 13px !important;
        padding: 11px 12px !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCESSIBILITY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quform-field:focus-visible,
.quform-input:focus-visible,
.quform-submit:focus-visible,
input:focus-visible {
    outline: 2px solid #EEE820 !important;
    outline-offset: 2px !important;
}