/**
 * Band Manager Elite - Frontend Styles
 * Premium frontend styling for shortcodes and public-facing elements
 * 
 * @package BME
 */

/* Frontend Container */
.bme-frontend-container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--bme-space-6);
  font-family: var(--bme-font-sans);
}

/* Hero Section (Phase 9) */
.bme-hero {
  text-align: center;
  padding: var(--bme-space-12) var(--bme-space-6);
  background: linear-gradient(135deg, var(--bme-primary-600), var(--bme-primary-800));
  color: white;
  border-radius: var(--bme-radius-xl);
  margin-bottom: var(--bme-space-8);
}

.bme-hero h1 {
  font-size: var(--bme-text-4xl);
  font-weight: 700;
  margin-bottom: var(--bme-space-4);
}

.bme-hero p {
  font-size: var(--bme-text-lg);
  opacity: 0.9;
  margin-bottom: var(--bme-space-6);
}

/* Form Wizard (Phase 9) */
.bme-wizard {
  background: white;
  border-radius: var(--bme-radius-xl);
  box-shadow: var(--bme-shadow-xl);
  padding: var(--bme-space-8);
}

.bme-wizard-header {
  text-align: center;
  margin-bottom: var(--bme-space-6);
}

.bme-wizard-title {
  font-size: var(--bme-text-2xl);
  font-weight: 600;
  color: var(--bme-gray-900);
  margin-bottom: var(--bme-space-2);
}

.bme-wizard-progress {
  height: 8px;
  background: var(--bme-gray-200);
  border-radius: var(--bme-radius-full);
  overflow: hidden;
  margin-top: var(--bme-space-4);
}

.bme-wizard-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--bme-primary-600), var(--bme-primary-500));
  border-radius: var(--bme-radius-full);
  transition: width var(--bme-transition-slow);
}

/* Event Type Cards (Phase 9) */
.bme-event-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--bme-space-4);
  margin-bottom: var(--bme-space-6);
}

.bme-event-type-card {
  padding: var(--bme-space-6);
  border: 2px solid var(--bme-gray-200);
  border-radius: var(--bme-radius-lg);
  text-align: center;
  cursor: pointer;
  transition: all var(--bme-transition-base);
}

.bme-event-type-card:hover {
  border-color: var(--bme-primary-500);
  box-shadow: var(--bme-shadow-md);
  transform: translateY(-2px);
}

.bme-event-type-card.selected {
  border-color: var(--bme-primary-600);
  background: var(--bme-primary-50);
}

.bme-event-type-icon {
  font-size: 3rem;
  margin-bottom: var(--bme-space-3);
}

.bme-event-type-label {
  font-weight: 600;
  color: var(--bme-gray-800);
}

/* Form Actions */
.bme-form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--bme-space-8);
  gap: var(--bme-space-4);
}

/* Success Page (Phase 9) */
.bme-success {
  text-align: center;
  padding: var(--bme-space-12);
}

.bme-success-icon {
  font-size: 5rem;
  color: var(--bme-success-600);
  margin-bottom: var(--bme-space-4);
}

.bme-success h2 {
  font-size: var(--bme-text-3xl);
  font-weight: 700;
  color: var(--bme-gray-900);
  margin-bottom: var(--bme-space-4);
}

.bme-success p {
  font-size: var(--bme-text-lg);
  color: var(--bme-gray-600);
  margin-bottom: var(--bme-space-6);
}

/* Invoice Display (Public View) */
.bme-invoice-public {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: var(--bme-space-8);
  border-radius: var(--bme-radius-xl);
  box-shadow: var(--bme-shadow-lg);
}

.bme-invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: var(--bme-space-8);
  padding-bottom: var(--bme-space-6);
  border-bottom: 2px solid var(--bme-gray-200);
}

.bme-invoice-number {
  font-size: var(--bme-text-2xl);
  font-weight: 700;
  color: var(--bme-gray-900);
}

.bme-invoice-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bme-space-6);
  margin-bottom: var(--bme-space-8);
}

.bme-invoice-section {
  padding: var(--bme-space-4);
  background: var(--bme-gray-50);
  border-radius: var(--bme-radius-md);
}

.bme-invoice-section h3 {
  font-size: var(--bme-text-sm);
  font-weight: 600;
  color: var(--bme-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--bme-space-3);
}

.bme-invoice-table {
  width: 100%;
  margin-bottom: var(--bme-space-6);
  border-collapse: collapse;
}

.bme-invoice-table th {
  text-align: left;
  padding: var(--bme-space-3);
  background: var(--bme-gray-100);
  font-size: var(--bme-text-sm);
  font-weight: 600;
  color: var(--bme-gray-700);
  border-bottom: 2px solid var(--bme-gray-200);
}

.bme-invoice-table td {
  padding: var(--bme-space-3);
  border-bottom: 1px solid var(--bme-gray-200);
  color: var(--bme-gray-800);
}

.bme-invoice-total {
  text-align: right;
  padding: var(--bme-space-6);
  background: var(--bme-gray-50);
  border-radius: var(--bme-radius-md);
}

.bme-invoice-total-row {
  display: flex;
  justify-content: space-between;
  padding: var(--bme-space-2) 0;
}

.bme-invoice-total-row.grand-total {
  font-size: var(--bme-text-xl);
  font-weight: 700;
  color: var(--bme-gray-900);
  padding-top: var(--bme-space-4);
  border-top: 2px solid var(--bme-gray-300);
  margin-top: var(--bme-space-2);
}

/* Responsive Design */
@media (max-width: 768px) {
  .bme-frontend-container {
    padding: var(--bme-space-4);
  }
  
  .bme-hero h1 {
    font-size: var(--bme-text-2xl);
  }
  
  .bme-wizard {
    padding: var(--bme-space-4);
  }
  
  .bme-event-types {
    grid-template-columns: 1fr;
  }
  
  .bme-form-actions {
    flex-direction: column;
  }
  
  .bme-form-actions .bme-btn {
    width: 100%;
  }
  
  .bme-invoice-details {
    grid-template-columns: 1fr;
  }
  
  .bme-invoice-public {
    padding: var(--bme-space-4);
  }
  
  .bme-invoice-header {
    flex-direction: column;
    gap: var(--bme-space-4);
  }
  
  .bme-invoice-table {
    font-size: var(--bme-text-sm);
  }
}

/* Print Styles */
@media print {
  .bme-wizard,
  .bme-form-actions,
  .bme-btn {
    display: none !important;
  }
  
  .bme-invoice-public {
    box-shadow: none;
    border: 1px solid #000;
  }
  
  @page {
    margin: 1in;
  }
  
  * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}