/**
 * Kvali Produkt Beregner - frontend CSS (gulv + banevare, produktside)
 * Udtrukket og dedupliker fra inline <style>-blokke i kvali-gulv-m2-pricing.php.
 * Enqueues kun på produktsider hvor _kvali_is_product = 'yes'.
 */

/* ============================================================
   Fælles
   ============================================================ */
@keyframes spin{to{transform:rotate(360deg)}}

/* Skjul originale WooCommerce knapper når Kvali beregner er aktiv */
.single-product form.cart > .single_add_to_cart_button:not([style*="margin-top:1.5rem"]) {
    display: none !important;
}
/* Vores knap inde i beregner skal vises */
.kvali-m2-calculator .single_add_to_cart_button,
.kvali-bane-calculator .single_add_to_cart_button {
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin-top: 1.5rem;
}

/* Tilbehør (fælles for gulv, bane simple og bane variabel) */
.kvali-accessory-item{transition:all 0.2s}
.kvali-accessory-item:hover{border-color:#0ea5e9!important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(14,165,233,0.15)!important}
.kvali-accessory-item .woocommerce-Price-amount{font-size:inherit!important;color:inherit!important;font-weight:inherit!important}
.kvali-accessory-item .woocommerce-Price-currencySymbol{font-size:inherit!important}
.kvali-qty-plus:hover{background:#dcfce7!important;border-color:#16a34a!important}
.kvali-qty-plus:active{background:#bbf7d0!important}
.kvali-qty-minus:hover{background:#fee2e2!important;border-color:#dc2626!important}
.kvali-qty-minus:active{background:#fecaca!important}
.kvali-accessory-quantity::-webkit-outer-spin-button,.kvali-accessory-quantity::-webkit-inner-spin-button,
.kvali-bane-var-accessory-quantity::-webkit-outer-spin-button,.kvali-bane-var-accessory-quantity::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kvali-accessory-quantity:focus,
.kvali-bane-var-accessory-quantity:focus{outline:none;border-color:#0ea5e9}
.kvali-accessory-info-btn:hover{color:#0284c7!important;transform:scale(1.15)}
#kvali_close_accessory_modal:hover{background:rgba(202,7,7,0.2)!important;color:#a80505!important}
#kvali_accessory_modal_title:hover{color:#a80505!important;text-decoration:underline!important}

/* "Efterlad uden kvittering" placeholder */
#kvali_no_signature_location::placeholder,
#kvali_bane_no_signature_location::placeholder,
#kvali_bane_var_no_signature_location::placeholder{color:#b0b7c3!important;font-weight:400!important}

/* ============================================================
   GULV-beregner
   ============================================================ */
a.kvali-showroom-link-floor:hover{color:#ca0707!important}
#kvali_calculate_btn:hover{background:linear-gradient(135deg,#a80505 0%,#8a0404 100%)!important;transform:translateY(-1px)}
#kvali_sample_btn:hover{background:#ca0707!important;color:#fff!important;transform:translateY(-1px)}
#kvali_close_waste_modal:hover,#kvali_close_showroom_modal:hover,#kvali_close_how_to_modal:hover{background:rgba(255,255,255,0.3)}
.kvali-radio-option:hover{border-color:#22c55e!important;background:#fafafa!important}

/* ============================================================
   BANEVARE - simple
   ============================================================ */

/* Skjul originale WooCommerce knapper når beregner er aktiv */
.product-type-simple form.cart > .single_add_to_cart_button:not(#kvali_bane_simple_add_to_cart) {
    display: none !important;
}

/* Skjul WooCommerce quantity selector visuelt (men behold i DOM) */
.product-type-simple .kvali-bane-calculator ~ .quantity {
    display: none !important;
}

#kvali_bane_calculate_btn:hover { background: linear-gradient(135deg, #a80505 0%, #8a0404 100%) !important; transform: translateY(-1px); }
.kvali_sample_btn_simple:hover { background: #ca0707 !important; color: #fff !important; transform: translateY(-1px); }
.kvali_close_bane_showroom_modal:hover { background: rgba(255,255,255,0.3); }

.kvali-bane-accessory-checkbox:checked~*,.kvali-bane-accessory-checkbox:checked+*+*{background:#f0fdf4!important}
.kvali-accessory-item:has(.kvali-bane-accessory-checkbox:checked){background:#f0fdf4!important;border-color:#22c55e!important}

/* ============================================================
   BANEVARE - variabel
   ============================================================ */
.kvali-variant-section {
    background: #fafafa;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    margin-bottom: 1.25rem;
}
.kvali-variant-group {
    margin-bottom: 1rem;
}
.kvali-variant-group:last-child {
    margin-bottom: 0;
}
.kvali-variant-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.65rem;
    font-size: 0.95rem;
}
.kvali-variant-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.kvali-variant-btn {
    padding: 0.65rem 1.25rem;
    border: 2px solid #d1d5db;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    color: #1a1a1a;
    transition: all 0.2s;
    font-size: 0.9rem;
    position: relative;
}
.kvali-variant-btn:hover {
    border-color: #ca0707;
    background: #fff5f5;
    transform: translateY(-1px);
}
.kvali-variant-btn.selected {
    border-color: #ca0707;
    background: #ca0707;
    color: white;
    box-shadow: 0 2px 8px rgba(202, 7, 7, 0.3);
}
.kvali-variant-btn.disabled {
    opacity: 1;
    cursor: not-allowed;
    background: #f5f5f5;
    color: #9ca3af;
}
.kvali-variant-btn.disabled:hover {
    border-color: #d1d5db;
    background: #f5f5f5;
    transform: none;
}
.kvali-variant-btn.disabled::before {
    content: 'Udsolgt';
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    z-index: 10;
}
@media (max-width: 640px) {
    .kvali-variant-btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }
}

/* Skjul originale WooCommerce variant swatches/selectors */
.product-type-variable form.variations_form > .variations {
    display: none !important;
}
.product-type-variable .woocommerce-variation-description,
.product-type-variable .woocommerce-variation-price,
.product-type-variable .woocommerce-variation-availability {
    display: none !important;
}

/* Skjul originale WooCommerce knapper når beregner er aktiv */
.product-type-variable form.variations_form .single_add_to_cart_button:not(#kvali_bane_add_to_cart) {
    display: none !important;
}
.product-type-variable .woocommerce-variation-add-to-cart .single_add_to_cart_button:not(#kvali_bane_add_to_cart) {
    display: none !important;
}

#kvali_bane_calc:hover{background:linear-gradient(135deg,#a80505 0%,#8a0404 100%)!important;transform:translateY(-1px)}
#kvali_bane_sample_btn:hover{background:#ca0707!important;color:#fff!important;transform:translateY(-1px)}
#kvali_bane_close_modal:hover{background:rgba(255,255,255,0.3)}
#kvali_bane_close_showroom_modal:hover{background:rgba(255,255,255,0.3)}

.kvali-bane-var-accessory-checkbox:checked~*,.kvali-bane-var-accessory-checkbox:checked+*+*{background:#f0fdf4!important}
.kvali-accessory-item:has(.kvali-bane-var-accessory-checkbox:checked){background:#f0fdf4!important;border-color:#22c55e!important}

a.kvali-showroom-bane-link,
a.kvali-showroom-bane-link:link,
a.kvali-showroom-bane-link:visited{
    color:#4a5568 !important;
    text-decoration:none !important;
    background:transparent !important;
    outline:none !important;
}
a.kvali-showroom-bane-link:hover{
    color:#ca0707 !important;
    text-decoration:none !important;
    background:transparent !important;
}
.kvali-showroom-bane-link:hover { color: #ca0707 !important; }
a.kvali-showroom-bane-link:active,
a.kvali-showroom-bane-link:focus{
    color:#4a5568 !important;
    outline:none !important;
    background:transparent !important;
}

/* ============================================================
   Kvali Mobile Optimering (global, fra wp_head)
   ============================================================ */
@media (max-width: 768px) {
    /* Gulvprodukt og banevare calculator */
    .kvali-m2-calculator,
    .kvali-bane-calculator {
        padding: 1.25rem !important;
        margin: 1.5rem 0 !important;
    }

    /* Showroom info box - tilføj top padding */
    .kvali-m2-calculator > div[style*="border-bottom"],
    .kvali-bane-calculator > div[style*="border-bottom"] {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Header row med icon og knap */
    .kvali-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .kvali-header-row > div {
        width: 100%;
    }

    /* Vareprøve knap */
    #kvali_sample_btn,
    .kvali_sample_btn_simple,
    .kvali-sample-btn {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 0 !important;
        padding: 0.75rem 1rem !important;
    }

    /* Input row med beregn knap */
    .kvali-input-row {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .kvali-input-row input {
        font-size: 1em !important;
    }

    .kvali-input-row button {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 0.95em !important;
    }

    /* Skærespild radio options */
    .kvali-radio-option {
        flex: 1 1 calc(50% - 0.25rem) !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 0.65rem 0.75rem !important;
    }

    /* Total pris */
    #kvali_total_price,
    #kvali_bane_total_price {
        font-size: 1.5em !important;
    }

    /* Modals */
    .kvali_how_to_modal,
    .kvali_waste_info_modal,
    .kvali_showroom_modal,
    .kvali_bane_showroom_modal {
        padding: 0.75rem !important;
    }

    .kvali_how_to_modal > div,
    .kvali_waste_info_modal > div,
    .kvali_showroom_modal > div,
    .kvali_bane_showroom_modal > div {
        max-width: 100% !important;
        max-height: 95vh !important;
    }

    .kvali_how_to_modal img,
    .kvali_waste_info_modal img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Variabel banevare - vareprøve-knap (overrider margin-top:0 ovenfor,
       kun på variable produkter, som i den oprindelige inline-rækkefølge) */
    .product-type-variable .kvali-sample-btn {
        margin-top: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    /* Ekstra små skærme */
    .kvali-m2-calculator,
    .kvali-bane-calculator {
        padding: 1rem !important;
        margin: 1rem -0.75rem !important;
        border-radius: 8px !important;
    }

    /* Showroom info box - sørg for padding også på små skærme */
    .kvali-m2-calculator > div[style*="margin:-2rem"],
    .kvali-bane-calculator > div[style*="margin:-2rem"] {
        margin: -1rem -1rem 1.25rem -1rem !important;
        padding: 0.75rem 1rem !important;
    }

    .kvali-m2-calculator h4,
    .kvali-bane-calculator h4 {
        font-size: 1.1em !important;
    }

    .kvali-m2-calculator p,
    .kvali-bane-calculator p {
        font-size: 0.85em !important;
    }

    /* Reducer padding på indre bokse */
    .kvali-m2-calculator > div > div[style*="padding:1.5rem"],
    .kvali-bane-calculator > div > div[style*="padding:1.5rem"] {
        padding: 1rem !important;
    }

    /* Icon størrelse */
    .kvali-header-row > div > div[style*="width:48px"] {
        width: 40px !important;
        height: 40px !important;
    }

    .kvali-header-row > div > div[style*="width:48px"] svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Radio options fuld bredde på små skærme */
    .kvali-radio-option {
        flex: 1 1 100% !important;
    }

    /* Modal header */
    .kvali_how_to_modal > div > div:first-child,
    .kvali_waste_info_modal > div > div:first-child,
    .kvali_showroom_modal > div > div:first-child,
    .kvali_bane_showroom_modal > div > div:first-child {
        padding: 1rem !important;
    }

    .kvali_how_to_modal h3,
    .kvali_waste_info_modal h3,
    .kvali_showroom_modal h3,
    .kvali_bane_showroom_modal h3 {
        font-size: 1.1em !important;
    }

    /* Variabel banevare - overrides der oprindeligt lå i inline-blokken
       på variable produkter (efter wp_head-CSS'en i cascaden) */
    .product-type-variable .kvali-bane-calculator {
        padding: 1rem !important;
        margin: 1rem -1rem !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    .product-type-variable .kvali-bane-calculator > div[style*="padding:1.5rem"] {
        padding: 1rem !important;
    }
}

/* Tablet landscape optimering */
@media (min-width: 481px) and (max-width: 768px) {
    .kvali-radio-option {
        flex: 1 1 calc(33.333% - 0.35rem) !important;
    }
}

/* Touch forbedringer for alle mobile enheder */
@media (hover: none) and (pointer: coarse) {
    .kvali-input-row button,
    #kvali_sample_btn,
    .kvali_sample_btn_simple,
    .kvali-radio-option,
    .kvali-variant-btn {
        min-height: 44px !important;
    }

    input[type="number"],
    input[type="text"],
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px !important;
    }
}