/* ==========================================
   طراحی شاهکار و ضدگلوله (Bulletproof UI)
========================================== */
:root {
    --wppa-theme: #071E43;
    --wppa-theme-hover: #0f2a55;
    --wppa-bg: #ffffff;
    --wppa-input-bg: #f8fafc;
    --wppa-text-main: #1e293b;
    --wppa-text-muted: #687587;
    --wppa-error: #ef4444;
}

.wppa-hidden { display: none !important; }

/* پاپ‌آپ و بک‌گراند */
.wppa-popup {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 999999 !important; display: none !important;
    align-items: center !important; justify-content: center !important;
}
.wppa-popup.wppa-open { display: flex !important; }
.wppa-bg-overlay {
    position: absolute !important; width: 100% !important; height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(5px) !important;
    animation: wppaFadeIn 0.3s ease-out forwards !important;
}

/* کارت اصلی */
.wppa-box {
    display: flex !important; flex-direction: row !important;
    width: 850px !important; max-width: 95vw !important; min-height: 500px !important;
    background: var(--wppa-bg) !important; border-radius: 20px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important; position: relative !important; z-index: 2 !important;
    direction: rtl !important; font-family: inherit !important;
}
.wppa-popup .wppa-box {
    transform: scale(0.95); opacity: 0;
    animation: wppaPopUp 0.4s ease-out forwards;
}
.wppa-static .wppa-box { margin: 0 auto !important; }

/* پنل‌ها */
.wppa-form-panel {
    flex: 1.2 !important; padding: 50px 60px !important; display: flex !important;
    flex-direction: column !important; justify-content: center !important; background: #ffffff !important;
}
.wppa-banner-panel {
    flex: 1 !important; background: linear-gradient(135deg, var(--wppa-theme-hover), var(--wppa-theme)) !important;
    color: #ffffff !important; padding: 50px !important; display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important; text-align: center !important;
}

/* تایپوگرافی */
.wppa-title {
    color: var(--wppa-theme) !important; font-size: 2rem !important; font-weight: 900 !important;
    text-align: center !important; margin-bottom: 10px !important; margin-top: 0 !important;
}
.wppa-subtitle {
    text-align: center !important; color: var(--wppa-text-muted) !important; font-size: 0.95rem !important;
    margin-bottom: 35px !important; display: block !important;
}

/* ==========================================
   اینپوت‌های شناور ضد تداخل
========================================== */
.wppa-group { margin-bottom: 20px !important; }

.wppa-input-wrapper {
    position: relative !important;
    width: 100% !important;
}

/* اینپوت اصلی */
.wppa-input-wrapper input {
    width: 100% !important;
    height: 64px !important;
    background: var(--wppa-input-bg) !important;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    padding: 24px 20px 8px 48px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--wppa-text-main) !important;
    outline: none !important;
    transition: all 0.3s !important;
    box-sizing: border-box !important;
    direction: rtl !important;
    margin: 0 !important;
}

.wppa-input-wrapper input.ltr-input {
    direction: ltr !important; text-align: right !important;
}

.wppa-input-wrapper input:focus {
    background: var(--wppa-bg) !important; border-color: var(--wppa-theme) !important;
}

/* آیکون در سمت چپ */
.wppa-input-wrapper svg.wppa-icon {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important; height: 22px !important;
    color: var(--wppa-text-muted) !important;
    transition: 0.3s !important; pointer-events: none !important; z-index: 2 !important;
}

.wppa-input-wrapper input:focus ~ svg.wppa-icon {
    color: var(--wppa-theme) !important;
}

/* لیبل شناور در سمت راست */
.wppa-input-wrapper label {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 15px !important; font-weight: 500 !important;
    color: var(--wppa-text-muted) !important;
    pointer-events: none !important; transition: all 0.3s ease !important; z-index: 1 !important;
}

/* حرکت لیبل به بالا */
.wppa-input-wrapper input:focus ~ label,
.wppa-input-wrapper input:not(:placeholder-shown) ~ label {
    top: 16px !important; font-size: 11px !important; font-weight: 700 !important; color: var(--wppa-text-muted) !important;
}
.wppa-input-wrapper input:focus ~ label {
    color: var(--wppa-theme) !important;
}

/* ==========================================
   بخش ارسال مجدد کد
========================================== */
.wppa-resend-header {
    display: flex !important; justify-content: flex-end !important;
    margin-bottom: 8px !important; padding-left: 5px !important;
}
.wppa-resend-link {
    font-size: 0.85rem !important; color: var(--wppa-theme) !important; cursor: pointer !important;
    font-weight: 700 !important; transition: 0.2s !important;
}
.wppa-resend-link:hover { color: var(--wppa-theme-hover) !important; }

.wppa-error {
    color: var(--wppa-error) !important; font-size: 0.8rem !important; display: block !important;
    margin-top: 6px !important; padding-right: 15px !important; font-weight: 600 !important;
}

/* ==========================================
   دکمه‌ها
========================================== */
.wppa-btn {
    background-color: var(--wppa-theme) !important;
    color: #fff !important;
    width: 100% !important;
    height: 50px !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    transition: all 0.3s !important;
    display: flex !important; justify-content: center !important; align-items: center !important;
    margin-top: 15px !important;
}

.wppa-btn:hover {
    background-color: var(--wppa-theme-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(59, 177, 155, 0.25) !important;
    transform: translateY(-2px) !important;
}

.wppa-btn:disabled {
    border-color: #cbd5e0 !important; color: #cbd5e0 !important; background: transparent !important;
    cursor: wait !important; transform: none !important; box-shadow: none !important;
}

/* انیمیشن‌ها */
@keyframes wppaPopUp { to { transform: scale(1); opacity: 1; } }
@keyframes wppaFadeIn { to { opacity: 1; } }

/* موبایل */
@media (max-width: 768px) {
    .wppa-box { flex-direction: column !important; width: 100% !important; border-radius: 20px 20px 0 0 !important; min-height: auto !important; }
    .wppa-banner-panel { display: none !important; }
    .wppa-form-panel { padding: 40px 25px !important; }
    .wppa-popup { align-items: flex-end !important; }
    .wppa-popup .wppa-box { transform: translateY(100%); animation: wppaSlideUp 0.4s ease-out forwards; }
    @keyframes wppaSlideUp { to { transform: translateY(0); opacity: 1; } }
}