/**
 * TAV Digipay Installment Fee - Frontend Styles
 * https://tavtheme.com
 */

/* ===== Font Inheritance - inherit theme fonts ===== */
.tav-digipay-cart-notice,
.tav-digipay-fee-row,
.tav-digipay-cart-fee-info,
.tav-excluded-notice,
.tav-digipay-fee-notice,
.tav-digipay-cart-badge,
.tav-installment-info {
    font-family: inherit !important;
}

/* ===== Cart Fee Info Next to Product Name ===== */
.tav-digipay-cart-fee-info {
    font-size: inherit !important;
    line-height: inherit !important;
}

.tav-digipay-cart-fee-info strong {
    font-weight: inherit !important;
}

/* Cart Fee Notice - Main notice at top of cart page */
.tav-digipay-cart-notice {
    background: linear-gradient(135deg, #fff3cd 0%, #fff9e6 100%);
    border: 1px solid #ffc107;
    border-right: 5px solid #ff9800;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 20px 0;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
    animation: tav-fade-in 0.5s ease;
}

@keyframes tav-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tav-digipay-cart-notice strong {
    color: #6d4c00;
    font-size: 15px;
}

.tav-digipay-cart-notice p {
    margin: 5px 0;
    color: #856404;
}

/* Checkout Fee Notice */
.tav-digipay-fee-row {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px dashed #dee2e6;
    border-radius: 6px;
    padding: 12px 18px;
    margin: 12px 0;
}

.tav-digipay-fee-row .fee-label {
    font-weight: 600;
    color: #495057;
}

.tav-digipay-fee-row .fee-amount {
    float: left;
}

.tav-digipay-fee-row .fee-description {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-top: 3px;
}

/* Cart table styling */
.cart_table .tav-digipay-cart-badge td {
    background: #fff9e6;
    border-top: 1px dashed #ffc107;
}

/* Cart totals section */
.cart-collaterals .tav-digipay-fee-summary {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 20px;
}

.cart-collaterals .tav-digipay-fee-summary h3 {
    margin-top: 0;
    font-size: 16px;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
}

/* Checkout notice at top */
#tav-digipay-checkout-notice {
    background: linear-gradient(135deg, #fff3cd 0%, #fff9e6 100%);
    border: 1px solid #ffc107;
    border-right: 5px solid #ff9800;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 20px 0;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

/* Order Receipt Notice */
.tav-digipay-fee-notice {
    background: linear-gradient(135deg, #fff3cd 0%, #fff9e6 100%);
    border: 1px solid #ffc107;
    border-left: 5px solid #ff9800;
    margin: 15px 0;
    border-radius: 6px;
    padding: 14px 18px;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.12);
}

.tav-digipay-fee-notice strong {
    color: #6d4c00;
}

.tav-digipay-fee-notice small {
    color: #856404;
}

/* WC Blocks Styling */
.woocommerce-blocks-wrapper .tav-digipay-fee-notice,
.woocommerce-blocks-wrapper .tav-digipay-cart-notice {
    background: linear-gradient(135deg, #fff3cd 0%, #fff9e6 100%);
    border: 1px solid #ffc107;
    border-right: 4px solid #ff9800;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 18px 0;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.woocommerce-blocks-wrapper .tav-digipay-fee-notice strong,
.woocommerce-blocks-wrapper .tav-digipay-cart-notice strong {
    color: #6d4c00;
}

/* Elementor shortcode notice */
.elementor-widget-tav-digipay .tav-digipay-cart-notice {
    margin: 0;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .tav-digipay-cart-notice {
        font-size: 13px;
        padding: 12px 15px;
        margin: 15px 10px;
    }

    .tav-digipay-fee-row {
        padding: 10px 14px;
    }
}

/* WooCommerce Blocks Checkout */
.woocommerce-checkout .tav-digipay-cart-notice {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Cart fee row in totals */
.woocommerce-cart-form .tav-digipay-fee-display,
.woocommerce-checkout .tav-digipay-fee-display {
    background: #fff9e6;
    border: 1px dashed #ffc107;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 10px 0;
}

/* Animation for dynamic fee display */
.tav-digipay-animated {
    animation: tav-slide-in 0.3s ease;
}

@keyframes tav-slide-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tav-digipay-cart-badge {
    font-size: 13px;
    color: #e91e63;
    margin-top: 4px;
    display: block;
}

.tav-digipay-cart-badge strong {
    font-weight: 700;
    color: #e91e63;
}

.tav-installment-info {
    border-top: 1px solid #eee;
    padding-top: 6px;
    margin-top: 6px;
}

/* ===== SnapPay Installment Price Box ===== */
.snapppay-box {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eaf6 100%) !important;
    border: 1px solid #c5cae9 !important;
    border-left: 4px solid #1976d2 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 15px 0 !important;
    box-shadow: 0 2px 6px rgba(25, 118, 210, 0.1) !important;
    direction: rtl !important;
    font-family: inherit !important;
    animation: tav-fade-in 0.5s ease;
}

.snapppay-box .box {
    margin-left: 10px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.snapppay-box .box img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
}

.snapppay-box .description-snapPay {
    font-size: 14px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

.snapppay-box .description-snapPay .title {
    display: block !important;
    color: #1a237e !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.snapppay-box .description-snapPay .description {
    display: block !important;
    color: #5c6bc0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .snapppay-box {
        background: linear-gradient(135deg, #1a237e22 0%, #28359322 100%) !important;
        border: 1px solid #3949ab !important;
        border-left: 4px solid #64b5f6 !important;
        box-shadow: 0 2px 6px rgba(100, 181, 246, 0.15) !important;
    }

    .snapppay-box .description-snapPay .title {
        color: #e8eaf6 !important;
    }

    .snapppay-box .description-snapPay .description {
        color: #9fa8da !important;
    }
}

/* ===== Digipay Installment Notice (shortcode style) ===== */
/* CSS Custom Properties for dynamic color settings */
.tav-digipay-installment-notice {
    --tav-installment-bg-start: #f8f9fa;
    --tav-installment-bg-end: #e9ecef;
    --tav-installment-border-color: #dee2e6;
    --tav-installment-border-left: #6c757d;
    --tav-installment-text-color: #2c3e50;
    --tav-installment-amount-color: #34495e;

    background: linear-gradient(135deg, var(--tav-installment-bg-start) 0%, var(--tav-installment-bg-end) 100%) !important;
    border: 1px solid var(--tav-installment-border-color) !important;
    border-left: 4px solid var(--tav-installment-border-left) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 15px 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    direction: rtl !important;
    animation: tav-fade-in 0.5s ease !important;
}

/* Flexbox container for two-column layout */
.tav-digipay-installment-notice .d-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

.tav-digipay-installment-notice .justify-center {
    justify-content: center;
}

.tav-digipay-installment-notice .text-center {
    text-align: center;
}

.tav-digipay-installment-notice .ml-2 {
    margin-left: 12px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Image column - full height */
.tav-digipay-installment-notice .v-image,
.tav-digipay-installment-notice .v-image img {
    width: auto !important;
    height: 70px !important;
    max-height: 70px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.tav-digipay-installment-notice .my-auto {
    margin-top: 0;
    margin-bottom: 0;
    align-self: center;
}

.tav-digipay-installment-notice .header-text {
    font-size: 14px;
    color: var(--tav-installment-text-color) !important;
    font-weight: 600;
    margin: 0;
    line-height: 1.8;
}

.tav-digipay-installment-notice .mt-2 {
    margin-top: 8px;
    margin-bottom: 0;
}

.tav-digipay-installment-notice .installment-amount {
    font-size: 15px;
    color: var(--tav-installment-text-color) !important;
    font-weight: 700;
    margin: 0;
    line-height: 1.8;
}

.tav-digipay-installment-notice .gray--text {
    color: #6c757d !important;
    font-weight: 400;
}

/* Approximate total line (جمع تقریبی) in the shortcode box */
.tav-digipay-installment-notice .tav-installment-approx {
    font-size: 12px !important;
    opacity: 0.85;
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
    padding-top: 4px !important;
}

.tav-digipay-installment-notice .tav-installment-approx .tav-installment-approx-amount {
    font-weight: 700;
}

.tav-digipay-installment-notice .mx-2 {
    margin-left: 6px;
    margin-right: 6px;
}

/* ===== Live cost breakdown inside Digipay gateway widget ===== */
/* Injected by assets/js/digipay-widget.js into .digipay-widget-content */
.digipay-widget .tav-digipay-widget-breakdown {
    display: block;
    margin-top: 6px;
    font-family: inherit;
    opacity: 0.9;
}

.digipay-widget .tav-digipay-widget-line {
    display: block;
    font-size: 13px;
    line-height: 1.9;
    color: inherit;
}

.digipay-widget .tav-digipay-widget-line strong {
    font-size: 15px;
    font-weight: 700;
}

/* Total price line - muted */
.digipay-widget .tav-digipay-widget-total {
    opacity: 0.75;
}

/* Per-installment line - emphasized */
.digipay-widget .tav-digipay-widget-installment strong {
    font-size: 16px;
}

/* Approximate total line (جمع تقریبی) - subtle, below the per-installment line */
.digipay-widget .tav-digipay-widget-approx {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2px;
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
    padding-top: 4px;
}

.digipay-widget .tav-digipay-widget-approx strong {
    font-size: 13px;
    font-weight: 700;
}

.digipay-widget--dark .tav-digipay-widget-approx {
    border-top-color: rgba(255, 255, 255, 0.2);
}

/* Installment count hint */
.digipay-widget .tav-digipay-widget-count {
    display: inline-block;
    font-size: 11px;
    line-height: 1.6;
    padding: 1px 8px;
    margin-right: 4px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
    opacity: 0.85;
    vertical-align: middle;
}

/* Digipay widget light/dark variants */
.digipay-widget--dark .tav-digipay-widget-count {
    background: rgba(255, 255, 255, 0.12);
}

/* Dark theme support for installment notice */
@media (prefers-color-scheme: dark) {
    .tav-digipay-installment-notice {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        border: 1px solid #4a6278;
        border-left: 4px solid #5dade2;
        box-shadow: 0 2px 6px rgba(93, 173, 226, 0.15);
    }

    .tav-digipay-installment-notice .header-text {
        color: #ecf0f1 !important;
    }

    .tav-digipay-installment-notice .installment-amount {
        color: #bdc3c7 !important;
    }

    .tav-digipay-installment-notice .gray--text {
        color: #95a5a6 !important;
    }
}