/**
 * Healing Haven Courses - Single Course Styles
 * Basiert auf dem Healing Haven Design System
 */

/* Typography */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600;700&display=swap');

/* NUR für den Course-Wrapper - NICHT global! */
.hhc-single-course-wrapper {
    /* CSS-Variablen - Primärfarben - Naturinspirierte Grüntöne */
    --hh-primary: #67836c;
    --hh-primary-dark: #4d6756;
    --hh-primary-light: #a8bdb0;
    --hh-primary-accessible: #5A7560;
    --hh-primary-strong: #4A6350;
    --hh-accent-dark: #3F5B48;
    --hh-focus-color: #2E4A35;

    /* Hintergrundfarben */
    --hh-bg: #f9f7f2;
    --hh-bg-soft: #FFFFFF;
    --hh-bg-gradient-start: #E8F0EA;

    /* Textfarben */
    --hh-text: #1f2a24;
    --hh-text-light: #6B7570;

    /* Spacing (Goldener Schnitt) */
    --space-1: 0.618rem;
    --space-2: 1rem;
    --space-3: 1.618rem;
    --space-4: 2.618rem;
    --space-5: 4.236rem;

    /* Radius */
    --hh-radius: 12px;
    --hh-radius-lg: 24px;
    --hh-radius-full: 999px;

    /* Schatten */
    --hh-shadow-xs: 0 1px 3px rgba(31, 42, 36, 0.05);
    --hh-shadow: 0 2px 12px rgba(31, 42, 36, 0.08);
    --hh-shadow-md: 0 4px 16px rgba(31, 42, 36, 0.1);
    --hh-shadow-hover: 0 8px 24px rgba(31, 42, 36, 0.12);
    --hh-shadow-lg: 0 12px 32px rgba(31, 42, 36, 0.15);

    /* Transitions */
    --hh-transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --hh-transition-fast: all 250ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Styles */
    background: var(--hh-bg) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Breadcrumb mit HH Farben */
.hhc-breadcrumb {
    margin-top: 20px !important;
    padding-top: 0 !important;
    color: var(--hh-text-light) !important;
}

/* Hero Image mit Abrundung */
.hhc-course-hero-image {
    border-radius: var(--hh-radius) !important;
    overflow: hidden !important;
}

.hhc-hero-image {
    border-radius: var(--hh-radius) !important;
}

.hhc-breadcrumb a {
    color: var(--hh-text-light) !important;
    text-decoration: none !important;
    transition: var(--hh-transition-fast) !important;
}

.hhc-breadcrumb a:hover {
    color: var(--hh-primary) !important;
}

.hhc-breadcrumb .separator {
    color: var(--hh-text-light) !important;
    opacity: 0.5 !important;
}

.hhc-breadcrumb .current {
    color: var(--hh-text) !important;
}

/* Left Column mit HH Farben */
.hhc-course-left {
    background: var(--hh-bg-soft) !important;
    border-radius: var(--hh-radius) !important;
    box-shadow: var(--hh-shadow) !important;
}

/* Titel mit Playfair Font */
.hhc-course-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--hh-text) !important;
}

/* Badges Container oben rechts */
.hhc-badge-container {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-end !important;
    z-index: 10 !important;
}

.hhc-badge-container .hhc-badge {
    position: relative !important;
    top: auto !important;
    right: auto !important;
}

/* Badges mit HH Farben */
.hhc-badge-block {
    background: var(--hh-primary) !important;
}

/* Kategorien Tags als Overlay auf Hero Image */
.hhc-course-taxonomies-overlay {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 10 !important;
}

.hhc-course-taxonomies-overlay .hhc-categories {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.hhc-category-tag {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--hh-primary-dark) !important;
    border-radius: var(--hh-radius-full) !important;
    transition: var(--hh-transition-fast) !important;
    box-shadow: var(--hh-shadow) !important;
    text-decoration: none !important;
    padding: 6px 14px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.hhc-category-tag:hover {
    background: var(--hh-primary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--hh-shadow-md) !important;
}

/* Highlights Icons */
.hhc-highlight .hhc-icon {
    fill: var(--hh-primary) !important;
}

/* Course Content Text */
.hhc-course-content {
    color: var(--hh-text) !important;
}

.hhc-course-content h2,
.hhc-course-content h3 {
    color: var(--hh-text) !important;
}

/* Events */
.hhc-event-date {
    background: var(--hh-bg-gradient-start) !important;
}

.hhc-date-day,
.hhc-date-month {
    color: var(--hh-primary-dark) !important;
}

.hhc-available {
    color: var(--hh-primary) !important;
}

.hhc-availability-fill {
    background: var(--hh-primary) !important;
}

/* Right Sidebar */
.hhc-sidebar-image {
    box-shadow: var(--hh-shadow) !important;
}

/* Booking Widget Header */
.hhc-widget-header {
    background: linear-gradient(135deg, var(--hh-primary) 0%, var(--hh-primary-dark) 100%) !important;
}

.hhc-widget-header h3 {
    color: #ffffff !important;
}

/* Form Elements */
.hhc-form-group input:focus,
.hhc-form-group select:focus,
.hhc-form-group textarea:focus {
    border-color: var(--hh-primary) !important;
    box-shadow: 0 0 0 3px rgba(103, 131, 108, 0.1) !important;
}

/* Buttons */
.hhc-btn-primary {
    background: linear-gradient(135deg, var(--hh-primary) 0%, var(--hh-primary-dark) 100%) !important;
    transition: var(--hh-transition-fast) !important;
}

.hhc-btn-primary:hover {
    box-shadow: var(--hh-shadow-hover) !important;
    background: linear-gradient(135deg, var(--hh-primary-dark) 0%, var(--hh-accent-dark) 100%) !important;
}

/* Info Widget */
.hhc-info-widget {
    background: var(--hh-bg-soft) !important;
    box-shadow: var(--hh-shadow) !important;
}

.hhc-info-widget h3 {
    color: var(--hh-text) !important;
}

.hhc-info-list li {
    color: var(--hh-text-light) !important;
}

.hhc-info-list .hhc-icon {
    fill: var(--hh-primary) !important;
}

/* Price Summary */
.hhc-price-summary {
    background: var(--hh-bg-gradient-start) !important;
}

/* Form Messages */
.hhc-form-messages .success {
    background: rgba(103, 131, 108, 0.1) !important;
    color: var(--hh-primary-dark) !important;
    border: 1px solid var(--hh-primary-light) !important;
}

/* Links */
.hhc-form-checkbox a {
    color: var(--hh-primary) !important;
}

/* Page Header für Single Course */
.hhc-page-header {
    padding: var(--space-2) 0 var(--space-2);
    margin-top: 0;
    margin-bottom: var(--space-2);
    text-align: center;
    background: linear-gradient(180deg, var(--hh-bg) 0%, var(--hh-bg-gradient-start) 100%);
    border-bottom: 1px solid rgba(103, 131, 108, 0.1);
}

.hhc-page-header h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    color: var(--hh-text);
}

.hhc-page-subtitle {
    font-size: 1.1rem;
    color: var(--hh-text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* ======================================
   REGISTRIERUNG & AUTHENTIFIZIERUNG
   ====================================== */

/* Auth Container */
.hhc-auth-required {
    background: var(--hh-bg-soft) !important;
    border-radius: var(--hh-radius) !important;
    padding: var(--space-4) 10px !important;
    box-shadow: var(--hh-shadow) !important;
}

/* Auth Tabs */
.hhc-auth-tabs {
    display: flex !important;
    gap: 2px !important;
    margin-bottom: var(--space-3) !important;
    border-bottom: 2px solid var(--hh-bg-gradient-start) !important;
}

.hhc-auth-tab {
    flex: 1 !important;
    padding: 2px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: var(--hh-text-light) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--hh-transition-fast) !important;
    font-family: 'Inter', sans-serif !important;
    margin-bottom: -2px !important;
}

.hhc-auth-tab:hover {
    color: var(--hh-primary) !important;
    background: var(--hh-bg-gradient-start) !important;
}

.hhc-auth-tab.active {
    color: var(--hh-primary) !important;
    border-bottom-color: var(--hh-primary) !important;
    background: var(--hh-bg-gradient-start) !important;
}

/* Auth Content */
.hhc-auth-content {
    display: none !important;
}

.hhc-auth-content.active {
    display: block !important;
    animation: fadeIn 0.3s ease-in-out !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hhc-auth-description {
    color: var(--hh-text-light) !important;
    margin-bottom: var(--space-3) !important;
    text-align: center !important;
    font-size: 0.95rem !important;
}

/* Register & Login Forms */
.hhc-register-form,
.hhc-login-form {
    max-width: 500px !important;
    margin: 0 auto !important;
}

/* Form Hint */
.hhc-form-hint {
    display: block !important;
    margin-top: var(--space-1) !important;
    font-size: 0.85rem !important;
    color: var(--hh-text-light) !important;
}

/* Password Strength Indicator */
.hhc-password-strength {
    margin-top: var(--space-2) !important;
    padding: var(--space-2) !important;
    border-radius: var(--hh-radius) !important;
    background: var(--hh-bg-gradient-start) !important;
}

.hhc-strength-bar {
    height: 6px !important;
    border-radius: var(--hh-radius-full) !important;
    background: #e0e0e0 !important;
    margin-bottom: var(--space-1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.hhc-strength-bar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    border-radius: var(--hh-radius-full) !important;
    transition: all 0.3s ease !important;
}

.hhc-password-strength.weak .hhc-strength-bar::after {
    width: 33% !important;
    background: #e74c3c !important;
}

.hhc-password-strength.medium .hhc-strength-bar::after {
    width: 66% !important;
    background: #f39c12 !important;
}

.hhc-password-strength.strong .hhc-strength-bar::after {
    width: 100% !important;
    background: var(--hh-primary) !important;
}

.hhc-strength-text {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

.hhc-password-strength.weak .hhc-strength-text {
    color: #e74c3c !important;
}

.hhc-password-strength.medium .hhc-strength-text {
    color: #f39c12 !important;
}

.hhc-password-strength.strong .hhc-strength-text {
    color: var(--hh-primary) !important;
}

/* Input Error State */
.hhc-form-group input.error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
}

/* Auth Link */
.hhc-auth-link {
    text-align: center !important;
    margin-top: var(--space-3) !important;
}

.hhc-auth-link a {
    color: var(--hh-primary) !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    transition: var(--hh-transition-fast) !important;
}

.hhc-auth-link a:hover {
    color: var(--hh-primary-dark) !important;
    text-decoration: underline !important;
}

/* Form Messages in Auth */
.hhc-form-messages {
    margin-top: var(--space-3) !important;
}

.hhc-form-messages .error {
    background: rgba(231, 76, 60, 0.1) !important;
    color: #c0392b !important;
    border: 1px solid rgba(231, 76, 60, 0.3) !important;
    padding: var(--space-2) !important;
    border-radius: var(--hh-radius) !important;
    font-size: 0.9rem !important;
}

.hhc-form-messages .success {
    background: rgba(103, 131, 108, 0.1) !important;
    color: var(--hh-primary-dark) !important;
    border: 1px solid var(--hh-primary-light) !important;
    padding: var(--space-2) !important;
    border-radius: var(--hh-radius) !important;
    font-size: 0.9rem !important;
}

/* User Info Notice */
.hhc-user-info-notice {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: var(--space-2) var(--space-3) !important;
    background: var(--hh-bg-gradient-start) !important;
    border-left: 4px solid var(--hh-primary) !important;
    border-radius: var(--hh-radius) !important;
    margin-bottom: var(--space-3) !important;
    font-size: 0.9rem !important;
    color: var(--hh-text) !important;
}

.hhc-user-info-notice .hhc-icon {
    fill: var(--hh-primary) !important;
    flex-shrink: 0 !important;
}

/* Readonly Input Fields */
.hhc-form-group input.hhc-readonly {
    background: var(--hh-bg-gradient-start) !important;
    border-color: var(--hh-primary-light) !important;
    color: var(--hh-text-light) !important;
    cursor: not-allowed !important;
}

.hhc-form-group input.hhc-readonly:focus {
    border-color: var(--hh-primary-light) !important;
    box-shadow: none !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hhc-auth-required {
        padding: var(--space-3) var(--space-2) !important;
    }

    .hhc-auth-tab {
        font-size: 0.9rem !important;
        padding: 2px !important;
    }

    .hhc-user-info-notice {
        padding: var(--space-2) !important;
        font-size: 0.85rem !important;
    }
}

/* ======================================
   NOTIFICATION POPUP
   ====================================== */

.hhc-notification {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    max-width: 400px !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    transform: translateX(100%) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hhc-notification-show {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.hhc-notification-content {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: var(--space-3) !important;
    border-radius: var(--hh-radius) !important;
    box-shadow: var(--hh-shadow-lg) !important;
    background: white !important;
}

.hhc-notification-error .hhc-notification-content {
    border-left: 4px solid #e74c3c !important;
}

.hhc-notification-info .hhc-notification-content {
    border-left: 4px solid var(--hh-primary) !important;
}

.hhc-notification-icon {
    flex-shrink: 0 !important;
}

.hhc-notification-error .hhc-notification-icon {
    color: #e74c3c !important;
}

.hhc-notification-info .hhc-notification-icon {
    color: var(--hh-primary) !important;
}

.hhc-notification-message {
    flex: 1 !important;
    font-size: 0.95rem !important;
    color: var(--hh-text) !important;
    line-height: 1.5 !important;
}

.hhc-notification-close {
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: 1.5rem !important;
    color: var(--hh-text-light) !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 1 !important;
    transition: var(--hh-transition-fast) !important;
}

.hhc-notification-close:hover {
    color: var(--hh-text) !important;
}

/* Mobile Notification */
@media (max-width: 768px) {
    .hhc-notification {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
    }
}