/* ============================================
   REGIONDO WIDGET STYLING
   barista-dresden.de Design System

   Nutzt CSS-Variablen aus global-theme.css
   Unterstützt Light + Dark Mode
   ============================================ */

/* === WIDGET CONTAINER === */
.regiondo-widget,
.regiondo-embed,
[class*="regiondo"] {
  font-family: var(--font-body, 'DM Sans', -apple-system, sans-serif) !important;
  color: var(--text-primary, #1a1a1a) !important;
}

/* === PRIMARY BUTTON (Outline Style) === */
.regiondo-widget .regiondo-button,
.regiondo-button,
.regiondo-widget button,
.regiondo-embed button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px 32px !important;
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--accent, #FF6B35) !important;
  background: var(--bg-card, #ffffff) !important;
  border: 2px solid var(--accent, #FF6B35) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  min-height: 56px !important;
  line-height: 1.4 !important;
}

.regiondo-widget .regiondo-button:hover,
.regiondo-button:hover,
.regiondo-widget button:hover,
.regiondo-embed button[type="submit"]:hover {
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent, #FF6B35) 0%, #ff8555 100%) !important;
  border-color: var(--accent, #FF6B35) !important;
  box-shadow: 0 8px 28px rgba(255, 107, 53, 0.35) !important;
  transform: translateY(-3px) !important;
}

.regiondo-widget .regiondo-button:active,
.regiondo-button:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3) !important;
}

/* === FILLED BUTTON VARIANT === */
.regiondo-widget .regiondo-button--primary,
.regiondo-button--primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent, #FF6B35) 0%, #ff8555 100%) !important;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.25) !important;
}

.regiondo-widget .regiondo-button--primary:hover,
.regiondo-button--primary:hover {
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.4) !important;
}

/* === CALENDAR WIDGET === */
.regiondo-calendar,
.regiondo-widget .calendar,
.regiondo-widget [class*="calendar"] {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, rgba(0,0,0,0.07)) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-md, 0 4px 24px rgba(0,0,0,0.06)) !important;
  overflow: hidden !important;
  padding: 20px !important;
}

/* Calendar Header */
.regiondo-calendar-header,
.regiondo-widget .calendar-header,
.regiondo-widget [class*="calendar-header"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 0 !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.07)) !important;
}

.regiondo-calendar-header h2,
.regiondo-calendar-header h3,
.regiondo-widget .calendar-header h2 {
  font-family: var(--font-display, 'Playfair Display', serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text-primary, #1a1a1a) !important;
  margin: 0 !important;
}

/* Calendar Navigation Arrows */
.regiondo-calendar-nav,
.regiondo-widget [class*="calendar-nav"],
.regiondo-widget .calendar button {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-3, #f3efe9) !important;
  border: 1px solid var(--border, rgba(0,0,0,0.07)) !important;
  border-radius: 10px !important;
  color: var(--text-primary, #1a1a1a) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
  min-height: auto !important;
}

.regiondo-calendar-nav:hover,
.regiondo-widget .calendar button:hover {
  background: var(--accent, #FF6B35) !important;
  border-color: var(--accent, #FF6B35) !important;
  color: #fff !important;
}

/* Calendar Days Grid */
.regiondo-calendar-days,
.regiondo-widget [class*="calendar-days"],
.regiondo-widget .days-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
}

/* Day Names (Mo, Di, Mi...) */
.regiondo-calendar-weekday,
.regiondo-widget [class*="weekday"] {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted, #918980) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 0 !important;
  text-align: center !important;
}

/* Calendar Day Cells */
.regiondo-calendar-day,
.regiondo-widget [class*="calendar-day"],
.regiondo-widget .day-cell {
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-primary, #1a1a1a) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.regiondo-calendar-day:hover,
.regiondo-widget [class*="calendar-day"]:hover {
  background: var(--accent-soft, rgba(255,107,53,0.08)) !important;
  color: var(--accent, #FF6B35) !important;
}

/* Available Day */
.regiondo-calendar-day--available,
.regiondo-widget [class*="available"],
.regiondo-widget .day-cell.available {
  background: var(--accent-soft, rgba(255,107,53,0.08)) !important;
  color: var(--accent, #FF6B35) !important;
  font-weight: 600 !important;
}

.regiondo-calendar-day--available:hover,
.regiondo-widget [class*="available"]:hover {
  background: var(--accent, #FF6B35) !important;
  color: #fff !important;
}

/* Selected Day */
.regiondo-calendar-day--selected,
.regiondo-widget [class*="selected"],
.regiondo-widget .day-cell.selected {
  background: var(--accent, #FF6B35) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Disabled/Past Day */
.regiondo-calendar-day--disabled,
.regiondo-widget [class*="disabled"],
.regiondo-widget .day-cell.disabled {
  color: var(--text-muted, #918980) !important;
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Today */
.regiondo-calendar-day--today,
.regiondo-widget [class*="today"] {
  border: 2px solid var(--accent, #FF6B35) !important;
  font-weight: 700 !important;
}

/* === FORM ELEMENTS === */
.regiondo-widget input,
.regiondo-widget select,
.regiondo-widget textarea,
.regiondo-embed input,
.regiondo-embed select {
  width: 100% !important;
  padding: 14px 16px !important;
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: 15px !important;
  color: var(--text-primary, #1a1a1a) !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, rgba(0,0,0,0.07)) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  outline: none !important;
}

.regiondo-widget input:focus,
.regiondo-widget select:focus,
.regiondo-widget textarea:focus {
  border-color: var(--accent, #FF6B35) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1) !important;
}

.regiondo-widget input::placeholder,
.regiondo-widget textarea::placeholder {
  color: var(--text-muted, #918980) !important;
}

/* Labels */
.regiondo-widget label,
.regiondo-embed label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-primary, #1a1a1a) !important;
  margin-bottom: 8px !important;
}

/* === PRICE DISPLAY === */
.regiondo-price,
.regiondo-widget [class*="price"],
.regiondo-widget .price {
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--accent, #FF6B35) !important;
}

.regiondo-price-currency,
.regiondo-widget [class*="currency"] {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* === TIME SLOTS === */
.regiondo-timeslots,
.regiondo-widget [class*="timeslot"],
.regiondo-widget .time-slots {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 16px 0 !important;
}

.regiondo-timeslot,
.regiondo-widget [class*="timeslot-item"],
.regiondo-widget .time-slot {
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-primary, #1a1a1a) !important;
  background: var(--bg-3, #f3efe9) !important;
  border: 1px solid var(--border, rgba(0,0,0,0.07)) !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.regiondo-timeslot:hover,
.regiondo-widget [class*="timeslot-item"]:hover {
  border-color: var(--accent, #FF6B35) !important;
  background: var(--accent-soft, rgba(255,107,53,0.08)) !important;
  color: var(--accent, #FF6B35) !important;
}

.regiondo-timeslot--selected,
.regiondo-widget [class*="timeslot-item"].selected {
  background: var(--accent, #FF6B35) !important;
  border-color: var(--accent, #FF6B35) !important;
  color: #fff !important;
}

/* === QUANTITY SELECTOR === */
.regiondo-quantity,
.regiondo-widget [class*="quantity"] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.regiondo-quantity button,
.regiondo-widget [class*="quantity"] button {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  background: var(--bg-3, #f3efe9) !important;
  border: 1px solid var(--border, rgba(0,0,0,0.07)) !important;
  border-radius: 10px !important;
  color: var(--text-primary, #1a1a1a) !important;
}

.regiondo-quantity button:hover {
  background: var(--accent, #FF6B35) !important;
  border-color: var(--accent, #FF6B35) !important;
  color: #fff !important;
}

.regiondo-quantity input,
.regiondo-widget [class*="quantity"] input {
  width: 60px !important;
  text-align: center !important;
  font-weight: 600 !important;
}

/* === PRODUCT/COURSE CARDS === */
.regiondo-product,
.regiondo-widget [class*="product-card"],
.regiondo-widget .product {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, rgba(0,0,0,0.07)) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.regiondo-product:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg, 0 12px 48px rgba(0,0,0,0.08)) !important;
  border-color: rgba(255, 107, 53, 0.2) !important;
}

.regiondo-product-title,
.regiondo-widget [class*="product-title"] {
  font-family: var(--font-display, 'Playfair Display', serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text-primary, #1a1a1a) !important;
  margin-bottom: 8px !important;
}

.regiondo-product-description,
.regiondo-widget [class*="product-description"] {
  font-size: 15px !important;
  color: var(--text-secondary, #4d4640) !important;
  line-height: 1.65 !important;
}

/* === LOADING STATES === */
.regiondo-loading,
.regiondo-widget [class*="loading"],
.regiondo-widget .spinner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px !important;
}

.regiondo-loading::after,
.regiondo-widget .spinner::after {
  content: '' !important;
  width: 32px !important;
  height: 32px !important;
  border: 3px solid var(--bg-3, #f3efe9) !important;
  border-top-color: var(--accent, #FF6B35) !important;
  border-radius: 50% !important;
  animation: regiondo-spin 0.8s linear infinite !important;
}

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

/* === ERROR/SUCCESS MESSAGES === */
.regiondo-error,
.regiondo-widget [class*="error"] {
  padding: 14px 18px !important;
  background: rgba(220, 53, 69, 0.1) !important;
  border: 1px solid rgba(220, 53, 69, 0.2) !important;
  border-radius: 10px !important;
  color: #dc3545 !important;
  font-size: 14px !important;
}

.regiondo-success,
.regiondo-widget [class*="success"] {
  padding: 14px 18px !important;
  background: rgba(40, 167, 69, 0.1) !important;
  border: 1px solid rgba(40, 167, 69, 0.2) !important;
  border-radius: 10px !important;
  color: #28a745 !important;
  font-size: 14px !important;
}

/* === DARK MODE SUPPORT === */
[data-theme="dark"] .regiondo-widget,
[data-theme="dark"] .regiondo-embed,
[data-theme="dark"] [class*="regiondo"] {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .regiondo-widget .regiondo-button,
[data-theme="dark"] .regiondo-button {
  background: var(--bg-card) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

[data-theme="dark"] .regiondo-widget .regiondo-button:hover,
[data-theme="dark"] .regiondo-button:hover {
  background: linear-gradient(135deg, var(--accent) 0%, #ff8555 100%) !important;
  color: #fff !important;
}

[data-theme="dark"] .regiondo-calendar,
[data-theme="dark"] .regiondo-widget .calendar,
[data-theme="dark"] .regiondo-product {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .regiondo-widget input,
[data-theme="dark"] .regiondo-widget select,
[data-theme="dark"] .regiondo-widget textarea {
  background: var(--bg-3) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* System Preference Dark Mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .regiondo-widget,
  :root:not([data-theme="light"]) .regiondo-embed {
    color: var(--text-primary) !important;
  }

  :root:not([data-theme="light"]) .regiondo-widget .regiondo-button {
    background: var(--bg-card) !important;
  }

  :root:not([data-theme="light"]) .regiondo-calendar,
  :root:not([data-theme="light"]) .regiondo-product {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
  }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .regiondo-widget .regiondo-button,
  .regiondo-button {
    padding: 14px 24px !important;
    font-size: 15px !important;
    min-height: 52px !important;
  }

  .regiondo-calendar,
  .regiondo-widget .calendar {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .regiondo-calendar-day,
  .regiondo-widget .day-cell {
    font-size: 13px !important;
  }

  .regiondo-timeslots,
  .regiondo-widget .time-slots {
    gap: 8px !important;
  }

  .regiondo-timeslot {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .regiondo-widget .regiondo-button,
  .regiondo-button {
    padding: 12px 20px !important;
    font-size: 14px !important;
    min-height: 48px !important;
    border-radius: 8px !important;
  }

  .regiondo-calendar-header h2 {
    font-size: 18px !important;
  }

  .regiondo-calendar-nav {
    width: 36px !important;
    height: 36px !important;
  }
}

/* === IFRAME CONTAINER (falls iFrame genutzt wird) === */
.regiondo-iframe-container {
  position: relative;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.regiondo-iframe-container iframe {
  width: 100%;
  min-height: 500px;
  border: none;
  display: block;
}

/* === WIDGET WRAPPER für Kurs-Seiten === */
.bk-regiondo-section {
  margin: 48px 0;
  padding: 32px;
  background: var(--bg-2);
  border-radius: 20px;
  border: 1px solid var(--border);
}

.bk-regiondo-section .bk-h3 {
  margin-bottom: 24px;
}