:root {
    --bg-color: 41, 40, 40;
    --text-color: 240, 248, 255;
    --subtext-color: 200, 200, 200;
}

.dark_mod {
    --bg-color: 41, 40, 40;
    --text-color: 240, 248, 255;
    --subtext-color: 200, 200, 200;
}

* {
    box-sizing: border-box;
    outline: none;
}

html {
    scroll-behavior: smooth;
    color-scheme: light dark;
    font-size: 16px; /* Base font size */
}

html, body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    background-color: rgb(var(--bg-color));
    color: rgb(var(--text-color));
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: border-box;
    background-attachment: fixed;
    font-family: sans-serif;
    line-height: 1.5;
}

main {
    flex: 1;
    width: 100%;
    overflow-y: auto;
}

/* Typography */
h1, h2, h3, h4, h5, h6, p, a, button {
    margin: 0;
    padding: 0;
    color: rgb(var(--text-color));
    font-family: inherit;
    text-decoration: none;
    line-height: 1.3;
}

h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
h3 { font-size: clamp(1.25rem, 3.5vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 3vw, 1.5rem); }
h5 { font-size: clamp(1rem, 2.5vw, 1.25rem); }
h6 { font-size: clamp(0.9rem, 2vw, 1rem); }
p { font-size: clamp(0.9rem, 2vw, 1rem); }

svg {
    fill: rgb(var(--text-color));
    max-width: 100%;
    height: auto;
}

.active_user_content svg {
    fill: rgb(var(--secondary-color)) !important;
}

.notification-arabic {
    position: fixed;
    bottom: 2em;
    left: 10px;
    background-color: #ced686; /* Yellow background */
    color: #000000; /* Black text */
    padding: 10px 15px;
    border-radius: 5px;
    font-family: Arial, sans-serif; /* Ensure Arabic text displays properly */
    font-size: 14px;
    z-index: 1000; /* Ensures it stays on top of other elements */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    direction: rtl; /* Right-to-left for Arabic text */
}
a{
    cursor: pointer;
}

/* Font Faces */

@font-face {
    font-family: 'myfontt';
    src: url('/fonts/ArbFONTS-GEDinkum-Bold-1.ttf') ;
    font-weight: bold;
}
/*
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
*/
/* Responsive adjustments */
@media (max-width: 1024px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
    .grecaptcha-badge{
        display: none;
    }
}

/* Utility classes for responsive spacing */
.padding-sm {
    padding: 0.5rem;
}
.padding-md {
    padding: 1rem;
}
.padding-lg {
    padding: 1.5rem;
}

.margin-sm {
    margin: 0.5rem;
}
.margin-md {
    margin: 1rem;
}
.margin-lg {
    margin: 1.5rem;
}

@media (min-width: 768px) {
    .padding-sm {
        padding: 1rem;
    }
    .padding-md {
        padding: 1.5rem;
    }
    .padding-lg {
        padding: 2rem;
    }

    .margin-sm {
        margin: 1rem;
    }
    .margin-md {
        margin: 1.5rem;
    }
    .margin-lg {
        margin: 2rem;
    }
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Better focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgb(var(--text-color));
    outline-offset: 2px;
}

/* Print styles */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    a {
        color: black !important;
        text-decoration: underline !important;
    }
    
    .no-print {
        display: none !important;
    }
}