/**
 * Artromo Core – style strony z formularzem rezerwacji
 *
 * Enqueue'owane na: is_front_page() || is_product()
 *
 * Zawiera:
 * - Kontener .artromot-booking-box (ukrywanie elementów WooCommerce/produktu)
 * - Sekcja wyboru pakietu (.artromot-package-*)
 * - Pola dat (.artromot-pickup-*, .artromot-dropoff-*)
 * - Summary box (.artromot-summary-*)
 * - Przycisk "Rezerwuj"
 * - Ukrywanie pól ilości i cennika RnB
 * - Style komunikatów błędów WooCommerce / RnB
 * - Style komunikatów walidacji formularza
 * - Responsywność (max-width: 767px)
 */

/* ==========================================================================
   Kontener główny formularza rezerwacji
   ========================================================================== */

.artromot-booking-box {
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto;
    padding: 40px;
    background: #f7f7f8;
    border-radius: 36px;
    box-sizing: border-box;
}

/* Reset dla wewnętrznych elementów WooCommerce */
.artromot-booking-box .woocommerce,
.artromot-booking-box div.product,
.artromot-booking-box div.summary,
.artromot-booking-box .summary,
.artromot-booking-box .entry-summary,
.artromot-booking-box form.cart {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

.artromot-booking-box .product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Ukryj elementy strony produktu nieistotne w kontekście formularza */
.artromot-booking-box .product_title,
.artromot-booking-box .woocommerce-product-gallery,
.artromot-booking-box .woocommerce-tabs,
.artromot-booking-box .related,
.artromot-booking-box .upsells,
.artromot-booking-box .product_meta,
.artromot-booking-box .price,
.artromot-booking-box .woocommerce-breadcrumb,
.artromot-booking-box .woocommerce-product-details__short-description {
    display: none !important;
}

.single-product .summary .price,
.single-product .product_meta {
    display: none !important;
}

/* ==========================================================================
   Sekcja wyboru pakietu
   ========================================================================== */

.artromot-package-section,
.artromot-pickup-visible,
.artromot-dropoff-visible,
.artromot-summary-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    box-sizing: border-box !important;
}

.artromot-booking-box h5,
.artromot-booking-box label,
.artromot-pickup-label,
.artromot-package-label,
.artromot-dropoff-label {
    display: block;
    margin: 0 0 10px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: #414651 !important;
}

.artromot-package-buttons {
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    box-sizing: border-box !important;
}

.artromot-package-card {
    display: flex !important;
    padding: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #FFF !important;
    box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 2px 2px -1px rgba(10, 13, 18, 0.04) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: 0.2s ease !important;
    min-height: 118px !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.artromot-package-card:hover {
    transform: translateY(-2px);
    border-color: rgba(48, 94, 210, 0.22) !important;
}

.artromot-package-card.is-active {
    border-color: #305ED2 !important;
    background: #F5F7FF !important;
    box-shadow: 0 0 0 2px rgba(48, 94, 210, 0.12), 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 2px 2px -1px rgba(10, 13, 18, 0.04) !important;
}

.artromot-package-days {
    color: #103BB0;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 44px;
    letter-spacing: -0.72px;
    display: block;
}

.artromot-package-price {
    color: #181D27;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.32px;
    display: block;
}

/* Hidden input przechowujący wybrany pakiet */
#artromot_package {
    display: none !important;
}

/* ==========================================================================
   Pola daty
   ========================================================================== */

.artromot-booking-box input,
.artromot-booking-box select,
.artromot-pickup-display,
.artromot-dropoff-input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    border: 1px solid #D5D7DA !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #181D27 !important;
    outline: none !important;
    box-sizing: border-box !important;
    cursor: pointer;
}

/* Kontener pola daty — punkt odniesienia dla natywnej nakładki */
.artromot-pickup-field {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
}

/*
 * Natywny datepicker leży PRZEZROCZYSTĄ NAKŁADKĄ na całym polu.
 * Dzięki temu tapnięcie na mobile trafia wprost w input[type="date"]
 * i system otwiera swój picker bez udziału JS (showPicker() wywołany
 * z dotyku leci NotAllowedError — brak user activation).
 *
 * Selektor dwuklasowy, bo .artromot-booking-box input (0,1,1) przebijało
 * samo .artromot-pickup-input-native (0,1,0) mimo !important.
 */
.artromot-pickup-field .artromot-pickup-input-native {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 16px !important; /* iOS: poniżej 16px auto-zoomuje stronę */
    -webkit-appearance: none !important;
    appearance: none !important;
    z-index: 2 !important;
    cursor: pointer !important;
}

/* Focus ring rysujemy na warstwie prezentacyjnej */
.artromot-pickup-field:focus-within .artromot-pickup-display {
    border-color: #305ED2 !important;
    box-shadow: 0 0 0 4px rgba(48, 94, 210, 0.12), 0 1px 2px 0 rgba(10, 13, 18, 0.05) !important;
}

/*
 * Podpowiedź pod polem daty — domyślnie informuje o wymaganym wyprzedzeniu,
 * a po odrzuceniu daty spoza zakresu przechodzi w stan błędu.
 */
.artromot-pickup-visible .artromot-pickup-hint {
    display: block !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    color: #717680 !important;
}

.artromot-pickup-visible .artromot-pickup-hint:empty {
    display: none !important;
}

.artromot-pickup-visible .artromot-pickup-hint.is-error {
    color: #B42318 !important;
    font-weight: 500 !important;
}

/*
 * Pole w stanie błędu — czerwona ramka spójna z komunikatem.
 * Klasę na wrapperze ustawia JS zamiast :has(), bo :has() nie działa
 * w Safari iOS < 15.4, a to jest poprawka przede wszystkim pod mobile.
 */
.artromot-pickup-visible.has-error .artromot-pickup-field .artromot-pickup-display {
    border-color: #FDA29B !important;
}

.artromot-booking-box input::placeholder,
.artromot-dropoff-input::placeholder,
.artromot-pickup-display::placeholder {
    color: #717680 !important;
    opacity: 1 !important;
}

.artromot-booking-box input:focus,
.artromot-booking-box select:focus,
.artromot-pickup-display:focus {
    border-color: #305ED2 !important;
    box-shadow: 0 0 0 4px rgba(48, 94, 210, 0.12), 0 1px 2px 0 rgba(10, 13, 18, 0.05) !important;
}

/* Data zwrotu — tylko do odczytu */
.artromot-dropoff-input {
    background-color: #ffffff !important;
    color: #181D27 !important;
    cursor: not-allowed !important;
}

.artromot-dropoff-note {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #717680;
}

/* ==========================================================================
   Summary box
   ========================================================================== */

.artromot-summary-box {
    border-radius: 8px;
    border: 1px solid #D5D7DA;
    background: #F9FAFB;
    padding: 24px;
}

.artromot-summary-top {
    display: grid;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    box-sizing: border-box !important;
}

.artromot-summary-date-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 8px;
    border: 1px solid #D5D7DA;
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    padding: 20px 24px;
    box-sizing: border-box !important;
}

.artromot-summary-date-label {
    color: #414651;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 8px;
}

.artromot-summary-date-value {
    color: #303543;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.artromot-summary-arrow {
    font-size: 36px;
    line-height: 1;
    color: #181D27;
    padding: 0 6px;
}

.artromot-summary-period {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    border-radius: 8px;
    background: #305ED2;
    color: #FFF;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
    padding: 10px 14px;
    margin-bottom: 20px;
    box-sizing: border-box !important;
    box-shadow: 0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

.artromot-summary-status {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid #D5D7DA;
    background: #FFF;
    padding: 10px 14px;
    margin-bottom: 24px;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

.artromot-summary-status-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
}

.artromot-summary-status-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.artromot-summary-status-text {
    color: #414651;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.artromot-summary-status:not(.is-ready) .artromot-summary-status-icon {
    opacity: 0.35;
}

.artromot-summary-divider {
    width: 100% !important;
    height: 1px;
    background: #D5D7DA;
    margin-bottom: 24px;
}

.artromot-summary-price-row {
    display: grid;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    box-sizing: border-box !important;
}

.artromot-summary-price-label {
    color: #414651;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.artromot-summary-price-box {
    min-width: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    border-radius: 8px;
    background: #305ED2;
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    padding: 14px 24px;
    box-sizing: border-box !important;
    box-shadow: 0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

/* ==========================================================================
   Ukrycie elementów RnB / ilości
   ========================================================================== */

.rnb-pricing-summary,
.price-showing,
.booking-pricing-info,
.rnb-pricing-info,
.rnb-pricing-summary .duration-cost,
.booking-pricing-info .duration-cost,
.price-showing .duration-cost,
.artromot-booking-box .quantity,
.artromot-booking-box input.qty,
.artromot-booking-box .rnb-quantity,
.artromot-booking-box .quantity-wrapper,
.artromot-booking-box .inventory-qty-next,
.artromot-booking-box input.inventory-qty-next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Przycisk "Rezerwuj"
   ========================================================================== */

.artromot-booking-box .single_add_to_cart_button,
.artromot-booking-box button[type="submit"],
.artromot-booking-box .button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 28px 0 0 !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 2px solid rgba(255, 255, 255, 0.12) !important;
    background: #305ED2 !important;
    color: #ffffff !important;
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    box-shadow:
        0 0 0 1px rgba(10, 13, 18, 0.18) inset,
        0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
        0 1px 2px 0 rgba(10, 13, 18, 0.05) !important;
    transition: 0.2s ease-in-out !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.artromot-booking-box .single_add_to_cart_button:hover,
.artromot-booking-box button[type="submit"]:hover,
.artromot-booking-box .button:hover {
    background: #244DBA !important;
}

.artromot-booking-box .single_add_to_cart_button:disabled,
.artromot-booking-box button[type="submit"]:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow:
        0 0 0 1px rgba(10, 13, 18, 0.12) inset,
        0 1px 2px 0 rgba(10, 13, 18, 0.05) !important;
}

/* ==========================================================================
   Komunikaty WooCommerce / RnB (na stronie produktu)
   ========================================================================== */

.artromot-booking-box .woocommerce-notices-wrapper,
.woocommerce-notices-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
    box-sizing: border-box;
}

.artromot-booking-box .woocommerce-error,
.artromot-booking-box .woocommerce-info,
.artromot-booking-box .woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    position: relative;
    width: 100%;
    margin: 0 0 24px !important;
    padding: 16px 18px 16px 56px !important;
    border: 1px solid #FECDCA !important;
    border-top: 4px solid #B42318 !important;
    border-radius: 8px !important;
    background: #FFFBFA !important;
    color: #414651 !important;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

.artromot-booking-box .woocommerce-error::before,
.artromot-booking-box .woocommerce-info::before,
.artromot-booking-box .woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
    content: "!";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #B42318;
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    font-family: Arial, sans-serif;
}

.artromot-booking-box .woocommerce-error li,
.woocommerce-error li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Ukryj komunikat "dodano do koszyka" */
.artromot-booking-box .woocommerce-message,
.woocommerce-message {
    display: none !important;
}

/* ==========================================================================
   Komunikaty walidacji formularza
   ========================================================================== */

.artromot-validation-message {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 24px !important;
    padding: 14px 16px !important;
    border: 1px solid #FECDCA !important;
    border-radius: 8px !important;
    background: #FFFBFA !important;
    color: #414651 !important;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
}

.artromot-validation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #B42318;
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    font-family: Arial, sans-serif;
}

.artromot-validation-text {
    display: block;
    color: #414651;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

/* ==========================================================================
   Responsywność
   ========================================================================== */

@media (max-width: 767px) {
    .artromot-booking-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 18px;
        border-radius: 24px;
    }

    .artromot-package-section,
    .artromot-pickup-visible,
    .artromot-dropoff-visible,
    .artromot-summary-box {
        margin-bottom: 18px !important;
    }

    .artromot-package-buttons {
        flex-direction: column;
        max-width: 100% !important;
    }

    .artromot-package-card {
        width: 100%;
        min-height: auto !important;
    }

    .artromot-package-days {
        font-size: 28px;
        line-height: 34px;
    }

    .artromot-summary-box {
        padding: 18px;
        border-radius: 8px;
    }

    .artromot-summary-top {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .artromot-summary-arrow {
        text-align: center;
        transform: rotate(90deg);
        font-size: 28px;
    }

    .artromot-summary-price-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .artromot-summary-price-box {
        width: 100%;
        min-width: 0;
    }

    .artromot-pickup-visible {
        margin-bottom: 16px !important;
    }

    .artromot-pickup-display {
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        border-radius: 8px !important;
    }

    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-message {
        margin-bottom: 18px !important;
        padding: 14px 14px 14px 50px !important;
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .woocommerce-error::before,
    .woocommerce-info::before,
    .woocommerce-message::before {
        left: 16px;
        width: 22px;
        height: 22px;
        font-size: 14px;
    }

    .artromot-validation-message {
        margin-bottom: 18px !important;
        padding: 12px 14px !important;
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .artromot-validation-icon {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
        font-size: 14px;
    }

    .artromot-validation-text {
        font-size: 13px;
        line-height: 18px;
    }
}