/**
 * Kassakoopje voor WooCommerce Pro - Frontend Styles
 *
 * @package Kassakoopje_WooCommerce_Pro
 * @version 1.1.0
 * @author Webdesign Direct
 * @author URI https://webdesign-direct.nl/
 * @description Frontend CSS for the Kassakoopje Pro plugin
 * @license GPL v2 or later
 * @since 1.0.0
 *
 * This file contains all the frontend styling for the Kassakoopje Pro plugin.
 * CSS variables are dynamically generated by PHP and applied inline to HTML elements.
 * 
 * CSS Variables used:
 * --kk-border: Border color for the kassakoopje box
 * --kk-bg: Background color for the kassakoopje box  
 * --kk-text: Text color for the kassakoopje box
 * --kk-btnbg: Button background color
 * --kk-btntxt: Button text color
 * --kk-sale-price: Sale price text color
 */

:root {
    --kk-border: #ddd;
    --kk-bg: #fafafa;
    --kk-text: #111;
    --kk-btnbg: #0073aa;
    --kk-btntxt: white;
    --kk-sale-price: #ff0d0d;
}

/* Main container - using !important to ensure styles are applied */
.kassa-koopje-box {
    border: 2px dashed var(--kk-border, #dddddd) !important;
    padding: 15px !important;
    margin: 20px 0 !important;
    border-radius: 8px !important;
    background: var(--kk-bg, #fafafa) !important;
    color: var(--kk-text, #111111) !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Dynamic border styles based on style variant */
.kk-style-1 {
    border-style: dashed !important;
}

.kk-style-2 {
    border-style: solid !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.kk-style-3 {
    border-style: solid !important;
    border-width: 3px !important;
    background: linear-gradient(0deg, rgba(255,255,255,0.8), rgba(255,255,255,0.8)), var(--kk-bg, #fafafa) !important;
}

.kk-style-4 {
    border-style: solid !important;
    border-radius: 14px !important;
    background: var(--kk-bg, #fafafa) !important;
    position: relative !important;
}

.kk-style-4::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 14px !important;
    pointer-events: none !important;
    box-shadow: 0 0 0 6px rgba(0,0,0,0.03) !important;
}

/* Main container styling */
.kassa-koopje-box {
    position: relative !important;
    min-height: 100px !important;
}

/* Content layout */
.kk-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Product image */
.kk-img img {
    max-height: 125px;
    width: auto;
    display: block;
    border-radius: 8px;
}

/* Info section */
.kk-info {
    flex: 1;
}

/* Title styling */
.kk-title {
    font-size: 16px;
    margin-bottom: 0;
    line-height: 1.3;
}

.kk-title .custom-title {
    font-size: 12px;
    font-style: italic;
    font-weight: 100;
    color: #666;
}

.kk-title .product-title {
    font-size: 17px;
    margin-bottom: 5px;
    font-weight: normal;
    color: var(--kk-text, #111111);
}

/* Price styling */
.kk-prijs {
    font-size: 16px;
    margin: 4px 0 6px;
    color: #777;
}

.kk-prijs del {
    color: #888888;
    margin-right: 10px;
}

.kk-aanbieding {
    color: var(--kk-sale-price, #e2401c) !important;
    font-weight: bold !important;
    font-size: 20px !important;
}

/* Button container */
.kk-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Main button - using !important to ensure styles are applied */
.kk-add {
    background: var(--kk-btnbg, #81d742) !important;
    color: var(--kk-btntxt, #ffffff) !important;
    border: 1px solid var(--kk-btnbg, #81d742) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

.kk-add:hover {
    background: var(--kk-btnbg, #81d742) !important;
    color: var(--kk-btntxt, #ffffff) !important;
}

/* Info link */
.kk-more {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.kk-more::before {
    content: "ℹ️";
    margin-right: 4px;
}

/* Button style variants */
.kk-btn-style-1 .kk-add {
    border-radius: 0 !important; /* Square - no rounded corners */
}

.kk-btn-style-2 .kk-add {
    border-radius: 25px !important; /* Round */
}

.kk-btn-style-3 .kk-add {
    border-radius: 5px !important; /* Round borders */
}

/* Frontend specific button styles - ensure they work everywhere */
.kassa-koopje-box .kk-add.kk-btn-style-1,
.kassa-koopje-box .button.kk-add.kk-btn-style-1 {
    border-radius: 0 !important; /* Square */
}

.kassa-koopje-box .kk-add.kk-btn-style-2,
.kassa-koopje-box .button.kk-add.kk-btn-style-2 {
    border-radius: 25px !important; /* Round */
}

.kassa-koopje-box .kk-add.kk-btn-style-3,
.kassa-koopje-box .button.kk-add.kk-btn-style-3 {
    border-radius: 5px !important; /* Round borders */
}

/* Additional specificity for WooCommerce button classes */
.kassa-koopje-box .button.kk-add.kk-btn-style-1 {
    border-radius: 0 !important; /* Square - override WooCommerce */
}

.kassa-koopje-box .button.kk-add.kk-btn-style-2 {
    border-radius: 25px !important; /* Round - override WooCommerce */
}

.kassa-koopje-box .button.kk-add.kk-btn-style-3 {
    border-radius: 5px !important; /* Round borders - override WooCommerce */
}

/* Responsive design */
@media (max-width: 768px) {
    .kk-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .kk-img img {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .kk-buttons {
        flex-direction: column;
        gap: 8px;
    }
    
    .kk-add {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .kassa-koopje-box {
        padding: 12px !important;
        margin: 15px 0 !important;
    }
    
    .kk-title {
        font-size: 14px !important;
    }
    
    .kk-prijs {
        font-size: 14px !important;
    }
    
    .kk-aanbieding {
        font-size: 16px !important;
    }
}