/**
 * helgas-pms.css
 *
 * Styles für alle Helgas Paradies PMS Connector Plugins.
 * Einbinden via TypoScript oder als TYPO3 Asset.
 */

/* ─────────────────────────────────────────────────────────────
   CSS Custom Properties (Design-Token)
───────────────────────────────────────────────────────────── */
:root {
    --helgas-primary:     #1a6e5a;   /* Sattes Teal/Grün */
    --helgas-primary-dk:  #124d40;
    --helgas-accent:      #d4a017;   /* Warmes Gold */
    --helgas-error:       #c0392b;
    --helgas-success:     #27ae60;
    --helgas-text:        #2c3e50;
    --helgas-text-light:  #6c757d;
    --helgas-bg:          #f8f9fa;
    --helgas-white:       #ffffff;
    --helgas-border:      #dee2e6;
    --helgas-radius:      8px;
    --helgas-shadow:      0 2px 12px rgba(0,0,0,.08);
}

/* ─────────────────────────────────────────────────────────────
   Buttons
───────────────────────────────────────────────────────────── */
.helgas-btn {
    display: inline-block;
    padding: .6rem 1.4rem;
    border-radius: var(--helgas-radius);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .2s ease;
    line-height: 1.4;
}
.helgas-btn--primary {
    background: var(--helgas-primary);
    color: var(--helgas-white);
    border-color: var(--helgas-primary);
}
.helgas-btn--primary:hover, .helgas-btn--primary:focus {
    background: var(--helgas-primary-dk);
    border-color: var(--helgas-primary-dk);
    outline: none;
}
.helgas-btn--secondary {
    background: transparent;
    color: var(--helgas-primary);
    border-color: var(--helgas-primary);
}
.helgas-btn--secondary:hover {
    background: var(--helgas-primary);
    color: var(--helgas-white);
}
.helgas-btn--large { padding: .85rem 2rem; font-size: 1.05rem; }

/* ─────────────────────────────────────────────────────────────
   Zimmer-Übersicht (alternierend links/rechts)
───────────────────────────────────────────────────────────── */
.helgas-room-catalog {
    color: var(--helgas-text);
    max-width: 1100px;
    margin: 0 auto;
}
.helgas-room-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3rem 0;
}
.helgas-room-row--reversed {
    direction: rtl;
}
.helgas-room-row--reversed > * {
    direction: ltr;
}

/* Fotoslider */
.helgas-room-slider {
    position: relative;
    border-radius: var(--helgas-radius);
    background: var(--helgas-bg);
    overflow: hidden;
    max-width: 555px;
}
.helgas-room-slide         { display: none; }
.helgas-room-slide--active { display: block; }
.helgas-room-slide img {
    display: block;
    width: 100%;
    max-width: 555px;
    max-height: 1200px;
    height: auto;
    object-fit: contain;
}
.helgas-room-slide--placeholder { min-height: 320px; background: var(--helgas-bg); }

/* Slider-Punkte */
.helgas-slider-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 0 .4rem;
}
.helgas-slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--helgas-border);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s;
}
.helgas-slider-dot--active,
.helgas-slider-dot:hover { background: #1a4a8a; }

/* Zimmerinfo */
.helgas-room-info             { text-align: center; }
.helgas-room-info__title      { font-size: 1.6rem; font-weight: 700; margin: 0 0 .8rem; color: var(--helgas-text); }
.helgas-room-info__divider    { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 1rem; }
.helgas-room-info__divider-line { flex: 1; max-width: 80px; height: 1px; background: var(--helgas-border); display: block; }
.helgas-meander {
    width: 80px;
    height: 20px;
    flex-shrink: 0;
}
.helgas-room-info__occupancy  { font-size: .9rem; color: var(--helgas-text-light); margin: 0 0 1rem; }
.helgas-room-info__description { font-size: .95rem; line-height: 1.7; color: var(--helgas-text); margin-bottom: 1.2rem; text-align: center; }
.helgas-room-info__features   { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.helgas-room-info__features li { background: var(--helgas-bg); color: var(--helgas-text); border-radius: 4px; padding: .25rem .65rem; font-size: .82rem; border: 1px solid var(--helgas-border); }

/* Trennlinie zwischen Zimmern */
.helgas-room-divider { border: none; border-top: 1px solid var(--helgas-border); margin: 0; }

/* ─────────────────────────────────────────────────────────────
   Zimmer-Detailseite
───────────────────────────────────────────────────────────── */
.helgas-room-detail {
    color: var(--helgas-text);
}
.helgas-room-detail__features ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.helgas-room-detail__features li { background: var(--helgas-bg); color: var(--helgas-text); border-radius: 4px; padding: .2rem .6rem; font-size: .82rem; }
.helgas-room-detail__features li i { color: var(--helgas-primary); margin-right: .3rem; }

.helgas-room-gallery { position: relative; margin-bottom: 2rem; border-radius: var(--helgas-radius); overflow: hidden; max-height: 450px; }
.helgas-room-gallery__item { display: none; }
.helgas-room-gallery__item--active { display: block; }
.helgas-room-gallery__item img { width: 100%; height: 450px; object-fit: cover; }
.helgas-room-gallery__caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.5); color: #fff; padding: .5rem 1rem; font-size: .9rem; margin: 0; }
.helgas-gallery-prev, .helgas-gallery-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.4); color: #fff; border: none; cursor: pointer;
    font-size: 1.8rem; padding: .4rem .8rem; border-radius: 4px;
    transition: background .2s;
}
.helgas-gallery-prev:hover, .helgas-gallery-next:hover { background: rgba(0,0,0,.7); }
.helgas-gallery-prev { left: .8rem; }
.helgas-gallery-next { right: .8rem; }
.helgas-price-table { width: 100%; border-collapse: collapse; margin: 1rem 0; color: var(--helgas-text); }
.helgas-price-table th, .helgas-price-table td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--helgas-border); }
.helgas-price-table th { background: var(--helgas-bg); color: var(--helgas-text); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   Verfügbarkeitskalender
───────────────────────────────────────────────────────────── */
.helgas-availability-section { margin: 2rem 0; }
.helgas-calendar { background: var(--helgas-white); color: var(--helgas-text); border-radius: var(--helgas-radius); box-shadow: var(--helgas-shadow); padding: 1rem; max-width: 420px; }
.helgas-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.helgas-cal-title  { font-weight: 700; font-size: 1.1rem; color: var(--helgas-text); }
.helgas-cal-nav    { background: none; border: 1px solid var(--helgas-border); border-radius: 4px; cursor: pointer; font-size: 1.4rem; padding: .1rem .6rem; color: var(--helgas-primary); transition: all .15s; }
.helgas-cal-nav:hover { background: var(--helgas-primary); color: #fff; }
.helgas-cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: .3rem; }
.helgas-cal-dow     { text-align: center; font-size: .75rem; font-weight: 600; color: var(--helgas-text-light); padding: .3rem 0; }
.helgas-cal-days    { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.helgas-cal-day     { text-align: center; padding: .5rem .2rem; border-radius: 4px; font-size: .88rem; cursor: default; transition: all .15s; position: relative; }
.helgas-cal-day-num { line-height: 1; }

/* Verfügbarkeitsstatus */
.helgas-cal-day--available  { background: #d4edda; color: #155724; cursor: pointer; }
.helgas-cal-day--available:hover { background: #27ae60; color: #fff; }
.helgas-cal-day--booked     { background: #f8d7da; color: #721c24; text-decoration: line-through; }
.helgas-cal-day--past       { color: #ccc; background: transparent; }
.helgas-cal-day--empty      { background: transparent; }
.helgas-cal-day--unknown    { background: var(--helgas-bg); color: var(--helgas-text-light); cursor: pointer; }
.helgas-cal-day--loading    { background: #e9ecef; color: #aaa; animation: helgas-pulse 1.2s infinite; }
.helgas-cal-day--selected-in  { background: var(--helgas-primary) !important; color: #fff !important; font-weight: 700; }
.helgas-cal-day--selected-out { background: var(--helgas-accent) !important; color: #fff !important; font-weight: 700; }
.helgas-cal-day--in-range   { background: rgba(26,110,90,.15); }

@keyframes helgas-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

.helgas-cal-selection-hint { margin-top: .8rem; font-size: .88rem; color: var(--helgas-text); min-height: 1.4em; }
.helgas-calendar-loader    { text-align: center; font-size: .85rem; color: var(--helgas-text-light); padding: .4rem; }
.helgas-cal-spinner        { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--helgas-border); border-top-color: var(--helgas-primary); border-radius: 50%; animation: helgas-spin .8s linear infinite; }
@keyframes helgas-spin { to { transform: rotate(360deg); } }

#helgas-calendar-legend    { margin-top: .6rem; font-size: .8rem; display: flex; gap: 1rem; }
.helgas-legend-available   { color: #155724; }
.helgas-legend-available::before { content: '■'; margin-right: .3rem; }
.helgas-legend-booked      { color: #721c24; }
.helgas-legend-booked::before { content: '■'; margin-right: .3rem; }

/* ─────────────────────────────────────────────────────────────
   Formulare
───────────────────────────────────────────────────────────── */
.helgas-form { max-width: 1000px; color: var(--helgas-text); }
.helgas-form-two-col-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 0;
}
.helgas-form-title    { color: var(--helgas-text); margin-bottom: 1.5rem; }
.helgas-form-subtitle { color: var(--helgas-text-light); margin-bottom: 1.5rem; }
.helgas-form-section  { background: var(--helgas-bg); border-radius: var(--helgas-radius); padding: 1.4rem; margin-bottom: 1.5rem; }
.helgas-form-section h3 { margin: 0 0 1rem; font-size: 1.05rem; color: var(--helgas-text); }
.helgas-form-row      { margin-bottom: .9rem; }
.helgas-form-row--two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.helgas-form-row--three-col { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 1rem; }
.helgas-form-group    { display: flex; flex-direction: column; margin-bottom: .8rem; }
.helgas-form-group label { font-size: .9rem; font-weight: 600; color: var(--helgas-text); margin-bottom: .3rem; }
.helgas-input { border: 1.5px solid var(--helgas-border); border-radius: 6px; padding: .55rem .8rem; font-size: .95rem; color: var(--helgas-text); background: var(--helgas-white); transition: border-color .15s; width: 100%; box-sizing: border-box; }
.helgas-input:focus   { outline: none; border-color: var(--helgas-primary); box-shadow: 0 0 0 3px rgba(26,110,90,.15); }
.helgas-input--small  { max-width: 200px; }
.helgas-required      { color: var(--helgas-error); }
.helgas-form-group--checkbox { flex-direction: row; align-items: flex-start; gap: .6rem; }
.helgas-checkbox      { margin-top: .15rem; width: 18px; height: 18px; accent-color: var(--helgas-primary); flex-shrink: 0; }
.helgas-form-submit   { margin-top: 1.5rem; }
.helgas-form-hint     { font-size: .82rem; color: var(--helgas-text-light); margin-top: .5rem; }
.helgas-form-section--gdpr { border: 1.5px solid var(--helgas-border); }
.helgas-link { color: var(--helgas-primary); }

/* Fehlermeldungen */
.helgas-form-error  { background: #f8d7da; border: 1px solid #f5c6cb; border-radius: var(--helgas-radius); padding: .8rem 1rem; color: var(--helgas-error); margin-bottom: 1.2rem; }
.helgas-error-notice { background: #fff3cd; border: 1px solid #ffc107; border-radius: var(--helgas-radius); padding: .8rem 1rem; margin-bottom: 1.2rem; }

/* Erfolg */
.helgas-booking-success { text-align: center; padding: 3rem 2rem; color: var(--helgas-text); }
.helgas-booking-success__icon { font-size: 3.5rem; margin-bottom: 1rem; }
.helgas-booking-success__ref  { color: var(--helgas-primary); font-size: 1.05rem; margin-top: .8rem; }

/* ─────────────────────────────────────────────────────────────
   Stern-Bewertung
───────────────────────────────────────────────────────────── */
.helgas-star-rating {
    display: flex;
    flex-direction: row-reverse;
    gap: .2rem;
    font-size: 2rem;
}
.helgas-star-rating input { display: none; }
.helgas-star-rating label { color: #ccc; cursor: pointer; transition: color .1s; }
.helgas-star-rating input:checked ~ label,
.helgas-star-rating label:hover,
.helgas-star-rating label:hover ~ label { color: var(--helgas-accent); }

/* Kategorie-Bewertungen */
.helgas-category-ratings { display: flex; flex-direction: column; gap: .5rem; }
.helgas-category-rating  { display: flex; align-items: center; gap: 1rem; }
.helgas-category-rating span { min-width: 120px; font-size: .9rem; }

/* ─────────────────────────────────────────────────────────────
   Responsive
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .helgas-form-row--two-col,
    .helgas-form-row--three-col { grid-template-columns: 1fr; }
    .helgas-form-two-col-wrap   { grid-template-columns: 1fr; }
    .helgas-room-row            { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0; }
    .helgas-room-row--reversed  { direction: ltr; }
    .helgas-room-info           { text-align: left; }
    .helgas-room-info__features { justify-content: flex-start; }
    .helgas-room-info__description { text-align: left; }
    .helgas-calendar            { max-width: 100%; }
}

/* Kindesalter */
.helgas-child-ages-wrap     { margin: .5rem 0 1rem; }
.helgas-child-ages-label    { font-size: .9rem; color: var(--helgas-text); margin-bottom: .6rem; }
.helgas-form-hint-inline    { font-size: .82rem; color: var(--helgas-text-light); font-weight: 400; }
.helgas-child-age-entry     { margin-bottom: .5rem; }