:root {
  --primary: #2f6bff;
  --secondary: #ff7a18;
  --dark: #0b1c3f;
  --light: #f4f7ff;
}

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

.Homebody {
background-color: rgb(255, 255, 255);

  color: #222;
}

header {
  
 
  font-family: Helvetica, sans-serif;
  
 
   display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 16px 6%;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* LOGO */
/* =========================
   LOGO – PREMIUM GREEN 3D
========================= */
/* =========================
   LOGO – CLEAN GREEN 3D (NO GLOW / NO ANIMATION)
========================= */
.logo {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;

  /* Static premium green gradient */
  background: linear-gradient(
    180deg,
    #2cff00,
    #00b14f,
    #007a2d
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  /* Subtle 3D depth (professional) */
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.18),
    0 2px 3px rgba(0, 0, 0, 0.22),
    0 4px 6px rgba(0, 0, 0, 0.28);
}


/* NAV — ALWAYS VISIBLE */
nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 8px;
}

nav a {
  text-decoration: none;
  color: #444;
  font-weight: 500;
  font-size: 15px;
  transition: color 0.2s ease;
}

nav a:hover {
  color: #2f6bff;
}

/* ACTION BUTTONS */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions a {
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

/* BUTTON STYLES */
.demo-btn {
  color: #00a04b;
  border: 1px solid #00a04b;
  background: transparent;
}

.start-btn {
  background: linear-gradient(90deg, #2f6bff, #ff7a18);
  color: #fff;
  border: none;
}

/* ===== INFO SECTION ===== */
.info {
  padding: 80px 6%;
  background: var(--light);
  text-align: center;
}

.info h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.info p {
  max-width: 800px;
  margin: auto;
  font-size: 17px;
  color: #555;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  header {
    padding: 14px 4%;
    gap: 10px;
  }

  nav {
    gap: 14px;
  }

  nav a {
    font-size: 14px;
  }

  .header-actions a {
    padding: 8px 14px;
    font-size: 13px;
  }

  .hero-content h1 {
    font-size: 34px;
  }

  .search-box {
    flex-direction: column;
    border-radius: 20px;
  }

  .search-box button {
    padding: 14px;
    border-radius: 0 0 20px 20px;
  }
}

@media (max-width: 680px) {
  header {
    flex-wrap: wrap;
    /* allows wrapping without hiding */
    justify-content: center;
    text-align: center;
  }

  nav {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }

  .header-actions {
    margin-top: 8px;
  }

  .hero {
    padding-top: 60px;
  }

  .hero-content p {
    font-size: 16px;
  }
}







.prereg-section {
  width: 100%;
  padding: 20px;
  background: transparent;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;

  align-items: stretch; /* equal height rows */
}


/* CARD */
.game-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

  height: 100%; /* key */
}



/* IMAGE */
.game-card img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
}

/* INFO */
.game-info {
  flex: 1;
}

.game-info h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
}

.game-info p {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.game-info span {
  font-size: 12px;
  color: #999;
}

/* ACTIONS — ALWAYS COLUMN */
.game-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* BUTTONS */
.btn-green {
  background: #2ecc71;
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.btn-blue {
  background: #2f6bff;
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
@media (max-width: 768px) {
  .prereg-section {
    flex-direction: column;
  }

  .game-card {
    max-width: 100%;
    
  }
}


/* RESPONSIVE */
@media (max-width: 480px) {
 .prereg-section {
    grid-template-columns: 1fr;
  }

  .game-card {
    padding: 10px;
    gap: 10px;
  }

  .game-card img {
    width: 48px;                /* smaller image */
    height: 48px;
    border-radius: 8px;
  }

  .game-info h4 {
    font-size: 13px;
    margin-bottom: 2px;
  }

  .game-info p {
    font-size: 12px;
    margin-bottom: 2px;
  }

  .game-info span {
    font-size: 11px;
  }

  .game-actions {
    gap: 6px;                   /* tighter buttons */
  }

  .btn-green,
  .btn-blue {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 6px;
  }
}








.image-hero {
  position: relative;
  width: 100%;
  height: 55vh;
  overflow: hidden;
}

/* IMAGE FULL COVER */
.image-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* GRADIENT OVERLAY + TEXT */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0.731));

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 0 6%;
  color: #ffffff;
}

/* TEXT STYLES */
.hero-overlay h1 {
  font-size: 46px;
  font-weight: 800;
  margin-bottom: 12px;
}

.hero-overlay p {
  font-size: 18px;
  max-width: 620px;
  line-height: 1.6;
  opacity: 0.95;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .image-hero {
    height: 45vh;
  }

  .hero-overlay h1 {
    font-size: 32px;
  }

  .hero-overlay p {
    font-size: 16px;
  }
}







/* ===== SECTION ===== */
.spin-lucky-section {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 60px 6%;

  flex-wrap: wrap;
}

/* ===== SPIN CONTAINER ===== 
 background: radial-gradient(circle at top, #0f5132, #022c22);*/
.spin-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.spin-title {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(180deg, #ffd966, #ffb703);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
}

/* ===== LUCKY WHEEL ===== */
/* ===== LUCKY WHEEL ===== */
.lucky-wheel {
  width: 240px;
  height: 70px;
  background: linear-gradient(180deg, #e8f5e9, #b2dfdb);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    inset 0 4px 10px rgba(255, 255, 255, 0.6),
    inset 0 -4px 10px rgba(0, 0, 0, 0.15),
    0 12px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* ===== LUCKY TEXT (UP–DOWN SLOT LOOP) ===== */
.lucky-text {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 6px;
  color: #1b5e20;
  animation: luckyMoveVertical 1.8s linear infinite;
}

/* smooth vertical reel movement */
@keyframes luckyMoveVertical {
  0% {
    transform: translateY(103%);
  }

  100% {
    transform: translateY(-103%);
  }
}


/* ===== GAME LIST BOX ===== */
.game-list-box {
  width: 220px;
  height: 200px;
  background: linear-gradient(180deg, #0d6dfd00, #0a57ca00);
  border-radius: 16px;
  padding: 14px;
  color: #1c1b1b;
  
  overflow: hidden;
}

.game-list-box h4 {
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

/* ===== MOVING GAME LIST ===== */
.game-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: scrollGames 3s linear infinite;
}

.game-scroll span {
  background: rgba(79, 79, 79, 0.15);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
}

/* vertical loop animation */
@keyframes scrollGames {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .spin-title {
    font-size: 38px;
  }

  .lucky-wheel {
    width: 200px;
    height: 64px;
  }

  .lucky-text {
    font-size: 28px;
  }

  .game-list-box {
    width: 100%;
    max-width: 460px;
  }

  .spin-lucky-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 60px 6%;

    flex-wrap: wrap;
  }
}







.live-result-box {
  
  margin: 40px auto;
  padding: 30px 24px;
  background: #ffffff00;
  border-radius: 18px;
  text-align: center;

}

/* HEADING */
.live-result-box h1 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #0b1c3f;
}

/* GRADIENT ANIMATED BUTTON */
.live-result-btn {
  padding: 14px 34px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;

  background: linear-gradient(
    270deg,
    #ff004c,
    #ff5f6d,
    #ff2a68
  );
  background-size: 400% 400%;

  animation: liveGradient 3s ease infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* BUTTON HOVER */
.live-result-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 25px rgba(255,0,76,0.45);
}

/* GRADIENT ANIMATION */
@keyframes liveGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* RESPONSIVE */
@media (max-width: 480px) {
  .live-result-box h1 {
    font-size: 22px;
  }

  .live-result-btn {
    font-size: 14px;
    padding: 12px 26px;
  }
}



.header-actions-admin {
  display: flex;
  align-items: center;
  gap: 12px;
}
.menu-btn {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
}

/* SIDEBAR */
.admin-sidebar {
  width: 240px;
  height: 100vh;
  background-color: #f4f4f4;
  position: fixed;
  top: 60px;
  left: 0;
  padding: 20px 0;
  transition: transform 0.3s ease;
  z-index: 1000;
}

.admin-sidebar nav {
  display: flex;
  flex-direction: column;
}

.admin-sidebar a {
  padding: 5px 24px;
  color: #232323;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.admin-sidebar a:hover {
  background: rgba(255,255,255,0.12);
}

/* CONTENT */
.admin-content {
  margin-left: 240px;
  padding: 30px;
}

/* 📱 MOBILE */
@media (max-width: 768px) {
  .menu-btn {
    display: block;
  }

  .admin-sidebar {
    transform: translateX(-100%);
    top: 60px;
  }

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

  .admin-content {
    margin-left: 0;
  }
}














/* ===== MARKETS SECTION ===== */
/* ===== MARKETS SECTION ===== */
.markets-section {
  display: none;
  margin-top: 30px;
}

.markets-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.markets-header h2 {
  font-size: 24px;
  font-weight: 700;
}

/* MARKET LIST */
.market-list {
  display: flex;
  flex-wrap: wrap;        /* allow wrapping */
  gap: 16px;
  padding-bottom: 10px;
}

/* MARKET CARD */
.market-card {
  min-width: 300px;
  background: #ffffff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* HEADER FLEX (ICON + TEXT) */
.market-card-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* ICON IMAGE */
.market-icon {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  background: #f2f2f2;
  flex-shrink: 0;
}
.market-meta {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}


/* TEXT WRAP */
.market-text {
  flex: 1;
}

.market-text h4 {
  font-size: 17px;
  margin: 0 0 4px;
}

.market-text p {
  font-size: 13px;
  color: #666;
  margin: 0 0 6px;
  line-height: 1.4;
}

.market-time {
  font-size: 12px;
  color: #999;
}

/* CARD ACTIONS */
.market-card-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}

/* BUTTONS */
.btn-blue {
  background: #2f6bff;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.btn-red {
  background: #ff4d4f;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.btn-green {
  background: #2ecc71;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* ===== MODAL ===== */
.market-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.market-modal.active {
  display: flex;
}

.market-form-box {
  background: #ffffff;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
}

.market-form-box h3 {
  margin-bottom: 14px;
}

.market-form-box input,
.market-form-box textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.market-form-box textarea {
  resize: none;
  height: 70px;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* MOBILE */
@media (max-width: 600px) {
  .market-list {
    padding-bottom: 20px;
  }
}



.btn-red {
  background: linear-gradient(135deg, #ff4d4d, #ff1744);
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s;
}

.btn-red:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 23, 68, 0.4);
}

#adminBody{
    padding-left: 260px;
  padding-top: 70px;
  box-sizing: border-box;
  padding-right: 9px;

}
@media (max-width: 768px) {
  #adminBody{
    padding-left: 9px;
 

}
}








/* ================= RESULT SECTION ================= */
.results-section {
  padding: 25px;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.results-header h2 {
  font-size: 22px;
  font-weight: 600;
}
.result-list {
  display: flex;
  flex-direction: column;
  gap: 16px;

  height: 70vh;          /* fixed height */
  overflow-y: auto;     /* vertical scroll */
  overflow-x: hidden;

  padding-right: 8px;   /* space for scrollbar */
}

/* Optional: smooth scrollbar (Chrome/Edge) */
.result-list::-webkit-scrollbar {
  width: 6px;
}
.result-list::-webkit-scrollbar-thumb {
  background: #4a90e2;
  border-radius: 6px;
}
.result-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}


.result-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.result-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.result-card h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.result-card p {
  font-size: 14px;
  color: #444;
  margin-bottom: 12px;
}

.result-card button {
  width: 100%;
}
/* ================= RESULT MODAL ================= */
.result-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.result-modal.active {
  display: flex;
}
.result-form-box {
  background: #fff;
  width: 100%;
  max-width: 420px;
  padding: 22px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  animation: fadeScale 0.25s ease;
}

@keyframes fadeScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.result-form-box h3 {
  text-align: center;
  margin-bottom: 15px;
}
.result-form-box label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin: 10px 0 5px;
}

.result-form-box input,
.result-form-box select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
}

.result-form-box input:focus,
.result-form-box select:focus {
  border-color: #1e88e5;
}
.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.form-actions button {
  flex: 1;
}
.btn-blue {
  background: #1e88e5;
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.btn-blue:hover {
  background: #1565c0;
}

.btn-green {
  background: #2e7d32;
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-green:hover {
  background: #1b5e20;
}

.btn-red {
  background: #d32f2f;
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-red:hover {
  background: #b71c1c;
}
@media (max-width: 600px) {
  .result-form-box {
    margin: 15px;
  }
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #eee;
}

.result-row:first-child {
  border-top: none;
}

.result-row strong {
  font-size: 15px;
  letter-spacing: 1px;
}

.result-row small {
  color: #666;
  display: block;
  font-size: 12px;
}
.result-actions {
  display: flex;
  gap: 8px;
}

.result-actions button {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
}
/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {

  .results-section {
    padding: 15px;
  }

  .results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .results-header h2 {
    font-size: 18px;
  }

  .results-header button {
    width: 100%;
  }

  .result-list {
    height: 60vh;      /* better for mobile */
    gap: 12px;
    padding-right: 4px;
  }

  .result-card {
    padding: 14px;
  }

  .result-card h4 {
    font-size: 15px;
  }

  .result-card p {
    font-size: 13px;
  }

  .result-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .result-row strong {
    font-size: 14px;
  }

  .result-row small {
    font-size: 11px;
  }

  .result-actions {
    width: 100%;
  }

  .result-actions button {
    flex: 1;
    padding: 8px 0;
    font-size: 12px;
  }
}

/* ================= EXTRA SMALL DEVICES ================= */
@media (max-width: 480px) {

  .result-list {
    height: 55vh;
  }

  .result-form-box {
    max-width: 100%;
    border-radius: 10px;
    padding: 18px;
  }

  .btn-blue,
  .btn-green,
  .btn-red {
    font-size: 13px;
    padding: 10px;
  }
}


/* ================= DASHBOARD ================= */
.admin-content {
  padding: 30px;
  display: flex;
  ;
  min-height: calc(100vh - 70px);
}

.dashboard-card {
  width: 320px;
  height: 160px;
  border-radius: 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px;
  align-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.dashboard-card.red {
  background: linear-gradient(135deg, #e53935, #b71c1c);
}
.dashboard-card.blue {
  background: linear-gradient(135deg, #354fe5, #0d27be);
}
.dashboard-card h3 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.dashboard-card span {
  font-size: 48px;
  font-weight: 700;
}




/* ================= ADD CHART SECTION ================= */
.chart-section {
  padding: 20px;
  animation: fadeIn 0.3s ease-in-out;
}

/* Header */
.chart-section .results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.chart-section h2 {
  font-size: 22px;
  font-weight: 600;
  color: #222;
}

/* Form box */
.chart-section .result-form-box {
  background: #ffffff;
  max-width: 600px;
  margin: auto;
  padding: 22px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Labels */
.chart-section label {
  font-size: 14px;
  font-weight: 500;
  color: #444;
}

/* Select + Textarea */
#chartMarket,
#chartJson {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #d0d0d0;
  font-size: 14px;
  outline: none;
  background: #fafafa;
  transition: border 0.2s ease;
}

#chartMarket:focus,
#chartJson:focus {
  border-color: #2f80ed;
  background: #fff;
}

/* Textarea */
#chartJson {
  resize: vertical;
  min-height: 200px;
  font-family: monospace;
  line-height: 1.5;
}

/* Buttons */
.chart-section .form-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.chart-section .btn-green,
.chart-section .btn-red {
  flex: 1;
  padding: 12px 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 600px) {
  .chart-section .result-form-box {
    padding: 18px;
  }

  .chart-section h2 {
    font-size: 20px;
  }
}

/* Smooth fade animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Floating scroll buttons */
.scroll-buttons {
  position: fixed;
  right: 16px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.scroll-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #156ac5, #1e5b78);
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.scroll-btn:hover {
  transform: scale(1.08);
  opacity: 0.9;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .scroll-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}












.chart-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 20px 0;
  flex-wrap: wrap;
}

/* COMMON BUTTON STYLE */
.chart-actions button {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

/* PRINT BUTTON */
#printBtn {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
}

#printBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.45);
}

#printBtn:active {
  transform: scale(0.97);
}

/* LOAD MORE BUTTON */
#loadMoreBtn {
  background: #ffffff;
  color: #1e40af;
  border: 2px solid #2563eb;
}

#loadMoreBtn:hover {
  background: #2563eb;
  color: #ffffff;
  transform: translateY(-2px);
}

#loadMoreBtn:active {
  transform: scale(0.97);
}

/* MOBILE */
@media (max-width: 600px) {
  .chart-actions {
    flex-direction: column;
    gap: 12px;
  }

  .chart-actions button {
    width: 100%;
    justify-content: center;
    font-size: 14px;
    padding: 14px;
  }
}

/* PRINT MODE */
@media print {
  .chart-actions {
    display: none !important;
  }
}


.market-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

#searchMarketInput {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #2f80ed;
  outline: none;
  font-size: 14px;
  min-width: 200px;
}

#searchMarketInput:focus {
  border-color: #1c5fd4;
  box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.2);
}

/* Mobile */
@media (max-width: 600px) {
  .market-actions {
    width: 100%;
  }

  #searchMarketInput {
    width: 100%;
  }
}
/* ================= RESULT SEARCH BAR ================= */

.result-search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Date input */
.result-date-input {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 14px;
  min-width: 160px;
}

/* Buttons */
.result-btn {
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  white-space: nowrap;
}

/* ================= MOBILE RESPONSIVE ================= */

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

  .result-date-input,
  .result-btn {
    width: 100%;
  }
}

/* ================= SMALL MOBILE ================= */

@media (max-width: 480px) {
  .result-btn {
    font-size: 13px;
    padding: 10px;
  }
}





















/* =====================================================
   ADMINS SECTION + MODAL (PERFECT ALIGNMENT FINAL)
   ===================================================== */

/* ===== ADMINS SECTION ===== */

.admins-section {
  padding: 20px;
}

.admins-section .results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.admins-section h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
}


/* ===== ADMIN LIST ===== */

#adminList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

#adminList .market-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

#adminList .market-card h4 {
  font-size: 16px;
  margin-bottom: 6px;
  color: #0f172a;
}

#adminList .market-card p {
  font-size: 14px;
  color: #475569;
}


/* ===== MODAL OVERLAY ===== */

.market-modal {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1000;
}

.market-modal.active {
  opacity: 1;
  pointer-events: auto;
}


/* ===== MODAL BOX ===== */

.market-form-box {
  background: #ffffff;
  width: 100%;
  max-width: 480px;
  padding: 22px 22px 24px;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.25);
  animation: modalFade .25s ease;
}

@keyframes modalFade {
  from {
    transform: translateY(25px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}


/* ===== MODAL TITLE ===== */

.market-form-box h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 14px;
  color: #0f172a;
}


/* ===== INPUT FIELDS ===== */

.market-form-box input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  font-size: 14px;
}

.market-form-box input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
}


/* ===== PERMISSIONS (CHECKBOXES) ===== */

.market-form-box label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 10px;
  color: #334155;
}

.market-form-box input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
  cursor: pointer;
}


/* ===== SHOW MARKETS TITLE ===== */

.market-form-box h4 {
  margin: 14px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}


/* ===== MARKET CHECKBOX GRID ===== */

#adminMarketCheckboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 160px;
  overflow-y: auto;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
}

/* each market checkbox row */
#adminMarketCheckboxes label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  background: #ffffff;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}


/* ===== FORM ACTION BUTTONS ===== */

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.form-actions button {
  flex: 1;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
}


/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 480px) {

  .market-form-box {
    margin: 12px;
    padding: 18px;
  }

  #adminMarketCheckboxes {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .admins-section h2 {
    font-size: 20px;
  }
}









/* =========================
   NOTICE SECTION
========================= */
.notice-section {
  padding: 20px;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.results-header h2 {
  font-size: 22px;
  font-weight: 600;
}

/* Notice cards */
#noticeList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.market-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.market-card h4 {
  margin-bottom: 8px;
  font-size: 15px;
}

.market-card p {
  font-size: 14px;
  margin: 4px 0;
  line-height: 1.4;
}

.market-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* =========================
   MODAL BACKGROUND
========================= */
.market-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 16px;
  z-index: 1000;
}

.market-modal.active {
  display: flex;
}

/* =========================
   MODAL BOX
========================= */
.market-form-box {
  max-height: 90vh;  
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.market-form-box h3 {
  margin-bottom: 12px;
  font-size: 20px;
  text-align: center;
}

/* Inputs */
.market-form-box textarea,
.market-form-box input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
}






/* =========================
   NOTICE NUMBERS SCROLL
========================= */

#noticeNumbers {
  max-height: 220px;          /* adjust as needed */
  overflow-y: auto;
  padding-right: 6px;
  margin-bottom: 10px;
}

/* Each number row */
#noticeNumbers > div {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

/* Inputs inside notice numbers */
#noticeNumbers input {
  flex: 1;
  padding: 8px 10px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* Smooth mobile scrolling */
#noticeNumbers {
  -webkit-overflow-scrolling: touch;
}

/* Optional scrollbar styling (Webkit) */
#noticeNumbers::-webkit-scrollbar {
  width: 6px;
}

#noticeNumbers::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 10px;
}

#noticeNumbers::-webkit-scrollbar-track {
  background: #f1f1f1;
}








/* =========================
   NOTICE NUMBERS SCROLL
========================= */

#finalAnkEditList {
  max-height: 140px;          /* adjust as needed */
  overflow-y: auto;
  padding-right: 6px;
  margin-bottom: 10px;
}


/* Smooth mobile scrolling */
#finalAnkEditList {
  -webkit-overflow-scrolling: touch;
}

/* Optional scrollbar styling (Webkit) */
#finalAnkEditList::-webkit-scrollbar {
  width: 6px;
}

#finalAnkEditList::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 10px;
}

#finalAnkEditList::-webkit-scrollbar-track {
  background: #f1f1f1;
}









.market-form-box textarea {
  resize: vertical;
  min-height: 60px;
}

/* Numbers list */
#noticeNumbers {
  margin-bottom: 10px;
}

#noticeNumbers > div {
  display: flex;
  gap: 8px;
}

#noticeNumbers input {
  flex: 1;
}

/* =========================
   BUTTONS
========================= */
.btn-blue {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-green {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-red {
  background: #dc3545;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-blue:hover,
.btn-green:hover,
.btn-red:hover {
  opacity: 0.9;
}

/* =========================
   FORM ACTIONS
========================= */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media (max-width: 600px) {
  .results-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .market-form-box {
    padding: 16px;
  }

  .form-actions {
    justify-content: center;
  }

  .market-card-actions {
    justify-content: center;
  }
  .market-card h4 {
  margin-bottom: 8px;
  font-size: 14px;
}
}







/* ===============================
   PUBLIC NOTICE SECTION
================================ */
.notice-public-section {
  padding: 30px 16px;
  max-width: 1100px;
  margin: auto;
}

.notice-heading {
  text-align: center;
  font-size: 26px;
  margin-bottom: 20px;
  color: #222;
}

/* Notice Card */
.public-notice-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

/* Animated title bar */
.public-notice-title {
  padding: 14px 16px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(
    270deg,
    #ff1744,
    #ff5f9e,
    #ff1744
  );
  background-size: 400% 400%;
  animation: noticeGlow 6s ease infinite;
}

/* Animation */
@keyframes noticeGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Notice body */
.public-notice-body {
  padding: 14px 18px;
}

.public-notice-body p {
  font-size: 14px;
  line-height: 1.6;
  margin: 6px 0;
  color: #333;
}

/* Mobile */
@media (max-width: 600px) {
  .public-notice-title {
    font-size: 16px;
  }

  .public-notice-body p {
    font-size: 13px;
  }
}












/* ===== GAME ZONE WRAPPER ===== */
.gamezone-section {
  padding: 20px;
}

.gamezone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.gamezone-header h2 {
  font-size: 20px;
  color: #222;
}

/* ===== GAME ZONE CARD ===== */
.gamezone-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 15px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}

.gamezone-card:hover {
  transform: translateY(-2px);
}

.gamezone-market {
  font-weight: 700;
  font-size: 18px;
  color: #d81b60;
  margin-bottom: 10px;
}

/* ===== NUMBERS ===== */
.gamezone-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.zone-box {
  background: #f7f7f7;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
}

.zone-box span {
  display: block;
  font-weight: 600;
  color: #444;
}

/* ===== ACTION BUTTONS ===== */
.gamezone-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-edit {
  background: #2196f3;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.btn-delete {
  background: #e53935;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.btn-edit:hover {
  background: #1976d2;
}

.btn-delete:hover {
  background: #c62828;
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .gamezone-header h2 {
    font-size: 18px;
  }

  .gamezone-market {
    font-size: 16px;
  }

  .gamezone-actions {
    flex-direction: column;
  }

  .btn-edit,
  .btn-delete {
    width: 100%;
    text-align: center;
  }
}

/* ===== TABLET ===== */
@media (min-width: 601px) and (max-width: 900px) {
  .gamezone-numbers {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ===== GAME ZONE SECTION ===== */
.gamezone-public-section {
  padding: 30px 16px;
  max-width: 1200px;
  margin: auto;
}

.gamezone-heading {
  text-align: center;
  font-size: 26px;
  margin-bottom: 20px;
  color: #0ea5e9;
}

/* Grid */
.gamezone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

/* Card */
.gamezone-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: transform 0.25s ease;
}

.gamezone-card:hover {
  transform: translateY(-4px);
}

/* Market Name Animation */
/* Market Name – Green Theme */
.gamezone-market {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 12px;

  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #ffffff;

  box-shadow: 0 6px 15px rgba(34, 197, 94, 0.4);
  letter-spacing: 1px;
}




/* Numbers */
.gamezone-item {
  margin: 8px 0;
  padding: 10px;
  border-radius: 10px;
  background: rgba(14,165,233,0.08);
  text-align: center;
}

.gamezone-item span {
  display: block;
  font-size: 13px;
  opacity: 0.8;
}

.gamezone-item strong {
  font-size: 18px;
  color: #0ea5e9;
  letter-spacing: 1px;
}

/* Mobile */
@media (max-width: 480px) {
  .gamezone-heading {
    font-size: 22px;
  }
}










/* ===========================
   FIX OTC SECTION
=========================== */

.admin-section {
  padding: 18px;
  max-width: 1200px;
  margin: auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.section-header h2 {
  font-size: 22px;
  font-weight: 700;
}

.section-header button {
  white-space: nowrap;
}

/* ===========================
   OTC HEADER BOX
=========================== */

.otc-header-box {
  margin-top: 15px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.15),
    rgba(236, 72, 153, 0.15)
  );
  border: 1px solid rgba(14,165,233,0.3);
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  animation: otcGlow 4s ease-in-out infinite;
}

@keyframes otcGlow {
  0% { box-shadow: 0 0 8px rgba(14,165,233,0.3); }
  50% { box-shadow: 0 0 14px rgba(236,72,153,0.35); }
  100% { box-shadow: 0 0 8px rgba(14,165,233,0.3); }
}

/* ===========================
   FIX OTC LIST
=========================== */

#fixOTCList {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
/* ===========================
   MARKET SELECT (SCROLLABLE)
=========================== */

#fixOTCMarket {
  max-height: 100px;      /* 👈 visible height */
  overflow-y: auto;       /* 👈 enable scroll */
  font-size: 14px;
}


.market-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.market-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.market-card h4 {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
  color: #0ea5e9;
}

.market-card p {
  margin: 4px 0;
  font-size: 14px;
}

.market-card button {
  margin-top: 8px;
  width: 100%;
}

/* ===========================
   MODAL BASE
=========================== */

.market-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
  padding: 10px;
}

.market-form-box {
  background: #ffffff;
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  padding: 18px;
  animation: modalPop 0.25s ease;
}

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

.market-form-box h3 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
}

/* ===========================
   FORM ELEMENTS
=========================== */

.market-form-box label {
  font-size: 14px;
  font-weight: 600;
}

.market-form-box h4 {
  margin: 10px 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.market-form-box textarea,
.market-form-box select,
.market-form-box input {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 14px;
  outline: none;
}

.market-form-box textarea {
  min-height: 90px;
  resize: vertical;
}

/* ===========================
   WEEK OTC ROW
=========================== */

.week-otc-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.week-otc-row select {
  width: 35%;
}

.week-otc-row input {
  flex: 1;
}

.week-otc-row button {
  background: #ef4444;
  color: white;
  border-radius: 10px;
  border: none;
  padding: 0 12px;
  cursor: pointer;
}

/* ===========================
   FORM ACTION BUTTONS
=========================== */

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.form-actions button {
  flex: 1;
}

/* ===========================
   BUTTON COLORS
=========================== */

.btn-blue {
  background: #0ea5e9;
  color: white;
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.btn-green {
  background: #22c55e;
  color: white;
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.btn-red {
  background: #ef4444;
  color: white;
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

/* ===========================
   MOBILE RESPONSIVE
=========================== */

@media (max-width: 600px) {

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

  .section-header div {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .section-header button {
    width: 100%;
  }

  .market-form-box {
    max-width: 100%;
  }

  .week-otc-row {
    flex-direction: column;
  }

  .week-otc-row select {
    width: 100%;
  }

  .week-otc-row button {
    width: 100%;
    padding: 8px;
  }
}












/* ===========================
   FIX OTC PUBLIC SECTION
=========================== */

.fixotc-public-section {
  padding: 24px 14px;
  background: #f1f5f9;
}

.fixotc-heading {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #0f172a;
}

/* ===========================
   GRID
=========================== */

#fixOTCPublicList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

/* ===========================
   MARKET CARD (CALENDAR STYLE)
=========================== */

.fixotc-market-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fixotc-market-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

/* ===========================
   MARKET NAME (BLUE BAR)
=========================== */

.fixotc-market-name {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  padding: 10px;
  text-transform: uppercase;
}

/* ===========================
   WEEK LIST
=========================== */

.fixotc-week-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fixotc-week {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(241, 245, 249, 0.9);
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* DAY */
.fixotc-week .day {
  font-weight: 700;
  color: #334155;
  text-transform: capitalize;
}

/* VALUE */
.fixotc-week .value {
  font-weight: 700;
  color: #0f172a;
}

/* ===========================
   MOBILE RESPONSIVE
=========================== */

@media (max-width: 600px) {
  .fixotc-heading {
    font-size: 19px;
  }

  .fixotc-market-name {
    font-size: 15px;
    padding: 9px;
  }

  .fixotc-week {
    font-size: 13px;
    padding: 8px 10px;
  }
}



.play-online-section {
  padding: 16px;
  display: flex;
  justify-content: center;
}

/* MAIN BOX */
.play-online-box {
  width: 100%;
  max-width: 520px;
  text-align: center;
  padding: 16px;
  border-radius: 16px;
  color: #fff;

  /* animated gradient */
  background: linear-gradient(
    270deg,
    #0047ff,
    #ff003c,
    #ff4fd8
  );
  background-size: 600% 600%;
  animation: gradientFlow 6s ease infinite;

  box-shadow: 0 0 25px rgba(255, 0, 150, 0.5);
}

/* TEXT */
.play-text {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 14px;
}

.trusted-text {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.9;
}

/* WHATSAPP BUTTON */
.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 220px;
  margin: auto;
  padding: 10px 14px;

  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;

  border-radius: 999px;
  background: #25d366;

  /* glow */
  box-shadow: 0 0 12px #25d366;
  animation: glowPulse 1.8s infinite alternate;

  transition: transform 0.2s ease;
}

.whatsapp-btn:hover {
  transform: scale(1.05);
}

/* ICON */
.wa-icon {
  font-size: 18px;
}

/* ANIMATIONS */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glowPulse {
  from {
    box-shadow: 0 0 8px #25d366;
  }
  to {
    box-shadow: 0 0 22px #25d366;
  }
}

/* MOBILE */
@media (max-width: 480px) {
  .play-text {
    font-size: 14px;
  }

  .whatsapp-btn {
    width: 100%;
    font-size: 14px;
  }
}




/* MAIN TABLE */
.new-table-add {
  
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  font-family: "Segoe UI", Arial, sans-serif;
  box-shadow: 0 8px 25px rgba(0, 60, 120, 0.12);
  border-radius: 12px;
  overflow: hidden;
}

/* ALL CELLS */
.new-table-add td {
  border: 1px solid #e4ecf7;
  text-align: center;
  padding: 6px 4px;
  font-size: 14px;
  color: #0d2b52;
}

/* SECTION HEADERS */
.ntah {
  background: linear-gradient(90deg, #1e88e5, #42a5f5);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  padding: 10px 6px;
  letter-spacing: 0.4px;
}

/* DAY COLUMN */
.ntah-blue-sec {
  background: #e3f2fd;
  color: #0d47a1;
  font-weight: 700;
  font-size: 14px;
  width: 44px;
}

/* SINGLE DIGIT (RED COLUMNS) */
.ntah-red-sec {
  background: #f5faff;
  color: #1565c0;
  font-weight: 700;
  width: 30px;
}

/* 3 DIGIT PANEL */
.new-table-add td:not(.ntah):not(.ntah-blue-sec):not(.ntah-red-sec) {
  background: #ffffff;
  font-weight: 600;
  color: #263238;
}

/* JODI ROW (SECOND LINE) */
.new-table-add tr:nth-child(even) td {
  background: #f8fbff;
  font-size: 13px;
  color: #37474f;
}

/* HOVER EFFECT */
.new-table-add tr:hover td {
  background: #eaf4ff;
  transition: background 0.2s ease;
}

/* ROUND EDGES */
.new-table-add tr:first-child td:first-child {
  border-top-left-radius: 12px;
}
.new-table-add tr:first-child td:last-child {
  border-top-right-radius: 12px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .new-table-add td {
    font-size: 12px;
    padding: 5px 3px;
  }

  .ntah {
    font-size: 14px;
  }

  .ntah-blue-sec {
    font-size: 13px;
  }
}

/* MOBILE STACKING */
@media (max-width: 520px) {
  .new-table-add {
    display: flex;
  flex-direction: column;
  align-items: center;
    overflow-x: auto;
    white-space: nowrap;
  }
}






/* FAQ WRAPPER */
.faq {
  max-width: 1000px;
  margin: auto;
  padding: 10px;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* FAQ CARD */
.faq-card {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  margin-bottom: 14px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(255, 75, 90, 0.35);
  animation: glowPulse 3s infinite alternate;
}

/* QUESTION */
.faq-card label {
  display: block;
  cursor: pointer;
  padding: 14px 16px;
}

.faq-card label span {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: block;
}

/* ANSWER BODY */
.card-body {
  background: #fff;
  color: #333;
  padding: 16px;
  font-size: 14px;
  line-height: 1.7;
  border-top: 3px solid #ff4b6e;
}

/* HEADINGS INSIDE CONTENT */
.t-rock {
  background: linear-gradient(90deg, #ff4b6e, #ff7eb3);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  margin: 14px 0 6px;
  font-weight: 700;
  box-shadow: 0 6px 15px rgba(255, 90, 140, 0.35);
}

/* SPECIAL TAG LINE */
.t-0 {
  font-size: 15px;
  text-align: center;
}

/* TEXT EFFECT */
.let-rock p,
.card-body p,
.card-body li {
  margin-bottom: 10px;
}

/* LINKS */
.card-body a {
  color: #ff2f6d;
  font-weight: 600;
  text-decoration: none;
}

.card-body a:hover {
  text-decoration: underline;
}

/* LISTS */
.card-body ul {
  padding-left: 18px;
  margin-bottom: 12px;
}

.card-body li {
  font-size: 14px;
}

/* GLOW ANIMATION */
@keyframes glowPulse {
  from {
    box-shadow: 0 8px 20px rgba(255, 70, 100, 0.35);
  }
  to {
    box-shadow: 0 16px 40px rgba(255, 120, 160, 0.6);
  }
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .faq-card label span {
    font-size: 15px;
  }

  .card-body {
    font-size: 13px;
    padding: 14px;
  }

  .t-rock {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .faq-card label {
    padding: 12px 14px;
  }

  .faq-card label span {
    font-size: 14px;
  }

  .card-body {
    padding: 12px;
  }
}






/* FOOTER */
.site-footer {
   background: linear-gradient(135deg, #0018a3, #5500a4);
  padding: 35px 15px 25px;
  color: #fff;
  text-align: center;
  border-top: 3px solid #ff4d6d;
  font-family: Helvetica, sans-serif;
}

/* INNER */
.footer-inner {
  max-width: 1100px;
  margin: auto;
}

/* LOGO AREA */
.footer-logo {
  margin-bottom: 18px;
}

.footer-logo .tagline {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 6px;
}

/* LINKS */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.footer-links a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #ff4d6d, #ff7a18);
  transition: width 0.3s ease;
}

.footer-links a:hover::after {
  width: 100%;
}

/* COPYRIGHT */
.footer-copy {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 14px;
}

/* MOBILE */
@media (max-width: 600px) {
  .footer-links {
    gap: 14px;
  }

  .footer-links a {
    font-size: 13px;
  }

  .footer-logo .tagline {
    font-size: 12px;
  }
}








/* ===== PRIVACY SECTION ===== */
.privacy-section {
  background: linear-gradient(180deg, #f9fbff, #eef2ff);
  padding: 40px 15px;
  color: #1c1c1c;
  font-family: Arial, sans-serif;
}

.privacy-container {
  max-width: 1000px;
  margin: auto;
  background: #ffffff;
  padding: 30px 22px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.privacy-container h1 {
  font-size: 28px;
  text-align: center;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #2f6bff, #ff4d6d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.privacy-container .updated {
  text-align: center;
  font-size: 13px;
  color: #777;
  margin-bottom: 20px;
}

.privacy-container h2 {
  font-size: 20px;
  margin-top: 24px;
  margin-bottom: 10px;
  color: #2f6bff;
}

.privacy-container p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 10px;
  color: #333;
}

.privacy-container ul {
  padding-left: 18px;
  margin-bottom: 15px;
}

.privacy-container ul li {
  font-size: 15px;
  margin-bottom: 6px;
  list-style: disc;
}

.contact-box {
  background: #f1f5ff;
  padding: 15px;
  border-radius: 10px;
  margin-top: 10px;
}

.contact-box p {
  margin: 4px 0;
  font-size: 14px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .privacy-container {
    padding: 22px 16px;
  }

  .privacy-container h1 {
    font-size: 24px;
  }

  .privacy-container h2 {
    font-size: 18px;
  }

  .privacy-container p,
  .privacy-container ul li {
    font-size: 14px;
  }
}










/* ================= USERS SECTION ================= */
.users-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.users-header h2 {
  font-size: 18px;
  color: #0d47a1; /* Blue */
}

/* USERS LIST */
.users-list {
  margin-top: 15px;
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* USER CARD */
.user-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* USER INFO TEXT */
.user-card strong {
  color: #0d47a1;
}

.user-card small {
  color: #555;
}

/* CONTENT BOX (SCROLLABLE) */
.content-box {
  font-size: 13px;
  color: #333;
  background: #f5f7fa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px;
  max-height: 80px;
  overflow-y: auto;
}

/* ================= BUTTONS ================= */
.btn-primary {
  background: #ff9800; /* Orange */
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.btn-primary:hover {
  background: #fb8c00;
}

.btn-danger {
  background: #1976d2; /* Blue */
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
}

.btn-danger:hover {
  background: #1565c0;
}

/* ================= MODAL ================= */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 10px;
  z-index: 999;
}

.modal-content {
  background: #ffffff;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}

.modal-content h3 {
  margin-bottom: 10px;
  color: #ff9800;
}

/* INPUTS */
.modal-content input,
.modal-content textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  background: #f5f7fa;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.modal-content textarea {
  min-height: 80px;
  resize: vertical;
}

/* MODAL ACTIONS */
.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-actions button {
  flex: 1;
}

/* ================= MOBILE ================= */
@media (max-width: 600px) {
  .users-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-primary,
  .btn-danger {
    width: 100%;
    text-align: center;
  }

  .users-list {
    max-height: 70vh;
  }
}

/* ================= SCROLLBAR ================= */
.users-list::-webkit-scrollbar,
.content-box::-webkit-scrollbar {
  width: 6px;
}

.users-list::-webkit-scrollbar-thumb,
.content-box::-webkit-scrollbar-thumb {
  background: #ff9800;
  border-radius: 6px;
}









/* ROOT */
.chat-wrap {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color:  rgb(0, 102, 58);
}

/* CHAT BOX */
.chat-box {
  width: 100%;
  max-width: 420px;
  height: 70vh;
  max-height: 700px;
  background: #fff;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* HEADER */
.chat-header {
  padding: 14px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
}

/* MESSAGES */
.chat-messages {
  flex: 1;
  padding: 12px;
  background: #fff0f5;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* =========================
   SCROLLBAR STYLE
========================= */

/* Chrome, Edge, Safari */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff416c, #ff4b2b);
  border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff4b2b, #ff416c);
}

/* Firefox */
.chat-messages {
  scrollbar-width: thin;
  scrollbar-color: #ff416c transparent;
}


/* MESSAGE */
.msg {
  background: #ffd1dc;
  padding: 10px 14px;
  border-radius: 16px;
  margin-bottom: 10px;
  max-width: 80%;
  animation: fade .25s ease;
  word-wrap: break-word;
}

/* TIME */
.msg span {
  display: block;
  font-size: 11px;
  opacity: .6;
  margin-top: 4px;
}

/* INPUT BAR */
.chat-input {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #eee;
  background: #fff;
}

/* INPUT */
.chat-input input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 20px;
  border: 1px solid #ddd;
  font-size: 14px;
  outline: none;
}

/* BUTTON */
.chat-input button {
  background: #ff416c;
  border: none;
  color: white;
  padding: 0 18px;
  border-radius: 20px;
  cursor: pointer;
}

/* ANIMATION */
@keyframes fade {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}

/* 📱 MOBILE */
@media (max-width: 480px) {
  .chat-box {
    height: 60vh;
    max-height: none;
    border-radius: 0;
  }
  .chat-wrap {
  min-height: 80vh;
  }

  .msg {
    max-width: 90%;
  }
}

/* 💻 LARGE SCREENS */
@media (min-width: 900px) {
  .chat-box {
    max-height: 650px;
  }
}