/* Ramadan theme – green & gold accents across the site */
html[data-ramadan="1"] {
    --primary: #1B5E20;
    --primary-hover: #2E7D32;
    --ramadan-gold: #C9A227;
    --ramadan-gold-light: #FDD835;
    --ramadan-green: #1B5E20;
    --ramadan-green-light: #2E7D32;
}

html[data-ramadan="1"] .header {
    border-bottom: 3px solid var(--ramadan-gold);
    box-shadow: 0 2px 12px rgba(27, 94, 32, 0.15);
}

html[data-ramadan="1"] .nav a:hover,
html[data-ramadan="1"] .lang-dropdown,
html[data-ramadan="1"] .support-phone {
    color: var(--ramadan-green) !important;
}

html[data-ramadan="1"] .theme-toggle:hover {
    border-color: var(--ramadan-green);
}

html[data-ramadan="1"] .operator-card:hover {
    border-color: var(--ramadan-green);
    box-shadow: 0 12px 20px rgba(27, 94, 32, 0.12);
}

html[data-ramadan="1"] .page-title {
    background: linear-gradient(135deg, var(--ramadan-green) 0%, var(--ramadan-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html[data-ramadan="1"] .retry-btn {
    background: linear-gradient(135deg, var(--ramadan-green), var(--ramadan-green-light));
}

html[data-ramadan="1"] .retry-btn:hover {
    background: linear-gradient(135deg, #145214, var(--ramadan-green));
}

/* Register button in nav */
html[data-ramadan="1"] .nav a[data-key="register"] {
    background: linear-gradient(135deg, var(--ramadan-green), var(--ramadan-green-light)) !important;
    color: #fff !important;
}

/* Loading overlay in Ramadan colors */
html[data-ramadan="1"] .loading-overlay {
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #0d3d14 100%);
}

html[data-ramadan="1"] .loading-spinner {
    border-color: rgba(255, 248, 225, 0.3);
    border-top-color: #FDD835;
}

html[data-ramadan="1"] .ramadan-banner {
    display: flex;
    background: linear-gradient(90deg, #1B5E20 0%, #2E7D32 50%, #C9A227 100%);
    color: #FFF8E1;
    box-shadow: 0 2px 8px rgba(27, 94, 32, 0.25);
}

/* Other pages: profile, login, register, verify, ref, etc. */
html[data-ramadan="1"] .profile-header {
    background: linear-gradient(135deg, #1B5E20, #2E7D32) !important;
}

html[data-ramadan="1"] .auth-container {
    border-top: 3px solid #C9A227 !important;
    box-shadow: 0 4px 20px rgba(27, 94, 32, 0.12) !important;
}

html[data-ramadan="1"] button[type="submit"],
html[data-ramadan="1"] .btn-primary,
html[data-ramadan="1"] input[type="submit"] {
    background: #1B5E20 !important;
    background-color: #1B5E20 !important;
    border-color: #1B5E20 !important;
}

html[data-ramadan="1"] button[type="submit"]:hover,
html[data-ramadan="1"] .btn-primary:hover,
html[data-ramadan="1"] input[type="submit"]:hover {
    background: #2E7D32 !important;
    background-color: #2E7D32 !important;
    border-color: #2E7D32 !important;
}

html[data-ramadan="1"] input:focus,
html[data-ramadan="1"] textarea:focus {
    border-color: #1B5E20 !important;
    outline-color: #1B5E20 !important;
}

/* FAQ, orderstatus, ref and other pages with blue accents */
html[data-ramadan="1"] .category-btn.active,
html[data-ramadan="1"] .category-btn:hover {
    background-color: #1B5E20 !important;
}

html[data-ramadan="1"] .ref-header-card {
    border-left-color: #1B5E20 !important;
}