:root {
  --b-blue: #003b95;
  --b-blue-dark: #00224f;
  --b-yellow: #febb02;
  --b-yellow-hover: #e5a902;
  --bg-color: #f5f5f5;
  --text-main: #262626;
  --text-muted: #6b6b6b;
  --border-color: #e7e7e7;
  --white: #ffffff;
  --success: #008234;
  --danger: #d4111e;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Open Sans', -apple-system, sans-serif; }

body { background: var(--bg-color); color: var(--text-main); }

.b-container { max-width: 1140px; margin: 0 auto; padding: 0 1rem; }

/* Header */
.b-header { background: var(--b-blue); color: var(--white); padding-bottom: 2rem; }
.header-top { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }
.b-logo h2 { font-weight: 700; font-size: 1.5rem; }
.b-logo span { font-size: 0.8rem; opacity: 0.8; }
.b-status { display: flex; align-items: center; gap: 0.5rem; background: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; }
.pulse-dot { width: 8px; height: 8px; background: #ccc; border-radius: 50%; }
.pulse-dot.active { background: #4ADE80; box-shadow: 0 0 8px #4ADE80; }

.header-nav nav { display: flex; gap: 1rem; margin-top: 1rem; }
.header-nav nav a { color: var(--white); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 30px; font-weight: 600; }
.header-nav nav a.active { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); }
.header-nav nav a:hover:not(.active) { background: rgba(255,255,255,0.1); }
.header-hero { margin-top: 3rem; }
.header-hero h1 { font-size: 3rem; font-weight: 700; margin-bottom: 0.5rem; }
.header-hero p { font-size: 1.5rem; }

/* Search Box */
.search-box-container { margin-top: -30px; position: relative; z-index: 10; }
.b-search-box { background: var(--b-yellow); padding: 4px; border-radius: 4px; display: flex; flex-direction: column; gap: 4px; }
.search-inputs-row { display: flex; gap: 4px; height: 52px; }

.search-input-group { background: var(--white); border-radius: 2px; flex: 1; display: flex; align-items: center; padding: 0 1rem; gap: 0.5rem; position: relative; }
.search-input-group i { color: var(--text-muted); width: 20px; }
.search-input-group input[type="text"], .search-input-group input[type="date"] { border: none; outline: none; font-size: 0.95rem; font-weight: 600; width: 100%; color: var(--text-main); }
.dates-group { flex: 1.2; }
.dates-group span { color: var(--text-muted); margin: 0 0.5rem; }

.occupancy-group { flex: 1.2; cursor: pointer; user-select: none; }
.occupancy-text { font-size: 0.95rem; font-weight: 600; color: var(--text-main); width: 100%; }

.occupancy-dropdown { display: none; position: absolute; top: 60px; left: 0; width: 350px; background: var(--white); border-radius: 4px; box-shadow: 0 2px 16px rgba(0,0,0,0.15); z-index: 100; padding: 1.5rem; flex-direction: column; gap: 1rem; }
.occupancy-dropdown.show { display: flex; }
.occ-row { display: flex; justify-content: space-between; align-items: center; }
.occ-row span { font-weight: 600; }
.occ-controls { display: flex; align-items: center; gap: 1rem; }
.occ-btn { width: 32px; height: 32px; border: 1px solid var(--b-blue); background: var(--white); color: var(--b-blue); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 2px; }
.occ-btn:hover { background: #f0f6ff; }
.occ-controls input { width: 30px; text-align: center; border: none; font-weight: 600; font-size: 1rem; }
.pets-row { margin-top: 0.5rem; }
.occ-done-btn { width: 100%; padding: 0.75rem; background: var(--white); border: 1px solid var(--b-blue); color: var(--b-blue); font-weight: 600; font-size: 1rem; cursor: pointer; border-radius: 2px; margin-top: 1rem; }
.occ-done-btn:hover { background: #f0f6ff; }

.b-search-btn { background: var(--b-blue); color: var(--white); border: none; font-size: 1.2rem; font-weight: 600; padding: 0 2rem; border-radius: 2px; cursor: pointer; transition: background 0.2s; }
.b-search-btn:hover { background: var(--b-blue-dark); }

/* Advanced Filters */
.advanced-filters { background: var(--white); padding: 1rem; border-radius: 2px; display: flex; gap: 1.5rem; align-items: flex-end; }
.filter-col { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.filter-col label { font-size: 0.85rem; font-weight: 600; color: var(--text-main); }
.filter-col input[type="text"], .filter-col input[type="number"] { border: 1px solid #ccc; padding: 0.5rem; border-radius: 2px; outline: none; }
.range-display { display: flex; align-items: center; gap: 1rem; }
.range-display input { flex: 1; }
.range-display span { font-weight: 700; color: var(--b-blue); }
.interval-input { display: flex; align-items: center; gap: 0.5rem; }
.interval-input input { width: 60px; }
.switch-col { flex-direction: row; align-items: center; justify-content: flex-end; gap: 1.5rem; }
.btn-outline { border: 1px solid var(--b-blue); color: var(--b-blue); background: transparent; padding: 0.5rem 1rem; font-weight: 600; cursor: pointer; border-radius: 2px; }
.btn-outline:hover { background: #f0f6ff; }

/* Main Content Layout */
.main-content { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; margin-top: 2rem; margin-bottom: 4rem; }

/* Sidebar */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.console-box, .filter-box { background: var(--white); border: 1px solid var(--border-color); border-radius: 4px; padding: 1rem; }
.sidebar h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; }
.logs-container { height: 200px; overflow-y: auto; background: #1e1e1e; color: #a9b7c6; padding: 0.5rem; font-family: monospace; font-size: 0.75rem; border-radius: 2px; margin-bottom: 0.5rem; }
.log-line { margin-bottom: 0.25rem; word-wrap: break-word; }
.log-line.success { color: #6a8759; }
.log-line.error { color: #cc7832; }
.link-btn { background: none; border: none; color: var(--b-blue); font-weight: 600; cursor: pointer; font-size: 0.85rem; }

.rule-group { margin-bottom: 1rem; }
.rule-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; }
.rule-group input { width: 100%; border: 1px solid #ccc; padding: 0.5rem; border-radius: 2px; outline: none; margin-bottom: 0.5rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { background: #eef3fc; color: var(--b-blue); padding: 0.25rem 0.5rem; border-radius: 2px; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 0.25rem; }
.tag i { width: 12px; height: 12px; cursor: pointer; }

/* Results */
.results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.results-header h2 { font-size: 1.5rem; font-weight: 700; }
.tabs { display: flex; gap: 0.5rem; }
.tab { padding: 0.5rem 1rem; border: 1px solid var(--b-blue); background: var(--white); color: var(--b-blue); font-weight: 600; border-radius: 20px; cursor: pointer; }
.tab.active { background: var(--b-blue); color: var(--white); }

.b-offers-list { display: flex; flex-direction: column; gap: 1rem; }

.b-offer-card { display: flex; background: var(--white); border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; }
.b-offer-card.filtered-out { opacity: 0.6; filter: grayscale(50%); }
.b-image { width: 240px; background-size: cover; background-position: center; position: relative; }
.b-image img { width: 100%; height: 100%; object-fit: cover; }

.b-content { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.b-top-row { display: flex; justify-content: space-between; align-items: flex-start; }
.b-title h3 { font-size: 1.25rem; font-weight: 700; color: var(--b-blue); }
.b-area { color: var(--b-blue); font-size: 0.85rem; text-decoration: underline; margin-top: 0.25rem; }
.b-rating { display: flex; align-items: center; gap: 0.5rem; }
.b-rating .score { background: var(--b-blue-dark); color: var(--white); font-weight: 700; padding: 0.25rem 0.5rem; border-radius: 4px; border-bottom-right-radius: 0; }

.b-match-status { margin-top: 1rem; font-size: 0.85rem; font-weight: 600; padding: 0.5rem; border-radius: 4px; }
.b-match-status.success { background: #f0fdf4; color: var(--success); border: 1px solid #bbf7d0; }
.b-match-status.failed { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }

.b-bottom-row { margin-top: auto; display: flex; justify-content: flex-end; align-items: flex-end; }
.b-price-block { text-align: right; }
.b-price-original { color: var(--danger); text-decoration: line-through; font-size: 0.9rem; font-weight: 600; margin-right: 0.5rem; }
.b-price-current { font-size: 1.5rem; font-weight: 700; color: var(--text-main); }
.b-capacity { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.b-book-btn { background: var(--b-blue); color: var(--white); text-decoration: none; font-weight: 600; padding: 0.5rem 1rem; border-radius: 4px; display: inline-block; margin-top: 0.5rem; }
.b-book-btn:hover { background: var(--b-blue-dark); }

.no-offers { padding: 3rem; text-align: center; color: var(--text-muted); }