/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* Import parent theme styles */
@import url("../astra/style.css");

/* ============================
   DUAL INPUT FIELDS STYLING
   ============================ */

.dual-input-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: #f8fafc;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.dual-input-container:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dual-input-container .input-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    position: relative;
    min-height: 45px; /* Ensure consistent height */
    align-items: flex-start; /* Align to top for better text flow */
    padding: 5px 0;
}

.dual-input-container .input-group label {
    font-weight: 600;
    min-width: 140px; /* UPDATED: Increased from 100px for longer labels */
    color: #2d3748;
    margin-bottom: 0;
    font-size: 14px;
    letter-spacing: 0.025em;
}

.dual-input-container .qty-input, 
.dual-input-container .amount-input {
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 15px;
    width: 130px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #2d3748;
    font-weight: 500;
}

.dual-input-container .qty-input:focus, 
.dual-input-container .amount-input:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
    background-color: #ffffff;
}

.dual-input-container .qty-input:hover, 
.dual-input-container .amount-input:hover {
    border-color: #cbd5e0;
}

.dual-input-container .price-display {
    font-size: 13px;
    color: #718096;
    font-style: italic;
    margin-top: 5px;
    padding: 8px 12px;
    background-color: #edf2f7;
    border-radius: 4px;
    border-left: 3px solid #4299e1;
}

.dual-input-container .unit-price {
    font-weight: 600;
    color: #2d3748;
}

/* Hide default WooCommerce quantity field when dual input is present */
.dual-input-container + .quantity,
.dual-input-container ~ .quantity {
    display: none !important;
}

/* Astra-specific compatibility */
.ast-woocommerce-container .dual-input-container {
    margin: 1.5em 0;
}

.single-product .dual-input-container {
    max-width: 100%;
}

/* Integration with Astra's WooCommerce styling */
.woocommerce div.product form.cart .dual-input-container {
    margin-bottom: 1.5em;
}

.woocommerce div.product form.cart .dual-input-container .qty-input,
.woocommerce div.product form.cart .dual-input-container .amount-input {
    height: auto;
    line-height: 1.5;
}

/* Responsive Design */
@media (min-width: 768px) {
    .dual-input-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .dual-input-container .input-group {
        margin-bottom: 0;
        flex: 1;
        min-width: 220px; /* UPDATED: Increased for longer labels */
    }
    
    .dual-input-container .price-display {
        flex: 100%;
        margin-top: 10px;
    }
    
    .dual-input-container .quantity-limits-info {
        flex: 100%;
        margin-top: 5px;
    }
}

@media (min-width: 1024px) {
    .dual-input-container {
        flex-wrap: nowrap;
    }
    
    .dual-input-container .price-display {
        flex: none;
        margin-top: 0;
        margin-left: auto;
        min-width: 150px;
    }
    
    .dual-input-container .quantity-limits-info {
        flex: none;
        margin-top: 0;
        margin-left: 10px;
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .dual-input-container {
        padding: 15px;
        gap: 12px;
    }
    
    .dual-input-container .qty-input, 
    .dual-input-container .amount-input {
        width: 110px;
        font-size: 14px;
        padding: 8px 12px;
    }
    
    .dual-input-container .input-group label {
        min-width: 110px; /* UPDATED: Increased from 80px for longer labels */
        font-size: 12px; /* UPDATED: Slightly smaller on mobile */
        line-height: 1.2; /* UPDATED: Better line spacing for longer text */
    }
    
    .dual-input-container .input-group {
        gap: 8px;
        flex-wrap: wrap; /* UPDATED: Allow wrapping on very small screens */
    }
}

/* UPDATED: Ultra-small screens adjustment */
@media (max-width: 380px) {
    .dual-input-container .input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }
    
    .dual-input-container .input-group label {
        min-width: auto;
        margin-bottom: 5px;
        text-align: left;
    }
    
    .dual-input-container .qty-input, 
    .dual-input-container .amount-input {
        width: 100%;
    }
}

/* Dark mode support (if Astra has dark mode enabled) */
@media (prefers-color-scheme: dark) {
    .dual-input-container {
        background-color: #2d3748;
        border-color: #4a5568;
    }
    
    .dual-input-container .input-group label {
        color: #e2e8f0;
    }
    
    .dual-input-container .qty-input, 
    .dual-input-container .amount-input {
        background-color: #1a202c;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .dual-input-container .qty-input:focus, 
    .dual-input-container .amount-input:focus {
        border-color: #63b3ed;
        box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.1);
    }
    
    .dual-input-container .price-display {
        background-color: #4a5568;
        color: #cbd5e0;
        border-left-color: #63b3ed;
    }
    
    .dual-input-container .unit-price {
        color: #e2e8f0;
    }
    
    .dual-input-container .quantity-limits-info {
        background-color: #744210; /* UPDATED: Darker amber for dark mode */
        color: #fef3c7; /* UPDATED: Light amber text */
    }
    
    .dual-input-error {
        background-color: #742a2a !important;
        border-color: #e53e3e !important;
        color: #fed7d7 !important;
    }
}

/* Animation for value changes */
.dual-input-container .qty-input,
.dual-input-container .amount-input {
    transition: all 0.3s ease, transform 0.1s ease;
}

.dual-input-container .qty-input.updating,
.dual-input-container .amount-input.updating {
    transform: scale(1.02);
    border-color: #48bb78;
}

/* Error states */
.dual-input-container .qty-input.error,
.dual-input-container .amount-input.error {
    border-color: #f56565 !important;
    box-shadow: 0 0 0 3px rgba(245, 101, 101, 0.1) !important;
    background-color: #fed7d7 !important;
}

/* Success states */
.dual-input-container .qty-input.success,
.dual-input-container .amount-input.success {
    border-color: #48bb78;
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.1);
}

/* Custom scrollbar for number inputs (webkit browsers) */
.dual-input-container .qty-input::-webkit-outer-spin-button,
.dual-input-container .qty-input::-webkit-inner-spin-button,
.dual-input-container .amount-input::-webkit-outer-spin-button,
.dual-input-container .amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox number input styling */
.dual-input-container .qty-input[type=number],
.dual-input-container .amount-input[type=number] {
    -moz-appearance: textfield;
}

/* Ensure compatibility with Astra's button styling */
.woocommerce div.product form.cart .button {
    margin-top: 10px;
}

/* Loading state */
.dual-input-container.loading {
    opacity: 0.7;
    pointer-events: none;
}

.dual-input-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #4299e1;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================
   ENHANCED ERROR STYLING & VALIDATION
   ============================ */

/* UPDATED: Amount limits information display */
.dual-input-container .quantity-limits-info {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    padding: 5px 10px;
    background-color: #fff3cd; /* UPDATED: Changed to amber background for amount limits */
    border-radius: 3px;
    border-left: 3px solid #ffc107; /* UPDATED: Changed to amber border */
    font-weight: 500;
    text-align: center;
}

/* Enhanced error message styling */
.dual-input-error {
    color: #cc0000 !important;
    font-size: 12px !important;
    margin-top: 5px !important;
    padding: 8px 12px !important;
    background-color: #ffe6e6 !important;
    border: 1px solid #cc0000 !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    display: block !important;
    animation: errorPulse 0.6s ease-in-out;
    position: relative;
    box-shadow: 0 2px 4px rgba(204, 0, 0, 0.1);
}

.dual-input-error::before {
    content: '⚠ ';
    font-weight: bold;
    margin-right: 4px;
}

/* Error pulse animation */
@keyframes errorPulse {
    0% { 
        background-color: #ffe6e6; 
        transform: scale(1);
    }
    25% { 
        background-color: #ffcccc; 
        transform: scale(1.02);
    }
    50% { 
        background-color: #ffb3b3; 
        transform: scale(1.04);
    }
    75% { 
        background-color: #ffcccc; 
        transform: scale(1.02);
    }
    100% { 
        background-color: #ffe6e6; 
        transform: scale(1);
    }
}

/* Error state for input fields */
.dual-input-container input.error {
    border-color: #cc0000 !important;
    box-shadow: 0 0 8px rgba(204, 0, 0, 0.3) !important;
    background-color: #fff5f5 !important;
    animation: inputErrorShake 0.5s ease-in-out;
}

/* Input error shake animation */
@keyframes inputErrorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

/* Success state styling */
.dual-input-success {
    color: #2d7d32 !important;
    font-size: 12px !important;
    margin-top: 5px !important;
    padding: 8px 12px !important;
    background-color: #e8f5e8 !important;
    border: 1px solid #4caf50 !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    display: block !important;
    animation: successFade 0.5s ease-in-out;
}

.dual-input-success::before {
    content: '✓ ';
    font-weight: bold;
    margin-right: 4px;
    color: #2d7d32;
}

@keyframes successFade {
    0% { 
        opacity: 0; 
        transform: translateY(-5px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0);
    }
}

/* Valid input state */
.dual-input-container input.valid {
    border-color: #4caf50 !important;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3) !important;
    background-color: #f9fff9 !important;
}

/* Price change warning */
.dual-input-price-warning {
    color: #ff6600 !important;
    font-size: 13px !important;
    margin-top: 8px !important;
    padding: 10px 14px !important;
    background-color: #fff3e0 !important;
    border: 1px solid #ff9800 !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    display: block !important;
    animation: warningPulse 1s ease-in-out infinite;
}

.dual-input-price-warning::before {
    content: '📢 ';
    margin-right: 6px;
}

@keyframes warningPulse {
    0%, 100% { background-color: #fff3e0; }
    50% { background-color: #ffe0b2; }
}

/* Loading state for validation */
.dual-input-container.validating {
    opacity: 0.8;
}

.dual-input-container.validating::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid #4299e1;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

/* Enhanced focus states for better accessibility */
.dual-input-container .qty-input:focus-visible, 
.dual-input-container .amount-input:focus-visible {
    outline: 2px solid #4299e1;
    outline-offset: 2px;
}

/* Tooltip styling for limits */
.dual-input-container .input-group {
    position: relative;
}

.dual-input-container .input-group:hover .limits-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.limits-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background-color: #2d3748;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.limits-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #2d3748;
}

/* RTL support for error messages */
.rtl .dual-input-error,
.rtl .dual-input-success,
.rtl .dual-input-price-warning {
    text-align: right;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .dual-input-error {
        background-color: #ff0000 !important;
        color: #ffffff !important;
        border-color: #cc0000 !important;
    }
    
    .dual-input-success {
        background-color: #008000 !important;
        color: #ffffff !important;
        border-color: #006600 !important;
    }
    
    .dual-input-container input.error {
        border-width: 3px !important;
    }
    
    .dual-input-container input.valid {
        border-width: 3px !important;
    }
}

/* Print styles */
@media print {
    .dual-input-error,
    .dual-input-success,
    .dual-input-price-warning {
        background-color: transparent !important;
        border: 1px solid #000 !important;
        color: #000 !important;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .dual-input-error,
    .dual-input-success,
    .dual-input-container input.error,
    .dual-input-container input.valid,
    .dual-input-container.validating::before {
        animation: none !important;
        transition: none !important;
    }
}

/* Price change modal */
.price-change-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.price-change-content {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.price-change-content h3 {
    color: #ff6600;
    margin-bottom: 15px;
}

.countdown-text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 15px 0;
}

.refresh-button {
    background-color: #ff6600;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}

/* ============================
   NEW: ENHANCED STYLING FOR NEW LABELS
   ============================ */

/* Enhanced styling for new label text */
.dual-input-container .input-group label[for*="dual-quantity"] {
    color: #2c5282; /* Darker blue for "Amount of Toman" */
    font-weight: 700;
}

.dual-input-container .input-group label[for*="dual-amount"] {
    color: #2d7d32; /* Green for "Amount of Fiat" */
    font-weight: 700;
}

/* ============================
   DYNAMIC INPUT WIDTH FOR LARGE NUMBERS
   ============================ */

.dual-input-container .qty-input, 
.dual-input-container .amount-input {
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 15px;
    min-width: 130px; /* CHANGED: minimum width instead of fixed */
    max-width: 300px; /* ADDED: maximum width to prevent overflow */
    width: auto; /* ADDED: allow natural width expansion */
    flex: 1; /* ADDED: take available space */
    transition: all 0.3s ease;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #2d3748;
    font-weight: 500;
}

/* Enhanced input group to better accommodate dynamic width */
.dual-input-container .input-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    position: relative;
    min-height: 45px;
    align-items: flex-start;
    padding: 5px 0;
    flex-wrap: nowrap; /* ADDED: prevent wrapping */
}

.dual-input-container .input-group label {
    font-weight: 600;
    min-width: 140px;
    max-width: 140px; /* ADDED: prevent label from growing */
    color: #2d3748;
    margin-bottom: 0;
    font-size: 14px;
    letter-spacing: 0.025em;
    flex-shrink: 0; /* ADDED: prevent label from shrinking */
}

/* Responsive adjustments for dynamic width */
@media (min-width: 768px) {
    .dual-input-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .dual-input-container .input-group {
        margin-bottom: 0;
        flex: 1;
        min-width: 250px; /* INCREASED: more space for larger numbers */
        max-width: 450px; /* ADDED: maximum width */
    }
    
    .dual-input-container .qty-input, 
    .dual-input-container .amount-input {
        max-width: 250px; /* INCREASED: more space on larger screens */
    }
}

@media (max-width: 480px) {
    .dual-input-container .qty-input, 
    .dual-input-container .amount-input {
        min-width: 120px;
        max-width: 200px;
        font-size: 14px;
        padding: 8px 12px;
    }
    
    .dual-input-container .input-group {
        gap: 8px;
        flex-wrap: wrap; /* Allow wrapping on very small screens */
    }
}