/**
 * Tørring Camping – WC Product Add-ons styling
 * Moderne styling for afbestillings-tilkøb og andre add-ons.
 * Matcher torring-qty-field design.
 */

/* ===== WC Product Add-ons – Moderne styling ===== */

/* Container spacing */
.wc-pao-addons-container {
    margin-top: 40px;
}

/* Overskrifter: "Afbestilling", "Tilkøb" */
.wc-pao-addons-container .wc-pao-addon-heading {
    margin: -10px 10px 40px 0px !important;
    padding: 0 0 0 12px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--e-global-color-secondary, #1a1a1a);
    line-height: 1.4;
}

/* Fieldset-bokse og addon-containere (individuelle add-ons) */
.wc-pao-addons-container .wc-pao-fieldset, .wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) {
    margin: 0 0 20px 0;
    padding: 18px 22px 18px 22px;
    background: var(--e-global-color-f572244);
    border: 1px solid color-mix(in srgb, var(--e-global-color-f572244) 90%, var(--e-global-color-primary));

    border-radius: 8px;
}

/* Legend / addon-navn i fieldset */
.wc-pao-addons-container .wc-pao-legend,
.wc-pao-addons-container .wc-pao-addon-name {
    font-weight: 700;
    font-size: 1.2em;
    color: #1a1a1a;
    padding: 0;
    margin-bottom: 4px;
}

/* Neutraliser browser-default <legend>-positionering (sidder normalt oven på
   fieldset'ets top-border). Få legend til at opføre sig som et almindeligt
   block-element inde i fieldset'et, så "Afbestilling"-titlen sidder pænt
   under padding-toppen ligesom titlerne på "Hund" og "Viskestykke + karklud". */
.wc-pao-addons-container .wc-pao-fieldset > legend.wc-pao-legend {
    float: left;
    width: 100%;
    display: block;
}

/* Clear float så følgende indhold (beskrivelse + checkbox) ikke wrapper omkring */
.wc-pao-addons-container .wc-pao-fieldset > legend.wc-pao-legend + * {
    clear: both;
}

/* Beskrivelsestekst */
.wc-pao-addons-container .wc-pao-addon-description {
    margin: 0 0 14px 0;
    font-size: 0.85em;
    color: #666;
    line-height: 1.5;
}

.wc-pao-addons-container .wc-pao-addon-description p {
    margin: 0;
}

/* ===== Checkbox-fieldsets – horisontalt layout (beskrivelse venstre, checkbox højre) ===== */
.wc-pao-fieldset:has(.wc-pao-addon-checkbox) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/* Legend forbliver øverst i fuld bredde */
.wc-pao-fieldset:has(.wc-pao-addon-checkbox) > .wc-pao-legend {
    flex-basis: 100%;
}

/* Beskrivelse fylder venstre side */
.wc-pao-fieldset:has(.wc-pao-addon-checkbox) > .wc-pao-addon-description {
    flex: 1;
    min-width: 90px;
    margin-bottom: 0;
}

/* Checkbox-wrap skubbes til højre */
.wc-pao-fieldset:has(.wc-pao-addon-checkbox) > .wc-pao-addon-wrap {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

/* Kompakt checkbox-kontrol (ingen stor boks) */
.wc-pao-fieldset:has(.wc-pao-addon-checkbox) .wc-pao-addon-wrap > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    margin: 0;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
    min-width: 185px;
}

.wc-pao-fieldset:has(.wc-pao-addon-checkbox) .wc-pao-addon-wrap > div:hover {
    border-color: var(--e-global-color-primary);
    background: color-mix(in srgb, var(--e-global-color-f572244) 80%, var(--e-global-color-primary));
}

/* Fallback for andre checkbox-rækker (uden fieldset) */
.wc-pao-addons-container .wc-pao-addon-wrap {
    margin: 0;
    padding: 0;
}

.wc-pao-addons-container .wc-pao-addon-wrap > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 6px 0;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
}

.wc-pao-addons-container .wc-pao-addon-wrap > div:hover {
    border-color: var(--e-global-color-primary);
    background: color-mix(in srgb, var(--e-global-color-f572244) 80%, var(--e-global-color-primary));
}

/* Checkbox: Når checked → primary border */
.wc-pao-addons-container .wc-pao-addon-checkbox:checked + label {
    color: var(--e-global-color-primary);
    font-weight: 600;
}

/* Custom checkbox styling */
.wc-pao-addons-container .wc-pao-addon-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    accent-color: var(--e-global-color-primary);
    cursor: pointer;
    margin: 0;
}

.wc-pao-addons-container .wc-pao-addon-wrap label {
    font-size: 0.92em;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

/* Prisspans */
.wc-pao-addons-container .wc-pao-addon-price {
    color: #888;
    font-weight: 400;
    font-size: 0.9em;
}

/* ===== Prisopsummering (subtotal) ===== */
#product-addons-total {
    margin-top: 16px;
}

#product-addons-total .product-addon-totals {
    background: var(--e-global-color-f572244);
    border: 1px solid color-mix(in srgb, var(--e-global-color-f572244) 90%, var(--e-global-color-primary));
    border-radius: 8px;
    padding: 16px 20px;
}

#product-addons-total .product-addon-totals ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#product-addons-total .product-addon-totals li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.9em;
    color: #444;
    border-bottom: 0px solid #e8ede8;
}

#product-addons-total .product-addon-totals li:last-child {
    border-bottom: none;
}

#product-addons-total .product-addon-totals .wc-pao-col1 {
    flex: 1;
}

#product-addons-total .product-addon-totals .wc-pao-col2 {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

/* Subtotal-linje – fremhævet */
#product-addons-total .product-addon-totals .wc-pao-subtotal-line {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 2px solid color-mix(in srgb, var(--e-global-color-f572244) 30%, var(--e-global-color-primary));
    border-bottom: none;
}

#product-addons-total .product-addon-totals .wc-pao-subtotal-line .price {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--e-global-color-primary);
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
}

#product-addons-total .product-addon-totals .wc-pao-subtotal-line .amount {
    font-weight: 700;
}

/* Valideringsbesked */
#required_addons_validation_message {
    margin-top: 8px;
    border-radius: 6px;
}

/* ===== Quantity/Input-multiplier add-on felter (f.eks. Hund) ===== */

/* Layout: Addon-name øverst i fuld bredde, derunder beskrivelse venstre + qty højre */
.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

/* Addon-name (legend) – fuld bredde øverst */
.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) > .wc-pao-addon-name {
    flex-basis: 100%;
    margin-bottom: 0;
}

/* Beskrivelse – fylder venstre side */
.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) > .wc-pao-addon-description {
    flex: 1;
    min-width: 120px;
    margin-bottom: 0;
}

/* Quantity-wrap – skubbes til højre */
.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) > .wc-pao-addon-wrap {
    flex-shrink: 0;
}

/* Skjul standard number-input i quantity-addon felter (erstattes af +/- knapper via JS) */
.wc-pao-addon-wrap .wc-pao-addon-input-multiplier {
    display: none !important;
}

/* Plus/minus wrapper – matcher torring-person-input-wrap */
.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) .wc-pao-addon-qty-wrap {
    display: inline-flex;
    align-items: center;
    border: 2px solid color-mix(in srgb, var(--e-global-color-primary) 15%, transparent) !important;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    max-width: 200px;
    gap: 0px;
    padding:0px;
    margin-bottom: 0px;
}

/* Plus/minus knapper – matcher torring-person-btn */
.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) .wc-pao-addon-qty-wrap .wc-pao-addon-qty-btn {
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    background: color-mix(in srgb, var(--e-global-color-primary) 15%, transparent) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    -webkit-user-select: none;
    user-select: none;
    line-height: 1 !important;
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: auto !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) .wc-pao-addon-qty-wrap .wc-pao-addon-qty-btn:hover {
    background: var(--e-global-color-primary) !important;
    color: #fff !important;
}

.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) .wc-pao-addon-qty-wrap .wc-pao-addon-qty-btn:active {
    background: #ddd !important;
}

/* Synligt input – matcher torring-person-input */
.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) .wc-pao-addon-qty-wrap .wc-pao-addon-qty-input {
    width: 100% !important;
    height: 40px !important;
    border: none !important;
    border-left: 1px solid #eee !important;
    border-right: 1px solid #eee !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    -moz-appearance: textfield;
    outline: none !important;
    flex: 1;
    min-width: 75px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    min-height: auto !important;
    min-width: 100px;
}

.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) .wc-pao-addon-qty-wrap .wc-pao-addon-qty-input::-webkit-outer-spin-button,
.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) .wc-pao-addon-qty-wrap .wc-pao-addon-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) span.wc-pao-addon-price {
    display: none;
}

/* ===== Add-ons uden beskrivelse – checkbox/qty centreret ===== */
/* Når en add-on ikke har en beskrivelse, skubbes checkbox/qty ikke til højre.
   Disse regler sikrer at add-ons uden beskrivelse stadig ser pæne ud. */

/* Checkbox-addon uden beskrivelse */
.wc-pao-fieldset:has(.wc-pao-addon-checkbox):not(:has(.wc-pao-addon-description)) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.wc-pao-fieldset:has(.wc-pao-addon-checkbox):not(:has(.wc-pao-addon-description)) > .wc-pao-addon-wrap {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

/* Quantity-addon uden beskrivelse */
.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier):not(:has(.wc-pao-addon-description)) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier):not(:has(.wc-pao-addon-description)) > .wc-pao-addon-wrap {
    flex-shrink: 0;
    margin-left: auto;
}

/* ===== Responsivt ===== */
@media (max-width: 580px) {
    .wc-pao-addons-container .wc-pao-fieldset {
        padding: 14px 16px;
    }
.wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) .wc-pao-addon-description {
    margin-top: 0px !important;
}
    #product-addons-total .product-addon-totals {
        padding: 12px 14px;
    }

    /* Checkbox-addons: wrap under hinanden */
    .wc-pao-fieldset:has(.wc-pao-addon-checkbox) > .wc-pao-addon-description,
    .wc-pao-fieldset:has(.wc-pao-addon-checkbox) > .wc-pao-addon-wrap {
        flex-basis: 100%;
    }

    /* Quantity-addons: wrap under hinanden */
    .wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) > .wc-pao-addon-description,
    .wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) > .wc-pao-addon-wrap {
        flex-basis: 100%;
    }

    .wc-pao-addon-container:has(.wc-pao-addon-input-multiplier) .wc-pao-addon-qty-wrap {
        max-width: 100%;
        width: 100%;
    }
}