/* ========== TRAVEL PAGE STYLES ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, -apple-system, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; color: #1f2937; background-color: #f8fafc; }
.hero { position: relative; min-height: 100vh; background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.hero::before { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.4); z-index:1; }
.hero-content { position: relative; z-index:2; width:100%; max-width:1400px; }
.travel-menu { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 60px; padding:0.5rem; margin-bottom:1rem; display:flex; justify-content:center; gap:0.5rem; flex-wrap:wrap; box-shadow:0 4px 20px rgba(0,0,0,0.1); }
.flight-submenu { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 60px; padding:0.5rem; margin-bottom:2rem; display:none; justify-content:center; gap:0.5rem; flex-wrap:wrap; box-shadow:0 4px 20px rgba(0,0,0,0.1); }
.flight-submenu.visible { display:flex; }
.submenu-item { padding:0.5rem 1.5rem; font-size:0.9rem; font-weight:500; color:#4b5563; cursor:pointer; transition:all 0.3s ease; border-radius:40px; background:transparent; }
.submenu-item.active { background:#1e3a8a; color:white; box-shadow:0 2px 8px rgba(30,58,138,0.3); }
.submenu-item:not(.active):hover { background:rgba(0,0,0,0.05); }
.menu-item { padding:0.75rem 1.75rem; font-size:1rem; font-weight:500; color:#4b5563; cursor:pointer; transition:all 0.3s ease; border-radius:40px; background:transparent; }
.menu-item.active { background:#1e3a8a; color:white; box-shadow:0 2px 8px rgba(30,58,138,0.3); }
.menu-item:not(.active):hover { background:rgba(0,0,0,0.05); }
.search-card { background:white; border-radius:32px; box-shadow:0 20px 40px rgba(0,0,0,0.15); padding:2rem; width:100%; transition:transform 0.3s ease; }
.search-form { display:flex; flex-direction:column; gap:0; }
.search-row { display:flex; flex-wrap:nowrap; gap:1rem; align-items:stretch; }
.form-group { flex:1 1 0; min-width:120px; display:flex; flex-direction:column; position:relative; }
.form-group label { display:block; font-size:0.75rem; font-weight:600; margin-bottom:0.5rem; color:#374151; text-transform:uppercase; letter-spacing:0.5px; }
.form-group input, .traveler-selector, .date-range-input, .form-group select { width:100%; padding:0.75rem 1rem; border:2px solid #e5e7eb; border-radius:16px; font-size:0.95rem; font-family:inherit; transition:all 0.2s ease; background:white; height:52px; }
.form-group select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 1rem center; background-size:1rem; }
.form-group input:focus, .traveler-selector:focus-within, .date-range-input:focus, .form-group select:focus { outline:none; border-color:#1e3a8a; box-shadow:0 0 0 3px rgba(30,58,138,0.1); }
.traveler-selector { position:relative; cursor:pointer; background:white; display:flex; align-items:center; justify-content:space-between; }
.traveler-display { display:flex; align-items:center; justify-content:space-between; width:100%; user-select:none; }
.traveler-display span { color:#1f2937; font-size:0.95rem; }
.traveler-panel { position:absolute; top:calc(100% + 8px); left:0; right:0; background:white; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,0.15); padding:1.25rem; z-index:10; display:none; border:1px solid #e5e7eb; }
.traveler-selector.open .traveler-panel { display:block; }
.traveler-option { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 0; border-bottom:1px solid #f3f4f6; }
.traveler-option:last-child { border-bottom:none; }
.traveler-option label { font-weight:500; color:#374151; text-transform:none; letter-spacing:normal; margin:0; }
.counter-controls { display:flex; align-items:center; gap:1rem; }
.counter-btn { width:32px; height:32px; border-radius:50%; border:1px solid #e5e7eb; background:white; cursor:pointer; font-size:1.25rem; font-weight:500; color:#1e3a8a; transition:all 0.2s ease; }
.counter-btn:hover { background:#f3f4f6; border-color:#1e3a8a; }
.counter-value { min-width:40px; text-align:center; font-weight:600; color:#1f2937; }
.search-btn { padding:0.75rem 1.5rem; background:#1e3a8a; color:white; border:none; border-radius:16px; font-size:1rem; font-weight:600; cursor:pointer; transition:all 0.3s ease; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; min-width:120px; height:52px; }
.search-btn:hover { background:#1e40af; transform:translateY(-2px); box-shadow:0 10px 20px rgba(30,58,138,0.2); }
.search-btn:active { transform:translateY(0); }
.form-container { display:none; }
.form-container.active-form { display:block; }

/* Breadcrumb */
.breadcrumb {
    font-size: 12px;
    color: #6b7280;
    margin: 1rem 0 0.5rem 0;
}
.breadcrumb a {
    color: #1e3a8a;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

/* Results container adjustments */
.results-container {
    margin-top: 2rem;
    background: transparent;
    padding: 0;
    box-shadow: none;
}
.results-container.visible { display: block; }

/* ========== NEUE HOTEL-ERGEBNISSE (PROFESSIONELLE ANSICHT) ========== */
.results-container.hotel-results-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.filter-sidebar {
    flex: 0 0 260px;
    background: white;
    border-radius: 20px;
    padding: 20px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #eef2f6;
}
.filter-sidebar h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.filter-sidebar hr { margin: 12px 0; }

/* Filter sidebar header */
.filter-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}
.filter-sidebar-header h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}
.clear-filters-link {
    font-size: 12px;
    color: #1e3a8a;
    text-decoration: none;
}
.clear-filters-link:hover {
    text-decoration: underline;
}

/* Ihre vorherigen Filter */
.filter-section {
    margin-bottom: 20px;
}
.filter-section .filter-header {
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 12px;
    color: #374151;
}
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}
.chip {
    background: #f3f4f6;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.chip .remove-chip {
    cursor: pointer;
    font-weight: bold;
    color: #6b7280;
}
.filter-group-count {
    font-weight: normal;
    color: #6b7280;
    margin-left: 4px;
    font-size: 10px;
}
.filter-block {
    margin-bottom: 14px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 12px;
}
.filter-header .toggle-icon {
    font-size: 18px;
}
.filter-content {
    display: block;
}
.filter-content.collapsed {
    display: none;
}

/* Checkbox groups */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    cursor: pointer;
    width: 100%;
}
.checkbox-group label .filter-count {
    margin-left: auto;
}
.checkbox-group label span.filter-count {
    color: #6b7280;
    font-size: 11px;
}
#popularFilters.checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

/* Budget slider */
.budget-slider-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}
.budget-values {
    font-size: 11px;
    font-weight: 500;
    color: #1f2937;
    text-align: center;
}
.slider-container {
    position: relative;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin: 20px 8px 20px 8px;
}
.slider-track {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #e5e7eb;
    border-radius: 2px;
}
.slider-range {
    position: absolute;
    height: 100%;
    background: #1e3a8a;
    border-radius: 2px;
}
.slider-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border: 2px solid #1e3a8a;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.slider-handle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(30,58,138,0.3);
}
.min-handle {
    left: 0%;
}
.max-handle {
    left: 100%;
}
.budget-extras {
    text-align: right;
}
.budget-plus-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #1e3a8a;
    transition: all 0.2s;
}
.budget-plus-btn:hover {
    background: #f3f4f6;
}

/* Smart filter input */
.smart-filter-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 12px;
    margin-bottom: 8px;
    font-size: 11px;
}

/* Results header */
.results-header-area {
    background: white;
    border-radius: 20px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #eef2f6;
}
.results-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.results-count {
    font-weight: 600;
    font-size: 18px;
}
.results-controls {
    display: flex;
    gap: 16px;
    align-items: center;
}
.sort-dropdown select {
    padding: 6px 28px 6px 12px;
    border-radius: 30px;
    border: 1px solid #e2e8f0;
    background: white;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}
.results-note {
    font-size: 12px;
    color: #dc2626;
    background: #fee2e2;
    padding: 8px 12px;
    border-radius: 12px;
    margin: 12px 0 8px 0;
}
.sort-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
}

/* View toggle and map button */
.view-toggle {
    display: inline-flex;
    border: 1px solid #e2e8f0;
    border-radius: 40px;
    overflow: hidden;
}
.view-toggle-btn {
    background: white;
    border: none;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}
.view-toggle-btn.active {
    background: #1e3a8a;
    color: white;
}
.map-toggle-btn {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 40px;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
}
.map-toggle-btn:hover {
    background: #f3f4f6;
}

/* Hotel cards grid */
.hotel-results-right {
    flex: 1;
    background: transparent;
}
.hotel-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* List view – keep image visible */
.hotel-cards-grid.list-view .hotel-card {
    display: flex;
    background: white;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: box-shadow 0.2s;
    border: 1px solid #eef2f6;
}
.hotel-cards-grid.list-view .hotel-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.hotel-cards-grid.list-view .hotel-card-image {
    flex: 0 0 240px;
}
.hotel-cards-grid.list-view .hotel-card-image img {
    width: 240px;
    height: 240px;
    object-fit: cover;
}
.hotel-cards-grid.list-view .hotel-card-details {
    padding: 16px 20px 16px 24px;
}
.hotel-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}
.hotel-location {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 6px;
}
.hotel-location a {
    color: #1e3a8a;
    text-decoration: none;
}
.hotel-distance {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
}
.sustainability-badge {
    display: inline-block;
    background: #10b981;
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.hotel-booking-stats {
    font-size: 13px;
    color: #10b981;
    font-weight: 500;
    margin-bottom: 6px;
}
.hotel-description {
    font-size: 14px;
    margin: 8px 0;
    color: #1f2937;
}
.hotel-room, .hotel-bed {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 4px;
}
.hotel-cancellation {
    font-size: 13px;
    color: #10b981;
    margin: 6px 0 2px;
}
.hotel-payment {
    font-size: 12px;
    color: #6b7280;
}
.hotel-card-price {
    flex: 0 0 170px;
    padding: 16px;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.rating-box {
    background: #10b981;
    color: white;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 6px;
}
.review-count {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}
.location-score {
    font-size: 12px;
    color: #4b5563;
    margin-bottom: 12px;
}
.price-new {
    font-size: 26px;
    font-weight: 700;
    color: #1f2937;
    margin: 8px 0 4px;
}
.points-info {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 12px;
}
.btn-green {
    background: #10b981;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
    font-size: 13px;
}
.btn-green:hover {
    background: #059669;
}

/* Grid view – unchanged */
.hotel-cards-grid.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.hotel-cards-grid.grid-view .hotel-card {
    flex-direction: column;
    background: white;
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s;
}
.hotel-cards-grid.grid-view .hotel-card:hover {
    transform: translateY(-2px);
}
.hotel-cards-grid.grid-view .hotel-card-image {
    flex: auto;
}
.hotel-cards-grid.grid-view .hotel-card-image img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
}
.hotel-cards-grid.grid-view .hotel-card-price {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 16px;
}

/* Responsive */
@media (max-width: 900px) {
    .results-container.hotel-results-layout {
        flex-direction: column;
    }
    .filter-sidebar {
        position: relative;
        width: 100%;
        max-height: none;
    }
    .hotel-cards-grid.list-view .hotel-card {
        flex-direction: column;
    }
    .hotel-cards-grid.list-view .hotel-card-image {
        flex: 0 0 100%;
    }
    .hotel-cards-grid.list-view .hotel-card-image img {
        width: 100%;
        height: auto;
        max-height: 240px;
    }
    .hotel-cards-grid.list-view .hotel-card-details {
        padding: 16px;
    }
    .hotel-card-price {
        text-align: left;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
        justify-content: space-between;
    }
    .results-header-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .results-controls {
        width: 100%;
        justify-content: space-between;
    }
}
@media (max-width: 768px) {
    .hotel-cards-grid.grid-view {
        grid-template-columns: 1fr;
    }
}

/* ========== DESTINATION AUTOCOMPLETE DROPDOWN (STYLE FROM IMAGE 1) ========== */
.airport-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    border: 1px solid #eef2f6;
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px 0;
    font-family: inherit;
}

.airport-suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f2f5;
}

.airport-suggestion-item:last-child {
    border-bottom: none;
}

.airport-suggestion-item:hover {
    background-color: #f9fafb;
}

.suggestion-primary {
    font-weight: 600;
    font-size: 16px;
    color: #111827;
    line-height: 1.4;
    margin-bottom: 4px;
}

.suggestion-secondary {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.3;
}

/* Left alignment for filter content */
.filter-sidebar .filter-content,
.filter-sidebar .checkbox-group label {
    text-align: left;
}

/* Reduced vertical spacing */
.checkbox-group {
    gap: 6px;
}

.checkbox-group label {
    margin-bottom: 0;
}

.filter-block {
    margin-bottom: 12px;
    padding-bottom: 8px;
}