/**
 * FAR20 Coupon Display - Frontend Styles
 * Version: 1.4.3
 * Compatible with WoodMart Theme, Measurement Price Calculator, and Dynamic Discounts
 */

/* ==========================================
   ARCHIVE PRODUCT PRICE STYLES (GREEN)
   ========================================== */

.product__info.product__info--price-coupon-row {
    box-sizing: border-box;
    color: rgb(67, 68, 73);
    display: block;
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    text-align: center;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    unicode-bidi: isolate;
    user-select: none;
    visibility: visible;
    width: 100%;
    margin-top: 8px;
    padding: 8px 0;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.product__info.product__info--price-coupon-row .far20-coupon-label {
    margin-bottom: 4px;
    color: rgb(67, 68, 73);
    font-size: 11px;
}

.product__info.product__info--price-coupon-row .far20-coupon-label strong {
    color: rgb(0, 128, 0);
    font-weight: 600;
}

span.product__info.product__info--price-coupon {
    box-sizing: border-box;
    color: rgb(0, 128, 0);
    display: inline;
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-weight: 600;
    height: auto;
    line-height: 30px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    text-align: center;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    user-select: none;
    visibility: visible;
    width: auto;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

span.product__info.product__info--price-coupon sup {
    font-size: 12px;
    font-weight: 500;
    vertical-align: super;
    line-height: 0;
}

span.product__info.product__info--price-coupon span {
    font-size: 14px;
    font-weight: 500;
}

span.product__info.product__info--price-coupon .far20-from-label {
    font-size: 14px;
    font-weight: 400;
    color: rgb(0, 128, 0);
    margin-right: 3px;
}

/* ==========================================
   SINGLE PRODUCT PAGE PRICE STYLES (RED)
   ========================================== */

.product-summary__info.product-summary__info--coupon {
    border: 1px solid rgb(161, 42, 64);
    border-radius: 8px;
    box-sizing: border-box;
    color: rgb(67, 68, 73);
    display: block;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 15px 0;
    padding: 12px;
    text-align: right;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    unicode-bidi: isolate;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.product-summary__info.product-summary__info--coupon-price {
    box-sizing: border-box;
    color: rgb(161, 42, 64);
    display: block;
    font-family: Poppins, sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 42px;
    margin: 0;
    text-align: right;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    unicode-bidi: isolate;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.product-summary__info.product-summary__info--coupon-price sup {
    font-size: 16px;
    font-weight: 500;
    vertical-align: super;
    line-height: 0;
}

.product-summary__info.product-summary__info--coupon-price span {
    font-size: 18px;
    font-weight: 500;
}

.product-summary__info.product-summary__info--coupon-price .far20-from-label {
    font-size: 16px;
    font-weight: 400;
    color: rgb(161, 42, 64);
    margin-right: 6px;
    display: inline;
}

.product-summary__info.product-summary__info--coupon-hint {
    font-size: 13px;
    color: rgb(100, 100, 100);
    margin-top: 5px;
    text-align: right;
}

.product-summary__info.product-summary__info--coupon-hint strong {
    color: rgb(161, 42, 64);
}

/* ==========================================
   WOODMART THEME COMPATIBILITY
   ========================================== */

/* Grid view adjustments */
.products.elements-grid .product__info--price-coupon-row {
    padding: 5px 10px;
}

/* List view adjustments */
.products.elements-list .product__info--price-coupon-row {
    text-align: left;
}

.products.elements-list span.product__info.product__info--price-coupon {
    text-align: left;
}

/* WoodMart product hover effects */
.product-grid-item:hover .product__info--price-coupon-row {
    opacity: 1;
}

/* Quick view modal */
.wd-quick-view .product-summary__info--coupon {
    margin: 10px 0;
}

/* Product loop - different layouts */
.wd-products-with-bg .product__info--price-coupon-row {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 8px;
    margin: 8px;
}

/* ==========================================
   VARIABLE PRODUCTS
   ========================================== */

/* Variable product price range handling */
.variable-product .product-summary__info--coupon {
    margin-top: 10px;
}

/* Variation change - update price display */
.single_variation_wrap .product-summary__info--coupon {
    transition: all 0.3s ease;
}

/* ==========================================
   RESPONSIVE STYLES
   ========================================== */

@media screen and (max-width: 1024px) {
    .product-summary__info.product-summary__info--coupon {
        text-align: center;
        margin: 10px 0;
    }
    
    .product-summary__info.product-summary__info--coupon-price {
        text-align: center;
        font-size: 24px;
    }
    
    .product-summary__info.product-summary__info--coupon-hint {
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .product__info.product__info--price-coupon-row {
        font-size: 11px;
    }
    
    span.product__info.product__info--price-coupon {
        font-size: 18px;
    }
    
    .product-summary__info.product-summary__info--coupon-price {
        font-size: 22px;
        line-height: 32px;
    }
}

@media screen and (max-width: 480px) {
    .product__info.product__info--price-coupon-row {
        padding: 5px 0;
    }
    
    span.product__info.product__info--price-coupon {
        font-size: 16px;
    }
    
    .product-summary__info.product-summary__info--coupon {
        padding: 10px;
    }
    
    .product-summary__info.product-summary__info--coupon-price {
        font-size: 20px;
    }
}

/* ==========================================
   RTL SUPPORT
   ========================================== */

[dir="rtl"] .product-summary__info.product-summary__info--coupon {
    text-align: left;
}

[dir="rtl"] .product-summary__info.product-summary__info--coupon-price {
    text-align: left;
}

[dir="rtl"] .product-summary__info.product-summary__info--coupon-hint {
    text-align: left;
}

/* ==========================================
   ANIMATIONS
   ========================================== */

.product__info--price-coupon-row {
    animation: far20FadeIn 0.3s ease-in-out;
}

.product-summary__info--coupon {
    animation: far20SlideIn 0.4s ease-out;
}

@keyframes far20FadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes far20SlideIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    .product__info--price-coupon-row,
    .product-summary__info--coupon {
        border-color: #000 !important;
        color: #000 !important;
    }
    
    span.product__info.product__info--price-coupon,
    .product-summary__info.product-summary__info--coupon-price {
        color: #000 !important;
    }
}

/* ==========================================
   MPC (MEASUREMENT PRICE CALCULATOR) INTEGRATION
   ========================================== */

/* MPC Discount Box - Red bordered box below the calculator */
.far20-mpc-discount-box {
    background: rgba(161, 42, 64, 0.08);
    border: 2px solid rgb(161, 42, 64);
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    text-align: right;
    animation: far20SlideIn 0.3s ease-out;
}

.far20-mpc-discount-price {
    color: rgb(161, 42, 64);
    font-size: 26px;
    font-weight: 700;
    font-family: Poppins, sans-serif;
    line-height: 1.3;
}

.far20-mpc-discount-price sup {
    font-size: 14px;
    font-weight: 500;
    vertical-align: super;
    line-height: 0;
}

.far20-mpc-discount-price span {
    font-size: 16px;
    font-weight: 500;
}

.far20-mpc-discount-hint {
    color: rgb(100, 100, 100);
    font-size: 13px;
    margin-top: 5px;
    font-family: Poppins, sans-serif;
}

.far20-mpc-discount-hint strong {
    color: rgb(161, 42, 64);
    font-weight: 700;
}

/* Animation for price updates */
.far20-mpc-discount-box .far20-mpc-discount-price {
    transition: all 0.2s ease-in-out;
}

.far20-mpc-discount-box:hover .far20-mpc-discount-price {
    transform: scale(1.02);
}

/* MPC measurement unit suffix styling (no slash version) */
.far20-mpc-label {
    white-space: nowrap;
}

/* Archive MPC label */
span.product__info.product__info--price-coupon .far20-mpc-label {
    font-size: 11px;
    font-weight: 400;
    color: rgb(0, 100, 0);
    margin-left: 4px;
    opacity: 0.85;
}

/* Product page banner MPC label */
.product-summary__info.product-summary__info--coupon-price .far20-mpc-label {
    font-size: 14px;
    font-weight: 400;
    color: rgb(130, 50, 70);
    margin-left: 4px;
    opacity: 0.9;
}

/* Responsive adjustments for MPC */
@media screen and (max-width: 768px) {
    .far20-mpc-discount-box {
        padding: 12px;
        text-align: center;
    }
    
    .far20-mpc-discount-price {
        font-size: 22px;
    }
    
    .far20-mpc-discount-hint {
        font-size: 12px;
    }
    
    span.product__info.product__info--price-coupon .far20-mpc-label {
        font-size: 10px;
    }
    
    .product-summary__info.product-summary__info--coupon-price .far20-mpc-label {
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    .far20-mpc-discount-box {
        padding: 10px;
    }
    
    .far20-mpc-discount-price {
        font-size: 20px;
    }
    
    .far20-mpc-discount-hint {
        font-size: 11px;
    }
    
    span.product__info.product__info--price-coupon .far20-mpc-label {
        font-size: 9px;
    }
    
    .product-summary__info.product-summary__info--coupon-price .far20-mpc-label {
        font-size: 11px;
    }
}

/* ==========================================
   WOODMART DYNAMIC DISCOUNTS INTEGRATION
   Version 1.4.1 - Using official WoodMart hooks
   ========================================== */

/* Main container styling */
.far20-dynamic-discounts,
.wd-dynamic-discounts.far20-dynamic-discounts {
    border: 2px solid rgb(161, 42, 64) !important;
    border-radius: 8px !important;
    background: rgba(161, 42, 64, 0.03) !important;
    overflow: hidden;
    margin-top: 0 !important;
}

/* Title styling (added via hook woodmart_before_dynamic_discounts_table) */
.far20-discounts-title {
    background: linear-gradient(135deg, rgb(161, 42, 64) 0%, rgb(130, 30, 50) 100%);
    color: #fff !important;
    padding: 12px 15px;
    margin: 0 0 0 0;
    font-size: 14px;
    font-weight: 500;
    font-family: Poppins, sans-serif;
    text-align: center;
    border-radius: 6px 6px 0 0;
}

.far20-discounts-title strong {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ensure title connects to table properly */
.far20-discounts-title + table,
.far20-dynamic-discounts table {
    border-top: none !important;
    margin-top: 0 !important;
}

/* Table styling */
.far20-dynamic-discounts table {
    border: none !important;
    margin: 0 !important;
    border-collapse: collapse;
}

.far20-dynamic-discounts thead th {
    background: rgba(161, 42, 64, 0.1) !important;
    color: rgb(161, 42, 64) !important;
    font-weight: 600 !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid rgba(161, 42, 64, 0.2) !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.far20-dynamic-discounts tbody td {
    padding: 12px 15px !important;
    border-bottom: 1px solid rgba(161, 42, 64, 0.1) !important;
    vertical-align: middle !important;
}

.far20-dynamic-discounts tbody tr:last-child td {
    border-bottom: none !important;
}

.far20-dynamic-discounts tbody tr:hover {
    background: rgba(161, 42, 64, 0.05) !important;
}

/* Active row (current quantity) */
.far20-dynamic-discounts tbody tr.wd-active {
    background: rgba(161, 42, 64, 0.12) !important;
}

.far20-dynamic-discounts tbody tr.wd-active td {
    font-weight: 600 !important;
}

/* Quantity column (wd-dd-quantity) */
.far20-dynamic-discounts .wd-dd-quantity,
.far20-dynamic-discounts td.wd-dd-quantity {
    font-weight: 600 !important;
    color: rgb(67, 68, 73) !important;
}

.far20-dynamic-discounts .wd-dd-quantity span {
    display: inline-block;
    background: rgba(161, 42, 64, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
}

/* Price column (wd-dd-price) - FAR20 modified */
.far20-dynamic-discounts .wd-dd-price {
    color: rgb(161, 42, 64) !important;
}

.far20-dynamic-discounts .wd-dd-price .far20-discounted-price,
.far20-dynamic-discounts .wd-dd-price .woocommerce-Price-amount,
.far20-dynamic-discounts .wd-dd-price .amount {
    color: rgb(161, 42, 64) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

.far20-dynamic-discounts .wd-dd-price sup {
    font-size: 0.7em;
    vertical-align: super;
}

.far20-dynamic-discounts .wd-dd-price .woocommerce-Price-currencySymbol {
    font-weight: 500;
    font-size: 13px;
}

/* Unit of measure */
.far20-dynamic-discounts .wd-price-unit {
    font-size: 12px;
    color: rgb(100, 100, 100);
    font-weight: 400;
    margin-left: 3px;
}

/* Discount column (wd-dd-discount) */
.far20-dynamic-discounts .wd-dd-discount,
.far20-dynamic-discounts td.wd-dd-discount {
    color: rgb(0, 128, 0) !important;
    font-weight: 600 !important;
}

.far20-dynamic-discounts .wd-dd-discount span {
    display: inline-block;
    background: rgba(0, 128, 0, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
}

/* Loader overlay styling */
.far20-dynamic-discounts .wd-loader-overlay {
    background: rgba(255, 255, 255, 0.8);
}

/* Responsive */
@media screen and (max-width: 768px) {
    .far20-discounts-title {
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .far20-dynamic-discounts thead th,
    .far20-dynamic-discounts tbody td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    
    .far20-dynamic-discounts .wd-dd-price .woocommerce-Price-amount {
        font-size: 14px !important;
    }
}

@media screen and (max-width: 480px) {
    .far20-discounts-title {
        font-size: 12px;
        padding: 8px 10px;
    }
    
    .far20-dynamic-discounts thead th,
    .far20-dynamic-discounts tbody td {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    
    .far20-dynamic-discounts .wd-dd-quantity span,
    .far20-dynamic-discounts .wd-dd-discount span {
        padding: 3px 6px;
        font-size: 11px;
    }
    
    .far20-dynamic-discounts .wd-dd-price .woocommerce-Price-amount {
        font-size: 13px !important;
    }
}