/* 
   Pricing Styles - Proper formatting for currency and strike-through prices
   Add this to your base.html or include in your main CSS
*/

/* Fix Rupee Symbol Overlapping - Critical Fix */
.text-4xl,
.text-3xl, 
.text-2xl,
.text-xl,
.text-lg {
    word-spacing: 0.15em !important;
    letter-spacing: 0.02em !important;
}

/* Specific fix for price displays */
span[class*="font-bold"],
span[class*="text-herbal"],
span[class*="text-gradient"],
.selling-price,
.price-display {
    word-spacing: 0.2em !important;
    letter-spacing: 0.03em !important;
}

/* Ensure all text elements have proper spacing */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force spacing in price containers */
.price-container,
.flex.items-baseline,
div[class*="gap-"] {
    gap: 0.75rem !important;
}

/* Price Container Spacing */
.price-container {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Selling Price Styles */
.selling-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #16a34a;
    letter-spacing: 0.02em;
}

/* Strike-through Price Styles */
.strike-price {
    font-size: 1rem;
    color: #9ca3af;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    letter-spacing: 0.01em;
}

/* MRP Display */
.mrp-label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

/* Discount Badge */
.discount-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: #d1fae5;
    color: #065f46;
    border: 2px solid #6ee7b7;
}

/* Savings Text */
.savings-text {
    font-size: 0.875rem;
    color: #16a34a;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.savings-text svg {
    width: 1rem;
    height: 1rem;
}

/* Product Card Pricing */
.product-card .price-section {
    margin: 0.75rem 0;
}

.product-card .current-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #16a34a;
    letter-spacing: 0.02em;
}

.product-card .was-price {
    font-size: 0.875rem;
    color: #9ca3af;
    text-decoration: line-through;
    margin-left: 0.5rem;
}

/* Cart/Checkout Pricing */
.cart-item-price {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cart-item-price .current {
    font-size: 1.125rem;
    font-weight: 600;
    color: #16a34a;
}

.cart-item-price .original {
    font-size: 0.75rem;
    color: #9ca3af;
    text-decoration: line-through;
}

/* Responsive Pricing */
@media (max-width: 640px) {
    .selling-price {
        font-size: 1.25rem;
    }
    
    .strike-price {
        font-size: 0.875rem;
    }
    
    .discount-badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
}

/* Price comparison tooltip */
.price-info-tooltip {
    position: relative;
    display: inline-block;
}

.price-info-tooltip .tooltip-content {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 1000;
    margin-bottom: 0.5rem;
}

.price-info-tooltip:hover .tooltip-content {
    display: block;
}

/* Ensure proper spacing for rupee symbol in all contexts */
span:contains("₹") {
    word-spacing: 0.05em;
}

/* Fix any CSS conflicts with rupee symbol */
* {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
}

/* Price display in admin */
.admin .field-display_cost_price,
.admin .field-display_selling_price,
.admin .field-display_mrp,
.admin .field-display_strike_price {
    min-width: 100px;
}

/* Ensure no text overlap */
.text-4xl, .text-3xl, .text-2xl, .text-xl {
    line-height: 1.2;
    word-spacing: normal;
}