/* پایه‌های کوچک مشترک */
.hero-gap {
    width: 100%;
    height: 150px;
}

.container-card {
    width: 500px;
    display: table;
    margin: 0 auto;
    padding: 10px;
}

.donate-input {
    max-width: 360px;
    margin: 0 auto;
}

.action-area {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* =========================================================
   THEME 1 (ThemeId == 1): Glassmorphism + Gradient
   ========================================================= */
.theme-1 {
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.15), transparent 60%), radial-gradient(1200px 600px at 90% 90%, rgba(255,255,255,0.1), transparent 60%), linear-gradient(120deg, #6a8dff 0%, #b86bff 50%, #ff6bd6 100%);
    background-attachment: fixed;
    color: #0e1020;
    font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

    .theme-1 .container-card {
        background: rgba(255,255,255,0.16);
        border-radius: 20px;
        padding: 24px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.25);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,0.35);
    }

    .theme-1 h2 {
        color: #ffffff;
        text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    }

    .theme-1 .alert-info {
        background: rgba(255,255,255,0.18);
        border-color: rgba(255,255,255,0.35);
        color: #f6f8ff;
    }

    .theme-1 .alert-success {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.35);
        color: #e9fdf0;
    }

    .theme-1 .form-control {
        background: rgba(255,255,255,0.85);
        border: 1px solid rgba(255,255,255,0.7);
        color: #1c2030;
        border-radius: 12px;
        outline: none;
        transition: box-shadow .2s ease, transform .05s ease;
    }

        .theme-1 .form-control:focus {
            box-shadow: 0 0 0 4px rgba(255,255,255,0.35);
        }

    .theme-1 .donate-btn.btn-primary {
        background: linear-gradient(135deg, #5d7cff, #ff74d4);
        border: none;
        border-radius: 999px;
        padding: 12px 28px;
        font-weight: 600;
        letter-spacing: .2px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.25);
        transition: transform .06s ease, box-shadow .2s ease;
    }

        .theme-1 .donate-btn.btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 28px rgba(0,0,0,0.3);
        }

/* =========================================================
   THEME 2 (ThemeId == 2): Neumorphism (Soft UI)
   ========================================================= */
.theme-2 {
    min-height: 100vh;
    background: #e7ebf0;
    font-family: "SF Pro Display","Inter","Segoe UI", Roboto, Arial, sans-serif;
    color: #2a3342;
}

    .theme-2 .container-card {
        width: 520px;
        background: #e7ebf0;
        border-radius: 24px;
        padding: 28px;
        box-shadow: 12px 12px 24px #c5c9cf, -12px -12px 24px #ffffff;
        border: 1px solid rgba(0,0,0,0.02);
    }

    .theme-2 h2 {
        font-weight: 700;
        margin-top: 0;
        color: #273245;
    }

    .theme-2 .alert {
        border-radius: 16px;
        border: none;
        box-shadow: inset 6px 6px 12px rgba(0,0,0,0.05), inset -6px -6px 12px rgba(255,255,255,0.8);
    }

    .theme-2 .alert-info {
        background: #ecf0f5;
        color: #3a465a;
    }

    .theme-2 .alert-success {
        background: #edf7f0;
        color: #2d6041;
    }

    .theme-2 .form-control {
        background: #e7ebf0;
        border: none;
        border-radius: 16px;
        padding: 14px 16px;
        box-shadow: inset 6px 6px 12px #c5c9cf, inset -6px -6px 12px #ffffff;
        transition: box-shadow .2s ease;
    }

        .theme-2 .form-control:focus {
            box-shadow: inset 4px 4px 8px #c5c9cf, inset -4px -4px 8px #ffffff, 0 0 0 4px rgba(84, 110, 255, .12);
            outline: none;
        }

    .theme-2 .donate-btn.btn-primary {
        background: #e7ebf0;
        color: #283244;
        border: none;
        border-radius: 999px;
        padding: 12px 26px;
        font-weight: 700;
        box-shadow: 8px 8px 16px #c5c9cf, -8px -8px 16px #ffffff;
        transition: transform .06s ease, box-shadow .2s ease;
    }

        .theme-2 .donate-btn.btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 12px 12px 24px #c5c9cf, -12px -12px 24px #ffffff;
        }

/* =========================================================
   THEME 3 (ThemeId == 3): Dark + Neon Accent
   ========================================================= */
.theme-3 {
    min-height: 100vh;
    background: radial-gradient(800px 400px at 20% 10%, rgba(0,255,214,0.15), transparent 60%), radial-gradient(800px 400px at 80% 90%, rgba(255,0,153,0.15), transparent 60%), #0b0f1a;
    color: #e7ebf0;
    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
}

    .theme-3 .container-card {
        background: #0f1525;
        border-radius: 18px;
        padding: 24px;
        border: 1px solid rgba(255,255,255,0.06);
        box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.02);
    }

    .theme-3 h2 {
        color: #cfe6ff;
        text-shadow: 0 0 8px rgba(0,255,214,0.2);
    }

    .theme-3 .alert-info {
        background: rgba(0, 255, 214, 0.06);
        border-color: rgba(0, 255, 214, 0.18);
        color: #aafaf0;
    }

    .theme-3 .alert-success {
        background: rgba(255, 0, 153, 0.08);
        border-color: rgba(255, 0, 153, 0.2);
        color: #ffcce9;
    }

    .theme-3 .form-control {
        background: #0b101d;
        border: 1px solid rgba(255,255,255,0.09);
        color: #e7ebf0;
        border-radius: 10px;
        transition: box-shadow .2s ease, border-color .2s ease;
    }

        .theme-3 .form-control:focus {
            border-color: #00ffd6;
            box-shadow: 0 0 0 3px rgba(0,255,214,0.2);
            outline: none;
        }

    .theme-3 .donate-btn.btn-primary {
        background: linear-gradient(90deg, #00ffd6, #ff0099);
        border: none;
        border-radius: 10px;
        padding: 12px 28px;
        font-weight: 700;
        color: #0b0f1a;
        text-shadow: none;
        box-shadow: 0 10px 24px rgba(255,0,153,0.22), 0 10px 24px rgba(0,255,214,0.18);
        transition: transform .06s ease, filter .2s ease;
    }

        .theme-3 .donate-btn.btn-primary:hover {
            transform: translateY(-1px);
            filter: brightness(1.06);
        }

/* =========================================================
   THEME 4 (ThemeId == 4): Minimal + Editorial
   ========================================================= */
.theme-4 {
    min-height: 100vh;
    background: linear-gradient(0deg, rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" fill="%23fafafa"/><path d="M0 24 L24 0" stroke="%23efefef" stroke-width="1"/></svg>') repeat;
    color: #1f2a37;
    font-family: "IBM Plex Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

    .theme-4 .container-card {
        width: 560px;
        background: #ffffff;
        border-radius: 16px;
        padding: 32px;
        border: 1px solid #e9eef5;
        box-shadow: 0 14px 38px rgba(16, 24, 40, 0.08);
    }

    .theme-4 h2 {
        font-family: "IBM Plex Serif", Georgia, "Times New Roman", serif;
        font-weight: 700;
        letter-spacing: .2px;
        color: #101828;
        margin-top: 0;
    }

    .theme-4 .alert {
        border-radius: 12px;
    }

    .theme-4 .alert-info {
        background: #eef4ff;
        border-color: #d1e0ff;
        color: #344054;
    }

    .theme-4 .alert-success {
        background: #ecfdf3;
        border-color: #abefc6;
        color: #065f46;
    }

    .theme-4 .form-control {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        color: #111827;
        border-radius: 10px;
        padding: 12px 14px;
        transition: border-color .2s ease, box-shadow .2s ease;
    }

        .theme-4 .form-control:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
            outline: none;
        }

    .theme-4 .donate-btn.btn-primary {
        background: #111827;
        border: 1px solid #0b1220;
        border-radius: 12px;
        padding: 12px 26px;
        font-weight: 600;
        letter-spacing: .2px;
        transition: background .15s ease, transform .06s ease;
    }

        .theme-4 .donate-btn.btn-primary:hover {
            background: #0b1220;
            transform: translateY(-1px);
        }