/* ============================================
   استایل فیلدها + دکمه‌های پاپ‌آپ
   ============================================ */

/* --------------------------------------------
   1. فیلدهای پاپ‌آپ - فقط داخل مودال
   -------------------------------------------- */

/* استایل فیلدهای ورودی - فقط داخل مودال */
#oneclick-modal input[type="text"],
#oneclick-modal input[type="tel"],
#oneclick-modal input[type="number"],
#oneclick-modal input[type="email"],
#oneclick-modal input[type="password"],
#oneclick-modal select,
#oneclick-modal textarea {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: #2d3748 !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    line-height: 1.6 !important;
}

/* فیلدها در حالت hover - فقط داخل مودال */
#oneclick-modal input[type="text"]:hover,
#oneclick-modal input[type="tel"]:hover,
#oneclick-modal input[type="number"]:hover,
#oneclick-modal input[type="email"]:hover,
#oneclick-modal input[type="password"]:hover,
#oneclick-modal select:hover,
#oneclick-modal textarea:hover {
    border-color: #b0c4de !important;
    background: #f8faff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* فیلدها در حالت focus - فقط داخل مودال */
#oneclick-modal input[type="text"]:focus,
#oneclick-modal input[type="tel"]:focus,
#oneclick-modal input[type="number"]:focus,
#oneclick-modal input[type="email"]:focus,
#oneclick-modal input[type="password"]:focus,
#oneclick-modal select:focus,
#oneclick-modal textarea:focus {
    border-color: #667eea !important;
    outline: none !important;
    background: #ffffff !important;
    box-shadow: 
        0 0 0 4px rgba(102, 126, 234, 0.12),
        0 8px 28px rgba(102, 126, 234, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* استایل Textarea - فقط داخل مودال */
#oneclick-modal textarea {
    min-height: 90px !important;
    resize: vertical !important;
    padding: 14px 18px !important;
    line-height: 1.7 !important;
}

#oneclick-modal textarea:focus {
    min-height: 110px !important;
}

/* استایل Select با آیکون - فقط داخل مودال */
#oneclick-modal select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1 2.5L7 8.5L13 2.5' stroke='%23718096' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 18px center !important;
    background-size: 14px 10px !important;
    padding-left: 46px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Placeholder ها - فقط داخل مودال */
#oneclick-modal input::placeholder,
#oneclick-modal textarea::placeholder {
    color: #a0aec0 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    transition: all 0.3s ease !important;
}

#oneclick-modal input:focus::placeholder,
#oneclick-modal textarea:focus::placeholder {
    opacity: 0.3 !important;
    transform: translateX(6px) !important;
}

/* لیبل ها - فقط داخل مودال */
#oneclick-modal label {
    display: block !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #2d3748 !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.2px !important;
}

/* --------------------------------------------
   2. دکمه‌های پاپ‌آپ - گرادینت آبی-بنفش
   -------------------------------------------- */

/* دکمه "ثبت و ادامه" و "ادامه پرداخت" */
.oneclick-next-step,
.oneclick-payment-submit,
#oneclick-apply-coupon {
    background: linear-gradient(135deg, #4A90D9 0%, #7C3AED 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(74, 144, 217, 0.35) !important;
    letter-spacing: 0.3px !important;
    text-align: center !important;
    display: inline-block !important;
}

/* هاور دکمه‌های پاپ‌آپ */
.oneclick-next-step:hover,
.oneclick-payment-submit:hover,
#oneclick-apply-coupon:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 32px rgba(74, 144, 217, 0.50) !important;
    background: linear-gradient(135deg, #5B9CE0 0%, #8B5CF6 100%) !important;
}

/* دکمه بازگشت */
.oneclick-prev-step {
    background: #e2e8f0 !important;
    color: #4a5568 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.oneclick-prev-step:hover {
    background: #cbd5e0 !important;
    transform: translateY(-2px) !important;
}

/* دکمه ادامه خرید (بستن مودال) */
.oneclick-continue-shopping {
    background: #e53e3e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(229, 62, 62, 0.30) !important;
}

.oneclick-continue-shopping:hover {
    background: #c53030 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(229, 62, 62, 0.40) !important;
}

/* --------------------------------------------
   3. بخش کد تخفیف
   -------------------------------------------- */

#oneclick-coupon-toggle {
    background: #f7faff !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    border: 1.5px dashed #d0ddea !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-weight: 500 !important;
    color: #4a5b6b !important;
    font-size: 14px !important;
}

#oneclick-coupon-toggle:hover {
    border-color: #4A90D9 !important;
    background: #f5f9ff !important;
}

#oneclick-coupon-box {
    margin-top: 14px !important;
    padding: 16px 18px !important;
    background: #fafdff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
}

#oneclick-coupon-input {
    flex: 1 !important;
    padding: 12px 16px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    min-width: 0 !important;
}

#oneclick-coupon-input:focus {
    border-color: #4A90D9 !important;
    box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.10) !important;
    outline: none !important;
}

/* --------------------------------------------
   4. انیمیشن‌ها
   -------------------------------------------- */

/* انیمیشن ورود فیلدها */
#oneclick-modal .form-group {
    animation: fieldFadeIn 0.4s ease forwards !important;
    opacity: 0 !important;
}

#oneclick-modal .form-group:nth-child(1) { animation-delay: 0.05s !important; }
#oneclick-modal .form-group:nth-child(2) { animation-delay: 0.10s !important; }
#oneclick-modal .form-group:nth-child(3) { animation-delay: 0.15s !important; }
#oneclick-modal .form-group:nth-child(4) { animation-delay: 0.20s !important; }
#oneclick-modal .form-group:nth-child(5) { animation-delay: 0.25s !important; }

@keyframes fieldFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------
   5. اسکرول‌بار
   -------------------------------------------- */

.oneclick-modal-body::-webkit-scrollbar {
    width: 5px !important;
}

.oneclick-modal-body::-webkit-scrollbar-track {
    background: #f0f4fa !important;
    border-radius: 10px !important;
}

.oneclick-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e0 !important;
    border-radius: 10px !important;
}

.oneclick-modal-body::-webkit-scrollbar-thumb:hover {
    background: #a0aec0 !important;
}

/* --------------------------------------------
   6. ریسپانسیو - موبایل
   -------------------------------------------- */

@media (max-width: 768px) {
    #oneclick-modal input[type="text"],
    #oneclick-modal input[type="tel"],
    #oneclick-modal input[type="number"],
    #oneclick-modal input[type="email"],
    #oneclick-modal input[type="password"],
    #oneclick-modal select,
    #oneclick-modal textarea {
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
    
    #oneclick-modal textarea {
        min-height: 75px !important;
        padding: 12px 16px !important;
    }
    
    #oneclick-modal select {
        background-position: left 16px center !important;
        padding-left: 42px !important;
    }
    
    #oneclick-modal label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
    
    .oneclick-next-step,
    .oneclick-payment-submit,
    .oneclick-prev-step,
    .oneclick-continue-shopping {
        padding: 12px 20px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
    
    #oneclick-coupon-box > div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    #oneclick-apply-coupon {
        width: 100% !important;
        padding: 12px !important;
    }
}

@media (max-width: 480px) {
    #oneclick-modal input[type="text"],
    #oneclick-modal input[type="tel"],
    #oneclick-modal input[type="number"],
    #oneclick-modal input[type="email"],
    #oneclick-modal input[type="password"],
    #oneclick-modal select,
    #oneclick-modal textarea {
        padding: 10px 14px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        border-width: 1.8px !important;
    }
    
    #oneclick-modal textarea {
        min-height: 60px !important;
        padding: 10px 14px !important;
    }
    
    #oneclick-modal select {
        background-position: left 14px center !important;
        padding-left: 38px !important;
        background-size: 12px 8px !important;
    }
    
    #oneclick-modal label {
        font-size: 12.5px !important;
        margin-bottom: 5px !important;
    }
    
    #oneclick-modal input::placeholder,
    #oneclick-modal textarea::placeholder {
        font-size: 12.5px !important;
    }
    
    .oneclick-next-step,
    .oneclick-payment-submit,
    .oneclick-prev-step,
    .oneclick-continue-shopping {
        padding: 10px 16px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
}