/* ========================================
   Lottery Cards — New Design
   ======================================== */

/* Section wrapper */
.lottery-section {
  display: flex;
  justify-content: center;
  max-width: 1240px;
  margin: 16px auto 0;
  gap: 16px;
  overflow: visible;
  padding: 6px 8px 0;
}

/* Card base */
.lottery-card {
  position: relative;
  color: #fff;
  box-sizing: border-box;
  min-width: 280px;
  width: 33.33%;
  border-radius: 16px;
  padding: 42px 16px 14px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Card gradient backgrounds ---- */
.lottery-card--north {
  background: linear-gradient(270deg, #B1121C 0%, #2A0B12 100%);
  border: none;
  border-left: 1px solid #FFB96E;
}

.lottery-card--central {
  background: linear-gradient(270deg, #FF6A00 0%, #2A1408 100%);
  border: none;
  border-left: 1px solid #FFB96E;
}

.lottery-card--south {
  background: linear-gradient(270deg, #16C060 0%, #0F2E1B 100%);
  border: none;
  border-left: 1px solid #FFB96E;
}

/* ---- Title banner (gold ribbon) ---- */
.lottery-card__title-banner {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  line-height: 0;
}

.lottery-card__title-banner img {
  height: 32px;
  width: auto;
  display: block;
}

/* ---- Date info ---- */
.lottery-card__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
}

.lottery-card__label {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
}

.lottery-card__date {
  font-size: 13px;
  font-weight: 700;
  color: #ffd700;
}

/* ---- Controls row (timer + province) ---- */
.lottery-card__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-right: 90px;
}

/* Timer pill */
.lottery-card__timer {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px 5px 28px;
  border-radius: 6px;
  white-space: nowrap;
  flex: 1;
}

.lottery-card__timer::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M7.33333 14.6667C3.28333 14.6667 0 11.3833 0 7.33333C0 3.28333 3.28333 0 7.33333 0C11.3833 0 14.6667 3.28333 14.6667 7.33333C14.6667 11.3833 11.3833 14.6667 7.33333 14.6667ZM8 3H6.66667V7.60933L9.33333 10.276L10.276 9.33333L8 7.05733V3Z' fill='url(%23paint0_linear_2059_2356)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2059_2356' x1='0' y1='7.33333' x2='14.6667' y2='7.33333' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF9701'/%3E%3Cstop offset='1' stop-color='%23EB5522'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Province select pill */
.lottery-card__select-wrap {
  position: relative;
  display: inline-block;
  flex: 1;
}

.lottery-card__province {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 28px 5px 26px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  margin-bottom: 0 !important;
  min-height: auto !important;
  box-sizing: border-box;
}

/* Location pin icon */
.lottery-card__province {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_2059_2359)'%3E%3Cpath d='M7.385 15.293L7.193 15.163C6.23208 14.4907 5.33917 13.726 4.527 12.88C3.1 11.385 1.5 9.144 1.5 6.499C1.5 3.245 4.141 0 8 0C11.859 0 14.5 3.245 14.5 6.5C14.5 9.145 12.9 11.386 11.473 12.879C10.6608 13.725 9.76792 14.4897 8.807 15.162C8.72567 15.2187 8.66167 15.262 8.615 15.292C8.412 15.427 8.205 15.555 8 15.685C7.795 15.555 7.588 15.427 7.385 15.293ZM8 8.5C8.53043 8.5 9.03914 8.28929 9.41421 7.91421C9.78929 7.53914 10 7.03043 10 6.5C10 5.96957 9.78929 5.46086 9.41421 5.08579C9.03914 4.71071 8.53043 4.5 8 4.5C7.46957 4.5 6.96086 4.71071 6.58579 5.08579C6.21071 5.46086 6 5.96957 6 6.5C6 7.03043 6.21071 7.53914 6.58579 7.91421C6.96086 8.28929 7.46957 8.5 8 8.5Z' fill='url(%23paint0_linear_2059_2359)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2059_2359' x1='1.5' y1='7.8425' x2='14.5' y2='7.8425' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF9701'/%3E%3Cstop offset='1' stop-color='%23EB5522'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_2059_2359'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 7px center;
  background-size: 16px 16px;
}

/* Dropdown arrow */
.lottery-card__select-wrap::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.5 3.75L6 8.25L1.5 3.75' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: 12px;
}

/* ---- 8-ball decoration ---- */
.lottery-card__ball {
  position: absolute;
  right: 8px;
  top: 42%;
  transform: translateY(-50%);
  width: 80px;
  height: auto;
  pointer-events: none;
  opacity: 0.92;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

/* ---- Action buttons ---- */
.lottery-card__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: auto;
  padding-top: 6px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lottery-card__actions::-webkit-scrollbar {
  display: none;
}

.lottery-card__action {
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: none;
  border-radius: 5px;
  padding: 5px 8px;
  line-height: 1;
  transition: background 0.2s;
}

.lottery-card__action:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .lottery-section {
    flex-direction: row;
    gap: 10px;
  }

  .lottery-card {
    min-width: 260px;
    width: 260px;
  }
}

@media (max-width: 600px) {
  .lottery-section {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .lottery-card {
    width: 100%;
    max-width: 380px;
    min-width: unset;
  }
}