/* Frontend CSS for WooCommerce Dynamic Pricing */

/* Note: Disse stilene kan skjules via plugin-innstillinger 
   for å kun bruke temaets standard "Salg" badges */

/* Rabattinformasjon på produktsiden */
.wc-dynamic-pricing-info {
    margin: 15px 0 20px 0;
    padding: 8px 12px;
    background: #f0f8f0;
    border: 1px solid #4caf50;
    border-radius: 4px;
    display: block;
    clear: both;
    width: fit-content;
}

.wc-dynamic-pricing-info .discount-badge {
    color: #2e7d32;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
}

/* Rabattmerke i produktoversikten */
.wc-dynamic-pricing-badge {
    position: absolute;
    top: 10px;
    z-index: 10;
}

/* Standard posisjon: høyre */
.wc-dynamic-pricing-badge.position-right {
    right: 10px;
}

/* Ny posisjon: venstre */
.wc-dynamic-pricing-badge.position-left {
    left: 10px;
}

/* Fallback for badges uten posisjon (backward compatibility) */
.wc-dynamic-pricing-badge:not(.position-left):not(.position-right) {
    right: 10px;
}

.wc-dynamic-pricing-badge .discount-percentage {
    background: #e53e3e;
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Prisvisning med gjennomstreking */
.price del {
    opacity: 0.7;
    margin-right: 5px;
}

.price ins {
    color: #e53e3e;
    font-weight: 700;
    text-decoration: none;
}

/* Responsiv design */
@media screen and (max-width: 768px) {
    .wc-dynamic-pricing-info {
        font-size: 13px;
        padding: 6px 10px;
    }
    
    .wc-dynamic-pricing-badge.position-right,
    .wc-dynamic-pricing-badge:not(.position-left):not(.position-right) {
        top: 5px;
        right: 5px;
    }
    
    .wc-dynamic-pricing-badge.position-left {
        top: 5px;
        left: 5px;
    }
    
    .wc-dynamic-pricing-badge .discount-percentage {
        font-size: 11px;
        padding: 3px 6px;
    }
}

/* Tilpassninger for populære temaer */

/* Storefront tema */
.storefront .wc-dynamic-pricing-badge.position-right,
.storefront .wc-dynamic-pricing-badge:not(.position-left):not(.position-right) {
    top: 0.875em;
    right: 0.875em;
}

.storefront .wc-dynamic-pricing-badge.position-left {
    top: 0.875em;
    left: 0.875em;
}

/* Astra tema */
.astra-shop-thumbnail-wrap .wc-dynamic-pricing-badge.position-right,
.astra-shop-thumbnail-wrap .wc-dynamic-pricing-badge:not(.position-left):not(.position-right) {
    top: 15px;
    right: 15px;
}

.astra-shop-thumbnail-wrap .wc-dynamic-pricing-badge.position-left {
    top: 15px;
    left: 15px;
}

/* Divi tema */
.et_pb_module .wc-dynamic-pricing-badge.position-right,
.et_pb_module .wc-dynamic-pricing-badge:not(.position-left):not(.position-right) {
    top: 20px;
    right: 20px;
}

.et_pb_module .wc-dynamic-pricing-badge.position-left {
    top: 20px;
    left: 20px;
}

/* Shortcode-spesifikk styling */

/* Shortcode rabattinformasjon */
.wc-dynamic-pricing-info.shortcode-info {
    margin: 5px 0;
    display: inline-block;
}

/* Shortcode rabattmerke */
.wc-dynamic-pricing-badge.shortcode-badge {
    position: relative;
    top: auto;
    right: auto;
    display: inline-block;
    margin: 0;
}

.wc-dynamic-pricing-badge.shortcode-badge .discount-percentage {
    display: inline-block;
}

/* Ingen rabatt tilstand */
.wc-dynamic-pricing-info.no-discount,
.wc-dynamic-pricing-badge.no-discount {
    opacity: 0.5;
    background: #f0f0f0;
    border-color: #ccc;
}

.wc-dynamic-pricing-info.no-discount .discount-badge {
    color: #666;
}

/* Responsiv styling for shortcodes */
@media screen and (max-width: 768px) {
    .wc-dynamic-pricing-info.shortcode-info {
        font-size: 13px;
        padding: 5px 8px;
    }
    
    .wc-dynamic-pricing-badge.shortcode-badge .discount-percentage {
        font-size: 11px;
        padding: 2px 5px;
    }
}