/*
© Scoryx.com (2024-2025)
It is strictly prohibited to copy any part of the code.
To learn more, Please read the Terms of Service and Privacy Policy
Developed by Mark Solovyov & Scoryx Ltd
*/

.cf-turnstile {
  display: flex;
  justify-content: center;  /* horizontally center its contents */
  width: 100%;
  margin-bottom: var(--gap-md);
}

@font-face {
    font-family: 'es_buildregular';
    src: url('/assets/fonts/es_build-webfont.woff2') format('woff2'),
         url('/assets/fonts/es_build-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'es_buildmedium';
    src: url('/assets/fonts/es_build_medium-webfont.woff2') format('woff2'),
         url('/assets/fonts/es_build_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*───────────────────────────────────────────────────────────────────────────────
  FUTURISTIC, TECH-ORIENTED, PURPLE THEME — RESPONSIVE BASE STYLESHEET
───────────────────────────────────────────────────────────────────────────────*/

/* 1. CSS VARIABLES & RESET */
:root {
  /* Brand Colors */
  --color-bg:       #111;           /* Dark background */
  --color-text:     #e0e0e0;        /* Light text */
  --color-primary:  #9B59B6;        /* Purple accent */
  --color-secondary:#8E44AD;        /* Darker purple */
  --color-grad1:    #2a043c;
  --color-grad2:    #0d0115;
  --color-hover:    #A66BBE;        /* Lighter on hover */
  --color-foot:     #1f2228;
  --color-wow:      #22272e;
  --color-border:   #333;           /* Subtle border */
  --color-transp: rgba(0, 0, 0, 0.65);
  --color-transp-two: rgb(26, 26, 26, 0.65);
  
  /*intensity*/
  --color-daisy-bush-50: #f6f3ff;
  --color-daisy-bush-100: #eee9fe;
  --color-daisy-bush-200: #dfd6fe;
  --color-daisy-bush-300: #c8b6fc;
  --color-daisy-bush-400: #ae8cf9;
  --color-daisy-bush-500: #955ef4;
  --color-daisy-bush-600: #873ceb;
  --color-daisy-bush-700: #772ad7;
  --color-daisy-bush-800: #5f21ac;
  --color-daisy-bush-900: #531e94;
  --color-daisy-bush-950: #331164;

  /* https://www.hover.dev/css-color-palette-generator */
  --primary: #5f21ac;
  --primary-content: #e4d5f7;
  --primary-dark: #471981;
  --primary-light: #772ad6;
  --primary-hover: #843fda;

  --accent: #a421ac;
  --accent-content: #f5d5f7;
  --accent-dark: #7b1981;
  --accent-light: #cc2ad6;

  --secondary: #6eac21;
  --secondary-content: #000000;
  --secondary-dark: #538119;
  --secondary-light: #89d62a;

  --trietary: #21aca4;
  --trietary-content: #000000;
  --trietary-dark: #19817b;
  --trietary-light: #2ad6cc;

  --background: #19151e;
  --foreground: #26202d;
  --border: #3f354b;

  --copy: #fbfbfc;
  --copy-light: #d8d2df;
  --copy-lighter: #a496b5;

  --success: #21ac21;
  --warning: #acac21;
  --error: #ac2121;
  --error-secondary: #fc4343;
  --success-content: #d5f7d5;
  --warning-content: #000000;
  --error-content: #f7d5d5;

  /* Gradients */
  --gradient-purple: linear-gradient(90deg, #0e042a, #21003e);
  --why: rgba(30, 30, 42, 0.6);

  --gradient-h1: linear-gradient(
    90deg,
    var(--accent-light) 0%,
    var(--trietary-light) 50%,
    var(--secondary-light) 100%
  );

  /* --background: linear-gradient(to left, rgb(95, 31, 171, 0.65), rgb(37, 2, 92, 0.65));  */
  --shadow-global: 8px 8px 15px rgba(0, 0, 0, 0.2), -8px -8px 15px rgba(255, 255, 255, 0.05);
  --blur-global: blur(8px);

  /* Typography */
  --font-base:      "es_buildregular", 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:      'Courier New', Courier, monospace;

  /* Spacing */
  --gap-no:         0;
  --gap-hsm:        4px;
  --gap-sm:         8px;
  --gap-md:         16px;
  --gap-lg:         24px;
  --max-width:      1200px;

  /* Borders */
  --border-no:      0;
  --border-ha:      0.5px;
  --border-sm:      1px;
  --radius:         6px;            /* Global border-radius */
  --radius-do:      12px;

}

/* Box-sizing & margin reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* HTML and body defaults */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--trietary) var(--trietary-content); /* thumb color then track color */
}

body {
  background: var(--gradient-purple);
  /* background: #111; */
  color: var(--color-text);
  font-family: var(--font-base);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Remove list styles */
ul, ol {
  list-style: none;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
a:hover {
  color: var(--color-hover);
}

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

/* Utility classes */
.hide {
  display: none !important;
}
.text-center {
  text-align: center;
}

/*───────────────────────────────────────────────────────────────────────────────
  2. TYPOGRAPHY
───────────────────────────────────────────────────────────────────────────────*/

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  margin-bottom: var(--gap-sm);
  font-weight: 550;
  line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

h1 {
  background: var(--gradient-h1);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Paragraphs & spans */
p {
  margin-bottom: var(--gap-md);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 400;
}
span {
  color: var(--color-text);
  font-weight: 400;
}

/* Small text */
small {
  font-size: 0.875rem;
  color: #bbb;
}

/*───────────────────────────────────────────────────────────────────────────────
  3. STICKY HEADER
───────────────────────────────────────────────────────────────────────────────*/

.header {
  position: sticky;
  height: 50px;                   /* pick whatever you like */
  top: 0;
  width: 100%;
  background-color: var(--color-transp);
  backdrop-filter: saturate(180%) var(--blur-global);
  -webkit-backdrop-filter: saturate(180%) var(--blur-global);
  color: var(--color-text);
  padding: var(--gap-no) var(--gap-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Example: logo on the left, nav on the right */
.header .logo {
  height: 26px;
  display: flex;
  align-items: center;
}

.header nav {
  display: flex;
  height: 100%;
}

.header nav a {
  display: flex;
  align-items: center;
  height: 100%;                   /* now equals 64px */
  padding: 0 var(--gap-md);       /* only horizontal padding */
  border-radius: 0;               /* perfect rectangle */
  color: var(--primary-content);
  transition: background-color 0.2s;
}

.header nav a:hover {
  background-color: rgba(255,255,255,0.1);
}


.menu-mobile img {
    height: 26px; /* Adjust height if needed */
    width: auto;
    display: block;
}

/* Mobile Menu */
.menu-desktop {
    display: flex;
    gap: 0px;
    height: 100%;
}

.menu-mobile {
    display: none;
    cursor: pointer;
    align-items: center;
    height: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu-desktop {
        display: none;
    }
    .menu-mobile {
        display: flex;
    }
}

/* Mobile Menu Dropdown */
.menu-mobile-dropdown {
    display: none;
    position: fixed;
    top: 50px; /* Below the header */
    right: 0;
    width: 200px;
    background-color: var(--color-transp);
    backdrop-filter: saturate(180%) var(--blur-global);
    -webkit-backdrop-filter: saturate(180%) var(--blur-global);
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
    color: var(--color-text);
    z-index: 1001;
    overflow: hidden;
}

.menu-mobile-dropdown .menu-item {
    display: block;
    padding: 10px 15px;
    text-align: left;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.3s ease;
}

.menu-mobile-dropdown .menu-item:hover {
  background-color: rgba(255,255,255,0.1);
}

/* Active State */
.menu-mobile-dropdown-active {
  display: block;
}


/*───────────────────────────────────────────────────────────────────────────────
  4. FOOTER
───────────────────────────────────────────────────────────────────────────────*/

/* Use <footer class="footer">…</footer> at the bottom */
.footer {
  margin-top: auto; /* Push footer to bottom if content is short */
  background-color: var(--color-transp);
  color: var(--color-text);
  padding: var(--gap-sm) var(--gap-md);
  text-align: center;
  font-size: 0.9rem;
}
.footer a {
  color: var(--color-primary);
}
.footer a:hover {
  color: var(--accent-content);
}

.footer p {
  margin-bottom: var(--gap-no);
}

/*───────────────────────────────────────────────────────────────────────────────
  5. MAIN CONTAINER LAYOUTS
───────────────────────────────────────────────────────────────────────────────*/

/* Generic content wrapper */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: auto;
  padding: var(--gap-lg) 0;
}

/* Centered single-column form or content */
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 200px); /* deduct header+footer approx. */
  padding: var(--gap-lg);
  z-index: 3;
}
.form-container > * {
  width: 100%;
  max-width: 500px;
  background-color: #1a1a1a;
  padding: var(--gap-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-do);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Full-page informational layout */
.page-info {
  padding: var(--gap-lg) var(--gap-lg);
  background-color: var(--color-transp);
  border-radius: var(--radius-do);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/*───────────────────────────────────────────────────────────────────────────────
  6. LOGIN BACKGROUND & FORM
───────────────────────────────────────────────────────────────────────────────*/

/* the animated shapes container sits behind the form */
.login-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* base shape */
.login-bg .shape {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(45deg, var(--primary-dark), var(--primary));
  background-image: -webkit-linear-gradient(left top, var(--primary-dark), var(--primary));
  background-image: linear-gradient(45deg, var(--primary-dark), var(--primary));
  color: var(--primary-content);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  /* fixed the animation shorthand: remove the stray "twenty-five" */
  animation: float 10s ease-in-out infinite;
}

/* outlined variants */
.login-bg .shape.outlined {
  background: transparent;
  border: 2px solid rgba(95, 33, 172, 0.6);
}

/* individual positions & timing */
.shape1 { top: 8%; left: 15%; animation-duration: 22s; animation-delay:  0s; }
.shape2 { top: 30%; left: 75%; animation-duration: 28s; animation-delay:  3s; }
.shape3 { top: 65%; left: 50%; animation-duration: 24s; animation-delay:  6s; }
.shape4 { top: 80%; left: 20%; animation-duration: 26s; animation-delay:  9s; }
.shape5 { top: 50%; left: 10%; animation-duration: 30s; animation-delay: 12s; }
.shape6 { top: 20%; left: 60%; animation-duration: 27s; animation-delay: 15s; }
.shape7 { top: 75%; left: 80%; animation-duration: 23s; animation-delay: 18s; }

/* gentle float + rotate */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-20px); }
}

.glow {
  position: fixed;
  bottom: 0;           /* flush to viewport bottom */
  left: 50%;           /* center horizontally */
  width: 80vmin;       /* keep it square */
  height: 80vmin;      /* matching width */
  transform: translateX(-50%) rotate(-45deg);
  background: radial-gradient(
    circle at bottom left,
    #e6b7fe 10%,
    #5049c2 20%,
    rgba(87, 78, 255, 0) 60%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.particles {
  position: fixed;
  bottom: -20%;           /* stick to the bottom */
  left: 50%;           /* start centering from 50% */
  transform: translateX(-50%);  /* shift back by half its width */
  width:  auto;
  height: clamp(200px, 80vmin, 600px);
  z-index: 1;          /* above glow */
}

.login-form {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 200px); /* deduct header+footer approx. */
  padding: var(--gap-lg);
  z-index: 3;
}

.login-form > * {
  width: 100%;
  max-width: 500px;
  padding: var(--gap-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-do);
  background: var(--color-transp);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.login-form h2 {
  margin-bottom: 1rem;
  color: #FAE6FC;
}
.login-form input {
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  border: none;
  border-radius: 6px;
  background: #1E1E2A;
  color: #E6E6E6;
}
.login-form button {
  width: 100%;
  border: none;
  border-radius: 6px;
  background: #5F21AC;
  color: #FAE6FC;
  font-size: 1rem;
  cursor: pointer;
  margin-bottom: var(--gap-md);
}
.login-form button:hover {
  background: #843fda;
}

/*──────────────────────────────────────────────────────────────
  7. SETTINGS PAGE LAYOUT (VERTICAL TABS + CONTENT AREA)
──────────────────────────────────────────────────────────────*/

/* 1a. Container that wraps sidebar + content */
.settings-container {
  display: flex;
  width: 90%;
  max-width: var(--max-width);
  margin: var(--gap-lg) auto;
  background-color: var(--why);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden; /* keep everything inside rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 1b. Sidebar (tabs) on the left */
.settings-sidebar {
  width: 240px; /* fixed width */
  background-color: var(--trietary-dark);
  border-right: 1px solid var(--color-border);
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* Remove default list styles and make it full height */
.settings-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

/* Each tab link */
.settings-sidebar li a {
  display: block;
  padding: var(--gap-sm) var(--gap-md);
  color: var(--color-text);
  border-radius: var(--radius);
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover state for tabs */
.settings-sidebar li a:hover {
  background-color: var(--trietary-light);
  color: #fff;
}

/* Active tab */
.settings-sidebar li a.active {
  background-color: var(--color-primary);
  color: #fff;
}

/* If you want an icon next to text, you can do:
   <a href="#"><i class="icon-class"></i>Profile</a>
   And then adjust spacing via .settings-sidebar li a i { margin-right: var(--gap-sm); }
*/

/* 1c. Content area on the right */
.settings-content {
  flex: 1; /* take remaining width */
  padding: var(--gap-lg);
  color: var(--color-text);
}

/* 1d. Heading inside content */
.settings-content h2 {
  margin-bottom: var(--gap-md);
  color: var(--color-primary);
}

/* 1e. Form inside content (example fields) */
.settings-form label {
  display: block;
  margin-bottom: var(--gap-sm);
  font-size: 0.95rem;
  color: var(--color-text);
}

.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="password"],
.settings-form select {
  width: 100%;
  background-color: #222;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--gap-sm) var(--gap-md);
  margin-bottom: var(--gap-md);
  font-size: 1rem;
  color: var(--color-text);
}

.settings-form button {
  margin-top: var(--gap-md);
}

/*──────────────────────────────────────────────────────────────
  8. RESPONSIVE ADJUSTMENTS
──────────────────────────────────────────────────────────────*/

/* On small screens, stack sidebar above content and make tabs scrollable */
@media (max-width: 768px) {
  .settings-container {
    flex-direction: column;
  }

  .settings-sidebar {
    width: 100%;
    display: flex;
    overflow-x: auto;
    padding: var(--gap-sm);
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .settings-sidebar ul {
    display: flex;
    flex-direction: row;
    gap: var(--gap-sm);
  }

  .settings-sidebar li {
    flex: 0 0 auto;
  }

  /* Horizontal tab links */
  .settings-sidebar li a {
    padding: var(--gap-sm) var(--gap-md);
    white-space: nowrap;
  }

  .settings-content {
    padding: var(--gap-md);
  }
}

/*───────────────────────────────────────────────────────────────────────────────
  9. WOW CONTAINER
───────────────────────────────────────────────────────────────────────────────*/
/* html, body {
  background: #1f2228;
  margin: 0;
  height: 100%;
} */

.wow-background {
  position: relative;
  width: 400px;
  height: 200px;
  margin: 40px auto;
}
.wow-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    141.53% 114.68% at 87.46% 55.27%,
    #9A7CFF 36.75%,
    rgba(14, 10, 162, 0) 100%
  );
  filter: blur(42px);
  opacity: .85;
  z-index: 0;
}

.wow-background > div.overlay-1,
.wow-background > div.overlay-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.wow-background > div.overlay-1 {
  background: linear-gradient(
    180deg,
    rgba(39, 50, 231, 0) 57.46%,
    rgba(95, 237, 131, 0.5) 112.96%
  );
}

.wow-background > div.overlay-2 {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 47.42%,
    rgba(14, 10, 162, 0.5) 104.56%
  );
  mix-blend-mode: plus-lighter;
}

.wow-frost {
  position: relative;
  z-index: 2;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  background: rgba(31, 34, 40, 0.4);
  backdrop-filter: blur(42px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wow-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;              /* padding comes from .bento-box */
  background: var(--color-wow);      /* mask color */
  border-radius: inherit;
  text-align: center;
  color: #fff;
}

/*───────────────────────────────────────────────────────────────────────────────
  10. BENTO-BOX DASHBOARD
───────────────────────────────────────────────────────────────────────────────*/

.dashboard {
  display: grid;
  /* six equal columns */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* rows will auto-size by content */
  grid-auto-rows: minmax(100px, auto);
  gap: var(--gap-sm);
  width: 100%;
  margin: var(--gap-lg) auto;
}

/* optional size modifiers */
.dashboard .wide   { grid-column: span 4; grid-row: span 2; }
.dashboard .tall   { grid-column: span 2; grid-row: span 2; }
.dashboard .large  { grid-column: span 3; grid-row: span 2; }
.dashboard .small  { grid-column: span 1; }
.dashboard .medium { grid-column: span 3; grid-row: span 2; }
.dashboard .extra  { grid-column: span 3; }
.dashboard .last  { grid-column: span 2; }

/* Individual box inside dashboard */
.box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* anchor everything at the top */
  gap: var(--gap-md);            /* uniform spacing between children */
  background-color: var(--color-transp);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-do);
  padding: var(--gap-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.box:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

/* Example box header/title */
.box h3 {
  margin-bottom: var(--gap-sm);
  font-size: 1.25rem;
  color: var(--color-primary);
}
.box p {
  flex-grow: 1;
  font-size: 0.9rem;
  margin-bottom: var(--gap-md);
  color: var(--color-text);
}
.box .box-footer {
  margin-top: auto;
  text-align: right;
}

.box-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.box-list li {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-sm);
}
.box-list li:last-child {
  margin-bottom: 0;
}
.box-list li img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.box-list li a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s;
}
.box-list li a:hover {
  color: var(--color-primary);
}

/* 1. Round the profile image */
.profile-photo {
  width: 120px;               /* match your inline dimensions */
  height: 120px;
  border-radius: var(--radius-do);
  object-fit: cover;
}

/* 2. Stack stats vertically */
.profile-stats {
  display: inline-flex;
  flex-direction: column;
  margin-top: var(--gap-sm);
}

/* 3. Base stat styling */
.profile-stats .stat {
  color: var(--color-text);
}

/* 4. “From: flag country” stays on one line */
.profile-stats .stat-location {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
}

/* 5. Make the flag icon a consistent size */
.profile-stats .stat-location img {
  width: auto;
  height: 16px;
}

/* make header row flex */
.profile-header {
  display: flex;
  gap: var(--gap-md);
  margin-bottom: var(--gap-sm);
}

/* right‐side info takes remaining space */
.profile-info {
  flex: 1;
}

/* list of links sits below header */
.box-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* NEW badge pill */
.badge-new {
  display: inline-block;
  margin-left: var(--gap-sm);
  padding: 2px 6px;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--primary-light);
  border-radius: var(--radius-do);
}

.badge-pro {
  display: inline-block;
  margin-left: var(--gap-sm);
  padding: 2px 6px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-content);
  background-color: var(--accent);
  border-radius: var(--radius-do);
}

/* ALERT “badge” for notifications */
.badge-alert {
  display: inline-block;
  margin-left: var(--gap-sm);
  padding: 2px 6px;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--error-content);       /* e.g. very light text */
  background-color: var(--error);    /* e.g. #ac2121 */
  border-radius: var(--radius-do);
}

/*───────────────────────────────────────────────────────────────────────────────
  11. BUTTONS
───────────────────────────────────────────────────────────────────────────────*/

/* Default button style */
.btn {
  display: inline-block;
  background-color: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  /* make the button a known height so line-height can center your icon/text */
  height: 36px;                  /* pick whatever total height you want */
  line-height: 36px;             /* match this to the height */
  padding: 0 var(--gap-md);      /* vertical padding is baked into your height now */
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;            /* center text if you ever give it a fixed width */
  vertical-align: middle;        /* if you stack multiple buttons side by side */
}

.btn img {
  display: inline-block;         /* participate in the line-box */
  vertical-align: middle;        /* sit in the exact middle of that 36px line-box */
  width: 22px;
  height: 22px;
  margin: 0 0 4px 0;
}

.btn.disabled {
  opacity: 0.5;
  pointer-events: none;    /* prevent clicks */
  cursor: not-allowed;
}

.btn:hover {
  background-color: var(--primary-hover);
}
.btn:active {
  transform: translateY(1px);
}
.btn-secondary {
  background-color: var(--color-secondary);
}
.btn-secondary:hover {
  background-color: var(--color-hover);
}
.btn-error {
  background-color: var(--error);
}
.btn-error:hover {
  background-color: var(--error-secondary);
}
.btn-ok {
  background-color: var(--trietary);
}
.btn-ok:hover {
  background-color: var(--trietary-light);
}


/* Icon button (if you include an <i> or <svg> inside) */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
}

/*───────────────────────────────────────────────────────────────────────────────
  12. FORM ELEMENTS
───────────────────────────────────────────────────────────────────────────────*/

/* Text inputs, selects, textareas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%;
  background-color: #222;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--gap-sm) var(--gap-md);
  margin-bottom: var(--gap-md);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder,
textarea::placeholder {
  color: #777;
}

/* Focus styles */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(155,89,182, 0.3);
}

/* Checkbox & radio wrappers */
.checkbox-group,
.radio-group {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-md);
}
input[type="checkbox"],
input[type="radio"] {
  width: 1em;
  height: 1em;
  accent-color: var(--color-primary);
}

/* Label styling */
label {
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: var(--gap-sm);
  display: block;
}

/*───────────────────────────────────────────────────────────────────────────────
  13. TABLES
───────────────────────────────────────────────────────────────────────────────*/
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--gap-lg);
}

table td img {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--gap-hsm);    /* a little breathing room */
}

table th, table td {
  padding: 0 var(--gap-hsm);
  border: 1px solid var(--trietary-dark);
  text-align: left;
}

.flex-container {
  display: flex;
  gap: var(--gap-sm);
}
.flex-column {
  flex: 1;
}
@media (max-width: 768px) {
  .flex-container {
      flex-direction: column;
  }
}



.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--gap-lg);
}
.styled-table th, .styled-table td {
  padding: var(--gap-hsm);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-align: left;
}
.styled-table th {
  background-color: var(--trietary-dark);
  font-weight: 400;
}

/* 1) Zebra striping (unchanged) */
.styled-table tbody tr:nth-child(odd)   td { background-color: rgba(44,44,44,0.7);  }
.styled-table tbody tr:nth-child(even)  td { background-color: rgba(28,28,28,0.7);  }

/* 2) Row highlight on hover — pure CSS */
.styled-table tbody tr:hover td {
  background-color: var(--accent-dark);
}

/* 3) Column highlight via JS adds/removes this class */
.styled-table td.col-hover,
.styled-table th.col-hover {
  background-color: var(--accent-dark);
}

/* 4a) Column highlight on <td> cells */
.styled-table tbody tr td.col-hover {
  background-color: var(--accent-dark);
}

/* 4b) Column highlight on <th> cells */
.styled-table thead tr th.col-hover {
  background-color: var(--trietary-light);
  color: var(--trietary-content);
}

.table-wrapper {
  overflow: auto;
  max-width: 100%;
  max-height: 80vh;    /* or whatever fits your layout */
}

.styled-table thead th {
  position: sticky;
  top: 0;
  background: var(--trietary-dark);
  z-index: 2;         /* sit above body rows */
}

/* if you turn the first cell of each row into a <th scope="row">… */
.styled-table tbody th {
  position: sticky;
  left: 0;
  background: var(--foreground);
  z-index: 1;         /* below the header row */
}

/*───────────────────────────────────────────────────────────────────────────────
 14. MEDIA QUERIES (RESPONSIVE ADJUSTMENTS)
───────────────────────────────────────────────────────────────────────────────*/

/* Reduce padding on very small screens */
@media (max-width: 480px) {
  .container {
    width: 95%;
  }
  .form-container > * {
    padding: var(--gap-md);
  }
  .dashboard {
    gap: var(--gap-sm);
  }
}

/*───────────────────────────────────────────────────────────────────────────────
 15. UTILITY & OVERLAY CLASSES
───────────────────────────────────────────────────────────────────────────────*/

/* Fullscreen overlay (e.g., loading or modals) */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* Simple grid helper if you need custom layouts */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
}

/*───────────────────────────────────────────────────────────────────────────────
  16. MODAL / POP-UP
───────────────────────────────────────────────────────────────────────────────*/

/* 14.1 Overlay behind the modal */
.modal-overlay {
  position: fixed;
  inset: 0;                                    /* top:0; right:0; bottom:0; left:0; */
  background-color: rgba(0, 0, 0, 0.6);        /* semi-opaque black */
  backdrop-filter: blur(8px);                  /* subtle background blur */
  z-index: 1500;                               /* above everything else */
  display: none;                               /* show via .is-active */
  align-items: center;                         /* center modal */
  justify-content: center;
}

/* helper to toggle visibility */
.modal-overlay.is-active {
  display: flex;
}

/* 14.2 The modal window */
.modal {
  background-color: var(--color-foot);         /* dark panel */
  color: var(--color-text);
  width: 90%;
  max-width: 500px;
  border-radius: var(--radius-do);
  box-shadow: var(--shadow-global);
  overflow: hidden;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* animate in when parent overlay gets .is-active */
.modal-overlay.is-active .modal {
  transform: translateY(0);
  opacity: 1;
}

/* 14.3 Modal header */
.modal-header {
  padding: var(--gap-md) var(--gap-lg);
  background: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* title */
.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #fff;
}

/* close “×” button */
.modal-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

/* 14.4 Modal body */
.modal-body {
  padding: var(--gap-lg);
  font-size: 1rem;
  line-height: 1.5;
}

/* 14.5 Modal footer (optional buttons) */
.modal-footer {
  padding: var(--gap-md) var(--gap-lg);
  background: var(--color-foot);
  text-align: right;
}
.modal-footer .btn {
  margin-left: var(--gap-sm);
}

/*───────────────────────────────────────────────────────────────────────────────
  END OF STYLESHEET
───────────────────────────────────────────────────────────────────────────────*/

.meow {
  background: linear-gradient(0deg, #5993d4 0%, rgba(120, 115, 203, 0.2) 40%);
}

/*───────────────────────────────────────────────────────────────────────────────
  RESPONSIVE DASHBOARD BREAKPOINTS
───────────────────────────────────────────────────────────────────────────────*/

/* Desktop: six columns (your default) */

/* Tablet: two columns */
@media (max-width: 1100px) {
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
  }

  /* force every box to one column, one row */
  .dashboard .wide,
  .dashboard .tall,
  .dashboard .large,
  .dashboard .medium,
  .dashboard .small,
  .dashboard .extra,
  .dashboard .last {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/* Phablet / large phone: one primary column + smaller second */
@media (max-width: 900px) {
  .dashboard {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Mobile: single column, full bleed */
@media (max-width: 480px) {
  .dashboard {
    grid-template-columns: 1fr;
    gap: var(--gap-md);
  }
  .box {
    padding: var(--gap-md);
  }
}

@media (max-width: 900px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  /* force every box to one column, one row */
  .dashboard .wide,
  .dashboard .tall,
  .dashboard .large,
  .dashboard .medium,
  .dashboard .small,
  .dashboard .extra,
  .dashboard .last {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/*───────────────────────────────────────────────────────────────────────────────
  DISABLED STATE (links, buttons, etc.)
───────────────────────────────────────────────────────────────────────────────*/
.disabled {
  opacity: 0.5;            /* dim it */
  pointer-events: none;    /* prevent clicks */
  cursor: not-allowed;     /* show disabled cursor */
}

/* if you want to specifically target links */
a.disabled {
  color: var(--copy-light);  /* lighter text for links */
  text-decoration: none;     /* remove underlines */
}

a.premium {
  cursor: not-allowed;
  color: var(--accent-light) !important;     /* pick a lighter/“disabled” shade */
  text-decoration: none;
  opacity: 0.5;
}

a.premium:hover {
  opacity: 1;
}

/* reuse your tooltip rules on this selector */
a.premium::after {
  content: attr(data-title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease-in-out;
  z-index: 10;
}

a.premium:hover::after {
  opacity: 1;
}

/*───────────────────────────────────────────────────────────────
  SCOREBOARDS PORTAL ACTIONS GRID
───────────────────────────────────────────────────────────────*/
.portal-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}

.portal-actions .box {
  position: relative;
  overflow: hidden;
}

/* 2) Base styles for the decorative SVG */
.portal-actions .box::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* we’ll let the mask handle our opacity-fade */
  opacity: 1;
  
  /* fade from transparent at top-left → opaque at bottom-right */
  mask-image: linear-gradient(
    to bottom right,          /* direction */
    transparent 0%,           /* at the “start” (top-left) */
    black       100%          /* at the “end” (bottom-right) */
  );
  mask-size: 100% 100%;
  mask-repeat: no-repeat;

  /* WebKit prefixed for Safari support */
  -webkit-mask-image: linear-gradient(to bottom right, transparent 0%, black 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

/* 3) Ensure box content sits above the SVG */
.portal-actions .box > * {
  position: relative;
  z-index: 1;
}

/* 4) Assign a different SVG to each box */
.portal-actions .box:nth-child(1)::before {
  background-image: url("/icons/new/create.svg");
  bottom: -10%;
  right: -10%;
}
.portal-actions .box:nth-child(2)::before {
  background-image: url("/icons/new/import.svg");
  bottom: -10%;
  right: -10%;
}
.portal-actions .box:nth-child(3)::before {
  background-image: url("/icons/new/scoreboards.svg");
  bottom: -10%;
  right: -10%;
}

table.portal {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: none; 
}

table.portal th {
  padding-bottom: var(--gap-sm);
}

table.portal th,
table.portal td {
  border: none;
  padding: 3px var(--gap-sm);
  border-bottom: 0.5px solid var(--trietary-light);
}

table.portal img {
  width: 26px;
  height: auto;    /* preserves aspect ratio */
  display: inline-block;
  margin: var(--gap-no) 2px;
}

table.portal h5 {
  margin-bottom: var(--gap-no);
}

.container .note {
  color: #888888;
}

.admin-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}

.admin-actions .box {
  position: relative;
  overflow: hidden;
}


/* ─── Scoreboard “Explore” layout ───────────────────────────────── */

.scoreboard-explore {
  display: flex;
  gap: var(--gap-lg);
}

/* left column: two stacked boxes */
.scoreboard-explore .explore-left {
  flex: 1;                          /* take twice the width of the right */
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* right column: result pane, spans full height */
.scoreboard-explore .explore-right {
  flex: 2;                          /* take the remaining space */
}

/* ─── Mobile “Explore” tweaks ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* stack left + right */
  .scoreboard-explore {
    flex-direction: column;
    gap: var(--gap-md);
  }

  /* force each column to fill width */
  .scoreboard-explore .explore-left,
  .scoreboard-explore .explore-right {
    flex: none;
    width: 100%;
  }

  /* make your left-side boxes wrap nicely */
  .explore-left {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-sm);
  }
  .explore-left .box,
  .explore-left .btn {
    flex: 1 1 calc(50% - var(--gap-sm));
    text-align: center;
  }

  /* search form full width */
  .portal-search-form {
    flex-direction: column;
    gap: var(--gap-sm);
  }
  .portal-search-form input,
  .portal-search-form button {
    width: 100%;
  }
}

/* ─── Hover for scoreboard features ─────────────────────────────────────────── */

/* make sure the host is positioned */
a[data-title] {
  position: relative;
  cursor: pointer;
}

/* hide the pseudo when not hovered */
a[data-title]::after {
  content: attr(data-title);
  position: absolute;
  bottom: 100%;            /* sit just above the link */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease-in-out;
  z-index: 10;
}

/* show on hover */
a[data-title]:hover::after {
  opacity: 1;
}

.greeting {
  display: flex;        /* make it a block-level flex container */
  flex-wrap: wrap;      /* allow items to break to the next line */
  align-items: center;  /* vertical-center text & icon */
  gap: 0.5em;           /* spacing between items */
}

.greeting h1 {
  margin: 0;
}


.box .plan-price {
  font-size: 3.5rem;
  font-weight: 400;
  margin: var(--gap-sm) 0 0;
  color: var(--primary-content);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: var(--gap-sm) 0 var(--gap-md);
}
.feature-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: var(--gap-xs);
}
.feature-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  color: var(--accent);
}