:root {
    --primary-bg: #1A1A1A;
    --primary-color: #FFF;
    --secondary-color: #F6F6F6;
    --gray-color: #D9D9D9;

    /* fonts */
    --font-poppins: Poppins;

    /* font sizes */
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-5xl: 24px;
    --font-size-lg: 18px;
    --font-size-3xl: 22px;
    --font-size-7xl-7: 26.7px;
    --font-size-2xl: 21px;
    --font-size-xl: 20px;
    --font-size-lgi: 19px;
    --font-size-11xl: 30px;
    --font-size-mid: 17px;

    /* Colors */
    --color-gray-3: #898989;
    --color-gray-100: #242424;
    --color-gray-200: #1a1a1a;
    --color-white: #fff;
    --color-whitesmoke: #e8eaed;
    --color-black: #000;
    --color-darkslategray-100: #333e49;
    --color-oldlace: #f4f1de;
    --color-pink: #fec8c6;
    --color-salmon: #f77366;

    /* Status colors */
    --status-success: #03fb75;
    --status-warning: #fbb903;
    --status-danger: #dc3545;
    --status-info: #0e5fd9;

    /* Gaps */
    --gap-36xl: 55px;
    --gap-16xl: 35px;
    --gap-3xs: 10px;
    --gap-11xs: 2px;
    --gap-31xl: 50px;
    --gap-6xl: 25px;
    --gap-9xl-7: 28.7px;
    --gap-xs: 12px;
    --gap-xl: 20px;

    /* Paddings */
    --padding-11xs: 2px;
    --padding-10xs: 3px;
    --padding-8xs: 5px;
    --padding-xl: 20px;
    --padding-base: 16px;
    --padding-2xl: 21px;
    --padding-4xs-9: 8.9px;
    --padding-6xs: 7px;
    --padding-6xl: 25px;
    --padding-2xs: 11px;
    --padding-20xl: 39px;
    --padding-smi-5: 12.5px;
    --padding-smi: 13px;
    --padding-sm: 14px;
    --padding-mid: 17px;
    --padding-mini: 15px;
    --padding-7xl: 26px;
    --padding-xs: 12px;
    --padding-32xl: 51px;
    --padding-8xl: 27px;
    --padding-4xs: 9px;
    --padding-3xs: 10px;
    --padding-7xs-5: 5.5px;
    --padding-10xs-5: 2.5px;

    /* Border radiuses */
    --br-32xl-4: 51.4px;
    --br-3xl-2: 22.2px;
    --br-58xl-1: 77.1px;
    --br-31xl: 50px;
    --br-62xl-3: 81.3px;
    --br-5xs: 8px;

    /* Header font sizes */
    /* Desktop font sizes (1441px and above) */
    --h1-desktop: 38px;
    --h2-desktop: 32px;
    --h3-desktop: 28px;
    --h4-desktop: 24px;
    /* Laptop font sizes (1025px to 1440px) */
    --h1-laptop: 34px;
    --h2-laptop: 32px;
    --h3-laptop: 28px;
    --h4-laptop: 22px;
    /* Tablet font sizes (768px to 1024px) */
    --h1-tablet: 32px;
    --h2-tablet: 26px;
    --h3-tablet: 22px;
    --h4-tablet: 18px;
    /* Mobile font sizes (481px to 767px) */
    --h1-mobile: 30px;
    --h2-mobile: 24px;
    --h3-mobile: 20px;
    --h4-mobile: 17px;
    /* Mobile font sizes (up to 480px) (Small screens) */
    --h1-mobile-small: 28px;
    --h2-mobile-small: 22px;
    --h3-mobile-small: 18px;
    --h4-mobile-small: 16px;

    /* Paragraph font sizes */
    /* Laptop font sizes (1025px and above) */
    --p-main-laptop: 18px;
    --p-secondary-laptop: 16px;
    /* Mobile font sizes (up to 768px) */
    --p-main-mobile: 16px;
    --p-secondary-mobile: 14px;

    /* Notes font sizes */
    /* Desktop font sizes (1441px and above) */
    --note-desktop: 14px;
    /* Laptop font sizes (1025px to 1440px) */
    --note-laptop: 12px;
    /* Tablet font sizes (769px to 1024px) */
    --note-tablet: 11px;
    /* Mobile font sizes (up to 768px) */
    --note-mobile: 10px;

    /* Button font sizes */
    /* Desktop font sizes (1441px and above) */
    --btn-main-desktop: 20px;
    --btn-secondary-desktop: 18px;
    /* Laptop font sizes (1025px to 1440px) */
    --btn-main-laptop: 18px;
    --btn-secondary-laptop: 16px;
    /* Tablet font sizes (769px to 1024px) */
    --btn-main-tablet: 17px;
    --btn-secondary-tablet: 15px;
    /* Mobile font sizes (up to 768px) */
    --btn-main-mobile: 16px;
    --btn-secondary-mobile: 14px;

    /* Link font sizes */
    /* Desktop font sizes (1441px and above) */
    --link-desktop: 18px;
    /* Laptop font sizes (1025px to 1440px) */
    --link-laptop: 16px;
    /* Mobile font sizes (up to 768px) */
    --link-mobile: 14px;

    /* Navigation font sizes */
    /* Desktop font sizes (1441px and above) */
    --nav-desktop: 18px;
    /* Laptop font sizes (1025px to 1440px) */
    --nav-laptop: 16px;
    /* Tablet font sizes (769px to 1024px) */
    --nav-tablet: 15px;
    /* Mobile font sizes (up to 768px) */
    --nav-mobile: 14px;

    /* Checkbox bg-image */
    --checkbox-bg-image-primary : url('../images/check.svg');
    --checkbox-bg-image-secondary : url('../images/check-white.svg');

    --primary-bg: #1A1A1A;
    --primary-color: #FFF;
    --secondary-color: #F6F6F6;
    --gray-color: #D9D9D9;
    --light-blue-color: #55F5FF;

    /* fonts */
    --font-poppins: Poppins;
    --font-inter: Inter;
    --font-chakra-petch: "Chakra Petch";

    /* font sizes */
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-5xl: 24px;
    --font-size-lg: 18px;
    --font-size-3xl: 22px;
    --font-size-7xl-7: 26.7px;
    --font-size-2xl: 21px;
    --font-size-xl: 20px;
    --font-size-lgi: 19px;
    --font-size-11xl: 30px;
    --font-size-mid: 17px;

    --font-size-smi-2: 12.2px;
    --font-size-2xs: 11px;
    --font-size-3xl-4: 22.4px;
    --font-size-2xs-4: 10.4px;
    --font-size-2xs-9: 10.9px;
    --font-size-xs: 12px;

    /* Colors */
    --color-gray-3: #898989;
    --color-gray-100: #242424;
    --color-gray-200: #1a1a1a;
    --color-gray-300: #161616;
    --color-white: #fff;
    --color-whitesmoke: #e8eaed;
    --color-black: #000;
    --color-darkslategray-100: #333e49;
    --color-oldlace: #f4f1de;
    --color-pink: #fec8c6;
    --color-salmon: #f77366;

    --color-gainsboro-100: #e0e0e0;
    --color-gainsboro-200: #d9d9d9;
    --carbon-400: #bdbdc6;
    --color-silver-100: #bcbcbc;
    --color-royalblue: #0e5fd9;
    --color-mediumaquamarine: #16c098;
    --newblue: #007abd;

    --color-black-admin: #010101;

    /* Gaps */
    --gap-36xl: 55px;
    --gap-16xl: 35px;
    --gap-3xs: 10px;
    --gap-11xs: 2px;
    --gap-31xl: 50px;
    --gap-6xl: 25px;
    --gap-9xl-7: 28.7px;
    --gap-xs: 12px;
    --gap-xl: 20px;
    --gap-6xs: 7px;
    --gap-28xl: 47px;
    --gap-7xs: 6px;
    --gap-lgi: 19px;
    --gap-20xl: 39px;
    --gap-12xl: 31px;
    --gap-mini: 15px;
    --gap-6xs-7: 6.7px;
    --gap-mid-8: 17.8px;
    --gap-5xs: 8px;
    --gap-2xs: 4px;


    /* Paddings */
    --padding-11xs: 2px;
    --padding-10xs: 3px;
    --padding-8xs: 5px;
    --padding-xl: 20px;
    --padding-base: 16px;
    --padding-2xl: 21px;
    --padding-4xs-9: 8.9px;
    --padding-6xs: 7px;
    --padding-6xl: 25px;
    --padding-2xs: 11px;
    --padding-20xl: 39px;
    --padding-smi-5: 12.5px;
    --padding-smi: 13px;
    --padding-sm: 14px;
    --padding-mid: 17px;
    --padding-mini: 15px;
    --padding-7xl: 26px;
    --padding-xs: 12px;
    --padding-32xl: 51px;
    --padding-8xl: 27px;
    --padding-4xs: 9px;
    --padding-3xs: 10px;
    --padding-7xs-5: 5.5px;
    --padding-10xs-5: 2.5px;
    --padding-5xl: 24px;
    --padding-12xs: 1px;
    --padding-5xs: 8px;
    --padding-9xs: 4px;
    --padding-7xs: 6px;
    --padding-3xl: 22px;
    --padding-9xs-1: 3.1px;
    --padding-4xl: 23px;

    /* Border radiuses */
    --br-32xl-4: 51.4px;
    --br-3xl-2: 22.2px;
    --br-58xl-1: 77.1px;
    --br-31xl: 50px;
    --br-62xl-3: 81.3px;
    --br-5xs: 8px;
    --br-xl-4: 20.4px;
    --br-xl-5: 24px;
    --br-xl: 20px;

    /* Header font sizes */
    /* Desktop font sizes (1441px and above) */
    --h1-desktop: 38px;
    --h2-desktop: 32px;
    --h3-desktop: 28px;
    --h4-desktop: 24px;
    /* Laptop font sizes (1025px to 1440px) */
    --h1-laptop: 34px;
    --h2-laptop: 32px;
    --h3-laptop: 28px;
    --h4-laptop: 22px;
    /* Tablet font sizes (768px to 1024px) */
    --h1-tablet: 32px;
    --h2-tablet: 26px;
    --h3-tablet: 22px;
    --h4-tablet: 18px;
    /* Mobile font sizes (481px to 767px) */
    --h1-mobile: 30px;
    --h2-mobile: 24px;
    --h3-mobile: 20px;
    --h4-mobile: 17px;
    /* Mobile font sizes (up to 480px) (Small screens) */
    --h1-mobile-small: 28px;
    --h2-mobile-small: 22px;
    --h3-mobile-small: 18px;
    --h4-mobile-small: 16px;

    /* Paragraph font sizes */
    /* Laptop font sizes (1025px and above) */
    --p-main-laptop: 18px;
    --p-secondary-laptop: 16px;
    --p-small-laptop: 14px;
    /* Mobile font sizes (up to 768px) */
    --p-main-mobile: 16px;
    --p-secondary-mobile: 14px;

    /* Notes font sizes */
    /* Desktop font sizes (1441px and above) */
    --note-desktop: 14px;
    /* Laptop font sizes (1025px to 1440px) */
    --note-laptop: 12px;
    /* Tablet font sizes (769px to 1024px) */
    --note-tablet: 11px;
    /* Mobile font sizes (up to 768px) */
    --note-mobile: 10px;

    /* Button font sizes */
    /* Desktop font sizes (1441px and above) */
    --btn-main-desktop: 20px;
    --btn-secondary-desktop: 18px;
    /* Laptop font sizes (1025px to 1440px) */
    --btn-main-laptop: 18px;
    --btn-secondary-laptop: 16px;
    /* Tablet font sizes (769px to 1024px) */
    --btn-main-tablet: 17px;
    --btn-secondary-tablet: 15px;
    /* Mobile font sizes (up to 768px) */
    --btn-main-mobile: 16px;
    --btn-secondary-mobile: 14px;

    /* Link font sizes */
    /* Desktop font sizes (1441px and above) */
    --link-desktop: 18px;
    /* Laptop font sizes (1025px to 1440px) */
    --link-laptop: 16px;
    /* Mobile font sizes (up to 768px) */
    --link-mobile: 14px;

    /* Navigation font sizes */
    /* Desktop font sizes (1441px and above) */
    --nav-desktop: 18px;
    /* Laptop font sizes (1025px to 1440px) */
    --nav-laptop: 16px;
    /* Tablet font sizes (769px to 1024px) */
    --nav-tablet: 15px;
    /* Mobile font sizes (up to 768px) */
    --nav-mobile: 14px;

    /* Checkbox bg-image */
    --checkbox-bg-image-primary : url('../images/check.svg');
    --checkbox-bg-image-secondary : url('../images/check-white.svg');


}
/* Styles de la pop-in */
#geo-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 420px;
    background: #1E1F28;
    color: white;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.geo-popup-content {
    position: relative;
    padding: 25px;
    text-align: center;
}

#geo-popup.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.geo-popup-header h2 {
    font-size: 22px;
    color: #00D4FF;
    margin-bottom: 10px;
}

.geo-popup-header span {
    font-size: 22px;
    vertical-align: middle;
}

.geo-popup-body p {
    font-size: 16px;
    margin-bottom: 15px;
}

.geo-popup-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.geo-popup-footer button {
    padding: 12px;
    width: 100%;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
}

#geo-allow {
    background: #00D4FF;
    color: black;
}

#geo-deny {
    background: #DC3545;
    color: white;
}

#geo-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: white;
}

/* Version mobile */
@media (max-width: 480px) {
    #geo-popup {
        width: 95%;
    }
    
    .geo-popup-header h2 {
        font-size: 20px;
    }

    .geo-popup-body p {
        font-size: 14px;
    }

    .geo-popup-footer button {
        font-size: 14px;
    }
}