/**
 * Frontend CSS for WooCommerce Meter Pricing - Minimal Design
 */

/* Main container - completely transparent, no styling */
.wc-meter-pricing-selector {
    margin: 15px 0;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.wc-meter-pricing-selector label {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #666;
    margin-bottom: 6px;
}

/* Simple select box - very minimal, no extra styling */
#meter-length-select {
    width: 100%;
    max-width: 250px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 16px;
    padding-left: 35px;
    padding-right: 10px;
}

#meter-length-select:hover {
    border-color: #aaa;
}

#meter-length-select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: none;
}

/* Price info - very simple, no borders */
.meter-pricing-info {
    margin-top: 12px;
}

.meter-pricing-info p {
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.5;
}

.meter-pricing-info .base-price {
    color: #666;
    font-size: 12px;
}

.meter-pricing-info .base-price strong {
    color: #333;
    font-weight: 500;
}

.meter-pricing-info .calculated-price {
    font-size: 15px;
    color: #333;
    margin-top: 10px;
    padding: 0;
    border: none;
}

.meter-pricing-info .calculated-price .label {
    color: #666;
    font-weight: 400;
}

.meter-pricing-info .price-amount {
    color: #0073aa;
    font-size: 20px;
    font-weight: 700;
}

/* Shop/Archive page base price display */
.wc-meter-base-price {
    display: inline-block;
    font-size: 14px;
    color: #666;
}

.wc-meter-base-price .woocommerce-Price-amount {
    font-weight: 600;
    color: #333;
}

/* Disabled add to cart button */
.single_add_to_cart_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Cart item meta */
.wc-item-meta {
    font-size: 14px;
}

.wc-item-meta li {
    margin: 5px 0;
}

/* Animation for price display */
@keyframes fadeInPrice {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.calculated-price {
    animation: fadeInPrice 0.3s ease;
}

/* Responsive design */
@media (max-width: 768px) {
    .wc-meter-pricing-selector {
        margin: 20px 0;
    }
    
    #meter-length-select {
        max-width: 100%;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 35px 12px 12px;
    }
    
    body.rtl #meter-length-select,
    [dir="rtl"] #meter-length-select {
        padding: 12px 12px 12px 35px;
    }

    .meter-pricing-info .calculated-price {
        font-size: 15px;
    }

    .meter-pricing-info .price-amount {
        font-size: 18px;
    }
    
    .single_add_to_cart_button {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .wc-meter-pricing-selector label {
        font-size: 14px;
    }
    
    #meter-length-select {
        font-size: 16px;
        padding: 14px 35px 14px 14px;
    }
    
    body.rtl #meter-length-select,
    [dir="rtl"] #meter-length-select {
        padding: 14px 14px 14px 35px;
    }
    
    .meter-pricing-info .base-price {
        font-size: 13px;
    }
    
    .single_add_to_cart_button {
        padding: 16px 20px;
        font-size: 16px;
    }
}

/* RTL Support for Persian */
body.rtl .wc-meter-pricing-selector,
[dir="rtl"] .wc-meter-pricing-selector {
    direction: rtl;
    text-align: right;
}

body.rtl #meter-length-select,
[dir="rtl"] #meter-length-select {
    text-align: right;
    background-position: right 12px center;
    padding-right: 40px;
    padding-left: 15px;
}

body.rtl .meter-pricing-info,
[dir="rtl"] .meter-pricing-info {
    text-align: right;
}

/* Better RTL styling */
body[class*="persian"] .wc-meter-pricing-selector,
body[class*="farsi"] .wc-meter-pricing-selector,
body[lang*="fa"] .wc-meter-pricing-selector {
    direction: rtl;
}

body[class*="persian"] #meter-length-select,
body[class*="farsi"] #meter-length-select,
body[lang*="fa"] #meter-length-select {
    text-align: right;
    background-position: right 12px center;
    padding-right: 40px;
    padding-left: 15px;
}

/* Clean minimal design for modern themes */
.wc-meter-pricing-selector * {
    box-sizing: border-box;
}

/* Remove ALL WooCommerce styling conflicts */
.woocommerce div.product form.cart .wc-meter-pricing-selector,
.woocommerce-page div.product form.cart .wc-meter-pricing-selector,
.single-product div.product form.cart .wc-meter-pricing-selector {
    margin-bottom: 15px !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Better integration with WooCommerce product pages */
.woocommerce div.product .wc-meter-pricing-selector select,
.woocommerce-page div.product .wc-meter-pricing-selector select {
    margin: 0;
}

/* Ensure no extra boxes or backgrounds */
.wc-meter-pricing-selector::before,
.wc-meter-pricing-selector::after {
    content: none !important;
    display: none !important;
}

/* Clean appearance - absolutely no styling on container */
.wc-meter-pricing-selector,
.wc-meter-pricing-selector * {
    box-shadow: none !important;
    outline: none !important;
}

/* Force remove any theme overrides */
.wc-meter-pricing-selector {
    background-image: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}