/* ============================================
   Clay Class Lessons - Main Stylesheet
   Premium sporting aesthetic with earthy tones
   ============================================ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap");

/* CSS Variables */
:root {
   /* Colors - Earthy, premium palette */
   --color-primary: #8b4513;
   --color-primary-dark: #6b3410;
   --color-primary-light: #a0522d;
   --color-accent: #d4a574;
   --color-accent-light: #e8d4be;

   --color-bg: #fdfbf7;
   --color-bg-alt: #f5f0e8;
   --color-bg-card: #ffffff;

   --color-text: #2d2a26;
   --color-text-light: #6b6560;
   --color-text-muted: #9b9590;

   --color-success: #4a7c59;
   --color-error: #b54a4a;
   --color-warning: #c4903d;

   --color-border: #e5dfd6;
   --color-border-dark: #d4ccc0;

   /* Typography */
   --font-display: "Playfair Display", Georgia, serif;
   --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;

   /* Spacing */
   --space-xs: 0.25rem;
   --space-sm: 0.5rem;
   --space-md: 1rem;
   --space-lg: 1.5rem;
   --space-xl: 2rem;
   --space-2xl: 3rem;
   --space-3xl: 4rem;

   /* Border Radius */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;

   /* Shadows */
   --shadow-sm: 0 1px 3px rgba(45, 42, 38, 0.08);
   --shadow-md: 0 4px 12px rgba(45, 42, 38, 0.1);
   --shadow-lg: 0 8px 24px rgba(45, 42, 38, 0.12);

   /* Transitions */
   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
}

/* Reset & Base */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   font-family: var(--font-body);
   font-weight: 400;
   line-height: 1.6;
   color: var(--color-text);
   background: var(--color-bg);
   min-height: 100vh;
}

/* Typography */
h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   font-weight: 600;
   line-height: 1.3;
   color: var(--color-text);
}

h1 {
   font-size: 2.5rem;
}
h2 {
   font-size: 1.875rem;
}
h3 {
   font-size: 1.5rem;
}
h4 {
   font-size: 1.25rem;
}

p {
   margin-bottom: var(--space-md);
}

a {
   color: var(--color-primary);
   text-decoration: none;
   transition: color var(--transition-fast);
}

a:hover {
   color: var(--color-primary-dark);
}

/* Layout */
.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 var(--space-lg);
}

.container-narrow {
   max-width: 600px;
}

.container-medium {
   max-width: 900px;
}

/* Header */
.header {
   background: var(--color-bg-card);
   border-bottom: 1px solid var(--color-border);
   padding: var(--space-lg) 0;
   position: sticky;
   top: 0;
   z-index: 100;
}

.header-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo {
   font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--color-primary);
   letter-spacing: 0.05em;
   text-transform: uppercase;
}

.logo span {
   font-weight: 400;
   color: var(--color-text-light);
}

.nav {
   display: flex;
   align-items: center;
   gap: var(--space-lg);
}

.nav a {
   font-weight: 500;
   color: var(--color-text-light);
}

.nav a:hover {
   color: var(--color-primary);
}

/* Buttons */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-sm);
   padding: var(--space-sm) var(--space-lg);
   font-family: var(--font-body);
   font-size: 1rem;
   font-weight: 500;
   border: none;
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all var(--transition-base);
   text-decoration: none;
}

.btn-primary {
   background: var(--color-primary);
   color: white !important;
}

.btn-primary:hover {
   background: var(--color-primary-dark);
   color: white !important;
}

.btn-secondary {
   background: var(--color-bg-alt);
   color: var(--color-text);
   border: 1px solid var(--color-border);
}

.btn-secondary:hover {
   background: var(--color-border);
}

.btn-outline {
   background: transparent;
   color: var(--color-primary);
   border: 2px solid var(--color-primary);
}

.btn-outline:hover {
   background: var(--color-primary);
   color: white;
}

.btn-sm {
   padding: var(--space-xs) var(--space-md);
   font-size: 0.875rem;
}

.btn-lg {
   padding: var(--space-md) var(--space-xl);
   font-size: 1.125rem;
}

.btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

/* Forms */
.form-group {
   margin-bottom: var(--space-lg);
}

.form-label {
   display: block;
   margin-bottom: var(--space-sm);
   font-weight: 500;
   color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
   width: 100%;
   padding: var(--space-sm) var(--space-md);
   font-family: var(--font-body);
   font-size: 1rem;
   color: var(--color-text);
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
   outline: none;
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.form-textarea {
   min-height: 100px;
   resize: vertical;
}

.form-hint {
   margin-top: var(--space-xs);
   font-size: 0.875rem;
   color: var(--color-text-muted);
}

.form-error {
   color: var(--color-error);
}

/* Cards */
.card {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   box-shadow: var(--shadow-sm);
}

.card h4 {
   margin-bottom: var(--space-md);
}

.card-header {
   margin-bottom: var(--space-lg);
   padding-bottom: var(--space-lg);
   border-bottom: 1px solid var(--color-border);
}

.card-title {
   font-size: 1.25rem;
   margin-bottom: var(--space-xs);
}

.card-subtitle {
   color: var(--color-text-light);
   font-size: 0.9rem;
}

/* Package Cards */
.packages-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--space-lg);
}

.package-card {
   background: var(--color-bg-card);
   border: 2px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   text-align: center;
   transition: all var(--transition-base);
   position: relative;
   overflow: hidden;
}

.package-card:hover {
   border-color: var(--color-primary);
   box-shadow: var(--shadow-md);
}

.package-card.featured {
   border-color: var(--color-primary);
}

.package-card.featured::before {
   content: "BEST VALUE";
   position: absolute;
   top: 16px;
   right: -32px;
   background: var(--color-primary);
   color: white;
   font-size: 0.75rem;
   font-weight: 600;
   padding: 4px 40px;
   transform: rotate(45deg);
}

.package-name {
   font-family: var(--font-display);
   font-size: 1.25rem;
   margin-bottom: var(--space-sm);
}

.package-original-price {
   font-size: 1rem;
   color: var(--color-text-muted);
   text-decoration: line-through;
   margin-bottom: var(--space-xs);
}

.package-price {
   font-size: 2.5rem;
   font-weight: 600;
   color: var(--color-primary);
   margin-bottom: var(--space-sm);
}

.package-price span {
   font-size: 1rem;
   font-weight: 400;
   color: var(--color-text-light);
}

.package-description {
   color: var(--color-text-light);
   margin-bottom: var(--space-lg);
}

.package-savings {
   display: inline-block;
   background: var(--color-accent-light);
   color: var(--color-primary-dark);
   padding: var(--space-xs) var(--space-md);
   border-radius: 20px;
   font-size: 0.875rem;
   font-weight: 500;
   margin-bottom: var(--space-lg);
}

/* Credits Display */
.credits-display {
   display: flex;
   gap: var(--space-lg);
   margin-bottom: var(--space-xl);
}

.credit-box {
   flex: 1;
   background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
   color: white;
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   text-align: center;
}

.credit-box-secondary {
   background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary-light) 100%);
}

.credit-count {
   font-size: 3rem;
   font-weight: 700;
   line-height: 1;
   margin-bottom: var(--space-xs);
}

.credit-label {
   font-size: 0.9rem;
   opacity: 0.9;
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

/* Booking Slots */
.slots-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: var(--space-md);
}

.slot-btn {
   padding: var(--space-md);
   background: var(--color-bg-alt);
   border: 2px solid var(--color-border);
   border-radius: var(--radius-md);
   font-family: var(--font-body);
   font-size: 1rem;
   font-weight: 500;
   color: var(--color-text);
   cursor: pointer;
   transition: all var(--transition-fast);
}

.slot-btn:hover:not(:disabled) {
   border-color: var(--color-primary);
   background: var(--color-accent-light);
}

.slot-btn.selected {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: white;
}

.slot-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
}

/* Calendar */
.calendar-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--space-lg);
}

.calendar-nav button {
   background: none;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--space-sm) var(--space-md);
   cursor: pointer;
   transition: all var(--transition-fast);
}

.calendar-nav button:hover {
   background: var(--color-bg-alt);
}

.calendar-title {
   font-family: var(--font-display);
   font-size: 1.25rem;
}

.calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 2px;
}

.calendar-header {
   padding: var(--space-sm);
   text-align: center;
   font-weight: 600;
   font-size: 0.875rem;
   color: var(--color-text-muted);
}

.calendar-day {
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   font-weight: 500;
   cursor: pointer;
   transition: all var(--transition-fast);
}

.calendar-day:hover:not(.disabled):not(.other-month) {
   background: var(--color-accent-light);
   border-color: var(--color-primary);
}

.calendar-day.selected {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: white;
}

.calendar-day.today {
   border-color: var(--color-primary);
   font-weight: 700;
}

.calendar-day.disabled,
.calendar-day.other-month {
   color: var(--color-text-muted);
   cursor: not-allowed;
   background: var(--color-bg-alt);
}

/* Bookings List */
.booking-item {
   display: flex;
   align-items: center;
   gap: var(--space-lg);
   padding: var(--space-lg);
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-md);
}

.booking-date {
   text-align: center;
   min-width: 80px;
}

.booking-date-day {
   font-size: 2rem;
   font-weight: 700;
   color: var(--color-primary);
   line-height: 1;
}

.booking-date-month {
   font-size: 0.875rem;
   color: var(--color-text-light);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.booking-details {
   flex: 1;
}

.booking-time {
   font-weight: 600;
   font-size: 1.125rem;
   margin-bottom: var(--space-xs);
}

.booking-info {
   color: var(--color-text-light);
   font-size: 0.9rem;
}

.booking-actions {
   display: flex;
   gap: var(--space-sm);
}

/* Alerts */
.alert {
   padding: var(--space-md) var(--space-lg);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-lg);
}

.alert-success {
   background: #e8f5e9;
   color: var(--color-success);
   border: 1px solid #c8e6c9;
}

.alert-error {
   background: #ffebee;
   color: var(--color-error);
   border: 1px solid #ffcdd2;
}

.alert-warning {
   background: #fff8e1;
   color: var(--color-warning);
   border: 1px solid #ffecb3;
}

.alert-info {
   background: var(--color-accent-light);
   color: var(--color-primary-dark);
   border: 1px solid var(--color-accent);
}

/* Hero Section */
.hero {
   padding: var(--space-3xl) 0;
   text-align: center;
   background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

.hero h1 {
   margin-bottom: var(--space-md);
}

.hero p {
   font-size: 1.25rem;
   color: var(--color-text-light);
   max-width: 600px;
   margin: 0 auto var(--space-xl);
}

/* Section */
.section {
   padding: var(--space-3xl) 0;
}

.section-header {
   text-align: center;
   margin-bottom: var(--space-2xl);
}

.section-header h2 {
   margin-bottom: var(--space-sm);
}

.section-header p {
   color: var(--color-text-light);
   max-width: 600px;
   margin: 0 auto;
}

/* Christmas Banner */
.christmas-banner {
   background: linear-gradient(135deg, #1a472a 0%, #2d5a3d 100%);
   color: white;
   padding: var(--space-lg);
   text-align: center;
   position: relative;
   overflow: hidden;
}

.christmas-banner::before {
   content: "❄️";
   position: absolute;
   top: 10px;
   left: 20px;
   font-size: 1.5rem;
   opacity: 0.5;
}

.christmas-banner::after {
   content: "🎄";
   position: absolute;
   top: 10px;
   right: 20px;
   font-size: 1.5rem;
   opacity: 0.5;
}

@media (max-width: 768px) {
   .christmas-banner::before,
   .christmas-banner::after {
      display: none;
   }
}

.christmas-banner h3 {
   color: white;
   margin-bottom: var(--space-xs);
}

.christmas-banner p {
   margin: 0;
   opacity: 0.9;
}

/* Instructor Selection */
.instructor-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--space-lg);
   margin-bottom: var(--space-xl);
}

.instructor-card {
   padding: var(--space-xl);
   background: var(--color-bg-card);
   border: 2px solid var(--color-border);
   border-radius: var(--radius-lg);
   text-align: center;
   cursor: pointer;
   transition: all var(--transition-base);
}

.instructor-card:hover {
   border-color: var(--color-primary);
}

.instructor-card.selected {
   border-color: var(--color-primary);
   background: var(--color-accent-light);
}

.instructor-name {
   font-family: var(--font-display);
   font-size: 1.25rem;
   margin-top: var(--space-md);
   margin-bottom: var(--space-md);
}

.instructor-avatar {
   width: 80px;
   height: 80px;
   background: var(--color-accent);
   border-radius: 50%;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2rem;
   color: white;
}

/* Loading Spinner */
.spinner {
   width: 40px;
   height: 40px;
   border: 3px solid var(--color-border);
   border-top-color: var(--color-primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin: var(--space-xl) auto;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

/* Empty State */
.empty-state {
   text-align: center;
   padding: var(--space-3xl) var(--space-xl);
   color: var(--color-text-light);
}

.empty-state-icon {
   font-size: 3rem;
   margin-bottom: var(--space-lg);
   opacity: 0.5;
}

/* Footer */
.footer {
   background: var(--color-text);
   color: var(--color-bg);
   padding: var(--space-2xl) 0;
   text-align: center;
   margin-top: auto;
}

.footer a {
   color: var(--color-accent);
}

/* Modal */
.modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--space-lg);
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transition: all var(--transition-base);
}

.modal-overlay.active {
   opacity: 1;
   visibility: visible;
}

.modal {
   background: var(--color-bg-card);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   max-width: 500px;
   width: 100%;
   max-height: 90vh;
   overflow-y: auto;
   transform: translateY(20px);
   transition: transform var(--transition-base);
}

.modal-overlay.active .modal {
   transform: translateY(0);
}

.modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--space-lg);
}

.modal-close {
   background: none;
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
   color: var(--color-text-light);
}

/* Utilities */
.text-center {
   text-align: center;
}
.text-right {
   text-align: right;
}
.text-muted {
   color: var(--color-text-muted);
}
.text-success {
   color: var(--color-success);
}
.text-error {
   color: var(--color-error);
}

.mt-sm {
   margin-top: var(--space-sm);
}
.mt-md {
   margin-top: var(--space-md);
}
.mt-lg {
   margin-top: var(--space-lg);
}
.mt-xl {
   margin-top: var(--space-xl);
}

.mb-sm {
   margin-bottom: var(--space-sm);
}
.mb-md {
   margin-bottom: var(--space-md);
}
.mb-lg {
   margin-bottom: var(--space-lg);
}
.mb-xl {
   margin-bottom: var(--space-xl);
}

.hidden {
   display: none !important;
}

.flex {
   display: flex;
}
.flex-col {
   flex-direction: column;
}
.items-center {
   align-items: center;
}
.justify-between {
   justify-content: space-between;
}
.gap-sm {
   gap: var(--space-sm);
}
.gap-md {
   gap: var(--space-md);
}
.gap-lg {
   gap: var(--space-lg);
}

/* Responsive */
@media (max-width: 768px) {
   h1 {
      font-size: 2rem;
   }
   h2 {
      font-size: 1.5rem;
   }

   .header {
      padding: var(--space-md) 0 var(--space-lg) 0;
   }

   .header-inner {
      flex-direction: column;
      gap: var(--space-md);
   }

   .nav {
      width: 100%;
      justify-content: center;
      gap: var(--space-sm);
      flex-wrap: wrap;
      padding-bottom: var(--space-sm);
   }

   .nav a,
   .nav .btn {
      padding: var(--space-sm) var(--space-md);
      font-size: 0.9rem;
      border-radius: var(--radius-lg);
      background: var(--color-bg-alt);
      border: 1px solid var(--color-border);
      color: var(--color-text);
      font-weight: 500;
      transition: all var(--transition-fast);
   }

   .nav a:hover,
   .nav .btn:hover {
      background: var(--color-primary);
      color: white;
      border-color: var(--color-primary);
   }

   .nav .btn-primary {
      background: var(--color-primary);
      color: white;
      border-color: var(--color-primary);
   }

   .nav .btn-secondary {
      background: var(--color-bg-alt);
      color: var(--color-text);
   }

   .credits-display {
      flex-direction: column;
   }

   .booking-item {
      flex-direction: column;
      text-align: center;
   }

   .booking-actions {
      width: 100%;
      justify-content: center;
   }

   .packages-grid {
      grid-template-columns: 1fr;
   }
}