* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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


/* Navigation Bar Background */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    /* Existing styles remain */
    /*1background-color: rgba(25, 25, 35, 0.95);*/ /* Very dark, almost black, with slight transparency */
    /*2background: linear-gradient(to right, rgba(93, 76, 177, 0.85), rgba(126, 90, 203, 0.85));*/ /* A deep, rich purple to lighter purple gradient with slight transparency */
    /* 1background-color: rgba(0, 0, 0, 0.4); Removed */
    /*1box-shadow: 0 4px 15px rgba(0, 255, 255, 0.15);*/ /* Subtle teal glow for shadow */
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    flex-wrap: nowrap;
    z-index: 1000;
    box-sizing: border-box;
    display: flex;
    /* THIS IS THE CRUCIAL LINE: Ensure ONLY this 'background' rule is active */
    background: linear-gradient(to right, #050D1A, #101F3E); /* Extremely dark navy/blue to a slightly lighter, deep blue */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); /* Enhanced shadow for maximum depth and impact */
    /* REMOVE or comment out ALL other 'background' or 'background-color' lines within the nav rule */
    /* For example, these should NOT be active: */
    /* background-color: rgba(25, 25, 35, 0.95); */
    /* background: linear-gradient(to right, rgba(93, 76, 177, 0.85), rgba(126, 90, 203, 0.85)); */
    /* background-color: rgba(0, 0, 0, 0.4); */
}

/*nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);*/ /* Semi-transparent black background */
/*display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    flex-wrap: nowrap;
    z-index: 1000;
    box-sizing: border-box;
}*/


/* --- NAVIGATION BAR --- */
/*nav {
    position: fixed;*/ /* Keep nav fixed at the top */
/*top: 0;
    width: 100%;*/ /* Full width of the viewport */
/*z-index: 1000;*/ /* Ensure nav is on top of ALL content */
/*background-color: rgba(0, 0, 0, 0.7);*/ /* Example: semi-transparent background */
/*display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;*/ /* Include padding in the width */
}

/* Ensure no conflicting .logo if you have one in the nav */
nav .logo {
    display: none; /* If there's a logo in the nav, make sure it's handled separately */
}

/*Right Slide menu Hamburger*/
.nav-links {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
}

    /* ======= Styles for the navigation links in general =======  */
    .nav-links a,
    .dropdown-btn {
        color: #fff; /* Example: default white text */
        text-decoration: none;
        padding: 8px 12px;
        display: block;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
        white-space: nowrap;
        font-size: 15px;
    }

        .nav-links a:hover,
        .dropdown-btn:hover {
            background: rgba(255, 255, 255, 0.2); /* Lighter background on hover */
            border-radius: 4px;
        }

        /* Your existing general hover rule (keep this for other links) */
        .nav-links a:hover {
            background: rgba(255, 255, 255, 0.15); /* Lighter transparency on hover */
            border-radius: 4px;
        }


/* Add this NEW, HIGHLY SPECIFIC rule for the Affiliate dropdown button */
nav .nav-links .dropdown .dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.15); /* Match the hover background of Travel Guide */
    border-radius: 4px;
    /* You can try adding !important here as a last CSS resort if needed,
       but typically very specific selectors are enough. Use with caution. */
    /* background: rgba(255, 255, 255, 0.15) !important; */
}

/* NEW: Style for the active/clicked state of the dropdown button */
.nav-links .dropdown-btn.active-click-state {
    background: rgba(255, 255, 255, 0.15); /* Same as your hover background */
    border-radius: 4px;
    /* You might want a slightly stronger visual cue if it's "active" vs "hover" */
    /* For example: */
    /* box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3); */
}



/* Ensure default link color is still white for readability */
.nav-links a,
.dropdown-btn {
    color: #fff; /* Ensure text is white against the dark background */
}

    /* --- Styles for the ACTIVE navigation link --- */
    /*.nav-links a.active-page {*/
    /*background-color: #ff6a00;*/ /* Keep your blue background */
    /*color: rgba(255, 255, 255, 0.9);*/ /* White with 90% opacity (10% transparent) */
    /*font-weight: bold;
            border-bottom: 2px solid rgba(255, 255, 255, 0.7);*/ /* Optional: make border transparent too */
    /*}*/

    /*.nav-links a.active-page {*/
    /* background-color: #007bff;*/
    /*color: rgba(255, 255, 255, 0.7);*/ /* White with 70% opacity (30% transparent) */
    /*font-weight: bold;
            border-bottom: 2px solid rgba(255, 255, 255, 0.5);
        }*/

    /*.nav-links a.active-page {*/
    /*background-color: #f0f0f0;*/ /* Example: A light grey active background */
    /*color: rgba(0, 0, 0, 0.8);*/ /* Black with 80% opacity */
    /*font-weight: bold;*/
    /*border-bottom: 0px solid rgba(0, 0, 0, 0.6);*/
    /* }*/


    /* Active Menu Item */
    /*.nav-links a.active-page {*/
    /*1background: rgba(0, 255, 255, 0.1);*/ /* Very subtle teal background */
    /*background: rgba(0, 255, 255, 0.2);*/ /* Very subtle teal background */
    /*1color: #00FFFF;*/ /* Bright teal text */
    /*color: #fff;*/ /* White text for active */
    /*font-weight: bold;
            border-bottom: 3px solid rgba(255, 255, 255, 0.7);*/ /* A more prominent white border */
    /*border-radius: 0px;*/ /* Slightly rounded corners */
    /*1border-bottom: 2px solid #00FFFF;*/ /* Bright teal border */
    /*1border-radius: 2px;*/
    /*1text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);*/ /* Glowing text effect */
    /*}*/

    /* Active Menu Item */
    .nav-links a.active-page {
        background: rgba(255, 255, 255, 0.25); /* Subtle transparent white background for active */
        color: #FFF; /* Pure white text for excellent contrast */
        font-weight: bold;
        /*border-bottom: 3px solid #00E5FF;*/ /* Vibrant electric blue/cyan for a sharp, modern pop */
        border-radius: 2px;
    }

    /* Hover State for all links */
    .nav-links a:hover,
    .dropdown-btn:hover {
        /*1background: rgba(0, 255, 255, 0.05);*/ /* Even more subtle teal background on hover */
        /*1border-radius: 2px;*/
        background: rgba(255, 255, 255, 0.15); /* Slightly lighter background on hover */
        border-radius: 0px;
    }




/*.nav-links a.active-page {
            background: rgba(255, 255, 255, 0.2);*/ /* Lighter background on hover */
/*background-color: #007bff;*/ /* Assuming you want to keep your blue background for the active state */
/*color: rgba(80, 0, 0, 0.8);*/ /* <--- Your new midnight red transparent text color */
/*color: rgba(70, 130, 180, 0.8);*/ /* <--- Your new darker blue transparent text color */
/*font-weight: bold;
            border-bottom: 2px solid rgba(80, 0, 0, 0.6);*/
/*border-bottom: 2px solid rgba(135, 206, 235, 0.6);*/ /* Optional: make border transparent too */
/*}*/

/* For the dropdown button, if it's supposed to be active when one of its sub-links is */
/* This is a more advanced scenario, for now, focus on direct links */ /*Affiliate menu - green background*/
.nav-links .dropdown-btn {
    /*        .nav-links .dropdown-btn.active-page*/
    background-color: transparent;
    /* background-color: #007bff;*/
    color: #ffffff;
    font-weight: normal;
    border-bottom: 0px solid #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease; /* Ensure transition is here */
}

    /* Make sure the active state overrides the hover if both happen */
    .nav-links .dropdown-btn.active-click-state:hover {
        background: rgba(255, 255, 255, 0.2); /* Slightly darker on hover if active */
    }

    /* Optional: Keep the mouse hover effect if you want it *in addition* to the click state */
    .nav-links .dropdown-btn:hover {
        background: rgba(255, 255, 255, 0.15); /* This is for mouse hover */
        border-radius: 4px;
    }

@media screen and (max-width: 900px) {
    .nav-links a,
    .dropdown-btn {
        font-size: 14px;
        padding: 8px 10px;
    }

    nav {
        flex-wrap: nowrap;
    }
}

/*Drop-Down Menu*/
.dropdown {
    position: relative;
    display: inline-block;
}


/* Dropdown Menu Background */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    width: auto; /* Change to auto width */
    border-radius: 0 0 0 0;
    z-index: 1000;
    /* Updated Glassy Background with Transparent Linear Gradient */
    /* Glassy Background with Transparent Linear Gradient (Left to Right) */
    background: linear-gradient(to right, rgba(5, 13, 26, 3.95), /* #050D1A with 95% opacity (starts on the left) */
    rgba(16, 31, 62, 0.5) /* #101F3E with 10% opacity (ends on the right) */
    );
    backdrop-filter: blur(10px) saturate(150%); /* Increased blur and saturation for a more pronounced glassy effect */
    -webkit-backdrop-filter: blur(10px) saturate(150%); /* For Safari support */
    border: 0px solid rgba(255, 255, 255, 0.1); /* Subtle white border for a defined glass edge */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); /* Enhanced shadow for maximum depth and impact */
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 1.95),*/ /* Start: Black with 80% opacity */
    /*rgba(255, 255, 255, 0.1)*/ /* End: Light White with 10% opacity */
    /*);*/
    /*background: linear-gradient(to right, #050D1A, #101F3E); */ /* Extremely dark navy/blue to a slightly lighter, deep blue */
    /*background: linear-gradient(to right, rgba(5, 13, 26, 0.7),*/ /* Start: Your deepest blue with 70% opacity */
    /*rgba(16, 31, 62, 0.5)*/ /* End: Lighter deep blue with 50% opacity */
    /*);*/
    /*backdrop-filter: blur(10px) saturate(150%);*/ /* Increased blur and saturation for a more pronounced glassy effect */
    /*-webkit-backdrop-filter: blur(10px) saturate(150%);*/ /* For Safari support */
    /*border: 1px solid rgba(255, 255, 255, 0.1);*/ /* Subtle white border for a defined glass edge */
    /*box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);*/ /* Enhanced shadow for maximum depth and impact */
    /*background: linear-gradient(to right, #050D1A, #101F3E);*/ /* Extremely dark navy/blue to a slightly lighter, deep blue */
    /* #050D1A: A near-black, deepest possible blue. */
    /* #101F3E: A rich, very dark blue, still far from classic indigo. */
    /*box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); */ /* Enhanced shadow for maximum depth and impact */
    /*1background-color: rgba(25, 25, 35, 0.98);*/ /* Matches the primary nav bar color, less transparent */
    /*1backdrop-filter: blur(8px);*/ /* Increased blur */
    /*1box-shadow: 0 2px 10px rgba(0, 255, 255, 0.25);*/ /* Teal glow for dropdown */
}



    .dropdown-menu a {
        display: block;
        padding: 5px 10px; /* Example: 5px top/bottom, 10px left/right */
        color: white;
        text-decoration: none;
        white-space: nowrap;
    }

.dropdown.open .dropdown-menu {
    display: block;
}

/* Hamburger styles */
.hamburger {
    display: none; /* Hidden by default on larger screens */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
    margin-left: auto; /* Move hamburger to the right */
    padding: 5px; /* Add some padding for easier clicking */
}

    .hamburger .bar {
        height: 4px;
        width: 30px;
        /*background-color: white;*/
        margin: 1px 0;
        border-radius: 2px;
        background-color: white; /* Initial color of the bars */
        transition: 0.4s; /* Smooth transition for the animation */
    }

    /* Hamburger active state (forms red X) */
    .hamburger.active .top {
        /* transform: rotate(45deg) translate(5px, 5px);*/
        transform: rotate(45deg) translate(10px, 10px);
        background-color: #e63946; /* Red color when active */
    }

    .hamburger.active .middle {
        opacity: 0; /* Middle bar disappears */
    }

    .hamburger.active .bottom {
        transform: rotate(-45deg) translate(4px, -6px);
        background-color: #e63946; /* Red color when active */
    }

/* =======  Close Button styles (Solid Red &#39;X&#39;) =======  */
.close-btn {
    display: none; /* Initially hidden on all screens */
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #e63946; /* **SET COLOR TO RED** */
    font-size: 25px;
    cursor: pointer;
    z-index: 1003;
    padding: 5px;
}

    .close-btn.show {
        display: block; /* Show only when the mobile menu is active */
    }

    .close-btn:hover {
        color: #cc2936; /* Slightly darker red on hover for visual feedback (optional) */
    }

@media screen and (max-width: 768px) {
    .hamburger {
        display: flex; /* Show hamburger on small screens */
    }


    /*HERE IS THE DROPDOWN_MENU WHEN MINIMZE INTO SMALL DEVICES*/
    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 57px;
        right: -100%; /* Hidden off-screen by default */
        /*background: linear-gradient(to right, #050D1A, #101F3E);*/ /* Extremely dark navy/blue to a slightly lighter, deep blue */
        /*background: rgba(0, 0, 0, 0.95);*/ /*black transparency*/
        /* ----- UPDATED BACKGROUND FOR TRANSPARENCY ----- */
        /* Option 1: Solid Dark Blue with Transparency */
        /* Glassy Background Effect */
        /*background-color: rgba(5, 13, 26, 0.7);*/ /* A slightly transparent version of your deepest blue */
        /* Glassy Background Effect with Linear Gradient */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 1.95), /* Start: Black with 80% opacity */
        rgba(255, 255, 255, 0.1) /* End: Light White with 10% opacity */
        );
        /*backdrop-filter: blur(10px) saturate(180%);*/ /* Blur the content behind, and make it a bit more vibrant */
        /*-webkit-backdrop-filter: blur(10px) saturate(180%);*/ /* For Safari support */
        border: 0px solid rgba(255, 255, 255, 0.1); /* Subtle white border for a more defined glass edge */
        border-radius: 0px; /* Slightly rounded corners can enhance the glassy look */
        /*backdrop-filter: blur(10px) saturate(180%);*/ /* Blur the content behind, and make it a bit more vibrant */
        /*-webkit-backdrop-filter: blur(10px) saturate(180%);*/ /* For Safari support */
        /*border: 1px solid rgba(255, 255, 255, 0.1);*/ /* Subtle white border for a more defined glass edge */
        /*border-radius: 0px;*/ /* Slightly rounded corners can enhance the glassy look */
        /*background: rgba(0, 0, 0, 0.55);*/
        /*background-color: rgba(5, 13, 26, 0.9);*/
        /* A slightly transparent version of your deepest blue */
        /*backdrop-filter: blur(8px);*/ /* Optional: Adds a subtle blur effect to content behind it */
        /* Option 2: Gradient Dark Blue with Transparency (More advanced, but keeps the gradient feel) */
        /* If you want to keep the linear gradient effect with transparency: */
        /* background: linear-gradient(to right, rgba(5, 13, 26, 0.9), rgba(16, 31, 62, 0.9)); */
        /* backdrop-filter: blur(8px); /* Optional: Adds a subtle blur effect */
        /* background: rgba(0, 0, 0, 0.95); /* <-- REMOVE THIS LINE, as it's black transparency */
        /* background: linear-gradient(to right, #050D1A, #101F3E); /* <-- REMOVE THIS LINE, as it's fully opaque */
        width: 225px; /* Width of the slide-out menu */
        height: 550px;
        padding: 20px 15px 15px 15px;
        transition: right 0.3s ease-in-out;
        gap: 8px;
        overflow-y: auto; /* Enable scrolling for long menus */
        z-index: 1002; /* Ensure it's above the video */
    }


        .nav-links.active {
            right: 0; /* Slides into view */
        }

    .close-btn {
        display: block; /* Show the close button when the mobile menu is active */
    }

    .dropdown-menu {
        position: relative;
        background: #111;
        width: 100%;
        min-width: 100%;
        left: 0;
        top: auto;
    }

    .nav-links a, .dropdown-btn {
        width: 100%;
    }
}


@media (max-width: 480px) {
    .nav-links {
        height: 85%;
    }
}


#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    display: none;
}

    #overlay.show {
        display: block;
    }

body.light-theme {
    background-color: #f0f0f0;
    color: #222;
}

    body.light-theme nav {
        background-color: #eee;
        color: #000;
    }

    body.light-theme .nav-links a,
    body.light-theme .dropdown-btn,
    body.light-theme .theme-toggle {
        color: #000;
    }

    body.light-theme .dropdown-menu {
        background-color: #ddd;
    }



/*=== Spacing === */
.spacingAbout, .spacingAdvertising {
    padding-top: 65px; /* Adjust padding to clear fixed nav */
}

h1 {
    font-size: 2.5rem;
    text-align: center;
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }
}

@layer demo {
    .highlighted-text-shadow {
        text-shadow:
        /* regular text-shadow */
        0 .15ch 15px var(--shadow),
        /* text-shadow highlight */
        0 -2px 0 var(--highlight);
    }
}

@layer demo.support {
    :root {
        --hue: 320; /* change me */
        --bg: oklch(35% .3 var(--hue));
        --text: oklch(85% .1 var(--hue));
        --shadow: oklch(25% .2 var(--hue));
        --highlight: oklch(98% .05 var(--hue));
    }

    * {
        box-sizing: border-box;
        margin: 0;
    }

    html {
        block-size: 100%;
        background-color: var(--bg);
        color: var(--text);
    }

    body {
        min-block-size: 100%;
        font-family: system-ui, sans-serif;
        display: grid;
        place-content: center;
        gap: 10vh;
    }

    h1 {
        font-size: 25vi;
        letter-spacing: -.15ch;
        line-height: .75;
    }

    small {
        max-inline-size: 30ch;
    }
}


/* ======= Magazine Grid & Flip Cards ======== */

body {
    background-color: #f9f9f9;
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
}

h1 {
    text-align: center;
    margin-bottom: 2rem;
}

.magazine-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem; /* Default gap for larger screens */
    margin-bottom: 125px;
    padding-top: 65px; /* Pushes content below the fixed navbar */
}

.magazine-tile {
    width: 340px; /* Default width for large screens (e.g., 3+ columns) */
}

.flip-card {
    width: 100%; /* Takes 100% of .magazine-tile width */
    height: 570px; /* Default height (approx. 2:3 aspect ratio for 340px width) */
    position: relative;
    perspective: 1000px;
    /* Adding overflow: hidden and background properties here for consistency */
    border-radius: 0px; /* To match images */
    overflow: hidden; /* Important for cutting off content if it overflows */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    /*background-size: cover;*/ /* Image covers the area */
    background-size: contain; /* CHANGED FROM cover to CONTAIN */
    background-repeat: no-repeat; /* ADDED */
    background-position: center;
    /*border-radius: 0px;
    overflow: hidden;*/ /* Remove border-radius and overflow from here as they are now on .flip-card */
}

.flip-card-front {
    z-index: 2;
}

.flip-card-back {
    transform: rotateY(180deg);
}

    .flip-card-back .content {
        transform: rotateY(180deg); /* Flip text/buttons back to normal */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

/*.magazine-info {
    display: none;*/ /* Hidden as you're using .magazine-info-static */
/*}*/

.magazine-info {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

.magazine-info-static {
    margin-top: 10px;
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    text-align: left;
    width: 100%; /* Ensure it spans the tile's width */
    box-sizing: border-box;
}

    .magazine-info-static .magazine-title {
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 5px;
        color: #0d2976;
        text-align: center;
    }

    .magazine-info-static .magazine-description {
        font-size: 0.9rem;
        text-align: center;
    }

    .magazine-info-static a {
        color: #257aac;
        text-decoration: none;
        font-weight: 500;
    }

.flip-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.zoom-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Popup full image view */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
    padding-top: 60px;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80%;
}

.modal .close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2001;
}

    .modal .close:hover {
        color: #e63946;
    }

.image-close {
    position: absolute;
    top: 20px;
    right: 35px;
    font-size: 35px;
    color: white;
    cursor: pointer;
    z-index: 2001;
}

#imageModal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
}

.view-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 6px 12px;
    font-size: 0.9rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10;
}

.popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.popup-content {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px #fff;
}

.popup-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* --- Responsive Media Queries for Magazine Grid Columns --- */

/* 3 Columns for Medium-Large screens (e.g., smaller laptops, larger tablets, 769px - 1024px) */
@media (max-width: 1024px) {
    .magazine-grid {
        gap: 1.5rem; /* Reduce gap slightly */
    }

    .magazine-tile {
        /* Calculate width for 3 columns, subtracting total gap space divided by 3 */
        width: calc((100% - 2 * 1.5rem) / 3);
    }

    .flip-card {
        /* Calculate height to maintain 2:3 aspect ratio based on new percentage width */
        height: calc(((100vw - 2 * 1.5rem - 40px) / 3) * 1.5); /* 40px for body padding / scrollbar est. */
        min-height: 200px; /* Ensure a minimum height even if calculation fails */
    }
}

/* 2 Columns for Small-Medium screens (e.g., standard tablets, larger phones, 501px - 768px) */
@media (max-width: 768px) { /* This breakpoint now handles 2 columns */
    .magazine-grid {
        gap: 1rem; /* Further reduce gap */
    }

    .magazine-tile {
        /* Calculate width for 2 columns, subtracting total gap space divided by 2 */
        width: calc((100% - 1 * 1rem) / 2);
    }

    .flip-card {
        /* Calculate height to maintain 2:3 aspect ratio based on new percentage width */
        height: calc(((100vw - 1 * 1rem - 40px) / 2) * 1.5); /* 40px for body padding / scrollbar est. */
        min-height: 250px; /* Ensure a minimum height */
    }
}

/* 1 Column for Smallest screens (e.g., most phones, <= 500px) */
@media (max-width: 500px) {
    .magazine-grid {
        flex-direction: column; /* Force single column */
        align-items: center; /* Center the single column */
        gap: 1.5rem; /* Keep some gap between items */
    }

    .magazine-tile {
        width: 90vw; /* Nearly full screen width */
    }

    .flip-card {
        height: calc(90vw * 1.5); /* Maintain 2:3 aspect ratio based on 90vw width */
        /*height: 135vw;*/ /* Maintain aspect ratio for mobile: 90vw * 1.5 (2:3) */
        min-height: 300px; /* Ensure a minimum height */
    }
}


/* body, html {
            margin: 0;
            padding: 0;
            height: auto;
            min-height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            scroll-behavior: smooth;
        }*/

/*.form-wrapper {
            max-width: 800px;
            margin: 80px auto 40px auto;*/ /* top spacing for navbar */
/*padding: 0 1.5rem;
            box-sizing: border-box;
        }*/

/*body {
            overflow: hidden;*/ /* ✅ disables global scroll */
/*height: 100vh;
        }*/


/* Form Wrapper */
/*html, body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Roboto, sans-serif;
            background-color: #f8f9fc;
            height: 100%;
            min-height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }*/


/* File Table Scroll Behavior */
@media (max-width: 576px) {
    #fileTableContainer {
        overflow-x: auto;
    }

    #fileTable {
        min-width: 400px;
    }
}

/* File Table Default */
#fileTableContainer {
    overflow-x: hidden;
    overflow-y: hidden;
    max-height: none;
}

    /* Scroll Mode Activated */
    #fileTableContainer.scrollable {
        max-height: 110px;
        overflow-y: auto;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

/* Table Cell Behavior */
#fileTable th,
#fileTable td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    vertical-align: middle;
}

/* Form Elements */
select, input, textarea, button {
    font-size: 1rem;
}




/*.form-wrapper {
            max-height: 80vh;*/ /* or a fixed pixel height like 600px */
/*overflow-y: auto;
            padding-right: 16px;*/ /* ✅ prevents content from hiding behind scrollbar */
/*box-sizing: content-box;
            scroll-behavior: smooth;
        }

            .form-wrapper::-webkit-scrollbar {
                width: 0px;
                background: transparent;
            }*/

#adForm {
    background-color: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    box-sizing: border-box;
    width: 100%;
}

.form-title {
    text-align: center;
    color: #0055a5;
    margin-bottom: 24px;
    font-size: 1.8rem;
}

input {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    padding: 12px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* ✅ Align Turnstile + Buttons */
.action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.action-item {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 160px;
    height: 44px;
}

/* ✅ Button styling */
.btn {
    padding: 0 20px;
    height: 44px;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #0055a5;
    color: white;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 160px;
    white-space: nowrap; /* ✅ prevents wrapping */
}

    .btn i {
        font-size: 1.1rem;
    }

/* ✅ Stack cleanly on mobile */
@media (max-width: 600px) {
    .action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .action-item {
        width: 100%;
    }

    .btn {
        width: 100%;
    }
}



.attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e0e0e0;
    color: #333;
    padding: 10px 16px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    gap: 8px;
    transition: background-color 0.2s ease;
    min-width: 160px;
    height: 44px;
    box-sizing: border-box;
}

    .attach-btn:hover {
        background-color: #d5d5d5;
    }


@media (max-width: 600px) {
    .attach-btn {
        width: 100%;
        font-size: 0.95rem;
        padding: 10px;
    }
}

.attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background-color: #f1f1f1;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.delete-btn {
    background-color: transparent;
    color: #d32f2f;
    font-size: 1rem;
    padding: 2px 6px;
    border: none;
    cursor: pointer;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.2s ease;
}

    .delete-btn:hover {
        color: #b71c1c;
    }

.btn-clear {
    background-color: #e6f2ff; /* ✅ soft light blue */
    color: #0055a5;
    padding: 0 20px;
    height: 44px;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 160px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

    .btn-clear:hover {
        background-color: #d0e7ff; /* ✅ soft hover, no white flash */
    }



/*.btn-clear {
            background-color: #e6f2ff;*/ /* ✅ soft light blue */
/*color: #0055a5;
            padding: 0 20px;
            height: 44px;
            font-size: 1rem;
            font-weight: 500;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-width: 160px;
            white-space: nowrap;
            transition: background-color 0.2s ease;
        }

            .btn-clear:hover {
                background-color: #d0e7ff;*/ /* ✅ soft hover, no white flash */
/*}*/


.modal-content {
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}


select, input, textarea {
    position: relative;
    z-index: 1;
}

#thankYouModal, #validationErrorModal {
    z-index: 9999;
}


.modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100vh;
}



/* Premium header wrapper */
.ad-header-wrapper-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    /*padding: 2.5rem 2rem;*/
    /* Reduce padding to make header smaller */
    padding: 1.5rem 1.5rem 2rem 1.5rem; /* top | sides | bottom */
    border-top-left-radius: 0; /* remove top-left curve */
    max-width: 900px;
    margin: -0px auto 2rem auto; /* moves up 45px, keeps bottom spacing */
    border-radius: 5px;
    background: linear-gradient(135deg, #e6f0ff 0%, #ffffff 100%);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    gap: 0.8rem;
}

/* H1 premium */
.ad-h1-premium {
    font-size: 2.4rem;
    font-weight: 800;
    color: #0055a5;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Very tiny orange line */
.ad-h1-premium {
    font-size: 2rem; /* adjust for readability */
    font-weight: 800;
    color: #0055a5;
    margin: 0;
    white-space: nowrap; /* keep in one line */
    overflow: hidden; /* hide overflow if too long */
    text-overflow: ellipsis; /* adds "..." if text is too long */
}

/*.ad-line-premium {
            width: 75%;
            height: 1px;
            background-color: #ff7f00;
            border-radius: 0px;
            margin: 0.3rem auto 0.6rem auto;
        }*/

/* H2 + tooltip wrapper */
.ad-h2-wrapper-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    flex-wrap: wrap;
    position: relative;
    margin-top: 0px;
}

/* H2 premium */
/*.ad-h2-premium {
            font-size: 1.5rem;
            font-weight: 600;
            color: #333;
            margin: 0;
        }*/

.ad-h2-premium {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin: 0;
    white-space: nowrap; /* keep in one line */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tooltip button */
.tooltip-btn-premium {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #ff7f00;
    color: #fff;
    border: none;
    font-size: 1.1rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
    /* Add space from text */
    margin-left: 1.5rem; /* adjust as needed */
}

    .tooltip-btn-premium:hover {
        transform: scale(1.1);
        background: #ff9500;
    }

/* Tooltip box */
.tooltip-box-premium {
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px; /* minimum width to prevent vertical stacking */
    max-width: 320px; /* max width for readability */
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.08);
    display: none;
    text-align: center;
    white-space: normal; /* allows text to wrap naturally */
    z-index: 100;
    display: block; /* keep block for animation */
    /* Fade-in animation */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .tooltip-box-premium.active {
        opacity: 1;
        visibility: visible;
    }

    /* Optional arrow below the tooltip (centered) */
    /* Arrow below tooltip */
    .tooltip-box-premium::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
        background: rgba(255,255,255,0.95);
        border-left: 1px solid rgba(0,0,0,0.08);
        border-top: 1px solid rgba(0,0,0,0.08);
    }

/* Responsive adjustments */
@media (max-width: 600px) {
    .ad-header-wrapper-premium {
        padding: 2rem 1.5rem;
    }

    .ad-h1-premium {
        font-size: 1.8rem;
        white-space: normal;
    }

    .ad-h2-premium {
        font-size: 1.2rem;
    }
}

/* Form wrapper */
/*.form-wrapper {
            max-width: 800px;*/ /* maximum width for desktop */
/*width: 100%;*/ /* full width until max-width */
/*margin: 0 auto;*/ /* center horizontally */
/*padding: 0 1.5rem;*/ /* horizontal padding on small screens */
/*box-sizing: border-box;*/ /* include padding in width */
/*}*/

/* Responsive adjustments */
@media (max-width: 600px) {
    .form-wrapper {
        padding: 0 1rem; /* more space on sides for mobile */
    }
}


@media (max-width: 480px) {
    .ad-h1-premium {
        font-size: 1rem; /* smaller but still one line */
    }

    .ad-h2-premium {
        font-size: 1rem;
    }
}


.ad-line-premium {
    width: 85%; /* 75% of the header container */
    max-width: 650px; /* optional max width */
    min-width: 40px; /* optional min width */
    height: 1px; /* very thin line */
    background-color: #ff7f00; /* orange */
    border-radius: 0px; /* tiny rounded edges */
    margin: 0.3rem auto 0.6rem auto; /* centered with top/bottom spacing */
}

/*====== table grid small device screen ===*/ 

#fileTableContainer table {
    min-width: 100%; /* ensures table uses full width */
}

#fileTable th,
#fileTable td {
    white-space: nowrap; /* prevent breaking filenames awkwardly */
    text-overflow: ellipsis; /* cut overflow nicely */
    overflow: hidden;
}

#fileTable td {
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 576px) {
    #fileTable th,
    #fileTable td {
        font-size: 0.85rem; /* slightly smaller text on phones */
        padding: 0.35rem 0.5rem;
    }
}






#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #0055a5, #0077cc);
    color: white;
    border: none;
    border-radius: 50%; /* ✅ Circle shape */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
    z-index: 9999;
}

    #scrollTopBtn:hover {
        transform: scale(1.1);
        background: linear-gradient(135deg, #0077cc, #0055a5);
    }




    /*small SQUARE SCROLL*/

/*#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #0055a5, #0077cc);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
    z-index: 9999;
}

    #scrollTopBtn:hover {
        transform: scale(1.1);
        background-color: #0077cc;
    }*/

select {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}