/* ================================================
   HOTEL BOOKING WIDGET - COMBINED STYLES
   Version: 3.8 - Wiehberg Startseiten-Mock (Farbwelt A)
   Weiße Widget-Karte, Mono-Labels, Bordeaux nur als Akzent
   Referenz: wiehberg-website/mock-startseite + DESIGN.md
   ACSS Optimized & BFSG/WCAG 2.1 AA Compliant
   ================================================ */

/* ================================================
   STANDARD WIDGET STYLES
   ================================================ */

/* Booking Widget MVP Styles - ACSS Optimized */
/* Version: 3.3 - 16.01.2025 - Button layout and alignment fixes */
/* Prefix hbw = hotel booking widget */

.hbw-booking-widget {
    /* Nutze ACSS Variablen statt eigene */
    --hbw-primary: var(--primary);
    --hbw-primary-hover: var(--primary-hover);
    --hbw-border: #85858A; /* Input-Rahmen auf Weiß - Kontrast-Festlegung DESIGN.md */
    --hbw-label-color: var(--base-light, #6E6E72);
    --hbw-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --hbw-focus-ring: 0 0 0 3px rgba(119 26 54 / .18);

    font-family: var(--font-primary);
    font-size: var(--text-s);
    line-height: var(--text-line-height);
    background: var(--white);
    border-radius: var(--radius-l);
    padding: var(--space-l);
    box-shadow: 0 1px 2px rgba(24 26 27 / .06), 0 12px 32px rgba(24 26 27 / .12); /* Widget-Schatten, weicher (29.09.2026: .28 war auf hellen Flächen zu stark) */
    /* margin-block: var(--space-s); */ /* Removed to fix hero section overlap */
    border: none;
}

.hbw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto; /* wie Mock: drei Felder + CTA */
    gap: var(--grid-gap);
    align-items: end;
}

.hbw-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.hbw-label {
    font-family: var(--hbw-font-mono);
    font-size: 0.72rem;
    font-weight: var(--font-weight-600);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hbw-label-color);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.hbw-icon {
    width: 14px;
    height: 14px;
    color: var(--hbw-primary);
    flex-shrink: 0;
}

.hbw-input,
.hbw-guest-button {
    padding: .75em .9em;
    border: 1px solid var(--hbw-border);
    border-radius: 8px; /* Control-Radius (DESIGN.md) */
    font-family: var(--hbw-font-mono);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    line-height: var(--text-line-height);
    color: var(--text-dark);
    background: var(--white);
    width: 100%;
    min-height: 48px;
    transition: var(--transition);
}

.hbw-input:hover {
    border-color: var(--hbw-primary);
}

.hbw-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(14%) sepia(44%) saturate(2400%) hue-rotate(318deg) brightness(.9);
    cursor: pointer;
}

.hbw-guest-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.hbw-guest-button > svg {
    width: 16px;
    height: 16px;
    color: var(--hbw-label-color);
}

.hbw-input:focus,
.hbw-guest-button:focus {
    outline: none;
    border-color: var(--hbw-primary);
    box-shadow: var(--hbw-focus-ring);
}

/* Guest Selector */
.hbw-guest-selector {
    position: relative;
    z-index: 10001; /* Higher than dropdown to ensure proper stacking */
}

.hbw-guest-button:hover {
    border-color: var(--hbw-primary);
}

.hbw-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-xs);
    background: var(--white);
    border: 1px solid var(--neutral-light, #D8D8DA);
    border-radius: 8px;
    box-shadow: var(--shadow-l);
    padding: var(--space-m);
    z-index: 10000; /* Higher than Bricks container (999) */
    display: none;
}

.hbw-dropdown.show {
    display: block;
}

.hbw-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: var(--space-s);
}

/* Ersetzt die bulky Counter-Buttons mit minimalistischen */
.hbw-counter-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--hbw-primary);
    padding: 6px;
    transition: var(--transition);
    border-radius: 4px;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hbw-counter-btn:hover:not(:disabled) {
    background: var(--primary-ultra-light, #F6EEF0);
    transform: scale(1.1);
}

.hbw-counter-btn:active {
    transform: scale(0.95);
}

.hbw-counter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.hbw-counter-controls {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    justify-content: space-between;
    width: 280px;
    margin: 0 auto;
}

/* Counter-Werte zentrieren */
#hbw-adults-count,
#hbw-children-count {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: var(--text-s);
    white-space: nowrap;
}

/* Children Ages */
#hbw-children-ages {
    margin-top: var(--space-m);
    padding-top: var(--space-m);
    border-top: 1px solid var(--hbw-border);
}

.hbw-age-label {
    font-size: var(--text-s);
    color: var(--text-dark-muted);
    margin-bottom: var(--space-xs);
}

#hbw-age-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 8px;
}

#hbw-age-inputs input {
    padding: var(--space-xs);
    border: 1px solid var(--hbw-border);
    border-radius: 8px;
    font-family: var(--hbw-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: center;
    font-size: 16px; /* Prevent iOS auto-zoom on focus */
}

/* Safari iOS Date Input Fix */
@supports (-webkit-touch-callout: none) {
    /* Safari iOS specific fixes */
    .hbw-input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .hbw-input[type="date"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ensure the field container doesn't overflow */
    .hbw-field {
        max-width: 100%;
        overflow: hidden;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .hbw-input[type="date"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ensure the field container doesn't overflow */
    .hbw-field {
        max-width: 100%;
        overflow: hidden;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .hbw-grid {
        grid-template-columns: 1fr 1fr; /* 2 Spalten: Button neben Gäste */
    }
    
    .hbw-booking-widget {
        padding: var(--space-m);
    }
}

/* Extra Mobile: wieder einspaltig unter 641px */
@media (max-width: 640px) {
    .hbw-grid {
        grid-template-columns: 1fr;
    }
}

/* ACSS Integration */
.hbw-booking-widget {
    max-width: var(--content-width);
    margin-inline: auto;
}

/* Body scroll lock while dropdown is open */
.hbw-scroll-lock {
    position: fixed;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Screen Reader Only - WCAG Compliance */
.hbw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ================================================
   COMPACT WIDGET STYLES
   ================================================ */

/* Booking Widget Compact Version - ACSS Optimized */
/* Version: 3.3 - Compact Hero Section Variant + Button Layout Fixes */
/* Target height: ~125px while maintaining BFSG compliance */

.hbw-booking-widget--compact {
    /* Nutze ACSS Variablen */
    --hbw-primary: var(--primary);
    --hbw-primary-hover: var(--primary-hover);
    --hbw-border: #85858A; /* Input-Rahmen auf Weiß - Kontrast-Festlegung DESIGN.md */
    --hbw-label-color: var(--base-light, #6E6E72);
    --hbw-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --hbw-focus-ring: 0 0 0 3px rgba(119 26 54 / .18);

    /* Kompakte Abstände */
    --hbw-compact-padding: var(--space-s);
    --hbw-compact-gap: calc(var(--grid-gap) * 0.75);

    font-family: var(--font-primary);
    font-size: var(--text-s);
    line-height: var(--text-line-height);
    background: var(--white);
    border-radius: var(--radius-l);
    padding: var(--hbw-compact-padding) var(--space-m);
    box-shadow: 0 1px 2px rgba(24 26 27 / .06), 0 12px 32px rgba(24 26 27 / .12); /* Widget-Schatten, weicher (29.09.2026: .28 war auf hellen Flächen zu stark) */
    /* margin-block: var(--space-xs); */ /* Removed to fix hero section overlap */
    border: none;
}

/* Grid wie Mock: drei Felder + CTA in natürlicher Breite */
.hbw-booking-widget--compact .hbw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--hbw-compact-gap);
    align-items: end; /* Button aligned with input fields */
}

/* Kompakte Felder mit reduzierten Abständen */
.hbw-booking-widget--compact .hbw-field {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Minimaler Abstand zwischen Label und Input */
}

/* Labels bleiben über den Inputs für WCAG 2.2 Compliance */
.hbw-booking-widget--compact .hbw-label {
    font-family: var(--hbw-font-mono);
    font-size: 0.68rem;
    font-weight: var(--font-weight-600);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hbw-label-color);
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

/* Icons kleiner aber sichtbar für bessere Orientierung */
.hbw-booking-widget--compact .hbw-icon {
    width: 14px;
    height: 14px;
    color: var(--hbw-primary);
    flex-shrink: 0;
}

/* Kompakte Inputs mit reduziertem Padding */
.hbw-booking-widget--compact .hbw-input,
.hbw-booking-widget--compact .hbw-guest-button {
    padding: 10px 12px;
    border: 1px solid var(--hbw-border);
    border-radius: 8px; /* Control-Radius (DESIGN.md) */
    font-family: var(--hbw-font-mono);
    font-size: var(--text-s);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--text-dark);
    background: var(--white);
    width: 100%;
    transition: var(--transition);
    min-height: 44px; /* WCAG Touch Target */
}

/* Guest Button angepasst */
.hbw-booking-widget--compact .hbw-guest-button {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Remove iOS tap highlight */
    touch-action: manipulation; /* Prevent zoom on double-tap */
}

/* Button kompakter für Desktop */
.hbw-booking-widget--compact .btn {
    min-height: 44px; /* WCAG Compliance */
    padding: var(--space-xs) var(--space-s);
    width: 100%;
    align-self: end; /* Ensure button aligns to bottom */
}

/* Fokus-Styles für Barrierefreiheit */
.hbw-booking-widget--compact .hbw-input:focus,
.hbw-booking-widget--compact .hbw-guest-button:focus,
.hbw-booking-widget--compact .btn:focus {
    outline: none;
    border-color: var(--hbw-primary);
    box-shadow: var(--hbw-focus-ring);
}

/* Dropdown bleibt gleich für gute Bedienbarkeit */
.hbw-booking-widget--compact .hbw-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--neutral-light, #D8D8DA);
    border-radius: 8px;
    box-shadow: var(--shadow-l);
    padding: var(--space-s);
    z-index: 10000; /* Higher than Bricks container (999) */
    display: none;
}

.hbw-booking-widget--compact .hbw-dropdown.show {
    display: block;
}

/* Portaled mobile dropdown (fixed to viewport) should match desktop styling.
   Achtung: haengt am <body>, erbt daher KEINE --hbw-* Variablen vom Widget -
   deshalb globale ACSS-Tokens mit Wiehberg-Fallbacks. */
.hbw-dropdown-is-mobile {
    background: var(--white, #ffffff);
    border: 1px solid var(--neutral-light, #D8D8DA);
    border-radius: 8px;
    /* Shadow fallback if ACSS variable missing */
    box-shadow: var(--shadow-l, 0 10px 20px rgba(0,0,0,0.08));
    padding: var(--space-s, 12px);
    max-height: calc(100vh - 16px);
    overflow: auto;
}

/* Ensure compact-like inner styling when dropdown is portaled to body on mobile */
.hbw-dropdown-is-mobile .hbw-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 6px;
}

.hbw-dropdown-is-mobile .hbw-counter-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem; /* match compact */
    font-weight: 600;
    color: var(--primary, #771A36);
    padding: 8px;
    transition: var(--transition);
    border-radius: 4px;
    line-height: 1;
    min-width: 44px; /* WCAG Touch Target */
    min-height: 44px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hbw-dropdown-is-mobile .hbw-counter-btn:hover:not(:disabled) {
    background: var(--primary-ultra-light, #F6EEF0);
}

.hbw-dropdown-is-mobile #hbw-adults-count,
.hbw-dropdown-is-mobile #hbw-children-count {
    min-width: 60px;
    text-align: center;
    font-weight: 600;
    font-size: var(--text-s);
    white-space: nowrap;
}

/* Counter kompakter */
.hbw-booking-widget--compact .hbw-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 6px;
}

/* Counter Buttons bleiben groß genug für Touch */
.hbw-booking-widget--compact .hbw-counter-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--hbw-primary);
    padding: 8px;
    transition: var(--transition);
    border-radius: 4px;
    line-height: 1;
    min-width: 44px; /* WCAG Touch Target */
    min-height: 44px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive für Tablet - 4 Spalten bleiben erhalten */
@media (max-width: 1024px) and (min-width: 769px) {
    .hbw-booking-widget--compact .hbw-grid {
        grid-template-columns: 1fr 1fr 1fr auto;
        gap: var(--space-xs);
    }

    /* Button kann schmaler werden auf Tablet */
    .hbw-booking-widget--compact .btn {
        padding: var(--space-xs);
    }
}

/* Responsive für kleinere Tablets */
@media (max-width: 768px) and (min-width: 641px) {
    .hbw-booking-widget--compact .hbw-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xs);
    }

    .hbw-booking-widget--compact .hbw-field:last-child {
        grid-column: auto; /* Button nicht mehr über volle Breite */
    }
}

/* Responsive für Mobile und Tablets */
@media (max-width: 768px) {
    /* Allow dropdown to overflow widget container */
    .hbw-booking-widget--compact {
        overflow: visible !important;
    }

    /* Ensure guest selector doesn't clip */
    .hbw-booking-widget--compact .hbw-guest-selector {
        overflow: visible !important;
    }

    /* Keep dropdown absolute but ensure it's visible */
    .hbw-booking-widget--compact .hbw-dropdown {
        position: absolute;
        z-index: 10002;
    }
}

/* Responsive für Mobile */
@media (max-width: 640px) {
    .hbw-booking-widget--compact {
        padding: var(--space-xs) var(--space-s);
        overflow: visible !important;
    }

    .hbw-booking-widget--compact .hbw-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }
}

/* High Contrast Mode Support für BFSG */
@media (prefers-contrast: high) {
    .hbw-booking-widget--compact .hbw-input,
    .hbw-booking-widget--compact .hbw-guest-button {
        border-width: 2px;
    }
    
    .hbw-booking-widget--compact .hbw-input:focus,
    .hbw-booking-widget--compact .hbw-guest-button:focus {
        outline: 3px solid var(--hbw-primary);
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* Reduced Motion für Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
    .hbw-booking-widget--compact * {
        animation: none !important;
        transition: none !important;
    }
    
    .hbw-booking-widget--compact .hbw-counter-btn:hover:not(:disabled) {
        transform: none;
    }
}