/* =========================================================
   ALPINOR – BOOKING PACKAGE
   FINALER BEREINIGTER STIL
   ========================================================= */


/* =========================================================
   GRUNDDESIGN FORMULARFELDER
   ========================================================= */

#booking-package input:not([type="checkbox"]):not([type="radio"]),
#booking-package select,
#booking-package textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #D8D8D8;
    border-radius: 8px;
    background: #FFFFFF;
    color: #2C2C2C;
    font-size: 15px;
    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

#booking-package input:not([type="checkbox"]):not([type="radio"]):focus,
#booking-package select:focus,
#booking-package textarea:focus {
    outline: none;
    border-color: #C9A227;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.10);
}


/* =========================================================
   CHECKBOX
   ========================================================= */

#booking-package input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;

    padding: 0 !important;
    margin: 2px 8px 0 0 !important;

    vertical-align: top;
    cursor: pointer;

    accent-color: #2C2C2C;
}


/* =========================================================
   FORMULARZEILEN
   KEINE TRENNLINIEN
   ========================================================= */

#booking-package .row,
#booking-package .form-row {
    border: none !important;
    border-bottom: none !important;

    padding: 9px 0;
    box-sizing: border-box;
}


/* =========================================================
   BUCHUNGSDATUM / EVENT
   ========================================================= */

#booking-package .row:has(.bookingDate),
#booking-package .row:has(.booking_date) {
    padding-top: 18px !important;
    padding-bottom: 22px !important;
}

#booking-package .bookingDate,
#booking-package .booking_date {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #2C2C2C !important;
}

#booking-package .bookingDate + div,
#booking-package .booking_date + div {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    color: #2C2C2C !important;
}


/* =========================================================
   GESAMTANZAHL + SERVICE
   50 / 50
   ========================================================= */

/* Erste Zeile nach Teilnehmerauswahl =
   Gesamtanzahl Teilnehmer */
#booking-package .row:has(select) + .row {
    width: calc(50% - 8px) !important;

    float: left !important;
    clear: both !important;

    margin-right: 16px !important;

    box-sizing: border-box;
}


/* Zweite Zeile danach =
   Service */
#booking-package .row:has(select) + .row + .row {
    width: calc(50% - 8px) !important;

    float: left !important;
    clear: none !important;

    margin-right: 0 !important;

    box-sizing: border-box;
}


/* =========================================================
   KUNDENINFORMATIONEN
   ========================================================= */

#booking-package .row:has(#booking_package_input_first_name),
#booking-package .row:has(#booking_package_input_last_name) {
    margin-top: 62px !important;
}


/* Überschrift nur über Vorname erzeugen */
#booking-package .row:has(#booking_package_input_first_name) {
    position: relative !important;
}

#booking-package .row:has(#booking_package_input_first_name)::before {
    content: "Kundeninformationen";

    position: absolute;
    top: -50px;
    left: 0;

    width: calc(200% + 16px);

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;

    color: #2C2C2C;

    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
}


/* =========================================================
   VORNAME + NACHNAME
   50 / 50
   ========================================================= */

#booking-package .row:has(#booking_package_input_first_name) {
    width: calc(50% - 8px) !important;

    float: left !important;
    clear: both !important;

    margin-right: 16px !important;

    box-sizing: border-box;
}

#booking-package .row:has(#booking_package_input_last_name) {
    width: calc(50% - 8px) !important;

    float: left !important;
    clear: none !important;

    box-sizing: border-box;
}


/* =========================================================
   E-MAIL + TELEFON
   50 / 50
   ========================================================= */

#booking-package .row:has(#booking_package_input_email) {
    width: calc(50% - 8px) !important;

    float: left !important;
    clear: both !important;

    margin-right: 16px !important;

    box-sizing: border-box;
}

#booking-package .row:has(#booking_package_input_phone) {
    width: calc(50% - 8px) !important;

    float: left !important;
    clear: none !important;

    box-sizing: border-box;
}


/* =========================================================
   ADRESSE
   Straße 50 % | PLZ 18 % | Ort 32 %
   ========================================================= */

#booking-package .row:has(#booking_package_input_address) {
    width: calc(50% - 10px) !important;

    float: left !important;
    clear: both !important;

    margin-right: 10px !important;

    box-sizing: border-box;
}

#booking-package .row:has(#booking_package_input_zip) {
    width: calc(18% - 10px) !important;

    float: left !important;
    clear: none !important;

    margin-right: 10px !important;

    box-sizing: border-box;
}

#booking-package .row:has(#booking_package_input_location) {
    width: 32% !important;

    float: left !important;
    clear: none !important;

    box-sizing: border-box;
}


/* =========================================================
   BESCHREIBUNG
   ========================================================= */

#booking-package .row:has(#booking_package_input_description) {
    width: 100% !important;

    float: none !important;
    clear: both !important;
}


/* =========================================================
   DATENSCHUTZ
   ========================================================= */

#booking-package .row:has(#booking_package_input_terms) {
    width: 100% !important;

    float: none !important;
    clear: both !important;

    padding-top: 14px !important;
}


/* =========================================================
   SERVICE-KARTEN
   ========================================================= */

#booking-package .servicePanel,
#booking-package .service-panel,
#booking-package .service {
    background: #FFFFFF;

    border: 1px solid #E3E3E3;
    border-radius: 10px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);

    padding: 16px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

#booking-package .servicePanel:hover,
#booking-package .service-panel:hover,
#booking-package .service:hover {
    border-color: #C9A227;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);

    transform: translateY(-1px);
}


/* =========================================================
   BUTTONS
   ========================================================= */

#booking-package .bookingButton,
#booking-package .return_button {
    display: inline-block !important;

    width: auto !important;
    min-width: 130px;

    margin: 14px 10px 0 0 !important;
    padding: 11px 20px !important;

    background: #FFFFFF !important;
    color: #2C2C2C !important;

    border: 1px solid #D8D8D8 !important;
    border-radius: 6px !important;

    box-sizing: border-box;
    vertical-align: middle;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

#booking-package .bookingButton:hover,
#booking-package .return_button:hover {
    background: #2C2C2C !important;
    color: #C9A227 !important;

    border-color: #2C2C2C !important;
}


/* =========================================================
   KALENDER – MODERNER, OHNE INHALTE ZU VERÄNDERN
   ========================================================= */

/* Tagesfelder */
#booking-package_calendarPage .dateField {
    color: #2C2C2C;

    border-color: #E5E5E5;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


/* Kalenderzellen etwas großzügiger */
#booking-package_calendarPage .day_slot {
    min-height: 72px;

    box-sizing: border-box;
}


/* Monats-/Kalenderkopf */
#booking-package_calendarPage th {
    color: #2C2C2C;

    font-size: 14px;
    font-weight: 500;

    background: #FFFFFF;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* Gesamtanzahl + Service */
    #booking-package .row:has(select) + .row,
    #booking-package .row:has(select) + .row + .row,

    /* Persönliche Daten */
    #booking-package .row:has(#booking_package_input_first_name),
    #booking-package .row:has(#booking_package_input_last_name),
    #booking-package .row:has(#booking_package_input_email),
    #booking-package .row:has(#booking_package_input_phone),

    /* Adresse */
    #booking-package .row:has(#booking_package_input_address),
    #booking-package .row:has(#booking_package_input_zip),
    #booking-package .row:has(#booking_package_input_location) {

        width: 100% !important;

        float: none !important;
        clear: both !important;

        margin-right: 0 !important;
    }


    /* Kundeninformationen-Abstand korrigieren */
    #booking-package .row:has(#booking_package_input_first_name),
    #booking-package .row:has(#booking_package_input_last_name) {
        margin-top: 0 !important;
    }

    #booking-package .row:has(#booking_package_input_first_name) {
        margin-top: 58px !important;
    }

    #booking-package .row:has(#booking_package_input_first_name)::before {
        width: 100% !important;

        top: -46px;

        font-size: 20px;
    }


    /* Buttons */
    #booking-package .bookingButton,
    #booking-package .return_button {
        min-width: 0;
    }
}