/* ==========================================================================
   WOOCOMMERCE CUSTOM DIGITAL CHECKOUT STYLING
   ========================================================================= */

.woocommerce-page .woocommerce {
  background: var(--color-bg-card);
  border: var(--border-glass);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  color: var(--color-text-main);
  max-width: 900px;
  margin: 0 auto;
}

.woocommerce form .form-row {
  margin-bottom: 1.25rem;
}

.woocommerce form .form-row label {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 0.4rem;
  display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: rgba(10, 15, 29, 0.8) !important;
  border: var(--border-glass) !important;
  color: #ffffff !important;
  padding: 0.85rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  font-size: 1rem !important;
  width: 100% !important;
}

.woocommerce form .form-row select option {
  background: #0a0f1d;
  color: #ffffff;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--color-cyan) !important;
  box-shadow: 0 0 10px var(--color-cyan-glow);
  outline: none;
}

/* Device Selectable Chips Grid */
.iptv-device-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.device-chip {
  background: rgba(255, 255, 255, 0.05);
  border: var(--border-glass);
  color: var(--color-text-muted);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.2s ease;
  outline: none;
}

.device-chip:hover {
  background: rgba(0, 229, 255, 0.1);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

.device-chip.active {
  background: var(--gradient-gold);
  border-color: var(--color-gold);
  color: var(--color-text-dark);
  box-shadow: 0 4px 15px var(--color-gold-glow);
}

.woocommerce #payment {
  background: rgba(10, 15, 29, 0.5) !important;
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  margin-top: 2rem;
}

.woocommerce #payment ul.payment_methods {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 1rem;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  font-family: var(--font-family-heading) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  padding: 1rem 2.5rem !important;
  border: none !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--gradient-primary-hover) !important;
  box-shadow: 0 8px 30px rgba(0, 229, 255, 0.4) !important;
}

@media (max-width: 768px) {
  .woocommerce-page .woocommerce {
    padding: 1.5rem;
  }
  .iptv-device-chips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}