/* Отели и авиабилеты: туристические продуктовые экраны кабинета. */ #tab-flights { --flt-violet:#6e3bea; --flt-ink:#171729; --flt-muted:#74758a; --flt-line:#e8e6ef; } #tab-flights .flt-page { max-width:1180px; margin:0 auto; padding:0 0 56px; color:var(--flt-ink); } #tab-flights svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #tab-flights button, #tab-flights input, #tab-flights select { font:inherit; } #tab-flights .flt-demo { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding:12px 16px; border:1px solid #d9cdfb; border-radius:16px; background:#f6f2ff; } #tab-flights .flt-demo > span { flex:none; padding:6px 10px; border-radius:999px; color:#fff; background:var(--flt-violet); font-size:12px; font-weight:800; letter-spacing:.02em; } #tab-flights .flt-demo p { margin:0; color:#51496d; font-size:13px; line-height:1.45; } #tab-flights .flt-hero { position:relative; min-height:360px; display:flex; align-items:center; overflow:hidden; padding:52px 7%; border-radius:30px; background-color:#17163a; background-image:linear-gradient(90deg,rgba(12,16,55,.98) 0%,rgba(22,24,66,.82) 42%,rgba(28,24,71,.16) 72%),var(--flt-hero-image); background-position:center; background-repeat:no-repeat; background-size:cover; box-shadow:0 18px 45px rgba(47,26,101,.2); } #tab-flights .flt-hero__copy { position:relative; z-index:2; max-width:560px; color:#fff; } #tab-flights .flt-hero__copy > span { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; opacity:.74; } #tab-flights .flt-hero h1 { margin:12px 0 14px; color:#fff; font-size:52px; line-height:.98; letter-spacing:-.05em; } #tab-flights .flt-hero p { max-width:520px; margin:0; color:rgba(255,255,255,.78); font-size:17px; line-height:1.6; } #tab-flights .flt-hero__art { position:absolute; inset:0; pointer-events:none; } #tab-flights .flt-search { position:relative; z-index:3; margin:-48px 32px 0; padding:20px; border:1px solid var(--flt-line); border-radius:24px; background:#fff; box-shadow:0 18px 42px rgba(24,19,51,.13); } #tab-flights .flt-search__route, #tab-flights .flt-search__meta { display:grid; gap:12px; } #tab-flights .flt-search__route { grid-template-columns:1fr 42px 1fr; align-items:end; } #tab-flights .flt-search__meta { grid-template-columns:1fr 1fr minmax(220px,.8fr); margin-top:12px; } #tab-flights .flt-search label, #tab-flights .flt-form-grid label { display:grid; gap:7px; color:var(--flt-muted); font-size:12px; font-weight:700; } #tab-flights .flt-passenger-picker { position:relative; display:grid; gap:7px; color:var(--flt-muted); font-size:12px; font-weight:700; } #tab-flights .flt-passenger-trigger { width:100%; min-width:0; height:52px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border:1.5px solid var(--flt-line); border-radius:14px; outline:0; background:#faf9fc; color:var(--flt-ink); font:inherit; font-size:15px; font-weight:650; text-align:left; cursor:pointer; } #tab-flights .flt-passenger-trigger:hover { border-color:#c8b8ef; background:#fff; } #tab-flights .flt-passenger-trigger:focus-visible { border-color:var(--flt-violet); box-shadow:0 0 0 3px rgba(110,59,234,.1); } #tab-flights .flt-passenger-trigger svg { flex:none; width:18px; height:18px; color:#6d6573; transition:transform .16s ease; } #tab-flights .flt-passenger-trigger[aria-expanded="true"] svg { transform:rotate(180deg); } #tab-flights .flt-passenger-panel { position:absolute; z-index:30; top:calc(100% + 8px); left:0; width:100%; min-width:260px; padding:14px; border:1px solid var(--flt-line); border-radius:16px; background:#fff; box-shadow:0 18px 42px rgba(24,19,51,.16); } #tab-flights .flt-passenger-panel[hidden] { display:none; } #tab-flights .flt-passenger-panel__row { display:flex; align-items:center; justify-content:space-between; gap:16px; } #tab-flights .flt-passenger-panel__row > span { display:grid; gap:3px; color:var(--flt-ink); } #tab-flights .flt-passenger-panel__row small { color:var(--flt-muted); font-size:11px; font-weight:600; } #tab-flights .flt-passenger-counter { display:flex; align-items:center; gap:10px; } #tab-flights .flt-passenger-counter button { width:38px; height:38px; display:grid; place-items:center; padding:0; border:1px solid #ddd6e8; border-radius:11px; background:#fff; color:var(--flt-violet); font:inherit; font-size:21px; cursor:pointer; } #tab-flights .flt-passenger-counter button:disabled { color:#c9c4d1; background:#f6f4f8; cursor:not-allowed; } #tab-flights .flt-passenger-counter strong { min-width:20px; color:var(--flt-ink); font-size:16px; text-align:center; } #tab-flights .flt-passenger-done { width:100%; min-height:40px; margin-top:13px; border:0; border-radius:11px; background:var(--flt-violet); color:#fff; font:inherit; font-weight:800; cursor:pointer; } #tab-flights .flt-search input, #tab-flights .flt-search select, #tab-flights .flt-form-grid input, #tab-flights .flt-results__head select { width:100%; min-width:0; height:52px; padding:0 14px; border:1.5px solid var(--flt-line); border-radius:14px; outline:0; background:#faf9fc; color:var(--flt-ink); font-size:15px; font-weight:650; } #tab-flights .flt-search select, #tab-flights .flt-results__head select { appearance:none; padding-right:46px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236d6573' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-position:right 16px center; background-repeat:no-repeat; background-size:18px 18px; } #tab-flights .flt-search input:focus, #tab-flights .flt-search select:focus, #tab-flights .flt-form-grid input:focus { border-color:var(--flt-violet); box-shadow:0 0 0 3px rgba(110,59,234,.1); } #tab-flights .flt-swap { width:42px; height:42px; margin-bottom:5px; border:1px solid var(--flt-line); border-radius:50%; background:#fff; color:var(--flt-violet); font-size:21px; cursor:pointer; } #tab-flights .flt-primary { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 22px; border:0; border-radius:14px; background:linear-gradient(135deg,#8558f0,var(--flt-violet)); color:#fff; font-weight:800; cursor:pointer; box-shadow:0 10px 24px rgba(110,59,234,.22); } #tab-flights .flt-primary:hover { filter:brightness(1.05); transform:translateY(-1px); } #tab-flights .flt-error { min-height:0; margin:10px 0 0; color:#c62828; font-size:13px; font-weight:700; } #tab-flights .flt-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 32px 0; } #tab-flights .flt-benefits article { padding:18px; border:1px solid var(--flt-line); border-radius:18px; background:#fff; } #tab-flights .flt-benefits b { font-size:15px; } #tab-flights .flt-benefits p { margin:6px 0 0; color:var(--flt-muted); font-size:13px; line-height:1.5; } #tab-flights .flt-route-summary { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 20px; margin-bottom:14px; padding:17px 20px; border:1px solid var(--flt-line); border-radius:18px; background:#fff; } #tab-flights .flt-route-summary > span { display:flex; align-items:center; gap:12px; font-size:19px; } #tab-flights .flt-route-summary > span svg { color:var(--flt-violet); } #tab-flights .flt-route-summary small { grid-column:1; color:var(--flt-muted); } #tab-flights .flt-route-summary button { grid-column:2; grid-row:1 / span 2; border:0; background:transparent; color:var(--flt-violet); font-weight:800; cursor:pointer; } #tab-flights .flt-date-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:18px; } #tab-flights .flt-date-strip button { display:grid; gap:3px; padding:12px 8px; border:1px solid var(--flt-line); border-radius:14px; background:#fff; color:var(--flt-ink); cursor:pointer; } #tab-flights .flt-date-strip small { color:var(--flt-muted); } #tab-flights .flt-date-strip .is-active { border-color:var(--flt-violet); color:var(--flt-violet); background:#f6f2ff; } #tab-flights .flt-results-layout { display:grid; grid-template-columns:230px 1fr; gap:18px; align-items:start; } #tab-flights .flt-filters { position:sticky; top:18px; display:grid; gap:13px; padding:20px; border:1px solid var(--flt-line); border-radius:18px; background:#fff; } #tab-flights .flt-filters h3 { margin:0 0 4px; } #tab-flights .flt-filters label { display:flex; align-items:center; gap:8px; color:#4d4d60; font-size:13px; } #tab-flights .flt-filters hr { width:100%; border:0; border-top:1px solid var(--flt-line); } #tab-flights .flt-filters small { color:var(--flt-muted); } #tab-flights .flt-results { display:grid; gap:12px; } #tab-flights .flt-results__head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:0 2px 4px; } #tab-flights .flt-results__head span { color:var(--flt-muted); font-size:13px; } #tab-flights .flt-results__head h1 { margin:4px 0 0; font-size:27px; letter-spacing:-.035em; } #tab-flights .flt-results__head select { width:190px; height:44px; background:#fff; } #tab-flights .flt-card { padding:20px; border:1px solid var(--flt-line); border-radius:20px; background:#fff; transition:transform .15s,box-shadow .15s; } #tab-flights .flt-card:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(29,23,59,.09); } #tab-flights .flt-card__head { display:flex; align-items:center; gap:10px; } #tab-flights .flt-card__head > span:nth-child(2) { display:grid; gap:2px; } #tab-flights .flt-card__head small { color:var(--flt-muted); } #tab-flights .flt-airline { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--flt-airline); color:#fff; font-size:12px; font-weight:900; } #tab-flights .flt-tag { margin-left:auto; padding:7px 10px; border-radius:999px; background:#f3f1f8; color:#5c5870; font-size:12px; font-weight:700; } #tab-flights .flt-times { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; margin:21px 0; } #tab-flights .flt-times > span { display:grid; gap:3px; } #tab-flights .flt-times > span:last-child { text-align:right; } #tab-flights .flt-times b { font-size:23px; } #tab-flights .flt-times small { color:var(--flt-muted); } #tab-flights .flt-times i { display:grid; gap:7px; text-align:center; font-style:normal; } #tab-flights .flt-times em { position:relative; display:block; height:1px; background:#cbc8d7; } #tab-flights .flt-times em::before, #tab-flights .flt-times em::after { content:""; position:absolute; top:-3px; width:7px; height:7px; border:1px solid #aaa6ba; border-radius:50%; background:#fff; } #tab-flights .flt-times em::before { left:0; } #tab-flights .flt-times em::after { right:0; } #tab-flights .flt-card__foot { display:flex; align-items:end; justify-content:space-between; gap:20px; padding-top:16px; border-top:1px solid var(--flt-line); } #tab-flights .flt-card__foot > div { display:grid; gap:4px; } #tab-flights .flt-card__foot > div:last-child { grid-template-columns:1fr auto; text-align:right; } #tab-flights .flt-card__foot > div:last-child small { grid-column:1; } #tab-flights .flt-card__foot > div > small { color:var(--flt-muted); font-size:12px; } #tab-flights .flt-card__foot strong { font-size:21px; } #tab-flights .flt-card__foot button { grid-column:2; grid-row:1 / span 2; padding:10px 20px; border:0; border-radius:11px; background:var(--flt-violet); color:#fff; font-weight:800; cursor:pointer; } #tab-flights .flt-detail-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; padding:22px; border:1px solid var(--flt-line); border-radius:22px; background:#fff; } #tab-flights .flt-detail-head > div { display:flex; align-items:center; gap:14px; } #tab-flights .flt-detail-head h1 { margin:4px 0; font-size:27px; } #tab-flights .flt-detail-head p { margin:0; color:var(--flt-muted); } #tab-flights .flt-detail-head > strong { display:grid; text-align:right; font-size:23px; } #tab-flights .flt-detail-head > strong small { color:var(--flt-muted); font-size:12px; font-weight:600; } #tab-flights .flt-detail-grid, #tab-flights .flt-checkout-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; } #tab-flights .flt-itinerary, #tab-flights .flt-fare, #tab-flights .flt-passenger, #tab-flights .flt-review, #tab-flights .flt-price { padding:24px; border:1px solid var(--flt-line); border-radius:22px; background:#fff; } #tab-flights .flt-itinerary h2, #tab-flights .flt-passenger h1, #tab-flights .flt-review h1 { margin:0 0 18px; } #tab-flights .flt-leg { display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:13px; } #tab-flights .flt-leg > span, #tab-flights .flt-leg > div { display:grid; gap:5px; } #tab-flights .flt-leg > span:last-child { text-align:right; } #tab-flights .flt-leg > span b { font-size:22px; } #tab-flights .flt-leg small { color:var(--flt-muted); } #tab-flights .flt-leg > i { height:1px; background:#d3d0dc; } #tab-flights .flt-fare { position:sticky; top:18px; } #tab-flights .flt-fare > span, #tab-flights .flt-price > span, #tab-flights .flt-step { color:var(--flt-violet); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; } #tab-flights .flt-fare h2, #tab-flights .flt-price h2 { margin:8px 0 16px; font-size:26px; } #tab-flights .flt-fare ul { display:grid; gap:11px; margin:0 0 20px; padding:0; list-style:none; color:#4d4d60; font-size:13px; } #tab-flights .flt-fare .flt-primary, #tab-flights .flt-passenger > .flt-primary, #tab-flights .flt-review > .flt-primary { width:100%; } #tab-flights .flt-passenger > p { margin:-10px 0 20px; color:var(--flt-muted); line-height:1.55; } #tab-flights .flt-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; } #tab-flights .flt-form-wide { grid-column:1 / -1; } #tab-flights .flt-consent { display:flex; gap:10px; margin:18px 0 8px; color:#5f5c6d; font-size:13px; line-height:1.45; } #tab-flights .flt-consent input { flex:none; margin-top:3px; } #tab-flights .flt-price { position:sticky; top:18px; } #tab-flights .flt-price dl { display:grid; gap:11px; margin:0; } #tab-flights .flt-price dl div { display:flex; justify-content:space-between; gap:12px; color:#555267; font-size:13px; } #tab-flights .flt-price dd { margin:0; font-weight:750; color:var(--flt-ink); } #tab-flights .flt-price .is-total { margin-top:5px; padding-top:14px; border-top:1px solid var(--flt-line); font-size:16px; font-weight:800; } #tab-flights .flt-price > small { display:block; margin-top:16px; color:var(--flt-muted); line-height:1.5; } #tab-flights .flt-review-card { display:grid; gap:5px; margin-bottom:12px; padding:16px; border-radius:15px; background:#f7f6fa; } #tab-flights .flt-review-card span { color:var(--flt-muted); font-size:12px; } #tab-flights .flt-review-card p { margin:0; color:#555267; font-size:13px; } #tab-flights .flt-demo-pay { margin:18px 0; padding:16px; border:1px solid #d9cdfb; border-radius:15px; background:#f6f2ff; } #tab-flights .flt-demo-pay p { margin:6px 0 0; color:#625978; font-size:13px; line-height:1.5; } #tab-flights .flt-success { max-width:670px; margin:70px auto 0; padding:48px 34px; border:1px solid var(--flt-line); border-radius:28px; background:#fff; text-align:center; box-shadow:0 18px 44px rgba(29,23,59,.09); } #tab-flights .flt-success > span { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; background:#e8fbef; color:#16834d; font-size:34px; font-weight:900; } #tab-flights .flt-success > small { color:var(--flt-violet); font-weight:800; text-transform:uppercase; letter-spacing:.08em; } #tab-flights .flt-success h1 { margin:10px 0; font-size:33px; } #tab-flights .flt-success p { max-width:520px; margin:0 auto 24px; color:var(--flt-muted); line-height:1.6; } #tab-flights .flt-success > div { display:flex; justify-content:center; gap:10px; } #tab-flights .flt-secondary { min-height:52px; padding:0 22px; border:1px solid var(--flt-line); border-radius:14px; background:#fff; color:var(--flt-ink); font-weight:800; cursor:pointer; } #tab-flights .flt-home-section { margin:48px 32px 0; } #tab-flights .flt-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; } #tab-flights .flt-section-head > div { display:grid; gap:5px; } #tab-flights .flt-section-head span,#tab-flights .flt-confidence > div > span { color:var(--flt-violet); font-size:11px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; } #tab-flights .flt-section-head h2,#tab-flights .flt-confidence h2 { margin:0; font-size:29px; letter-spacing:-.04em; } #tab-flights .flt-section-head > small { color:var(--flt-muted); font-size:12px; } #tab-flights .flt-ideas__track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,28%); gap:14px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; overscroll-behavior-x:contain; } #tab-flights .flt-ideas__track::-webkit-scrollbar { display:none; width:0; height:0; } #tab-flights .flt-ideas__track button { position:relative; min-height:260px; overflow:hidden; padding:0; border:0; border-radius:22px; background:#242038; cursor:pointer; } #tab-flights .flt-ideas__track img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .35s ease; } #tab-flights .flt-ideas__track button::after { content:""; position:absolute; inset:38% 0 0; background:linear-gradient(transparent,rgba(13,10,25,.88)); } #tab-flights .flt-ideas__track button:hover img { transform:scale(1.035); } #tab-flights .flt-ideas__track button > span { position:absolute; z-index:1; right:17px; bottom:16px; left:17px; display:grid; grid-template-columns:1fr auto; gap:3px 8px; color:#fff; text-align:left; } #tab-flights .flt-ideas__track b { font-size:18px; } #tab-flights .flt-ideas__track button small { color:rgba(255,255,255,.7); } #tab-flights .flt-ideas__track button strong { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:13px; } #tab-flights .flt-moods__grid { min-height:340px; display:grid; grid-template-columns:1.15fr .85fr; overflow:hidden; border-radius:26px; background:#17163a; } #tab-flights .flt-moods__art { min-height:340px; background-image:linear-gradient(90deg,transparent 60%,#17163a),var(--flt-mood-image); background-position:center; background-size:cover; } #tab-flights .flt-moods__list { display:grid; align-content:center; gap:10px; padding:28px; } #tab-flights .flt-moods__list button { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border:1px solid rgba(255,255,255,.15); border-radius:16px; color:#fff; background:rgba(255,255,255,.08); text-align:left; cursor:pointer; } #tab-flights .flt-moods__list button:hover { background:rgba(255,255,255,.13); } #tab-flights .flt-moods__list span { display:grid; gap:4px; } #tab-flights .flt-moods__list b { font-size:15px; } #tab-flights .flt-moods__list small { color:rgba(255,255,255,.68); font-size:12px; } #tab-flights .flt-moods__list i { font-size:20px; font-style:normal; } #tab-flights .flt-confidence { display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:center; padding:38px; border:1px solid var(--flt-line); border-radius:28px; background:linear-gradient(135deg,#faf8ff,#fff); } #tab-flights .flt-confidence p { max-width:600px; margin:12px 0 18px; color:var(--flt-muted); line-height:1.6; } #tab-flights .flt-confidence button { padding:0; border:0; color:var(--flt-violet); background:transparent; font-weight:850; cursor:pointer; } #tab-flights .flt-ticket-demo { min-height:200px; display:grid; align-content:space-between; padding:24px; border-radius:22px; color:#fff; background:linear-gradient(145deg,#7441df,#4b278e); transform:rotate(2deg); box-shadow:0 20px 40px rgba(79,40,145,.23); } #tab-flights .flt-ticket-demo small { opacity:.7; } #tab-flights .flt-ticket-demo > b { font-size:21px; } #tab-flights .flt-ticket-demo > b i { margin:0 8px; font-style:normal; opacity:.65; } #tab-flights .flt-ticket-demo > span { display:flex; gap:8px; } #tab-flights .flt-ticket-demo em { padding:6px 8px; border-radius:9px; background:rgba(255,255,255,.12); font-size:11px; font-style:normal; } #tab-flights .flt-ticket-demo strong { color:#d8ff9b; font-size:12px; } #tab-flights .flt-steps ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; } #tab-flights .flt-steps li { min-width:0; display:flex; gap:14px; padding:22px; border:1px solid var(--flt-line); border-radius:20px; background:#fff; } #tab-flights .flt-steps li > b { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--flt-violet); font-size:11px; } #tab-flights .flt-steps li strong { font-size:15px; } #tab-flights .flt-steps li p { margin:7px 0 0; color:var(--flt-muted); font-size:12px; line-height:1.5; } #tab-flights .flt-faq { padding:28px; border-radius:26px; background:#f5f1fb; } #tab-flights .flt-faq > div:last-child { display:grid; gap:8px; } #tab-flights .flt-faq details { border:1px solid #e5ddee; border-radius:15px; background:#fff; } #tab-flights .flt-faq summary { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 16px; font-size:14px; font-weight:800; cursor:pointer; list-style:none; } #tab-flights .flt-faq summary::-webkit-details-marker { display:none; } #tab-flights .flt-faq summary b { color:var(--flt-violet); font-size:20px; transition:transform .16s ease; } #tab-flights .flt-faq details[open] summary b { transform:rotate(45deg); } #tab-flights .flt-faq details p { margin:0; padding:0 16px 16px; color:var(--flt-muted); font-size:13px; line-height:1.55; } /* Отели открыты как полноценный desktop-раздел: мобильный макет остаётся адаптивным. */ #tab-hotels .hx { max-width:1180px; margin:0 auto; } #tab-hotels .hx .hero { border-radius:28px; overflow:hidden; } #tab-hotels .hx .search-card { max-width:1080px; margin-left:auto; margin-right:auto; } #tab-hotels .hx .destination-track { grid-auto-columns:minmax(210px, 27%); } @media (max-width: 767px) { #tab-flights .flt-page { padding:0 0 34px; } #tab-flights .flt-demo { align-items:flex-start; margin-bottom:12px; padding:11px; border-radius:13px; } #tab-flights .flt-demo p { font-size:12px; } #tab-flights .flt-hero { min-height:285px; padding:34px 22px 86px; border-radius:22px; } #tab-flights .flt-hero h1 { font-size:38px; } #tab-flights .flt-hero p { font-size:14px; } #tab-flights .flt-hero { background-position:62% center; } #tab-flights .flt-search { margin:-58px 10px 0; padding:14px; border-radius:19px; } #tab-flights .flt-search__route { grid-template-columns:1fr 38px 1fr; } #tab-flights .flt-search__meta { grid-template-columns:1fr 1fr; } #tab-flights .flt-search__meta .flt-primary { grid-column:1 / -1; } #tab-flights .flt-benefits { grid-template-columns:1fr; margin:18px 10px 0; } #tab-flights .flt-home-section { margin:34px 10px 0; } #tab-flights .flt-section-head { align-items:flex-start; flex-direction:column; gap:8px; } #tab-flights .flt-section-head h2,#tab-flights .flt-confidence h2 { font-size:24px; } #tab-flights .flt-ideas__track { grid-auto-columns:82%; } #tab-flights .flt-moods__grid { grid-template-columns:1fr; } #tab-flights .flt-moods__art { min-height:230px; background-image:linear-gradient(0deg,#17163a 0%,transparent 38%),var(--flt-mood-image); } #tab-flights .flt-moods__list { padding:16px; } #tab-flights .flt-confidence { grid-template-columns:1fr; padding:24px 18px; } #tab-flights .flt-ticket-demo { min-height:180px; transform:none; } #tab-flights .flt-steps ol { grid-template-columns:1fr; } #tab-flights .flt-faq { padding:18px; } #tab-flights .flt-results-layout, #tab-flights .flt-detail-grid, #tab-flights .flt-checkout-grid { grid-template-columns:1fr; } #tab-flights .flt-filters { position:static; display:none; } #tab-flights .flt-date-strip { overflow-x:auto; grid-template-columns:repeat(5,minmax(120px,1fr)); padding-bottom:4px; } #tab-flights .flt-results__head { align-items:start; flex-direction:column; } #tab-flights .flt-results__head select { width:100%; } #tab-flights .flt-card { padding:16px; } #tab-flights .flt-card__foot { align-items:stretch; flex-direction:column; } #tab-flights .flt-card__foot > div:last-child { text-align:left; } #tab-flights .flt-card__foot button { min-width:120px; } #tab-flights .flt-detail-head { align-items:flex-start; } #tab-flights .flt-detail-head > strong { text-align:left; } #tab-flights .flt-leg { grid-template-columns:auto 1fr auto; } #tab-flights .flt-leg > div { grid-column:1 / -1; grid-row:2; padding:12px 0; } #tab-flights .flt-leg > i:nth-of-type(2) { display:none; } #tab-flights .flt-fare, #tab-flights .flt-price { position:static; } #tab-flights .flt-price { grid-row:1; } #tab-flights .flt-success { margin:28px 0 0; padding:34px 20px; } #tab-flights .flt-success > div { flex-direction:column; } } @media (max-width: 430px) { #tab-flights .flt-search__route, #tab-flights .flt-search__meta { grid-template-columns:1fr; } #tab-flights .flt-swap { position:absolute; top:78px; right:24px; z-index:2; transform:rotate(90deg); } #tab-flights .flt-search__meta .flt-primary { grid-column:auto; } #tab-flights .flt-route-summary { grid-template-columns:1fr auto; padding:14px; } #tab-flights .flt-route-summary > span { font-size:16px; } #tab-flights .flt-times { gap:9px; } #tab-flights .flt-times b { font-size:19px; } #tab-flights .flt-detail-head { flex-direction:column; } #tab-flights .flt-form-grid { grid-template-columns:1fr; } #tab-flights .flt-form-wide { grid-column:auto; } #tab-flights .flt-passenger, #tab-flights .flt-review, #tab-flights .flt-price, #tab-flights .flt-itinerary, #tab-flights .flt-fare { padding:18px; } } @media (max-width: 340px) { #tab-flights .flt-hero { padding-left:17px; padding-right:17px; } #tab-flights .flt-hero h1 { font-size:33px; } #tab-flights .flt-card__head { flex-wrap:wrap; } #tab-flights .flt-tag { margin-left:0; } #tab-flights .flt-times { grid-template-columns:1fr; } #tab-flights .flt-times i { text-align:left; } #tab-flights .flt-times > span:last-child { text-align:left; } #tab-hotels .hx .field-grid { grid-template-columns:1fr; } #tab-hotels .hx .search-card { padding-inline:12px; } #tab-hotels .hx .control input { min-width:0; } } /* Отели v2: собственные панели вместо нативных select/date-контролов. */ #tab-hotels .hx { max-width:1180px; margin:0 auto; padding:0 0 56px; } #tab-hotels .htl-hero-v2 { min-height:330px; display:flex; align-items:center; margin:0; padding:54px 48px 72px; border-radius:28px; overflow:hidden; background-color:#f7f5fb; background-image:linear-gradient(90deg,#f7f5fb 0%,rgba(247,245,251,.98) 50%,rgba(247,245,251,.38) 72%),url("../assets/travel/hotels/hero.png"); background-repeat:no-repeat; background-position:center,right 38px center; background-size:100% 100%,auto 92%; text-align:left; } #tab-hotels .htl-hero-v2::after { display:none; } #tab-hotels .htl-hero-v2 .hero-copy { position:relative; z-index:1; max-width:550px; margin:0; text-align:left; } #tab-hotels .htl-hero-v2 .hero-copy > span { color:#7657d8; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } #tab-hotels .htl-hero-v2 h1 { margin:12px 0 16px; color:#171729; font-size:46px; line-height:1.03; } #tab-hotels .htl-hero-v2 p { max-width:510px; margin:0; color:#6d697c; font-size:16px; line-height:1.55; } #tab-hotels .htl-search-shell { position:relative; z-index:20; max-width:1120px; margin:-38px auto 34px; padding:18px; overflow:visible; border:1px solid #ebe8f1; border-radius:24px; background:rgba(255,255,255,.97); box-shadow:0 18px 42px rgba(35,26,66,.12); backdrop-filter:blur(18px); } #tab-hotels .htl-search-shell.is-panel-open { z-index:80; } #tab-hotels .htl-search-row { display:grid; grid-template-columns:minmax(220px,1.35fr) minmax(260px,1.4fr) minmax(190px,.9fr) 132px; gap:10px; align-items:end; } #tab-hotels .htl-search-field { position:relative; min-width:0; display:grid; gap:7px; } #tab-hotels .htl-search-field > span { padding-left:4px; color:#777283; font-size:11px; font-weight:750; } #tab-hotels .htl-search-trigger { width:100%; min-width:0; min-height:58px; display:flex; align-items:center; gap:10px; padding:0 14px; border:1.5px solid #e6e2ec; border-radius:15px; background:#faf9fc; color:#1c1925; text-align:left; cursor:pointer; } #tab-hotels .htl-search-trigger:hover { border-color:#bca7ec; background:#fff; } #tab-hotels .htl-search-trigger svg { flex:none; width:20px; height:20px; color:#7446df; } #tab-hotels .htl-search-trigger b { min-width:0; display:flex; align-items:center; gap:7px; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; } #tab-hotels .htl-search-trigger i,#tab-hotels .htl-search-trigger em { overflow:hidden; font-style:normal; text-overflow:ellipsis; white-space:nowrap; } #tab-hotels .htl-search-trigger em { color:#aaa4b3; } #tab-hotels .htl-search-shell > .primary-button,#tab-hotels .htl-search-row > .primary-button { min-height:58px; border-radius:15px; } #tab-hotels .htl-floating-panel { position:absolute; z-index:90; top:calc(100% + 10px); left:0; width:min(420px,calc(100vw - 64px)); max-height:min(480px,calc(100vh - 150px)); padding:16px; overflow:auto; overscroll-behavior:contain; border:1px solid #e8e3ee; border-radius:18px; background:#fff; box-shadow:0 22px 55px rgba(27,20,49,.18); } #tab-hotels .htl-floating-panel[hidden] { display:none; } #tab-hotels .htl-destination-panel > label { height:50px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1.5px solid #dfd8eb; border-radius:13px; } #tab-hotels .htl-destination-panel > label svg { width:19px; color:#7446df; } #tab-hotels .htl-destination-panel input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#1c1925; font:inherit; font-weight:650; } #tab-hotels .htl-quick-cities { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; } #tab-hotels .htl-quick-cities button { min-height:36px; padding:0 11px; border:0; border-radius:10px; background:#f4f0fb; color:#4e3c74; font:inherit; font-size:12px; font-weight:750; cursor:pointer; } #tab-hotels .htl-hints__list { position:static; display:grid; gap:5px; margin-top:10px; border:0; border-radius:0; background:transparent; box-shadow:none; } #tab-hotels .htl-hints__item { display:flex; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:11px; color:#282331; font-size:13px; font-weight:750; cursor:pointer; } #tab-hotels .htl-hints__item:hover { background:#f7f4fc; } #tab-hotels .htl-hints__item span,#tab-hotels .htl-hints__list p { color:#8a8491; font-size:11px; font-weight:600; } #tab-hotels .htl-date-panel { width:430px; } #tab-hotels .htl-calendar__head { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:8px; } #tab-hotels .htl-calendar__head strong { text-align:center; text-transform:capitalize; } #tab-hotels .htl-calendar__head button { width:40px; height:40px; padding:0; border:0; border-radius:12px; background:#f5f2f9; color:#4d435d; font-size:22px; cursor:pointer; } #tab-hotels .htl-date-panel > p { margin:8px 0 13px; color:#8a8491; font-size:11px; text-align:center; } #tab-hotels .htl-calendar__week,#tab-hotels .htl-calendar__days { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; } #tab-hotels .htl-calendar__week { margin-bottom:5px; color:#9a95a2; font-size:10px; text-align:center; } #tab-hotels .htl-calendar__days button { aspect-ratio:1; min-height:38px; padding:0; border:0; border-radius:11px; background:transparent; color:#292431; font:inherit; font-size:12px; font-weight:700; cursor:pointer; } #tab-hotels .htl-calendar__days button:hover { background:#f2edfb; color:#5d31bd; } #tab-hotels .htl-calendar__days .is-outside { color:#c6c1ca; } #tab-hotels .htl-calendar__days .is-range { border-radius:7px; background:#f0eafd; color:#5d31bd; } #tab-hotels .htl-calendar__days .is-edge { background:#7040df; color:#fff; } #tab-hotels .htl-calendar__days .is-disabled { color:#d1ccd5; cursor:not-allowed; } #tab-hotels .htl-guest-panel { right:0; left:auto; width:330px; } #tab-hotels .htl-counter { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid #eeeaf2; } #tab-hotels .htl-counter > span { display:grid; gap:3px; } #tab-hotels .htl-counter small { color:#8f8996; font-size:11px; } #tab-hotels .htl-counter > div { display:flex; align-items:center; gap:12px; } #tab-hotels .htl-counter button { width:38px; height:38px; padding:0; border:1px solid #ddd5e8; border-radius:11px; background:#fff; color:#6131cb; font-size:20px; cursor:pointer; } #tab-hotels .htl-panel-done { width:100%; min-height:42px; margin-top:14px; border:0; border-radius:12px; background:#7040df; color:#fff; font:inherit; font-weight:800; cursor:pointer; } #tab-hotels .htl-search-options { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:12px; } #tab-hotels .htl-search-options .currency { display:flex; align-items:center; gap:10px; margin:0; padding:0; border:0; } #tab-hotels .htl-search-options legend { float:left; color:#827c8a; font-size:11px; font-weight:700; } #tab-hotels .htl-search-options .segmented { width:190px; min-height:40px; display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border-radius:12px; background:#f2eef7; } #tab-hotels .htl-search-options .segmented button { min-width:0; min-height:34px; padding:0 10px; border:0; border-radius:9px; background:transparent; color:#746d80; font:inherit; font-size:12px; font-weight:750; cursor:pointer; } #tab-hotels .htl-search-options .segmented button.selected { background:#fff; color:#5c2cc4; box-shadow:0 4px 12px rgba(51,37,82,.1); } #tab-hotels .htl-search-options .form-message { flex:1; margin:0; text-align:right; } #tab-hotels .destinations { position:relative; z-index:1; margin-top:0; } #tab-hotels .section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px; } #tab-hotels .section-heading > div { display:grid; gap:4px; } #tab-hotels .section-heading > div > span { color:#7657d8; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } #tab-hotels .section-heading h2 { font-size:28px; } #tab-hotels .section-heading > span { color:#8c8595; font-size:12px; font-weight:700; } #tab-hotels .destination-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,31%); gap:14px; overflow-x:auto; padding:0 0 8px; scrollbar-width:none; -ms-overflow-style:none; } #tab-hotels .destination-track::-webkit-scrollbar { display:none; width:0; height:0; } #tab-hotels .destination-card { position:relative; display:block; overflow:hidden; aspect-ratio:560/300; padding:0; border:0; border-radius:20px; background:#ece8f2; box-shadow:none; cursor:pointer; } #tab-hotels .destination-card > span { position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; transition:transform .4s ease; } #tab-hotels .destination-card::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(15,12,27,.82)); } #tab-hotels .destination-card strong { position:absolute; z-index:1; left:18px; bottom:16px; color:#fff; font-size:17px; } #tab-hotels .destination-card:hover > span { transform:scale(1.035); } #tab-hotels .destination-card--country strong { bottom:38px; } #tab-hotels .destination-card small { position:absolute; z-index:1; left:18px; bottom:15px; display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.86); font-size:12px; font-weight:700; } #tab-hotels .destination-card small i { font-size:17px; font-style:normal; } #tab-hotels .htl-home-section { margin-top:46px; } #tab-hotels .htl-benefits__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } #tab-hotels .htl-benefits article { min-width:0; display:flex; gap:14px; padding:22px; border:1px solid #e9e5ef; border-radius:20px; background:#fff; } #tab-hotels .htl-benefits article > span { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(135deg,#8d61ec,#7040df); font-weight:900; } #tab-hotels .htl-benefits article b { font-size:15px; } #tab-hotels .htl-benefits article p { margin:7px 0 0; color:#777283; font-size:12px; line-height:1.55; } #tab-hotels .htl-directory__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } #tab-hotels .htl-directory__grid > article { min-width:0; padding:22px; border:1px solid #e8e3ee; border-radius:22px; background:linear-gradient(145deg,#fff,#faf8fd); } #tab-hotels .htl-directory__icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; color:#7040df; background:#f1ebfc; font-size:22px; font-weight:900; } #tab-hotels .htl-directory h3 { margin:16px 0 6px; font-size:18px; } #tab-hotels .htl-directory article > p { min-height:38px; margin:0 0 14px; color:#817a89; font-size:12px; line-height:1.5; } #tab-hotels .htl-directory article > div { display:grid; gap:6px; } #tab-hotels .htl-directory article button { width:100%; min-height:40px; display:flex; align-items:center; gap:8px; padding:0 10px; border:0; border-radius:10px; background:#f5f1fa; color:#3d3547; text-align:left; cursor:pointer; } #tab-hotels .htl-directory article button:hover { background:#eee6fa; } #tab-hotels .htl-directory article button i { font-size:16px; font-style:normal; } #tab-hotels .htl-directory article button span { min-width:0; flex:1; font-size:12px; font-weight:750; } #tab-hotels .htl-directory article button b { color:#7040df; } #tab-hotels .htl-faq { padding:28px; border-radius:26px; background:#f5f1fb; } #tab-hotels .htl-faq__list { display:grid; gap:8px; } #tab-hotels .htl-faq details { border:1px solid #e6dff0; border-radius:15px; background:#fff; } #tab-hotels .htl-faq summary { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 16px; color:#292431; font-size:14px; font-weight:800; cursor:pointer; list-style:none; } #tab-hotels .htl-faq summary::-webkit-details-marker { display:none; } #tab-hotels .htl-faq summary b { color:#7040df; font-size:20px; transition:transform .16s ease; } #tab-hotels .htl-faq details[open] summary b { transform:rotate(45deg); } #tab-hotels .htl-faq details p { margin:0; padding:0 16px 16px; color:#777283; font-size:13px; line-height:1.55; } #tab-hotels .htl-collection-preview { max-width:980px; margin:0 auto; } #tab-hotels .htl-catalog-wrap { max-width:1180px; } #tab-hotels .htl-catalog-wrap #htl-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } #tab-hotels .htl-catalog-wrap #htl-list > :is(.htl-note,.htl-empty) { grid-column:1 / -1; } #tab-hotels .htl-catalog-wrap .htl-hotel,#tab-hotels .htl-catalog-wrap .htl-skel { min-width:0; margin-bottom:0; } #tab-hotels .htl-catalog-wrap .htl-hotel { display:flex; flex-direction:column; } #tab-hotels .htl-catalog-wrap .htl-hotel__body { flex:1; display:flex; flex-direction:column; } #tab-hotels .htl-catalog-wrap .htl-hotel__foot { margin-top:auto; padding-top:12px; } #tab-hotels .htl-preview-hero { display:flex; align-items:center; gap:24px; padding:34px; border-radius:26px; color:#fff; background:linear-gradient(125deg,#5d2aba,#8f60e5 60%,#b493ef); } #tab-hotels .htl-preview-hero__mark { width:78px; height:78px; flex:0 0 78px; display:grid; place-items:center; border-radius:22px; background:rgba(255,255,255,.16); font-size:40px; } #tab-hotels .htl-preview-hero small { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.78; } #tab-hotels .htl-preview-hero h1 { margin:7px 0 8px; color:#fff; font-size:34px; } #tab-hotels .htl-preview-hero p { max-width:690px; margin:0; color:rgba(255,255,255,.82); line-height:1.55; } #tab-hotels .htl-preview-state { margin-top:18px; padding:32px; border:1px solid #e8e3ee; border-radius:24px; background:#fff; text-align:center; } #tab-hotels .htl-preview-state > span { color:#7040df; font-size:11px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; } #tab-hotels .htl-preview-state h2 { margin:9px 0; font-size:25px; } #tab-hotels .htl-preview-state p { max-width:620px; margin:0 auto 22px; color:#777283; line-height:1.55; } #tab-hotels .htl-preview-state > div { display:flex; justify-content:center; gap:10px; } #tab-hotels .htl-preview-support { min-height:48px; padding:0 18px; border:1px solid #ddd5e8; border-radius:14px; background:#fff; color:#574d61; font:inherit; font-weight:800; cursor:pointer; } @media (max-width: 900px) { #tab-hotels .htl-search-row { grid-template-columns:1fr 1fr; } #tab-hotels .htl-search-row > .primary-button { align-self:end; } #tab-hotels .htl-catalog-wrap #htl-list { grid-template-columns:1fr; } } @media (max-width: 767px) { #tab-hotels .hx { padding:0 0 34px; } #tab-hotels .htl-hero-v2 { min-height:290px; padding:34px 20px 76px; border-radius:22px; background-image:linear-gradient(90deg,#f7f5fb 0%,#f7f5fb 64%,rgba(247,245,251,.94) 80%,rgba(247,245,251,.58) 100%),url("../assets/travel/hotels/hero.png"); background-position:center,right -55px bottom 14px; background-size:100% 100%,auto 58%; } #tab-hotels .htl-hero-v2 h1 { max-width:300px; font-size:34px; } #tab-hotels .htl-hero-v2 p { max-width:310px; font-size:13px; } #tab-hotels .htl-search-shell { margin:-52px 10px 27px; padding:14px; border-radius:20px; } #tab-hotels .htl-search-row { grid-template-columns:1fr; } #tab-hotels .htl-floating-panel { position:static; width:100%; max-width:100%; max-height:min(480px,calc(100dvh - 120px)); margin-top:4px; overflow:auto; box-shadow:0 12px 28px rgba(27,20,49,.12); } #tab-hotels .htl-search-options { align-items:flex-start; flex-direction:column; } #tab-hotels .htl-search-options .form-message { width:100%; text-align:left; } #tab-hotels .destination-track { grid-auto-columns:82%; } #tab-hotels .section-heading h2 { font-size:23px; } #tab-hotels .htl-home-section { margin-top:34px; } #tab-hotels .htl-benefits__grid,#tab-hotels .htl-directory__grid { grid-template-columns:1fr; } #tab-hotels .htl-directory article > p { min-height:0; } #tab-hotels .htl-faq { padding:18px; border-radius:22px; } #tab-hotels .htl-preview-hero { align-items:flex-start; padding:24px 20px; } #tab-hotels .htl-preview-hero__mark { width:58px; height:58px; flex-basis:58px; border-radius:17px; font-size:30px; } #tab-hotels .htl-preview-hero h1 { font-size:27px; } #tab-hotels .htl-preview-state { padding:24px 18px; } #tab-hotels .htl-preview-state > div { flex-direction:column; } } @media (max-width: 340px) { #tab-hotels .htl-hero-v2 { padding-inline:16px; background-position:center,right -82px bottom 12px; background-size:100% 100%,auto 50%; } #tab-hotels .htl-hero-v2 h1 { font-size:30px; } #tab-hotels .htl-date-panel { padding:12px; } #tab-hotels .htl-calendar__days button { min-height:0; } #tab-hotels .destination-track { grid-auto-columns:88%; } }