/* ==========================================================================
   Quranic Reels Generator — Light Theme Override + Animations
   يُضاف بعد style.css ويتجاوز المتغيرات الداكنة فقط
   ========================================================================== */

/* ── متغيرات اللون الفاتح ── */
:root {
    --bg-main:       #f5f1e8;
    --bg-card:       #ffffff;
    --text-primary:  #1c1611;
    --text-secondary:#6b5c3e;
    --glass-border:  rgba(197, 160, 89, 0.25);
    --shadow-gold:   0 2px 20px rgba(197, 160, 89, 0.10);
    --shadow-card:   0 4px 24px rgba(139, 105, 20, 0.08);
}

/* ── خلفية الصفحة ── */
body {
    background: #f5f1e8;
    /* نسيج خفيف بالـ CSS فقط — لا صور لا موارد إضافية */
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(197,160,89,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(197,160,89,0.05) 0%, transparent 50%);
    color: var(--text-primary);
}

/* ── Header ── */
.app-header {
    background: linear-gradient(180deg, rgba(197,160,89,0.10) 0%, transparent 100%);
}

.app-header .subtitle {
    color: var(--text-secondary);
    opacity: 1;
}

/* ── Cards ── */
.card {
    background: #ffffff;
    border: 1px solid rgba(197,160,89,0.20);
    box-shadow: var(--shadow-card);
    /* مدة الـ animation من style.css تبقى كما هي */
}

.card h2 {
    color: var(--gold-dark);
}

/* ── Form Controls ── */
select,
input[type="number"],
.ai-prompt-group input[type="text"] {
    background: #faf8f4;
    color: var(--text-primary);
    border-color: rgba(197,160,89,0.30);
}

select option {
    background: #ffffff;
    color: var(--text-primary);
}

.form-group label {
    color: var(--text-secondary);
}

/* ── BG Type Buttons ── */
.bg-type-btn {
    background: #faf8f4;
    color: var(--text-primary);
    border-color: rgba(197,160,89,0.25);
}

.bg-type-btn:hover {
    background: rgba(197,160,89,0.10);
}

/* ── Upload ── */
.upload-btn {
    background: rgba(197,160,89,0.08);
    color: var(--gold-dark);
}

/* ── BG Gallery Cards ── */
.bg-card {
    background: #f5f1e8;
    border: 2px solid rgba(197,160,89,0.15);
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
}

.bg-card .bg-label {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.85);
}

.bg-card .bg-type-icon {
    background: rgba(255,255,255,0.90);
}

/* ── Font Cards ── */
.font-card {
    background: #faf8f4;
    border-color: rgba(197,160,89,0.18);
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
}

.font-card .font-name {
    color: var(--text-secondary);
}

.font-badge {
    background: rgba(197,160,89,0.08);
    color: var(--gold-dark);
}

/* ── Selected Info ── */
.selected-info {
    background: rgba(197,160,89,0.06);
    border-color: rgba(197,160,89,0.25);
    color: var(--gold-dark);
}

/* ── Progress ── */
.progress-bar-container {
    background: rgba(139,105,20,0.10);
}

.progress-text {
    color: var(--gold-dark);
}

/* ── Idle ── */
.idle-message {
    color: var(--text-secondary);
}

/* ── Scrollbar ── */
::-webkit-scrollbar-thumb {
    background: rgba(197,160,89,0.40);
}

/* ==========================================================================
   أنيميشن خفيف — CSS فقط بدون مكتبات
   ========================================================================== */

/* Entrance للـ cards */
@keyframes sa-fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hover محسّن للـ bg-card */
.bg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(197,160,89,0.18);
    border-color: rgba(197,160,89,0.55);
}

.bg-card.selected {
    border-color: var(--gold);
    background: rgba(197,160,89,0.06);
    box-shadow: 0 0 0 3px rgba(197,160,89,0.12),
                0 8px 24px rgba(197,160,89,0.15);
}

/* Hover محسّن للـ font-card */
.font-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(197,160,89,0.15);
    border-color: rgba(197,160,89,0.50);
}

.font-card.selected {
    border-color: var(--gold);
    background: rgba(197,160,89,0.06);
    box-shadow: 0 0 0 3px rgba(197,160,89,0.12);
}

/* Generate button */
.generate-btn {
    position: relative;
    overflow: hidden;
}

/* Ripple container */
.sa-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transform: scale(0);
    animation: sa-rippleAnim 0.55s ease-out forwards;
    pointer-events: none;
}

@keyframes sa-rippleAnim {
    to { transform: scale(3); opacity: 0; }
}

/* Result section entrance */
@keyframes sa-scaleIn {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

#result-section:not(.hidden),
#result-section.visible {
    animation: sa-scaleIn 0.38s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* Stagger helper — يُضبط بالـ JS */
.sa-stagger {
    opacity: 0;
    animation: sa-fadeUp 0.40s ease forwards;
}