/* ============= HIGHLAND SLICE THEME ============= */
/* Direct match to the Highland Slice logo.
   Palette:
   Charcoal:      #2A2A2A  — primary background
   Deep Charcoal: #1E1E1E  — deeper surfaces, header
   Card Surface:  #333333  — card backgrounds
   Gold:          #D4A017  — primary accent, buttons
   Warm Gold:     #F0B429  — highlights, prices
   White:         #FFFFFF  — headings
   Off-white:     #E8E8E8  — body text
   Muted:         #888888  — secondary text
   Font: Montserrat — wide spaced caps to match logo
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

body {
  --cream:         #2A2A2A;
  --warm-white:    #333333;
  --stone:         #444444;
  --stone-dark:    #555555;
  --ink:           #FFFFFF;
  --ink-light:     #E8E8E8;
  --ink-faint:     #888888;
  --terracotta:    #D4A017;
  --terra-light:   #2A2200;
  --serif:         'Montserrat', sans-serif;
  --sans:          'Montserrat', sans-serif;
  background: #2A2A2A;
  font-family: 'Montserrat', sans-serif;
}

.site-header {
  background: #1E1E1E;
  border-bottom: 1px solid #D4A017;
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
}

.site-header h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1;
}

.site-header .subtitle {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.6rem;
  color: #D4A017;
  margin-top: 0.625rem;
}

h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: #FFFFFF;
}

.card {
  background: #333333;
  border-color: #444444;
  border-radius: 4px;
}

.pizza-card {
  background: #333333;
  border-color: #444444;
  border-radius: 4px;
}

.pizza-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: #FFFFFF;
}

.pizza-card .description {
  color: #888888;
  font-style: normal;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.3px;
}

.pizza-card .price {
  color: #F0B429;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px;
}

.slot-time {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 2.25rem;
  letter-spacing: 2px;
  color: #FFFFFF;
  text-transform: uppercase;
}

.time-slot-card {
  background: #333333;
  border: 1px solid #444444;
  border-radius: 4px;
}

.time-slot-card.full {
  background: #2A2A2A;
  border-color: #3A3A3A;
  opacity: 0.5;
}

.slot-capacity { color: #888888; font-weight: 500; letter-spacing: 0.5px; font-size: 0.8rem; }
.slot-capacity.low { color: #F0B429; font-weight: 600; }
.item-availability-note { color: #F0B429; font-weight: 500; }

.time-navigation {
  background: #1E1E1E;
  border-color: #444444;
  border-radius: 4px;
}

.current-time-range {
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.button, .time-nav-button {
  background: #D4A017 !important;
  color: #1E1E1E !important;
  border-color: #D4A017 !important;
  border-radius: 3px !important;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.button:disabled, .time-nav-button:disabled {
  background: #D4A017 !important;
  color: #1E1E1E !important;
  opacity: 0.35;
}

.button.secondary {
  background: transparent !important;
  color: #D4A017 !important;
  border: 1px solid #D4A017 !important;
}

.quantity-controls button {
  background: #D4A017 !important;
  color: #1E1E1E !important;
  border-color: #D4A017 !important;
  border-radius: 3px !important;
  font-weight: 700;
}

.quantity-controls button:disabled {
  background: #D4A017 !important;
  color: #1E1E1E !important;
  opacity: 0.35;
}

.quantity-controls .qty {
  color: #FFFFFF;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

.pizza-select-item {
  background: #2A2A2A;
  border-color: #444444;
  border-radius: 3px;
}

.pizza-select-name {
  color: #E8E8E8;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}

.pizza-select-price {
  color: #F0B429;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

.step-number { border-color: #555555; color: #888888; }
.step.active .step-number { border-color: #D4A017; color: #D4A017; }
.step.active { color: #D4A017; }

.step.completed .step-number {
  background: #D4A017 !important;
  border-color: #D4A017 !important;
  color: #1E1E1E !important;
}

.step.completed { color: #D4A017; }
.step-divider { background: #444444; }

.step { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; }

.cart-summary {
  background: #1E1E1E;
  border: 1px solid #D4A017;
  border-radius: 4px;
}

.cart-item { border-bottom-color: rgba(255,255,255,0.06); }

.pizza-mod-item {
  background: #2A2A2A;
  border-color: #444444;
  border-radius: 4px;
}

.pizza-mod-header { border-bottom-color: #444444; }

.pizza-mod-title {
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pizza-mod-slot { color: #888888; font-size: 0.8rem; }

.checkbox-group label {
  background: #2A2A2A;
  border-color: #444444;
  color: #E8E8E8;
  border-radius: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
}

.checkbox-group label:hover { border-color: #D4A017; }
.checkbox-group input[type="checkbox"] { accent-color: #D4A017; }

.form-group label {
  color: #E8E8E8;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-family: 'Montserrat', sans-serif;
}

input, select, textarea {
  background: #2A2A2A !important;
  border-color: #444444 !important;
  color: #FFFFFF !important;
  border-radius: 3px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.875rem !important;
}

input::placeholder, textarea::placeholder {
  color: #666666 !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #D4A017 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(212,160,23,0.15);
}

.order-summary-box {
  background: #2A2A2A;
  border-color: #444444;
  border-radius: 4px;
}

.order-summary-box h3 {
  color: #FFFFFF;
  border-bottom-color: #444444;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.85rem;
}

.order-summary-item { border-bottom-color: #3A3A3A; color: #E8E8E8; font-size: 0.875rem; }

.contact-note {
  background: rgba(212,160,23,0.08);
  border-left-color: #D4A017;
  color: #E8E8E8;
  border-radius: 0 3px 3px 0;
}

.contact-note strong { color: #D4A017; }

.error {
  background: rgba(200,50,50,0.1);
  border-color: rgba(200,50,50,0.3);
  border-left-color: #CC3333;
  color: #FF9090;
  border-radius: 3px;
}

.no-slots-message {
  color: #888888;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.9rem;
}

#service-date-select {
  background: #2A2A2A !important;
  border-color: #444444 !important;
  color: #FFFFFF !important;
}

.slot-full {
  color: #888888;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.8rem;
}