/* Global Styling */
:root {
    /* Main PancakeSwap colors */
     /* Light theme colors */
  --primary-color-light: #8D5AE1;
  --secondary-color-light: #1FC7D4;
  --background-color-light: linear-gradient(180deg, #CBD7EF, #9A9FD0);
/*  --background-color-darknew: linear-gradient(139.73deg,#313D5C,#3D2A54);*/  
  
   --background-color-darknew:linear-gradient(180deg, #434575, #66578D);
  
  --card-background-light: #ffffff;
  --panel-background-light: #f1f3f5;
  --border-color-light: #e1e3e5;
  --text-primary-light: #280D5F;
  --text-secondary-light: #F4EEFF;
  --colors-secondarylight: #A881FC;
   --header-back-ground-light:white;
    /* Dark theme colors (existing) */
    --primary-color-dark: #8D5AE1;
    --secondary-color-dark: #1FC7D4;
  
    --background-color-dark: #08060B;
    --card-background-dark: #27262c;
    --panel-background-dark: #1E1D20;
    ---border-color-dark: #383241;
    --text-primary-dark: #F4EEFF;
    --text-secondary-dark: #B8ADD2;
    
    --text-disabled: #666171;   
    
    --text-primary: #F4EEFF;
    --text-secondary: #B8ADD2;
    --up-color: #31D0AA;
     --border-color: #383241;
    --down-color: #ED4B9E;
    --accent-color: #ED4B9E;
    --yellow-color: #FFB237;
    --green-color: #31D0AA;
    --header-back-ground-dark:#10111B;
     --next-panel-dark:#8D5AE1;
    --later-panel-dark:#383241;
    --live_expire-dark:#141414;
    
    --next-panel-light:#E4DAF7;
    --later-panel-light:#E4DAF7;
    --live_expire-light:#E4DAF7;
    
   
    
      /* Default to dark theme */
  --primary-color: var(--primary-color-dark);
  --secondary-color: var(--secondary-color-dark);
  --background-color: var(--background-color-dark);
  --card-background: var(--card-background-dark);
  --panel-background: var(--panel-background-dark);
  --border-color: var(--border-color-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --header-back-ground: var(--header-back-ground-dark);
  
    --colors-gradientPrimary: linear-gradient(228.54deg, #1FC7D4 -13.69%, #8D5AE1 91.33%);
    --colors-gradientBubblegum: linear-gradient(139.73deg, #E5FDFF, #F3EFFF);
    --colors-gradientInverseBubblegum: linear-gradient(139.73deg, #F3EFFF, #E5FDFF);
    --colors-gradientCardHeader: linear-gradient(111.68deg, #F2ECF2, #E8F2F6);
    --colors-gradientBlue: linear-gradient(180deg, #A7E8F1, #94E1F2);
    --colors-gradientViolet: linear-gradient(180deg, #E2C9FB, #CDB8FA);
    --colors-gradientVioletAlt: linear-gradient(180deg, #CBD7EF, #9A9FD0);
    --colors-gradientGold: linear-gradient(180deg, #FFD800, #FDAB32);
    --colors-gradientBold: linear-gradient(#53DEE9, #8D5AE1);
    
    
   
}
  
  
  
    



[data-theme="light"] {
  --primary-color: var(--primary-color-light);
  --secondary-color: var(--secondary-color-light);
  --background-color: var(--background-color-light);
   --background-color-new: var(--background-color-light);
  --card-background: var(--card-background-light);
  --panel-background: var(--panel-background-light);
  --border-color: var(--border-color-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--colors-secondarylight);
  --header-back-ground: var(--header-back-ground-light);
   --colors-secondary: var(--colors-secondarylight);
   --text-secondary-footer: var(--text-secondary-light);
    --next-panel: var(--next-panel-light);
    --later-panel: var(--later-panel-light);
    --live_expire: var(--live_expire-light);
   --box-color: #E4DAF7;
   --title-color: #8D5AE1;;
  
}
[data-theme="dark"] {
  --primary-color: var(--primary-color-dark);
  --secondary-color: var(--secondary-color-dark);
  --background-color: var(--background-color-dark);
  --background-color-new: var(--background-color-darknew);
  --card-background: var(--card-background-dark);
  --panel-background: var(--panel-background-dark);
  --border-color: var(--border-color-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --header-back-ground: var(--header-back-ground-dark);
   --colors-secondary: var(--colors-secondarylight);
    --text-secondary-footer:var(--text-secondary-dark);
    --next-panel: var(--next-panel-dark);
    --later-panel: var(--later-panel-dark);
     --live_expire: var(--live_expire-dark);
    --box-color: #31254D;
    --title-color: white;
  
  
}
.livepanel,.expiredpanel{
    background: var(--live_expire)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.footer-logo span,.footer-col h4{color: var(--colors-secondary)}
body {
    font-family: 'Kanit', sans-serif;
    color: var(--text-primary);
    background-color: var(--background-color);
    background-image: linear-gradient(
        180deg, 
        rgba(8, 6, 11, 0.95) 0%, 
        rgba(20, 13, 41, 0.95) 50%, 
        rgba(11, 8, 19, 0.95) 100%
    );
    min-height: 100vh;
}
.selected-numbers{min-height: 30px; !important}

a {
    text-decoration: none;
    color: var(--text-primary);
}

ul {
    list-style: none;
}

h2,h4,h3,h5,h6{color:var(--title-color);}
p{color:var(--title-color);}
h4{color:var(--title-color);}


    .account_balance_usd{font-size: 32px;
    color: var(--primary-color);
    font-weight: 600;}
    .d-none{display: none !important}
     .lottery-box {

        }
        .lottery-header {
            background: var(--primary-color);
            color: white;
            font-weight: bold;
            padding: 8px;
            border-radius: 5px;
            margin-bottom: 10px;
            text-align: center;
        }
        .selected-numbers {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin-bottom: 10px;
        }
        .selected-circle {
            width: 30px;
            height: 30px;
            background: var(--primary-color);
            color: white;
            font-weight: bold;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
        }
        .number-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            justify-content: center;
        }
       
        .btn-container {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .top-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        .line-buttons {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin-bottom: 20px;
        }
         .sidebar {
            position: fixed; top: 50px; right: 20px;
            width: 250px; background: white; padding: 15px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        .sidebar h4 { font-size: 18px; margin-bottom: 10px; }
        .sidebar p { font-size: 16px; font-weight: bold; }
        .pay-btn {
            width: 100%; padding: 10px; background: #ff5722;
            color: white; border: none; border-radius: 5px;
            font-size: 18px; cursor: pointer;
        }
    
        .lottery-container {
            max-width: 1200px;
            margin: 10px auto 40px;
            padding: 20px;
        }
        .prize-section {
            background: var(--card-background);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .prize-info h2 {
            font-size: 24px;
            margin-bottom: 8px;
        }
        .prize-amount {
            font-size: 32px;
            color: var(--primary-color);
            font-weight: 600;
        }
        .timer {
            display: flex;
            gap: 12px;
        }
        .time-unit {
            background: var(--panel-background);
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            min-width: 80px;
            float: left;
            margin: 0 10px;
        }
        .time-value {
            font-size: 24px;
            font-weight: 600;
            color: var(--primary-color);
        }
        .time-label {
            font-size: 14px;
            color: var(--text-secondary);
        }
        .lines-selector {
            display: flex;
            gap: 12px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }
        .line-option {
            padding: 8px 16px;
            background: var(--panel-background);
            border-radius: 8px;
            cursor: pointer;
        }
        .line-option.active {
            background: var(--primary-color);
        }
        .hex-grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-bottom: 24px;
            margin-top: 24px;
        }
        
        @media only screen and (max-width: 767px) {
            .hex-grid-container {grid-template-columns: repeat(1, 1fr);}
            .prize-info h2{font-size:18px;}
            .prize-amount{font-size:24px;}
            
        }

        /* Tablets (768px to 1024px) */
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
           .hex-grid-container {grid-template-columns: repeat(2, 1fr);}
        }
        
        .hex-grid-section {
            background: var(--card-background);
            border-radius: 16px;
            padding: 12px;
        }
        .hex-grid-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .hex-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
        .hex-button {
            padding: 9px;
            background: var(--panel-background);
            border: none;
            border-radius: 8px;
            color: var(--text-primary);
            cursor: pointer;
            font-size: 16px;
        }
        .hex-button.selected,.hex-button:hover {
            background: var(--primary-color);
        }
        
        
        .summary-section {
            background: var(--card-background);
            border-radius: 16px;
            padding: 24px;
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .buy-tickets-btn {
            width: 100%;
            margin-top: 16px;
        }
        .float_left_withmargin{float: left; margin: 0 10px;}
         .result-card__img{width: 50px;}
         
         .green-color{color:var(--green-color);}
         .jackpot{color: var(--yellow-color);}
 
.btcloto-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 12, 12, 0.7);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;    
}

/* Spinner */
.btcloto-spinner {
    width: 100px;
    height: 100px;
    border: 9px solid #6d28d9;
    border-top: 6px solid #22d3ee;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 20px #6d28d9;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} 
        /* Error Alert Box */
.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Success Alert Box */
.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}
.help-block {
    display: block;
    font-size: 13px;
    color: #dc3545;
}

/* Error Message */
.help-block-error {
    color: #dc3545;
    font-size: 12px;
}

/* Success Message */
.help-block-success {
    color: #28a745;
    font-size: 12px;
}

    .modal {
      display: none;
      position: fixed;
      z-index: 999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      display: flex;
      background: #2c2c3d;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 0 30px rgba(0,0,0,0.5);
      width: 800px;
      max-width: 95%;
      animation: fadeIn 0.4s ease;
    }

    .modal-left {
      flex: 1;
      padding: 30px;
    }

    .modal-right {
      flex: 1;
      background: #3b3b51;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 30px;
      text-align: center;
    }

    .modal h2 {
      margin-bottom: 15px;
    }

    .wallet-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }

    .wallet-btn {
      background: var(--card-background);
      padding: 15px;
      border-radius: 12px;
      text-align: center;
      transition: 0.3s ease;
      cursor: pointer;
      border: 1px solid #444;
    }

    .wallet-btn:hover {
      background: #383855;
      transform: translateY(-2px);
    }

    .wallet-btn img {
      width: 36px;
      height: 36px;
      margin-bottom: 10px;
    }

    .wallet-btn span {
      display: block;
      font-size: 14px;
    }

    .close-btn {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 28px;
      cursor: pointer;
      color: #ccc;
    }

    .close-btn:hover {
      color: white;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }

    .connect-btn {
      background: #7f5af0;
      padding: 12px 25px;
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }

    .connect-btn:hover {
      background: #9c8cf2;
    }

/* Animation */
@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
  .balance-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background:var(--panel-background);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.balance-display i,.balance-display svg {
    color: #f7931a;
}
.mobilenetwork-selector{display: none !important}
.prize-table{width:100%;border-collapse:separate;border-spacing:0}
.prize-table th,.prize-table td{padding:12px 16px;text-align:center}
.prize-table th{color:var(--text-secondary);font-weight:600;font-size:14px}
.prize-table tr:not(:last-child) td{border-bottom:1px solid var(--border-color)}.match-count{display:flex;justify-content:center;align-items:center;gap:6px}
 
@media only screen 
and (max-width : 640px) {
    .mobilenetwork-selector{display: block !important}
  .network-selector{display: none !important}
   .desktop{display: none !important}
/*  .time-unit{min-width: 40px; padding:4px !important}*/
.countdown-timer{display: block !important}
.time-unit{margin-bottom: 10px !important}
}

.language-switcher {
  position: relative;
}
.lang-list {
  display: none;
  position: absolute;
  background: #1e1e1e;
  border-radius: 6px;
  padding: 10px;
  top: 20px;
  right: -7px;
  z-index: 25999;
 
}
.language-switcher:hover .lang-list {
  display: block;
}
.lang-list li {
  list-style: none;
  padding: 4px;
}
.lang-list a {
  color: white;
  text-decoration: none;
}
.lang-toggle {
    background: transparent;
    border: none;
    color: #8D5AE1;
    font-size: 20px;
    cursor: pointer;
}

.lang-toggle:hover {
    color: #5e36b3;
    transform: scale(1.1);
}
.lang-list {
    max-height: 500px; /* or any height you need */
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #8D5AE1 transparent;
}

/* For WebKit browsers (Chrome, Safari, Edge) */
.lang-list::-webkit-scrollbar {
    width: 6px;
}

.lang-list::-webkit-scrollbar-track {
    background: transparent;
}

.lang-list::-webkit-scrollbar-thumb {
    background-color: #8D5AE1;
    border-radius: 10px;
}

/* Utility Classes */
.btn-primary {
   
    color: white;
    border: none;
    border-radius: 16px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);   
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-down:hover,.btn-up:hover{ transform: translateY(-2px);}


.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 16px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: rgba(118, 69, 217, 0.1);
    transform: translateY(-2px);
}

.btn-small {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-small:hover {
    background-color: #8A58E9;
}

/* Header Styling */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--header-back-ground);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
/*    max-width: 1200px;*/
    margin: 0 auto;
    padding: 12px 20px;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    margin-right: 30px;
}

.logo span {
    font-weight: 600;
    font-size: 18px;
    margin-left: 8px;
}

.pancake-logo {
    width: 32px;
    height: 32px;
}

.main-nav ul {
    display: flex;
    gap: 24px;
}

.main-nav a {
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s ease;
}

.main-nav a.active {
    color: var(--primary-color);
}

.main-nav a:hover {
    color: var(--primary-color);
}

.dropdown {
    position: relative;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--panel-background);
    min-width: 180px;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 8px 0;
    margin-top: 8px;
}

.dropdown-content a {
    display: block;
    padding: 10px 16px;
    color: var(--text-primary);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.connect-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.network-selector {
    display: flex;
    align-items: center;
    background-color: var(--panel-background);
    border-radius: 16px;
    padding: 8px 12px;
    cursor: pointer;
}

.network-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
}


.disconnect-wallet-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 12px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.disconnect-wallet-btn:hover {
    background-color: #8A58E9;
}

.disconnect-wallet-btn.connected {
    background-color: var(--green-color);
    font-family: monospace;
}

.connect-wallet-btn {
    background-color: var(--yellow-color);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.connect-wallet-btn:hover {
    background-color: #e69e24;
}

.connect-wallet-btn.connected {
    background-color: var(--green-color);
    font-family: monospace;
}

.settings-icon {
    color: var(--text-primary);
    cursor: pointer;
    margin-top: 6px;
}

/* Hero Section */
.hero {
    padding-top: 120px;
    padding-bottom: 60px;
    position: relative;
    overflow: hidden;
/*    background: linear-gradient(139.73deg, rgba(49, 61, 92, 0.3) 0%, rgba(61, 42, 84, 0.3) 100%);*/
background: linear-gradient(180deg,#43454B,#66578D);
background:linear-gradient(139.73deg,#313D5C,#3D2A54);
    background: var(--background-color);

}

.hero-content {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: center;
}

.hero-text {
    flex: 1;
    padding-right: 20px;
}

.hero-text h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    background: linear-gradient(166deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text p {
    font-size: 20px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    max-width: 600px;
    line-height: 1.5;
}

.hero-buttons {
    display: flex;
    gap: 16px;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.floating-image {
/*    width: 300px;*/
    height: 300px;
    object-fit: cover;
    border-radius: 24px;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

.stats-container {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 60px;
}

.stat-box {
    background-color: var(--card-background);
    border-radius: 16px;
    padding: 24px;
    width: 280px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stat-title {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.stat-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--primary-color);
}

/* Trade Section */
.trade-section, .earn-section, .win-section {
    padding: 80px 0;
}

.section-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: center;
}

.section-container.reverse {
    flex-direction: row-reverse;
}

.section-content {
    flex: 1;
    padding-right: 40px;
}

.section-container.reverse .section-content {
    padding-right: 0;
    padding-left: 40px;
}

.section-content h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.section-content p {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    line-height: 1.5;
}

.learn-more {
    margin-top: 16px;
}

.learn-more a {
    color: var(--primary-color);
    font-weight: 500;
    transition: color 0.3s ease;
}

.learn-more a:hover {
    color: #8A58E9;
    text-decoration: underline;
}

.section-image {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.interface-image {
    width: 450px;
    height: 300px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* CAKE Token Section */
.cake-section {
    padding: 80px 0;
    background: linear-gradient(139.73deg, rgba(49, 61, 92, 0.2) 0%, rgba(61, 42, 84, 0.2) 100%);
}

.cake-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cake-text {
    text-align: center;
    margin-bottom: 60px;
}

.cake-text h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}

.cake-text p {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.cake-details {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cake-card {
    background-color: var(--card-background);
    border-radius: 24px;
    padding: 24px;
    width: 280px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.cake-card h3 {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.cake-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.cake-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Win Section */
.lottery-image {
    width: 450px;
    height: 300px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.lottery-card {
    background-color: var(--card-background);
    border-radius: 16px;
    padding: 16px;
    width: 300px;
    text-align: center;
/*    position: absolute;*/
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.lottery-card:nth-child(2) {
    top: 20px;
    right: 30px;
}

.lottery-card:nth-child(3) {
    bottom: 20px;
    left: 30px;
}

.lottery-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.lottery-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--yellow-color);
    margin-bottom: 4px;
}

.lottery-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* Partners Section */
.partners-section {
    padding: 80px 0;
    text-align: center;
}

.partners-section h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 40px;
}

.partners-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.partner-card {
    background-color: var(--card-background);
    border-radius: 16px;
    padding: 24px;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: transform 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-10px);
}

.partner-logo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.partner-card span {
    font-weight: 600;
    font-size: 18px;
}

/* Start Section */
.start-section {
    padding: 80px 0;
    background: linear-gradient(139.73deg, rgba(49, 61, 92, 0.2) 0%, rgba(61, 42, 84, 0.2) 100%);
}

.start-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: center;
}

.start-content {
    flex: 1;
    padding-right: 40px;
}

.start-content h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}

.start-content p {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.5;
}

.start-content button {
    margin-top: 20px;
    margin-bottom: 16px;
}

.learn-link {
    color: var(--primary-color);
    font-weight: 500;
    transition: color 0.3s ease;
}

.learn-link:hover {
    color: #8A58E9;
    text-decoration: underline;
}

.start-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Lottery Hero Section */
.lottery-hero {
    padding-top: 120px;
    padding-bottom: 60px;
/*    background: linear-gradient(139.73deg, rgba(49, 61, 92, 0.3) 0%, rgba(61, 42, 84, 0.3) 100%);*/
/*background: linear-gradient(180deg,#43454B,#66578D);
background: linear-gradient(139.73deg,#313D5C,#3D2A54)*/
background: var(--background-color-new);
}

.lottery-hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

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

.lottery-info h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
    background: linear-gradient(166deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lottery-description {
    font-size: 24px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.lottery-prize {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.lottery-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.lottery-stats {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.lottery-stat-box {
    background: var(--card-background);
    border-radius: 24px;
    padding: 24px;
    min-width: 280px;
    text-align: center;
}

.lottery-stat-box h3 {
    font-size: 20px;
    margin-bottom: 16px;
    color: var(--text-secondary);
}
.countdowna {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.countdown {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.time-unit {
    background: var(--panel-background);
    border-radius: 8px;
    padding: 12px;
    min-width: 80px;
}

.time-unit .number {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
    display: block;
}

.time-unit .label {
    font-size: 14px;
    color: var(--text-secondary);
}

.prize-amount {
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.token-amount {
    font-size: 18px;
    color: var(--text-secondary);
}

/* How to Play Section */
.how-to-play {
    padding: 80px 0;
    text-align: center;
}

.how-to-play h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.steps-container {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.step-card {
    background: var(--card-background);
    border-radius: 24px;
    padding: 24px;
    min-width: 280px;
    max-width: 320px;
    position: relative;
}

.step-number {
    background: var(--primary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    margin: 0 auto 16px;
}

.step-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.step-card p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .lottery-hero-content {
        gap: 24px;
    }

    .lottery-info h1 {
        font-size: 36px;
    }

    .lottery-description {
        font-size: 20px;
    }

    .lottery-buttons {
        flex-direction: column;
        align-items: center;
    }

    .lottery-buttons button {
        width: 100%;
        max-width: 280px;
    }

    .lottery-stat-box {
        width: 100%;
    }
}

/* Footer */
footer {
    
    background-color: rgba(0, 0, 0, 0.4);
    padding: 60px 0 20px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.footer-logo span {
    font-weight: 600;
    font-size: 18px;
    margin-left: 8px;
}

.footer-links {
    display: flex;
    gap: 60px;
    margin-bottom: 30px;
}

.footer-col h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col a {
    color: var(--text-secondary-footer);
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--primary-color);
}

.footer-social {
    display: flex;
    gap: 16px;
}

.social-icon {
    background-color: var(--panel-background);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.social-icon:hover {
    background-color: var(--primary-color);
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    border-top: 1px solid var(--border-color);
    margin-top: 40px;
    text-align: center;
}

.footer-bottom p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    cursor: pointer;
    padding: 10px;
}

.mobile-menu-toggle i {
    color: var(--text-primary);
    width: 24px;
    height: 24px;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .section-container, .hero-content, .start-container {
        flex-direction: column;
        text-align: center;
    }

    .section-container.reverse {
        flex-direction: column;
    }

    .section-content, .section-container.reverse .section-content, .start-content {
        padding: 0 20px 40px;
    }

    .hero-text {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .hero-buttons {
        justify-content: center;
    }

    .interface-image, .lottery-image {
        width: 100%;
        max-width: 450px;
    }

    .stats-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .cake-details {
        flex-direction: column;
        align-items: center;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .header-container {
        flex-direction: row;
        justify-content: space-between;
        padding: 12px;
        position: relative;
    }

    .logo-container {
        flex-direction: row;
        margin-bottom: 0;
    }

    .logo {
        margin-right: 0;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--card-background);
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    .main-nav.show {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 16px;
    }

    .main-nav ul li {
        width: 100%;
        text-align: left;

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--card-background);
    padding: 32px;
    border-radius: 24px;
    width: 90%;
    max-width: 480px;
}

.modal-content h2 {
    font-size: 24px;
    margin-bottom: 16px;
}

.modal-subtitle {
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Buy Tickets Page */
.buy-tickets-container {
    max-width: 600px;
    margin: 120px auto 40px;
    padding: 20px;
}

.ticket-form {
    background: var(--card-background);
    border-radius: 24px;
    padding: 32px;
}

.ticket-form h1 {
    margin-bottom: 24px;
    text-align: center;
}

.ticket-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--panel-background);
    border-radius: 12px;
}

.price {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color);
}

.ticket-quantity {
    margin-bottom: 24px;
}

.quantity-input {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.quantity-input input {
    width: 100%;
    padding: 8px;
    text-align: center;
    background: var(--panel-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
}

.quantity-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.quantity-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.quantity-buttons button {
    background: var(--panel-background);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.ticket-total {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--panel-background);
    border-radius: 12px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.buy-button {
    width: 100%;
}

/* View Tickets Page */
.view-tickets-container {
    max-width: 1200px;
    margin: 120px auto 40px;
    padding: 20px;
}

.tickets-list h1 {
    margin-bottom: 24px;
    text-align: center;
}

.round-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    justify-content: center;
}

.round-selector button {
    background: var(--panel-background);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}

.round-selector button.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.tickets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.ticket-card {
    background: var(--card-background);
    border-radius: 16px;
    padding: 20px;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ticket-number {
    font-weight: 600;
}

.ticket-date {
    color: var(--text-secondary);
    font-size: 14px;
}

.ticket-numbers {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.number {
    background: var(--panel-background);
    padding: 8px;
    border-radius: 8px;
    min-width: 40px;
    text-align: center;
}

.ticket-status {
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    font-size: 14px;
}

.ticket-status.pending {
    background: rgba(255, 178, 55, 0.1);
    color: var(--yellow-color);
}

/* Dashboard Page */
.dashboard-container {
    max-width: 1200px;
    margin: 120px auto 40px;
    padding: 20px;
}

.dashboard-header {
    margin-bottom: 40px;
    text-align: center;
}

.wallet-info {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 24px;
}

.balance-card {
    background: var(--card-background);
    border-radius: 16px;
    padding: 20px;
    min-width: 200px;
}

.balance-card h3 {
    margin-bottom: 12px;
    color: var(--text-secondary);
}

.balance {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.dashboard-card {
    background: var(--card-background);
    border-radius: 16px;
    padding: 24px;
}

.dashboard-card h2 {
    margin-bottom: 20px;
}

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

.stat-value {
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: var(--panel-background);
    border-radius: 8px;
}

.activity-type {
    font-weight: 500;
}

.activity-value {
    color: var(--primary-color);
}

.activity-time {
    color: var(--text-secondary);
    font-size: 14px;
}

@media (max-width: 768px) {
    .wallet-info {
        flex-direction: column;
        align-items: stretch;
    }

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

    .activity-item {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}


.modal-description {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
}

.wallet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.wallet-option {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--panel-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wallet-option:hover {
    background-color: rgba(118, 69, 217, 0.1);
    border-color: var(--primary-color);
}

.wallet-option img {
    width: 32px;
    height: 32px;
}

.wallet-option span {
    color: var(--text-primary);
    font-weight: 500;
}

    }

  

    .connect-container {
        margin-top: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-text h1 {
        font-size: 36px;
    }

    .hero-text p {
        font-size: 18px;
    }

    .section-content h2, .cake-text h2, .partners-section h2, .start-content h2 {
        font-size: 28px;
    }

    .section-content p, .cake-text p, .start-content p {
        font-size: 16px;
    }

    .lottery-card {
        position: static;
        margin: 10px auto;
        width: 90%;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .hero-buttons, .cake-text {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .btn-primary, .btn-secondary {
/*        width: 100%;*/
        max-width: 280px;
    }

    .hero-text h1 {
        font-size: 30px;
    }

    .floating-image, .interface-image, .lottery-image {
        width: 100%;
        height: auto;
        max-width: 300px;
    }

    .partner-card {
        width: 140px;
    }

    .footer-social {
        flex-wrap: wrap;
        justify-content: center;
    }
}