/* ActiveRaffles Component Styles */

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #333;
  border-top: 3px solid #45aeff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}


/* Active Raffles column sizing */
.raffle-col-title {
  flex: 2 1 320px;
  min-width: 240px;
}

.raffle-col-narrow {
  flex: 0 0 110px;
}

.raffle-col-narrow-2 {
  flex: 0 0 120px;
}

.raffle-col-medium {
  flex: 1 1 220px;
  min-width: 180px;
}

.raffle-col-wide {
  flex: 1.5 1 240px;
  min-width: 200px;
}

.raffle-tickets {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-container {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

.error-message {
  color: #ff6b6b;
  text-align: center;
  font-size: 16px;
}

.raffle-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.tag-wrap.completed {
  background: linear-gradient(90deg, rgba(255, 80, 1, 0.2) 0.01%, rgba(255, 80, 1, 0.24) 50.01%, rgba(255, 80, 1, 0.24) 100%);
  box-shadow: inset 0px -7px 11px rgba(255, 80, 1, .12);
}

.text-style-tagline.completed {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), linear-gradient(90deg, #FF5001 0.01%, rgba(255, 255, 255, 0.4) 49.5%, #E6F6DD 76.5%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.countdown-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 60px;
}

.countdown-timer {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8px;
  overflow: visible;
  white-space: nowrap;
}

.countdown-date {
  font-size: 0.8rem;
  color: #cccccc;
}

.ended-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 60px;
}

.ended-text {
  font-size: 1rem;
  font-weight: bold;
  color: #FF5001;
  margin-bottom: 8px;
}

.ended-date {
  font-size: 0.8rem;
  color: #cccccc;
}

.active-raffle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.buy-button-wrapper {
  display: flex;
  justify-content: center;
}

.buy-button-wrapper .button-primary {
  min-width: 80px;
  height: 36px;
  font-size: 12px;
}

.buy-button-wrapper .button-spacing {
  padding: 8px 16px;
}

.layout_tabs-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.text-block-8 {
  color: #cccccc;
  font-size: 14px;
}

.w-layout-hflex.flex-block-10 {
  display: flex;
  gap: 8px;
}

.layout_tab-link {
  display: inline-block;
  text-decoration: none;
  color: #cccccc;
  transition: all 0.3s ease;
}

.layout_tab-link:hover {
  color: #ffffff;
}

.layout_tab-link.w--current {
  color: #ffffff;
}

.container-pagination {
  padding: 8px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.layout_tab-link.w--current .container-pagination {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
  border-color: rgba(255, 255, 255, 0.4);
}

.text-tabs {
  font-size: 14px;
  font-weight: 500;
}

.countdown-timer {
  font-size: 1rem;
}

.countdown-wrapper {
  border: 1px solid #10163c;
  padding: .5rem;
  border-radius: .5rem;
}