/* ==========================================================================
   1. VARIABLES & DESIGN TOKENS
   ========================================================================== */
/* DEBUG: Uncomment below to see outlines on every element
* {
   outline: 1px solid red !important;
}
*/

   :root {
    --txtColor: #4b5563;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #eff6ff;
    --white: #ffffff;
    --default-bg:#ffffff;
    --light: #fafaff;
    --menu-width: 300px;
    --ads-width: 300px;
    --leftCol-width: 250px;
    --preview-width: 400px;
    --rightCol-width: 250px;
    --gap: 10px;
    --sliderWidth: 36px;
    --sliderHeight: 15px;
    --subtle-bg: #E9EEF9; /* Global variable */
    --readOnlyColor :#94a3b8;

    
    /* Slate Scale */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    --scroll-pos:0px;
}
@media screen and (max-width: 1366px) {
    :root {
        --menu-width: 200px;
    }
}
@media screen and (min-width: 801px) {
    :root{
        --scroll-pos: 74px;
    }
}
@media screen and (min-width: 1024px) {
    :root{
        --scroll-pos: 39px;
    }
}

/* Dynamic Card Colors */
.SunShine     { --card-color: #FFDD00; }
.SkyBlue      { --card-color: #87CEFA; }
.SpringGreen  { --card-color: #90EE90; }
.CoralPink    { --card-color: #FF7F50; }
.Lavender     { --card-color: #E6BEFF; }
.Turquoise    { --card-color: #40E0D0; }
.GoldenOrange { --card-color: #FFBF00; }

/* Reusable Utilities */
.Shadow-sm { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important; }
.Shadow    { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after { 
    box-sizing: border-box; 
}

html { 
    scroll-behavior: smooth; 
    scroll-padding-top: var(--scroll-pos);
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--txtColor);
    overflow-x: hidden;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.81)),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239050f5' fill-opacity='0.2'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   3. STRUCTURE & LAYOUT
   ========================================================================== */

/* =========================================
    1. HEADER & HAMBURGER
    ========================================= */
header.top-bar {
    position: relative;
    align-items: center;
    padding: 10px 20px;
    background: white;
    border-bottom: 1px solid #ddd;
    top: 0;
    z-index: 1001;
}

.mobile-toggle {
    position: absolute;
    display: none; /* Hidden on Desktop */
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 15px;
    bottom:0;
}

.mobile-toggle span {
    width: 25px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

/* ============================================
    breadcrumbs & countries
   ============================================ */
#countryList{margin:0;padding:0;line-height: 1rem;display: flex; gap:5px;}   
#countryList li {margin: 0 auto; padding-right: 5px;	list-style: none; line-height: 1rem;  }
#countryList li, #countryList a {height: 14px;width:22px;display: block;}
#Top{width:100%;display:flex;justify-content: space-between;padding:0 5px;align-items: center;}   
   
/* Breadcrumbs */
.breadcrumbs { font-size: 1rem; line-height:1rem; height:3rem; color: #222; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin: 0.2em 0;}
.breadcrumbs a {color: var(--slate-800); text-decoration: none; transition: color 0.2s; }
.breadcrumbs a:hover { color: #005f99; text-underline-offset: 3px; text-decoration: underline; }
.breadcrumbs .current { color: var(--slate-300); font-weight: bold; }
.breadcrumbs span { color: #33f;user-select: none; }
@media (min-width: 500px){
    .breadcrumbs {height:1rem;}
} 

/* =========================================
    2. THE 3-COLUMN GRID
    ========================================= */

.Page-Grid {
    display: grid;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 0 20px 0;
    gap: var(--gap);
    /* Column 1: Menu | Column 2: Content | Column 3: Ads */
    grid-template-columns: var(--menu-width) 1fr var(--ads-width);
    grid-template-rows: auto 1fr;          /* Row 1: Hero | Row 2: Content */
    grid-template-areas: 
        "side middle";
}

.LeftMenu   { grid-area: side; top: 80px; background: var(--default-bg); }
.HeroBlock  { grid-area: hero; background: var(--default-bg); padding: 20px; border-radius: 8px; }
.MainContent { grid-area: content; min-height: 1000px; }
.RightAds    { position: sticky; top: 80px; }
.MiddleColumn{ grid-area: middle;}
@media (min-width: 801px) and (max-width: 1100px) {
    .RightAds    { display:none; }
    .Page-Grid {
    grid-template-columns: var(--menu-width) 1fr; /* Stack everything */
    grid-template-areas: 
        "side middle"
    }
}

@media (max-width:800px){
    .RightAds { position: static; display: block; width: 100%; }
    .Page-Grid {
    grid-template-columns: 1fr; /* Stack everything */
    grid-template-areas: 
        "middle"
        "ads";
    }    
}



.LeftCol{display:flex;flex-direction:column; justify-content: space-between; width:100%;grid-area: leftCol;border-radius: 12px; border:1px solid var(--slate-200); padding:7px;}
.Preview{
    height: 600px;
    width: 100%;
    grid-area: preview;
    background: var(--slate-50);
    border-radius: 12px;
    border: 1px solid var(--slate-200);
    box-shadow:
        0 8px 24px -6px rgba(37, 99, 235, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    overflow: hidden;
    position: relative;
}
.RightCol{width:100%;grid-area: rightCol;display:flex;flex-direction: column; gap:24px;padding:10px 0; border-radius: 12px; border: 1px solid var(--slate-200);}
#msgCol { grid-area: ad; }
.switch {position: relative; display: inline-block; width: calc(var(--sliderWidth)); height: calc(var(--sliderHeight) + 2px);}
.switch input {opacity: 0; width: 0; height: 0;}/* Hide the default checkbox */
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #f99; transition: 0.4s; border-radius: calc(var(--sliderHeight) + 2px);}/* The slider */
.slider:before {position: absolute; content: ""; height: var(--sliderHeight); width: var(--sliderHeight); left: 1px; bottom: 1px; background-color: white; transition: 0.4s; border-radius: 50%;}/* The slider */
.switch input:checked + .slider {background-color: green;}/* When checked, change background color */
.switch input:checked + .slider:before {transform: translateX( calc(var(--sliderWidth) - var(--sliderHeight) - 2px));}/* Move the circle to the right when checked */
input[name="paperSize"] {opacity: 0;position: absolute;width: 0;height: 0;} /*remove the circle of the radiobutton for selecting the paperformat*/

/* ── Browse printable puzzles — accordion list ────────────────────────────── */
.PuzzleDiv {
    background: var(--light);
    border-radius: 12px;
    border: 1px solid #e0e7ff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 20px;
    margin: 16px 0;
}
.PuzzleDiv > h2 {
    font-size: 1.25rem;
    color: var(--primary-dark);
    text-align: center;
    margin: 0 0 12px;
}
.PuzzleCategoryList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 98%), 1fr));
    gap: 6px;
}
.PuzzleCategory {
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    overflow: hidden;
}
.PuzzleCategoryHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: #f8fafc;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--txtColor, #334155);
}
.PuzzleCategoryHeader:hover { background: #f1f5f9; }
.PuzzleCategoryArrow {
    font-size: 0.65em;
    color: var(--primary, #2563EB);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.PuzzleCategory.open .PuzzleCategoryArrow { transform: rotate(90deg); }
.PuzzleCategoryName { flex: 1; }
.PuzzleCategoryCount {
    font-size: 0.8em;
    font-weight: 400;
    color: #64748b;
}
.PuzzleCategoryItems {
    display: none;
    list-style: none;
    margin: 0;
    padding: 6px 8px;
    max-height: 220px;
    overflow-y: auto;
}
.PuzzleCategory.open .PuzzleCategoryItems { display: block; }
.puzzle-trigger {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 0.875rem;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.4;
}
.puzzle-trigger:hover {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}



/* #puzzles: override MainCard flex — children just stack as normal blocks */
#puzzles { display: block; }

/* Hide the whole section when both children are empty */
#puzzles:has(#userPuzzleBox:empty):has(#puzzleBox:empty) { display: none; }

/* Hide puzzle boxes when empty (no content yet / user not logged in) */
#userPuzzleBox:empty,
#puzzleBox:empty { display: none; }

/* Container styling */
#userPuzzleBox {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
}

/* Heading style */
#userPuzzleBox h2 {
    color: #1a1a1a;
    font-size: 1.5rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* The List (ul) */
#userPuzzleBox ul {
    display:flex;
    flex-wrap: wrap;
    gap:0 15px;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size:1rem;
}

/* Individual Item (li) */
#userPuzzleBox li {
    margin-bottom: 10px;
    width:250px;
}

/* The Link/Button (a) */
#userPuzzleBox li a {
    display: block;
    padding: 0 5px;
    background-color: #f8f9fa;
    color: #3366ff;
    text-decoration: none;
    border-radius: 8px;
    border-left: 3px solid var(--primary);
    border: 1px solid #e9ecef;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}



/* Interaction States */
#userPuzzleBox li a:hover {
    background-color: #3366ff;
    color: #ffffff;
    border-color: #3366ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(51, 102, 255, 0.2);
}

#userPuzzleBox li a:active {
    transform: translateY(0);
}


/* Container & Header Styling */
.related-links-container {
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;
}

.links-header {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 20px;
    border-left: 4px solid #3498db; /* A stylish accent bar */
    padding-left: 15px;
}

/* The Grid Layout */
.links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* This creates as many 250px columns as will fit, then stretches them */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px; 
}

/* Card-style List Items */
.link-item {
    display: flex;
    background: #fafafa;
    border: 1px solid #dadada;
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%; /* Ensures all cards in a row are equal height */
    align-items: flex-start;
}

.link-item:hover {
    border-color: #3498db;
    background: #ffffff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px); /* Lifts the card slightly */
}

/* Link Styling */
.link-item a {
    display: flex;
    flex-direction: column; /* Stacks title over description */
    align-items: flex-start;
    text-align: left;
    padding: 20px;
    width: 100%;
    text-decoration: none;
    color: #444;
    font-weight: 600;
    line-height: 1.4;
}

.link-item:hover a {
    color: #3498db;
}

.link-title {
    display: block;
    font-weight: 700;
    color: #1a63ad;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.link-desc {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: #7f8c8d;
    line-height: 1.4;
}

.link-item:hover .link-title {
    color: #3498db;
}


.form-group input {
  /* 1. Remove the 3D 'inset' effect and set a light gray border */
  border: 1px solid #d1d1d1;
  
  /* 2. Add the small radius */
  border-radius: 4px;
  
  /* 3. Ensure no weird mobile/OS-specific 3D shadowing */
  appearance: none;
  -webkit-appearance: none;
  
  /* 4. Add some breathing room so text doesn't touch the borders */
  padding: 4px 4px;
  
  /* 5. Optional: Smooth transition for when the user clicks */
  transition: border-color 0.2s ease-in-out;
  outline: none; /* Removes the default blue 'glow' */
  width:98%;
}

/* 6. Define a slightly darker border on focus for accessibility */
.form-group input:focus {
  border-color: #a1a1a1;
}


.form-group {
    display: flex;
    justify-content: space-between; /* This pushes the label left and select right */
    align-items: center;            /* This centers them vertically */
    flex-wrap: wrap;
    font-size:0.85rem;
    font-weight: 600;
    gap:5px;
}

.form-group label{
    font-size:0.9rem;
    font-weight: 600;
    color:blue;
}

.form-group select {
  /* 1. Match your input's border and radius */
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  background-color: #ffffff;
  
  /* 2. Standardize the height and padding */
  padding: 2px 28px 2px 8px; /* Extra padding on the right for the arrow */
  font-size: 16px;
  
  /* 3. The "Secret Sauce": Remove default browser arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* 4. Add your own custom arrow (Simple SVG data URI) */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px top 50%;
  background-size: 10px auto;
  
  cursor: pointer;
}

/* Match the focus state of your inputs */
.form-group select:focus {
  border-color: #a1a1a1;
  outline: none;
}
textarea{resize: none;width:100%;overflow:auto}

.GridContainer{overflow:auto;width:100%;}
.Grid{  background-color:#999; line-height: 1; width: 100%; border-collapse: collapse; padding: 0px; margin: 0px; color: black; font-size:15px;}
 .Grid tbody .Header{background-color:var(--subtle-bg);font-weight: 400;}
 .Grid tbody td{border:1px solid rgb(47, 47, 49);padding:0px;background-color: white;}
 .Grid tbody td .ReadOnly{background-color: unset; color: var(--readOnlyColor);}
 .Grid tbody td .Normal{background-color: unset; color:#000;}
 .Grid input{padding:0;}

    .ad-content{
        height:250px;
    }
.ad-slot-wrapper {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ad-label {
    display: block;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px; /* Small gap between label and ad */
}

.ad-content {
    /* Set min-height to match your ad size to prevent layout shift */
    /* Use 250px for Tier 2 and 90px for Tier 1 via JS toggle */
    height: 250px; 
    background-color: #fafafa; /* Light grey background shows it's a separate area */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    width: 100%;
    display: block;
    justify-content: center;
}

.PlayGround {
    display:grid;
    width:100%;
    background-color: #f5faff; /* Matches your Comparison Table's light rows */
    border: 1px solid #bfdbfe;
    padding: 10px;
    gap:10px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); /* Soft inner shadow for depth */
    grid-template-columns: 1fr;
    grid-template-areas:
        "leftCol"
        "preview"
        "rightCol"
        "ad"
}
.PlayGround .GameButton.neutral {
    background: #dde4ef;
    border: 1px solid #7f9cbf;
    color: #1e3a5f;
    font-weight: 600;
}
.PlayGround .GameButton.neutral:hover { background: #c8d5e8; border-color: #5a7fa8; }
/* danger: pale pink → deeper rose so text/border read clearly              */
.PlayGround .GameButton.danger {
    background: #fcd7d7;
    border: 1px solid #e05252;
    color: #7f1d1d;
    font-weight: 600;
}
.PlayGround .GameButton.danger:hover { background: #f9bfbf; border-color: #b91c1c; }
/* primary & success already use solid fills – just reinforce the font weight */
.PlayGround .GameButton.primary,
.PlayGround .GameButton.success { font-weight: 700; }



@media (min-width: 768px) {
    .PlayGround {
        grid-template-columns: 1fr 400px;
        grid-template-areas:
        "leftCol       preview"
        "leftCol       preview"
        "ad ad"
        "rightCol   rightCol"
    }
    .RightCol{
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-start;
        height: 250px;
    }
    .ControlButDiv{
        max-width:285px;
    }
    .ad-slot-wrapper{
        margin-bottom:15px;
    }
    .ad-content{height:100px;}
}
@media (min-width: 1366px) {
    .PlayGround {
        margin:0 auto;
        justify-content: center;
        grid-template-columns: 1fr 400px 1fr;
        grid-template-areas:
        "leftCol preview rightCol"
        "ad ad ad"
    }
    .RightCol{
        height:auto;
    }
    .ad-slot-wrapper{margin-bottom: unset;}
}

.ControlButDiv{display:flex;flex-wrap: wrap;padding:0 10px;gap:12px;width:100%;}
.Group, .InnerGroup{width:100%;display: flex;font-size: 0.8rem;justify-content: space-between;align-items: center;}
.InnerGroup{width:unset;}


/* 1. Reset the base button style */
.GameButton {
  position: relative;
  width: 100%;
  border-radius: 8px;
  padding: 6px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent; /* The "placeholder" border */
  display: block;
  text-align: center;
  justify-content: center;
}
@media (hover: hover) {
    .GameButton:hover{
    transform: translateY(-1px);
    }
}
.GameButton.primary { background: #2563EB; color:white;  border: none;}
.GameButton.primary:hover { background: #1D4ED8;}

.GameButton.neutral {background: #F8FAFC; border: 1px solid #E2E8F0; color:#334155; box-shadow: none;}
.GameButton.neutral:hover {background: #F1F5F9;}

.GameButton.danger { background: #FEF2F2;  border: 1px solid #FCA5A5; color: #B91C1C;}
.GameButton.danger:hover {background: #FEE2E2;}

.GameButton.success {background: #059669; color: white; border: none;}
.GameButton.success:hover {background: #047857;}

#excelform{width:100%;display: flex;justify-content: space-between;}
 
#lbl_excel, #lbl_puzzle, #lbl_share, .ControlButDiv >span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748B;
}
#edg_saveFile, #edg_delFile, #edg_excelUpload, #edg_excelDownload, #shareOnFacebookApp, #shareOnWhatApp{width:calc(50% - 10px); padding:2px 0;}

/* Collapsible button groups */
.CollapsibleGroup {
    flex-direction: column;
    padding: 0;
    gap: 0;
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.CollapsibleGroup .CollapsibleHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 6px 10px;
    background: #f8fafc;
    border-radius: 6px;
    user-select: none;
}
.CollapsibleGroup.expanded .CollapsibleHeader { border-radius: 6px 6px 0 0; }
.CollapsibleGroup .CollapsibleHeader:hover { background: #f1f5f9; }
.CollapseArrow {
    font-size: 0.7em;
    color: #94a3b8;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.CollapsibleGroup.expanded .CollapseArrow { transform: rotate(180deg); }
.CollapsibleGroup .CollapsibleBody {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    flex-wrap: wrap;
    gap: 12px;
    padding: 6px 10px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 1px solid #f1f5f9;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.CollapsibleGroup.expanded .CollapsibleBody { display: flex; }

/* =========================================
    3. MOBILE TRANSFORMATIONS
    ========================================= */
@media (max-width: 850px) {
    .mobile-toggle { display: flex; }

    .LeftMenu {
        border-right: 1px solid #e2e8f0;
        padding: 1rem 0;
        position: fixed;
        top: 0;
        left: calc((var(--menu-width)*-1) - 10px); /* Hide off-screen */
        width: var(--menu-width);
        background: white;
        z-index: 2000;
        box-shadow: 5px 0 15px rgba(0,0,0,0.2);
        transition: 0.3s ease;
        height: 100%;           /* Fill the height */
        overflow-y: auto;       /* ENABLE SCROLLING */
    }

    .LeftMenu.open { left: 0; }
}

.SideBar {
    width: 300px;
    height: 600px;
    display: none; /* Hidden on mobile */
    margin: 0;
    top: 50px;
    position: sticky;
    align-self: flex-start;
    /* This is the magic line: */
    bottom: 110px;
}

@media (min-width: 800px) {
    .SideBar { display: inline-block; }
}

/* ==========================================================================
   4. HEADER & NAVIGATION
   ========================================================================== */
.header {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.header-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    
.Header h3{color:#000; font-size:1.45rem;}

.logo-group { display: flex; flex-direction: column; }
.logo-text { font-family: 'Segoe UI', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; }
.logo-text span{ color:#00f;}
.logo-text:hover { color: blue; }
.logo-slogan { font-size: 0.8rem; color: var(--slate-800); font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: 1rem; }

/* Search */
.search-wrapper {
    position: relative;
    display: none;
    align-items: center;
    width: fit-content;
}

/* Make the button transparent and position it */
.search-icon-btn {
    position: absolute;
    left: 5px;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: color 0.2s;
}

/* Hover effect for the icon button */
.search-icon-btn:hover {
    color: #3b82f6; /* Turns blue when hovered */
}
.search-input {
    background-color: #f3f4f6;
    border: 1px solid #cbd5e1;
    border-radius: 66px;
    padding: 8px 12px 8px 38px;
    font-size: 0.875rem;
    width: 200px;
    outline: none;
    transition: box-shadow 0.2s;
}
.search-input:focus { box-shadow: 0 0 0 2px #3b82f6; }
.search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.75rem; }

/* Nav Wrapper */
.nav-wrapper {
    position: relative;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    z-index: 10;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 25px;
}
.nav-wrapper::-webkit-scrollbar { display: none; }

.nav-container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.nav-list { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem 0; justify-content: space-between; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
    color: var(--txt-color);
    min-width: 137px;
}
.nav-item:hover { background-color: #e5e7eb; color: #111827; --txt-color: #111827; }
.nav-item.active { background-color: #dbeafe; color: #1d4ed8; --txt-color: #1d4ed8; }


/* User Config States */
#userConfig #logoutBut, #userConfig #settingBut, #userConfig #loginBut, #userConfig #joinBut { display: none; }
#userConfig.is-logged-out #loginBut, #userConfig.is-logged-out #joinBut { display: inline-block; }
#userConfig.is-logged-in #logoutBut, #userConfig.is-logged-in #settingBut { display: inline-block; }
#userName { max-width: 300px; display: none; }

/* Desktop Navigation Tweaks */
@media (min-width: 801px) {
    .header-container, .nav-container { padding: 0 1.5rem; }
    .nav-item { min-width: 24%; }
    .nav-wrapper { position: sticky; position: -webkit-sticky; top: 0; padding-bottom: unset; }
    #userName { display: inline-block; }
}

@media (min-width: 768px) {
    .search-wrapper { display: flex; }
    .logo-text { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
    .header-container, .nav-container { padding: 0 2rem; }
    .nav-item { min-width: unset; }
}


/* ==========================================================================
   5. HERO SECTION
   ========================================================================== */
.hero { padding: 0 0 4rem; background-color: var(--white); text-align: center; }
.Hero-Title { font-size: 1.8rem; font-weight: 900; line-height: 1.1; margin: 1rem 0 1.5rem; color: var(--slate-800); }
.Hero-Title span { color: #33e; }
.Hero-Subtitle { font-size: 1.25rem; color: var(--txtColor); margin: 0 20px 2.5rem; font-weight: 500; }
.Hero-Actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

@media (min-width: 768px) {
    .Hero-Title { font-size: 3.7rem; }
}

/* ==========================================================================
   MENU
   ========================================================================== */
/* The Main Sidebar Container */
.LeftMenu{background-color:  white;overflow-y: auto;
    padding: 0;
    box-sizing: border-box;
    /* Firefox */
    scrollbar-color: #007BFF #E0E0E0; /* thumb color, track color */
}


.LeftMenu::-webkit-scrollbar-track {
    background: #E0E0E0; /* track color */
    border-radius: 4px;
}

.LeftMenu::-webkit-scrollbar-thumb {
    background-color: #007BFF; /* thumb color */
    border-radius: 4px;
    border: 2px solid transparent; /* optional padding effect */
}

/* This targets every possible iteration of the scrollbar button */
.LeftMenu::-webkit-scrollbar-button,
.LeftMenu::-webkit-scrollbar-button:start,
.LeftMenu::-webkit-scrollbar-button:end,
.LeftMenu::-webkit-scrollbar-button:single-button,
.LeftMenu::-webkit-scrollbar-button:vertical:decrement,
.LeftMenu::-webkit-scrollbar-button:vertical:increment {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.MenuUl {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 2. Base Link Styles */
.MenuLi a, .MenuLi > a, .LeftMenuItem {
  display: block;
  padding: 0.2rem 1.5rem;
  font-size: 0.95rem;
  color: #334155;
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  cursor: pointer;
}

/* 3. HOVER EFFECT (Targeting links that are NOT active) */
.MenuLi a:not(.active):hover, 
.expandUl > a:not(.active):hover, 
.MenuLi > a:not(.active):hover, 
.LeftMenuItem:not(.active):hover {
  background-color: #f1f5f9;
  color: #2563eb;
  border-left: 5px solid #3b82f6;
  padding-left: 1.75rem;
}
.expandUl > li{list-style: none;}
.MenuLi:hover a{transform:scale(1,1);}
/* 4. ACTIVE STATE (The "You are here" look) */
.MenuLi a.active, 
.MenuLi > a.active, 
.LeftMenuItem.active {
  background-color: #eff6ff;
  color: #1e40af;
  font-weight: 700;
  border-left: 3px solid #1e40af;
  cursor: default; /* Tells user they can't click it again */
}

/* 5. Keep Category Headers Static */
.MenuCat {
  padding: 1.25rem 0.5rem 0.5rem 0.5rem;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 10;
}

.MenuCat a {
  font-family: 'Segoe UI', Roboto, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 2px;
}

/* Scannability Hack: Alternating slight tint for long lists */
.MenuLi:nth-child(even) .LeftMenuItem {
    background-color: rgba(248, 250, 252, 0.5);
}
@media (max-width: 1100px) {
    .MenuCat{top:-17px;}
}

/* =================================================
    GridLayout
   ================================================= */ 

.GridLayout{display: grid; gap: 1rem; width:100%;}
.Column2{grid-template-columns: repeat(2, 1fr);}
.Column3{grid-template-columns: repeat(3, 1fr);}
.Cell {display: block; padding: 1rem 1.25rem; border-radius: 8px; background-color: #ffffff; border: 1px solid  #dfe3e8; text-decoration: none; transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;}

.Cell:hover, .Cell:focus-visible {border-color: #2563eb; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);transform: translateY(-4px)}
.Cell .title {display: block; font-size: 1.15rem; font-weight: 600; color: #111827; margin-bottom: 0.5rem;}
.Cell .text {font-size: 0.95rem; color: #4b5563;}
.Cell::after {content: "→"; float: right; color: #9ca3af; transition: transform 0.2s ease, color 0.2s ease;}
.Cell:hover::after { transform: translateX(4px); color: #2563eb;}

@media only screen and (max-width: 600px) {
.Column2{grid-template-columns: repeat(1, 1fr);}
.Column3{grid-template-columns: repeat(1, 1fr);}
}

/* ==================================================================
    social media
   ================================================================= */
/* social media */
.share-container {background-color: #ffffff;padding: 10px;border-radius: 10px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-align: center; margin: 15px auto;}
.share-buttons {display: flex; flex-wrap: wrap;  gap: 15px; justify-content: center;}
.share-button {display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; color: white;
cursor: pointer; text-decoration: none; transition: background-color 0.3s ease, transform 0.2s ease; min-width: 125px; padding:10px 10px; height:30px;}
.share-button.facebook { background-color: #1877F2; }
.share-button.twitter { background-color: #1DA1F2; }
.share-button.linkedin { background-color: #0A66C2; }
.share-button.pinterest { background-color: #E60023; }
.share-button.whatsapp { background-color: #25D366; }
.share-button.email { background-color: #777777; } /* A general gray for email */
.share-button:hover {opacity: 0.9; transform: translateY(-2px);}
.share-button:active {transform: translateY(0);}
/* Basic icon styling (you'd typically use Font Awesome or similar) */
.share-button::before {content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 8px; background-size: contain; background-repeat: no-repeat; background-position: center;}
.share-button.facebook::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>'); }
.share-button.twitter::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22.46 6c-.85.38-1.76.64-2.72.76.97-.58 1.7-1.5 2.05-2.6-.9.53-1.9.91-2.96 1.11C18.23 3.84 17 3 15.65 3c-2.5 0-4.54 2.04-4.54 4.54 0 .36.04.7.12 1.03-3.78-.19-7.14-2-9.4-4.75-.4.69-.64 1.5-.64 2.45 0 1.57.8 2.96 2.02 3.77-.75-.02-1.46-.23-2.07-.57v.06c0 2.2 1.57 4.03 3.64 4.44-.38.1-.78.16-1.19.16-.29 0-.58-.03-.86-.08.57 1.8 2.24 3.1 4.22 3.13-1.56 1.22-3.53 1.95-5.67 1.95-.37 0-.74-.02-1.1-.06C2.65 20.3 5 21 7.4 21c8.84 0 13.67-7.3 13.67-13.67 0-.21-.01-.43-.01-.64.94-.67 1.76-1.51 2.42-2.47z"/></svg>'); }
.share-button.linkedin::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.447 2H3.553C2.693 2 2 2.693 2 3.553v16.894C2 21.307 2.693 22 3.553 22h16.894C21.307 22 22 21.307 22 20.447V3.553C22 2.693 21.307 2 20.447 2zM8 19H5V9h3v10zM6.5 7.75A1.25 1.25 0 1 1 6.5 5.25A1.25 1.25 0 0 1 6.5 7.75zM19 19h-3v-4.72c0-1.17-.43-1.66-1.28-1.66-.91 0-1.29.62-1.29 1.66V19h-3V9h3v1.31c.49-.78 1.4-1.31 2.87-1.31 2.07 0 3.63 1.13 3.63 4.31V19z"/></svg>'); }
.share-button.pinterest::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.17 2.422 7.776 5.882 9.472-.095-.79-.184-1.928.005-2.731.25-.992 1.6-6.797 1.6-6.797s-.407-.812-.407-2c0-1.895 1.096-3.313 2.454-3.313 1.156 0 1.714.869 1.714 1.905 0 1.157-.743 2.885-1.134 4.507-.315 1.34.673 2.44 2.01 2.44 2.41 0 4.275-3.057 4.275-6.688 0-2.887-2.08-4.992-5.07-4.992-3.877 0-6.155 2.924-6.155 5.922 0 1.162.444 2.428 1.002 3.125.109.136.12.247.08.384-.047.163-.153.626-.192.793-.058.26-.207.35-.46.242-1.656-.708-2.692-3.235-2.692-5.467 0-4.062 2.956-7.85 8.79-7.85 4.636 0 7.854 3.32 7.854 7.64 0 4.673-2.636 8.35-6.678 8.35-1.365 0-2.652-.705-3.1-1.579.006.012.016.03.027.042.342.193.682.385 1.042.585.116.066.21.135.293.21.054.048.11.096.166.143-.005.005-.005.008-.008.016a.48.48 0 0 1-.223.239c-.066.027-.13.048-.198.067-.066.018-.13.027-.194.027a.49.49 0 0 1-.223-.05.474.474 0 0 1-.21-.108c-.046-.048-.09-.104-.132-.164-.04-.055-.07-.113-.09-.168-.005-.01-.01-.02-.015-.025s-.012-.023-.016-.036z"/></svg>'); }
.share-button.whatsapp::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12.04 2c-5.45 0-9.91 4.46-9.91 9.91 0 1.63.4 3.16 1.17 4.54L2 22l5.77-1.52c1.3.73 2.76 1.13 4.27 1.13 5.45 0 9.91-4.46 9.91-9.91S17.49 2 12.04 2zm0 18.02c-1.35 0-2.64-.37-3.76-1.01l-.27-.16-2.88.76.77-2.81-.18-.28c-.68-1.12-1.04-2.42-1.04-3.79 0-4.5 3.65-8.15 8.15-8.15s8.15 3.65 8.15 8.15-3.65 8.15-8.15 8.15zm4.51-6.19c-.25-.12-.89-.44-1.29-.59-.39-.15-.68-.23-.97.23-.29.46-1.12.59-1.37.74-.25.15-.49.19-.92.06-.43-.12-1.83-.67-2.64-1.63-.67-.79-1.12-1.77-1.25-1.99-.12-.21-.01-.33.1-.44.09-.09.2-.23.29-.34.09-.12.12-.2.18-.33.06-.12.03-.23-.01-.34-.06-.12-.59-1.42-.81-1.93-.21-.51-.43-.44-.59-.44-.12 0-.25 0-.39.01-.15.01-.39.06-.59.27-.19.2-.74.72-.74 1.76 0 1.04.76 2.03.86 2.19.09.16 1.5.24 2.89-1.01 1.4-.89 2.11-2.48 2.37-2.73.26-.25.43-.21.58-.15.15.09.96.46 1.12.55.15.09.25.14.29.21.04.07.03.43-.22.88z"/></svg>'); }
.share-button.email::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 14H4V8l8 5 8-5v12z"/></svg>'); }

@media only screen and (min-width: 600px){
    .share-buttons{width:350px;}
}


/* ==========================================================================
   6. COMPONENTS (Grid, GBlock, Cards)
   ========================================================================== */
.mainBlock {
    display: flex;
    max-width: 1200px;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 15px;
}

.grid-container {
    display: grid;
    width: 100%;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, 292px));
    gap: 25px;
    padding: 15px;
    align-items: stretch;
}

#ads { grid-column: 1 / -1; width: 100%; }

.GBlock {
    text-decoration: none;
    border: 0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s;
}

.GBlock:hover { transform: translateY(-3px); }

.GBlock .Header {
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    margin-bottom: 1px;
    background-color: var(--card-color);
}
.GBlock .Header h3{width:unset;}

.GBlock .Content {
    position: relative;
    display: block;
    flex: 1;
    padding: 10px 10px 20px 10px;
    border: 1px solid var(--card-color);
    border-radius: 12px;
    color: var(--slate-700);
    background-color: color-mix(in srgb, var(--card-color), white 93%);
    overflow: hidden;
}
.GBlock .Scrollable {    display: flex;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 20px;}

.GBlock .Content::after {
    content: "Generate Worksheet →";
    display: block;
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-weight: 800;
    color: var(--card-color);
    filter: brightness(0.7);
    font-size: 0.9rem;
}

.GBlock:hover .Content, .GBlock:hover .Header { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1) !important; }
.GBlock:hover .Content { border-color: #3b82f6 !important; }
.MainCard .GBlock h3{ font-size: 1.45rem; font-weight: 600; color: #111; margin: 0;}
.MainCard .GBlock h4 { font-size: 1.15rem; font-weight: 600; color: #111; margin: 0 0 20px 0; }
.GBlock img { width: 80px; margin: 8px auto; }

/* Main Card */
.MainCard {
    width: 98%;
    max-width: 970px;
    margin: 0 auto 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid #e0e7ff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: var(--txtColor);
}

.MainCard .SectionTitle {
    display: block;
    width: 100%;
    padding: 0.5rem 0 0.5rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, #1e293b 0%, #3b82f6 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #2563eb 0%, #cbd5e1 100%) 1;
}

.MainCard .Content { display: flex; flex-direction: column; padding: 1rem; width: 100%; }
.MainCard h3 { font-size: 1.35rem; font-weight: 600; color: #4f46e5; margin: 0; width: 100%; }
.MainCard h4 { font-size: 1.15rem; font-weight: 500; color: #4f46e5; margin: 0; width: 100%; }
.MainCard p, .MainCard ul, .MainCard ol { margin: 0.5rem 0 1.4rem; }
.MainCard ul, .MainCard ol { padding-left: 15px; }

@media (min-width:768px){
    .MainCard .SectionTitle { font-size:2.2rem;
    }
}
/* Utilities */
.GradientBottom { border-bottom: 2px solid; border-image: linear-gradient(90deg, #c5d0e6 0%, #effeff 100%) 1; }

/* ==========================================================================
   7. UI ELEMENTS (Buttons)
   ========================================================================== */
.btn {
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-blue { background-color: var(--primary); color: var(--white); box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); }
.btn-green { background-color: #007700; color: var(--white); box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); }
.btn-blue:hover { background-color: var(--primary-dark); transform: translateY(-2px); }
.btn-green:hover { background-color:#005500; transform: translateY(-2px); }
.btn-gray { background-color: var(--slate-100); color: var(--slate-700); }
.btn-gray:hover { background-color: var(--slate-200); }

/* Header/Footer specific buttons */
.btn-text { font-size: 0.875rem; font-weight: 500; color: #4b5563; border: 0; cursor: pointer; padding: 0.5rem 0.75rem; border-radius: 0.375rem; transition: all 0.2s; }
.btn-text:hover { color: #2563eb; }
.btn-primary { background-color: #2563eb; color: #fff; font-size: 0.875rem; font-weight: 600; padding: 0.5rem 1rem; border: 0; border-radius: 0.5rem; cursor: pointer; transition: background 0.2s; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2); }
.btn-primary:hover { background-color: #1d4ed8; }


/* ==========================================================================
   8. PAGE SPECIFIC (Ads, FAQ)
   ========================================================================== */
.AdsColV2 { width: 300px; height: 100px; margin: 15px auto; }
.MobileBanner { display: block; width: 320px; height: 100px; }
.DesktopBanner { display: none; }

@media (min-width: 500px) {
    .MobileBanner { display: none; }
    .DesktopBanner { display: block; }
}
@media (min-width: 1280px) {
    .AdsColV2 { width: 100%; max-width: 970px; height: 90px; overflow: hidden; }
    .TogglePanel { display:none;}
}

/* FAQ */
.FAQ { width: 98%; margin: 2rem auto; display: flex; flex-direction: column; gap: 1rem; }
.FAQ h2 {
    display: block; width: 100%; padding: 0 0 1rem 1.5rem; font-size: 2.2rem; font-weight: 800; margin-bottom: 0.5rem;
    letter-spacing: -0.02em; background: linear-gradient(90deg, #1e293b 0%, #3b82f6 100%); background-clip: text;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    border-bottom: 1px solid; border-image: linear-gradient(90deg, #cfd2d8 0%, #ffffff 100%) 1;
}
/* Make the H3 behave like a normal line inside the summary */
.FAQ summary h3 {
    display: inline;   /* Keeps it on the same line as the arrow */
    font-size: 1.1rem; /* Adjust size to fit your design */
    margin: 0;         /* Removes the big gaps */
    cursor: pointer;
    width:100%;
}

/* Optional: Add a little hover effect */
.FAQ summary:hover h3 {
    color: #00f; /* Or your site's primary blue */
}
.FAQ details { background: #fff; border: 1px solid #e0e7ff; padding:0 1rem 1rem 1rem; border-radius: 0.75rem; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
.FAQ details:nth-child(even) { background: var(--slate-100); }
.FAQ details:hover { border-color: #3b82f6; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

.FAQ summary { padding: 0.75rem 0 0 0; font-weight: 700; color: #1e293b; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.FAQ summary::-webkit-details-marker { display: none; }
.FAQ summary::after { content: "+"; font-size: 1.5rem; color: #3b82f6; transition: transform 0.3s ease; }
.FAQ details[open] summary::after { transform: rotate(45deg); color: #ef4444; }
.FAQ details div { padding: 0 1.5rem 1.25rem 1.5rem; color: #4b5563; line-height: 1.6; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.footer-main { background-color: #111827; color: #9ca3af; padding: 3rem 0; }
.footer-container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.footer-brand { color: #fff; font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; letter-spacing: -0.025em; }
.footer-description { max-width: 24rem; line-height: 1.625; }
.footer-heading { color: #fff; font-weight: 600; margin-bottom: 1rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.75rem; }
.footer-link { color: inherit; text-decoration: none; transition: color 0.2s; }
.footer-link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit; /* Inherits the font-size and family from the parent */
    color: inherit; /* Inherits the color from .footer-link */
    cursor: pointer;
    text-decoration: none;
}

.footer-link:hover, .footer-link-button:hover { color: #fff; }

.footer-button {
    background-color: #f59e0b; color: #111827; font-weight: 700; padding: 0.625rem 1.5rem;
    border-radius: 9999px; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.footer-button:hover { background-color: #d97706; transform: scale(1.05); }

.footer-bottom { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #1f2937; text-align: center; font-size: 0.875rem; }

@media (min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(4, 1fr); }
    .span-2 { grid-column: span 2 / span 2; }
}
/* ── Mobile Read-more Accordion ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .Accordion {
        max-height: 5em;
        overflow: hidden;
        position: relative;
        transition: max-height 0.4s ease;
    }
    /* Fade-out gradient at bottom of collapsed block */
    .Accordion::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 3em;
        background: linear-gradient(to bottom, transparent, #fff);
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .Accordion.expanded::after { opacity: 0; }

    .accordion-btn {
        display: flex;
        align-items: center;
        gap: 0.35em;
        background: none;
        border: 1.5px solid var(--primary, #3b82f6);
        border-radius: 20px;
        color: var(--primary, #3b82f6);
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        margin: 0.5rem 0 0.75rem;
        padding: 0.3em 0.9em;
    }
    .accordion-btn .acc-arr {
        display: inline-block;
        font-size: 0.7em;
        transition: transform 0.35s ease;
    }
    .accordion-btn.open .acc-arr { transform: rotate(180deg); }
}
@media (min-width: 768px) {
    .accordion-btn { display: none; }
}
/* AccordionAll — collapses on all screen sizes */
.AccordionAll {
    max-height: 5em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
}
.AccordionAll::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3em;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.AccordionAll.expanded::after { opacity: 0; }
.accordion-btn--all {
    display: flex;
    align-items: center;
    gap: 0.35em;
    background: none;
    border: 1.5px solid var(--primary, #3b82f6);
    border-radius: 20px;
    color: var(--primary, #3b82f6);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0.5rem 0 0.75rem;
    padding: 0.3em 0.9em;
}
.accordion-btn--all .acc-arr {
    display: inline-block;
    font-size: 0.7em;
    transition: transform 0.35s ease;
}
.accordion-btn--all.open .acc-arr { transform: rotate(180deg); }

.MobileToggle{display:none;}
@media (min-width: 768px) {
    .MobileToggle{display:flex;}
}