/* * AH Keramik - Frontend Kalender Styling 
 * Styres dynamisk via :root variabler injiceret fra PHP Settings
 */

/* 1. CONTAINER & OVERGRUPPE */
#ah-calendar-booking-container { 
    margin: 25px 0; 
    background: #fff; 
    border: 1px solid #d1d5db; 
    border-radius: 16px; 
    overflow: hidden; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    font-family: inherit;
}

/* 2. HEADER (Bruger dine valgte farver) */
.ah-calendar-header { 
    background: var(--ah-cal-primary); 
    color: var(--ah-cal-text); 
    padding: 16px 20px; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    text-transform: uppercase; 
    letter-spacing: 0.8px; 
    font-size: 14px; 
}

.ah-calendar-header .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* 3. FLATPICKR KALENDER TILPASNING */
.flatpickr-calendar.inline { 
    width: 100% !important; 
    max-width: 100% !important; 
    box-shadow: none; 
    border: none; 
    background: transparent; 
}

.flatpickr-innerContainer, 
.flatpickr-rContainer, 
.flatpickr-days, 
.dayContainer { 
    width: 100% !important; 
    max-width: 100% !important; 
}

.dayContainer { 
    justify-content: space-around; 
}

.flatpickr-day { 
    max-width: none !important; 
    flex-basis: 14.28% !important; 
    height: 50px !important; 
    line-height: 50px !important; 
    margin: 0; 
    border-radius: 0; 
    font-size: 16px; 
    border: none !important;
    transition: background 0.2s ease;
}

/* Ugedage (ma, ti, on...) */
.flatpickr-weekday { 
    color: #9ca3af; 
    font-weight: 600; 
    font-size: 12px; 
    padding: 15px 0; 
}

/* 4. DAG-STATUSSER */

/* Ledige dage: Lys baggrund med din primære farve som tekst */
.flatpickr-day.ah-day-available { 
    background: #f0f4fa !important; 
    color: var(--ah-cal-primary) !important; 
    font-weight: 600; 
}

.flatpickr-day.ah-day-available:hover { 
    background: #e2e8f0 !important; 
}

/* Udsolgte dage: Grå og gennemstreget */
.flatpickr-day.ah-day-soldout { 
    background: #f3f4f6 !important; 
    color: #9ca3af !important; 
    text-decoration: line-through; 
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Valgt dag: Din primære farve som baggrund */
.flatpickr-day.selected, 
.flatpickr-day.selected:hover { 
    background: var(--ah-cal-primary) !important; 
    color: var(--ah-cal-text) !important; 
    text-decoration: none !important; 
    font-weight: 700;
}

/* I dag markering */
.flatpickr-day.today { 
    border: 2px solid #e8a87c !important; /* Din signatur fersken-farve */
}

/* 5. INFO SEKTION (Når dato er valgt) */
#ah-selected-date-info { 
    max-height: 0; 
    overflow: hidden; 
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
    background: #fdfbf8; 
    border-top: 1px solid #e2e8f0; 
}

#ah-selected-date-info.active { 
    max-height: 1000px; 
    padding: 25px; 
}

.ah-date-label { 
    color: var(--ah-cal-primary); 
    font-weight: 800; 
    margin-bottom: 20px; 
    font-size: 18px; 
    border-left: 4px solid #e8a87c; 
    padding-left: 15px; 
}

/* 6. TIDS-VALG (KNAPPER) */
.ah-time-option { 
    padding: 18px 20px; 
    border: 2px solid #e5e7eb; 
    border-radius: 14px; 
    margin-bottom: 15px; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: #fff; 
    transition: all 0.2s ease; 
}

.ah-time-option:hover { 
    border-color: var(--ah-cal-primary); 
}

.ah-time-option.selected { 
    border-color: var(--ah-cal-primary); 
    background: #f0f4fa; 
    box-shadow: inset 0 0 0 1px var(--ah-cal-primary);
}

.ah-time-main { 
    color: var(--ah-cal-primary); 
    font-size: 1.1em; 
}

.ah-time-details { 
    font-weight: 800; 
    color: var(--ah-cal-primary); 
}

/* Udsolgt tidspunkt */
.ah-time-option.out-of-stock-btn { 
    opacity: 0.5; 
    cursor: not-allowed; 
    background: #f3f4f6; 
    border-color: #eee;
}

/* 7. WOOCOMMERCE INTEGRATION & FORCED BUTTON */
.ah-forced-active { 
    background-color: var(--ah-cal-primary) !important; 
    color: var(--ah-cal-text) !important; 
    border-radius: 12px !important; 
    padding: 20px !important; 
    font-weight: 800 !important; 
    text-transform: uppercase !important; 
    width: 100%; 
    border: none !important; 
    font-size: 16px !important; 
    letter-spacing: 1.5px; 
    cursor: pointer; 
    box-shadow: 0 4px 0 rgba(0,0,0,0.1);
    transition: transform 0.1s;
}

.ah-forced-active:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* Skjul WooCommerce standard elementer når kalenderen er aktiv */
.ah-calendar-active .variations, 
.ah-calendar-active .woocommerce-variation-unavailable, 
.ah-calendar-active .wc-no-matching-variations, 
.ah-calendar-active .single_variation p:not(.price) { 
    display: none !important; 
}

/* 8. RESPONSIVITET */
@media (max-width: 600px) {
    .flatpickr-day { height: 45px !important; line-height: 45px !important; font-size: 14px; }
    #ah-selected-date-info.active { padding: 15px; }
    .ah-time-option { padding: 14px 15px; font-size: 14px; }
}