/* Reset & Base Styles */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Inter', sans-serif;
        background-color: var(--dark-bg);
        color: var(--text-light);
        line-height: 1.6;
        overflow: hidden;
        overflow: scroll;
      }

      html,
      body {
        height: 100%;
      }
      body {
        overflow: hidden;
      }

      * {
        -webkit-tap-highlight-color: transparent;
      }

      /* Remove blue outline when buttons/links are tapped or focused */
      button:focus,
      a:focus,
      input:focus,
      textarea:focus,
      select:focus {
        outline: none !important;
        box-shadow: none !important;
      }
      :focus-visible {
        outline: 2px solid var(--primary-color-dark); /* or any color you like */
        outline-offset: 2px;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: 'Adam-Medium', sans-serif;
        font-weight: normal;
        letter-spacing: 0.5px;
      }

      a {
        text-decoration: none;
        color: inherit;
      }

      img {
        max-width: 100%;
        height: auto;
      }

      .container {
        width: 100%;
        max-width: 1500px;
        margin: 0 auto;
        padding: 0 2rem 0 1rem;
      }
      .section {
        padding: 5rem 0;
        position: relative;
      }

      .text-center {
        text-align: center;
      }

      .btn {
        display: inline-block;
        padding: 0.8rem 2rem;
        border-radius: 50px;
        font-weight: 600;
        transition: var(--transition);
        text-align: center;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.9rem;
      }

      .btn-primary {
        background: var(--primary-gold);
        color: var(--primary-dark);
        border: none;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
      }

      .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
      }

      .btn-outline {
        background: transparent;
        color: var(--light-gold);
        border: 2px solid var(--primary-gold-solid);
        position: relative;
        overflow: hidden;
        z-index: 1;
      }

      .btn-outline::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: var(--primary-gold);
        transition: var(--transition);
        z-index: -1;
      }

      .btn-outline:hover {
        color: var(--primary-dark);
      }

      .btn-outline:hover::before {
        left: 0;
      }

      .BeBtn {
        margin-left: 10px;
      }

      /* Header Styles */
      .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 2.5rem 0;
        transition: var(--transition);
        background: transparent;
        z-index: 10;
      }

      .header.scrolled {
        background: rgba(10, 14, 5, 0.95);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        padding: 1rem 0;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
      }

      .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

      }

      .logo {
        display: flex;
        align-items: center;
        gap: 0rem;
        cursor: pointer;
        margin-left:80px;
      }

      .logo-img {
        height: 50px;
        width: auto;
      }

      .header.scrolled .logo-img {
        height: 40px;
      }

      .logo-text {
        font-family: 'Adam-Medium', sans-serif;
        font-size: 1.8rem;
        background: var(--primary-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .main-nav {
        display: flex;
        gap: 2.5rem;
        margin-right: 10px;
      }

      .mobile-mani-nav {
        position: relative;
        display: flex;
        gap: 0rem;
        margin-right: -50px;
        top: 5px;
        display: none;
      }

      .nav-link {
        position: relative;
        font-weight: 500;
        padding: 0.5rem 0;
        transition: var(--transition);
        justify-items: center;
        align-items: center;
        text-align: center;
        margin-right: 50px;
        font-family: 'Adam-Medium';
        font-size: 21px;
      }

      .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--primary-gold);
        transition: var(--transition);
      }

      .nav-link:hover {
        color: var(--light-gold);
      }

      .nav-link:hover::after {
        width: 100%;
      }

      .mobile-nav-link {
        position: relative;
        font-weight: 400;
        padding: 0rem 0;
        transition: var(--transition);
        justify-items: center;
        align-items: center;
        text-align: center;
        margin-right: 50px;
        font-family: 'Adam-Medium';
        font-size: 25px;
        margin-left: -10px;
        color: #d4af37;
        display: none;
      }

      .auth-container {
        display: flex;
        gap: 1rem;
      }

      .mobile-menu-toggle {
        display: none;
        background: none;
        border: none;
        color: var(--white);
        font-size: 1.5rem;
        cursor: pointer;
      }

      /* ========== Sidebar Scrollbar ========== */
      .category-sidebar {
        direction: rtl; /* Flip direction so scrollbar appears on the left */
      }
      .category-sidebar * {
        direction: ltr; /* Keep text direction normal */
      }

      /* Webkit Browsers (Chrome, Edge, Safari) */
      .category-sidebar::-webkit-scrollbar {
        width: 2px; /* Thin scrollbar */
      }
      .category-sidebar::-webkit-scrollbar-track {
        background: transparent; /* No background */
      }
      .category-sidebar::-webkit-scrollbar-thumb {
        background: #d4af37; /* Gold color */
        border-radius: 10px;
      }
      .category-sidebar::-webkit-scrollbar-thumb:hover {
        background: #f1e5b9; /* Light gold on hover */
      }

      /* Firefox */
      .category-sidebar {
        scrollbar-width: thin;
        scrollbar-color: #d4af37 transparent;
      }

      /* WebKit */
      .content-area::-webkit-scrollbar {
        width: 6px;
      }
      .content-area::-webkit-scrollbar-track {
        background: transparent;
      }
      .content-area::-webkit-scrollbar-thumb {
        background: #666; /* choose your content color */
        border-radius: 10px;
      }
      .content-area::-webkit-scrollbar-thumb:hover {
        background: #999;
      }

      /* Firefox */
      .content-area {
        scrollbar-width: thin;
        scrollbar-color: #d4af37 transparent;
      }

      /* Dashboard Styles */
      .dashboard-section {
        padding-top: 8rem;
        min-height: 100vh;
        margin-left: 0px;
      }

      .content-area {

        margin-right: 0px;
        height: 100vh;
        overflow-y: auto; /* this is the second scroller */
        overflow-x: hidden; /* no horizontal/bottom scroller */
        padding: 2rem 0rem 0rem 0rem; /* clear the fixed header */
        margin-left: 0; /* kill the old margin offset */

        transition: 0.5s ease-in-out;

        min-height: 100%;
      }

      .category-sidebar.collapsed + .content-area {
        margin-left:0px;
        transition: 0.8s ease-in-out;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        margin-bottom: 4rem;
        max-width:100%;
        transition: 0.8s ease-in-out;
      }

      .stat-card {
        background: var(--card-bg);
        border-radius: 15px;
        padding: 2rem;
        text-align: center;
        transition: var(--transition);
        border: 1px solid rgba(212, 175, 55, 0.2);
        cursor: pointer;
      }

      .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--glow);
        border-color: var(--primary-gold-solid);
      }

      .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        background: var(--primary-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .stat-value {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        background: var(--primary-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .stat-label {
        font-size: 1.1rem;
        color: var(--text-gray);
      }

      /* small, subtle copy button */
      .category-copy-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        padding: 6px;
        margin: 0;
        cursor: pointer;
        font-size: 0.95rem;
        color: inherit;
        border-radius: 6px;
        transition: background 0.12s ease, transform 0.06s ease;
      }

      /* hover + focus */
      .category-copy-btn:hover,
      .category-copy-btn:focus {
        background: rgba(0, 0, 0, 0.06);
        transform: translateY(-1px);
        outline: none;
      }

      /* optional: hide extra text for sighted users but keep for screen readers */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .category-copy-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: transparent;
        border: 0;
        cursor: pointer;
        font-size: 0.95rem;
        color: inherit;
        transition: transform 0.12s ease, background 0.08s ease,
          box-shadow 0.02s ease, color 0.02s ease;
      }

      /* subtle hover */
      .category-copy-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        color: #d4af37;
        transform: translateY(-2px);
      }

      /* keyboard focus */
      .category-copy-btn:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
        border-radius: 50%;
        padding: 10px 10px;
      }

      /* pressed / clicked state (applied by JS for a short time) */
      .category-copy-btn.copied,
      .category-copy-btn:active {
        transform: scale(0.86);
        background: rgba(212, 175, 55, 0.12);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
        color: var(--primary-gold, #d4af37);
      }

      /* tiny ripple pseudo-element (animated when .copied class is added) */
      .category-copy-btn::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: rgba(212, 175, 55, 0.12);
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1),
          opacity 0.45s;
        pointer-events: none;
      }
      .category-copy-btn.copied::after {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }

      /* variants */
      .copy-alert.error {
        background: linear-gradient(
          90deg,
          rgba(239, 68, 68, 0.95),
          rgba(220, 38, 38, 0.95)
        );
      }

      

      /* Category Sidebar */
      .main-container {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        height: 100vh;
      }
      .category-sidebar {
        position: sticky;
        left: 0;
        top: 0;
        height: 100vh;
        width: 340px;
        background: var(--primary-dark);
        padding: 0rem 1.5rem 2rem;
        overflow-y: auto; /* its own vertical scroll */
        overflow-x: hidden; /* no bottom scroller */
        z-index: 900;
        border-right: 1px solid rgba(212, 175, 55, 0.2);
        margin-bottom: 0px;
        transition: 0.5s ease-in-out;
        text-align: left;
      }

      .sidebar-objects {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid #d4af37;
        margin-bottom: 20px;
        margin-top: -10px;
        transition: 2.5s ease-in-out;
      }

      .sidebar-logo-img {
        height: 90px;
        width: auto;
        margin-left: 20px;
        margin-top: 20px;
        margin-bottom: 0px;
        cursor: pointer;
      }

      .sidebar-toggle {
        background: none;
        border: 1px solid #d4af37;
        padding: 2px 6px;
        color: var(--white);
        font-size: 1.5rem;
        cursor: pointer;
        transition: var(--transition);
      }

      .category-item svg,
      .category-item path,
      .category-item i {
        width: 22px;
        height: 22px;
        color: var(--light-gold);
        margin-right: 5px;
        vertical-align: middle;
        display: inline-block;
      }

      /* when collapsed show only the icon */
      .category-sidebar.collapsed .category-item .category-name span,
      .category-sidebar.collapsed .category-item .category-desc {
        display: none;
      }

      .category-sidebar.collapsed .category-item svg,
      .category-item i {
        margin-right: 0;
        width: 25px;
        height: 25px;
        display: block;
        text-align: center;
        margin-left: -13px;
        margin-right: 0px;
        left: -10px;
        overflow-y: auto; /* its own vertical scroll */
        overflow-x: hidden;
      }

      .main-container.is-collapsed {
        grid-template-columns: 70px minmax(0, 1fr);
      }

      .category-sidebar.collapsed {
        width: 80px;
        background-color: transparent;
        overflow-y: auto; /* allow vertical scrolling */
        overflow-x: hidden;
        transition: 0.8s ease-in-out;
      }
      .category-sidebar.collapsed .category-item {
        text-align: center;
        transition: 0.8s ease-in-out;
      }
      .category-sidebar.collapsed .category-item i {
        font-size: 1.4rem;
        transition: 0.8s ease-in-out;
      }
      .category-sidebar.collapsed .category-item .category-name span,
      .category-sidebar.collapsed .category-item .category-desc,
      .category-sidebar.collapsed .sidebar-logo-img {
        display: none;
        transition: 1.8s ease-in-out;
      }
      .sidebar-toggle:hover {
        background: var(--primary-gold);
        color: var(--primary-dark);
        transform: translateY(-3px);
      }

      .category-sidebar.collapsed .sidebar-toggle {
        margin-top: 20px;
        scale: 0.8;
      }

      .category-list {
        list-style: none;
      }

      .category-item {
        margin-bottom: 1rem;
        padding: 1rem;
        border-radius: 8px;
        transition: var(--transition);
        cursor: pointer;
      }

      .category-item:hover {
        background: rgba(251, 192, 0, 0.255);
      }

      .category-item.active {
        background: rgba(255, 196, 0, 0.1);
      }

      .category-name {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        color: var(--light-gold);
      }

      .category-desc {
        font-size: 0.8rem;
        color: var(--text-gray);
      }

      .count-badge {
        background: var(--primary-gold);
        color: var(--primary-dark);
        border-radius: 12px;
        padding: 2px 8px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-left: 8px;
        display: inline-block;
      }

      /* Voting Sections */
      .voting-section {
        margin-bottom: 4rem;
      }

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
      }

      .section-title {
        font-size: 2rem;
        background: var(--primary-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .nominees-scroller {
        display: flex;
        gap: 2rem;
        overflow-x: auto;
        padding: 1rem 0;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        -webkit-scrollbar-width: none;
        scrollbar-width: none;
      }

      .nominees-scroller::-webkit-scrollbar {
        display: none;
      }

      /* ===========================
   Loader shared animation
   =========================== */
      @keyframes loader-shimmer {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(100%);
        }
      }

      /* Generic overlay used by loader elements */
      .loader-shimmer::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          110deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.06) 40%,
          rgba(255, 255, 255, 0.16) 50%,
          rgba(255, 255, 255, 0.06) 60%,
          rgba(255, 255, 255, 0) 100%
        );
        animation: loader-shimmer 1.4s linear infinite;
        pointer-events: none;
      }

      /* ===========================
   Nominee card loader (matches .nominee-card)
   =========================== */
      .loader-card {
        flex: 0 0 300px;
        height: 400px;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
        background: #25301c; /* matches your card tone */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
      }

      /* photo area */
      .loader-card .photo {
        width: 100%;
        height: 60%;
        background: #2e3c27;
        position: relative;
        overflow: hidden;
      }
      .loader-card .photo.loader-shimmer {
        position: relative;
      }

      /* bottom content plate (mimic gradient + padding) */
      .loader-card .meta {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1.25rem 1.25rem;
        background: linear-gradient(
          to top,
          var(--primary-dark) 30%,
          transparent
        );
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-sizing: border-box;
      }

      /* lines that mimic name / category / votes */
      .loader-card .line {
        height: 14px;
        border-radius: 7px;
        background: #374c31;
        position: relative;
        overflow: hidden;
      }
      .loader-card .line.name {
        width: 70%;
        height: 18px;
      }
      .loader-card .line.category {
        width: 42%;
      }
      .loader-card .line.votes {
        width: 55%;
      }
      .loader-card .line.bar {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: #3b5034;
      }

      /* vote button placeholder */
      .loader-card .action {
        margin-top: 8px;
        width: 100%;
        height: 38px;
        border-radius: 25px;
        background: #555a3a;
        position: relative;
        overflow: hidden;
      }

      /* apply shimmer overlay where needed */
      .loader-card .photo.loader-shimmer::after,
      .loader-card .line::after,
      .loader-card .action::after {
        /* use same animation defined above */
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          110deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.06) 40%,
          rgba(255, 255, 255, 0.16) 50%,
          rgba(255, 255, 255, 0.06) 60%,
          rgba(255, 255, 255, 0) 100%
        );
        animation: loader-shimmer 1.4s linear infinite;
      }

      /* ===========================
   Stats-card loader (mimics .stat-card)
   =========================== */
      /* Skeleton shimmer animation */
      @keyframes loader-shimmer {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(100%);
        }
      }

      /* Number skeleton */
      .stat-loader-number {
        display: inline-block;
        width: 80px;
        height: 32px;
        border-radius: 6px;
        background: #3a4b35;
        position: relative;
        overflow: hidden;
        left: -50px;
      }
      .stat-loader-number::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          110deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 244, 199, 0.07) 40%,
          rgba(249, 222, 176, 0.18) 50%,
          rgba(255, 255, 255, 0.07) 60%,
          rgba(255, 255, 255, 0) 100%
        );
        animation: loader-shimmer 1.4s linear infinite;
      }

      /* Icon skeleton */
      .stat-loader-icon {
        display: inline-block;
        width: 70px;
        height: 70px;
        border-radius: 8px;
        background: #3a4b35;
        position: relative;
        overflow: hidden;
        top: -80px;
        left: 35px;
      }
      .stat-loader-icon::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          110deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.07) 40%,
          rgba(255, 255, 255, 0.18) 50%,
          rgba(255, 255, 255, 0.07) 60%,
          rgba(255, 255, 255, 0) 100%
        );
        animation: loader-shimmer 1.4s linear infinite;
      }

      /* When real data loads */
      .stat-value.loaded,
      .stat-icon.loaded {
        background: none;
      }
      .stat-value.loaded::after,
      .stat-icon.loaded::after {
        display: none;
      }

      /* ===========================
   Sidebar category-count badge loader
   (mimics .count-badge)
   =========================== */
      .count-badge-loader {
        display: inline-block;
        width: 36px;
        height: 20px;
        border-radius: 12px;
        background: #3b4a33;
        vertical-align: middle;
        position: relative;
        margin-left: 8px;
      }
      .count-badge-loader::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          110deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.06) 40%,
          rgba(255, 255, 255, 0.16) 50%,
          rgba(255, 255, 255, 0.06) 60%,
          rgba(255, 255, 255, 0) 100%
        );
        animation: loader-shimmer 1.2s linear infinite;
      }

      /* ===========================
   Responsive loader sizing
   =========================== */

      /* Desktop (default) - keep as above */

      /* Large tablets / small desktop */
      @media (max-width: 1200px) {
        .loader-card {
          flex: 0 0 280px;
          height: 380px;
        }
        .stat-loader {
          min-height: 110px;
        }
      }

      /* Tablet */
      @media (max-width: 992px) {
        .loader-card {
          flex: 0 0 260px;
          height: 360px;
        }
        .stat-loader {
          min-height: 100px;
        }
        .count-badge-loader {
          width: 34px;
          height: 18px;
        }
      }

      /* Mobile */
      @media (max-width: 768px) {
        .loader-card {
          flex: 0 0 220px;
          height: 340px;
        }
        .loader-card .photo {
          height: 58%;
        }
        .stat-loader {
          min-height: 50px;
          display: flex;
          gap: 10px;
        }
        .count-badge-loader {
          width: 30px;
          height: 16px;
        }
        .stat-loader-number {
          display: inline-flex;
          left: -45px;
        }
      }

      /* Flip phone / very small screens */
      @media (max-width: 360px) {
        .loader-card {
          flex: 0 0 200px;
          height: 320px;
        }
        .loader-card .photo {
          height: 56%;
        }
        .stat-loader {
          min-height: 40px;
        }
        .stat-loader-number {
          display: inline-flex;
          left: 0px;
          scale: 0.7;
        }
        .stat-loader-icon {
          display: none;
        }
        .count-badge-loader {
          width: 26px;
          height: 14px;
        }
      }

      .nominee-card {
        flex: 0 0 300px;
        height: 400px;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
        transition: var(--transition);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      }

      .nominee-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
      }

      /*/.nominee-placeholder {
  background:none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a3515;
  width: 100%;
  height: 100%;
  font-size: 25rem;
}*/

      .nominee-photo {
        position: relative;
        width: 100%;
        height: 400px; /* adjust to card height */
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.05);
      }

      .nominee-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
      }

      .nominee-photo .placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2a3515;
        width: 100%;
        height: 100%;
        font-size: 25rem;
      }

      .nominee-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1.5rem;
        background: linear-gradient(
          to top,
          var(--primary-dark) 30%,
          transparent
        );
        transform: translateY(0);
        opacity: 1;
        transition: var(--transition);
      }

      .nominee-name {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
      }

      .description-name {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
      }

      .description-category {
        font-size: 0.9rem;
        color: var(--light-gold);
        margin-bottom: 1rem;
      }

      .nominee-category {
        font-size: 0.9rem;
        color: var(--light-gold);
        margin-bottom: 1rem;
      }
      
      /* ===== Payment-method radio-cards ===== */
.payment-methods {
  display:flex;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 1.25rem;
  padding: 0 0.5rem;
}

/* card */
.payment-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 50%;
  min-width: 120px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
  outline: none;
}

/* inner content */
.payment-card .pm-inner {
  display:grid;
  gap:10px;
  align-items:center;
  width:100%;
  position: relative;
  justify-items: center;
  text-align: center;
}

.payment-card .pm-logo {
  width:34px;
  height:34px;
  object-fit:contain;
  display:grid;
  scale:2.2;
}

/* Card icon (purple) */
.payment-card .pm-icon {
  font-size: 28px;
  color: #8a4bff; /* purple */
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
}

/* label */
.payment-card .pm-label strong { display:none; font-size:0.95rem; }
.payment-card .pm-label small { display:block; font-size:0.72rem; color: rgba(255,255,255,0.6); font-weight: 600; }

/* selected state */
.payment-card[aria-checked="true"] {
  transform: translateY(-6px);
  border-color: transparent;
  z-index: 5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}


/* mpesa selected glow (green-yellow) */
.payment-card[data-method="mpesa"][aria-checked="true"] {
  background:var(--primary-gold); /*rgba(248, 255, 246, 0.8),linear-gradient(135deg, rgba(0,140,0,0.08), rgba(255,216,0,0.06));*/
  box-shadow: 0 8px 30px rgba(38,162,76,0.22), 0 0 30px rgba(255,215,0,0.08);
  border: 1px solid rgba(38,162,76,0.14);

}
.payment-card[data-method="mpesa"][aria-checked="true"]  .pm-label small {
  color: rgb(0, 0, 0,0.7);
}
/* card selected glow (purple) */
.payment-card[data-method="card"][aria-checked="true"] {
  background:var(--primary-gold);
  box-shadow: 0 8px 30px rgba(138,75,255,0.18);
  border: 1px solid rgba(138,75,255,0.12);
}
.payment-card[data-method="card"][aria-checked="true"]  .pm-label small {
  color: rgb(0, 0, 0,0.7);
}
/* paypal selected glow (blue) */
.payment-card[data-method="paypal"][aria-checked="true"] {
  background:var(--primary-gold);
  box-shadow: 0 8px 30px rgba(0,95,190,0.18);
  border: 1px solid rgba(0,95,190,0.09);
}
.payment-card[data-method="paypal"][aria-checked="true"]  .pm-label small {
  color: rgb(0, 0, 0,0.7);
}
/* hover outer glow */
.payment-card:hover {
  transform: translateY(-4px);
}
.payment-card:hover::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  z-index: -1;
  opacity: 0.95;
  background: linear-gradient(135deg, rgba(255,255,255,0.00), rgba(255,255,255,0.00));
  pointer-events: none;
}

/* specific hover gradient per method (outer glow) */
.payment-card[data-method="mpesa"]:hover::after {
  background: radial-gradient(ellipse at center, rgba(255,222,79,0.12), rgba(38,162,76,0.06) 45%, transparent 60%);
}
.payment-card[data-method="card"]:hover::after {
  background: radial-gradient(ellipse at center, rgba(164,112,255,0.10), rgba(138,75,255,0.05) 40%, transparent 60%);
}
.payment-card[data-method="paypal"]:hover::after {
  background: radial-gradient(ellipse at center, rgba(115,170,255,0.10), rgba(0,95,190,0.05) 40%, transparent 60%);
}

/* keyboard focus outline */
.payment-card:focus {
  box-shadow: 0 0 0 4px rgba(212,175,55,0.06), 0 8px 20px rgba(0,0,0,0.45);
}

/* MPESA-style inputs (default) */
.payment-input {
  display: none; /* toggled by JS */
  margin-bottom: 1rem;
}
.payment-input.active {
  display: block;
}

/* MPESA-specific visual input style */
.input-mpesa {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(38,162,76,0.18);
  box-shadow: 0 0 12px rgba(38,162,76,0.06) inset;
  color: var(--text-light);
  padding: 12px 14px;
  border-radius: 10px;
  width:100%;
}

/* Card & PayPal inputs inherit general styles but get small color accents when selected */
.input-card { border: 1px solid rgba(138,75,255,0.12); 
  padding: 12px 14px;
  box-shadow:rgba(128, 72, 234, 0.53);
   border-radius: 10px; 
   width:100%; }
.input-paypal { border: 1px solid rgba(0,95,190,0.12);
padding: 12px 14px;
box-shadow:rgba(29, 127, 225, 0.655) ;
   border-radius: 10px; 
   width:100%; }

/* small responsive tweak */
@media (max-width:560px) {
  .payment-methods {
     gap: 10px;
     padding: 0rem }
     
  .payment-card { width:100%; }
}

      .nominee-card {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        transition: transform 0.3s ease;
      }

      .nominee-card:hover {
        transform: translateY(-5px);
      }

      .nominee-description {
        position: absolute;
        bottom: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.95),
          rgba(0, 0, 0, 0.5)
        );
        color: rgb(213, 235, 167);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 80px 20px;
        text-align: center;
        transition: bottom 0.4s ease-in-out;
        z-index: 10;
        display: none;
      }

      .nominee-description p {
        font-size: 21px;
        line-height: 1.2;
        font-family: 'adam-medium';
      }

      .nominee-card:hover .nominee-description {
        bottom: 0;
      }

      .nominee-card:hover .nominee-name .nominee-category {
        transform: translateY(-50px);
        transition: transform 0.4s ease-in-out;
      }

      .vote-count i {
        margin-right: 5px;
        color: var(--primary-gold-solid);
      }

      .vote-count {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        font-size: 0.9rem;
        margin-bottom: 1rem;
        gap: 6px;
      }

      .vote-bar {
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
        overflow: hidden;
        margin-bottom: 1rem;
      }

      .vote-fill {
        height: 100%;
        background: var(--primary-gold);
        border-radius: 3px;
      }

      .action-grid {
        display: grid;
        grid-template-columns: 1fr auto; /* Left = flexible, Right = fixed */
        align-items: center;
        margin: 0.5rem 0;
      }

      .vote-btn {
        width: 100%;
        padding: 0.7rem;
        background: var(--primary-gold);
        color: var(--primary-dark);
        border: none;
        border-radius: 25px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        z-index: 1000;
      }

      .vote-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
      }

      /* All Votes Grid */
      .all-votes-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin-bottom: 3rem;
      }

      .view-more {
        display: grid;
        gap: 2rem;
        text-align: center;
        margin-top: 2rem;
      }

      /* Category Page */
      .category-page {
        margin-left: 20px;
        padding: 7rem 2rem 2rem;
        width: 100%;
        transition: 0.5s ease-in-out;
      }

      .category-sidebar.collapsed .category-page {
        margin-left: 70px;
        transition: 0.8s ease-in-out;
      }

      .category-header {
        display: flex;
        margin-bottom: 2rem;
        flex-direction: column;
        gap: 0.5rem;
      }

      .category-title-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .category-title {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        background: var(--primary-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .category-description {
        font-size: 1.1rem;
        color: var(--text-gray);
        margin-bottom: 2rem;
        max-width: 800px;
      }

      .filter-controls {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 2rem;
        flex-wrap: wrap;
      }

      .filter-select {
        appearance: none; /* remove default arrow */
        -webkit-appearance: none;
        -moz-appearance: none;
        background: var(--card-bg);
        border: 1px solid rgba(212, 175, 55, 0.3);
        color: var(--text-light);
        padding: 0.7rem 1.2rem;
        border-radius: 15px;
        font-size: 0.9rem;
        min-width: 180px;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gold' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1em;
        -webkit-tap-highlight-color: transparent;
      }

      /* Add custom arrow as a pseudo-element */
      .filter-select::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 1rem;
        width: 12px;
        height: 12px;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gold' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: contain;
        transform: translateY(-50%) rotate(0deg);
        transition: transform 0.3s ease;
        pointer-events: none; /* let clicks go through */
      }

      /* Rotate arrow on focus */
      .filter-select:focus::after {
        transform: translateY(-50%) rotate(180deg);
      }

      .filter-select option {
        position: relative;
        background: #c7cebb;
        color: black;
        padding: 10px;
        border-radius: 20px;
      }

      .filter-select:focus,
      .filter-select option:focus,
      .filter-select option:hover {
        outline: none;
        background: var(
          --card-bg
        ) !important; /*#b5c2a6 your custom hover color */
        color: rgba(212, 175, 55, 0.9);
      }

      .search-bar {
        position: relative;
        flex-grow: 1;
        max-width: 400px;
      }

      /* Search result overlay */
.search-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 520px;              /* fit under search bar but can be adjusted */
  margin-top: 8px;
  background: rgba(10, 14, 5, 0.98);
  border: 1px solid rgba(212,175,55,0.12);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  border-radius: 10px;
  overflow: hidden;
  z-index: 9999;
  transition: var(--transition);
  font-size: 0.95rem;
}

/* scroll area - limit to show up to ~10 items visually */
.search-overlay .results {
  max-height: calc(10 * 56px); /* ~10 rows of 56px each */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* one result row */
.search-overlay .result-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  border-bottom: 1px solid rgba(255,255,255,0.02);
}

/* image at start */
.search-overlay .result-item img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

/* if image missing, fallback avatar */
.search-overlay .result-item .avatar-fallback {
  width:44px;height:44px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.6);
  font-size:18px;flex-shrink:0;
}

/* text block */
.search-overlay .result-item .meta {
  display:flex;
  flex-direction:column;
  min-width: 0;
}
.search-overlay .result-item .meta .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight:600;
  color: var(--text-light);
}
.search-overlay .result-item .meta .sub {
  font-size:0.82rem;
  color: var(--text-gray);
}

/* votes badge on right */
.search-overlay .result-item .votes {
  margin-left: auto;
  font-weight:700;
  color: var(--light-gold);
  font-size:0.85rem;
  flex-shrink:0;
}

/* hover / focus */
.search-overlay .result-item:hover,
.search-overlay .result-item:focus {
  background: rgba(212,175,55,0.06);
  color: var(--primary-gold-solid);
  outline: none;
}

/* hide by default */
.search-overlay.hidden { opacity: 0; pointer-events: none; transform: translateY(-6px); }
.search-overlay.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }


      .search-container {
      width:40%;
      }

      .search-input {
        width: 100%;
        background: var(--card-bg);
        border: 1px solid rgba(212, 175, 55, 0.3);
        color: var(--text-light);
        padding: 0.7rem 1.2rem 0.7rem 3rem;
        border-radius: 15px;
        font-size: 0.9rem;
      }

      .search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(212, 175, 55, 0.7);
      }

      /* Modal Container */
      .modal-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(10, 14, 5, 0.95);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        opacity: 1;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        overflow-y: auto;
      }

      .modal-container.active {
        opacity: 1;
        visibility: visible;
      }

      /* Modal Content */
      .modal-content {
        background: var(--card-bg);
        border-radius: 20px;
        width: 94%;
        max-width: 500px;
        overflow-y: auto;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), var(--glow);
        transform: scale(0.9);
        max-height: 90vh;
        opacity: 0;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
          opacity 0.4s ease;
      }

      .share-button {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #d4af37;
        cursor: pointer;
        margin-bottom: 1rem;
        margin-left: auto; /* push to right if in flex container */
        justify-content: flex-end;
        transition: color 0.2s ease, transform 0.2s ease;

        position: fixed;
      }

      .share-link {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.9rem;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #d4af37;
        cursor: pointer;
        margin-bottom: -50px;
        margin-left: auto; /* push to right if in flex container */
        transition: color 0.2s ease, transform 0.2s ease;
        transform: translateY(-180%) translateX(340%);
      }

      .share-link svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
      }

      .share-link:hover {
        color: #f3e2ab;
      }

      .nominee-highlight {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transform: translateY(-6px);
}
.nominee-incomplete { opacity: 0.6; }
.btn-disabled { pointer-events: none; opacity: 0.5; }

      #copy-alert-container {
        position: fixed;
        top: 20px;
        right: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 10000;
        max-height: 490px; /* stack limit */
        overflow: hidden;
        transition: all 0.8s ease;
      }
      .copy-alert {
        border-radius: 8px;
        padding: 16px 20px;
        background: #406e08;
        border: 1px solid var(--primary-gold-solid);
        color: var(--light-gold);
        box-shadow: var(--glow) opacity 70%;
        opacity: 0;
        transform: translateX(70px);
        transition: opacity 0.3s ease, transform 0.8s ease;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        gap: 10px;
        width: fit-content;
        pointer-events: none;
      }

      .copy-alert.show {
        opacity: 1;
        transform: translateX(0);
        transition: all 0.5s ease;
      }

      .copy-alert.error {
        background: rgba(239, 68, 68, 0.9);
        border-color: #f8d271;
      }

      .copy-alert i {
        font-size: 22px;
        color: var(--primary-gold-solid);
        flex-shrink: 0;
      }

      .copy-alert.error i {
        color: #d5ba07;
      }

      #copy-alert-text {
        margin: 0;
        font-family: 'Adam-Medium', sans-serif;
        font-size: 16px;
      }

      /* Modal-top toast container (placed inside modal .modal-content) */
      #modal-top-toast-container {
        position:absolute;
        top: 88px;
        margin-top: -70px; /* distance from top of viewport */
        left: 40%;
        transform: translateY(-50%);
        width: 100%;
        max-width: 720px; /* overall cap */
        padding: 0 12px;
        z-index: 1400000; /* above modals */
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        pointer-events: none;
        width: auto;
        max-height: 490px;
        justify-content: center;
        justify-items: center;
        align-self: center;
      }

      .modal-top-toast-container {
        position: fixed;
        top: 18px;
        margin-top: -70px; /* distance from top of viewport */
        left: 38%;
        transform: translateY(-50%);
        width: 100%;
        max-width: 720px; /* overall cap */
        padding: 0 12px;
        z-index: 1400000; /* above modals */
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        pointer-events: none;
        width: auto;
        max-height: 490px;
        justify-content: center;
        justify-items: center;
        align-self: center;
      }

      /* single toast */
      .modal-top-toast {
        pointer-events: auto; /* allow dismiss clicks on the toast itself */
        width: 100%;
        box-sizing: border-box;
        border-radius: 10px;
        padding: 12px 16px;
        display: flex;
        gap: 12px;
        align-items: center;
        background: #406e08;
        border: 1px solid var(--primary-gold-solid);
        color: var(--light-gold);
        box-shadow: var(--glow) opacity 70%;
        /*box-shadow: 0 10px 30px rgba(0,0,0,0.35), var(--glow);*/
        transform-origin: top center;
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
        transition: opacity 0.25s ease,
          transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1);
        font-family: 'Adam-Medium', Inter, sans-serif;
        font-size: 0.95rem;
      }

      /* success / info / error variants */
      .modal-top-toast.success {
        background: linear-gradient(135deg, #406e08, #5ca213);
        border-color: var(--primary-gold-solid);
      }
      .modal-top-toast.info {
        background: linear-gradient(135deg, #535533, #3b3824);
        border-color: rgba(212, 175, 55, 0.12);
      }
      .modal-top-toast.error {
        background: linear-gradient(135deg, #c33b3b, #d94b4b);
        border-color: #ffb4a4;
        color: #fff;
      }

      /* icon */
      .modal-top-toast i {
        font-size: 20px;
        flex-shrink: 0;
        color: var(--primary-gold-solid);
      }

      #modal-top-toast i{
        font-size: 20px;
        flex-shrink: 0;
        color: var(--primary-gold-solid);
      }

      .modal-top-toast.error i {
        color: #d94b4b;
      }

      /* show animation */
      .modal-top-toast.show {
        opacity: 1;
        transform: translateY(90%) scale(1);
      }

      /* small dismiss button */
      .modal-top-toast .dismiss {
        margin-left: auto;
        background: transparent;
        border: 0;
        color: inherit;
        font-size: 16px;
        cursor: pointer;
        padding: 6px;
        border-radius: 6px;
      }

      /* stack handling: newest on top */
      #modal-top-toast-container > .modal-top-toast + .modal-top-toast {
        margin-top: 8px;
      }

      /* responsive tweaks */
      @media (max-width: 520px) {
        #modal-top-toast-container {
          left: 17%;
          transform: translateY(-50%);
          top: 120px;
          width: fit-content;
          max-width: 360px;
          scale: 0.9;
          margin: top 0px;
          justify-content: center;
          align-items: center;
          justify-items: center;
          align-self:center;
          display: flex;
        }
        .modal-top-toast {
          padding: 10px 12px;
          font-size: 0.92rem;
        }
        .cf-turnstile {
          position: relative;
          left: 17%;
        }
        .loader {
          margin-left: 10px;
        }
        #copy-alert-container {
          right: 12px;
          left: 12px;
          align-items: center;
        }
        .copy-alert {
          max-width: calc(100% - 24px);
        }
      }

      /* Voting modal processing overlay + loader */

      .voting-processing-overlay {
        position: absolute;
        inset: 0; /* top:0;right:0;bottom:0;left:0; */
        display: none; /* toggled by JS */
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.65); /* dark translucent overlay */
        z-index: 1000; /* sits above modal content */
        pointer-events: auto; /* capture clicks so outside clicks don't close modal */
        height: 1600px;
      }

      /* inner container to allow pointer-events only for button layering */
      .voting-processing-overlay .overlay-inner {
        pointer-events: none; /* loader itself shouldn't capture clicks */
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* make the proceed button appear above the overlay */
      #voting-modal #proceed-payment {
        position: relative;
        z-index: 20000 !important; /* force top layer */
      }

      #voting-modal .modal-content {
        position: relative;
        z-index: 0;
      }

      /* optionally dim content behind overlay slightly (styles toggled by JS too) */
      .voting-processing-blocked {
        filter: blur(0.6px) contrast(0.95);
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none; /* block pointer events on underlying content */
      }

      /* loader from Uiverse.io by aryamitra06 (kept intact, small tweaks for color/size) */
      .loader {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-left: -30px;
        margin-top: 140px;
      }
      .bar {
        display: inline-block;
        width: 3px;
        height: 50px;
        background-color: rgba(255, 255, 255, 0.85);
        border-radius: 10px;
        animation: scale-up4 1s linear infinite;
      }
      .bar:nth-child(2) {
        height: 55px;
        margin: 0 5px;
        animation-delay: 0.25s;
      }
      .bar:nth-child(3) {
        animation-delay: 0.5s;
      }
      @keyframes scale-up4 {
        20% {
          background-color: #ffffff;
          transform: scaleY(1.5);
        }
        40% {
          transform: scaleY(1);
        }
      }

      #voting-modal .modal-content::-webkit-scrollbar {
        width: 2px;
      }
      #voting-modal .modal-content::-webkit-scrollbar-thumb {
        background: #d4af37;
        border-radius: 10px;
      }
      #voting-modal .modal-content {
        scrollbar-width: thin;
        scrollbar-color: #d4af37 transparent;
      }

      .modal-container.active .modal-content {
        transform: scale(1);
        opacity: 1;
      }

      /* Nominee Header Section */
      #voting-modal .nominee-header {
        position: relative;
        height: 380px;
        overflow: hidden;
      
      }

      #voting-modal .nominee-image {
        width: 100%;
        height: 130%;
        object-fit: cover;
        position: absolute;
        margin-top: 00px;
      }

      #voting-modal .nominee-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1.5rem;
        background: linear-gradient(
          to top,
          var(--primary-dark) 30%,
          transparent
        );
        margin-top: -20px;
      }

      /* Overlay Grid Container */
#voting-modal .overlay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.6rem;
  align-items: center;
  background:linear-gradient(135deg, #d4af37 0%, #8f7b34 100%);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  color: #f1f1f1;
  font-family: 'Poppins', sans-serif;
  position: relative;
  top:42px;
  z-index: 1000;
}

#voting-modal .nominee-position {
  display: flex;
  grid-column: 2 / 3;
  position: absolute;
  margin-top:-30px;
  left: 0px;
  color: var(--white);
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.95rem;
  font-family: "adam-medium";
  margin-left: -15px;
  margin-right: 2px;
}

#voting-modal .nominee-position i {
  color: var(--primary-dark);
}

#voting-modal .nominee-position span i {
  color: var(--primary-dark);
  font-weight:900;
}

/* Nominee ID and Vote Count share top row */
#voting-modal .nominee-id {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 1.05rem;
}

#voting-modal .vote-count {
  grid-column: 3 / 4;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.95rem;
  margin-top: 15px;
}

#voting-modal .vote-count i{
        color:var(--primary-dark);
      }


/* Share button aligned right */
#voting-modal .share-button {
  grid-column: 2 / 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
  color:var(--primary-dark);

}

#voting-modal .share-button svg{
  color:var(--primary-dark);
}

#voting-modal .share-button:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

/* Vote bar full width on bottom row */
#voting-modal .vote-bar {
  grid-column: 1 / 4;
  height: 5px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 5px;
  overflow: hidden;
  margin-top: 0.1rem;
}

#voting-modal .vote-fill {
  height: 100%;
  background: linear-gradient(90deg, #8000ff, #d000ff);
  border-radius: 5px;
  transition: width 0.4s ease;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .overlay-grid {
    grid-template-columns: 1fr 1fr;
  }
  .share-link {
    grid-column: 1 / 4;
    justify-self: start;
  }
}


      #voting-modal .nominee-name {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 0.10rem;
        color: var(--white);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        font-family: 'adam-medium';
      }

      #voting-modal .nominee-category {
        font-size: 1rem;
        color: var(--light-gold);
        margin-bottom: -20px;
      }

      #voting-modal .nominee-id {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: var(--white);
        font-weight: 500;
        font-family: 'adam-medium';
      }

      #voting-modal .nominee-id i{
        color: var(--primary-dark);
      }

      /* Modal Body */
      .modal-body {
        padding: 2rem;
      }

      .modal-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        text-align: center;
        background: var(--primary-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      /* Form Elements */
      .form-group {
        margin-bottom: 1.5rem;
      }

      .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: var(--light-gold);
      }

      /* Vote input box styling */
      #vote-count {
        width: 70px;
        height: 40px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--text-light);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(212, 175, 55, 0.4); /* soft gold border */
        border-radius: 10px;
        transition: var(--transition);
      }

      /* Glow + highlight when active */
      #vote-count:focus {
        outline: none;
        border-color: var(--primary-gold-solid);
        box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
        background: rgba(255, 255, 255, 0.12);
      }

      #vote-count::-webkit-outer-spin-button,
      #vote-count::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      /* Remove arrows (Firefox) */
      #vote-count {
        -moz-appearance: textfield;
      }

      .input-with-icon {
        position: relative;
      }

      .input-with-icon i {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 1rem;
        color: var(--primary-gold-solid);
      }

      .input-with-icon input {
        padding-left: 3rem;
      }

      .form-control {
        width: 100%;
        padding: 0.9rem 1rem;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(212, 175, 55, 0.3);
        color: var(--text-light);
        font-size: 1rem;
        transition: var(--transition);
      }

      .form-control:focus {
        outline: none;
        border-color: var(--primary-gold-solid);
        box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
      }

      /* Vote Counter */
      .vote-counter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
      }

      .counter-label {
        font-weight: 500;
        color: var(--light-gold);
      }

      .counter-controls {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .counter-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-gold);
        color: var(--primary-dark);
        border: none;
        font-size: 1.2rem;
        font-weight: bold;
        cursor: pointer;
        transition: var(--transition);
      }

      .counter-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
      }

      .counter-value {
        width: 60px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--text-light);
      }

      /* Cost Summary */
      .cost-summary {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
      }

      .cost-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.8rem;
      }

      .cost-item:last-child {
        margin-bottom: 0;
      }

      .cost-label {
        color: var(--text-gray);
      }

      .cost-value {
        font-weight: 500;
      }

      .cost-total {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(212, 175, 55, 0.3);
        font-weight: bold;
        font-size: 1.1rem;
        color: var(--light-gold);
      }

      /* Buttons */
      #voting-modal .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 2rem;
        border-radius: 50px;
        font-weight: 600;
        transition: var(--transition);
        text-align: center;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.9rem;
        border: none;
        width: 100%;
        z-index: 21000;
        position: relative;
        overflow: hidden;
      }

      #voting-modal .btn-primary {
        background: var(--primary-gold);
        color: var(--primary-dark);
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
      }

      #voting-modal .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
      }

      #voting-modal .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-light);
        border: 1px solid rgba(212, 175, 55, 0.3);
      }

      #voting-modal .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
      }

      #voting-modal .paystack-btn {
        display:flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 2rem;
        border-radius: 50px;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.9rem;
        background-color: rgb(15, 15, 15);
  border: none;
  color: white;
        width: 430px;
        height: 50px;
        z-index: 21000;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.103);
        position: relative;
        overflow: hidden;
        
      }

      .svgIcon {
  width: 16px;
  transition: transform 0.3s ease;
  margin-left: 5px ;
}

.svgIcon path {
  fill: var(--primary-gold-solid);
  transition: transform 0.3s ease;
}

#voting-modal .paystack-btn:active .svgIcon path{
  fill: black;
}

#voting-modal .paystack-btn:hover .svgIcon path {
  fill: var(--primary-gold-solid);
  mix-blend-mode: difference;
}

/* Trigger the SVG up-down shake animation when hovered */
#voting-modal .paystack-btn:hover .svgIcon {
  animation: card-shake-updown 0.6s ease-in-out 0.3s; /* 0.3s delay after effect */
  fill: black;

}


@keyframes card-shake-updown {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(4px);
  }
  75% {
    transform: translateY(-2px);
  }
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(4px);
  }
  75% {
    transform: translateY(-2px);
  }
}




      /*#voting-modal .paystack-btn-primary {
        background:linear-gradient(135deg, #b737d4 0%, #bd7ccc 100%);
        color: whitesmoke;
        box-shadow: 0 4px 15px rgba(178, 55, 212, 0.3);
      }

      #voting-modal .paystack-btn-primary:hover {
        background:linear-gradient(135deg, #7d2591 0%, #92619e 100%);
        color: rgb(255, 200, 0);
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(165, 48, 188, 0.5);
      }*/

      #voting-modal .paystack-btn::before {
  width: 430px;
  height: 130px;
  position: absolute;
  content: "";
  background-color: white;
  border-radius: 50%;
  left: -100%;
  top: 0;
  transition-duration: .3s;
  mix-blend-mode: difference;
  font-weight: 400;
}

#voting-modal .paystack-btn:hover::before {
  transition-duration: .3s;
  transform: translate(100%,-50%);
  border-radius: 0;
  font-weight: 400;
  
}

#voting-modal .paystack-btn:active {
  transform: translate(5px,5px);
  transition-duration: .3s;
  font-weight: 400;
}


      #voting-modal .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-light);
        border: 1px solid rgba(212, 175, 55, 0.3);
      }

      #voting-modal .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
      }

      /* 📱 Mobile devices (max 600px) */
@media screen and (max-width: 600px) {
 #voting-modal .paystack-btn {
    width:100%;
    padding: 1rem 1.4rem;
    font-size: 1.05rem;
    border-radius: 40px;
    justify-content: center;
  }

  #voting-modal .paystack-btn::before{
    width:100%;
  }

 #voting-modal .paystack-btn-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

 #voting-modal .svgIcon {
    width: 1.4em;
    height: 1.4em;
  }
}

/* 📲 Tablets (601px–1024px) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
 #voting-modal .paystack-btn {
    width: 80%;
    padding: 1rem 2rem;
    font-size: 1.1rem;
  }

  #voting-modal .paystack-btn::before{
    width:100%;
  }

 #voting-modal .svgIcon {
    width: 1.3em;
    height: 1.3em;
  }
}

      .cf-turnstile {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        margin-top: 45px; /* top & bottom spacing */
        margin-bottom: 15px;
        width: fit-content; /* keeps it tight around widget */
        scale: 0.8;
        margin-left: 60px;
      }

      /* add to your stylesheet (or adapt your existing btn-loading style) */
      .btn-loading .btn-text {
        display: none;
      }
      .btn-loading::after {
        content: '';
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid rgba(0, 0, 0, 0.1);
        border-top-color: #333;
        display: inline-block;
        animation: spin 0.9s linear infinite;
        margin-left: 0px;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* Result Modal */
      .result-modal {
        text-align: center;
        padding: 2rem;
      }

      .result-icon {
        font-size: 4rem;
        margin-bottom: 1.5rem;
      }

      .success .result-icon {
        color: var(--success);
      }

      .error .result-icon {
        color: var(--error);
      }

      .result-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        font-weight: 600;
      }

      .success .result-title {
        color: var(--success);
      }

      .error .result-title {
        color: var(--primary-gold-solid);
      }

      .result-message {
        color: var(--text-gray);
        margin-bottom: 2rem;
        line-height: 1.6;
      }

      /* Close Button */
      .close-modal {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(124, 105, 42, 0.325);
        color: var(--primary-gold-solid);
        border: none;
        font-size: 1.2rem;
        cursor: pointer;
        transition: var(--transition);
        z-index: 10;
      }

      .close-modal:hover {
        background: rgba(217, 194, 41, 0.2);
        transform: rotate(90deg);
        color: #42573e;
      }

      .fa-shield-alt {
        color: var(--primary-gold-solid);
        margin-right: 2px;
      }

      /* Error Toast */
      #toast-container {
        position: fixed;
        top: 40px;
        left: 52%;
        width: auto;
        height: auto;
        transform: translateX(-60%);
        display: flex;
        flex-direction: column;
        gap: 16px;
        border-radius: 10px;
        z-index: 200000;
        pointer-events: none;
        max-height: 300px; /* limit stack height */
        /* older toasts get removed */
      }

      .vote-toast {
        background: #d83333;
        color: #fff;
        padding: 12px 20px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.95rem;
        font-weight: 500;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transform: translateY(-20px);
        transition: all 0.4s ease;
        font-family: 'adam';
        width: fit-content;
      }

      .vote-toast.show {
        opacity: 1;
        transform: translateY(0);
      }

      .vote-toast i {
        font-size: 1.6rem;
        color: #ffd000;
      }

      /* Input error border */
      /* Shake animation */
      @keyframes error-shake {
        0%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-5px);
        }
        75% {
          transform: translateX(5px);
        }
      }
      #phone.invalid {
        border: 2px solid #c80e0e !important;
        box-shadow: 0 0 0 2px rgba(234, 54, 54, 0.3);
        border-radius: 8px;
        animation: error-shake 0.2s ease;
      }

      .input-error {
  border: 2px solid #c80e0e !important;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.shake {
  animation: shake 0.5s ease;
}


      /* Footer */
      .footer {
        display: none;
        position: relative;
        background: var(--primary-dark);
        padding: 5rem 0 2rem;
        overflow: hidden;
        z-index: 1000;
        margin-top: 1550px;
        margin-right: -90px;
      }

      .footer-pattern {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(
            circle at 20% 80%,
            rgba(212, 175, 55, 0.1) 0%,
            transparent 20%
          ),
          radial-gradient(
            circle at 80% 20%,
            rgba(212, 175, 55, 0.1) 0%,
            transparent 20%
          ),
          linear-gradient(
            45deg,
            transparent 49%,
            rgba(212, 175, 55, 0.05) 50%,
            transparent 51%
          );
        background-size: cover, cover, 10px 10px;
        z-index: 0;
      }

      .footer-content {
        position: relative;
        z-index: 1;
      }

      .footer-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
        margin-bottom: 4rem;
      }

      .footer-col h4 {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
        background: var(--primary-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .footer-links {
        list-style: none;
      }

      .footer-links li {
        margin-bottom: 0.8rem;
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 0.95rem;
        opacity: 0.9;
        transition: var(--transition);
      }

      .footer-links li i {
        color: #d4af37;
        font-size: 15px;
        vertical-align: middle;
      }

      .footer-link {
        color: var(--text-gray);
        transition: var(--transition);
        position: relative;
        padding-left: 0;
        transition: var(--transition);
      }

      .footer-link::before {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--primary-gold);
        transition: var(--transition);
      }

      .footer-link:hover {
        color: var(--light-gold);
        padding-left: 10px;
      }

      .footer-link:hover::before {
        width: 100%;
      }

      .social-links {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
      }

      .social-link {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-light);
        transition: var(--transition);
      }

      .social-link:hover {
        background: var(--primary-gold);
        color: var(--primary-dark);
        transform: translateY(-3px);
      }

      .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 2rem;
        text-align: center;
        font-size: 0.9rem;
        color: var(--text-gray);
      }

      .category-sidebar {
        transform: translateX(0);
        transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
      }

      .mobile-menu-toggle i {
        transition: transform 0.3s ease, color 0.3s ease;
      }
      .mobile-menu-toggle.active i {
        transform: rotate(180deg);
        color: var(--primary-gold-solid);
      }

      .vote-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow:none;
}

/* ===============================
   MODAL SHELL
================================ */
.vote-modal {
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  color: var(--text-light);
  width: 100%;
  max-width: 520px;
  border-radius: 20px;
  padding: 28px;
  position: relative;
  box-shadow: var(--glow);
  transition: var(--transition);
scale: 0.88;
margin-top: 30px;
margin-bottom: 30px;
margin-right: -7px;
}

/* ===============================
   ILLUSTRATION
================================ */
.vote-modal-illustration {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

/* ===============================
   TITLES & TEXT
================================ */
.vote-modal-title {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  background: var(--primary-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vote-modal-desc {
  text-align: center;
  margin: 10px 0 18px;
  color: var(--text-gray);
}

/* ===============================
   ERROR CODE CHIP
================================ */
.vote-error-code {
  text-align: center;
  font-size: .8rem;
  background: rgba(0,0,0,.45);
  padding: 8px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.vote-error-code span {
  color: var(--primary-gold-solid);
}

/* ===============================
   NOTIFY BOX
================================ */
.notify-box {
  background: rgba(0,0,0,.35);
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,.2);
}

/* ===============================
   RADIO OPTIONS
================================ */
.notify-type {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
}

.notify-type label {
  display: flex;
  gap: 6px;
  cursor: pointer;
  color: var(--text-light);
}

.notify-type input {
  accent-color: var(--primary-gold-solid);
}

/* ===============================
   INPUTS
================================ */
.notify-input input,
.notify-input select {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,.25);
  background: var(--dark-bg);
  color: var(--white);
  transition: var(--transition);
}

.notify-input input:focus,
.notify-input select:focus {
  outline: none;
  box-shadow: var(--glow);
}

/* ===============================
   PHONE GRID
================================ */
.phone-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
}

/* ===============================
   PRIMARY ACTION
================================ */
.vote-primary-btn {
  margin-top: 14px;
  width: 100%;
  padding: 14px;
  background: var(--primary-gold);
  border: none;
  border-radius: 14px;
  color: var(--black);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.vote-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow);
}

/* ===============================
   FOOTNOTE
================================ */
.notify-note {
  font-size: .75rem;
  color: var(--text-gray);
  text-align: center;
  margin-top: 10px;
}

/* ===============================
   CLOSE BUTTON
================================ */
.vote-close-btn {
  position: absolute;
  top: 12px;
  right: 24px;
  background: none;
  border: none;
  font-size: 2.2rem;
  color: var(--text-gray);
  cursor: pointer;
  transition: var(--transition);
}

.vote-close-btn:hover {
  color: var(--primary-gold-solid);
}

/* ===============================
   UTILITY
================================ */
.hidden {
  display: none;
}


/* ===============================
   VOTING MODAL – BRAND SKIN
================================ */

#voting-modal {
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  border-radius: 20px;
  box-shadow: var(--glow);
  color: var(--text-light);
  transition: var(--transition);
}

/* Header */
#voting-modal .modal-header h2,
#voting-modal .modal-title {
  background: var(--primary-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* Nominee name */
#voting-modal #nominee-name {
  color: var(--light-gold);
}

/* Inputs */
#voting-modal input,
#voting-modal select {
  background: var(--dark-bg);
  border: 1px solid rgba(212,175,55,.25);
  color: var(--white);
  border-radius: 12px;
  transition: var(--transition);
}

#voting-modal input:focus {
  outline: none;
  box-shadow: var(--glow);
}

/* Payment method cards */
#voting-modal .payment-card {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 16px;
  transition: var(--transition);
}

#voting-modal .payment-card[aria-checked="true"] {
  box-shadow: var(--glow);
  border-color: var(--primary-gold-solid);
}

/* Vote buttons */
#voting-modal .vote-btn,
#voting-modal #proceed-payment {
  background: var(--primary-gold);
  color: var(--black);
  border-radius: 14px;
  font-weight: 700;
  transition: var(--transition);
}

#voting-modal .vote-btn:hover,
#voting-modal #proceed-payment:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow);
}

/* Error & success states */
#voting-modal .error {
  color: var(--error);
}

#voting-modal .success {
  color: var(--success);
}

/* ===============================
   NOTIFY TYPE CARD SELECTION
================================ */
.notify-type-card {
  display: flex;
  gap: 20px;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.notify-option {
  flex: 1;
  padding: 1rem;
  border-radius: 14px;
  border: 2px solid rgba(212, 175, 55, 0.25);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
  width: fit-content;
}

.notify-option h4 {
  font-size: 0.8rem;
  margin-bottom: 0px;
  color: var(--text-light);
}

.notify-option p {
  font-size: 0.85rem;
  color: var(--text-gray);
}

.notify-option:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow);
}

.notify-option.selected {
  border-color: var(--primary-gold-solid);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: var(--glow);
}



      /* ===== Mobile Hidden State ===== */
      @media (max-width: 768px) {
        .category-sidebar {
          position: fixed;
          left: 0;
          top: 0;
          height: 100%;
          width: 80%; /* Use percentage for better adaptation */
          max-width: 320px;
          background: var(--primary-dark);
          transform: translateX(-100%);
          z-index: 9999;
          box-shadow: 4px 0 10px rgba(0, 0, 0, 0.4);
        }
        .category-sidebar.active {
          transform: translateX(0);
        }
        body.sidebar-open::after {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 9998;
        }

        .mobile-mani-nav {
          visibility: visible;
        }
        .mobile-nav-link {
          display: inline;
        }
      }

      /* ===== Desktop Sidebar Collapse ===== */
      .category-sidebar.collapsed {
        width: 70px;
      }
      .category-sidebar.collapsed .category-item span,
      .category-sidebar.collapsed .category-desc,
      .category-sidebar.collapsed .sidebar-logo-img {
        display: none;
      }

      /* ===== Mobile Menu Toggle ===== */

      /* ===== Device-Specific Styling ===== */
      /* iPhone devices */
      @media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) {
        .category-sidebar {
          max-width: 260px;
          font-size: 0.9rem;
        }
        .mobile-menu-toggle {
          font-size: 1.6rem;
        }
        .mobile-mani-nav {
          visibility: visible;
        }
        .mobile-nav-link {
          display: inline;
        }
      }

      /* Samsung phones (common viewport width) */
      @media only screen and (max-device-width: 420px) {
        .category-sidebar {
          width: 90%;
          max-width: 300px;
        }
        .category-item {
          padding: 0.8rem;
          font-size: 0.95rem;
        }
        .mobile-mani-nav {
          visibility: visible;
        }
        .mobile-nav-link {
          display: inline;
        }
      }

      /* iPad Mini Portrait (768x1024) */
      @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
        /* Sidebar */
        .main-container {
          grid-template-columns: 240px 1fr; /* slightly smaller sidebar */
        }
        .category-sidebar {
          width: 240px;
          font-size: 0.95rem;
        }
        .category-item {
          padding: 0.8rem 1rem;
        }

        /* Header */
        .header {
          padding: 1.5rem 0;
          margin-right:1000px;
        }
        .logo-img {
          height: 45px;
        }
        .nav-link {
          font-size: 18px;
          margin-right: 30px;
        }

        /* Stats */
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;
        }
        .stat-card {
          padding: 1.5rem;
        }
        .stat-value {
          font-size: 2rem;
        }

        /* Nominee Cards */
        .nominee-card {
          flex: 0 0 460px;
          height: 460px;
        }
        .nominee-photo {
          height: 60%;
        }
        .nominee-name {
          font-size: 1.3rem;
        }

        /* All Votes Grid */
        .all-votes-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;
        }

        /* Category Page */
        .category-page {
          padding: 6rem 1.5rem 2rem;
        }
        .category-title {
          font-size: 2rem;
        }
        .category-description {
          font-size: 1rem;
        }

        /* Filters */
        .filter-controls {
          gap: 1rem;
        }
        .filter-select {
          min-width: 150px;
          font-size: 0.85rem;
        }

        /* Modal */
        .modal-content {
          width: 90%;
          max-width: 480px;
        }
        .modal-title {
          font-size: 1.3rem;
        }
      }

      /* iPad Air Portrait (820x1180) */
      @media only screen and (min-device-width: 820px) and (max-device-width: 1180px) and (orientation: portrait) {
        /* Sidebar */
        .main-container {
          grid-template-columns: 280px 1fr; /* more space than iPad Mini */
        }
        .category-sidebar {
          width: 280px;
          font-size: 1rem;
        }

        /* Header */
        .header {
          padding: 2rem 0;
        }
        .logo-img {
          height: 50px;
        }
        .nav-link {
          font-size: 19px;
          margin-right: 40px;
        }

        /* Stats */
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 2rem;
        }
        .stat-card {
          padding: 1.8rem;
          width:100%;
        }
        .stat-value {
          font-size: 2.2rem;
        }

        /* Nominee Cards */
        .nominee-card {
          flex: 0 0 280px;
          height: 380px;
        }
        .action-grid {
          grid-template-columns: 1fr 20px;
          gap: 1rem;
              margin: 0.5rem 0 0 0;
        }

        .share-link{
          left:-10px;
        }
        .nominee-photo {
          height: 100%;
        }
        .nominee-name {
          font-size: 1.4rem;
        }

        /* All Votes Grid */
        .all-votes-grid {
          grid-template-columns: repeat(3, 1fr); /* back to 3 columns */
          gap: 2rem;
        }

        /* Category Page */
        .category-page {
          padding: 7rem 2rem 2rem;
        }
        .category-title {
          font-size: 2.3rem;
        }
        .category-description {
          font-size: 1.05rem;
        }

        /* Filters */
        .filter-controls {
          gap: 1.2rem;
        }
        .filter-select {
          min-width: 170px;
          font-size: 0.9rem;
        }

        /* Modal */
        .modal-content {
          width: 85%;
          max-width: 520px;
        }
        .modal-title {
          font-size: 1.4rem;
        }
      }

      /* iPad Air Landscape (1180x820) */
      @media only screen and (min-device-width: 820px) and (max-device-width: 1180px) and (orientation: landscape) {
        /* Sidebar */
        .main-container {
          grid-template-columns: 300px 1fr;
        }
        .category-sidebar {
          width: 300px;
        }

        /* Stats */
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 2.2rem;
        }

        /* All Votes Grid */
        .all-votes-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 2.2rem;
        }

        /* Nominee Cards */
        .nominee-card {
          flex: 0 0 300px;
          height: 400px;
        }
      }

      /* Tablets (portrait & landscape) */
      @media only screen and (min-width: 600px) and (max-width: 1024px) {
        
      }

      /* Flip phones & very small screens */
      @media only screen and (max-width: 320px) {
        .category-sidebar {
          width: 100%;
          font-size: 0.8rem;
        }
        .category-item {
          padding: 0.6rem;
        }
        .mobile-menu-toggle {
          font-size: 1.4rem;
        }
        .mobile-mani-nav {
          visibility: visible;
        }
      }

      /* Responsive Styles */
      @media (max-width: 1200px) {
        .all-votes-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .mobile-mani-nav {
          display: block;
          visibility: visible;
        }
      }

      @media (max-width: 992px) {
        .mobile-mani-nav {
          visibility: visible;
          display: block;
        }
        .category-sidebar {
          width: 220px;
        }

        .category-page {
          margin-left: 220px;
        }

        .stats-grid {
          grid-template-columns: 1fr;
        }

        .footer-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 768px) {
        body {
          overflow-x: hidden;
        }
        .content-area {
          overflow-x: hidden;
        }
        .main-nav,
        .auth-container {
          display: none;
        }

        .mobile-menu-toggle {
          display: block;
        }

        .mobile-mani-nav {
          visibility: visible;
          display: block;
        }

        .category-sidebar {
          transform: translateX(-100%);
          transition: var(--transition);
        }

        .category-sidebar.active {
          transform: translateX(0);
        }

        .category-page {
          margin-left: 0;
        }

        .all-votes-grid {
          grid-template-columns: 1fr;
        }

        .footer-grid {
          grid-template-columns: 1fr;
        }

        .filter-controls {
          flex-direction: column;
        }

        .filter-select,
        .search-bar {
          width: 100%;
          max-width: none;
        }

        .modal-content {
          scale: 0.85;
        }
        #toast-container {
          font-size: smaller;
          width: 350px;
          left: 200px;
          scale: 0.8;
          top: 100px;
        }
        #turnstile-widget {
          margin-left: -40px;
        }
      }

      @media (max-width: 480px) {
        .container {
          padding: 0 1rem;
        }

        .mobile-mani-nav {
          display: block;
          visibility: visible;
        }

        .nominee-card {
          flex: 0 0 280px;
        }
      }

      /* Responsive Design */
      @media (max-width: 1200px) {
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .mobile-mani-nav {
          display: block;
          visibility: visible;
        }

        .all-votes-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 992px) {
        .header-content {
          padding: 0 1rem;
        }

        .main-nav {
          gap: 1.5rem;
        }

        .mobile-mani-nav {
          display: block;
          visibility: visible;
        }

        .nominee-card {
          flex: 0 0 250px;
          height: 380px;
        }
      }

      /* Tablet Styles */
      @media (max-width: 768px) {
        .container {
          padding: 0 1rem;
        }
        .main-nav {
          display: none;
        }

        .mobile-menu-toggle {
          display: block;
        }

        .mobile-mani-nav {
          display: block;
          visibility: visible;
        }

        .logo {
          margin-left: 0px;
        }

        .auth-container {
          display: none;
        }

        .stats-grid {
          grid-template-columns: 1fr;
          width:97%;
        }

        .all-votes-grid {
          grid-template-columns: 1fr;
        }

        .nominee-card {
          flex: 0 0 220px;
          height: 350px;
        }

        .category-sidebar {
          width: 280px;
        }

        .main-container {
          width:100%;
          grid-template-columns: 100% minmax(0, 1fr);
          padding:0 0 0 0rem;
        }

        

        .category-sidebar.collapsed {
          width: 70px;
        }

        .main-container.is-collapsed {
          grid-template-columns: 70px 1fr;
        }

        .content-area {
          padding: 2rem 0.5rem;
        }

        .section-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 1rem;
        }

        .filter-controls {
          flex-direction: column;
          width: 100%;
        }

        .search-bar {
          max-width: 100%;
        }
        .mobile-menu-toggle {
          display: flex;
          align-items: center;
          justify-content: center;
          background: none;
          border: none;
          color: var(--white);
          font-size: 1.8rem;
          cursor: pointer;
          z-index: 10000;
        }
        .sidebar-toggle:hover,
        .mobile-menu-toggle:hover {
          transform: scale(1.1);
          color: var(--primary-gold-solid);
        }
      }

      /* Mobile Styles */
      @media (max-width: 576px) {
        .header {
          padding: 1rem 0;
        }

        .logo-text {
          font-size: 1.5rem;
        }

        .logo-img {
          height: 30px;
        }
       .dashboard-section .container{
          padding:0rem 0rem 0rem 1rem;

        }

        .dashboard-section {
          padding-top: 5rem;
        }

        .category-sidebar {
          width: 100%;
          position: fixed;
          z-index: 1000;
          transform: translateX(-100%);
          transition: transform 0.3s ease;
        }

        .category-sidebar.active {
          transform: translateX(0);
        }

        .main-container {
          grid-template-columns: 1fr;
        }

        .main-container.is-collapsed .category-sidebar {
          transform: translateX(0%);
        }

        .content-area {
          margin-left: 0;
          padding: 1rem;
        }

        .category-sidebar.collapsed + .content-area {
          margin-left: 0;
        }

        .sidebar-toggle {
          visibility: hidden;
        }

        .mobile-sidebar-toggle {
          display: block;
          position: fixed;
          bottom: 1rem;
          right: 1rem;
          z-index: 900;
          background: var(--primary-gold);
          color: var(--primary-dark);
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.5rem;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .mobile-mani-nav {
          display: block;
          visibility: visible;
        }

        .nominee-card {
          flex: 0 0 300px;
          height: 400px;
        }

        .nominees-scroller {
          gap: 0.8rem;
          scale: 1.1;
        }

        .all-votes-grid .nominee-card {
          height: 420px;
        }

        .BeBtn {
          margin-top: 15px;
          margin-left: 0px;
        }

        .stat-card {
          padding: 1rem;
        }

        .stat-value {
          font-size: 1.5rem;
        }

        .section-title {
          font-size: 1.5rem;
        }

        .modal-content {
          width: 95%;
          margin: 0.5rem;
        }
      }

      /* Very small mobile devices */
      @media (max-width: 380px) {
        .logo-text {
          font-size: 1.2rem;
        }

        .nominee-card {
          flex: 0 0 280px;
          height: 380px;
        }

        .stat-icon {
          font-size: 1.5rem;
        }

        .stat-value {
          font-size: 1.3rem;
        }

        .btn {
          padding: 0.7rem 1.5rem;
          font-size: 0.8rem;
        }
      }

      /* Mobile-specific enhancements */
      @media (hover: none) {
        .nominee-card:hover {
          transform: none;
        }

        .nominee-card .nominee-description {
          display: none;
          bottom: 0;
          opacity: 0.9;
        }

        .vote-btn:active {
          transform: scale(0.97);
        }

        .nav-link:active {
          color: var(--light-gold);
        }

        .nav-link:active::after {
          width: 100%;
        }
      }

      /* Tablet-specific adjustments */
      @media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
          padding: 0 1rem 0rem 0.5rem;
        }

        .search-bar{
          max-width:400px;
          margin-left:13px;
          margin-right: 20px;
        }

        .all-votes-grid {
          grid-template-columns: repeat(2, 1fr);
          padding: 0 0.5rem 0 0;
        }

        .nominee-card {
          flex: 0 0 280px;
          height: 440px;
        }

        .dashboard-section .container {
          padding: 0rem 0rem 0rem 14.0rem;
          
        }

        .content-area {
          padding: 1rem 0rem 1rem 1.5rem;
          margin-left: -280px;
          margin-right:0px;
        }
        .category-sidebar {
          width: 250px;
        }
        .category-item {
          font-size: 1rem;
        }
       
        .mobile-mani-nav {
          display: inline-flex;
        }
        .mobile-menu-toggle {
          
        }
        .sidebar-toggle {
          display: none;
        }
        .category-sidebar {
          width: 90%;
        }

        .dashboard-section {
          margin-left: 20px;
        }
        .BeBtn {
          margin-left: 10px;
        }
        .stats-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          width: 100%;
          gap: 1rem;

        }
        .main-nav {
          gap: 0.1rem;
          margin-left: 40px;
          display: inline-flex;
        }
        .nav-link {
          font-size: 20px;
          display:inline-flex;
        }
      }

      @media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
        .nominee-card {
          flex: 0 0 220px;
          height: 320px;
        }
      }