/* ==========================================================================
   RathBlume Tickets – Frontend Styles
   Design: Matches Rath & Blume theme (dark, #00fc72 primary, Saira font)
   ========================================================================== */

/* ---------- Event Details (Product Page) ---------- */
.rt-event-details {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--rb-surface-dark);
  border: 1px solid var(--rb-white-10);
  border-radius: var(--rb-radius-lg);
}

.rt-event-details h3 {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rb-white-40);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--rb-font-sans);
}

.rt-event-info-table {
  width: 100%;
  border-collapse: collapse;
}

.rt-event-info-table th {
  text-align: left;
  padding: 0.5rem 1rem 0.5rem 0;
  font-weight: 500;
  color: var(--rb-white-40);
  width: 130px;
  vertical-align: top;
  font-size: 0.875rem;
  font-family: var(--rb-font-sans);
}

.rt-event-info-table td {
  padding: 0.5rem 0;
  color: var(--rb-foreground);
  font-size: 0.875rem;
  font-family: var(--rb-font-sans);
}

/* ---------- Capacity Indicators ---------- */
.rt-remaining {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: rgba(0, 252, 114, 0.08);
  border-left: 3px solid var(--rb-primary);
  border-radius: var(--rb-radius);
  font-size: 0.875rem;
  color: var(--rb-primary);
  font-family: var(--rb-font-sans);
}

.rt-sold-out {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: rgba(255, 68, 68, 0.1);
  border-left: 3px solid #ff4444;
  border-radius: var(--rb-radius);
  font-size: 0.875rem;
  color: #ff6b6b;
  font-family: var(--rb-font-sans);
}

.rt-no-tickets {
  margin: 1rem 0;
  padding: 0.875rem 1rem;
  background: rgba(255, 196, 9, 0.08);
  border-left: 3px solid #ffc409;
  border-radius: var(--rb-radius);
  color: #ffc409;
  font-size: 0.875rem;
  font-family: var(--rb-font-sans);
}

/* ---------- Ticket Form ---------- */
.rt-ticket-form {
  margin-top: 1.5rem;
}

/* ---------- Ticket Type Selector ---------- */
.rt-ticket-type-selector {
  margin: 1rem 0;
}

.rt-ticket-type-selector label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--rb-white-60);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--rb-font-sans);
}

.rt-ticket-type-selector select,
.rt-ticket-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rb-white-20);
  border-radius: var(--rb-radius);
  font-size: 0.95rem;
  background: var(--rb-surface);
  color: #fff;
  cursor: pointer;
  font-family: var(--rb-font-sans);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ededed' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  transition: border-color var(--rb-transition);
}

.rt-ticket-type-selector select:focus {
  border-color: var(--rb-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 252, 114, 0.15);
}

.rt-team-size-wrap {
  margin-top: 0.75rem;
}

.rt-team-size-wrap label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--rb-white-60);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--rb-font-sans);
}

.rt-team-size-wrap input {
  width: 120px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rb-white-20);
  border-radius: var(--rb-radius);
  font-size: 0.95rem;
  background: var(--rb-surface);
  color: #fff;
  font-family: var(--rb-font-sans);
  transition: border-color var(--rb-transition);
}

.rt-team-size-wrap input:focus {
  border-color: var(--rb-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 252, 114, 0.15);
}

.rt-quantity-wrap {
  margin: 1rem 0;
}

/* ---------- Attendee Fields (Checkout) ---------- */
.rt-attendee-fields {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--rb-surface-dark);
  border: 1px solid var(--rb-white-10);
  border-radius: var(--rb-radius-lg);
}

.rt-attendee-fields h3 {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rb-white-40);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--rb-font-sans);
}

/* ---------- Personalization Section ---------- */
.rt-personalization-section {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--rb-surface-dark);
  border: 1px solid var(--rb-white-10);
  border-radius: var(--rb-radius-lg);
}

.rt-personalization-section h3 {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rb-white-40);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--rb-font-sans);
}

.rt-player-names-wrap,
.rt-team-name-wrap,
.rt-contact-email-wrap,
.rt-contact-phone-wrap,
.rt-age-verify-wrap {
  margin-bottom: 1rem;
}

.rt-player-field {
  margin-bottom: 0.75rem;
}

.rt-personalization-section label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--rb-white-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--rb-font-sans);
}

.rt-personalization-section input[type="text"],
.rt-personalization-section input[type="email"],
.rt-personalization-section input[type="tel"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rb-white-20);
  border-radius: var(--rb-radius);
  font-size: 0.95rem;
  background: var(--rb-surface);
  color: #fff;
  box-sizing: border-box;
  font-family: var(--rb-font-sans);
  transition: border-color var(--rb-transition);
}

.rt-personalization-section input[type="text"]:focus,
.rt-personalization-section input[type="email"]:focus,
.rt-personalization-section input[type="tel"]:focus {
  border-color: var(--rb-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 252, 114, 0.15);
}

.rt-personalization-section input::placeholder {
  color: var(--rb-white-30);
}

.rt-checkbox-label {
  display: flex !important;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400 !important;
  cursor: pointer;
  line-height: 1.5;
  color: var(--rb-white-60) !important;
  font-family: var(--rb-font-sans);
}

.rt-checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  accent-color: var(--rb-primary);
}

.rt-personalization-section .optional {
  font-weight: 400;
  color: var(--rb-white-30);
  font-size: 0.8rem;
}

/* ---------- Checkout Ticket Summary ---------- */
.rt-checkout-summary {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--rb-surface-dark);
  border: 1px solid var(--rb-white-10);
  border-radius: var(--rb-radius-lg);
}

.rt-checkout-summary h3 {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rb-white-40);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--rb-font-sans);
}

.rt-checkout-ticket-info {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rb-white-10);
}

.rt-checkout-ticket-info:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.rt-checkout-ticket-info ul {
  margin: 0.5rem 0 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--rb-white-60);
}

.rt-checkout-ticket-info ul li {
  margin-bottom: 0.25rem;
  color: var(--rb-white-60);
}

.rt-checkout-ticket-info p {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--rb-white-50);
  font-family: var(--rb-font-sans);
}