/* StayFinder responsive hotel application */
:root{--blue:#075cf6;--blue-dark:#0348c6;--blue-soft:#edf4ff;--ink:#15213a;--muted:#6c7890;--line:#e1e7f0;--surface:#fff;--soft:#f5f8fc;--green:#078b54;--green-soft:#e8f7ef;--orange:#f59f00;--red:#d9485f;--shadow:0 10px 34px rgba(28,55,95,.11);--radius:14px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#f7faff;font-size:15px;line-height:1.45}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app-shell{min-height:100vh}.site-header{height:68px;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;gap:34px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:850;font-size:17px}.brand-mark{width:25px;height:25px;border:2px solid var(--blue);border-radius:8px;position:relative;display:inline-block}.brand-mark:before,.brand-mark:after{content:"";position:absolute;top:7px;width:6px;height:6px;border:2px solid var(--blue);border-radius:50%}.brand-mark:before{left:-5px}.brand-mark:after{right:-5px}.brand-mark.small{transform:scale(.75)}.desktop-nav{display:flex;align-items:center;gap:28px;height:100%}.desktop-nav a,.desktop-nav button{border:0;background:none;color:var(--muted);text-decoration:none;height:100%;padding:0 2px;position:relative}.desktop-nav .active{color:var(--blue);font-weight:750}.desktop-nav .active:after{content:"";height:2px;background:var(--blue);position:absolute;left:0;right:0;bottom:0}.desktop-nav button span{background:var(--blue-soft);color:var(--blue);border-radius:10px;padding:2px 6px;font-size:11px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.api-status{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}.api-status i{width:8px;height:8px;border-radius:50%;background:#aab4c4}.api-status.online i{background:#18a56b}.api-status.offline i{background:var(--red)}.icon-button{width:40px;height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted)}.hero-search{padding:38px clamp(18px,4vw,64px) 30px;background:radial-gradient(circle at 75% -40%,#dfeaff 0,transparent 52%),linear-gradient(#fff,#f7faff)}.hero-copy{max-width:720px;margin-bottom:25px}.eyebrow{color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:11px;margin:0 0 8px}.hero-copy h1{font-size:clamp(30px,4vw,50px);line-height:1.05;margin:0 0 10px;letter-spacing:-.04em}.hero-copy>p:last-child{color:var(--muted);margin:0}.search-card{display:grid;grid-template-columns:minmax(180px,1.5fr) repeat(2,minmax(135px,1fr)) repeat(3,minmax(88px,.55fr)) 130px;max-width:1380px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:var(--shadow)}.field{padding:6px 13px;border-right:1px solid var(--line);min-width:0}.field>span,.filter-group>span{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-bottom:6px}.field input,.field select{width:100%;height:30px;border:0;background:transparent;color:var(--ink);font-weight:700;outline:none;min-width:0}.destination>div{display:flex;align-items:center;gap:8px}.destination b{color:var(--blue)}.primary-button,.secondary-button{border-radius:9px;border:1px solid transparent;padding:10px 15px;font-weight:800;transition:.18s ease}.primary-button{background:var(--blue);color:#fff}.primary-button:hover{background:var(--blue-dark);transform:translateY(-1px)}.secondary-button{background:#fff;color:var(--ink);border-color:var(--line)}.secondary-button:hover{border-color:#b6c5dc;background:var(--soft)}.search-card>.primary-button{margin-left:10px}.workspace{display:grid;grid-template-columns:240px minmax(420px,1fr) minmax(260px,34%);gap:16px;padding:22px clamp(18px,4vw,64px) 44px;max-width:1600px;margin:auto}.filters-panel,.results-panel,.map-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}.filters-panel{padding:20px;height:max-content;position:sticky;top:90px}.panel-heading,.results-toolbar{display:flex;justify-content:space-between;align-items:flex-start}.panel-heading p,.results-toolbar p{font-size:11px;color:var(--muted);margin:0 0 3px}.panel-heading h2,.results-toolbar h2{font-size:19px;margin:0}.text-button{border:0;background:none;color:var(--blue);font-size:12px;font-weight:750;padding:4px}.filter-group{display:block;padding:16px 0;border-bottom:1px solid #edf1f6}.filter-group select,.filter-group input{width:100%;border:1px solid #d7dfeb;border-radius:8px;background:#fff;padding:9px;color:var(--ink);outline:none}.price-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.price-inputs label{border:1px solid #d7dfeb;border-radius:8px;padding:5px 8px}.price-inputs small{font-size:9px;color:var(--muted)}.price-inputs input{border:0;padding:2px 0}.star-options{display:flex;gap:7px}.star-options button{flex:1;border:1px solid #d7dfeb;background:#fff;padding:7px 3px;border-radius:7px;font-size:12px}.star-options button.active{color:var(--blue);border-color:var(--blue);background:var(--blue-soft)}.check-row{display:flex;align-items:center;gap:8px;margin:9px 0;color:#44516a;font-size:13px}.check-row input{width:15px;height:15px;accent-color:var(--blue)}.switch-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:14px 0}.switch-row input{display:none}.switch-row i{width:36px;height:20px;background:#cfd7e4;border-radius:12px;position:relative}.switch-row i:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.2s}.switch-row input:checked+i{background:var(--blue)}.switch-row input:checked+i:after{left:19px}.full{width:100%;margin-top:8px}.results-panel{padding:20px;min-height:650px}.results-toolbar{padding-bottom:16px;border-bottom:1px solid var(--line)}.toolbar-actions{display:flex;gap:8px}.toolbar-actions button{padding:8px 11px;font-size:12px}.toolbar-actions #mobileFilterBtn{display:none}.notice{padding:12px 14px;margin:14px 0;border-radius:8px;background:var(--blue-soft);color:#174da8;font-size:13px}.notice.error{background:#ffedf0;color:#a6283e}.hotel-list{display:grid;gap:14px;padding-top:16px}.hotel-card{display:grid;grid-template-columns:178px 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;min-height:174px;transition:.18s}.hotel-card:hover{border-color:#b9c9e1;box-shadow:0 8px 24px rgba(25,55,95,.09);transform:translateY(-1px)}.hotel-image-wrap{position:relative;background:#eaf0f8}.hotel-image{width:100%;height:100%;min-height:174px;object-fit:cover;display:block}.hotel-badge{position:absolute;left:9px;top:9px;background:#0ca36b;color:#fff;border-radius:5px;padding:4px 7px;font-size:10px;font-weight:800}.favorite-button{position:absolute;right:9px;top:9px;width:34px;height:34px;border:0;background:#fff;border-radius:50%;color:#42516a;font-size:19px;box-shadow:0 2px 8px #1b2b4433}.favorite-button.saved{color:#e24462}.hotel-info{padding:14px 16px;min-width:0}.hotel-heading{display:flex;justify-content:space-between;gap:12px}.hotel-heading h3{margin:0;font-size:17px;line-height:1.2}.hotel-stars{color:var(--orange);font-size:12px;margin-top:4px;letter-spacing:1px}.rating-badge{align-self:flex-start;background:var(--green-soft);color:var(--green);border-radius:6px;padding:5px 7px;font-weight:850;font-size:12px;white-space:nowrap}.hotel-location{color:var(--muted);font-size:12px;margin:7px 0}.amenity-tags{display:flex;flex-wrap:wrap;gap:6px}.amenity-tags span{border:1px solid #e1e7ef;background:#fafbfd;border-radius:12px;padding:3px 7px;color:#536078;font-size:10px}.hotel-bottom{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:end;margin-top:13px}.review-line{color:var(--muted);font-size:11px}.hotel-price{text-align:right;line-height:1.05}.hotel-price small,.hotel-price span{display:block;color:var(--muted);font-size:9px}.hotel-price strong{display:block;font-size:17px;margin:3px 0}.view-prices{padding:9px 11px;font-size:11px}.empty-state{text-align:center;padding:90px 20px;color:var(--muted)}.empty-state>div{font-size:34px;color:var(--blue)}.empty-state h3{color:var(--ink);margin:12px 0 5px}.empty-state p{margin:0}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:20px}.pagination button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 12px}.pagination button:disabled{opacity:.4;cursor:not-allowed}.pagination span{font-size:12px;color:var(--muted)}.map-panel{position:sticky;top:90px;height:calc(100vh - 112px);min-height:520px;overflow:hidden;background:#edf3ef}.map-grid{position:absolute;inset:0;background-color:#edf3ef;background-image:linear-gradient(28deg,transparent 48%,#fff 49%,#dce6df 51%,transparent 52%),linear-gradient(112deg,transparent 45%,#fff 46%,#dce6df 48%,transparent 49%);background-size:240px 180px,310px 260px;opacity:.9}.map-city{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);font-size:23px;color:#5f6e68}.map-pin{position:absolute;transform:translate(-50%,-50%);background:#fff;border:2px solid var(--blue);border-radius:18px;padding:6px 8px;color:var(--blue);font-size:10px;font-weight:850;box-shadow:0 4px 10px #36527c2b;white-space:nowrap}.map-control{position:absolute;right:12px;width:35px;height:35px;border:1px solid var(--line);background:#fff}.map-control.plus{bottom:58px;border-radius:8px 8px 0 0}.map-control.minus{bottom:24px;border-radius:0 0 8px 8px}.map-panel small{position:absolute;left:12px;bottom:10px;color:#76837d}.backdrop{position:fixed;inset:0;background:#0d1e3a80;z-index:50;backdrop-filter:blur(2px)}.detail-drawer{position:fixed;right:0;top:0;bottom:0;width:min(600px,100%);background:#fff;z-index:60;transform:translateX(102%);transition:transform .25s ease;box-shadow:-20px 0 50px #10284e2c;overflow:auto}.detail-drawer.open{transform:translateX(0)}.close-button{position:fixed;right:18px;top:15px;z-index:5;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:25px;box-shadow:0 4px 16px #0b1e3c33}.detail-hero{height:310px;background:#eaf0f8;position:relative}.detail-hero img{width:100%;height:100%;object-fit:cover}.detail-body{padding:24px}.detail-body h2{font-size:27px;line-height:1.15;margin:0}.detail-summary{display:flex;justify-content:space-between;gap:16px}.detail-copy{color:var(--muted);font-size:13px}.detail-section{margin-top:24px}.detail-section h3{margin:0 0 11px}.price-options{border:1px solid var(--line);border-radius:10px;overflow:hidden}.price-option{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:13px;border-bottom:1px solid var(--line)}.price-option:last-child{border:0}.provider-name{font-weight:850}.provider-meta{font-size:11px;color:var(--muted)}.provider-price{text-align:right}.provider-price strong{display:block}.book-link{background:var(--blue);color:#fff;text-decoration:none;border-radius:7px;padding:9px 11px;font-size:11px;font-weight:800}.detail-actions{display:flex;gap:8px;justify-content:space-between;align-items:center}.loading-block{height:120px;background:linear-gradient(90deg,#edf1f6 25%,#f7f9fc 45%,#edf1f6 65%);background-size:300% 100%;animation:shimmer 1.25s infinite;border-radius:9px}.skeleton{height:174px;border-radius:12px;background:linear-gradient(90deg,#edf1f6 25%,#f8fafc 45%,#edf1f6 65%);background-size:300% 100%;animation:shimmer 1.25s infinite}@keyframes shimmer{to{background-position:-100% 0}}footer{padding:23px clamp(18px,4vw,64px);border-top:1px solid var(--line);background:#fff;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}footer>div{display:flex;align-items:center;color:var(--ink)}
@media(max-width:1180px){.workspace{grid-template-columns:220px 1fr}.map-panel{display:none}.search-card{grid-template-columns:1.4fr 1fr 1fr .55fr .55fr .65fr 110px}.desktop-nav{display:none}}
@media(max-width:860px){.site-header{height:60px}.api-status{display:none}.hero-search{padding-top:25px}.hero-copy h1{font-size:34px}.search-card{grid-template-columns:1fr 1fr}.field{border-right:0;border-bottom:1px solid var(--line)}.field.destination{grid-column:1/-1}.search-card>.primary-button{margin:8px 0 0;min-height:48px;grid-column:1/-1}.workspace{display:block;padding-top:14px}.filters-panel{position:fixed;left:0;top:0;bottom:0;width:min(330px,88vw);z-index:70;border-radius:0;overflow:auto;transform:translateX(-105%);transition:.22s}.filters-panel.open{transform:translateX(0)}.results-panel{min-height:500px}.toolbar-actions #mobileFilterBtn{display:inline-block}.hotel-card{grid-template-columns:145px 1fr}.hotel-bottom{grid-template-columns:1fr auto}.review-line{display:none}.view-prices{grid-column:1/-1}.hotel-image{min-height:204px}footer{display:block;text-align:center}footer>div{justify-content:center;margin-bottom:6px}}
@media(max-width:560px){body{font-size:14px}.site-header{padding:0 16px}.icon-button{width:36px;height:36px}.hero-search{padding:22px 14px}.hero-copy{margin-bottom:17px}.hero-copy>p:last-child{font-size:13px}.search-card{padding:8px;grid-template-columns:1fr 1fr}.field{padding:6px 9px}.field.compact{min-width:0}.workspace{padding:12px 10px 30px}.results-panel{padding:13px;border-radius:12px}.results-toolbar h2{font-size:17px}.toolbar-actions{gap:5px}.toolbar-actions button{padding:7px 8px}.hotel-card{grid-template-columns:112px 1fr;min-height:190px}.hotel-image{min-height:190px}.hotel-info{padding:11px}.hotel-heading h3{font-size:14px}.rating-badge{font-size:10px;padding:4px 5px}.hotel-location{font-size:10px}.amenity-tags span:nth-child(n+3){display:none}.hotel-bottom{grid-template-columns:1fr;margin-top:10px}.hotel-price{text-align:left}.hotel-price small,.hotel-price span{display:inline}.hotel-price strong{display:inline;font-size:15px;margin:0 4px}.view-prices{width:100%}.favorite-button{width:30px;height:30px}.detail-hero{height:235px}.detail-body{padding:18px}.detail-body h2{font-size:23px}.detail-summary{display:block}.price-option{grid-template-columns:1fr auto}.book-link{grid-column:1/-1;text-align:center}.pagination{gap:8px}.pagination button{padding:8px}.pagination span{font-size:10px}}