/* =========================
   PRESALE SECTION
========================= */
.presale-section {
  text-align: center;
  padding-bottom: 60px;
}

#presaleStages {
  display:grid;
  grid-template-columns:1fr;
  gap:25px;
  max-width:500px;
  margin:0 auto;
}

.stage-card {
  width:100%;
  padding:28px;
  border-radius:16px;
  text-align:left;
  position: relative; /* ← ADD THIS LINE - MOST IMPORTANT FIX */
  background: rgba(15, 23, 42, 0.7); /* ← Also add background for visibility */
  border: 1px solid rgba(79, 172, 254, 0.2); /* ← Add border for better visibility */
    border-left: 4px solid #4facfe; /* ← always visible left blue border */
}


.stage-title { 
  font-size: 18px; 
  font-weight: 700; 
  color: #fff; 
}

.stage-header {
  display: flex;
  justify-content: space-between; /* title left, status right */
  align-items: center;            /* vertically center both */
  margin-bottom: 12px;
  position: relative; /* keep relative for future absolute elements if needed */
  gap: 10px;          /* optional spacing */
  text-transform: uppercase;
}

/* Stage title frame */
.stage-header h3 {
  display: inline-block;
  padding: 5px 12px;                     /* match height of status */
  border: 1px solid #4cc9f0;
  border-radius: 6px;                     /* match status */
  background: rgba(76, 201, 240, 0.1);
  color: #4cc9f0;
  font-size: 12px;                        /* slightly smaller */
  font-weight: 600;
  margin: 0;                              /* remove default h3 margin */
  text-align: center;
  min-width: 80px;                        /* optional: fixed frame width */
}

.stage-price { 
  font-size: 16px; 
  font-weight: 600; 
  color: #fff; /* change to white */
  margin-bottom: 8px; 
}

.stage-stats-container {
  display: flex;
  flex-direction: column; /* stack vertically: price, sold, remaining */
  gap: 5px;               /* spacing between lines */
  font-size: 12px;        /* same font size for all */
  font-weight: 600;       /* same weight */
  color: #fff;            /* same color */
}

/* Each row: label left, value right */
.stage-stats-container div {
  display: flex;
  justify-content: space-between; /* label left, value right */
}

/* Bold the numbers */
.stage-stats-container b {
  font-weight: 700;
}


/* Outer container for progress */
.stage-progress {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 12px;
}

/* The background (empty part) */
.progress-bar {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.1); /* This is the "no color" after the dot */
  border-radius: 10px;
  position: relative;
  overflow: visible; /* CRITICAL: Allows the dot to be seen */
}

/* The colored part (before the dot) */
.progress-fill {
  width: 0%; /* JS will update this */
  height: 100%;
  background: linear-gradient(90deg, #4cc9f0, #4361ee);
  border-radius: 10px;
  transition: width 1s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

/* The Dot */
.progress-dot {
  position: absolute;
  top: 50%;
  /* JS will update 'left' to match fill width */
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #4cc9f0;
  box-shadow: 0 0 8px rgba(76, 201, 240, 0.7);
  transition: left 1s ease-in-out;
  z-index: 3; /* Sit on top of the fill */
}

.stage-status {
  position: static;                        /* remove absolute positioning */
  padding: 5px 12px;                       /* match title padding */
  font-size: 12px;                         /* match title font size */
  border-radius: 6px;                       /* match title border-radius */
  font-weight: 600;                         /* slightly less bold than before */
  text-transform: uppercase;
}
.status-running { background:#1fdd6f; color:#071b0f; }
.status-sold { border:1px solid #ff4d4d; color:#ff4d4d; background:rgba(255,77,77,0.1); }
.status-upcoming { background:rgba(234, 179, 8, 0.2); color:#eab308; border:1px solid rgba(234, 179, 8, 0.4); }

.global-stats-container {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  max-width:1100px;
  margin:50px auto 0;
  padding:30px;
  background:rgba(255,255,255,0.03);
  border-left:4px solid #4facfe;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.05);
}

.global-stat-item p { font-size:14px; color:#aaa; margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; }
.global-stat-item h3 { font-size:24px; color:#4cc9f0; font-weight:800; }

@media(max-width:768px){ 
  .global-stats-container { 
    grid-template-columns:1fr 1fr; 
    padding: 20px;
  } 
  .stage-card {
    padding: 20px;
  }
}