@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Tajawal:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#f6f8fc;--surface:#fff;--surface2:#edf3fb;--surface3:#f9fbff;--text:#10213c;--muted:#738197;--border:#e4eaf3;--primary:#166fe9;--primary-soft:#eaf2ff;--peach:#ff806e;--violet:#7e62ef;--shadow:0 24px 70px rgba(27,57,105,.07);--radius:22px;--hero:#081b33;color-scheme:light}
:root[data-theme=dark]{--bg:#061323;--surface:#0b2038;--surface2:#13314e;--surface3:#0e2843;--text:#f7faff;--muted:#a0b1c8;--border:#24435e;--primary:#59a6ff;--primary-soft:#112f55;--shadow:0 22px 70px rgba(0,0,0,.22);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Tajawal,'DM Sans',system-ui,sans-serif;font-size:15px}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,h4,p{margin-top:0}h1{font-size:clamp(34px,5vw,58px);line-height:1.17;font-weight:900;letter-spacing:-1px}h2{font-size:clamp(24px,2.7vw,34px);font-weight:900;line-height:1.22}h3{font-size:20px}p{line-height:1.8}label{display:block;font-weight:700;font-size:14px}input,textarea,select{color:var(--text);background:var(--surface3);border:1px solid var(--border);border-radius:13px;padding:14px 16px;width:100%;outline:none;transition:.2s;min-height:49px}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,124,250,.09)}textarea{resize:vertical;min-height:115px}.container{width:min(1170px,calc(100% - 48px));margin-inline:auto}.muted{color:var(--muted)}.tiny{font-size:12px}.small{font-size:13px}.strong{font-weight:800}.heading{font-weight:900}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--primary);background:var(--primary-soft);border-radius:100px;padding:9px 16px}.gradient-text{background:linear-gradient(115deg,#ffaf4c,#ff6c85,#b75ff4,#44b6ec);-webkit-background-clip:text;background-clip:text;color:transparent}.logo{display:inline-flex;align-items:center;gap:10px}.logo img{width:145px;height:auto;max-height:56px;object-fit:contain}.logo span{font-family:'DM Sans',sans-serif;font-size:25px;letter-spacing:-1.1px;font-weight:800}.logo .mark{width:37px;height:37px;object-fit:contain}.btn{border:0;border-radius:13px;min-height:45px;display:inline-flex;justify-content:center;align-items:center;gap:9px;padding:11px 20px;font-weight:800;transition:transform .2s,filter .2s,background .2s;white-space:nowrap;text-align:center}.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}.btn-primary{background:linear-gradient(110deg,#1386f3,#655de9);color:#fff;box-shadow:0 8px 18px rgba(64,104,221,.19)}.btn-soft{background:var(--primary-soft);color:var(--primary)}.btn-outline{background:var(--surface);border:1px solid var(--border);color:var(--text)}.btn-dark{background:#102847;color:#fff}.btn-danger{background:#ffeded;color:#b42c4c}.btn-sm{font-size:12px;min-height:35px;padding:7px 12px;border-radius:10px}.btn-round{height:43px;width:43px;min-height:43px;padding:0;border-radius:50%;background:var(--surface2);color:var(--text)}.gradient-band{height:4px;background:linear-gradient(90deg,#ffb13d,#ff638a,#9d55ff,#23bad6)}.topbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(20px);background:color-mix(in srgb,var(--surface) 87%,transparent);border-bottom:1px solid var(--border)}.top-inner{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:82px}.top-actions{display:flex;gap:10px;align-items:center}.nav-links{display:flex;align-items:center;gap:32px;font-weight:800;color:var(--muted)}.nav-links a:hover{color:var(--primary)}.landing-hero{min-height:650px;position:relative;overflow:hidden;background:radial-gradient(circle at 8% 85%,rgba(123,80,238,.21),transparent 28%),radial-gradient(circle at 88% 10%,rgba(30,144,239,.2),transparent 26%),linear-gradient(128deg,#091a32,#0b2848 64%,#12254f);color:#fff}.landing-hero:before{content:'';pointer-events:none;position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);background-size:29px 29px;mask-image:linear-gradient(to bottom,transparent,black)}.hero-inner{display:grid;grid-template-columns:.99fr 1.01fr;gap:44px;align-items:center;min-height:610px;padding:65px 0;position:relative;z-index:1}.hero-copy{max-width:550px}.hero-copy .eyebrow{color:#d9e4ff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);margin-bottom:27px}.hero-copy h1{margin-bottom:22px}.hero-copy p{color:#a9bbd5;font-size:18px;line-height:1.95;margin-bottom:30px}.hero-buttons{display:flex;flex-wrap:wrap;gap:12px}.hero-buttons .btn{min-height:52px;padding:14px 23px}.hero-notes{display:flex;gap:20px;margin-top:31px;flex-wrap:wrap;color:#bccae0;font-size:13px}.hero-notes span{display:flex;align-items:center;gap:6px}.hero-notes svg{color:#7ee3ae;width:16px;height:16px}.hero-art{min-height:440px;position:relative;display:flex;align-items:center;justify-content:center}.orb{position:absolute;width:450px;height:450px;border-radius:50%;background:radial-gradient(circle at 42% 35%,#2e599b,#112a51 50%,#08192f 70%);box-shadow:0 0 120px rgba(44,111,225,.29),inset 0 0 0 1px rgba(255,255,255,.1)}.map-blob{position:absolute;width:90%;max-width:480px;object-fit:contain;opacity:.8;filter:drop-shadow(0 10px 15px #001428)}.floating-tile{position:absolute;z-index:3;border:1px solid rgba(255,255,255,.18);background:rgba(17,42,76,.83);backdrop-filter:blur(15px);border-radius:20px;box-shadow:0 24px 50px rgba(0,6,28,.32);padding:15px 17px}.tile-top{top:4%;left:-1%;min-width:185px}.tile-mid{right:-2%;top:32%;min-width:191px}.tile-bottom{bottom:5%;left:8%;min-width:214px}.tile-head{font-size:12px;color:#adbed9;margin:5px 0}.tile-main{display:flex;align-items:center;gap:10px;font-weight:900;font-size:16px}.tile-icon{height:35px;width:35px;border-radius:12px;background:linear-gradient(125deg,#fcbb4e,#ff6989);display:grid;place-items:center;font-size:17px}.tile-row{display:flex;gap:6px;margin-top:11px}.tile-row span{height:6px;border-radius:9px;background:#489bff;flex:1}.tile-row span:nth-child(2){background:#a56bff}.tile-row span:nth-child(3){background:#ff8e7e}.section{padding:94px 0}.section-title{text-align:center;max-width:650px;margin:0 auto 36px}.section-title p{color:var(--muted);font-size:16px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:28px;box-shadow:var(--shadow)}.feature-icon{height:52px;width:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:21px}.feature-icon svg{width:26px;height:26px}.feature h3{margin-bottom:10px}.feature p{margin-bottom:0;color:var(--muted)}.feature:nth-child(1) .feature-icon{background:#ecedff;color:#8b5cf6}.feature:nth-child(2) .feature-icon{background:#e8f5ff;color:#1175e7}.feature:nth-child(3) .feature-icon{background:#fff0e7;color:#f08054}.showcase{background:var(--surface);border:1px solid var(--border);border-radius:30px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;min-height:350px}.showcase-copy{padding:55px}.showcase-copy p{color:var(--muted)}.showcase-art{display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at center,#365e98,#071c38 75%);min-height:300px}.showcase-art img{max-width:82%;max-height:270px;object-fit:contain;filter:drop-shadow(0 15px 25px rgba(0,0,0,.22))}.landing-footer{padding:35px 0;color:var(--muted);border-top:1px solid var(--border)}.landing-footer .container{display:flex;justify-content:space-between;gap:20px;align-items:center}.auth-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.auth-visual{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,#091c37,#133c63 58%,#182857);color:white;padding:75px}.auth-visual::after{content:'';position:absolute;width:500px;height:500px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.02);top:50%;left:50%;transform:translate(-50%,-50%)}.auth-visual-content{z-index:1;max-width:490px;text-align:center}.auth-visual-content img{width:100%;max-height:290px;object-fit:contain;margin:0 auto 25px}.auth-visual h2{font-size:36px}.auth-visual p{color:#c8d6e9}.auth-body{padding:48px clamp(24px,8vw,120px);display:flex;justify-content:center;align-items:center}.auth-wrap{width:min(100%,430px)}.auth-wrap .logo{margin-bottom:32px}.auth-wrap h2{margin-bottom:9px}.auth-wrap>p{color:var(--muted);margin-bottom:28px}.form-grid{display:grid;gap:17px}.form-grid .label-gap{display:grid;gap:7px}.form-actions{display:flex;justify-content:space-between;gap:10px;align-items:center}.auth-switch{margin-top:25px;text-align:center;color:var(--muted)}.link-primary{color:var(--primary);font-weight:800}.hint{font-size:12px;color:var(--muted);line-height:1.6}.error-inline{padding:13px 16px;color:#bc405a;background:#fff0f2;border:1px solid #ffd4dc;border-radius:12px;margin:13px 0}.app-layout{display:grid;grid-template-columns:255px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:var(--surface);border-left:1px solid var(--border);padding:29px 18px;display:flex;flex-direction:column;z-index:35}.sidebar .logo{padding:0 16px 34px}.snav{display:grid;gap:7px}.snav a{display:flex;align-items:center;gap:14px;min-height:49px;padding:12px 17px;color:var(--muted);font-weight:800;border-radius:13px;transition:.2s}.snav a:hover,.snav a.active{background:var(--primary-soft);color:var(--primary)}.snav a.active{box-shadow:inset -3px 0 var(--primary)}.snav svg{width:21px;height:21px}.nav-divider{height:1px;background:var(--border);margin:17px 8px}.sidebar-bottom{margin-top:auto}.me-panel{border:1px solid var(--border);border-radius:15px;background:var(--surface3);padding:11px;display:flex;align-items:center;gap:10px;min-width:0}.me-panel .me-info{flex:1;min-width:0}.me-panel .me-info div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-main{min-width:0}.app-top{position:sticky;z-index:30;top:0;background:color-mix(in srgb,var(--surface) 89%,transparent);backdrop-filter:blur(15px);border-bottom:1px solid var(--border);min-height:75px;display:flex;align-items:center;padding:15px clamp(20px,3vw,48px);justify-content:space-between;gap:14px}.app-top-title{font-weight:900;font-size:20px}.app-top-actions{display:flex;gap:10px;align-items:center}.main-content{padding:30px clamp(20px,3vw,48px) 90px;max-width:1500px;margin:0 auto}.app-footer{font-size:12px;color:var(--muted);margin-top:60px;text-align:center}.cols{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:25px;align-items:start}.page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:25px}.page-head h1{font-size:30px;margin-bottom:3px}.page-head p{color:var(--muted);margin-bottom:0}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.card-pad{padding:24px}.card + .card{margin-top:19px}.stack{display:grid;gap:18px}.row{display:flex;gap:13px;align-items:center}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.avatar{width:45px;height:45px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(145deg,#d8e8ff,#dedfff);color:#2355a5;font-size:18px;font-weight:900;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.avatar-sm{width:37px;height:37px;font-size:15px}.avatar-lg{width:90px;height:90px;font-size:31px;border:4px solid var(--surface);box-shadow:0 6px 28px rgba(0,0,0,.12)}.avatar-xl{width:105px;height:105px;font-size:36px;border:5px solid var(--surface)}.avatar-ring{padding:3px;background:linear-gradient(145deg,#ffb44e,#ff567d,#6157f4);border-radius:50%;display:inline-flex}.avatar-ring .avatar{border:3px solid var(--surface)}.post{overflow:hidden}.post-header{padding:17px 20px;display:flex;gap:11px;align-items:center}.post-header .name{font-weight:900;font-size:14px}.post-header .meta{font-size:12px;color:var(--muted);margin-top:3px}.post-photo{position:relative;display:block;width:100%;max-height:440px;object-fit:cover;background:var(--surface2)}.post-placeholder{height:230px;background:radial-gradient(circle at 65% 28%,#2e83cf,#122c53);display:grid;place-items:center;color:#e4f0ff;gap:9px;text-align:center;padding:20px}.post-placeholder svg{width:36px;height:36px}.post-body{padding:13px 21px 20px}.post-actionbar{display:flex;align-items:center;gap:16px;margin-bottom:8px}.bare{border:none;background:none;display:inline-flex;align-items:center;gap:7px;color:var(--text);padding:6px 0;min-height:35px;font-weight:800}.bare:hover{color:var(--primary)}.bare.liked{color:#f24b71}.bare svg{height:22px;width:22px}.caption-title{font-weight:900;font-size:18px;margin:6px 0}.caption-sub{color:var(--muted);font-size:13px;margin-top:6px}.feed-switch,.chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.chip{background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:10px 16px;border-radius:12px;font-weight:800}.chip.active{background:var(--primary-soft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 23%,var(--border))}.right-box{position:sticky;top:105px}.panel-title{font-size:17px;font-weight:900;margin:0 0 18px}.traveler-row{display:flex;gap:9px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}.traveler-row:last-child{border-bottom:0}.traveler-row .name{font-weight:900;font-size:13px}.travel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.trip-card{overflow:hidden;transition:transform .2s}.trip-card:hover{transform:translateY(-3px)}.trip-cover{height:165px;object-fit:cover;width:100%;background:linear-gradient(125deg,#16395f,#3267b0);display:grid;place-items:center;color:#fff}.trip-cover svg{width:35px;height:35px}.trip-info{padding:16px}.trip-info h3{font-size:17px;margin:0 0 6px}.travel-meta{font-size:12px;color:var(--muted)}.badge{display:inline-flex;align-items:center;background:var(--primary-soft);color:var(--primary);padding:6px 11px;border-radius:99px;font-size:12px;font-weight:800}.badge-warm{background:#fff2e8;color:#d87940}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{border:1px solid var(--border);border-radius:15px;padding:16px;text-align:center;background:var(--surface3)}.stat strong{display:block;font-size:25px;font-weight:900;direction:ltr}.stat small{font-size:12px;color:var(--muted)}.search-bar{position:relative;max-width:610px}.search-bar svg{position:absolute;right:17px;top:14px;color:var(--muted)}.search-bar input{padding-right:46px;min-height:54px;border-radius:16px;background:var(--surface)}.traveler-strip{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 16px}.traveler-mini{width:125px;min-width:125px;display:grid;justify-items:center;gap:7px}.traveler-mini .name{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:900}.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.explore-card{background:var(--surface);border:1px solid var(--border);border-radius:19px;overflow:hidden;transition:transform .2s}.explore-card:hover{transform:translateY(-3px)}.explore-card img,.explore-art{width:100%;height:185px;object-fit:cover;background:linear-gradient(145deg,#3972b7,#0c2746)}.explore-art{display:grid;place-items:center;color:#ecf7ff}.explore-meta{padding:12px 15px}.explore-meta strong{font-size:14px;display:block}.explore-meta small{color:var(--muted)}.profile-cover{height:205px;background:radial-gradient(circle at 14% 22%,rgba(255,120,122,.5),transparent 34%),radial-gradient(circle at 80% 36%,rgba(92,107,237,.6),transparent 35%),linear-gradient(110deg,#16446c,#0a2447);position:relative}.profile-cover:after{content:'';position:absolute;inset:0;background:url('./assets/frame-world-map.png') center/auto 115% no-repeat;opacity:.17}.profile-main{padding:0 25px 24px;position:relative}.profile-head{display:flex;align-items:end;justify-content:space-between;margin-top:-47px;position:relative;gap:15px}.profile-name{font-size:24px;font-weight:900;margin:12px 0 4px}.profile-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.profile-posts .photo{height:175px;border-radius:9px;overflow:hidden;background:var(--surface2);display:block}.profile-posts img{width:100%;height:100%;object-fit:cover}.detail-hero{height:400px;overflow:hidden;background:var(--surface2);border-radius:18px;position:relative;display:grid;place-items:center}.detail-hero img{width:100%;height:100%;object-fit:contain}.details-body{padding:25px}.note-list{display:grid;gap:11px}.note-list .line{display:flex;gap:12px;align-items:start;border-bottom:1px solid var(--border);padding-bottom:10px}.note-list .line:last-child{border-bottom:0}.comment{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--border)}.comment:last-child{border:0}.map-summary{padding:20px;background:var(--primary-soft);border-radius:14px}.map-summary strong{display:block;margin-bottom:7px}.photo-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.photo-pick{position:relative;border:3px solid transparent;border-radius:12px;overflow:hidden;aspect-ratio:1}.photo-pick.selected{border-color:var(--primary)}.photo-pick img{width:100%;height:100%;object-fit:cover}.photo-pick input{position:absolute;top:7px;right:7px;accent-color:var(--primary);width:18px;height:18px;min-height:18px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.empty{border:1px dashed var(--border);background:var(--surface);border-radius:19px;padding:45px 25px;text-align:center;max-width:100%}.empty .empty-icon{background:var(--primary-soft);color:var(--primary);height:59px;width:59px;border-radius:18px;display:grid;place-items:center;margin:0 auto 17px}.empty .empty-icon svg{height:27px;width:27px}.empty h3{margin-bottom:9px}.empty p{max-width:450px;color:var(--muted);margin:0 auto 20px}.loading{padding:55px 10px;text-align:center;color:var(--muted)}.spinner{height:29px;width:29px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .9s linear infinite;margin:0 auto 15px}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;z-index:100;bottom:25px;left:25px;max-width:min(420px,calc(100vw - 40px));padding:13px 20px;border-radius:15px;background:#10243e;color:#fff;box-shadow:0 20px 60px #06182a44;opacity:0;pointer-events:none;transition:.25s;transform:translateY(20px)}#toast.visible{opacity:1;transform:none}.small-divider{height:1px;background:var(--border);margin:20px 0}.mobile-nav{display:none}.desktop-only{display:initial}.table-wrap{overflow-x:auto}.table{border-collapse:collapse;width:100%}.table td,.table th{border-bottom:1px solid var(--border);padding:13px;text-align:right}.table th{font-size:13px;color:var(--muted)}.back-button{background:none;border:0;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:800;padding:0 0 18px}.image-strip{display:flex;gap:8px;overflow:auto;margin-top:10px}.image-strip button{padding:0;border:2px solid var(--border);border-radius:8px;overflow:hidden;background:none;min-width:63px;width:63px;height:60px}.image-strip img{height:100%;width:100%;object-fit:cover}.image-strip button.selected{border-color:var(--primary)}.section-sub{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:26px 0 16px}.section-sub h3{margin:0}.checkbox-inline{display:flex;gap:10px;align-items:center;font-weight:700}.checkbox-inline input{width:18px;height:18px;min-height:18px;accent-color:var(--primary)}.trip-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.trip-photo-grid img{width:100%;height:125px;object-fit:cover;border-radius:11px}.mobile-brand{display:none}a:focus-visible,button:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
@media(max-width:1120px){.cols{grid-template-columns:minmax(0,1fr) 270px}.travel-grid{grid-template-columns:repeat(2,1fr)}.explore-grid{grid-template-columns:repeat(2,1fr)}.app-layout{grid-template-columns:225px minmax(0,1fr)}.hero-art{transform:scale(.88)}}
@media(max-width:850px){.hero-inner{grid-template-columns:1fr;gap:0;padding:70px 0 35px;text-align:center}.hero-copy{margin:0 auto}.hero-buttons,.hero-notes{justify-content:center}.hero-art{min-height:365px;transform:scale(.78)}.section{padding:65px 0}.features{grid-template-columns:1fr 1fr}.showcase{grid-template-columns:1fr}.showcase-copy{padding:40px}.auth-page{grid-template-columns:1fr}.auth-visual{display:none}.auth-body{min-height:100vh;padding:40px 24px}.app-layout{grid-template-columns:1fr}.sidebar{display:none}.mobile-brand{display:inline-flex}.app-top{padding:12px 19px}.main-content{padding:25px 19px 108px}.mobile-nav{display:flex;position:fixed;bottom:0;inset-inline:0;height:73px;background:var(--surface);z-index:45;justify-content:space-around;align-items:center;border-top:1px solid var(--border);box-shadow:0 -8px 40px rgba(0,0,0,.04);padding-bottom:env(safe-area-inset-bottom)}.mobile-nav a{display:grid;gap:3px;justify-items:center;color:var(--muted);font-size:11px;font-weight:800}.mobile-nav a.active{color:var(--primary)}.mobile-nav a svg{width:23px;height:23px}.mobile-nav .mobile-add{border-radius:50%;height:49px;width:49px;display:grid;place-items:center;transform:translateY(-13px);background:linear-gradient(135deg,#fe8c66,#ec588e,#8860f3);color:#fff;box-shadow:0 8px 20px rgba(239,91,125,.3)}.mobile-nav .mobile-add svg{height:24px;width:24px}.right-box{position:static}.cols{grid-template-columns:1fr}.desktop-only{display:none}}
@media(max-width:570px){.container{width:calc(100% - 36px)}.top-inner{min-height:70px}.nav-links{display:none}.logo img{width:120px}.top-actions .btn{padding:10px 12px;font-size:13px}.hero-copy h1{font-size:38px}.hero-copy p{font-size:16px}.hero-art{margin:-40px -30px;transform:scale(.64)}.floating-tile{font-size:12px}.features{grid-template-columns:1fr}.section-title{margin-bottom:25px}.showcase-copy{padding:30px}.landing-footer .container{flex-direction:column}.page-head{align-items:start}.page-head h1{font-size:26px}.travel-grid,.explore-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.explore-card img,.explore-art{height:125px}.explore-meta{padding:10px}.explore-meta strong{font-size:12px}.trip-cover{height:125px}.trip-info{padding:12px}.trip-info h3{font-size:14px}.settings-grid{grid-template-columns:1fr}.profile-cover{height:155px}.profile-posts .photo{height:125px}.detail-hero{height:285px}.stats{gap:6px}.stat{padding:12px 5px}.stat strong{font-size:21px}.photo-picks{grid-template-columns:repeat(3,1fr)}.trip-photo-grid{grid-template-columns:repeat(3,1fr)}.card-pad{padding:18px}.hide-small{display:none}.app-top-title{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Social Web V2.1 extensions — light/dark and responsive. */
.verified{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#1884ec;color:white;font-size:11px;font-weight:900;vertical-align:middle}
.verified-line{color:var(--primary);font-size:13px;font-weight:800;margin-top:12px}
.saved-on{color:#ad62de!important}.saved-on svg{fill:currentColor;fill-opacity:.22}
.post-description{white-space:pre-wrap;overflow-wrap:anywhere}.post-detail-actions{margin:16px 0;padding-block:12px;border-bottom:1px solid var(--border)}
.feed-switch,.categories{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:15px 0 21px}
.story-strip{display:flex;gap:16px;padding:16px;margin-bottom:20px;background:var(--surface);border:1px solid var(--border);border-radius:19px;overflow:auto}
.story-thumb{display:grid;gap:8px;justify-items:center;min-width:79px;width:79px;text-align:center;font-size:11px;font-weight:800}
.story-thumb img{width:69px;height:69px;border:3px solid #b369e8;outline:2px solid var(--surface);object-fit:cover;border-radius:50%}
.story-thumb span:last-child{max-width:78px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-add .story-plus{width:69px;height:69px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:40px;font-weight:700}
.starter-story{margin-bottom:20px;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.trend-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.trend-row:last-child{border:0}.trend-row>img,.trend-row>span{width:48px;height:48px;border-radius:12px;object-fit:cover;background:var(--surface2);display:grid;place-items:center;font-size:22px}
.trend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.trend-tile{display:block;min-width:0;overflow:hidden;border-radius:17px;background:var(--surface);border:1px solid var(--border)}
.trend-tile img,.trend-tile .explore-art{width:100%;height:132px;object-fit:cover}.trend-tile>div:last-child{padding:10px 13px;display:grid;gap:3px}.trend-tile small{color:var(--muted)}
.centered{text-align:center;margin:24px auto}.feed-narrow{max-width:700px;display:grid;gap:20px}.mini-panel{margin-top:18px;max-width:900px}
.post-photo.reel-video{display:block;object-fit:contain;background:#071627;max-height:480px}.detail-video{width:100%;max-height:560px;background:#05080e;border-radius:17px}
.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:16px}.story-large{position:relative;display:block;aspect-ratio:3/5;overflow:hidden;border-radius:20px;background:#0c2746}
.story-large>img{height:100%;width:100%;object-fit:cover}.story-footer{position:absolute;inset:auto 0 0;padding:30px 14px 14px;display:flex;align-items:center;gap:9px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.story-footer strong,.story-footer small{display:block;font-size:12px}.story-footer small{opacity:.76}.story-view{max-width:520px;margin:auto;background:var(--surface);border-radius:22px;padding:15px;border:1px solid var(--border)}
.story-view-head,.story-view-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.story-view-head{margin-bottom:12px}.story-view-footer{margin-top:17px}.story-view-footer h2{font-size:19px;margin:0}
.story-image{width:100%;max-height:min(65vh,670px);object-fit:contain;border-radius:12px;background:#0a1122}
.story-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.story-option{position:relative;display:grid;gap:8px;padding:8px;border-radius:14px;border:2px solid var(--border);background:var(--surface3)}
.story-option:has(input:checked){border-color:var(--primary)}.story-option>input{position:absolute;top:7px;right:7px;width:20px;min-height:20px;accent-color:var(--primary)}.story-option img{width:100%;height:130px;object-fit:cover;border-radius:10px}.story-option span{overflow-wrap:anywhere;font-size:12px}
.reels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start;gap:18px}.reel-card{overflow:hidden}.reel-card>video{width:100%;max-height:530px;background:#080d15;object-fit:contain;aspect-ratio:9/13}.reel-card .reel-top{display:flex;align-items:center;gap:9px;padding:13px}.reel-card .card-pad h3{font-size:17px}
.list-panel{max-width:680px}.form-panel{max-width:700px}.form-grid>label:not(.checkbox-inline){display:grid;gap:8px}.form-grid .checkbox-inline{display:flex}
.passport-hero{background:radial-gradient(circle at 10% 8%,rgba(216,135,255,.3),transparent 35%),linear-gradient(125deg,#102d57,#102b4a 50%,#412c77);min-height:260px;border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:32px 45px;overflow:hidden}
.passport-eyebrow{color:#bbd7ff;font-size:11px;letter-spacing:2px}.passport-hero h2{margin:16px 0 0}.passport-hero p{color:#cad9f1}.passport-numbers{display:flex;gap:28px;margin-top:15px}.passport-numbers span{display:grid}.passport-numbers strong{font-size:28px}.passport-globe{font-size:clamp(75px,14vw,190px);opacity:.9}
.passport-countries{margin:22px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.country-item{min-width:0;padding:16px}.country-item summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer}.country-item summary::-webkit-details-marker{display:none}.country-item summary span{font-size:22px}.country-item summary small{margin-inline-start:auto;color:var(--muted)}.country-item summary svg{width:16px}.cities-list,.route-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.photo-manager{overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.photo-manager>img{width:100%;height:145px;object-fit:cover}.photo-controls{display:flex;flex-wrap:wrap;gap:5px;padding:7px}.photo-controls .btn{padding:5px 8px;min-height:29px;font-size:10px}
.frame-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start;gap:18px;margin-top:18px}.frame-trips{max-height:230px;overflow:auto;display:grid;gap:9px;padding:10px;border-radius:12px;background:var(--surface2)}.frame-trips .checkbox-inline{font-weight:500}.frame-grid h3{font-size:17px}
.advanced-settings{margin-top:22px}.danger-zone summary{cursor:pointer;color:#c74658;font-weight:800}.danger-zone[open]{border:1px solid #dc9cab;border-radius:12px;padding:13px}.danger-zone p{color:var(--muted)}
@media(max-width:800px){.passport-hero{padding:28px}.trip-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.story-strip{margin-inline:-4px}.trend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.passport-hero{padding:21px;min-height:190px}.passport-globe{font-size:65px}.passport-hero h2{font-size:22px}.stories-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.reels-grid{grid-template-columns:1fr}.frame-grid{grid-template-columns:1fr}.story-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.story-view-head .btn{font-size:11px}.post-detail-actions{gap:12px}}
.mobile-shortcuts{display:none}.frame-library{display:grid;gap:8px;margin:12px 0}.frame-library-item{border:1px solid var(--border);border-radius:12px;padding:10px;display:flex;gap:12px;align-items:center}.frame-library-item>span{font-size:24px}.frame-library-item div{flex:1;min-width:0}.frame-library-item strong,.frame-library-item small{display:block}.frame-library-item small{color:var(--muted)}
@media(max-width:850px){.mobile-shortcuts{display:flex;gap:7px;overflow-x:auto;padding:10px 18px 0;scrollbar-width:thin}.mobile-shortcuts .chip{font-size:12px;white-space:nowrap;flex-shrink:0}}

/* Searchable country picker and real CityCatalog suggestions (V2.1.1). */
.geo-city-picker{position:relative}.geo-results{display:flex;flex-wrap:wrap;gap:7px;max-height:180px;overflow-y:auto}
.geo-city-choice,.geo-city-custom,.geo-pill{border:1px solid var(--border);border-radius:13px;padding:8px 12px;background:var(--surface2);color:var(--text);font:inherit;cursor:pointer;font-size:12px;display:inline-flex;align-items:center;gap:6px;text-align:start}
.geo-city-choice:hover,.geo-city-custom:hover{border-color:var(--primary);color:var(--primary)}
.geo-selected{display:flex;gap:7px;flex-wrap:wrap;min-height:6px}.geo-pill{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:700}
[data-country-select]{width:100%} [data-country-search]{width:100%}

/* Trip V2.1.2 — full media and moment workflow */
.trip-create-panel{max-width:850px}
.trip-moment-editor,.trip-photo-upload,.trip-timeline{border:1px solid var(--border);background:var(--surface2);border-radius:19px;padding:17px;margin-block:16px}
.trip-moment-editor>div:first-child h3,.trip-timeline h3{margin:0;display:flex;align-items:center;gap:7px}
.trip-moment-editor .hint{margin:7px 0 0}
.moment-editor-list{display:grid;gap:12px;margin-top:16px}
.moment-edit-row{border:1px solid var(--border);border-radius:15px;background:var(--surface);padding:16px;display:grid;gap:13px}
.moment-edit-row>label{display:grid;gap:8px}
.moment-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.moment-fields>label{min-width:0;display:grid;gap:8px}
.moment-fields>label:first-child{grid-column:span 2}
.trip-photo-upload>label{display:flex;align-items:center;gap:7px;font-weight:800;margin-bottom:13px}
.trip-photo-upload>input[type=file]{display:block;width:100%;min-height:56px;border:1px dashed var(--primary);padding:13px;border-radius:12px;background:var(--surface)}
.pending-photo-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:9px;margin-top:14px}
.pending-photo{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:11px;overflow:hidden}
.pending-photo img{width:100%;height:102px;object-fit:cover;display:block}
.pending-photo span{display:block;padding:7px;font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.timeline-list{list-style:none;padding:5px 20px 5px 0;margin:0;position:relative}
.timeline-list::before{content:"";position:absolute;top:18px;bottom:20px;right:10px;width:2px;background:var(--border)}
.timeline-item{display:flex;gap:14px;padding:10px 0;position:relative;overflow-wrap:anywhere}
.timeline-dot{display:block;flex:0 0 21px;height:21px;background:var(--primary);border:5px solid var(--surface2);border-radius:50%;position:relative;z-index:1}
.timeline-item h4{margin:3px 0 7px;font-size:16px}
.timeline-note{margin:0;white-space:pre-wrap;color:var(--muted);line-height:1.8}
.timeline-empty{padding:14px;background:var(--surface);border-radius:11px;color:var(--muted)}
.timeline-empty .text-link{color:var(--primary);font-weight:800}
@media(max-width:580px){.moment-fields{grid-template-columns:1fr}.moment-fields>label:first-child{grid-column:auto}.trip-moment-editor,.trip-photo-upload,.trip-timeline{padding:12px}.moment-edit-row{padding:11px}.pending-photo-preview{grid-template-columns:repeat(3,minmax(0,1fr))}}

.upload-status{margin:7px 0 0;font-size:12px;color:var(--primary);font-weight:700}


/* Brand refresh — replace legacy blue accents with Trippbo gradient. */
:root{--brand-start:#ad3af6;--brand-mid:#ff68b6;--brand-end:#fd895d;--primary:#ff68b6;--primary-soft:#fff0f7;--violet:#ad3af6;--peach:#fd895d}
:root[data-theme=dark]{--brand-start:#b757f7;--brand-mid:#ff79c2;--brand-end:#ff956f;--primary:#ff79c2;--primary-soft:#34152b;--violet:#c577ff;--peach:#ff956f}
input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,104,182,.16)}
.gradient-text{background:linear-gradient(115deg,var(--brand-start),var(--brand-mid) 52%,var(--brand-end));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-primary,.mobile-nav .mobile-add,.verified{background:linear-gradient(95deg,var(--brand-start),var(--brand-mid) 52%,var(--brand-end));color:#fff;box-shadow:0 10px 22px rgba(255,104,182,.24)}
.gradient-band,.avatar-ring{background:linear-gradient(90deg,var(--brand-start),var(--brand-mid) 52%,var(--brand-end))}
.btn-soft,.eyebrow,.upload-status,.saved-on{color:var(--primary)}
.landing-hero{background:radial-gradient(circle at 8% 85%,rgba(173,58,246,.22),transparent 28%),radial-gradient(circle at 88% 10%,rgba(253,137,93,.18),transparent 26%),linear-gradient(128deg,#1a0d28,#211338 64%,#321942);color:#fff}
.orb{background:radial-gradient(circle at 38% 30%,#ff6dbf,#cf58ed 34%,#6a2d92 56%,#22112f 78%);box-shadow:0 0 120px rgba(255,104,182,.23),inset 0 0 0 1px rgba(255,255,255,.08)}
.tile-icon{background:linear-gradient(125deg,var(--brand-start),var(--brand-mid) 58%,var(--brand-end))}
.tile-row span{background:#ff84c4}.tile-row span:nth-child(2){background:#cb73ff}.tile-row span:nth-child(3){background:#ff9d73}
.feature:nth-child(1) .feature-icon{background:#f7edff;color:#ad3af6}.feature:nth-child(2) .feature-icon{background:#fff0f7;color:#ff68b6}.feature:nth-child(3) .feature-icon{background:#fff2ea;color:#fd895d}
.showcase-art{background:radial-gradient(circle at center,#cf58ed,#3b184a 55%,#180f24 88%)}
.auth-visual{background:linear-gradient(155deg,#200f32,#3b184a 58%,#5c2348)}
.avatar{background:linear-gradient(145deg,#ffe3f2,#f5e6ff);color:#932ecf}
.post-placeholder{background:radial-gradient(circle at 65% 28%,#ff79c2,#632b76);color:#fff0f7}
.trip-cover{background:linear-gradient(125deg,#3d194d,#ad3af6 55%,#fd895d)}
.explore-card img,.explore-art{background:linear-gradient(145deg,#7336b3,#341342)}
.profile-cover{background:radial-gradient(circle at 14% 22%,rgba(255,104,182,.52),transparent 34%),radial-gradient(circle at 80% 36%,rgba(173,58,246,.52),transparent 35%),linear-gradient(110deg,#4a184e,#24112f)}
.story-thumb img{border-color:#d86dff}.story-large{background:#341342}
.passport-hero{background:radial-gradient(circle at 10% 8%,rgba(255,104,182,.28),transparent 35%),radial-gradient(circle at 78% 18%,rgba(173,58,246,.22),transparent 32%),linear-gradient(125deg,#341342,#24112f 50%,#4a184e)}
.passport-eyebrow{color:#ffd3e8}.passport-hero p,.auth-visual p{color:#f6ddea}
.timeline-dot{background:linear-gradient(135deg,var(--brand-start),var(--brand-mid) 55%,var(--brand-end))}


/* V2.1.3.1 — Clean, neutral selection styling for navigation.
   Avoid the burgundy / hot-pink active pill in dark mode. */
:root[data-theme=dark]{--primary-soft:#29263c}
.snav a{position:relative}
.snav a.active{
  background:#faf7fd;
  color:#653173;
  border:1px solid #eadcf0;
  box-shadow:none;
  padding-inline-end:17px;
}
.snav a.active svg{color:#ae48df}
.snav a.active::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:10px;
  background:linear-gradient(180deg,#ad3af6,#ff68b6 55%,#fd895d);
}
.snav a:not(.active):hover{background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text)}
:root[data-theme=dark] .snav a.active{
  background:rgba(255,255,255,.065);
  color:#fff;
  border-color:rgba(255,255,255,.09);
  box-shadow:none;
}
:root[data-theme=dark] .snav a.active svg{color:#f3c8eb}
:root[data-theme=dark] .snav a:not(.active):hover{background:rgba(255,255,255,.045);color:#fff}

/* Trippbo Hotels — guest browse + authenticated search, stays on trippbo.com. */
.hotel-landing-section{padding:68px 0 76px;background:var(--bg)}
.hotel-search-panel{max-width:1110px;margin:0 auto;padding:29px;background:var(--surface);border:1px solid var(--border);border-radius:27px;box-shadow:var(--shadow)}
.hotel-search-embedded{box-shadow:0 24px 72px rgba(44,24,65,.09);border-top:3px solid #ec57bf}
.hotel-search-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}
.hotel-search-title h2{margin:9px 0 6px;font-size:clamp(23px,3vw,35px)}
.hotel-search-title p{color:var(--muted);margin:0;font-size:14px}
.hotel-label{display:inline-flex;background:var(--primary-soft);color:var(--primary);font-weight:800;border-radius:99px;padding:8px 14px;font-size:12px}
.hotel-inline-link{font-size:13px;color:var(--primary);font-weight:800;white-space:nowrap}
.hotel-search-form{display:grid;gap:18px}
.hotel-search-form label{gap:7px;color:var(--text)}
.hotel-main-fields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:13px;align-items:start}
.hotel-secondary-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.hotel-search-form input,.hotel-search-form select{width:100%;min-width:0}
.hotel-dest-field{position:relative;display:grid;gap:7px}
.hotel-dest-field>label{font-weight:800}
.hotel-suggestions{position:absolute;top:78px;right:0;left:0;z-index:12;background:var(--surface);border-radius:13px;border:1px solid var(--border);box-shadow:0 18px 40px rgba(18,13,35,.16);max-height:275px;overflow-y:auto}
.hotel-suggestions:empty{display:none}
.hotel-suggestions button{display:flex;width:100%;align-items:center;gap:9px;background:var(--surface);color:var(--text);text-align:right;border:0;border-bottom:1px solid var(--border);padding:12px;cursor:pointer}
.hotel-suggestions button:hover{background:var(--primary-soft)}
.hotel-suggestions>span{display:block;padding:10px}
.hotel-rooms-editor{background:var(--surface2);border-radius:17px;padding:15px;border:1px solid var(--border)}
.hotel-rooms-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.hotel-room-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding:10px 0}
.hotel-room-row:last-child{border-bottom:0}
.hotel-room-row>strong{min-width:75px}
.hotel-room-row label{display:flex;align-items:center;gap:7px;flex-direction:row;font-size:12px}
.hotel-room-row select{width:auto;min-width:68px;min-height:38px;padding:6px 9px}
.hotel-search-footer{display:flex;justify-content:space-between;align-items:center;gap:18px}
.hotel-search-footer p{margin:0}
.hotel-search-button{min-height:52px;padding:14px 27px}
.hotel-public-page{min-height:100vh;background:var(--bg)}
.hotel-public-main{padding:58px 0 100px}
.hotel-content{max-width:1100px;margin:auto}
.hotel-result-count{color:var(--muted);margin-bottom:15px}
.hotel-results-grid{display:grid;gap:19px}
.hotel-card{display:grid;grid-template-columns:260px 1fr;gap:20px;overflow:hidden;border-radius:23px;background:var(--surface);border:1px solid var(--border);min-height:218px}
.hotel-card>img,.hotel-img-placeholder{width:100%;height:100%;min-height:218px;object-fit:cover;background:radial-gradient(circle at center,#f18bc2,#812a7c);display:grid;place-items:center;font-size:65px}
.hotel-card-main{padding:22px 0 22px 19px;display:grid;justify-items:start;align-content:space-between;gap:6px}
.hotel-card-main h3{font-size:21px;margin:0}
.hotel-card-main p{margin:0}
.hotel-card-badges{display:flex;gap:8px;flex-wrap:wrap}
.hotel-card-badges span{display:inline-block;padding:5px 9px;background:var(--primary-soft);color:var(--primary);border-radius:20px;font-size:12px}
.hotel-price{font-weight:900;font-size:22px;color:var(--text)}
.hotel-price small{font-size:11px;color:var(--muted);font-weight:500;margin-inline-start:7px}
.hotel-detail-top{display:flex;justify-content:space-between;gap:14px;align-items:center;margin:22px 0}
.hotel-detail-top h1{font-size:clamp(24px,3vw,36px);margin:0 0 8px}
.hotel-detail-hero{display:block;width:100%;height:min(48vw,380px);border-radius:23px;object-fit:cover;background:var(--surface2)}
.hotel-section-heading{margin:31px 0 18px}
.hotel-section-heading h2{margin-bottom:5px}
.hotel-section-heading p{color:var(--muted)}
.hotel-rooms-grid{display:grid;gap:13px}
.hotel-room-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;border-radius:20px;border:1px solid var(--border);background:var(--surface)}
.hotel-room-card h3{margin:0 0 9px}
.hotel-room-card .btn{margin-inline:4px}
.hotel-room-card>div:last-child{text-align:center}
.hotel-room-card strong{font-size:20px}
.hotel-policy{margin:4px 0 0;color:var(--muted);font-size:12px}
.hotel-alert,.hotel-empty-rooms{padding:18px;border-radius:14px;background:var(--surface2);border:1px solid var(--border);margin-block:12px}
@media(max-width:850px){.hotel-main-fields{grid-template-columns:1fr 1fr}.hotel-dest-field{grid-column:span 2}.hotel-card{grid-template-columns:180px 1fr}.hotel-search-title{align-items:start}}
@media(max-width:580px){.hotel-landing-section{padding:40px 0}.hotel-search-panel{padding:17px;border-radius:19px}.hotel-search-title{display:block}.hotel-inline-link{display:inline-block;margin-top:11px}.hotel-main-fields,.hotel-secondary-fields{grid-template-columns:1fr}.hotel-dest-field{grid-column:auto}.hotel-search-footer{display:grid}.hotel-search-button{width:100%}.hotel-room-row>strong{flex-basis:100%}.hotel-card{display:block}.hotel-card>img,.hotel-img-placeholder{height:190px;min-height:190px}.hotel-card-main{padding:18px}.hotel-room-card{align-items:flex-start;display:grid}.hotel-room-card>div:last-child{text-align:start}.hotel-public-main{padding-top:26px}.hotel-detail-top{display:block}}
.hotel-mybookings{display:flex;justify-content:flex-start;padding-inline:5px}

.btn-hotels-hero{color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.35)}.btn-hotels-hero:hover{background:rgba(255,255,255,.22)}

/* ── Trippbo Hotels V2.3: premium search-first design ─────────────── */
:root{--hotel-navy:#101d46;--hotel-ink:#13204b;--hotel-grey:#6f7d98;--hotel-line:#e8ebf4;--hotel-gradient:linear-gradient(105deg,#f76469 0%,#f754aa 51%,#8538ff 100%);--hotel-shadow:0 18px 50px rgba(34,41,95,.11)}
.hotel-home-container{width:min(1380px,calc(100% - 44px));padding-top:18px}
.hotel-hero-showcase{position:relative;min-height:560px;padding:0 0 102px;border-radius:26px;isolation:isolate}
.hotel-hero-scene{min-height:420px;position:relative;border-radius:25px;overflow:hidden;padding:62px 6% 115px;background:linear-gradient(90deg,rgba(15,23,48,.79),rgba(29,23,56,.33) 62%,rgba(20,29,53,.12)),url('https://images.unsplash.com/photo-1533105079780-92b9be482077?w=1600&q=84') center 47%/cover,linear-gradient(130deg,#1d304a,#a35c8b 65%,#f7ae84);color:#fff}
.hotel-hero-scene:before{content:"";inset:0;position:absolute;z-index:-1;pointer-events:none;background:url('./assets/hotel-hero-art.svg') center/cover;opacity:.25}
.hotel-hero-scene h1{font-size:clamp(40px,4.1vw,66px);max-width:580px;letter-spacing:-1.8px;margin:24px 0 15px;line-height:1.13}
.hotel-hero-scene h1 span{color:#ffcbce}
.hotel-hero-scene p{font-size:clamp(15px,1.3vw,19px);line-height:1.7;max-width:510px;color:#f4e8f3}
.hotel-eyebrow{display:inline-flex;gap:9px;align-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:8px 15px;border-radius:20px;font-weight:800;font-size:13px}
.hotel-hero-pills{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}.hotel-hero-pills span{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:10px;background:rgba(17,24,49,.35);font-size:12px}
.hotel-hero-showcase>.hotel-search-panel{position:absolute;left:4%;right:4%;bottom:0;z-index:5}
.hotel-search-premium{background:#fff;color:var(--hotel-ink);border:1px solid #ecedf7;border-radius:22px;padding:20px 23px 15px;box-shadow:var(--hotel-shadow);overflow:visible}
.hotel-search-premium .hotel-search-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:15px}
.hotel-search-premium .hotel-search-title h2{font-size:22px;margin:5px 0 4px;color:var(--hotel-ink);letter-spacing:-.3px}
.hotel-search-premium .hotel-search-title p{font-size:12px;color:var(--hotel-grey);margin:0;line-height:1.5}
.hotel-search-premium .hotel-label{background:#fff0f7;color:#e4489b;border-radius:100px;display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:5px 11px;font-weight:800}
.hotel-search-premium .hotel-main-fields{display:grid;grid-template-columns:minmax(180px,2.3fr) minmax(140px,1.15fr) minmax(140px,1.15fr) minmax(165px,1.55fr) minmax(155px,1.4fr);gap:9px;align-items:stretch}
.premium-search-bar{background:#fff;border:0}
.hotel-search-cell{min-width:0;position:relative;border:1px solid #e8eaf3;border-radius:13px;background:#f9fafd;display:flex;flex-direction:column;gap:5px;padding:10px 12px;text-align:start}
.hotel-search-cell:focus-within{border-color:#ce6ddf;box-shadow:0 0 0 3px rgba(191,87,243,.09)}
.hotel-search-premium .hotel-search-cell label,.hotel-search-premium label.hotel-search-cell{font-size:11px;font-weight:800;color:#617089}
.hotel-search-cell>label,.hotel-search-cell{line-height:1.2}.hotel-search-cell>label>svg,.hotel-search-cell>svg{width:15px;height:15px;display:inline-block;vertical-align:middle;color:#ff79c2;margin-inline-end:5px}
.hotel-search-cell input{background:transparent;border:0;box-shadow:none!important;border-radius:0;padding:0;min-height:26px;font-size:13px;max-width:100%;font-weight:800;color:#20294d}
.hotel-search-cell input:focus{border:0;outline:0;box-shadow:none}.hotel-search-cell input[type=date]{direction:ltr;text-align:right}
.hotel-search-cell input::placeholder{color:#97a0b3;font-weight:500}
.hotel-guest-toggle{display:flex;align-items:center;gap:7px;width:100%;min-height:27px;background:none;border:0;padding:0;color:#24324b;font-size:12px;font-weight:800;text-align:start}.hotel-guest-toggle span{flex:1}.hotel-guest-toggle svg{height:15px;width:15px;flex-shrink:0}
.hotel-search-premium .hotel-search-button{border-radius:13px;background:var(--hotel-gradient);box-shadow:0 10px 22px rgba(233,57,150,.19);min-height:64px;align-self:stretch;font-size:14px;white-space:normal;padding:8px 16px}
.hotel-search-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;flex-wrap:wrap}.hotel-more-toggle{display:flex;align-items:center;gap:8px;color:#ff79c2;background:none;border:0;font-size:12px;font-weight:700;padding:4px 0}
.hotel-advanced-fields{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 2px;border-top:1px solid #f0edf5;padding-top:14px}
.hotel-advanced-fields[hidden],.hotel-rooms-popover[hidden]{display:none!important}.hotel-advanced-fields select{background:#f9fafd;color:#22324f;border:1px solid #e9ecf3}
.hotel-rooms-popover{position:absolute;right:0;top:calc(100% + 11px);width:min(435px,calc(100vw - 45px));background:#fff;z-index:90;border:1px solid #e6e8f0;box-shadow:0 22px 52px rgba(27,25,73,.22);border-radius:20px;padding:16px;max-height:390px;overflow:auto;direction:rtl}
.hotel-rooms-popover .hotel-rooms-editor{background:transparent;padding:10px}.hotel-rooms-popover .hotel-room-row{display:flex;flex-wrap:wrap;padding:10px 0}.hotel-rooms-popover .hotel-room-row label{color:#435474}
.hotel-done{display:block;margin-inline-start:auto;background:var(--hotel-gradient)!important}
.hotel-search-premium .hotel-inline-link{font-size:12px;font-weight:800;color:#ff79c2;white-space:nowrap}
.hotel-suggestions{position:absolute;z-index:110;top:calc(100% + 6px);right:0;left:0;background:#fff;color:#223254;box-shadow:0 15px 35px rgba(11,25,55,.18);border-radius:12px;border:1px solid #e5e9f2;max-height:250px;overflow-y:auto}
.hotel-suggestions:empty{display:none}.hotel-suggestions button{width:100%;color:#223254;text-align:start;padding:10px;display:flex;align-items:center;gap:6px;background:none;border:0;border-bottom:1px solid #eef0f7;font-size:13px}.hotel-suggestions button:hover{background:#f9effe}
.hotel-popular{margin:20px 0 58px}.hotel-popular-heading{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:19px}.hotel-popular-heading h2{font-size:27px;color:var(--text);margin:6px 0 0}.hotel-popular-heading p{color:var(--muted);margin:3px 0 0;font-size:13px}.hotel-popular-heading .hotel-inline-link{font-size:12px;color:#ae38e8;font-weight:800}
.hotel-destinations-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.hotel-destination-tile{min-height:185px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;position:relative;overflow:hidden;color:#fff;border:0;border-radius:16px;padding:15px;background:linear-gradient(0deg,rgba(8,14,38,.88),rgba(14,25,59,.07) 70%),var(--destination-photo) center/cover,linear-gradient(130deg,#6b467e,#dab9a1);box-shadow:0 7px 18px rgba(33,30,66,.12);transition:transform .2s,box-shadow .2s;text-align:right}.hotel-destination-tile:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(44,36,98,.2)}.hotel-destination-tile span{font-weight:900;font-size:17px}.hotel-destination-tile small{font-size:11px;color:#eff0ff}
.hotel-social-section{background:var(--surface3)}.hotel-social-section .section-title{margin-bottom:30px}
/* Search subpage */
.hotel-public-main{padding:32px 0 80px}.hotel-public-page .hotel-public-main>.hotel-search-panel{margin:20px auto 0;max-width:1200px}.hotel-public-main>.hotel-search-panel .hotel-search-title h2{font-size:32px}.hotel-public-page .topbar{background:var(--surface)}
.hotel-content{max-width:1320px;margin:auto}.hotel-results-page{color:var(--text)}.hotel-results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;background:var(--surface);padding:12px 16px;border:1px solid var(--border);border-radius:16px;margin-bottom:26px}.hotel-results-location{display:flex;align-items:center;gap:11px}.hotel-results-icon{border-radius:12px;width:42px;height:42px;display:grid;place-items:center;background:#faf0ff;color:#9c3af0}.hotel-results-location strong{font-size:16px}.hotel-results-location small{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.hotel-result-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:13px;margin-bottom:16px}.hotel-result-controls h1{font-size:26px;margin:0 0 5px}.hotel-result-controls p{font-size:13px;color:var(--muted);margin:0}.hotel-result-control-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.hotel-result-control-actions>label{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}.hotel-result-control-actions select{min-width:146px;min-height:41px;padding:8px 12px;background:var(--surface)}.hotel-view-toggle{display:flex;gap:4px;background:var(--surface2);padding:4px;border-radius:12px}.hotel-view-toggle button{padding:9px 12px;border-radius:9px;border:0;background:transparent;color:var(--text);font-weight:800;display:flex;gap:6px;align-items:center}.hotel-view-toggle button.selected{background:var(--hotel-gradient);color:#fff}
.hotel-results-body{display:grid;grid-template-columns:245px minmax(0,1fr);gap:20px;align-items:start}.hotel-filter-panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:17px;position:sticky;top:106px}.hotel-filter-head{display:flex;justify-content:space-between;align-items:center}.hotel-filter-head h3{font-size:17px;margin:0}.hotel-text-button{background:none;border:0;color:#ff79c2;font-weight:700;font-size:12px}.hotel-filter-group{padding:17px 0;border-top:1px solid var(--border);margin-top:12px}.hotel-filter-group h4{font-size:13px;margin:0 0 13px;color:var(--text)}.hotel-filter-group h4 small,.hotel-filter-group>small{display:block;font-weight:500;color:var(--muted);font-size:11px;line-height:1.45;margin:5px 0}.hotel-filter-group input[type=number],.hotel-filter-group input[name=hotelFilterName]{font-size:13px;min-height:40px;padding:9px 12px}.hotel-check-row{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text);font-weight:500;margin:10px 0;cursor:pointer}.hotel-check-row input{width:16px;min-height:16px;height:16px;accent-color:#ff79c2;flex:0 0 auto}.hotel-check-row span{font-weight:650}
.hotel-listing{display:grid;gap:14px}.hotel-result-card{display:grid;grid-template-columns:minmax(195px,30%) minmax(175px,1fr) minmax(142px,175px);gap:0;border:1px solid var(--border);background:var(--surface);border-radius:18px;overflow:hidden;min-height:206px}.hotel-result-image{position:relative;min-height:206px;background:linear-gradient(145deg,#d7b4e7,#6d6c96)}.hotel-result-image>img{height:100%;width:100%;object-fit:cover}.hotel-image-fallback{height:100%;display:grid;place-content:center;justify-items:center;gap:8px;color:#fff;font-size:12px}.hotel-favorite{position:absolute;top:12px;left:12px;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:#aa53d5;box-shadow:0 4px 18px rgba(0,0,0,.16)}.hotel-favorite.is-favorite{color:#fa538e;background:#ffeff6}.hotel-result-info{min-width:0;padding:20px 16px;display:flex;align-items:start;flex-direction:column;gap:10px}.hotel-result-title{display:grid;gap:6px}.hotel-result-title h3{margin:0;font-size:19px;color:var(--text);line-height:1.25}.hotel-stars{color:#ff9c1e;letter-spacing:2px;font-size:14px}.hotel-result-address{color:var(--muted);display:flex;align-items:center;gap:5px;font-size:12px;line-height:1.45;margin:0}.hotel-result-address svg{flex-shrink:0;color:#ff79c2}.hotel-result-tags{display:flex;flex-wrap:wrap;gap:7px;margin:3px 0}.hotel-tag{border:0;background:var(--surface2);border-radius:9px;padding:7px 10px;font-size:11px;font-weight:700;color:var(--text)}.hotel-tag-green{background:#e9f8f1;color:#15835c}.hotel-result-info .tiny{margin:0}.hotel-result-book{padding:21px 16px;border-inline-start:1px solid var(--border);display:flex;align-items:stretch;justify-content:end;text-align:center;flex-direction:column;gap:9px}.hotel-result-book strong{font-size:24px;color:var(--text);line-height:1.1}.hotel-price-caption{font-size:11px;color:var(--muted)}.hotel-result-book .btn{background:var(--hotel-gradient);min-height:39px;padding:8px 8px;font-size:12px}
/* Map shows only true backend coordinates, never illustrative pins. */
.hotel-map-layout{display:grid;grid-template-columns:minmax(250px,38%) minmax(0,1fr);gap:13px;min-height:590px}.hotel-map-sidebar{overflow-y:auto;max-height:75vh;border-radius:14px;display:grid;gap:11px;align-content:start;padding:3px}.hotel-map-switch{border:1px solid var(--border);background:var(--surface);border-radius:13px;padding:13px;display:flex;gap:9px;align-items:center;font-size:13px}.hotel-map-sidebar .hotel-result-card{grid-template-columns:115px 1fr;min-height:140px}.hotel-map-sidebar .hotel-result-image{min-height:140px}.hotel-map-sidebar .hotel-result-info{padding:11px;gap:7px}.hotel-map-sidebar .hotel-result-book{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;padding:10px;gap:7px}.hotel-map-sidebar .hotel-result-book .btn{min-width:118px}.hotel-map-sidebar .hotel-result-book strong{font-size:15px}.hotel-map-sidebar .hotel-result-title h3{font-size:14px}.hotel-map-sidebar .hotel-result-info>.tiny,.hotel-map-sidebar .hotel-result-book .tiny,.hotel-map-sidebar .hotel-result-book .hotel-price-caption{display:none}.hotel-map-shell{min-height:580px;background:linear-gradient(120deg,#cbeafa,#f5f6ed);color:#344260;border-radius:17px;display:grid;place-items:center;text-align:center;padding:20px;border:1px solid var(--border);font-size:14px;font-weight:650;position:relative;z-index:0}.hotel-map-shell.leaflet-container{display:block;padding:0}.hotel-price-marker{background:#fff;border:1px solid #dcddf2;border-radius:16px;box-shadow:0 5px 13px #182c4855;padding:7px 5px;color:#4e2297;font-size:11px;font-weight:900;text-align:center;white-space:nowrap;width:auto!important;min-width:90px}.hotel-pin-popup strong{font-size:13px}.hotel-pin-popup p{font-size:11px;margin:3px 0 9px}
/* Details, room choice, and read-only checkout-preview */
.hotel-detail-top{margin:19px 0 18px}.hotel-detail-top h1{font-size:clamp(25px,3vw,33px)}.hotel-detail-top p{margin:0;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}.hotel-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:20px;align-items:start}.hotel-detail-gallery{display:grid;grid-template-columns:minmax(0,4fr) 140px;gap:9px;min-height:300px}.hotel-detail-hero{height:335px!important;border-radius:18px!important}.hotel-detail-photo-placeholder{border-radius:18px;background:linear-gradient(135deg,#a068b1,#2e375a);color:#fff;display:grid;place-content:center;justify-items:center;gap:10px}.hotel-gallery-small{display:flex;flex-direction:column;gap:9px}.hotel-gallery-small img{width:100%;height:106px;object-fit:cover;border-radius:12px}.hotel-gallery-small span{padding:20px;background:var(--surface2);border-radius:15px;font-size:13px;color:var(--muted)}.hotel-detail-tabs{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--border);margin:20px 0 20px}.hotel-detail-tabs a{padding:12px 6px;color:var(--hotel-ink);font-weight:800;font-size:13px}.hotel-detail-tabs a:hover{color:#a741ef}.hotel-detail-main h2{font-size:23px}.hotel-info-panel{background:var(--surface);border:1px solid var(--border);border-radius:17px;padding:22px;margin-bottom:25px}.hotel-info-panel p{color:var(--muted);font-size:14px}.hotel-detail-summary,.hotel-checkout-summary{border:1px solid var(--border);background:var(--surface);border-radius:19px;padding:21px;position:sticky;top:104px;box-shadow:0 8px 28px rgba(25,31,69,.045)}.hotel-detail-summary h2{font-size:26px;margin:8px 0 3px}.hotel-detail-summary .small{margin-bottom:17px}.hotel-summary-row{display:flex;gap:11px;align-items:center;padding:13px 0;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}.hotel-summary-row svg{color:#ff79c2}.hotel-summary-row strong{display:block;color:var(--text);font-size:12px;margin-top:4px}.hotel-detail-summary>a.btn{width:100%;margin-top:15px;background:var(--hotel-gradient)}.hotel-rooms-grid{display:grid;gap:15px}.hotel-room-choice{display:grid;grid-template-columns:175px minmax(0,1fr) 175px;overflow:hidden;border-radius:17px;border:1px solid var(--border);background:var(--surface);min-height:161px}.hotel-room-picture{background:linear-gradient(130deg,#e6caf2,#a8bdcf);display:grid;place-items:center;color:#fff}.hotel-room-picture img{width:100%;height:100%;object-fit:cover}.hotel-room-description{padding:17px;display:flex;flex-direction:column;gap:6px}.hotel-room-description h3{font-size:18px;margin:0}.hotel-room-description p{margin:0;color:var(--muted);font-size:12px}.hotel-room-select{padding:19px 14px;border-inline-start:1px solid var(--border);display:flex;flex-direction:column;align-items:start;justify-content:center;gap:6px}.hotel-room-select strong{font-size:19px}.hotel-room-select small{font-size:11px;color:var(--muted)}.hotel-room-select .btn{margin-top:8px;background:var(--hotel-gradient)}.hotel-room-heading{margin:21px 0 22px}.hotel-room-heading h1{font-size:32px}.hotel-room-heading p{color:var(--muted)}.hotel-checkout-steps{display:flex;justify-content:space-around;flex-wrap:wrap;gap:10px;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);margin:18px 0 24px;font-weight:800;color:var(--muted)}.hotel-checkout-steps .done,.hotel-checkout-steps .current{color:#a436e2}.hotel-checkout-columns{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px}.hotel-guest-preview{border:1px solid var(--border);background:var(--surface);padding:26px;border-radius:18px}.hotel-guest-preview h1{font-size:28px}.hotel-guest-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px;opacity:.58;margin-bottom:22px}.hotel-guest-wide{grid-column:span 2}.hotel-guest-fields label{font-size:12px}.hotel-guest-fields input{margin-top:6px;font-weight:500}.hotel-checkout-summary h3{font-size:21px}.hotel-checkout-summary strong{font-size:20px}.hotel-checkout-summary p{font-size:13px;color:var(--muted)}.hotel-summary-divider{height:1px;background:var(--border);margin:18px 0}
:root[data-theme=dark] .hotel-search-premium{background:#18243b;border-color:#33415b;color:#f2f5ff}:root[data-theme=dark] .hotel-search-premium .hotel-search-title h2{color:#fff}:root[data-theme=dark] .hotel-search-cell{background:#21314a;border-color:#394767}:root[data-theme=dark] .hotel-search-cell input,:root[data-theme=dark] .hotel-guest-toggle{color:#fff}:root[data-theme=dark] .hotel-advanced-fields select,:root[data-theme=dark] .hotel-rooms-popover{background:#18243b;color:#fff}:root[data-theme=dark] .hotel-search-cell>label,:root[data-theme=dark] .hotel-search-cell{color:#c5d2e6}:root[data-theme=dark] .hotel-suggestions{background:#17263f;color:#fff}:root[data-theme=dark] .hotel-suggestions button{color:#fff}
@media(max-width:1150px){.hotel-search-premium .hotel-main-fields{grid-template-columns:1.5fr 1fr 1fr}.hotel-guests-cell{grid-column:1/3}.hotel-search-premium .hotel-search-button{min-height:60px}.hotel-destinations-grid{grid-template-columns:repeat(3,1fr)}.hotel-hero-showcase{min-height:660px}.hotel-results-body{grid-template-columns:215px minmax(0,1fr)}.hotel-result-card{grid-template-columns:185px minmax(0,1fr)}.hotel-result-book{grid-column:1/-1;border-inline-start:0;border-top:1px solid var(--border);flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px}.hotel-result-book .btn{max-width:180px}.hotel-detail-layout{grid-template-columns:1fr 250px}}
@media(max-width:800px){.hotel-home-container{width:min(100%,calc(100% - 24px));padding-top:8px}.hotel-hero-showcase{min-height:auto;padding:0}.hotel-hero-scene{min-height:300px;padding:38px 6% 72px}.hotel-hero-scene h1{font-size:43px}.hotel-hero-showcase>.hotel-search-panel{position:relative;inset:auto;width:calc(100% - 24px);margin:-46px auto 0}.hotel-search-premium .hotel-main-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.hotel-dest-field{grid-column:1/-1}.hotel-guests-cell{grid-column:auto}.hotel-search-premium .hotel-search-button{min-height:56px}.hotel-popular{margin-top:30px}.hotel-results-body{display:flex;flex-direction:column}.hotel-filter-panel{position:static;width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 13px}.hotel-filter-head{grid-column:1/-1}.hotel-filter-group{margin-top:0}.hotel-results-list{width:100%}.hotel-map-layout{grid-template-columns:1fr}.hotel-map-sidebar{max-height:320px}.hotel-map-shell{min-height:490px}.hotel-detail-layout,.hotel-checkout-columns{grid-template-columns:1fr}.hotel-detail-summary{position:static;order:-1}.hotel-detail-gallery{grid-template-columns:1fr 115px}.hotel-checkout-summary{position:static}}
@media(max-width:550px){.hotel-search-premium{padding:15px;border-radius:18px}.hotel-search-premium .hotel-main-fields{grid-template-columns:1fr 1fr;gap:9px}.hotel-search-premium .hotel-search-title{display:block}.hotel-search-premium .hotel-search-title h2{font-size:20px}.hotel-search-premium .hotel-search-title p{font-size:11px}.hotel-search-premium .hotel-search-title .hotel-inline-link{display:none}.hotel-search-premium .hotel-search-button{grid-column:1/-1}.hotel-guests-cell{grid-column:1/-1}.hotel-advanced-fields{grid-template-columns:1fr}.hotel-hero-scene{min-height:280px;padding:34px 22px 65px}.hotel-hero-scene h1{font-size:33px}.hotel-hero-scene p{font-size:13px}.hotel-hero-pills{display:none}.hotel-destinations-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hotel-destination-tile{min-height:146px}.hotel-popular-heading h2{font-size:22px}.hotel-popular-heading p{font-size:11px}.hotel-results-toolbar{flex-wrap:wrap}.hotel-result-controls{align-items:flex-start}.hotel-result-controls h1{font-size:24px}.hotel-filter-panel{grid-template-columns:1fr}.hotel-result-card{grid-template-columns:1fr}.hotel-result-image{min-height:180px;max-height:220px}.hotel-result-image>img{height:220px}.hotel-result-book{display:flex}.hotel-room-choice{grid-template-columns:105px 1fr}.hotel-room-picture{min-height:145px}.hotel-room-description{padding:12px}.hotel-room-description h3{font-size:15px}.hotel-room-select{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:1px solid var(--border);border-inline-start:0;padding:12px}.hotel-room-select .btn{margin:0}.hotel-detail-gallery{grid-template-columns:1fr}.hotel-gallery-small{display:none}.hotel-checkout-steps{font-size:11px}.hotel-guest-fields{grid-template-columns:1fr}.hotel-guest-wide{grid-column:auto}.hotel-popular-heading .hotel-inline-link{display:none}}
.hotel-detail-tabs button{background:transparent;border:0;color:var(--text);font-weight:800;font-size:13px;padding:13px 8px}.hotel-detail-tabs button:hover{color:#a741ef}.hotel-detail-summary button.btn{width:100%;margin-top:15px;background:var(--hotel-gradient)}
.hotel-osm-tile{position:absolute!important;width:256px!important;height:256px!important;max-width:none!important;object-fit:cover;pointer-events:none}.hotel-osm-marker{position:absolute;transform:translate(-50%,-50%);z-index:2;border:1px solid #dcd1f6;background:#fff;border-radius:18px;padding:8px 10px;font-size:12px;font-weight:900;color:#6824a6;white-space:nowrap;box-shadow:0 5px 13px #13254850;max-width:130px;overflow:hidden;text-overflow:ellipsis}.hotel-osm-marker:hover{z-index:5;background:var(--hotel-gradient);color:#fff}.hotel-osm-zoom{position:absolute;left:15px;bottom:42px;z-index:5;display:flex;flex-direction:column;box-shadow:0 4px 14px #13254835;background:#fff;border-radius:10px;overflow:hidden}.hotel-osm-zoom button{width:39px;height:37px;color:#333;border:0;border-bottom:1px solid #eee;background:#fff;font-weight:900;font-size:21px}.hotel-osm-attribution{position:absolute;bottom:4px;right:8px;z-index:5;color:#172443;background:#ffffffcd;padding:2px 5px;border-radius:3px;font-size:10px}
.hotel-page-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 10px;margin-top:6px;color:var(--muted);font-size:12px}.hotel-page-controls button{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:9px 17px;font-weight:800}.hotel-page-controls button:hover:not(:disabled){border-color:#af57ed;color:#9e3ddf}.hotel-rooms-header{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.hotel-rooms-header h2,.hotel-rooms-header p{margin-bottom:5px}
/* A local vector fallback remains visible if third-party destination photography is unavailable. */
.hotel-hero-scene{background:linear-gradient(90deg,rgba(15,23,48,.79),rgba(29,23,56,.33) 62%,rgba(20,29,53,.12)),url('https://images.unsplash.com/photo-1533105079780-92b9be482077?w=1600&q=84') center 47%/cover,url('./assets/hotel-hero-art.svg') center/cover,linear-gradient(130deg,#1d304a,#a35c8b 65%,#f7ae84)}
.hotel-hero-scene:before{display:none}

/* Hotel UI polish V2.3.1 — readability, layout, contrast, supplier descriptions */
.hotel-content{max-width:1400px;width:100%;margin-inline:auto}
.hotel-detail-page,.hotel-results-page,.hotel-room-page{font-size:15px}
.hotel-description-copy{white-space:pre-line;overflow-wrap:anywhere;line-height:1.85;max-width:78ch;font-size:14px!important;color:var(--text)!important}
.hotel-description-more{border-top:1px solid var(--border);padding-top:12px;margin-top:16px}
.hotel-description-more>summary{color:var(--primary);font-weight:800;cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px}
.hotel-description-more>summary::before{content:'+';font-size:20px;line-height:1}
.hotel-description-more[open]>summary::before{content:'−'}
.hotel-description-more>summary::-webkit-details-marker{display:none}
.hotel-description-more>p{margin:14px 0 0}
.hotel-info-panel{padding:25px 28px;border-radius:18px}
.hotel-info-panel h2{margin:0 0 14px}
.hotel-detail-gallery{min-height:320px;grid-template-columns:minmax(0,1fr) 125px}
.hotel-detail-hero{min-height:330px;max-height:445px;object-fit:cover}
.hotel-gallery-small{max-height:445px;overflow-y:auto}
.hotel-detail-layout{grid-template-columns:minmax(0,1fr) 270px;gap:24px}
.hotel-detail-summary{top:92px}
.hotel-rooms-header{margin-block:25px 15px}
.hotel-room-choice{grid-template-columns:180px minmax(0,1fr) 170px;min-height:176px}
.hotel-room-picture{min-height:176px;background:linear-gradient(145deg,#392045,#1b2a42)}
.hotel-room-no-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:11px;height:100%;min-height:176px;padding:16px;color:#dbd5eb}
.hotel-room-no-photo span{font-size:12px;line-height:1.5;max-width:130px}
.hotel-room-description{padding:20px 22px;gap:11px}
.hotel-room-description h3{font-size:18px}
.hotel-room-description p{font-size:14px;line-height:1.6}
.hotel-room-select{padding:20px}
.hotel-results-body{grid-template-columns:245px minmax(0,1fr);gap:21px}
.hotel-result-card{grid-template-columns:clamp(205px,29%,280px) minmax(0,1fr) 176px;min-height:210px}
.hotel-result-image{min-height:210px}
.hotel-result-info{padding:22px;gap:13px}
.hotel-result-info h3{font-size:19px}
.hotel-result-address,.hotel-result-info .tiny{font-size:13px}
.hotel-result-book{padding:20px 18px}
.hotel-result-book .btn{font-size:13px;min-height:43px}
.hotel-search-premium{padding:24px 25px 19px}
.hotel-search-premium .hotel-search-title h2{font-size:25px}
.hotel-search-premium .hotel-search-title p{font-size:14px}
.hotel-search-premium .hotel-search-cell label,.hotel-search-premium label.hotel-search-cell{font-size:13px}
.hotel-search-premium .hotel-main-fields{gap:11px}
.hotel-search-premium input,.hotel-search-premium .hotel-guest-toggle{font-size:14px}
.hotel-search-premium .hotel-label{font-size:12px}
.hotel-hero-showcase{height:auto;min-height:0;padding-bottom:0}
.hotel-hero-scene{min-height:385px;padding-bottom:85px}
.hotel-hero-showcase>.hotel-search-panel{position:relative;inset:auto;width:calc(100% - 8%);margin:-64px auto 0;z-index:8}
.hotel-popular{margin-top:48px}
.hotel-advanced-fields[hidden],.hotel-rooms-popover[hidden]{display:none!important}
:root[data-theme=dark] .hotel-description-copy{color:#e0e7f7!important}
:root[data-theme=dark] .hotel-description-more>summary{color:#ff79c2}
@media (min-width:1350px){.hotel-content{max-width:1500px}.hotel-results-body{grid-template-columns:255px minmax(0,1fr)}.main-content{max-width:1660px}}
@media (max-width:1180px){.hotel-result-card{grid-template-columns:195px minmax(0,1fr)}.hotel-result-book{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;border-inline-start:0;border-top:1px solid var(--border)}.hotel-detail-layout{grid-template-columns:minmax(0,1fr) 235px}.hotel-hero-scene{min-height:355px}.hotel-search-premium .hotel-main-fields{grid-template-columns:1.5fr 1fr 1fr}.hotel-guests-cell{grid-column:1/3}}
@media (max-width:850px){.hotel-results-body{display:flex;flex-direction:column}.hotel-detail-layout{grid-template-columns:1fr}.hotel-detail-summary{position:static;order:-1}.hotel-hero-scene{min-height:320px;padding-bottom:80px}.hotel-hero-showcase>.hotel-search-panel{width:calc(100% - 24px);margin:-46px auto 0}.hotel-search-premium .hotel-main-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.hotel-dest-field{grid-column:1/-1}.hotel-guests-cell{grid-column:auto}.hotel-room-choice{grid-template-columns:155px minmax(0,1fr)}.hotel-room-select{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:1px solid var(--border);border-inline-start:0}}
@media (max-width:550px){.hotel-hero-scene{min-height:295px}.hotel-search-premium{padding:17px}.hotel-search-premium .hotel-main-fields{grid-template-columns:1fr 1fr}.hotel-search-premium .hotel-search-button,.hotel-guests-cell,.hotel-dest-field{grid-column:1/-1}.hotel-search-premium .hotel-search-title h2{font-size:21px}.hotel-search-premium .hotel-search-title p{font-size:13px}.hotel-info-panel{padding:18px}.hotel-detail-gallery{grid-template-columns:1fr}.hotel-detail-hero{min-height:230px}.hotel-gallery-small{display:none}.hotel-result-card{grid-template-columns:1fr}.hotel-result-info{padding:17px}.hotel-result-book{display:flex}.hotel-room-choice{grid-template-columns:110px minmax(0,1fr)}.hotel-room-description{padding:13px}.hotel-room-description h3{font-size:16px}.hotel-room-description p{font-size:12px}.hotel-room-picture,.hotel-room-no-photo{min-height:145px}.hotel-room-select{padding:12px}.hotel-description-copy{font-size:13px!important}}


/* V2.3.2: Consistent dark/light hotel search, guest picker and MapLibre map. */
.hotel-search-premium .premium-search-bar{background:transparent!important;gap:10px}
.hotel-search-premium .hotel-search-cell{background:var(--surface3);border:1px solid var(--border);border-radius:13px;color:var(--text);min-height:66px}
.hotel-search-premium .hotel-search-cell input,.hotel-search-premium .hotel-guest-toggle{color:var(--text)}
.hotel-search-premium .hotel-search-cell label,.hotel-search-premium label.hotel-search-cell{color:var(--muted)}
.hotel-search-premium .hotel-search-cell:focus-within{border-color:#cb68e9;box-shadow:0 0 0 3px rgba(203,104,233,.13)}
.hotel-search-premium .hotel-advanced-fields{border-top-color:var(--border)}
.hotel-search-premium .hotel-advanced-fields select{background:var(--surface3);border-color:var(--border);color:var(--text)}
.hotel-search-premium .hotel-rooms-popover{background:var(--surface);border:1px solid var(--border);color:var(--text);width:min(420px,calc(100vw - 40px));padding:20px;max-height:min(70vh,530px);box-shadow:0 18px 60px rgba(0,0,0,.24);overflow-y:auto;text-align:right;right:0;left:auto}
.hotel-search-premium .hotel-rooms-editor,.hotel-search-premium .hotel-room-row{background:transparent!important;color:var(--text)!important}
.hotel-search-premium .hotel-rooms-head{display:grid;gap:6px;margin-bottom:14px}
.hotel-search-premium .hotel-rooms-head strong{font-size:17px}
.hotel-search-premium .hotel-rooms-head .muted{font-size:11px;line-height:1.5}
.hotel-search-premium .hotel-rooms-list{display:grid;gap:11px}
.hotel-search-premium .hotel-room-row{display:block;border:1px solid var(--border);padding:14px;border-radius:14px;background:var(--surface3)!important}
.hotel-search-premium .hotel-room-row-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}
.hotel-search-premium .hotel-room-row-header strong{font-size:14px}
.hotel-search-premium .hotel-room-delete{background:none;border:0;color:#f26b80;font-weight:700;font-size:12px}
.hotel-search-premium .hotel-room-counters{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hotel-search-premium .hotel-guest-counter{display:grid;gap:7px}
.hotel-search-premium .hotel-counter-label{font-size:12px;color:var(--muted);font-weight:700}
.hotel-search-premium .hotel-counter-actions{display:flex;align-items:center;justify-content:space-between;gap:5px;direction:ltr;border:1px solid var(--border);background:var(--surface);padding:4px;border-radius:12px}
.hotel-search-premium .hotel-counter-actions button{border:0;width:30px;height:30px;border-radius:9px;background:var(--surface2);color:var(--text);font-size:20px;font-weight:800;display:grid;place-items:center;line-height:1}
.hotel-search-premium .hotel-counter-actions button:not(:disabled):hover{background:var(--primary-soft);color:var(--primary)}
.hotel-search-premium .hotel-counter-actions button:disabled{opacity:.27}
.hotel-search-premium .hotel-counter-actions output{min-width:25px;text-align:center;color:var(--text);font-weight:900;font-size:15px}
.hotel-search-premium .hotel-child-ages{display:grid;gap:9px;margin-top:15px;padding-top:12px;border-top:1px solid var(--border)}
.hotel-search-premium .hotel-child-ages>strong{font-size:12px}
.hotel-search-premium .hotel-child-ages>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hotel-search-premium .hotel-child-ages label{font-size:11px!important;color:var(--muted)!important;display:grid!important;gap:5px}
.hotel-search-premium .hotel-child-ages select{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:9px!important;color:var(--text)!important;width:100%;height:39px;font-size:12px}
.hotel-search-premium .hotel-rooms-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:13px 0}
.hotel-search-premium .hotel-add-room{border:1px solid var(--border);background:var(--primary-soft);color:var(--primary);font-size:12px;padding:8px 12px;border-radius:10px;font-weight:800}
.hotel-search-premium .hotel-done{width:100%;min-height:42px;margin:0!important}
:root[data-theme=dark] .hotel-search-premium{background:#17243a;border-color:#344560}
:root[data-theme=dark] .hotel-search-premium .premium-search-bar{background:transparent!important}
:root[data-theme=dark] .hotel-search-premium .hotel-search-cell{background:#23344f;border-color:#3a4f6e;color:#f5f6ff}
:root[data-theme=dark] .hotel-search-premium .hotel-search-cell input,
:root[data-theme=dark] .hotel-search-premium .hotel-guest-toggle{color:#fff}
:root[data-theme=dark] .hotel-search-premium .hotel-advanced-fields select{background:#23344f;color:#fff;border-color:#3a4f6e}
:root[data-theme=dark] .hotel-search-premium .hotel-rooms-popover{background:#17243a;color:#f5f6ff;border-color:#405472}
:root[data-theme=dark] .hotel-search-premium .hotel-room-row{background:#1d2e49!important;border-color:#3c516c}
:root[data-theme=dark] .hotel-search-premium .hotel-counter-actions{background:#16253d;border-color:#415574}
:root[data-theme=dark] .hotel-search-premium .hotel-counter-actions button{background:#253b59;color:#f9f5ff}
:root[data-theme=dark] .hotel-search-premium .hotel-child-ages select{background:#16253d!important;border-color:#425672!important;color:#fff!important}
.hotel-map-shell{position:relative;isolation:isolate;overflow:hidden;min-height:530px;background:#dce9f1}
.hotel-map-canvas{position:absolute;inset:0;min-height:100%}
.hotel-map-price-marker{background:#fff;border:1px solid #ddccec;color:#7522a7;padding:8px 11px;font-size:12px;font-weight:900;border-radius:28px;box-shadow:0 5px 17px rgba(29,27,65,.17);white-space:nowrap;cursor:pointer;direction:ltr}
.hotel-map-price-marker:hover,.hotel-map-price-marker:focus-visible{background:linear-gradient(95deg,#ad3af6,#ff68b6 55%,#fd895d);border-color:transparent;color:#fff;z-index:2}
.hotel-map-unavailable{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px;background:linear-gradient(145deg,#e9eaf6,#d1d8ea);color:#263046}
.hotel-map-unavailable h3{margin:0;font-size:18px}
.hotel-map-unavailable p{max-width:400px;font-size:13px;line-height:1.8;margin:0;color:#526078}
.hotel-map-unavailable-icon{color:#aa52dd}
.hotel-map-unavailable .btn{margin-top:8px}
@media(max-width:850px){.hotel-search-premium .hotel-rooms-popover{right:0;left:auto}}
@media(max-width:580px){.hotel-search-premium .hotel-rooms-popover{position:fixed;bottom:14px;left:14px;right:14px;top:auto;width:auto;max-height:75vh;border-radius:20px;z-index:200}.hotel-search-premium .hotel-room-counters{gap:9px}}

/* V2.3.4: premium hotel filter slider, quiet wishlist button and interactive map popup. */
.hotel-price-slider-group .hotel-price-slider-head{display:flex;justify-content:space-between;align-items:center;gap:9px;margin:5px 0 12px;direction:ltr;font-size:12px;font-weight:750}
.hotel-price-slider-head output{color:var(--text);font-weight:900}
.hotel-price-slider-group input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:7px;min-height:7px;padding:0;border:0;border-radius:999px;background:linear-gradient(to right,#ab38ec 0%,#fd7493 var(--range-fill,100%),var(--border) var(--range-fill,100%),var(--border) 100%);outline:none;cursor:pointer;direction:ltr;margin:15px 0 17px}
.hotel-price-slider-group input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;border:3px solid var(--surface);border-radius:50%;background:#db4ec5;box-shadow:0 0 0 1px #ac42ef,0 3px 8px rgba(71,24,83,.22);cursor:grab}
.hotel-price-slider-group input[type=range]::-moz-range-thumb{width:15px;height:15px;border:3px solid var(--surface);border-radius:50%;background:#db4ec5;box-shadow:0 0 0 1px #ac42ef;cursor:grab}
.hotel-price-slider-group input[type=range]:focus-visible{outline:3px solid #ab38ec;outline-offset:7px}
.hotel-favorite{width:35px;height:35px;border-radius:11px;background:rgba(255,255,255,.95);color:#4f4b67;box-shadow:0 4px 16px rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.8)}
.hotel-favorite svg{height:20px;width:20px;stroke-width:2;fill:none;transition:fill .2s,color .2s}
.hotel-favorite:hover,.hotel-favorite:focus-visible{color:#e64c98;transform:translateY(-1px)}
.hotel-favorite.is-favorite{background:#fff0f7;color:#e84c95;border-color:#ffc8e1}
.hotel-favorite.is-favorite svg{fill:#ff68a2;stroke:#e84c95}
.hotel-map-shell .maplibregl-popup{z-index:20}
.hotel-map-shell .maplibregl-popup-content{padding:0;border-radius:16px;overflow:hidden;box-shadow:0 15px 45px rgba(25,14,59,.27);background:#fff;color:#1a2441;direction:rtl}
.hotel-map-shell .maplibregl-popup-close-button{right:auto;left:7px;top:7px;width:27px;height:27px;font-size:20px;background:rgba(255,255,255,.94);border-radius:8px;color:#3a294a;z-index:1}
.hotel-map-shell .maplibregl-popup-tip{border-top-color:#fff}
.hotel-map-popover{width:243px;font-family:Tajawal,'DM Sans',system-ui,sans-serif;text-align:start}
.hotel-map-popover-img{width:100%;height:94px;object-fit:cover;display:block}
.hotel-map-popover-body{padding:12px 13px;display:grid;gap:4px}
.hotel-map-popover-body strong{font-size:14px;line-height:1.25;white-space:normal;overflow-wrap:anywhere;color:#1c2340}
.hotel-map-popover-body .hotel-stars{font-size:13px;line-height:1.15}
.hotel-map-popover-address{font-size:11px;color:#65708c;overflow-wrap:anywhere}
.hotel-map-popover-price{font-size:18px;font-weight:900;color:#822ac1;direction:ltr;text-align:start;unicode-bidi:plaintext}
.hotel-map-popover-body small{font-size:10px;color:#667085;line-height:1.4}
.hotel-map-details-btn{background:linear-gradient(95deg,#ac38f0,#ff68b6 55%,#fd895d);color:#fff;border:0;border-radius:10px;min-height:32px;padding:6px 10px;font:inherit;font-weight:800;cursor:pointer;margin-top:5px}
.hotel-map-details-btn:hover{filter:brightness(1.08)}
@media(max-width:600px){.hotel-map-popover{width:195px}.hotel-map-popover-img{height:72px}.hotel-map-popover-body{padding:9px}.hotel-map-popover-price{font-size:16px}}


/* V2.3.5 — map is always light; no floating currency labels on individual pins. */
.hotel-map-shell,:root[data-theme=dark] .hotel-map-shell{background:#e6edf1;color:#22334d;color-scheme:light}
.hotel-map-shell .maplibregl-map,:root[data-theme=dark] .hotel-map-shell .maplibregl-map{filter:none!important;mix-blend-mode:normal!important}
.hotel-map-shell .maplibregl-popup-content,:root[data-theme=dark] .hotel-map-shell .maplibregl-popup-content{color:#1a2441;background:#fff}
.hotel-map-sidebar .hotel-map-list-card{display:grid;grid-template-columns:116px minmax(0,1fr);min-height:165px;overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--surface);align-items:stretch;direction:rtl}
.hotel-map-list-photo{position:relative;min-height:165px;background:var(--surface2)}
.hotel-map-list-photo>img{width:100%;height:100%;min-height:165px;object-fit:cover}
.hotel-map-list-photo>.hotel-image-fallback{height:100%;min-height:165px;font-size:12px}
.hotel-map-list-photo .hotel-favorite{left:8px;top:8px;width:32px;height:32px}
.hotel-map-list-body{padding:12px 12px 11px;display:flex;flex-direction:column;gap:5px;min-width:0;text-align:start}
.hotel-map-list-body h3{font-size:13px;font-weight:900;line-height:1.45;margin:0;overflow-wrap:anywhere}
.hotel-map-list-body .hotel-stars{font-size:13px;letter-spacing:.5px}
.hotel-map-list-body .hotel-result-address{font-size:11px;max-width:100%;overflow-wrap:anywhere;line-height:1.35}
.hotel-map-list-bottom{display:flex;justify-content:space-between;align-items:end;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.hotel-map-list-price{min-width:0;display:grid;gap:3px;justify-items:start}
.hotel-map-list-price small{font-size:10px;color:var(--muted)}
.hotel-map-list-price strong{font-size:15px;line-height:1.3;font-weight:900;color:var(--text);direction:ltr;text-align:start;unicode-bidi:isolate;white-space:normal;overflow-wrap:anywhere}
.hotel-map-sidebar .hotel-map-list-cta{font-size:11px;min-height:35px;padding:8px 11px;width:auto;white-space:nowrap;flex-shrink:0;border-radius:10px}
.hotel-map-sidebar .hotel-map-list-cta svg{width:13px;height:13px}
@media(max-width:1150px){.hotel-map-sidebar .hotel-map-list-card{grid-template-columns:92px minmax(0,1fr)}.hotel-map-list-photo,.hotel-map-list-photo>img{min-height:178px}.hotel-map-list-body{padding:10px 9px}}
@media(max-width:800px){.hotel-map-sidebar .hotel-map-list-card{grid-template-columns:116px minmax(0,1fr)}.hotel-map-list-photo,.hotel-map-list-photo>img{min-height:160px}}
@media(max-width:480px){.hotel-map-sidebar .hotel-map-list-card{grid-template-columns:95px minmax(0,1fr)}.hotel-map-list-price strong{font-size:14px}.hotel-map-list-bottom{gap:6px}}

/* V2.3.6 — favorite, expandable guest selector, supplier photo gallery and amenities */
.hotel-result-image .hotel-favorite,.hotel-map-list-photo .hotel-favorite{
  position:absolute;top:11px;inset-inline-end:11px;inset-inline-start:auto;left:auto;right:auto;
  display:grid;place-items:center;width:33px;height:33px;padding:0;min-height:33px;
  border:1px solid rgba(255,255,255,.68);border-radius:50%;
  background:rgba(13,23,42,.66);color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.2);
  backdrop-filter:blur(8px);z-index:3;transition:background .15s,transform .15s,color .15s;
}
.hotel-result-image .hotel-favorite svg,.hotel-map-list-photo .hotel-favorite svg{
  width:17px;height:17px;stroke:currentColor;stroke-width:1.85;fill:none;
}
.hotel-result-image .hotel-favorite:hover,.hotel-map-list-photo .hotel-favorite:hover,
.hotel-result-image .hotel-favorite:focus-visible,.hotel-map-list-photo .hotel-favorite:focus-visible{
  background:rgba(13,23,42,.86);color:#fff;transform:scale(1.06);
}
.hotel-result-image .hotel-favorite.is-favorite,.hotel-map-list-photo .hotel-favorite.is-favorite{
  background:#ed478e;color:#fff;border-color:#ffb4d8;
}
.hotel-result-image .hotel-favorite.is-favorite svg,.hotel-map-list-photo .hotel-favorite.is-favorite svg{fill:currentColor;stroke:currentColor}
.hotel-search-premium .hotel-rooms-inline,
:root[data-theme=dark] .hotel-search-premium .hotel-rooms-inline{
  position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  display:block;width:100%!important;max-width:none;max-height:none!important;overflow:visible;
  margin-top:13px;padding:18px 20px;border:1px solid var(--border);border-radius:17px;
  background:var(--surface2);box-shadow:none;direction:rtl;z-index:auto;
}
.hotel-search-premium .hotel-rooms-inline[hidden],
:root[data-theme=dark] .hotel-search-premium .hotel-rooms-inline[hidden]{display:none!important}
.hotel-search-premium .hotel-rooms-inline .hotel-rooms-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.hotel-search-premium .hotel-rooms-inline .hotel-rooms-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.hotel-search-premium .hotel-rooms-inline .hotel-room-row{margin:0;min-width:0}
.hotel-search-premium .hotel-rooms-inline .hotel-done{width:auto;min-width:155px;margin-inline-start:auto!important}
.hotel-search-premium .hotel-search-form{overflow:visible}
.hotel-hero-showcase{overflow:visible}
.hotel-detail-gallery{min-height:0;grid-template-columns:minmax(0,1fr) minmax(105px,170px);gap:10px;align-items:stretch}
.hotel-detail-gallery.hotel-gallery-single{grid-template-columns:1fr}
.hotel-gallery-primary,.hotel-detail-gallery>.hotel-detail-photo-placeholder{min-width:0;min-height:360px;overflow:hidden;border-radius:17px}
.hotel-gallery-primary>.hotel-detail-hero{height:100%!important;min-height:360px;max-height:490px;width:100%;object-fit:cover;border-radius:17px!important}
.hotel-detail-gallery .hotel-gallery-small{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:9px;max-height:490px;min-height:360px;overflow:hidden}
.hotel-gallery-thumb{display:block;width:100%;min-width:0;min-height:0;overflow:hidden;border:2px solid transparent;border-radius:12px;padding:0;background:var(--surface2);cursor:pointer}
.hotel-gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.hotel-gallery-thumb:hover,.hotel-gallery-thumb.selected{border-color:#c34bea}
.hotel-gallery-more{margin-top:12px}
.hotel-gallery-more summary{cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid var(--border);border-radius:10px;color:var(--primary);font-weight:800;list-style:none}
.hotel-gallery-more summary::-webkit-details-marker{display:none}
.hotel-gallery-all-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:12px}
.hotel-gallery-all-grid button{padding:0;min-height:100px;aspect-ratio:1.4;border:2px solid var(--border);border-radius:11px;overflow:hidden;cursor:pointer}
.hotel-gallery-all-grid button.selected,.hotel-gallery-all-grid button:hover{border-color:#c34bea}
.hotel-gallery-all-grid img{width:100%;height:100%;object-fit:cover;display:block}
.hotel-photos-note{margin:10px 0 0;font-size:12px;color:var(--muted)}
.hotel-detail-tabs{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-top:20px}
.hotel-amenities-panel{margin-top:18px}
.hotel-amenity-heading{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-bottom:15px}
.hotel-amenity-heading h2{margin-bottom:6px}
.hotel-amenity-heading p{font-size:13px;margin:0}
.hotel-amenity-count{white-space:nowrap;font-size:12px;border-radius:12px;padding:7px 12px;background:var(--primary-soft);color:var(--primary);font-weight:800}
.hotel-amenities-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.hotel-amenity{min-width:0;display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--text);padding:12px;font-size:13px;font-weight:700;overflow-wrap:anywhere}
.hotel-amenity svg{flex-shrink:0;color:#ff79c2;width:17px;height:17px}
.hotel-no-amenities{margin:0;font-size:13px}
@media(max-width:820px){
 .hotel-detail-gallery{grid-template-columns:minmax(0,1fr) 110px}
 .hotel-gallery-primary,.hotel-detail-gallery .hotel-gallery-small{min-height:270px}
 .hotel-gallery-primary>.hotel-detail-hero{min-height:270px}
 .hotel-amenities-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px){
 .hotel-search-premium .hotel-rooms-inline,:root[data-theme=dark] .hotel-search-premium .hotel-rooms-inline{position:relative!important;inset:auto!important;width:100%!important;margin-top:12px;padding:12px;border-radius:14px;box-shadow:none}
 .hotel-search-premium .hotel-rooms-inline .hotel-rooms-list{grid-template-columns:1fr}
 .hotel-search-premium .hotel-rooms-inline .hotel-done{width:100%}
 .hotel-detail-gallery{grid-template-columns:1fr}
 .hotel-gallery-primary,.hotel-gallery-primary>.hotel-detail-hero{min-height:220px;max-height:320px}
 .hotel-detail-gallery .hotel-gallery-small{display:grid;min-height:72px;max-height:90px;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr}
 .hotel-amenities-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .hotel-amenity{padding:10px 8px;font-size:12px}
}

/* V2.3.8 — Verified city-center distance, hotel/map hover sync, proper image gallery. */
.hotel-center-distance{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;color:var(--muted);font-size:11px;line-height:1.5;margin:3px 0;font-weight:700}
.hotel-center-distance svg{width:12px;height:12px;color:#b85bef;flex:none}
.hotel-map-list-card{transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}
.hotel-map-list-card.is-map-highlighted{border-color:#ce4ff0!important;box-shadow:0 0 0 2px rgba(203,74,235,.26),0 10px 22px rgba(124,43,172,.12);transform:translateY(-1px)}
.hotel-gallery-open{display:block;position:relative;width:100%;height:100%;min-height:280px;padding:0;border:0;cursor:zoom-in;background:transparent;overflow:hidden;border-radius:17px}
.hotel-gallery-primary .hotel-gallery-open img{width:100%;height:100%!important;max-height:490px;min-height:360px;object-fit:cover}
.hotel-gallery-open>span{position:absolute;bottom:15px;inset-inline-start:15px;display:inline-flex;gap:7px;align-items:center;padding:9px 15px;background:rgba(12,17,34,.87);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:12px;font-size:13px;font-weight:900}
.hotel-gallery-open>span svg{width:15px;height:15px}
.hotel-gallery-open:hover img{filter:brightness(.92)}
.hotel-photo-lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:clamp(10px,4vw,40px)}
.hotel-photo-backdrop{position:absolute;inset:0;background:rgba(4,8,18,.93);backdrop-filter:blur(9px)}
.hotel-photo-frame{position:relative;z-index:1;width:min(980px,100%);max-height:96vh;display:flex;flex-direction:column;gap:10px;color:#fff}
.hotel-photo-head{display:flex;align-items:center;gap:15px;justify-content:space-between;flex-wrap:wrap;padding:5px 8px;font-size:15px}
.hotel-photo-head strong{font-weight:900;min-width:0;overflow-wrap:anywhere}
.hotel-photo-head>button{width:36px;height:36px;border-radius:50%;color:#fff;background:#29283c;border:1px solid #5b556f;cursor:pointer}
.hotel-photo-stage{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:9px;align-items:center;min-height:0}
.hotel-photo-stage>img{width:100%;max-height:min(76vh,760px);object-fit:contain;min-height:0;border-radius:15px;background:#151521}
.hotel-photo-stage>button{font-size:30px;font-weight:800;min-width:0;width:42px;height:54px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:#29283c;color:#fff;cursor:pointer}
.hotel-photo-stage>button:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:580px){.hotel-gallery-primary .hotel-gallery-open img{min-height:220px;max-height:320px}.hotel-photo-stage{grid-template-columns:30px minmax(0,1fr) 30px;gap:2px}.hotel-photo-stage>button{width:30px;height:43px;font-size:24px}.hotel-photo-head{font-size:12px}}


/* Trippbo Hotels V2.3.9 — compact floating guest picker + branded date-range calendar */
.hotel-search-premium{overflow:visible!important}
.hotel-search-premium .hotel-search-form,.hotel-search-premium .hotel-main-fields,.hotel-hero-showcase{overflow:visible!important}
.hotel-search-premium .hotel-guests-cell{position:relative;z-index:20}
.hotel-search-premium .hotel-rooms-popover,
:root[data-theme=dark] .hotel-search-premium .hotel-rooms-popover{
 position:absolute!important;inset:auto 0 auto auto!important;top:calc(100% + 12px)!important;
 width:min(400px,calc(100vw - 32px))!important;max-width:none!important;
 margin:0!important;padding:16px!important;max-height:min(65vh,440px)!important;
 overflow-y:auto!important;overscroll-behavior:contain;z-index:1000!important;
 display:block!important;border-radius:18px!important;direction:rtl;
 box-shadow:0 22px 65px rgba(5,12,40,.36)!important;background:var(--surface)!important;
 border:1px solid var(--border)!important;color:var(--text)!important;
}
.hotel-search-premium .hotel-rooms-popover[hidden],
:root[data-theme=dark] .hotel-search-premium .hotel-rooms-popover[hidden]{display:none!important}
.hotel-search-premium .hotel-rooms-popover .hotel-rooms-list{display:grid!important;grid-template-columns:1fr!important;gap:10px}
.hotel-search-premium .hotel-rooms-popover .hotel-rooms-head{display:grid;gap:4px}
.hotel-search-premium .hotel-rooms-popover .hotel-done{width:100%;margin:12px 0 0!important}
.hotel-search-premium .hotel-rooms-popover .hotel-room-row{border:1px solid var(--border);padding:12px;background:var(--surface2)!important}
.hotel-search-premium .hotel-rooms-popover .hotel-room-counters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hotel-date-cell{cursor:default}
.hotel-date-toggle{border:0;background:transparent!important;padding:2px 0 0;color:var(--text)!important;min-height:25px;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:space-between;width:100%;gap:7px;cursor:pointer;text-align:start}
.hotel-date-toggle>span{white-space:nowrap;font-variant-numeric:tabular-nums}
.hotel-date-toggle svg{width:13px;height:13px;opacity:.7;transition:transform .2s}
.hotel-date-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.hotel-field-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--muted)}
.hotel-field-label svg{width:15px;height:15px;color:#ff79c2}
.hotel-date-popover{position:fixed;z-index:10050;width:348px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:20px;padding:17px;box-shadow:0 25px 70px rgba(7,13,41,.32);direction:rtl;max-height:calc(100dvh - 20px);overflow:auto;text-align:right}
.hotel-cal-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.hotel-cal-heading>div:first-child{display:grid;gap:5px}.hotel-cal-heading small{color:var(--muted);font-size:11px;font-weight:700}.hotel-cal-heading strong{font-weight:900;font-size:17px}
.hotel-cal-nav{display:flex;gap:5px}.hotel-cal-nav button{border:1px solid var(--border);background:var(--surface2);color:var(--text);width:34px;height:34px;border-radius:10px;display:grid;place-items:center}.hotel-cal-nav button:disabled{opacity:.35;cursor:default}.hotel-cal-nav .hotel-cal-next svg{transform:rotate(180deg)}
.hotel-cal-weekdays,.hotel-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center;gap:4px}.hotel-cal-weekdays{margin-bottom:7px}.hotel-cal-weekdays span{font-size:11px;font-weight:800;color:var(--muted);padding:6px 0}
.hotel-cal-grid button{width:100%;aspect-ratio:1;min-height:35px;display:grid;place-items:center;position:relative;border:0;border-radius:11px;background:transparent;color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.hotel-cal-grid button:hover:not(:disabled){background:var(--primary-soft);color:var(--primary)}
.hotel-cal-grid button:disabled{opacity:.3;cursor:not-allowed}.hotel-cal-grid button.is-in-range{border-radius:7px;background:var(--primary-soft);color:var(--text)}
.hotel-cal-grid button.is-checkin,.hotel-cal-grid button.is-checkout{background:linear-gradient(110deg,#ad3af6,#ff68b6 55%,#fd895d);color:#fff!important;box-shadow:0 5px 10px rgba(179,62,190,.25)}
.hotel-cal-grid button.is-today:not(.is-checkin):not(.is-checkout){outline:1px solid #cf76dc;outline-offset:-2px}
.hotel-cal-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;margin-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}
.hotel-cal-footer span{display:flex;align-items:center;gap:6px}.hotel-cal-footer button{border:1px solid var(--border);border-radius:9px;background:var(--surface2);color:var(--text);font-size:12px;font-weight:800;padding:7px 12px}
@media(max-width:580px){
 .hotel-date-popover{top:auto!important;bottom:12px!important;left:12px!important;right:12px!important;width:auto!important;max-height:min(85dvh,460px);padding:16px}
 .hotel-search-premium .hotel-rooms-popover,:root[data-theme=dark] .hotel-search-premium .hotel-rooms-popover{
  position:fixed!important;top:auto!important;left:12px!important;right:12px!important;bottom:12px!important;width:auto!important;max-height:min(80dvh,520px)!important;z-index:10030!important
 }
}

/* Keep floating pickers above the destination images on the landing page. */
.hotel-hero-showcase{z-index:3}
.hotel-popular{position:relative;z-index:1}
.hotel-search-premium .hotel-guests-cell:has(.hotel-rooms-popover:not([hidden])){z-index:35}
@media(prefers-reduced-motion:reduce){.hotel-date-popover,.hotel-rooms-popover{animation:none!important;transition:none!important}}

/* Legal pages use the existing Trippbo palette and are public without authentication. */
.legal-main{padding:65px 0 90px;max-width:920px}.legal-main>h1{margin:18px 0 28px}.legal-panel{background:var(--surface);border:1px solid var(--border);padding:clamp(24px,5vw,52px);border-radius:24px;box-shadow:var(--shadow)}.legal-panel h2{margin:0 0 8px}.legal-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:2;font-size:16px;unicode-bidi:plaintext;margin-top:32px}.legal-footer-links{display:inline-flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}.legal-footer-links a{color:var(--muted);font-size:13px;text-decoration:none}.legal-footer-links a:hover,.legal-footer-links a:focus-visible{color:var(--primary);text-decoration:underline}.legal-site{min-height:100vh;display:flex;flex-direction:column}.legal-site main{flex:1}.legal-site .landing-footer .container{flex-wrap:wrap}.app-footer .legal-footer-links{margin-inline-start:12px}.landing-footer .legal-footer-links{margin-inline-start:auto}@media(max-width:650px){.legal-main{padding:35px 0 65px}.legal-footer-links{gap:10px}.app-footer .legal-footer-links{display:flex;margin:12px 0 0}}

.hotel-public-footer,.auth-legal-footer{padding:28px 16px;text-align:center;border-top:1px solid var(--border)}

/* Trippbo Hotels: verified checkout / passenger / review / payment flow. */
.hotel-checkout-page {max-width:1160px;margin:0 auto;padding:24px 18px 55px}
.hotel-checkout-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:13px;margin:0 0 22px;background:var(--surface2,#11243c);border:1px solid var(--border,#26425a);border-radius:18px}
.hotel-checkout-steps>span{border-radius:12px;padding:12px 9px;text-align:center;font-weight:750;font-size:13px;color:var(--muted,#91a1b7);white-space:normal}
.hotel-checkout-steps>span.current{background:linear-gradient(115deg,#b13bea,#ef56a5,#fd8c69);color:white;box-shadow:0 6px 18px rgba(198,65,197,.18)}
.hotel-checkout-steps>span.done{background:color-mix(in srgb,var(--primary,#b54af0) 12%,transparent);color:var(--text,#fff)}
.hotel-checkout-columns{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.hotel-guest-preview,.hotel-checkout-summary,.hotel-booking-status-card{background:var(--surface2,#132540);border:1px solid var(--border,#274562);border-radius:20px;padding:25px;min-width:0}
.hotel-guest-preview h1{font-size:clamp(23px,2vw,31px);margin:5px 0 9px}
.hotel-guest-preview>p{line-height:1.8}
.hotel-guest-preview form{display:grid;gap:17px}
.hotel-booking-room-group{background:var(--surface,#0e2038);border:1px solid var(--border,#284560);border-radius:16px;padding:17px;margin-top:16px}
.hotel-booking-room-group h3{font-size:18px;margin:0 0 15px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hotel-booking-room-group h3 small{font-weight:500;color:var(--muted,#92a1bb);font-size:12px}
.hotel-passenger-fieldset{padding:13px;margin:0 0 13px;border:1px solid var(--border,#284560);border-radius:13px}
.hotel-passenger-fieldset legend{font-weight:800;font-size:13px;padding:0 8px}
.hotel-guest-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hotel-booking-form label,.hotel-passenger-fieldset label,.hotel-booking-room-group>label{display:grid;gap:8px;font-weight:700;font-size:13px}
.hotel-booking-form input:not([type=checkbox]),.hotel-booking-form select,.hotel-booking-form textarea{display:block;width:100%;min-width:0;background:var(--surface2,#152844);color:var(--text,#fff);border:1px solid var(--border,#334f69);border-radius:11px;padding:12px 13px;font:inherit}
.hotel-booking-form input:focus,.hotel-booking-form textarea:focus,.hotel-booking-form select:focus{outline:2px solid #c45ef4;outline-offset:1px}
.hotel-verified-price{display:grid;gap:7px;border:1px solid color-mix(in srgb,#27b58d 35%,var(--border,#254360));background:color-mix(in srgb,#27b58d 7%,var(--surface,#0b203b));padding:16px;margin-top:17px;border-radius:15px}
.hotel-verified-price span{display:flex;align-items:center;gap:8px;font-weight:800}.hotel-verified-price strong{font-size:27px}.hotel-verified-price small{color:var(--muted,#9bb1c6)}
.hotel-booking-warning{margin:15px 0;border-inline-start:3px solid #f68b6a}
.hotel-booking-policy{padding:17px 20px;background:var(--surface,#0b203b);border:1px solid var(--border,#284560);border-radius:15px;margin:15px 0}
.hotel-booking-policy h3{margin:0 0 8px;font-size:17px}.hotel-booking-policy p{line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.hotel-checkout-summary{position:sticky;top:88px;display:grid;gap:10px}
.hotel-checkout-summary h3{margin:0 0 9px}.hotel-checkout-summary>p{margin:2px 0;color:var(--muted,#94a9ba)}
.hotel-checkout-final-price{font-size:25px;overflow-wrap:anywhere}
.hotel-booking-checkbox{display:flex;align-items:flex-start;gap:11px;padding:14px;background:var(--surface,#0b203b);border:1px solid var(--border,#284560);border-radius:13px;line-height:1.8;cursor:pointer}
.hotel-booking-checkbox input{accent-color:#c344ec;width:18px;height:18px;flex:none;margin-top:4px}
.hotel-booking-checkbox a{color:var(--primary,#d264eb);text-decoration:underline}
.hotel-checkout-page form .btn-primary{justify-self:start;margin-top:5px;padding:12px 20px}
#hotel-stripe-element{min-height:55px;margin:20px 0;direction:ltr}#hotel-payment-feedback{color:#f28a95;white-space:pre-wrap;line-height:1.75;margin-bottom:11px}
.hotel-booking-status-card{max-width:720px;margin:35px auto;text-align:center;display:grid;justify-items:center;gap:14px}
.hotel-booking-status-card h1{margin:0;font-size:28px}.hotel-booking-status-card>p{line-height:1.9;margin:0;overflow-wrap:anywhere}
.hotel-booking-status-card .hotel-alert{max-width:95%;padding:17px}.hotel-booking-ok{color:#35c6a3;font-weight:800}
.hotel-booking-status-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:820px){.hotel-checkout-columns{grid-template-columns:1fr}.hotel-checkout-summary{position:static;order:-1}.hotel-checkout-steps{gap:3px}.hotel-checkout-steps>span{font-size:11px;padding:10px 3px}.hotel-guest-preview{padding:18px}}
@media(max-width:550px){.hotel-guest-fields{grid-template-columns:1fr}.hotel-checkout-page{padding:16px 10px 40px}.hotel-passenger-fieldset{padding:10px}.hotel-booking-room-group{padding:12px}.hotel-checkout-steps>span{font-size:10px}}

/* Homepage hero photo is safely editable via the admin CMS. */
.hotel-hero-scene{background:linear-gradient(90deg,rgba(15,23,48,.79),rgba(29,23,56,.33) 62%,rgba(20,29,53,.12)),var(--home-photo,url('https://images.unsplash.com/photo-1533105079780-92b9be482077?w=1600&q=84')) center 47%/cover,linear-gradient(130deg,#1d304a,#a35c8b 65%,#f7ae84)}

/* V2.6.1 – compact language toggle for authenticated and public booking pages. */
.site-language-toggle{min-width:38px;font-size:11px;font-weight:700;letter-spacing:.02em}
.auth-language-control{position:fixed;top:16px;inset-inline-end:16px;z-index:25}
:lang(en) .hotel-date-popover{direction:rtl}
:lang(en) .hotel-search-panel,:lang(en) .hotel-filter-panel,:lang(en) .hotel-rooms-popover{direction:ltr;text-align:left}
:lang(en) .app-layout .sidebar,:lang(en) .app-top{direction:ltr}

/* V2.6.4 — supplier-priced stay range and city-center distance filters */
.hotel-price-slider-group .hotel-price-slider-head{display:grid;grid-template-columns:1fr 1fr;direction:ltr;gap:10px;margin:9px 0 13px}
.hotel-price-slider-group .hotel-price-slider-head>div{display:flex;flex-direction:column;gap:4px;min-width:0;border-radius:10px;background:var(--surface2,var(--surface));border:1px solid var(--border);padding:9px 8px;text-align:left}
.hotel-price-slider-group .hotel-price-slider-head>div:last-child{text-align:right}
.hotel-price-slider-group .hotel-price-slider-head small{color:var(--muted);font-size:11px;font-weight:700}
.hotel-price-slider-group .hotel-price-slider-head output{font-size:12px;font-weight:900;line-height:1.3;white-space:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.hotel-price-range-track{position:relative;width:100%;height:32px;margin:4px 0 13px;direction:ltr;touch-action:pan-y;isolation:isolate}
.hotel-price-range-rail{position:absolute;top:13px;left:0;right:0;height:6px;border-radius:999px;background:linear-gradient(to right,var(--border) 0%,var(--border) var(--range-from),#a53ce8 var(--range-from),#ff6999 var(--range-to),var(--border) var(--range-to),var(--border) 100%);pointer-events:none}
.hotel-price-slider-group .hotel-price-range-track input[type=range]{position:absolute;inset:0;width:100%;height:32px;min-height:32px;margin:0;padding:0;border:0;outline:0;background:transparent;appearance:none;-webkit-appearance:none;pointer-events:none;direction:ltr;cursor:pointer}
.hotel-price-slider-group .hotel-price-range-track input[type=range]::-webkit-slider-runnable-track{height:6px;background:transparent;border:0}
.hotel-price-slider-group .hotel-price-range-track input[type=range]::-moz-range-track{height:6px;background:transparent;border:0}
.hotel-price-slider-group .hotel-price-range-track input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border:3px solid #fff;border-radius:50%;background:#b53ce3;box-shadow:0 1px 7px #27164c44;pointer-events:auto;cursor:ew-resize}
.hotel-price-slider-group .hotel-price-range-track input[type=range]::-moz-range-thumb{width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:#b53ce3;box-shadow:0 1px 7px #27164c44;pointer-events:auto;cursor:ew-resize}
.hotel-price-slider-group .hotel-price-range-track .hotel-price-thumb-min{z-index:2}
.hotel-price-slider-group .hotel-price-range-track .hotel-price-thumb-max{z-index:3}
.hotel-price-slider-group .hotel-price-range-track input:focus-visible{outline:2px solid #fa71b4;outline-offset:3px;border-radius:14px}
.hotel-price-note,.hotel-filter-hint{display:block;font-size:11px;line-height:1.55;color:var(--muted)}
.hotel-distance-filter .hotel-distance-choices{display:grid;gap:3px}
.hotel-distance-filter .hotel-check-row{padding-block:5px}
.hotel-distance-filter .hotel-filter-hint{margin:9px 0 0}
.hotel-center-distance[dir=ltr]{direction:ltr;unicode-bidi:isolate}
@media(max-width:800px){.hotel-filter-panel .hotel-distance-filter{min-width:0}}


/* V2.6.5 — compact distance choices and fixed-size hotel list imagery. */
.hotel-distance-filter .hotel-distance-choices{gap:0!important}
.hotel-distance-filter .hotel-distance-choices .hotel-check-row{
  min-height:29px;margin:0!important;padding:3px 2px!important;
  line-height:1.2;gap:9px;
}
.hotel-distance-filter .hotel-distance-choices .hotel-check-row input{margin:0}
/* The result grid must not fill the entire height of the sidebar and stretch its photos. */
.hotel-listing{align-content:start;grid-auto-rows:max-content;align-items:start}
.hotel-listing .hotel-result-card{
  grid-template-columns:clamp(200px,27%,265px) minmax(0,1fr) minmax(145px,175px);
  height:234px;min-height:0;align-self:start;
}
.hotel-listing .hotel-result-image{height:234px;min-height:0;max-height:234px;overflow:hidden}
.hotel-listing .hotel-result-image>img{
  display:block;width:100%;height:100%;max-height:234px;object-fit:cover;object-position:center;
}
.hotel-listing .hotel-image-fallback{height:100%;min-height:0}
.hotel-listing .hotel-result-info{padding:17px 18px;gap:8px;min-height:0;overflow:hidden}
.hotel-listing .hotel-result-info h3{font-size:17px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hotel-listing .hotel-result-book{padding:16px 13px;gap:8px}
.hotel-listing .hotel-result-book strong{font-size:20px}
.hotel-tax-note{font-size:11px;line-height:1.5}
/* Map-sidebar cards have their own compact measurements. */
.hotel-map-sidebar .hotel-result-card{height:auto;min-height:140px;grid-template-columns:115px minmax(0,1fr)}
.hotel-map-sidebar .hotel-result-image{height:140px;min-height:0;max-height:140px}
.hotel-map-sidebar .hotel-result-image>img{height:140px;max-height:140px}
@media(max-width:1180px){
  .hotel-listing .hotel-result-card{height:auto;grid-template-columns:195px minmax(0,1fr)}
  .hotel-listing .hotel-result-image{height:224px;max-height:224px}
  .hotel-listing .hotel-result-image>img{max-height:224px}
  .hotel-listing .hotel-result-book{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;border-inline-start:0;border-top:1px solid var(--border)}
}
@media(max-width:550px){
  .hotel-listing .hotel-result-card{grid-template-columns:1fr;height:auto}
  .hotel-listing .hotel-result-image{height:194px;max-height:194px}
  .hotel-listing .hotel-result-image>img{height:194px;max-height:194px}
  .hotel-listing .hotel-result-book{flex-wrap:wrap}
}

/* V2.6.6 — Match compact hotel/map popup layout to the selected interface language. */
.hotel-map-sidebar .hotel-map-list-card[dir="ltr"]{direction:ltr}
.hotel-map-sidebar .hotel-map-list-card[dir="rtl"]{direction:rtl}
.hotel-map-list-card[dir="ltr"] .hotel-map-list-body{text-align:left}
.hotel-map-list-card[dir="rtl"] .hotel-map-list-body{text-align:right}
.hotel-map-list-card[dir="ltr"] .hotel-map-list-price strong{text-align:left}
.hotel-map-list-card[dir="rtl"] .hotel-map-list-price strong{text-align:right}
.hotel-map-popover[dir="ltr"]{direction:ltr;text-align:left}
.hotel-map-popover[dir="rtl"]{direction:rtl;text-align:right}
.hotel-map-popover[dir="ltr"] .hotel-map-popover-price{text-align:left}
.hotel-map-popover[dir="rtl"] .hotel-map-popover-price{text-align:right}
.hotel-map-shell .maplibregl-popup-content:has(.hotel-map-popover[dir="ltr"]) .maplibregl-popup-close-button{right:7px;left:auto}

/* V2.6.7: City autocomplete respects Trippbo theme, even when hovering/focusing options. */
.hotel-search-premium .hotel-dest-field{position:relative;z-index:3}
.hotel-search-premium .hotel-dest-field:focus-within{z-index:120}
.hotel-search-premium .hotel-suggestions{
  top:calc(100% + 5px);inset-inline:0;left:0;right:0;z-index:500;
  padding:5px;background:var(--surface)!important;border:1px solid var(--border)!important;
  color:var(--text)!important;box-shadow:0 16px 38px rgba(0,0,0,.22);
  border-radius:13px;overflow:auto;max-height:280px;direction:inherit;
}
.hotel-search-premium .hotel-suggestions button{
  background:transparent!important;color:var(--text)!important;width:100%;min-height:52px;
  text-align:start;display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:0!important;border-radius:9px;cursor:pointer;font-size:13px;direction:inherit;
}
.hotel-search-premium .hotel-suggestions button:hover,
.hotel-search-premium .hotel-suggestions button:focus-visible{
  background:rgba(172,69,237,.18)!important;color:var(--text)!important;
  outline:2px solid rgba(205,99,243,.5);outline-offset:-2px;
}
.hotel-search-premium .hotel-suggestion-icon{display:grid;place-items:center;flex:none;width:31px;height:31px;
  background:rgba(171,65,235,.14);border-radius:9px;color:#ff79c2}
.hotel-search-premium .hotel-suggestion-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.hotel-search-premium .hotel-suggestion-text strong{font-size:13px;white-space:normal;font-weight:800;color:var(--text)}
.hotel-search-premium .hotel-suggestion-text small{font-size:11px;color:var(--muted);white-space:normal}
:root[data-theme=dark] .hotel-search-premium .hotel-suggestions{background:#17263f!important;
  border-color:#3b4f70!important;color:#f7f8ff!important}
:root[data-theme=dark] .hotel-search-premium .hotel-suggestions button{color:#f7f8ff!important}
:root[data-theme=dark] .hotel-search-premium .hotel-suggestions button:hover,
:root[data-theme=dark] .hotel-search-premium .hotel-suggestions button:focus-visible{
  background:#344061!important;color:#fff!important}
:root[data-theme=dark] .hotel-search-premium .hotel-suggestion-text strong{color:#fff}
.hotel-search-restoring{padding:11px 15px;margin-bottom:12px;border:1px solid var(--border);
  background:var(--surface2);border-radius:12px;color:var(--muted);font-size:13px}

.hotel-search-refresh-button{border:1px solid var(--border);border-radius:8px;background:var(--surface3);color:var(--text);font-size:12px;font-weight:800;margin-inline-start:10px;padding:5px 10px;cursor:pointer}
.hotel-search-refresh-button:hover{border-color:#bc56ee}

/* Hotel My Bookings - responsive durable hotel/room snapshot */
.hotel-booking-list-photo{width:100%;max-height:215px;object-fit:cover;border-radius:16px;margin-bottom:12px}
.hotel-booking-extra{margin:18px 0;text-align:start;line-height:1.7}
.hotel-booking-gallery{display:flex;gap:10px;overflow-x:auto;padding:8px 0 16px;scroll-snap-type:x mandatory}
.hotel-booking-gallery img{height:165px;max-width:270px;min-width:170px;object-fit:cover;border-radius:12px;scroll-snap-align:start}
.hotel-booking-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:9px;margin:16px 0}
.hotel-booking-facts>div{padding:12px;background:var(--surface,#f4f6fa);border:1px solid #dce2ea;border-radius:12px;min-width:0}
.hotel-booking-facts dt{font-size:.85em;opacity:.75;margin-bottom:5px}.hotel-booking-facts dd{margin:0;overflow-wrap:anywhere;font-weight:600}

/* Per-room photos: existing hotel lightbox, separate offer data and controls. */
.hotel-result-room-name{display:flex;align-items:center;gap:7px;margin:4px 0 1px;font-size:13px;line-height:1.45;color:var(--text);overflow-wrap:anywhere}.hotel-result-room-name strong{font-weight:800}
.hotel-room-gallery-open{position:relative;display:block;width:100%;height:100%;min-height:176px;padding:0;border:0;background:transparent;color:#fff;text-align:start;cursor:zoom-in}
.hotel-room-gallery-open>img{width:100%;height:100%;min-height:176px;object-fit:cover;display:block}
.hotel-room-photo-count{position:absolute;bottom:8px;inset-inline-start:8px;background:rgba(6,19,38,.85);border:1px solid rgba(255,255,255,.28);border-radius:9px;display:inline-flex;gap:5px;align-items:center;padding:5px 8px;font-size:11px;font-weight:700}
.hotel-room-gallery-open:focus-visible,.hotel-room-gallery-thumbnails button:focus-visible{outline:3px solid #ff7bba;outline-offset:2px}
.hotel-room-gallery-thumbnails{display:flex;gap:8px;padding:7px 6px 3px;overflow-x:auto;max-width:100%}
.hotel-room-gallery-thumbnails button{flex:0 0 74px;height:56px;border:2px solid transparent;border-radius:9px;padding:0;background:#15283c;cursor:pointer;overflow:hidden}.hotel-room-gallery-thumbnails button.selected{border-color:#ff70b9}.hotel-room-gallery-thumbnails img{width:100%;height:100%;object-fit:cover}
@media(max-width:550px){.hotel-room-gallery-open,.hotel-room-gallery-open>img{min-height:145px}}

/* Hotel MapLibre fills the entire map shell. The placeholder uses grid/padding,
   but the live WebGL canvas must not inherit that centered grid layout. */
.hotel-map-shell:has(>.hotel-map-canvas){display:block;padding:0}
.hotel-map-shell>.hotel-map-canvas{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.hotel-map-shell .maplibregl-map,.hotel-map-shell .maplibregl-canvas-container{width:100%;height:100%}