@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter/InterVariable-latin.woff2?v=0a4b1c74") format("woff2"); unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0304, U+0308, U+2000-200B, U+2010-2027, U+202F-2055, U+2057, U+205F, U+20A0-20AF, U+20B1-20B5, U+20B8-20BA, U+20BC-20C0, U+2122, U+2190-2199, U+2212, U+2713, U+FEFF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter/InterVariable-latin-ext.woff2?v=44dab861") format("woff2"); unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-01C3, U+01C5-0254, U+0256-027B, U+027E-0284, U+0286-0290, U+0292-02A4, U+02A6-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0306-0307, U+0309-030A, U+030C, U+030F, U+0313, U+0315, U+031B, U+0323, U+0326-0328, U+032C, U+0337-0338, U+0342-0343, U+0346-036F, U+1D00, U+1D0D, U+1D1B, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF, U+1E00-1E9B, U+1E9D-1EFF, U+2C7C, U+2C7F, U+A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter/InterVariable-cyrillic.woff2?v=ef932bf8") format("woff2"); unicode-range: U+0400-0479, U+0480-049D, U+04A0-04FF, U+052F, U+2DFF, U+A69F; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter/InterVariable-greek.woff2?v=bbeea215") format("woff2"); unicode-range: U+0374-0376, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03D7, U+03DC-03DD, U+03F0-03F6, U+03F9-03FA, U+03FC-03FF, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter/InterVariable-symbols.woff2?v=996774ca") format("woff2"); unicode-range: U+0E3F, U+1DC0-1DF5, U+1DFC-1DFF, U+2070-2071, U+2074-208E, U+2090-209C, U+20DB-20DE, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2116-2117, U+211E-2121, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+2150-217F, U+2183-2186, U+2189, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21D0, U+21D2, U+21D4, U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2295-2298, U+2303-2305, U+2318, U+2325-2327, U+232B, U+2380, U+2387, U+238B, U+23CE-23CF, U+2423, U+2460-2468, U+24B6-24CF, U+24EA, U+25A0-25A2, U+25AA, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-25C7, U+25CA-25CB, U+25CF, U+25E6, U+25EF, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+266A-266B, U+26A0, U+2717, U+2756, U+2764, U+2780-2788, U+27EF, U+27F5-27FA, U+2913, U+2A38, U+2B06, U+2B12-2B13, U+2B1C, U+2B24, U+2E18, U+A92E, U+E000, U+E002-E05E, U+E06A-E0BD, U+E0C8-E0CC, U+E0DC-E0E6, U+E0F3-E0F5, U+E106, U+E109-E10A, U+E10C-E10F, U+E111-E113, U+E117-E118, U+E121-E122, U+E124, U+E12A-E15E, U+E163, U+E1C3, U+E1D2-E1DF, U+E1E1-E2DC, U+EE01-EE07, U+EE09-EE0A, U+EE0C-EE12, U+EE14, U+EE17, U+EE1D-EE45, U+EE47-EE84, U+EE87-EED6, U+EED8-EEE1, U+F6C3, U+1F12F-1F149, U+1F16A-1F16B, U+1F850, U+1F852; } .flag-icon { display: inline-block; width: 1.28rem; height: 0.88rem; background-size: cover; background-position: center; background-repeat: no-repeat; flex-shrink: 0; vertical-align: middle; overflow: hidden; } .flag-icon[data-country] { background-image: var(--flag-image); } .flag-icon-ad, .flag-icon[data-country="AD"] { background-image: url('/images/flags/ad.png'); } .flag-icon-ae, .flag-icon[data-country="AE"] { background-image: url('/images/flags/ae.png'); } .flag-icon-af, .flag-icon[data-country="AF"] { background-image: url('/images/flags/af.png'); } .flag-icon-ag, .flag-icon[data-country="AG"] { background-image: url('/images/flags/ag.png'); } .flag-icon-ai, .flag-icon[data-country="AI"] { background-image: url('/images/flags/ai.png'); } .flag-icon-al, .flag-icon[data-country="AL"] { background-image: url('/images/flags/al.png'); } .flag-icon-am, .flag-icon[data-country="AM"] { background-image: url('/images/flags/am.png'); } .flag-icon-ao, .flag-icon[data-country="AO"] { background-image: url('/images/flags/ao.png'); } .flag-icon-aq, .flag-icon[data-country="AQ"] { background-image: url('/images/flags/aq.png'); } .flag-icon-ar, .flag-icon[data-country="AR"] { background-image: url('/images/flags/ar.png'); } .flag-icon-as, .flag-icon[data-country="AS"] { background-image: url('/images/flags/as.png'); } .flag-icon-at, .flag-icon[data-country="AT"] { background-image: url('/images/flags/at.png'); } .flag-icon-au, .flag-icon[data-country="AU"] { background-image: url('/images/flags/au.png'); } .flag-icon-aw, .flag-icon[data-country="AW"] { background-image: url('/images/flags/aw.png'); } .flag-icon-az, .flag-icon[data-country="AZ"] { background-image: url('/images/flags/az.png'); } .flag-icon-ba, .flag-icon[data-country="BA"] { background-image: url('/images/flags/ba.png'); } .flag-icon-bb, .flag-icon[data-country="BB"] { background-image: url('/images/flags/bb.png'); } .flag-icon-bd, .flag-icon[data-country="BD"] { background-image: url('/images/flags/bd.png'); } .flag-icon-be, .flag-icon[data-country="BE"] { background-image: url('/images/flags/be.png'); } .flag-icon-bf, .flag-icon[data-country="BF"] { background-image: url('/images/flags/bf.png'); } .flag-icon-bg, .flag-icon[data-country="BG"] { background-image: url('/images/flags/bg.png'); } .flag-icon-bh, .flag-icon[data-country="BH"] { background-image: url('/images/flags/bh.png'); } .flag-icon-bi, .flag-icon[data-country="BI"] { background-image: url('/images/flags/bi.png'); } .flag-icon-bj, .flag-icon[data-country="BJ"] { background-image: url('/images/flags/bj.png'); } .flag-icon-bl, .flag-icon[data-country="BL"] { background-image: url('/images/flags/bl.png'); } .flag-icon-bm, .flag-icon[data-country="BM"] { background-image: url('/images/flags/bm.png'); } .flag-icon-bn, .flag-icon[data-country="BN"] { background-image: url('/images/flags/bn.png'); } .flag-icon-bo, .flag-icon[data-country="BO"] { background-image: url('/images/flags/bo.png'); } .flag-icon-bq, .flag-icon[data-country="BQ"] { background-image: url('/images/flags/bq.png'); } .flag-icon-br, .flag-icon[data-country="BR"] { background-image: url('/images/flags/br.png'); } .flag-icon-bs, .flag-icon[data-country="BS"] { background-image: url('/images/flags/bs.png'); } .flag-icon-bt, .flag-icon[data-country="BT"] { background-image: url('/images/flags/bt.png'); } .flag-icon-bw, .flag-icon[data-country="BW"] { background-image: url('/images/flags/bw.png'); } .flag-icon-by, .flag-icon[data-country="BY"] { background-image: url('/images/flags/by.png'); } .flag-icon-bz, .flag-icon[data-country="BZ"] { background-image: url('/images/flags/bz.png'); } .flag-icon-ca, .flag-icon[data-country="CA"] { background-image: url('/images/flags/ca.png'); } .flag-icon-cc, .flag-icon[data-country="CC"] { background-image: url('/images/flags/cc.png'); } .flag-icon-cd, .flag-icon[data-country="CD"] { background-image: url('/images/flags/cd.png'); } .flag-icon-cf, .flag-icon[data-country="CF"] { background-image: url('/images/flags/cf.png'); } .flag-icon-cg, .flag-icon[data-country="CG"] { background-image: url('/images/flags/cg.png'); } .flag-icon-ch, .flag-icon[data-country="CH"] { background-image: url('/images/flags/ch.png'); } .flag-icon-ci, .flag-icon[data-country="CI"] { background-image: url('/images/flags/ci.png'); } .flag-icon-ck, .flag-icon[data-country="CK"] { background-image: url('/images/flags/ck.png'); } .flag-icon-cl, .flag-icon[data-country="CL"] { background-image: url('/images/flags/cl.png'); } .flag-icon-cm, .flag-icon[data-country="CM"] { background-image: url('/images/flags/cm.png'); } .flag-icon-cn, .flag-icon[data-country="CN"] { background-image: url('/images/flags/cn.png'); } .flag-icon-co, .flag-icon[data-country="CO"] { background-image: url('/images/flags/co.png'); } .flag-icon-cr, .flag-icon[data-country="CR"] { background-image: url('/images/flags/cr.png'); } .flag-icon-cu, .flag-icon[data-country="CU"] { background-image: url('/images/flags/cu.png'); } .flag-icon-cv, .flag-icon[data-country="CV"] { background-image: url('/images/flags/cv.png'); } .flag-icon-cw, .flag-icon[data-country="CW"] { background-image: url('/images/flags/cw.png'); } .flag-icon-cx, .flag-icon[data-country="CX"] { background-image: url('/images/flags/cx.png'); } .flag-icon-cy, .flag-icon[data-country="CY"] { background-image: url('/images/flags/cy.png'); } .flag-icon-cz, .flag-icon[data-country="CZ"] { background-image: url('/images/flags/cz.png'); } .flag-icon-de, .flag-icon[data-country="DE"] { background-image: url('/images/flags/de.png'); } .flag-icon-dj, .flag-icon[data-country="DJ"] { background-image: url('/images/flags/dj.png'); } .flag-icon-dk, .flag-icon[data-country="DK"] { background-image: url('/images/flags/dk.png'); } .flag-icon-dm, .flag-icon[data-country="DM"] { background-image: url('/images/flags/dm.png'); } .flag-icon-do, .flag-icon[data-country="DO"] { background-image: url('/images/flags/do.png'); } .flag-icon-dz, .flag-icon[data-country="DZ"] { background-image: url('/images/flags/dz.png'); } .flag-icon-ec, .flag-icon[data-country="EC"] { background-image: url('/images/flags/ec.png'); } .flag-icon-ee, .flag-icon[data-country="EE"] { background-image: url('/images/flags/ee.png'); } .flag-icon-eg, .flag-icon[data-country="EG"] { background-image: url('/images/flags/eg.png'); } .flag-icon-eh, .flag-icon[data-country="EH"] { background-image: url('/images/flags/eh.png'); } .flag-icon-er, .flag-icon[data-country="ER"] { background-image: url('/images/flags/er.png'); } .flag-icon-es, .flag-icon[data-country="ES"] { background-image: url('/images/flags/es.png'); } .flag-icon-et, .flag-icon[data-country="ET"] { background-image: url('/images/flags/et.png'); } .flag-icon-fi, .flag-icon[data-country="FI"] { background-image: url('/images/flags/fi.png'); } .flag-icon-fj, .flag-icon[data-country="FJ"] { background-image: url('/images/flags/fj.png'); } .flag-icon-fk, .flag-icon[data-country="FK"] { background-image: url('/images/flags/fk.png'); } .flag-icon-fm, .flag-icon[data-country="FM"] { background-image: url('/images/flags/fm.png'); } .flag-icon-fo, .flag-icon[data-country="FO"] { background-image: url('/images/flags/fo.png'); } .flag-icon-fr, .flag-icon[data-country="FR"] { background-image: url('/images/flags/fr.png'); } .flag-icon-ga, .flag-icon[data-country="GA"] { background-image: url('/images/flags/ga.png'); } .flag-icon-gb, .flag-icon[data-country="GB"] { background-image: url('/images/flags/gb.png'); } .flag-icon-gd, .flag-icon[data-country="GD"] { background-image: url('/images/flags/gd.png'); } .flag-icon-ge, .flag-icon[data-country="GE"] { background-image: url('/images/flags/ge.png'); } .flag-icon-gf, .flag-icon[data-country="GF"] { background-image: url('/images/flags/gf.png'); } .flag-icon-gg, .flag-icon[data-country="GG"] { background-image: url('/images/flags/gg.png'); } .flag-icon-gh, .flag-icon[data-country="GH"] { background-image: url('/images/flags/gh.png'); } .flag-icon-gi, .flag-icon[data-country="GI"] { background-image: url('/images/flags/gi.png'); } .flag-icon-gl, .flag-icon[data-country="GL"] { background-image: url('/images/flags/gl.png'); } .flag-icon-gm, .flag-icon[data-country="GM"] { background-image: url('/images/flags/gm.png'); } .flag-icon-gn, .flag-icon[data-country="GN"] { background-image: url('/images/flags/gn.png'); } .flag-icon-gp, .flag-icon[data-country="GP"] { background-image: url('/images/flags/gp.png'); } .flag-icon-gq, .flag-icon[data-country="GQ"] { background-image: url('/images/flags/gq.png'); } .flag-icon-gr, .flag-icon[data-country="GR"] { background-image: url('/images/flags/gr.png'); } .flag-icon-gs, .flag-icon[data-country="GS"] { background-image: url('/images/flags/gs.png'); } .flag-icon-gt, .flag-icon[data-country="GT"] { background-image: url('/images/flags/gt.png'); } .flag-icon-gu, .flag-icon[data-country="GU"] { background-image: url('/images/flags/gu.png'); } .flag-icon-gw, .flag-icon[data-country="GW"] { background-image: url('/images/flags/gw.png'); } .flag-icon-gy, .flag-icon[data-country="GY"] { background-image: url('/images/flags/gy.png'); } .flag-icon-hk, .flag-icon[data-country="HK"] { background-image: url('/images/flags/hk.png'); } .flag-icon-hn, .flag-icon[data-country="HN"] { background-image: url('/images/flags/hn.png'); } .flag-icon-hr, .flag-icon[data-country="HR"] { background-image: url('/images/flags/hr.png'); } .flag-icon-ht, .flag-icon[data-country="HT"] { background-image: url('/images/flags/ht.png'); } .flag-icon-hu, .flag-icon[data-country="HU"] { background-image: url('/images/flags/hu.png'); } .flag-icon-id, .flag-icon[data-country="ID"] { background-image: url('/images/flags/id.png'); } .flag-icon-ie, .flag-icon[data-country="IE"] { background-image: url('/images/flags/ie.png'); } .flag-icon-il, .flag-icon[data-country="IL"] { background-image: url('/images/flags/il.png'); } .flag-icon-im, .flag-icon[data-country="IM"] { background-image: url('/images/flags/im.png'); } .flag-icon-in, .flag-icon[data-country="IN"] { background-image: url('/images/flags/in.png'); } .flag-icon-io, .flag-icon[data-country="IO"] { background-image: url('/images/flags/io.png'); } .flag-icon-iq, .flag-icon[data-country="IQ"] { background-image: url('/images/flags/iq.png'); } .flag-icon-ir, .flag-icon[data-country="IR"] { background-image: url('/images/flags/ir.png'); } .flag-icon-is, .flag-icon[data-country="IS"] { background-image: url('/images/flags/is.png'); } .flag-icon-it, .flag-icon[data-country="IT"] { background-image: url('/images/flags/it.png'); } .flag-icon-je, .flag-icon[data-country="JE"] { background-image: url('/images/flags/je.png'); } .flag-icon-jm, .flag-icon[data-country="JM"] { background-image: url('/images/flags/jm.png'); } .flag-icon-jo, .flag-icon[data-country="JO"] { background-image: url('/images/flags/jo.png'); } .flag-icon-jp, .flag-icon[data-country="JP"] { background-image: url('/images/flags/jp.png'); } .flag-icon-ke, .flag-icon[data-country="KE"] { background-image: url('/images/flags/ke.png'); } .flag-icon-kg, .flag-icon[data-country="KG"] { background-image: url('/images/flags/kg.png'); } .flag-icon-kh, .flag-icon[data-country="KH"] { background-image: url('/images/flags/kh.png'); } .flag-icon-ki, .flag-icon[data-country="KI"] { background-image: url('/images/flags/ki.png'); } .flag-icon-km, .flag-icon[data-country="KM"] { background-image: url('/images/flags/km.png'); } .flag-icon-kn, .flag-icon[data-country="KN"] { background-image: url('/images/flags/kn.png'); } .flag-icon-kp, .flag-icon[data-country="KP"] { background-image: url('/images/flags/kp.png'); } .flag-icon-kr, .flag-icon[data-country="KR"] { background-image: url('/images/flags/kr.png'); } .flag-icon-kw, .flag-icon[data-country="KW"] { background-image: url('/images/flags/kw.png'); } .flag-icon-ky, .flag-icon[data-country="KY"] { background-image: url('/images/flags/ky.png'); } .flag-icon-kz, .flag-icon[data-country="KZ"] { background-image: url('/images/flags/kz.png'); } .flag-icon-la, .flag-icon[data-country="LA"] { background-image: url('/images/flags/la.png'); } .flag-icon-lb, .flag-icon[data-country="LB"] { background-image: url('/images/flags/lb.png'); } .flag-icon-lc, .flag-icon[data-country="LC"] { background-image: url('/images/flags/lc.png'); } .flag-icon-li, .flag-icon[data-country="LI"] { background-image: url('/images/flags/li.png'); } .flag-icon-lk, .flag-icon[data-country="LK"] { background-image: url('/images/flags/lk.png'); } .flag-icon-lr, .flag-icon[data-country="LR"] { background-image: url('/images/flags/lr.png'); } .flag-icon-ls, .flag-icon[data-country="LS"] { background-image: url('/images/flags/ls.png'); } .flag-icon-lt, .flag-icon[data-country="LT"] { background-image: url('/images/flags/lt.png'); } .flag-icon-lu, .flag-icon[data-country="LU"] { background-image: url('/images/flags/lu.png'); } .flag-icon-lv, .flag-icon[data-country="LV"] { background-image: url('/images/flags/lv.png'); } .flag-icon-ly, .flag-icon[data-country="LY"] { background-image: url('/images/flags/ly.png'); } .flag-icon-ma, .flag-icon[data-country="MA"] { background-image: url('/images/flags/ma.png'); } .flag-icon-mc, .flag-icon[data-country="MC"] { background-image: url('/images/flags/mc.png'); } .flag-icon-md, .flag-icon[data-country="MD"] { background-image: url('/images/flags/md.png'); } .flag-icon-me, .flag-icon[data-country="ME"] { background-image: url('/images/flags/me.png'); } .flag-icon-mf, .flag-icon[data-country="MF"] { background-image: url('/images/flags/mf.png'); } .flag-icon-mg, .flag-icon[data-country="MG"] { background-image: url('/images/flags/mg.png'); } .flag-icon-mh, .flag-icon[data-country="MH"] { background-image: url('/images/flags/mh.png'); } .flag-icon-mk, .flag-icon[data-country="MK"] { background-image: url('/images/flags/mk.png'); } .flag-icon-ml, .flag-icon[data-country="ML"] { background-image: url('/images/flags/ml.png'); } .flag-icon-mm, .flag-icon[data-country="MM"] { background-image: url('/images/flags/mm.png'); } .flag-icon-mn, .flag-icon[data-country="MN"] { background-image: url('/images/flags/mn.png'); } .flag-icon-mo, .flag-icon[data-country="MO"] { background-image: url('/images/flags/mo.png'); } .flag-icon-mp, .flag-icon[data-country="MP"] { background-image: url('/images/flags/mp.png'); } .flag-icon-mq, .flag-icon[data-country="MQ"] { background-image: url('/images/flags/mq.png'); } .flag-icon-mr, .flag-icon[data-country="MR"] { background-image: url('/images/flags/mr.png'); } .flag-icon-ms, .flag-icon[data-country="MS"] { background-image: url('/images/flags/ms.png'); } .flag-icon-mt, .flag-icon[data-country="MT"] { background-image: url('/images/flags/mt.png'); } .flag-icon-mu, .flag-icon[data-country="MU"] { background-image: url('/images/flags/mu.png'); } .flag-icon-mv, .flag-icon[data-country="MV"] { background-image: url('/images/flags/mv.png'); } .flag-icon-mw, .flag-icon[data-country="MW"] { background-image: url('/images/flags/mw.png'); } .flag-icon-mx, .flag-icon[data-country="MX"] { background-image: url('/images/flags/mx.png'); } .flag-icon-my, .flag-icon[data-country="MY"] { background-image: url('/images/flags/my.png'); } .flag-icon-mz, .flag-icon[data-country="MZ"] { background-image: url('/images/flags/mz.png'); } .flag-icon-na, .flag-icon[data-country="NA"] { background-image: url('/images/flags/na.png'); } .flag-icon-nc, .flag-icon[data-country="NC"] { background-image: url('/images/flags/nc.png'); } .flag-icon-ne, .flag-icon[data-country="NE"] { background-image: url('/images/flags/ne.png'); } .flag-icon-nf, .flag-icon[data-country="NF"] { background-image: url('/images/flags/nf.png'); } .flag-icon-ng, .flag-icon[data-country="NG"] { background-image: url('/images/flags/ng.png'); } .flag-icon-ni, .flag-icon[data-country="NI"] { background-image: url('/images/flags/ni.png'); } .flag-icon-nl, .flag-icon[data-country="NL"] { background-image: url('/images/flags/nl.png'); } .flag-icon-no, .flag-icon[data-country="NO"] { background-image: url('/images/flags/no.png'); } .flag-icon-np, .flag-icon[data-country="NP"] { background-image: url('/images/flags/np.png'); } .flag-icon-nr, .flag-icon[data-country="NR"] { background-image: url('/images/flags/nr.png'); } .flag-icon-nu, .flag-icon[data-country="NU"] { background-image: url('/images/flags/nu.png'); } .flag-icon-nz, .flag-icon[data-country="NZ"] { background-image: url('/images/flags/nz.png'); } .flag-icon-om, .flag-icon[data-country="OM"] { background-image: url('/images/flags/om.png'); } .flag-icon-pa, .flag-icon[data-country="PA"] { background-image: url('/images/flags/pa.png'); } .flag-icon-pe, .flag-icon[data-country="PE"] { background-image: url('/images/flags/pe.png'); } .flag-icon-pf, .flag-icon[data-country="PF"] { background-image: url('/images/flags/pf.png'); } .flag-icon-pg, .flag-icon[data-country="PG"] { background-image: url('/images/flags/pg.png'); } .flag-icon-ph, .flag-icon[data-country="PH"] { background-image: url('/images/flags/ph.png'); } .flag-icon-pk, .flag-icon[data-country="PK"] { background-image: url('/images/flags/pk.png'); } .flag-icon-pl, .flag-icon[data-country="PL"] { background-image: url('/images/flags/pl.png'); } .flag-icon-pm, .flag-icon[data-country="PM"] { background-image: url('/images/flags/pm.png'); } .flag-icon-pn, .flag-icon[data-country="PN"] { background-image: url('/images/flags/pn.png'); } .flag-icon-pr, .flag-icon[data-country="PR"] { background-image: url('/images/flags/pr.png'); } .flag-icon-ps, .flag-icon[data-country="PS"] { background-image: url('/images/flags/ps.png'); } .flag-icon-pt, .flag-icon[data-country="PT"] { background-image: url('/images/flags/pt.png'); } .flag-icon-pw, .flag-icon[data-country="PW"] { background-image: url('/images/flags/pw.png'); } .flag-icon-py, .flag-icon[data-country="PY"] { background-image: url('/images/flags/py.png'); } .flag-icon-qa, .flag-icon[data-country="QA"] { background-image: url('/images/flags/qa.png'); } .flag-icon-re, .flag-icon[data-country="RE"] { background-image: url('/images/flags/re.png'); } .flag-icon-ro, .flag-icon[data-country="RO"] { background-image: url('/images/flags/ro.png'); } .flag-icon-rs, .flag-icon[data-country="RS"] { background-image: url('/images/flags/rs.png'); } .flag-icon-ru, .flag-icon[data-country="RU"] { background-image: url('/images/flags/ru.png'); } .flag-icon-rw, .flag-icon[data-country="RW"] { background-image: url('/images/flags/rw.png'); } .flag-icon-sa, .flag-icon[data-country="SA"] { background-image: url('/images/flags/sa.png'); } .flag-icon-sb, .flag-icon[data-country="SB"] { background-image: url('/images/flags/sb.png'); } .flag-icon-sc, .flag-icon[data-country="SC"] { background-image: url('/images/flags/sc.png'); } .flag-icon-sd, .flag-icon[data-country="SD"] { background-image: url('/images/flags/sd.png'); } .flag-icon-se, .flag-icon[data-country="SE"] { background-image: url('/images/flags/se.png'); } .flag-icon-sg, .flag-icon[data-country="SG"] { background-image: url('/images/flags/sg.png'); } .flag-icon-sh, .flag-icon[data-country="SH"] { background-image: url('/images/flags/sh.png'); } .flag-icon-si, .flag-icon[data-country="SI"] { background-image: url('/images/flags/si.png'); } .flag-icon-sj, .flag-icon[data-country="SJ"] { background-image: url('/images/flags/sj.png'); } .flag-icon-sk, .flag-icon[data-country="SK"] { background-image: url('/images/flags/sk.png'); } .flag-icon-sl, .flag-icon[data-country="SL"] { background-image: url('/images/flags/sl.png'); } .flag-icon-sm, .flag-icon[data-country="SM"] { background-image: url('/images/flags/sm.png'); } .flag-icon-sn, .flag-icon[data-country="SN"] { background-image: url('/images/flags/sn.png'); } .flag-icon-so, .flag-icon[data-country="SO"] { background-image: url('/images/flags/so.png'); } .flag-icon-sr, .flag-icon[data-country="SR"] { background-image: url('/images/flags/sr.png'); } .flag-icon-ss, .flag-icon[data-country="SS"] { background-image: url('/images/flags/ss.png'); } .flag-icon-st, .flag-icon[data-country="ST"] { background-image: url('/images/flags/st.png'); } .flag-icon-sv, .flag-icon[data-country="SV"] { background-image: url('/images/flags/sv.png'); } .flag-icon-sx, .flag-icon[data-country="SX"] { background-image: url('/images/flags/sx.png'); } .flag-icon-sy, .flag-icon[data-country="SY"] { background-image: url('/images/flags/sy.png'); } .flag-icon-sz, .flag-icon[data-country="SZ"] { background-image: url('/images/flags/sz.png'); } .flag-icon-tc, .flag-icon[data-country="TC"] { background-image: url('/images/flags/tc.png'); } .flag-icon-td, .flag-icon[data-country="TD"] { background-image: url('/images/flags/td.png'); } .flag-icon-tf, .flag-icon[data-country="TF"] { background-image: url('/images/flags/tf.png'); } .flag-icon-tg, .flag-icon[data-country="TG"] { background-image: url('/images/flags/tg.png'); } .flag-icon-th, .flag-icon[data-country="TH"] { background-image: url('/images/flags/th.png'); } .flag-icon-tj, .flag-icon[data-country="TJ"] { background-image: url('/images/flags/tj.png'); } .flag-icon-tk, .flag-icon[data-country="TK"] { background-image: url('/images/flags/tk.png'); } .flag-icon-tl, .flag-icon[data-country="TL"] { background-image: url('/images/flags/tl.png'); } .flag-icon-tm, .flag-icon[data-country="TM"] { background-image: url('/images/flags/tm.png'); } .flag-icon-tn, .flag-icon[data-country="TN"] { background-image: url('/images/flags/tn.png'); } .flag-icon-to, .flag-icon[data-country="TO"] { background-image: url('/images/flags/to.png'); } .flag-icon-tr, .flag-icon[data-country="TR"] { background-image: url('/images/flags/tr.png'); } .flag-icon-tt, .flag-icon[data-country="TT"] { background-image: url('/images/flags/tt.png'); } .flag-icon-tv, .flag-icon[data-country="TV"] { background-image: url('/images/flags/tv.png'); } .flag-icon-tw, .flag-icon[data-country="TW"] { background-image: url('/images/flags/tw.png'); } .flag-icon-tz, .flag-icon[data-country="TZ"] { background-image: url('/images/flags/tz.png'); } .flag-icon-ua, .flag-icon[data-country="UA"] { background-image: url('/images/flags/ua.png'); } .flag-icon-ug, .flag-icon[data-country="UG"] { background-image: url('/images/flags/ug.png'); } .flag-icon-um, .flag-icon[data-country="UM"] { background-image: url('/images/flags/um.png'); } .flag-icon-us, .flag-icon[data-country="US"] { background-image: url('/images/flags/us.png'); } .flag-icon-uy, .flag-icon[data-country="UY"] { background-image: url('/images/flags/uy.png'); } .flag-icon-uz, .flag-icon[data-country="UZ"] { background-image: url('/images/flags/uz.png'); } .flag-icon-va, .flag-icon[data-country="VA"] { background-image: url('/images/flags/va.png'); } .flag-icon-vc, .flag-icon[data-country="VC"] { background-image: url('/images/flags/vc.png'); } .flag-icon-ve, .flag-icon[data-country="VE"] { background-image: url('/images/flags/ve.png'); } .flag-icon-vg, .flag-icon[data-country="VG"] { background-image: url('/images/flags/vg.png'); } .flag-icon-vi, .flag-icon[data-country="VI"] { background-image: url('/images/flags/vi.png'); } .flag-icon-vn, .flag-icon[data-country="VN"] { background-image: url('/images/flags/vn.png'); } .flag-icon-vu, .flag-icon[data-country="VU"] { background-image: url('/images/flags/vu.png'); } .flag-icon-wf, .flag-icon[data-country="WF"] { background-image: url('/images/flags/wf.png'); } .flag-icon-ws, .flag-icon[data-country="WS"] { background-image: url('/images/flags/ws.png'); } .flag-icon-xk, .flag-icon[data-country="XK"] { background-image: url('/images/flags/xk.png'); } .flag-icon-ye, .flag-icon[data-country="YE"] { background-image: url('/images/flags/ye.png'); } .flag-icon-yt, .flag-icon[data-country="YT"] { background-image: url('/images/flags/yt.png'); } .flag-icon-za, .flag-icon[data-country="ZA"] { background-image: url('/images/flags/za.png'); } .flag-icon-zm, .flag-icon[data-country="ZM"] { background-image: url('/images/flags/zm.png'); } .flag-icon-zw, .flag-icon[data-country="ZW"] { background-image: url('/images/flags/zw.png'); } .airport-codes-container { display: flex; align-items: flex-start; gap: 2px; } .airport-codes-inline { flex-direction: row; align-items: center; } .airport-codes-stacked { flex-direction: column; align-items: flex-start; gap: 4px; } .airport-code-separator { color: var(--color-text-faint); font-weight: 300; margin: 0 1px; opacity: 0.6; font-size: 0.875em; } .airport-code-item { display: flex; flex-direction: column; align-items: center; gap: 1px; } .airport-code-type { font-size: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-faint); line-height: 1; font-family: var(--font-body); } .airport-code-value { font-weight: 600; letter-spacing: 0.5px; color: var(--color-text); line-height: 1.1; } .airport-code-small .airport-code-type { font-size: 7px; } .airport-code-small .airport-code-value { font-size: 0.875rem; } .airport-code-medium .airport-code-type { font-size: 8px; } .airport-code-medium .airport-code-value { font-size: 1.25rem; } .airport-code-large .airport-code-type { font-size: 9px; } .airport-code-large .airport-code-value { font-size: 1.1rem; } .airport-code-xlarge .airport-code-type { font-size: 10px; } .airport-code-xlarge .airport-code-value { font-size: 2rem; } .airport-code-empty { color: var(--color-text-faint); font-style: italic; } .route-display .airport-codes-container, .airport-detail .airport-codes-container { justify-content: center; } .route-display .airport-code-item { min-width: 48px; } .route-display .airport-code-value { color: var(--color-text); } .airport-codes-stacked .airport-code-item { align-items: flex-start; } .airport-codes-stacked .airport-code-separator { display: none; } @media (max-width: 768px) { .airport-code-large .airport-code-value { font-size: 1.25rem; } .airport-code-xlarge .airport-code-value { font-size: 1.5rem; } .airport-code-type { font-size: 7px; } } .search-container .form-row-single, .search-container .form-row-single .date-group { overflow: visible; } .date-range-wrapper { position: relative; } .date-range-wrapper.date-range-picker-open { z-index: 40; } .search-container:has(.date-range-picker-open) { z-index: 10050; } .date-range-picker-dropdown { position: absolute; top: calc(100% + 6px); left: 0; width: 320px; max-width: min(320px, calc(100vw - 24px)); background: var(--color-surface-raised); border: none; border-radius: 16px; box-shadow: var(--shadow-surface-lg); z-index: 10000; display: flex; flex-direction: column; font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; -webkit-font-smoothing: antialiased; animation: date-picker-in 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .date-range-picker-dropdown.is-above { top: auto; bottom: calc(100% + 6px); } .date-range-picker-dropdown.is-align-right { left: auto; right: 0; } @keyframes date-picker-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .date-picker-backdrop { display: none; position: fixed; inset: 0; background: var(--color-overlay); z-index: 9999; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .date-range-quick-select { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--color-border-subtle); display: flex; gap: 0.375rem; flex-wrap: wrap; } .quick-select-btn { padding: 0.375rem 0.75rem; border: none; border-radius: 980px; background: var(--color-control); font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .quick-select-btn:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-dark); } .date-range-calendars { display: block; padding: 0.625rem 0.875rem 0.75rem; flex: 1; overflow-y: auto; min-height: 0; } .date-range-calendar-month .calendar-month-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; padding: 0 0.125rem; } .date-range-calendar-month .calendar-month-label { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); } .date-range-calendar-month .calendar-nav-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--color-control); color: var(--color-text); cursor: pointer; transition: background 0.2s ease; } .date-range-calendar-month .calendar-nav-btn:hover { background: var(--color-control-hover); color: var(--color-text); } .date-range-calendar-month .calendar-days-header { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.125rem; margin-bottom: 0.375rem; } .date-range-calendar-month .calendar-day-label { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--color-text-muted); padding: 0.125rem 0; } .date-range-calendar-month .calendar-days-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.125rem; } .date-range-calendar-month .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 400; letter-spacing: -0.01em; color: var(--color-text); border-radius: 50%; cursor: pointer; transition: background 0.15s ease; position: relative; } .date-range-calendar-month .calendar-day-empty { cursor: default; } .date-range-calendar-month .calendar-day:hover:not(.calendar-day-disabled, .calendar-day-empty) { background: var(--color-control-hover); } .date-range-calendar-month .calendar-day-disabled { color: var(--color-text-faint); } .date-range-calendar-month .calendar-day-today { font-weight: 600; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 55%, transparent); } .date-range-calendar-month .calendar-day-today::after { display: none; } .date-range-picker-dropdown .calendar-day-range-start, .date-range-picker-dropdown .calendar-day-range-end { background: var(--primary) !important; color: var(--primary-contrast) !important; font-weight: 600; border-radius: 50% !important; box-shadow: none; } .date-range-picker-dropdown .calendar-day-in-range { background: color-mix(in srgb, var(--primary) 14%, transparent) !important; color: var(--color-text); border-radius: 0; } .date-range-picker-dropdown .calendar-day-range-start.calendar-day-in-range, .date-range-picker-dropdown .calendar-day-range-end.calendar-day-in-range { border-radius: 50% !important; } .date-range-picker-dropdown .calendar-day-range-start:not(.calendar-day-range-end) { border-radius: 50% 0 0 50% !important; } .date-range-picker-dropdown .calendar-day-range-end:not(.calendar-day-range-start) { border-radius: 0 50% 50% 0 !important; } .date-range-picker-dropdown .calendar-day-range-start.calendar-day-range-end { border-radius: 50% !important; } .date-range-picker-dropdown .calendar-day-preview { background: color-mix(in srgb, var(--primary) 8%, transparent) !important; border-radius: 0; } .date-range-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.875rem; border-top: 1px solid var(--color-border-subtle); gap: 0.5rem; background: var(--color-surface-raised); border-radius: 0 0 16px 16px; } .date-range-clear-btn, .date-range-apply-btn { min-height: 36px; padding: 0.4375rem 1rem; border-radius: 980px; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; transition: background 0.2s ease, opacity 0.2s ease; } .date-range-clear-btn { background: var(--color-control); border: none; color: var(--color-text); } .date-range-clear-btn:hover { background: var(--color-control-hover); border: none; transform: none; } .date-range-apply-btn { background: var(--primary); border: none; color: var(--primary-contrast); flex: 1; max-width: none; } .date-range-apply-btn:hover { background: var(--primary-hover); transform: none; box-shadow: none; } @media (max-width: 768px) { body.date-picker-modal-open { overflow: hidden; } .date-range-picker-dropdown { position: fixed !important; inset: auto !important; left: 50% !important; top: 50% !important; bottom: auto !important; right: auto !important; transform: translate(-50%, -50%) !important; width: calc(100vw - 32px) !important; max-width: 400px !important; max-height: min(calc(100vh - 32px), 600px) !important; animation: date-picker-modal-in 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .date-range-picker-dropdown.is-above, .date-range-picker-dropdown.is-align-right { left: 50% !important; right: auto !important; bottom: auto !important; } @keyframes date-picker-modal-in { from { opacity: 0; transform: translate(-50%, -48%) scale(0.96) !important; } to { opacity: 1; transform: translate(-50%, -50%) scale(1) !important; } } .date-picker-backdrop { display: block; } .date-range-calendar-month .calendar-nav-btn { width: 44px; height: 44px; } .date-range-footer { flex-direction: row; } .date-range-clear-btn, .date-range-apply-btn { width: auto; } } @media (max-width: 480px) { .date-range-picker-dropdown { width: calc(100vw - 20px) !important; max-height: min(calc(100vh - 20px), 550px) !important; } .date-range-quick-select { padding: 0.625rem 0.75rem; } .quick-select-btn { font-size: 12px; padding: 0.3125rem 0.625rem; } } .prebook-modal { --pb-bg: #ffffff; --pb-surface: #ffffff; --pb-text: #0e1a2c; --pb-secondary: #3e4b5e; --pb-label: #6b7686; --pb-separator: rgba(14, 26, 44, 0.12); --pb-accent: #2f6fed; --pb-cta: #2b4666; --pb-cta-ink: #ffffff; --pb-footer-bg: #ffffff; --pb-menu-bg: #ffffff; --pb-preview-bg: #f5f7fa; --pb-disclaimer-bg: #eceff3; --pb-disclaimer-bg-end: #eceff3; --pb-disclaimer-highlight: transparent; --pb-disclaimer-item: #3e4b5e; --pb-search-focus-bg: #ffffff; --pb-placeholder-flag-start: #e6eaf0; --pb-placeholder-flag-end: #eceff3; --pb-remove-bg: rgba(14, 26, 44, 0.08); --pb-remove-color: #6b7686; --pb-remove-hover-bg: rgba(14, 26, 44, 0.12); --pb-link: #2560d6; --pb-route-via-bg: rgba(47, 111, 237, 0.1); --pb-route-via-color: #2560d6; --pb-radius: 0; --pb-radius-inner: 0; --pb-font: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; } :root[data-theme="dark"] .prebook-modal { --pb-bg: #12141a; --pb-surface: #12141a; --pb-text: #f2f4f7; --pb-secondary: #b8c0cc; --pb-label: #7c8797; --pb-separator: rgba(255, 255, 255, 0.12); --pb-accent: #5b8cff; --pb-cta: #4a6a8f; --pb-footer-bg: #12141a; --pb-menu-bg: #12141a; --pb-preview-bg: #181b22; --pb-disclaimer-bg: #181b22; --pb-disclaimer-bg-end: #181b22; --pb-disclaimer-item: #b8c0cc; --pb-search-focus-bg: #12141a; --pb-placeholder-flag-start: #1c2028; --pb-placeholder-flag-end: #181b22; --pb-remove-bg: rgba(255, 255, 255, 0.08); --pb-remove-color: #7c8797; --pb-remove-hover-bg: rgba(255, 255, 255, 0.14); --pb-link: #5b8cff; --pb-route-via-bg: rgba(91, 140, 255, 0.14); --pb-route-via-color: #5b8cff; } .prebook-modal { position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(14, 26, 44, 0.28); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); font-family: var(--pb-font); } .prebook-modal.active { display: flex; } .prebook-modal--viewport-framed { transform: none; transition: none; } .prebook-modal__panel { display: flex; flex-direction: column; width: min(100%, 420px); max-height: min(90dvh, 680px); overflow: hidden; overscroll-behavior: contain; border: 1px solid var(--pb-separator); border-radius: var(--pb-radius); background: var(--pb-bg); box-shadow: none; } .prebook-modal__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 18px 16px; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; } .prebook-modal__body::-webkit-scrollbar { width: 4px; } .prebook-modal__body::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 0; } .prebook-modal__toolbar { position: relative; z-index: 2; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; background: var(--pb-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--pb-separator); } .prebook-modal__title { margin: 0; font-size: 1.25rem; line-height: 1.2; font-weight: 300; letter-spacing: -0.02em; color: var(--pb-text); } .prebook-modal__close { width: 30px; height: 30px; border: 1px solid var(--pb-separator); border-radius: 0; background: transparent; color: var(--pb-secondary); font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; box-shadow: none; } .prebook-modal__close:hover { color: var(--pb-text); background: var(--pb-surface); } .prebook-modal__trip { padding: 16px; border: 1px solid var(--pb-separator); border-radius: var(--pb-radius-inner); background: var(--pb-surface); box-shadow: none; } .prebook-modal__route { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 500; letter-spacing: -0.02em; color: var(--pb-text); } .prebook-modal__route-endpoints { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; } .prebook-modal__route-arrow { color: var(--pb-label); font-weight: 500; } .prebook-modal__route-via { display: inline-flex; margin-top: 8px; padding: 4px 10px; border-radius: 0; background: var(--pb-route-via-bg); color: var(--pb-route-via-color); font-size: 12px; font-weight: 600; } .prebook-modal__trip-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; font-size: 13px; line-height: 1.35; color: var(--pb-secondary); } .prebook-modal__trip-meta-dot { color: var(--pb-label); } .prebook-modal__price { margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--pb-separator); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--pb-text); font-variant-numeric: tabular-nums; } .prebook-modal__price--empty { font-size: 15px; font-weight: 500; color: var(--pb-label); } .prebook-modal__group { margin-top: 14px; border: 1px solid var(--pb-separator); border-radius: var(--pb-radius-inner); background: var(--pb-surface); overflow: visible; box-shadow: none; } .prebook-modal__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; } .prebook-modal__row--passengers { align-items: center; min-height: 72px; padding: 14px 16px; } .prebook-modal__row-copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; } .prebook-modal__row--passengers .prebook-modal__row-label { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; } .prebook-modal__row--passengers .prebook-modal__row-hint { margin: 0; font-size: 13px; line-height: 1.35; } .prebook-modal__row + .prebook-modal__row, .prebook-modal__row + .prebook-modal__row-block { border-top: 0.5px solid var(--pb-separator); } .prebook-modal__row-label { font-size: 15px; font-weight: 500; color: var(--pb-text); } .prebook-modal__row-hint { margin: -6px 16px 12px; font-size: 12px; line-height: 1.4; color: var(--pb-secondary); } .prebook-modal__stepper { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 4px; border-radius: 0; background: var(--pb-preview-bg); } .prebook-modal__stepper-btn { width: 34px; height: 34px; border: none; border-radius: 0; background: var(--pb-surface); color: var(--pb-text); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: none; } .prebook-modal__stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; } .prebook-modal__stepper-value { min-width: 28px; text-align: center; font-size: 17px; font-weight: 650; color: var(--pb-text); font-variant-numeric: tabular-nums; } .prebook-modal__row-block { padding: 12px 16px 14px; } .prebook-modal__row-block .prebook-modal__row-label { display: block; margin-bottom: 10px; } .prebook-country-picker { position: relative; } .prebook-country-picker--headless { position: absolute; width: 0; height: 0; overflow: visible; pointer-events: none; } .prebook-country-picker--headless .prebook-country-picker__trigger { display: none; } .prebook-country-picker--headless .prebook-country-picker__menu, .prebook-country-picker--headless .prebook-country-sheet { pointer-events: auto; } .prebook-country-picker__trigger { width: 100%; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--pb-separator); border-radius: 0; background: var(--pb-bg); color: var(--pb-text); font-size: 15px; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .prebook-country-picker__trigger:hover { border-color: var(--color-border-strong); } .prebook-country-picker.is-open .prebook-country-picker__trigger, .prebook-country-picker__trigger:focus-visible { outline: none; border-color: var(--pb-accent); box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.16); } .prebook-country-picker__trigger-flag { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; } .prebook-country-picker__placeholder-flag { display: inline-block; width: 1.2rem; height: 0.82rem; border-radius: 3px; background: linear-gradient( 180deg, var(--pb-placeholder-flag-start) 0%, var(--pb-placeholder-flag-end) 100% ); } .prebook-country-picker__trigger-label { flex: 1; text-align: left; color: var(--pb-secondary); } .prebook-country-picker__chevron { color: var(--pb-label); font-size: 13px; } .prebook-country-picker__menu { position: absolute; top: calc(100% + 6px); bottom: auto; left: 0; right: 0; z-index: 5; border-radius: 0; border: 1px solid var(--pb-separator, var(--color-border-subtle)); background: var(--pb-menu-bg, var(--color-surface-raised)); box-shadow: none; overflow: hidden; } .prebook-country-picker.is-open-up .prebook-country-picker__menu { top: auto; bottom: calc(100% + 6px); } .prebook-country-picker__menu[style*='position: fixed'] { right: auto; } .prebook-country-picker__search-wrap { padding: 10px 10px 0; } .prebook-country-picker__search { width: 100%; height: 38px; padding: 0 12px; border: 0.5px solid var(--pb-separator, var(--color-border-subtle)); border-radius: 0; background: var(--pb-bg, var(--color-control)); font-size: 14px; color: var(--pb-text, var(--color-text)); } .prebook-country-picker__search:focus { outline: none; border-color: var(--pb-accent, #2f6fed); background: var(--pb-search-focus-bg, var(--color-surface)); } .prebook-country-picker__options { max-height: 200px; overflow: auto; padding: 8px; overscroll-behavior: contain; background: var(--pb-menu-bg, var(--color-surface-raised)); } .prebook-country-picker__option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none; border-radius: 0; background: transparent; color: var(--pb-text, var(--color-text)); font-size: 14px; text-align: left; cursor: pointer; } .prebook-country-picker__option:hover, .prebook-country-picker__option:focus-visible { outline: none; background: rgba(47, 111, 237, 0.1); } .prebook-country-picker__option-flag { width: 1.28rem; height: 0.86rem; } .prebook-country-picker__empty { padding: 14px 10px; color: var(--pb-secondary, var(--color-text-secondary)); font-size: 13px; text-align: center; } .prebook-modal__citizenship-section { margin-top: 18px; } .prebook-modal__citizenship-header { margin-bottom: 10px; } .prebook-modal__citizenship-title { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; color: var(--pb-text); } .prebook-modal__citizenship-subtitle { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--pb-secondary); } .prebook-modal__citizenship-card { border: 1px solid var(--pb-separator); border-radius: var(--pb-radius-inner); background: var(--pb-surface); box-shadow: none; overflow: hidden; } .prebook-modal__citizenship-empty { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 10px; } .prebook-modal__citizenship-empty[hidden], .prebook-modal__citizenship-list[hidden] { display: none !important; } .prebook-modal__citizenship-empty-icon { flex: 0 0 auto; margin-top: 1px; color: var(--pb-label); } .prebook-modal__citizenship-empty-text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--pb-secondary); } .prebook-modal__citizenship-list { display: flex; flex-direction: column; } .prebook-modal__citizenship-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid var(--pb-separator); } .prebook-modal__citizenship-item:last-of-type { border-bottom: none; } .prebook-modal__citizenship-item-flag { flex: 0 0 auto; display: inline-flex; align-items: center; } .prebook-modal__citizenship-item-flag img, .prebook-modal__citizenship-item-flag .booking-country-flag { width: 1.5rem; height: 1rem; border-radius: 2px; object-fit: cover; } .prebook-modal__citizenship-item-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .prebook-modal__citizenship-item-label { font-size: 12px; line-height: 1.2; color: var(--pb-label); } .prebook-modal__citizenship-item-value { font-size: 16px; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; color: var(--pb-text); } .prebook-modal__citizenship-item-remove { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 0; background: var(--pb-remove-bg); color: var(--pb-remove-color); font-size: 15px; line-height: 1; cursor: pointer; padding: 0; } .prebook-modal__citizenship-item-remove:hover, .prebook-modal__citizenship-item-remove:focus-visible { outline: none; background: var(--pb-remove-hover-bg); } .prebook-modal__citizenship-add { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; border: none; border-top: none; background: transparent; color: var(--pb-link); font-size: 16px; font-weight: 500; text-align: left; cursor: pointer; } .prebook-modal__citizenship-card--has-entries .prebook-modal__citizenship-add { border-top: 0.5px solid var(--pb-separator); } .prebook-modal__citizenship-add:disabled { opacity: 0.45; cursor: not-allowed; } .prebook-modal__citizenship-add-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; background: var(--pb-link); color: #fff; font-size: 18px; line-height: 1; font-weight: 500; } .prebook-modal__citizenship-add-label { line-height: 1.2; } .prebook-modal__citizenship-footnote { margin: 10px 4px 0; font-size: 13px; line-height: 1.45; color: var(--pb-secondary); } .prebook-modal__error { margin-top: 12px; margin-bottom: 14px; padding: 11px 14px; border-radius: 0; background: rgb(255 59 48 / 10%); color: #c41e12; font-size: 13px; line-height: 1.4; } .prebook-modal__footer { display: grid; flex-shrink: 0; grid-template-columns: 1fr 1.2fr; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pb-separator); background: var(--pb-footer-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .prebook-modal__footer--single { grid-template-columns: 1fr; } .prebook-modal__footer--single .prebook-modal__btn { width: 100%; height: 48px; border-radius: 0; font-size: 0.75rem; font-weight: 500; } .prebook-modal__btn { height: 44px; border-radius: 0; font-size: 0.75rem; font-weight: 500; cursor: pointer; letter-spacing: 0.16em; text-transform: uppercase; } .prebook-modal__btn--ghost { border: 1px solid var(--pb-separator); background: var(--pb-surface); color: var(--pb-text); } .prebook-modal__btn--primary { border: none; background: var(--pb-cta); color: var(--pb-cta-ink); box-shadow: none; } .prebook-modal__btn--primary:disabled { opacity: 0.55; cursor: not-allowed; } .prebook-modal--country-open .prebook-modal__body { overflow: hidden; } .prebook-country-sheet__panel { will-change: transform; } .prebook-country-sheet { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; } .prebook-country-sheet[hidden] { display: none !important; } .prebook-country-sheet__backdrop { position: absolute; inset: 0; border: none; background: rgb(0 0 0 / 18%); cursor: pointer; } .prebook-country-sheet__panel { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 260px; max-height: calc(100dvh - 10px); overflow: hidden; border-radius: 0; background: var(--pb-surface); box-shadow: none; border-top: 1px solid var(--pb-separator); } .prebook-country-sheet__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; border-bottom: 0.5px solid var(--pb-separator); } .prebook-country-sheet__title { font-size: 15px; font-weight: 400; color: var(--pb-text); } .prebook-country-sheet__done { border: none; background: transparent; color: var(--pb-accent); font-size: 15px; font-weight: 500; cursor: pointer; padding: 4px 0; } .prebook-country-sheet .prebook-country-picker__search-wrap { padding: 10px 12px 0; } .prebook-country-sheet .prebook-country-picker__options { flex: 1 1 auto; min-height: 0; max-height: none; padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 520px) { .prebook-modal { align-items: flex-end; padding: 0; } .prebook-modal--viewport-framed { align-items: stretch; justify-content: flex-end; padding: 0; } .prebook-modal--viewport-framed .prebook-modal__panel:not(.prebook-modal__panel--success) { width: 100%; max-height: 100%; height: 100%; border-radius: 0; } .prebook-modal__panel:not(.prebook-modal__panel--success) { position: relative; width: 100%; height: fit-content; max-height: 100dvh; border-radius: 0; overflow: hidden; } .prebook-modal__body { flex: 0 1 auto; padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)); } .prebook-modal--scrollable .prebook-modal__body { flex: 1 1 auto; min-height: 0; } .prebook-modal__toolbar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); } .prebook-modal__footer { grid-template-columns: 1fr 1fr; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); } .prebook-modal__footer--single { display: flex; flex-direction: column; grid-template-columns: none; } .prebook-modal__footer--single .prebook-modal__btn { width: 100%; } .prebook-country-sheet .prebook-country-picker__search { height: 40px; font-size: 16px; } } body.prebook-modal-open { overflow: hidden; } @media (max-width: 767px) { html.prebook-modal-open, body.prebook-modal-open { overscroll-behavior: none; touch-action: none; height: 100%; } body.prebook-modal-open { position: fixed; left: 0; right: 0; width: 100%; } } .prebook-modal--success { align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px)); } .prebook-modal__panel--success { display: flex; flex-direction: column; width: min(100%, 520px); height: fit-content; max-height: min(90dvh, 760px); overflow: hidden; padding: 0; background: var(--pb-surface); border: 1px solid var(--pb-separator); border-radius: 0; box-shadow: none; } .prebook-success__icon { display: none !important; } .prebook-success__scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar, rgba(14, 26, 44, 0.22)) transparent; } .prebook-success__scroll::-webkit-scrollbar { width: 4px; } .prebook-success__scroll::-webkit-scrollbar-thumb { background: var(--color-scrollbar, rgba(14, 26, 44, 0.22)); } .prebook-success__content { padding: 28px 28px 8px; } .prebook-success__hero { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .prebook-success__title { margin: 0; font-family: var(--pb-font); font-size: 1.75rem; line-height: 1.15; font-weight: 300; letter-spacing: -0.03em; color: var(--pb-text); } .prebook-success__lead { margin: 12px 0 0; align-self: stretch; width: 100%; font-size: 0.9375rem; line-height: 1.55; font-weight: 400; text-align: left; text-wrap: pretty; white-space: pre-line; color: var(--pb-secondary); } .prebook-success__note-text { margin: 16px 0 0; font-size: 0.875rem; line-height: 1.5; font-weight: 400; text-wrap: pretty; color: var(--pb-secondary); } .prebook-success__disclaimer { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--pb-separator); border-radius: 0; background: var(--pb-disclaimer-bg); box-shadow: none; } .prebook-success__disclaimer-lead { margin: 0; font-size: 0.9375rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--pb-text); } .prebook-success__disclaimer-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .prebook-success__disclaimer-item { position: relative; margin: 0; padding-left: 16px; font-size: 0.875rem; line-height: 1.5; color: var(--pb-disclaimer-item); } .prebook-success__disclaimer-item::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 0; background: var(--pb-cta, #2b4666); box-shadow: none; transform: translateY(-50%); } .prebook-success__disclaimer-foot { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--pb-separator); font-size: 0.875rem; line-height: 1.55; color: var(--pb-secondary); } .prebook-success__footer { flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 28px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pb-separator); background: var(--pb-surface); backdrop-filter: none; -webkit-backdrop-filter: none; } .prebook-success__footer--charter { padding-top: 8px; border-top: none; } .prebook-success__footer--charter .prebook-success__cta { margin-top: 0; padding-top: 0; border-top: none; } .prebook-success__option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--pb-separator); border-radius: 0; background: var(--pb-disclaimer-bg); box-shadow: none; cursor: pointer; user-select: none; } .prebook-success__option-input { position: relative; flex: 0 0 auto; display: block; width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin: 2px 0 0; padding: 0; border: none; border-radius: 0; background: var(--pb-surface); box-shadow: inset 0 0 0 1px var(--pb-separator); box-sizing: border-box; cursor: pointer; -webkit-appearance: none; appearance: none; } .prebook-success__option-input:checked { background: var(--pb-accent); box-shadow: inset 0 0 0 1px var(--pb-accent); } .prebook-success__option-input:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: translate(-50%, -58%) rotate(45deg); } .prebook-success__option-input:focus-visible, .prebook-success__option-input:checked:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--pb-accent); } .prebook-success__option-copy { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.55rem; min-width: 0; } .prebook-success__option-label { font-size: 0.875rem; line-height: 1.45; font-weight: 400; color: var(--pb-text); } .prebook-success__option-hint { font-size: 0.6875rem; line-height: 1.2; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pb-label); } .prebook-success__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--pb-separator); } .prebook-success__cta-notice { margin: 0; font-size: 0.8125rem; line-height: 1.5; font-weight: 400; text-align: left; color: var(--pb-label); } .prebook-success__error { margin: 0; padding: 10px 12px; border-radius: 0; background: rgb(196 30 18 / 8%); color: #c41e12; font-size: 0.8125rem; line-height: 1.4; text-align: left; } .prebook-success__btn { width: 100%; height: 48px; border: none; border-radius: 0; background: var(--pb-cta, #2b4666); color: var(--pb-cta-ink, #fff); font-family: var(--pb-font); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; box-shadow: none; } .prebook-success__btn:hover:not(:disabled) { background: color-mix(in srgb, var(--pb-cta, #2b4666) 88%, #000); box-shadow: none; } .prebook-success__btn:active:not(:disabled) { transform: none; opacity: 0.94; } .prebook-success__btn:disabled { opacity: 0.72; cursor: wait; } @media (max-width: 520px) { .prebook-modal--success { align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); } .prebook-modal__panel--success { width: min(100%, 520px); max-height: min(92dvh, 760px); border-radius: 0; } .prebook-success__content { padding: 22px 18px 8px; } .prebook-success__title { font-size: 1.5rem; } .prebook-success__lead, .prebook-success__disclaimer-lead { font-size: 0.875rem; } .prebook-success__disclaimer { margin-top: 18px; padding: 16px; } .prebook-success__disclaimer-item, .prebook-success__disclaimer-foot, .prebook-success__note-text { font-size: 0.8125rem; } .prebook-success__footer { gap: 12px; padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px)); } .prebook-success__option { padding: 12px 14px; } .prebook-success__cta-notice { font-size: 0.75rem; } } .booking-contact { --bc-ink: var(--pb-text); --bc-soft: var(--pb-secondary); --bc-faint: var(--pb-label); --bc-line: var(--pb-separator); --bc-line-strong: var(--pb-separator); --bc-accent: var(--pb-accent); --bc-accent-wash: rgb(47 111 237 / 12%); --bc-link: var(--pb-link); --bc-error: #d70015; --bc-display: var(--pb-font); margin-top: 24px; font-family: var(--pb-font); } .prebook-modal--studio .booking-contact, .sp-charter-modal .booking-contact { --bc-ink: var(--sp-ink); --bc-soft: var(--sp-ink-soft); --bc-faint: var(--sp-ink-faint); --bc-line: var(--sp-line); --bc-line-strong: var(--sp-line-strong); --bc-accent: var(--sp-accent); --bc-accent-wash: var(--sp-accent-wash); --bc-link: var(--sp-accent-deep); --bc-display: var(--sp-font-display); } .prebook-modal__studio-col--pax > .booking-contact:first-child { margin-top: 0; } .sp-charter-modal .booking-contact { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--bc-line); } .booking-contact__title { margin: 0; font-family: var(--bc-display); font-size: 1.15rem; font-weight: 700; font-stretch: 105%; line-height: 1.25; letter-spacing: -0.02em; color: var(--bc-ink); } .booking-contact__subtitle { margin: 6px 0 20px; font-size: 0.875rem; line-height: 1.45; color: var(--bc-soft); } .booking-contact__fields { display: grid; gap: 22px; } .booking-contact__field { display: grid; gap: 4px; min-width: 0; } .booking-contact__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .booking-contact__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bc-faint); } .booking-contact__tag { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--bc-link); } .booking-contact__input, .booking-contact .intl-phone-input { box-sizing: border-box; width: 100%; min-height: 44px; border: none; border-bottom: 1.5px solid var(--bc-line-strong); border-radius: 0; background: transparent; color: var(--bc-ink); font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .booking-contact__input { padding: 0; font-size: 1rem; font-weight: 550; letter-spacing: -0.01em; } .booking-contact__input:hover, .booking-contact .intl-phone-input:not(.is-disabled):hover { border-bottom-color: var(--bc-accent); } .booking-contact__input:focus, .booking-contact .intl-phone-input:not(.is-disabled):focus-within { outline: none; border-bottom-color: var(--bc-accent); box-shadow: 0 2px 0 0 var(--bc-accent-wash); } .booking-contact__input::placeholder, .booking-contact .intl-phone-input__number::placeholder { font-weight: 400; color: var(--bc-faint); } .booking-contact__input.is-invalid, .booking-contact .intl-phone-input.is-invalid { border-bottom-color: var(--bc-error); } .booking-contact__error, .booking-contact .intl-phone-input__error { margin: 4px 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--bc-error); } .booking-contact .intl-phone-input { position: relative; display: flex; align-items: center; } .booking-contact .intl-phone-input__code { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; height: 28px; margin: 0 14px 0 0; padding: 0 14px 0 0; border: none; border-right: 1px solid var(--bc-line); background: transparent; color: var(--bc-ink); font-family: inherit; font-size: 1rem; font-weight: 550; cursor: pointer; } .booking-contact .intl-phone-input__code:disabled { cursor: default; } .booking-contact .intl-phone-input__code:focus-visible { outline: none; color: var(--bc-accent); } .booking-contact .intl-phone-input__flag { display: inline-flex; width: 20px; height: 14px; align-items: center; justify-content: center; overflow: hidden; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%); } .booking-contact .intl-phone-input__placeholder-flag { display: inline-block; width: 20px; height: 14px; border-radius: 2px; background: linear-gradient( 180deg, var(--pb-placeholder-flag-start), var(--pb-placeholder-flag-end) ); } .booking-contact .intl-phone-input__dial { min-width: 2rem; white-space: nowrap; } .booking-contact .intl-phone-input.is-unknown-region .intl-phone-input__dial, .booking-contact .intl-phone-input__chevron { color: var(--bc-faint); } .booking-contact .intl-phone-input__chevron { font-size: 10px; line-height: 1; } .booking-contact .intl-phone-input__number { flex: 1; min-width: 0; margin: 0; padding: 0; border: none; background: transparent; color: var(--bc-ink); font-family: inherit; font-size: 1rem; font-weight: 550; letter-spacing: -0.01em; } .booking-contact .intl-phone-input__number:focus { outline: none; } .booking-contact .intl-phone-input__hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .booking-contact .intl-phone-input.is-disabled { border-bottom: 1px dashed var(--bc-line-strong); } .booking-contact .intl-phone-input.is-disabled .intl-phone-input__chevron { display: none; } .booking-contact .intl-phone-input__number:disabled { color: var(--bc-ink); -webkit-text-fill-color: var(--bc-ink); opacity: 1; } .booking-contact__note { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--bc-faint); } .booking-contact__nudge { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--bc-line); font-size: 0.8125rem; line-height: 1.5; color: var(--bc-soft); } .booking-contact__link { color: var(--bc-link); font-weight: 600; text-decoration: none; } .booking-contact__link:hover, .booking-contact__link:focus-visible { text-decoration: underline; text-underline-offset: 2px; } .profile-container .profile-form-group__body .intl-phone-input { background: var(--sf-bg); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--sf-separator); min-height: 38px; align-items: stretch; } .profile-container .profile-form-group__body .intl-phone-input:focus-within { background: var(--sf-bg); box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.4), 0 0 0 3px rgba(0, 122, 255, 0.1); } body.profile-page .profile-form-group__body .intl-phone-input { border-radius: 10px; background: var(--color-control); box-shadow: inset 0 0 0 1px var(--color-border-subtle); min-height: 46px; } body.profile-page .profile-form-group__body .intl-phone-input:focus-within { background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px var(--primary-light); } body.profile-page .profile-form-group__body .intl-phone-input__number { font-size: 17px; letter-spacing: -0.022em; color: var(--color-text); } body.profile-page .profile-form-group__body .intl-phone-input__number::placeholder { color: var(--color-text-faint); } body.profile-page .profile-form-group__body .intl-phone-input__dial { font-size: 16px; font-weight: 500; color: var(--color-text); } body.profile-page .profile-form-field--error .intl-phone-input.is-invalid { background: rgb(255 59 48 / 6%); box-shadow: inset 0 0 0 1.5px rgb(255 59 48 / 62%), 0 0 0 4px rgb(255 59 48 / 10%); } body.profile-page .profile-form-field--error .intl-phone-input.is-invalid:focus-within { background: var(--color-surface); box-shadow: inset 0 0 0 1.5px rgb(255 59 48 / 72%), 0 0 0 4px rgb(255 59 48 / 14%); } body.profile-page .profile-form-field--error .intl-phone-input__error { color: #d70015; font-weight: 500; } .profile-container .profile-form-group__body .intl-phone-input__code { padding: 0.4375rem 0.5rem 0.4375rem 0.625rem; border-radius: 8px 0 0 8px; font-size: 14px; gap: 0.3125rem; } .profile-container .profile-form-group__body .intl-phone-input__flag { width: 20px; height: 14px; } .profile-container .profile-form-group__body .intl-phone-input__flag .flag-icon { transform: scale(1.08); } .profile-container .profile-form-group__body .intl-phone-input__dial { min-width: 1.875rem; } .profile-container .profile-form-group__body .intl-phone-input__chevron { font-size: 10px; } .profile-container .profile-form-group__body .intl-phone-input__number { padding: 0.4375rem 0.625rem 0.4375rem 0.5rem; border-radius: 0 8px 8px 0; font-size: 15px; text-align: left; } .profile-container .intl-phone-input-host { margin: 0; } .profile-container .intl-phone-input-host .intl-phone-input__error { padding: 0 0 0.25rem; } .profile-container .intl-phone-input { position: relative; display: flex; align-items: stretch; gap: 0; border-radius: var(--sf-radius-field); background: var(--sf-fill); box-shadow: inset 0 0 0 1px transparent; transition: background 0.2s ease, box-shadow 0.2s ease; } .profile-container .intl-phone-input:focus-within { background: var(--sf-bg); box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.14), inset 0 0 0 1px rgba(0, 194, 168, 0.22); } .profile-container .intl-phone-input.is-invalid { box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12), inset 0 0 0 1px rgba(255, 59, 48, 0.35); } .profile-container .intl-phone-input.is-disabled { opacity: 0.55; pointer-events: none; } .profile-container .intl-phone-input__code { display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0; margin: 0; padding: 0.75rem 0.625rem 0.75rem 0.875rem; border: none; border-right: 1px solid var(--sf-separator); border-radius: var(--sf-radius-field) 0 0 var(--sf-radius-field); background: transparent; color: var(--sf-text); font-family: var(--sf-font); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; cursor: pointer; transition: background 0.2s ease; } .profile-container .intl-phone-input__code:hover { background: var(--color-control-hover); } .profile-container .intl-phone-input__code:focus-visible { outline: none; background: rgba(0, 194, 168, 0.08); } .profile-container .intl-phone-input__flag { display: inline-flex; width: 22px; height: 16px; align-items: center; justify-content: center; overflow: hidden; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .profile-container .intl-phone-input__flag .flag-icon { transform: scale(1.15); } .profile-container .intl-phone-input__placeholder-flag { display: inline-block; width: 22px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, var(--color-control), var(--color-surface-strong)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .profile-container .intl-phone-input.is-unknown-region .intl-phone-input__dial { color: var(--sf-label); } .profile-container .intl-phone-input__dial { min-width: 2.25rem; text-align: left; white-space: nowrap; } .profile-container .intl-phone-input__chevron { color: var(--sf-label); font-size: 11px; line-height: 1; } .profile-container .intl-phone-input__number { flex: 1; min-width: 0; margin: 0; padding: 0.75rem 0.875rem 0.75rem 0.75rem; border: none; border-radius: 0 var(--sf-radius-field) var(--sf-radius-field) 0; background: transparent; color: var(--sf-text); font-family: var(--sf-font); font-size: 17px; font-weight: 400; letter-spacing: -0.022em; } .profile-container .intl-phone-input__number::placeholder { color: var(--color-text-faint); } .profile-container .intl-phone-input__number:focus { outline: none; } .profile-container .intl-phone-input__hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .profile-container .intl-phone-input__error { margin-top: 0.375rem; font-family: var(--sf-font); font-size: 12px; line-height: 1.35; color: #ff3b30; } .intl-phone-menu { position: fixed; z-index: 10200; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--color-surface-glass-strong); box-shadow: var(--shadow-surface-lg); backdrop-filter: blur(20px); } .intl-phone-menu__search-wrap { padding: 0.625rem 0.75rem 0.5rem; border-bottom: 1px solid var(--sf-separator, rgba(60, 60, 67, 0.14)); } .intl-phone-menu__search { width: 100%; margin: 0; padding: 0.625rem 0.75rem; border: none; border-radius: 10px; background: var(--color-control); color: var(--color-text); font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; font-size: 16px; } .intl-phone-menu__search:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.14); } .intl-phone-menu__options { overflow-y: auto; overscroll-behavior: contain; padding: 0.25rem; } .intl-phone-menu__option { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.625rem 0.75rem; border: none; border-radius: 10px; background: transparent; color: var(--color-text); font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; font-size: 15px; text-align: left; cursor: pointer; transition: background 0.15s ease; } .intl-phone-menu__option:hover, .intl-phone-menu__option:focus-visible { background: rgba(0, 194, 168, 0.08); outline: none; } .intl-phone-menu__option-flag { flex-shrink: 0; } .intl-phone-menu__option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .intl-phone-menu__option-dial { flex-shrink: 0; color: var(--color-text-muted); font-size: 14px; font-variant-numeric: tabular-nums; } .intl-phone-menu__empty { padding: 1rem 0.75rem; color: var(--color-text-muted); font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; font-size: 14px; text-align: center; } .intl-phone-sheet { position: fixed; inset: 0; z-index: 10200; display: flex; flex-direction: column; justify-content: flex-end; } .intl-phone-sheet__backdrop { position: absolute; inset: 0; border: none; background: var(--color-overlay); cursor: pointer; } .intl-phone-sheet__panel { position: relative; display: flex; max-height: min(78vh, 560px); flex-direction: column; border-radius: 18px 18px 0 0; background: var(--color-surface-raised); box-shadow: var(--shadow-surface-lg); } .intl-phone-sheet__header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem 0.5rem; border-bottom: 1px solid var(--color-border-subtle); } .intl-phone-sheet__title { font-family: -apple-system, blinkmacsystemfont, "SF Pro Display", system-ui, sans-serif; font-size: 17px; font-weight: 600; color: var(--color-text); } .intl-phone-sheet__done { border: none; border-radius: 8px; background: transparent; color: var(--primary, #00c2a8); font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; } @media (max-width: 767px) { .profile-container .intl-phone-input:focus-within, .profile-container .profile-form-group__body .intl-phone-input:focus-within { box-shadow: inset 0 0 0 1px rgba(0, 194, 168, 0.45); } .profile-container .intl-phone-input__number, .profile-container .profile-form-group__body .intl-phone-input__number { font-size: 16px; touch-action: manipulation; } .profile-container .intl-phone-input__code { padding-left: 0.75rem; font-size: 16px; touch-action: manipulation; } } html:has(body.sp-page) { --primary: #2f6fed; --primary-hover: #3d7af5; --primary-light: rgba(47, 111, 237, 0.1); --primary-dark: #2560d6; --color-control-active: rgba(47, 111, 237, 0.1); --color-focus-ring: rgba(47, 111, 237, 0.22); --color-browser-chrome: #2f6fed; --color-scrollbar: rgba(47, 111, 237, 0.42); --color-scrollbar-hover: rgba(47, 111, 237, 0.7); scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track); } html[data-theme="dark"]:has(body.sp-page) { --primary: #5b8cff; --primary-hover: #6e9aff; --primary-light: rgba(91, 140, 255, 0.16); --primary-dark: #4a7af0; --color-control-active: rgba(91, 140, 255, 0.18); --color-focus-ring: rgba(91, 140, 255, 0.3); --color-browser-chrome: #0a0b0e; --color-scrollbar: rgba(91, 140, 255, 0.42); --color-scrollbar-hover: rgba(91, 140, 255, 0.7); scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track); } html:has(body.sp-page) ::-webkit-scrollbar-thumb { border-radius: 0; background: var(--color-scrollbar); } html:has(body.sp-page) ::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-hover); } .sp-page, .bp-page, .prebook-modal--studio { --sp-font-display: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; --sp-font-data: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; --sp-font-body: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; --sp-weight-hero: 200; --sp-weight-display: 300; --sp-weight-body: 400; --sp-weight-label: 500; --sp-ink: #0e1a2c; --sp-ink-soft: #3e4b5e; --sp-ink-faint: #6b7686; --sp-canvas: #f5f7fa; --sp-surface: #ffffff; --sp-surface-sunk: #eceff3; --sp-line: rgba(14, 26, 44, 0.12); --sp-line-strong: rgba(14, 26, 44, 0.18); --sp-card-stroke: rgba(14, 26, 44, 0.18); --sp-accent: #2f6fed; --sp-accent-deep: #2560d6; --sp-accent-ink: #ffffff; --sp-accent-wash: rgba(47, 111, 237, 0.1); --sp-cta: #2b4666; --sp-cta-ink: #ffffff; --primary: #2f6fed; --primary-hover: #3d7af5; --primary-light: rgba(47, 111, 237, 0.1); --primary-dark: #2560d6; --color-control-active: rgba(47, 111, 237, 0.1); --color-focus-ring: rgba(47, 111, 237, 0.22); --sp-shell: 1400px; --sp-gutter: clamp(16px, 2vw, 24px); --sp-radius: 0; --sp-radius-sm: 0; --sp-ease: cubic-bezier(0.22, 1, 0.36, 1); --sp-card-shadow: none; --sp-card-shadow-lift: none; --sp-hero-top: #e8eef5; --sp-hero-glow: rgba(47, 111, 237, 0.05); } :root[data-theme="dark"] .sp-page, :root[data-theme="dark"] .bp-page, :root[data-theme="dark"] .prebook-modal--studio { --sp-ink: #f2f4f7; --sp-ink-soft: #b8c0cc; --sp-ink-faint: #7c8797; --sp-canvas: #0a0b0e; --sp-surface: #12141a; --sp-surface-sunk: #181b22; --sp-line: rgba(255, 255, 255, 0.12); --sp-line-strong: rgba(255, 255, 255, 0.18); --sp-card-stroke: rgba(255, 255, 255, 0.18); --sp-accent: #5b8cff; --sp-accent-deep: #5b8cff; --sp-accent-ink: #ffffff; --sp-accent-wash: rgba(91, 140, 255, 0.14); --sp-cta: #4a6a8f; --sp-cta-ink: #ffffff; --primary: #5b8cff; --primary-hover: #6e9aff; --primary-light: rgba(91, 140, 255, 0.16); --primary-dark: #4a7af0; --color-control-active: rgba(91, 140, 255, 0.18); --color-focus-ring: rgba(91, 140, 255, 0.3); --sp-card-shadow: none; --sp-card-shadow-lift: none; --sp-hero-top: #050505; --sp-hero-glow: rgba(91, 140, 255, 0.12); } @keyframes sp-shimmer { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .sp-page *, .sp-page *::before, .sp-page *::after, .bp-page *, .bp-page *::before, .bp-page *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } .sp-page { margin: 0; background: var(--sp-canvas); color: var(--sp-ink); font-family: var(--sp-font-body); font-weight: var(--sp-weight-body); font-optical-sizing: auto; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .sp-shell { width: 100%; max-width: var(--sp-shell); margin-inline: auto; padding-inline: var(--sp-gutter); } .sp-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 12px 18px; background: var(--sp-accent); color: var(--sp-accent-ink); font-weight: 600; border-radius: 0 0 var(--sp-radius-sm) 0; } .sp-skip:focus { left: 0; } .sp-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--sp-font-body); font-size: 0.75rem; font-weight: var(--sp-weight-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sp-accent-deep); } .sp-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentcolor; opacity: 0.55; flex: none; } .sp-hero { position: relative; isolation: isolate; padding-block: clamp(44px, 7vh, 88px) clamp(36px, 5vh, 64px); background: linear-gradient(180deg, var(--sp-hero-top) 0%, var(--sp-canvas) 86%); } .sp-hero:has(+ .sp-results:not([hidden])) { padding-bottom: clamp(8px, 1vw, 14px); } .sp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(56% 52% at 74% 12%, var(--sp-hero-glow), transparent 70%); pointer-events: none; } .sp-hero__title { max-width: 22ch; margin: 0; font-family: var(--sp-font-display); font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: var(--sp-weight-hero); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; color: var(--sp-ink); } .sp-hero__subtitle { max-width: 28ch; margin: clamp(8px, 1.2vw, 14px) 0 0; font-family: var(--sp-font-display); font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: var(--sp-weight-display); line-height: 1.25; letter-spacing: -0.02em; color: var(--sp-ink-soft); } .sp-hero__lede { max-width: 58ch; margin: clamp(16px, 2vw, 24px) 0 0; font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.6; color: var(--sp-ink-soft); } .sp-primer { padding-block: clamp(40px, 6vw, 80px); } .sp-primer__title { margin: 0 0 clamp(24px, 3vw, 40px); font-family: var(--sp-font-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: var(--sp-weight-display); letter-spacing: -0.02em; color: var(--sp-ink); } .sp-primer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); } .sp-primer__card { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 30px); background: color-mix(in srgb, var(--sp-surface) 72%, transparent); border: 1px solid var(--sp-card-stroke); border-radius: var(--sp-radius); box-shadow: none; backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); } @media (prefers-reduced-transparency: reduce) { .sp-primer__card { background: var(--sp-surface); backdrop-filter: none; -webkit-backdrop-filter: none; } } .sp-primer__tag { margin: 0; font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-accent-deep); } .sp-primer__heading { margin: 0; font-family: var(--sp-font-display); font-size: 1.25rem; font-weight: var(--sp-weight-display); letter-spacing: -0.01em; color: var(--sp-ink); } .sp-primer__text { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--sp-ink-soft); } .sp-primer__fit { margin: auto 0 0; padding-top: 10px; font-size: 0.8125rem; font-weight: 500; color: var(--sp-ink-faint); } .sp-primer__note { max-width: 68ch; margin: clamp(20px, 2.6vw, 32px) 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--sp-ink-soft); } .sp-page .fa, .sp-page .fas, .sp-page .far, .sp-page .fab, .sp-page .fa-solid, .sp-page .fa-regular, .sp-page .fa-brands, .sp-page .fa::before, .sp-page .fas::before, .sp-page .far::before, .sp-page .fab::before, .sp-page .fa-solid::before, .sp-page .fa-regular::before, .sp-page .fa-brands::before { font-optical-sizing: none; font-variant-numeric: normal; } body:is(.sp-page, .rp-page, .cp-page):has(.bk-sky), html[data-theme="dark"] body:is(.sp-page, .rp-page, .cp-page):has(.bk-sky) { background: transparent; } .bk-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; animation: bk-sky-in 1.5s var(--sp-ease) both; } .bk-sky__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(var(--sky-scale)); filter: blur(var(--sky-blur)); transition: opacity 0.55s var(--sp-ease); } .bk-sky__photo--night { opacity: 0; } :root[data-theme="dark"] .bk-sky__photo--day { opacity: 0; } :root[data-theme="dark"] .bk-sky__photo--night { opacity: 1; } .bk-sky::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--sp-canvas) var(--sky-veil), transparent); } .booking-detail-page .sp-hero.bd-intro .sp-hero__lede, .booking-detail-page .booking-detail-back-link, .booking-detail-page .booking-detail-section__title, .booking-detail-page .booking-detail-section__subtitle { color: var(--sp-ink); } html:not([data-theme="dark"]) body:is(.sp-page, .rp-page, .cp-page):has(.bk-sky) .top-nav { --sh-text: #0e1a2c; --sh-label: rgba(14, 26, 44, 0.72); } body:is(.sp-page, .rp-page, .cp-page):has(.bk-sky) :is(.sp-hero, .pr-hero) { background: transparent; } .sp-page:has(.bk-sky) .sp-hero::after, body:is(.rp-page, .cp-page):has(.bk-sky) .pr-hero::before { content: none; } @keyframes bk-sky-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bk-sky { animation: none; } .bk-sky__photo { transition: none; } } @media (prefers-reduced-transparency: reduce) { .bk-sky::after { background: var(--sp-canvas); } } .sp-hero--photo { padding-block: clamp(44px, 5.2vw, 88px) clamp(36px, 3.6vw, 64px); background: transparent; } .sp-hero--photo::after { content: none; } .sp-search { margin-top: clamp(28px, 3.6vw, 44px); } .sp-search__row { display: block; } .sp-bar { --sp-bar-fill: color-mix(in srgb, var(--sp-surface) 74%, transparent); --sp-bar-fill-solid: color-mix(in srgb, var(--sp-surface) 94%, transparent); --sp-bar-separator: var(--color-border-subtle); --sp-bar-label: var(--color-text-muted); --sp-bar-radius: var(--sp-radius-sm); --sp-bar-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7); --sp-bar-blur: saturate(140%) blur(16px); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.2fr) minmax(12.5rem, 1fr) minmax(6.25rem, 0.38fr) auto; min-width: 0; padding: 0.375rem; background: var(--sp-bar-fill-solid); border: 1px solid color-mix(in srgb, #fff 62%, var(--sp-line)); border-radius: var(--sp-bar-radius); box-shadow: var(--sp-bar-shadow); transition: background 0.2s ease, border-color 0.2s ease; } .sp-bar::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sp-bar { background: transparent; } .sp-bar::before { background: var(--sp-bar-fill); backdrop-filter: var(--sp-bar-blur); -webkit-backdrop-filter: var(--sp-bar-blur); } } :root[data-theme="dark"] .sp-bar { --sp-bar-fill: color-mix(in srgb, var(--sp-canvas) 68%, transparent); --sp-bar-fill-solid: color-mix(in srgb, var(--color-control) 94%, transparent); --sp-bar-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); border-color: var(--sp-line); } .sp-bar:focus-within { border-color: var(--sp-accent); z-index: 1; } .sp-cell { position: relative; display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; padding: 0.375rem 0.75rem; } .sp-cell--to::before, .sp-cell--to::after, .sp-cell--dates::after, .sp-cell--pax::after { content: ""; position: absolute; top: 18%; bottom: 14%; width: 1px; background: var(--sp-bar-separator); pointer-events: none; } .sp-cell--to::before { left: 0; } .sp-cell--to::after, .sp-cell--dates::after, .sp-cell--pax::after { right: 0; } .sp-cell--dates { padding-inline: 0.55rem 0.45rem; } .sp-pax { display: flex; align-items: center; gap: 2px; } .sp-pax__btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 50%; background: transparent; color: var(--sp-ink-soft); font-size: 1rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .sp-pax__btn:hover:not(:disabled) { background: var(--sp-accent-wash); color: var(--sp-accent-deep); } .sp-pax__btn:disabled { opacity: 0.35; } .sp-cell--pax { align-items: flex-start; justify-content: center; padding-inline: 0.35rem 0.4rem; } .sp-cell--pax .sp-pax { margin-top: 0.05rem; margin-left: -0.15rem; min-height: 28px; } .sp-cell--pax .sp-pax__btn { width: 28px; height: 28px; } .sp-cell--pax .sp-pax__value { min-width: 1.5rem; font-size: 16px; font-family: var(--sp-font-body); font-weight: 500; letter-spacing: -0.022em; line-height: 1.235; } .sp-cell__label { margin: 0 0 0 0.125rem; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--sp-bar-label); } .sp-cell__input { width: 100%; min-height: 28px; padding: 0.125rem 0.125rem 0.375rem; border: none; border-radius: 0; background: transparent; box-shadow: none; color: var(--sp-ink); font-family: var(--sp-font-body); font-size: 16px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.235; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-font-smoothing: antialiased; } .sp-cell__input::placeholder { color: rgba(60, 60, 67, 0.45); } :root[data-theme="dark"] .sp-cell__input::placeholder { color: var(--color-text-faint); } .sp-cell__input:focus { outline: none; } .sp-cell__input.is-set { color: var(--sp-ink); } .sp-page .sp-cell__input.date-range-input { width: 100%; min-height: 28px; padding: 0.125rem 0.125rem 0.375rem; border: none; border-radius: 0; background: transparent; box-shadow: none; color: var(--sp-ink); font-family: var(--sp-font-body); font-size: 16px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.235; cursor: pointer; } .sp-page .sp-cell__input.date-range-input:hover, .sp-page .sp-cell__input.date-range-input:focus { border: none; box-shadow: none; outline: none; } .sp-cell--dates .date-range-wrapper { position: relative; width: 100%; overflow: visible; } .sp-search, .sp-search__row, .sp-bar, .sp-cell--dates { overflow: visible; } .sp-page:has(.date-range-picker-open) .sp-hero, .sp-page:has(.airport-dropdown.active) .sp-hero { isolation: auto; } .sp-search:has(.date-range-picker-open), .sp-search:has(.airport-dropdown.active) { position: relative; z-index: 170; } .sp-cell--airport .airport-search-wrapper { width: 100%; min-width: 0; } .sp-cell--airport .sp-cell__input, .sp-cell--airport .sp-cell__input[data-selected="true"] { font-size: 16px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.235; } .sp-swap { z-index: 1; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-inline: -10px -2px; border: 0; border-radius: 0; background: transparent; color: var(--sp-ink-soft); box-shadow: none; transition: color 0.2s ease, transform 0.3s var(--sp-ease); } .sp-swap:hover { color: var(--sp-accent-deep); transform: rotate(180deg); } .sp-search__submit { position: relative; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; min-width: 9.25rem; margin: 3px 2px 3px 6px; padding: 0 18px; border: none; border-radius: 0; background: var(--sp-cta); color: var(--sp-cta-ink); font-family: var(--sp-font-body); font-size: 0.75rem; font-weight: var(--sp-weight-label); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; box-shadow: none; transition: filter 0.2s ease, opacity 0.2s ease; } .sp-search__submit:focus-visible { outline: 2px solid var(--sp-accent-deep); outline-offset: 2px; } .sp-search__submit:hover:not(:disabled) { background: color-mix(in srgb, var(--sp-cta) 88%, #000); } .sp-search__submit:disabled { opacity: 0.6; } .sp-search__submit.is-loading .sp-search__submit-label { visibility: hidden; } .sp-search__submit.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid color-mix(in srgb, var(--sp-cta-ink) 28%, transparent); border-top-color: var(--sp-cta-ink); border-radius: 50%; animation: sp-spin 0.7s linear infinite; } @keyframes sp-spin { to { transform: rotate(360deg); } } .sp-search__hint { min-height: 1.2em; margin: 10px 4px 0; font-size: 0.8125rem; color: var(--sp-ink-faint); } .sp-hero:has(+ .sp-results:not([hidden])) .sp-search__hint:empty { min-height: 0; margin-top: 0; } .sp-search__hint.is-error { color: var(--danger); } .sp-page .sp-search .airport-search-wrapper { position: relative; overflow: visible; } .sp-page .sp-search .airport-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 10060; display: none; width: 100%; max-height: 320px; margin-top: 4px; overflow-y: auto; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 0; box-shadow: var(--shadow-surface-lg, var(--sp-card-shadow-lift)); } .sp-page .sp-search .airport-dropdown.active { display: block; } .sp-page .sp-search .dropdown-header { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-text-muted); } .sp-page .sp-search .city-option, .sp-page .sp-search .airport-option { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 42px; padding: 0.5rem 0.75rem; cursor: pointer; } .sp-page .sp-search .city-main, .sp-page .sp-search .airport-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; text-align: left; } .sp-page .sp-search .city-name, .sp-page .sp-search .airport-name { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-page .sp-search .city-info, .sp-page .sp-search .airport-location { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-page .sp-search .nested-airport { min-height: 36px; padding-left: 2rem; } .sp-page .sp-search .airport-prefix { margin-right: 0.5rem; color: var(--color-text-faint); } .sp-page .sp-search .airport-type { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: 4px; background: rgba(148, 163, 184, 0.1); font-size: 10px; color: var(--color-text-muted); text-transform: capitalize; white-space: nowrap; } .sp-page .sp-search .airport-codes { display: flex; flex-shrink: 0; align-items: center; gap: 4px; } .sp-page .sp-search .airport-dropdown .no-results, .sp-page .sp-search .airport-dropdown .error { padding: 1rem; text-align: center; font-size: 13px; font-weight: 500; color: var(--color-text-muted); } .sp-page .sp-search .airport-search-loading { padding: 2rem 1rem; text-align: center; } .sp-page .sp-search .loading-animation { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.75rem; } .sp-page .sp-search .plane-loader i { font-size: 24px; color: var(--primary); } .sp-page .sp-search .loading-dots { display: flex; gap: 4px; } .sp-page .sp-search .loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); } .sp-page .sp-search .loading-text { font-size: 13px; font-weight: 500; color: var(--color-text-muted); } .sp-page .sp-search .selection-info { padding: 0.75rem; } .sp-page .sp-search .selected-indicator { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--color-text); } .sp-page .sp-search .airports-in-selection { display: flex; flex-wrap: wrap; gap: 0.375rem; } .sp-page .sp-search .airport-code-badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); font-size: 12px; font-weight: 600; } .sp-page .sp-search .clear-selection-option { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.75rem; border-radius: 6px; cursor: pointer; color: var(--status-cancelled, #ef4444); font-size: 13px; font-weight: 500; } .sp-page .sp-search .airport-search-wrapper .airport-dropdown, .sp-page .sp-search .airport-search-wrapper .airport-dropdown.active { --aa-radius: 0; --spa-bg: var(--sp-bar-fill-solid); --spa-glass: var(--sp-bar-fill); --spa-ink: var(--sp-ink); --spa-muted: var(--sp-ink-faint); --spa-line: var(--sp-line-strong); --spa-row-hover: color-mix(in srgb, var(--sp-accent) 10%, transparent); --aa-fill: transparent; --aa-fill-hover: var(--spa-row-hover); left: 0; right: auto; width: min(480px, calc(100vw - (2 * var(--sp-gutter)))); max-height: min(430px, 62vh); margin-top: 10px; padding: 0; overflow: hidden auto; border: 1px solid color-mix(in srgb, #fff 62%, var(--sp-line)); border-radius: 0 0 var(--sp-radius-sm) var(--sp-radius-sm); background: var(--spa-bg); box-shadow: 0 18px 45px rgba(13, 21, 32, 0.14); backdrop-filter: none; -webkit-backdrop-filter: none; font-family: var(--sp-font-body); scrollbar-color: var(--sp-line) transparent; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sp-page .sp-search .airport-search-wrapper .airport-dropdown, .sp-page .sp-search .airport-search-wrapper .airport-dropdown.active { --spa-bg: var(--spa-glass); background: var(--spa-glass); backdrop-filter: var(--sp-bar-blur); -webkit-backdrop-filter: var(--sp-bar-blur); } } :root[data-theme="dark"] .sp-page .sp-search .airport-search-wrapper .airport-dropdown { --spa-row-hover: color-mix(in srgb, var(--sp-accent) 16%, transparent); --aa-fill: transparent; --aa-fill-hover: var(--spa-row-hover); border-color: var(--sp-line); box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38); } @media (prefers-reduced-transparency: reduce) { .sp-page .sp-search .airport-search-wrapper .airport-dropdown, .sp-page .sp-search .airport-search-wrapper .airport-dropdown.active { --spa-bg: var(--sp-surface); background: var(--sp-surface); backdrop-filter: none; -webkit-backdrop-filter: none; } } .sp-page .sp-search .airport-dropdown::before { content: ""; position: sticky; z-index: 2; top: 0; display: block; height: 3px; background: linear-gradient(90deg, var(--sp-accent) 0 28%, var(--spa-line) 28% 100%); } .sp-page .sp-search .airport-dropdown::-webkit-scrollbar { width: 6px; } .sp-page .sp-search .airport-dropdown::-webkit-scrollbar-thumb { border: 2px solid var(--spa-bg); border-radius: 0; background: var(--spa-line); } .sp-page .sp-search .dropdown-header { min-height: 32px; padding: 11px 16px 6px; border: 0; color: var(--spa-muted); font-family: var(--sp-font-data); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.2; } .sp-page .sp-search .dropdown-header i { width: 12px; color: var(--sp-accent-deep) !important; font-size: 9px; text-align: center; } .sp-page .sp-search .city-group { margin: 0; border: 0; } .sp-page .sp-search .airport-dropdown .city-option, .sp-page .sp-search .airport-dropdown .airport-option { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 0; margin: 0; padding: 8px 14px; border: 0; border-top: 1px solid var(--sp-line); border-radius: 0; background: transparent; transition: background-color 140ms ease; } .sp-page .sp-search .airport-dropdown .city-option:hover, .sp-page .sp-search .airport-dropdown .airport-option:hover, .sp-page .sp-search .airport-dropdown .airport-option.selected, .sp-page .sp-search .airport-dropdown .airport-option.highlighted, .sp-page .sp-search .airport-dropdown .airport-option.exact-match, .sp-page .sp-search .airport-dropdown .airport-option.exact-match:hover { border-left: 0; border-radius: 0; background: var(--spa-row-hover); box-shadow: none; transform: none; } .sp-page .sp-search .airport-dropdown .city-option:hover::before, .sp-page .sp-search .airport-dropdown .airport-option:hover::before, .sp-page .sp-search .airport-dropdown .airport-option.highlighted::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sp-accent); } .sp-page .sp-search .city-main, .sp-page .sp-search .airport-main { flex: 1 1 auto; min-width: 0; gap: 4px; text-align: left; } .sp-page .sp-search .city-name, .sp-page .sp-search .airport-name { color: var(--spa-ink); font-family: var(--sp-font-display); font-size: 14px; font-stretch: 106%; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; } .sp-page .sp-search .city-name { display: flex; align-items: center; gap: 8px; min-width: 0; } .sp-page .sp-search .city-info, .sp-page .sp-search .airport-location { color: var(--spa-muted); font-family: var(--sp-font-body); font-size: 11px; line-height: 1.35; } .sp-page .sp-search .autocomplete-location-line, .sp-page .sp-search .autocomplete-city-line { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-page .sp-search .autocomplete-country-flag { display: inline-flex; flex-shrink: 0; align-items: center; } .sp-page .sp-search .city-name i { display: none; } .sp-page .sp-search .autocomplete-country-flag .flag-icon { width: 18px; height: 12px; border-radius: 1px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--spa-line) 70%, transparent); } .sp-page .sp-search .airport-dropdown .airport-codes, .sp-page .sp-search .airport-dropdown .airport-option:is(:hover, .highlighted, .selected, .exact-match) .airport-codes { order: -1; flex: 0 0 88px; align-self: stretch; justify-content: center; min-width: 88px; padding: 0 14px 0 0; border: 0; border-right: 1px solid var(--spa-line); border-radius: 0; background: transparent; box-shadow: none; } .sp-page .sp-search .airport-codes-container { gap: 6px; } .sp-page .sp-search .airport-code-type { color: var(--spa-muted); font-family: var(--sp-font-data); font-size: 7px; letter-spacing: 0.09em; } .sp-page .sp-search .airport-code-value, .sp-page .sp-search .airport-code { color: var(--spa-ink); font-family: var(--sp-font-data); font-size: 13px; font-weight: 600; } .sp-page .sp-search .airport-icao { color: var(--spa-muted); font-family: var(--sp-font-data); } .sp-page .sp-search .nested-airport { min-height: 0; padding: 6px 14px 6px 32px; } .sp-page .sp-search .nested-airport .airport-prefix { color: var(--sp-accent-deep); font-family: var(--sp-font-data); } .sp-page .sp-search .airport-type, .sp-page .sp-search .city-code-badge, .sp-page .sp-search .distance-badge { flex: 0 0 auto; padding: 2px 6px; border: 1px solid var(--sp-line); border-radius: 2px; background: var(--sp-surface-sunk); box-shadow: none; color: var(--spa-muted); font-family: var(--sp-font-data); font-size: 9px; letter-spacing: 0.04em; } .sp-page .sp-search .selection-info { padding: 0; } .sp-page .sp-search .selected-city-header, .sp-page .sp-search .selected-airport-header { margin: 0; padding: 14px 16px; border: 0; border-radius: 0; } .sp-page .sp-search .selected-indicator { align-items: flex-start; color: var(--spa-ink); font-family: var(--sp-font-body); } .sp-page .sp-search .selection-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; } .sp-page .sp-search .selection-kicker { color: var(--sp-accent-deep); font-family: var(--sp-font-data); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; } .sp-page .sp-search .selection-title { display: flex; align-items: baseline; gap: 10px; color: var(--spa-ink); font-family: var(--sp-font-display); font-size: 14px; font-stretch: 106%; font-weight: 650; line-height: 1.3; } .sp-page .sp-search .selection-code { flex: 0 0 auto; color: var(--sp-accent-deep); font-family: var(--sp-font-data); font-size: 13px; letter-spacing: 0.04em; } .sp-page .sp-search .selection-meta, .sp-page .sp-search .selected-indicator .location-detail { color: var(--spa-muted); font-size: 11px; line-height: 1.45; white-space: normal; } .sp-page .sp-search .selected-airports-list { margin: 0; padding: 0 16px 14px; } .sp-page .sp-search .airport-code-badge { padding: 4px 7px; border: 1px solid var(--spa-line); border-radius: 2px; background: transparent; box-shadow: none; color: var(--spa-ink); font-family: var(--sp-font-data); font-size: 10px; } .sp-page .sp-search .clear-selection-option { width: 100%; min-height: 38px; margin: 0; padding: 8px 16px; border: 0; border-top: 1px solid var(--spa-line); border-radius: 0; background: transparent; color: var(--spa-muted); font-family: var(--sp-font-body); font-size: 12px; text-align: left; } .sp-page .sp-search .clear-selection-option:hover, .sp-page .sp-search .clear-selection-option:focus-visible { border-color: var(--spa-line); outline: none; background: var(--spa-row-hover); color: var(--danger, #d9363e); } @media (max-width: 768px) { .sp-page .sp-search .airport-search-wrapper .airport-dropdown, .sp-page .sp-search .airport-search-wrapper .airport-dropdown.active { left: calc(-1 * (var(--sp-gutter) - 1px)); right: auto; width: calc(100vw - (2 * var(--sp-gutter))); max-height: min(390px, 58vh); margin-top: 8px; } .sp-page .sp-search .sp-cell--to .airport-dropdown { left: calc(-1 * (var(--sp-gutter) - 1px)); right: auto; } .sp-page .sp-search .city-option, .sp-page .sp-search .airport-option { min-height: 0; gap: 10px; padding: 8px 12px; } .sp-page .sp-search .airport-codes { flex-basis: 70px; min-width: 70px; padding-right: 10px; } .sp-page .sp-search .airport-codes-container { gap: 3px; } .sp-page .sp-search .airport-code-separator, .sp-page .sp-search .airport-icao { display: none; } .sp-page .sp-search .nested-airport { min-height: 0; padding: 6px 12px 6px 24px; } .sp-page .sp-search .airport-type { max-width: 72px; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 380px) { .sp-page .sp-search .city-name, .sp-page .sp-search .airport-name { font-size: 13px; } .sp-page .sp-search .airport-codes { flex-basis: 58px; min-width: 58px; padding-right: 8px; } .sp-page .sp-search .airport-code-value, .sp-page .sp-search .airport-code { font-size: 12px; } } .date-range-picker-dropdown.sp-date-picker { --sp-font-display: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; --sp-font-data: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; --sp-font-body: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; --sp-ink: #0e1a2c; --sp-ink-faint: #6b7686; --sp-surface: #ffffff; --sp-canvas: #f5f7fa; --sp-line-strong: rgba(14, 26, 44, 0.18); --sp-accent: #2f6fed; --sp-accent-deep: #2560d6; --sp-accent-ink: #ffffff; --sp-cta: #2b4666; --sp-cta-ink: #ffffff; --sp-gutter: clamp(16px, 2vw, 24px); --spc-bg: color-mix(in srgb, var(--sp-surface) 96%, var(--sp-canvas)); --spc-ink: var(--sp-ink); --spc-muted: var(--sp-ink-faint); --spc-line: var(--sp-line-strong); --spc-wash: color-mix(in srgb, var(--sp-accent) 12%, var(--sp-surface)); --spc-hover: color-mix(in srgb, var(--sp-accent) 8%, var(--sp-surface)); --sp-radius-sm: 0; top: calc(100% + 10px); width: 292px; max-width: min(292px, calc(100vw - (2 * var(--sp-gutter)))); border: 1px solid var(--spc-line); border-radius: 0 0 var(--sp-radius-sm) var(--sp-radius-sm); overflow: hidden; background: var(--spc-bg); box-shadow: 0 18px 45px rgba(13, 21, 32, 0.14); font-family: var(--sp-font-body); -webkit-font-smoothing: antialiased; animation: none; z-index: 10060; } .date-range-picker-dropdown.sp-date-picker::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--sp-accent) 0 28%, var(--spc-line) 28% 100%); } :root[data-theme="dark"] .date-range-picker-dropdown.sp-date-picker { --sp-ink: #f2f4f7; --sp-ink-faint: #7c8797; --sp-surface: #12141a; --sp-canvas: #0a0b0e; --sp-line-strong: rgba(255, 255, 255, 0.18); --sp-accent: #5b8cff; --sp-accent-deep: #5b8cff; --sp-cta: #4a6a8f; --spc-bg: color-mix(in srgb, var(--sp-surface) 94%, #000); --spc-wash: color-mix(in srgb, var(--sp-accent) 16%, var(--sp-surface)); --spc-hover: color-mix(in srgb, var(--sp-accent) 12%, var(--sp-surface)); box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38); } .sp-date-picker .date-range-quick-select { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 10px; border-bottom: 1px solid var(--spc-line); } .sp-date-picker .quick-select-btn { min-height: 28px; padding: 0.3rem 0.65rem; border: 1px solid var(--spc-line); border-radius: 2px; background: transparent; color: var(--spc-ink); font-family: var(--sp-font-data); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .sp-date-picker .quick-select-btn:hover { border-color: var(--sp-accent); background: var(--spc-hover); color: var(--sp-accent-deep); } .sp-date-picker .quick-select-btn.is-active { border-color: var(--sp-accent); background: var(--sp-accent); color: var(--sp-accent-ink); } .sp-date-picker .date-range-calendars { padding: 12px 14px 10px; } .sp-date-picker .calendar-month-header { margin-bottom: 10px; padding: 0; } .sp-date-picker .calendar-month-label { color: var(--spc-ink); font-family: var(--sp-font-display); font-size: 14px; font-stretch: 106%; font-weight: 650; letter-spacing: -0.015em; } .sp-date-picker .calendar-nav-btn { width: 28px; height: 28px; border: 1px solid var(--spc-line); border-radius: 2px; background: transparent; color: var(--spc-ink); } .sp-date-picker .calendar-nav-btn:hover { border-color: var(--sp-accent); background: var(--spc-hover); color: var(--sp-accent-deep); } .sp-date-picker .calendar-days-header { gap: 0; margin-bottom: 4px; } .sp-date-picker .calendar-day-label { padding: 0 0 6px; color: var(--spc-muted); font-family: var(--sp-font-data); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .sp-date-picker .calendar-days-grid { gap: 0; } .sp-date-picker .calendar-day { min-height: 34px; aspect-ratio: 1; border-radius: 0; color: var(--spc-ink); font-family: var(--sp-font-body); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; transition: background-color 120ms ease, color 120ms ease; } .sp-date-picker .calendar-day:hover:not(.calendar-day-disabled, .calendar-day-empty) { background: var(--spc-hover); } .sp-date-picker .calendar-day-disabled { color: color-mix(in srgb, var(--spc-muted) 70%, transparent); } .sp-date-picker .calendar-day-today { font-weight: 650; box-shadow: inset 0 0 0 1px var(--sp-accent); } .sp-date-picker .calendar-day-range-start, .sp-date-picker .calendar-day-range-end, .sp-date-picker .calendar-day-range-start.calendar-day-in-range, .sp-date-picker .calendar-day-range-end.calendar-day-in-range, .sp-date-picker .calendar-day-range-start:not(.calendar-day-range-end), .sp-date-picker .calendar-day-range-end:not(.calendar-day-range-start), .sp-date-picker .calendar-day-range-start.calendar-day-range-end { border-radius: 0 !important; background: var(--sp-accent) !important; color: var(--sp-accent-ink) !important; font-weight: 650; box-shadow: none; } .sp-date-picker .calendar-day-in-range { border-radius: 0; background: var(--spc-wash) !important; color: var(--spc-ink); } .sp-date-picker .calendar-day-preview { border-radius: 0; background: color-mix(in srgb, var(--sp-accent) 8%, transparent) !important; } .sp-date-picker .date-range-footer { gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--spc-line); border-radius: 0; background: transparent; } .sp-date-picker .date-range-clear-btn, .sp-date-picker .date-range-apply-btn { min-height: 34px; padding: 0.4rem 0.9rem; border-radius: 0; font-family: var(--sp-font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .sp-date-picker .date-range-clear-btn { border: 1px solid var(--spc-line); background: transparent; color: var(--spc-muted); } .sp-date-picker .date-range-clear-btn:hover { border-color: var(--spc-line); background: var(--spc-hover); color: var(--spc-ink); } .sp-date-picker .date-range-apply-btn { flex: 1; border: 1px solid transparent; background: var(--sp-cta); color: var(--sp-cta-ink); } .sp-date-picker .date-range-apply-btn:hover { background: color-mix(in srgb, var(--sp-cta) 88%, #000); } @media (max-width: 768px) { .date-range-picker-dropdown.sp-date-picker { width: calc(100vw - (2 * var(--sp-gutter))) !important; max-width: 360px !important; max-height: min(calc(100vh - 32px), 560px) !important; border-radius: 0 0 var(--sp-radius-sm) var(--sp-radius-sm); animation: none; } .sp-date-picker .calendar-nav-btn { width: 36px; height: 36px; } .sp-date-picker .calendar-day { min-height: 38px; font-size: 14px; } } .sp-results { position: relative; z-index: 1; padding-block: clamp(16px, 2vw, 28px) 0; } .sp-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 18px; } .sp-list-head:has(.sp-results__meta--recommendation) { margin-bottom: 22px; } .sp-list-head__controls { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin-left: auto; } .sp-list-head__control { display: flex; align-items: center; gap: 8px; } .sp-list-head__control[hidden] { display: none !important; } .sp-jet-controls { display: contents; } .sp-jet-controls[hidden] { display: none !important; } .sp-ticket-filters { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; } .sp-ticket-filters[hidden] { display: none !important; } .sp-list-head__control.is-searching .sp-menu__trigger, .sp-ticket-filters.is-searching .sp-list-head__control.is-searching .sp-menu__trigger { border-bottom-color: var(--sp-accent); } .sp-list-head__control.is-searching .sp-menu__trigger { position: relative; } .sp-list-head__control.is-searching .sp-menu__trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: linear-gradient( 90deg, transparent, var(--sp-accent) 18%, var(--sp-accent) 82%, transparent ); } .sp-list-head__control.is-searching .sp-menu__trigger::before { content: ""; position: absolute; bottom: -5px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--sp-accent); box-shadow: 0 0 0 3px var(--sp-accent-wash); transform: translate(-50%, 0); animation: sp-bead 1.8s var(--sp-ease) infinite; } .sp-ticket-coverage { display: grid; justify-items: center; gap: 10px; margin: 4px 0 0; padding: 18px 16px 8px; list-style: none; } .sp-ticket-coverage__spine { position: relative; width: min(16rem, 70%); height: 1px; background: linear-gradient( 90deg, transparent, var(--sp-line-strong) 12%, var(--sp-line-strong) 88%, transparent ); } .sp-ticket-coverage__bead { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-accent); box-shadow: 0 0 0 4px var(--sp-accent-wash); transform: translate(-50%, -50%); animation: sp-bead 1.8s var(--sp-ease) infinite; } .sp-ticket-coverage__copy { font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-ink-faint); } @media (prefers-reduced-motion: reduce) { .sp-list-head__control.is-searching .sp-menu__trigger::before, .sp-ticket-coverage__bead { animation: none; left: 50%; opacity: 1; } } .sp-list-head__label { margin: 0; font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-ink); white-space: nowrap; } .sp-list-head .sp-menu__chevron { color: var(--sp-ink-soft); } .sp-list-head:has(.sp-results__meta[hidden]) { justify-content: flex-end; } .sp-list-head:has(.sp-results__meta--band) { align-items: flex-start; } .sp-results__meta { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--sp-ink); } .sp-results__meta[hidden] { display: none !important; } .sp-results__meta--band { flex: 1 1 auto; min-width: min(16rem, 100%); max-width: 42rem; } .sp-results__meta--band .sp-band { padding: 0; } .sp-results__meta strong { color: var(--sp-ink); font-weight: 600; } .sp-results__meta--recommendation { display: flex; flex-direction: column; gap: 6px; max-width: min(36rem, 100%); } .sp-results__meta--recommendation strong { font-family: var(--sp-font-display); font-size: clamp(1.45rem, 2.4vw, 1.95rem); font-weight: var(--sp-weight-display); font-stretch: 100%; line-height: 1.15; letter-spacing: -0.02em; color: var(--sp-ink); text-wrap: balance; } .sp-results__meta--recommendation span { font-size: 0.875rem; font-weight: var(--sp-weight-body); line-height: 1.45; color: var(--sp-ink-soft); } .sp-results .load-more { margin-top: 1.25rem; } .sp-page .load-more-button:not(.end-of-results):not(.is-loading) { background: color-mix(in srgb, var(--sp-surface) 74%, transparent); border-color: color-mix(in srgb, #fff 62%, var(--sp-line)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); } .sp-page .load-more-button:hover:not(:disabled):not(.end-of-results) { background: color-mix(in srgb, var(--sp-surface) 88%, transparent); border-color: color-mix(in srgb, #fff 62%, var(--sp-line)); } :root[data-theme="dark"] .sp-page .load-more-button:not(.end-of-results):not(.is-loading) { background: color-mix(in srgb, var(--sp-canvas) 68%, transparent); border-color: var(--sp-line); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); } :root[data-theme="dark"] .sp-page .load-more-button:hover:not(:disabled):not(.end-of-results) { background: color-mix(in srgb, var(--sp-canvas) 82%, transparent); border-color: var(--sp-line); } @media (prefers-reduced-transparency: reduce) { .sp-page .load-more-button:not(.end-of-results), .sp-page .load-more-button:hover:not(:disabled):not(.end-of-results) { background: var(--sp-surface); backdrop-filter: none; -webkit-backdrop-filter: none; } } .sp-results .load-more[hidden] { display: none !important; } .sp-results__hidden-note { margin: 18px 0 0; font-size: 0.8125rem; color: var(--sp-ink-faint); } .sp-status { padding: 28px 20px; border: 1px dashed var(--sp-line-strong); border-radius: var(--sp-radius); text-align: center; font-size: 0.9375rem; color: var(--sp-ink-soft); } .sp-status--error { border-color: var(--danger); color: var(--danger); } .sp-status--scan { padding: 0; border: none; text-align: inherit; color: inherit; } .sp-ways { margin-bottom: clamp(22px, 3vw, 36px); } .sp-ways[hidden], .sp-ways__board[hidden] { display: none !important; } .sp-ways__intro { margin-bottom: 12px; } .sp-ways__title { margin: 0; font-family: var(--sp-font-display); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: var(--sp-weight-display); letter-spacing: -0.02em; line-height: 1.2; color: var(--sp-ink); text-wrap: balance; } .sp-ways__instrument { --sp-bar-fill: color-mix(in srgb, var(--sp-surface) 74%, transparent); --sp-bar-fill-solid: color-mix(in srgb, var(--sp-surface) 94%, transparent); --sp-bar-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7); --sp-bar-blur: saturate(140%) blur(16px); background: var(--sp-bar-fill-solid); border: 1px solid color-mix(in srgb, #fff 62%, var(--sp-line)); border-radius: var(--sp-radius); box-shadow: var(--sp-bar-shadow); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sp-ways__instrument { background: var(--sp-bar-fill); backdrop-filter: var(--sp-bar-blur); -webkit-backdrop-filter: var(--sp-bar-blur); } } :root[data-theme="dark"] .sp-ways__instrument { --sp-bar-fill: color-mix(in srgb, var(--sp-canvas) 68%, transparent); --sp-bar-fill-solid: color-mix(in srgb, var(--color-control) 94%, transparent); --sp-bar-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); border-color: var(--sp-line); } @media (prefers-reduced-transparency: reduce) { .sp-ways__instrument { background: var(--sp-bar-fill-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } } .sp-ways__switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 4px; margin: 6px; padding: 4px; background: transparent; border-radius: calc(var(--sp-radius-sm) + 4px); user-select: none; } .sp-ways__opt-wrap { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; border-radius: var(--sp-radius-sm); transition: background-color 0.2s var(--sp-ease), box-shadow 0.2s var(--sp-ease); } .sp-ways__opt-wrap + .sp-ways__opt-wrap::before { content: ""; position: absolute; top: 18%; bottom: 14%; left: -2px; width: 1px; background: var(--sp-line); pointer-events: none; } .sp-ways__opt-wrap:has(:checked)::before, .sp-ways__opt-wrap:has(:checked) + .sp-ways__opt-wrap::before { display: none; } .sp-ways__opt-wrap:hover, .sp-ways__opt-wrap:has(:checked) { background: color-mix(in srgb, var(--sp-surface) 28%, transparent); } .sp-ways__opt-wrap:has(:checked) { box-shadow: inset 0 0 0 1px var(--sp-accent); } .sp-ways__opt-wrap:has(:focus-visible) { outline: 2px solid var(--sp-accent); outline-offset: 2px; } .sp-ways__opt { position: relative; display: block; flex: 1 1 auto; min-width: 0; height: 100%; cursor: pointer; } .sp-ways__opt-input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; } .sp-ways__opt-ui { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 12px 14px; pointer-events: none; } .sp-ways__opt-wrap--charter .sp-ways__opt-ui, .sp-ways__opt-wrap--alt .sp-ways__opt-ui { padding-bottom: 32px; } .sp-ways__opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; } .sp-ways__opt-kind { min-width: 0; font-family: var(--sp-font-display); font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; color: var(--sp-ink); text-wrap: balance; } .sp-ways__opt-count { flex: none; margin-left: auto; font-family: var(--sp-font-data); font-size: 0.75rem; letter-spacing: 0.03em; line-height: 1.3; color: var(--sp-ink-faint); white-space: nowrap; } .sp-ways__opt-tally { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sp-ink-soft); } .sp-ways__opt-wrap:has(:checked) .sp-ways__opt-count, .sp-ways__opt-wrap:has(:checked) .sp-ways__opt-tally { color: var(--sp-accent-deep); } .sp-ways__mix { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-family: var(--sp-font-data); font-size: 0.75rem; letter-spacing: 0.02em; line-height: 1.35; color: var(--sp-ink-faint); } .sp-ways__opt-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15em 0.4em; margin: 0; } .sp-ways__opt-price-label { font-family: var(--sp-font-body); font-size: 0.6875rem; letter-spacing: 0.01em; color: var(--sp-ink-faint); } .sp-ways__opt:has(.sp-ways__fallback) { display: flex; } .sp-ways__opt-ui:has(.sp-ways__fallback) { flex: 1 1 auto; width: 100%; } .sp-ways__fallback { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-family: var(--sp-font-data); font-size: 0.75rem; letter-spacing: 0.02em; line-height: 1.35; color: var(--sp-ink-soft); } .sp-ways__opt-price-amount, .sp-ways__opt-ui:not(:has(.sp-ways__opt-price, .sp-ways__mix, .sp-empty-alt, .sp-ways__fallback))::after { font-family: var(--sp-font-display); font-size: 1.125rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15; } .sp-ways__opt-price-amount { color: var(--sp-ink); } .sp-ways__opt-price-unit { font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; color: var(--sp-ink-faint); } .sp-ways__opt-price-note { flex-basis: 100%; font-family: var(--sp-font-data); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.3; color: var(--sp-ink-soft); } .sp-ways__opt-ui:not(:has(.sp-ways__opt-price, .sp-ways__mix, .sp-empty-alt, .sp-ways__fallback))::after { content: "—"; color: var(--sp-ink-faint); } .sp-ways__readout { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 12px 18px 14px; border-top: 1px solid var(--sp-line); } .sp-ways__readout-copy { margin: 0; min-width: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--sp-ink-soft); } .sp-ways__request { position: absolute; right: 14px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: none; background: none; color: var(--sp-accent-deep); font-family: var(--sp-font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.3; white-space: nowrap; cursor: pointer; } .sp-ways__request::after { content: "→"; } .sp-ways__request:hover { gap: 10px; } .sp-ways__request:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; } @media (max-width: 768px) { .sp-ways__switch { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; background: transparent; border-radius: 0; } .sp-ways__opt-wrap + .sp-ways__opt-wrap::before, .sp-ways__opt-wrap:nth-child(even)::before, .sp-ways__opt-wrap:nth-child(n + 3)::after { display: none; } .sp-ways__opt-wrap { border-radius: 0; background: transparent; box-shadow: none; transition: background-color 0.2s var(--sp-ease), box-shadow 0.2s var(--sp-ease); } .sp-ways__opt-wrap:not(:last-child) { border-bottom: 1px solid var(--sp-line); } .sp-ways__opt-wrap:hover { background: color-mix(in srgb, var(--sp-surface) 18%, transparent); } .sp-ways__opt-wrap:has(:checked) { background: color-mix(in srgb, var(--sp-surface) 28%, transparent); box-shadow: inset 3px 0 0 var(--sp-accent); } .sp-ways__opt-ui { gap: 6px; padding: 14px 16px; } .sp-ways__opt-wrap--charter .sp-ways__opt-ui, .sp-ways__opt-wrap--alt .sp-ways__opt-ui { padding-bottom: 10px; } .sp-ways__opt-kind { font-size: 0.875rem; line-height: 1.3; } .sp-ways__opt-count { font-size: 0.6875rem; } .sp-ways__mix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin-top: 2px; } .sp-ways__mix li:last-child:nth-child(odd) { grid-column: 1 / -1; } .sp-ways__opt-ui:not(:has(.sp-ways__mix)) .sp-ways__opt-price { width: 100%; flex-wrap: wrap; align-items: baseline; gap: 0.15em 0.4em; } .sp-ways__opt-ui:not(:has(.sp-ways__mix)) .sp-ways__opt-price-unit { flex-basis: 100%; margin-left: 0; text-align: left; white-space: normal; } .sp-ways__opt-ui:not(:has(.sp-ways__mix)) .sp-ways__opt-price-note { flex-basis: 100%; } .sp-ways__opt-price-amount { font-size: 1.0625rem; } .sp-ways__request { position: static; align-self: flex-end; margin: 0 16px 14px; } .sp-ways__readout { flex-direction: column; align-items: flex-start; padding: 12px 16px 14px; } } @media (max-width: 400px) { .sp-ways__mix { grid-template-columns: 1fr; } } .sp-ways__opt-ui--pending::after { content: none; } .sp-ways__scan { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .sp-ways__scan-label { margin: 0; font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; line-height: 1.3; color: var(--sp-accent-deep); } .sp-ways__scan-track { position: relative; width: min(7.5rem, 100%); height: 0.7rem; } .sp-ways__scan-track::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: var(--sp-accent); opacity: 0.28; transform: translateY(-50%); } .sp-ways__scan-bead { position: absolute; top: 50%; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--sp-accent-deep); opacity: 0.55; transform: translate(-50%, -50%); animation: sp-ways-scan-bead 2.4s var(--sp-ease) infinite; } .sp-ways__mix-pending { min-width: 0; } .sp-ways__mix-pending .sp-ways__scan-track { width: min(6.5rem, 100%); } @keyframes sp-ways-scan-bead { 0% { left: 0; opacity: 0; } 16% { opacity: 0.55; } 84% { opacity: 0.55; } 100% { left: 100%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sp-ways__scan-bead { left: 50%; opacity: 0.45; animation: none; } } .sp-ways__offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 8px 12px 12px; padding: 12px 16px; border-radius: var(--sp-radius-sm); background: transparent; } .sp-empty-alt { display: flex; flex: 1 1 340px; flex-direction: column; gap: 2px; min-width: 0; } .sp-empty-alt__scan { position: relative; width: min(11rem, 100%); height: 1.0563rem; margin: 0; } .sp-empty-alt__scan-track { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: var(--sp-accent); opacity: 0.28; transform: translateY(-50%); } .sp-empty-alt__scan-bead { position: absolute; top: 50%; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--sp-accent-deep); opacity: 0.55; transform: translate(-50%, -50%); animation: sp-empty-alt-bead 2.4s var(--sp-ease) infinite; } .sp-empty-alt__label { margin: 0; font-family: var(--sp-font-data); font-size: 0.6875rem; letter-spacing: 0.04em; line-height: 1.3; color: var(--sp-accent-deep); } .sp-empty-alt__route { margin: 0; font-family: var(--sp-font-display); font-size: 0.8125rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; color: var(--sp-ink); text-wrap: pretty; } .sp-empty-alt__code { font-family: var(--sp-font-data); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.04em; color: var(--sp-ink-faint); } .sp-empty-alt__from { font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; color: var(--sp-ink-faint); } .sp-empty-alt__bar { display: flex; flex: none; align-items: center; gap: 14px; margin-left: auto; } .sp-empty-alt__date { margin-left: 0.2em; font-family: var(--sp-font-data); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; line-height: 1.3; color: var(--sp-ink-faint); white-space: nowrap; } .sp-ways__offer .sp-ways__request { position: static; } @keyframes sp-empty-alt-bead { 0% { left: 0; opacity: 0; } 16% { opacity: 0.55; } 84% { opacity: 0.55; } 100% { left: 100%; opacity: 0; } } @media (max-width: 768px) { .sp-ways__offer { align-items: flex-start; } .sp-empty-alt__bar { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .sp-empty-alt__scan-bead { left: 50%; animation: none; opacity: 0.45; } } .sp-empty-alt-modal__panel.sp-charter-modal__panel { width: min(100%, 840px); max-height: min(92dvh, 720px); } .sp-empty-alt-modal .sp-charter-modal__header { padding-bottom: 14px; } .sp-empty-alt-modal .sp-charter-modal__body { padding-top: 8px; padding-bottom: 4px; } .sp-empty-alt-modal__list { list-style: none; margin: 0; padding: 0; } .sp-empty-alt-modal__item { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 13px 0; border-bottom: 1px solid var(--sp-line); } .sp-empty-alt-modal__band { padding: 16px 0 2px; border-bottom: none; } .sp-empty-alt-modal__band-label { margin: 0; font-family: var(--sp-font-data); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-accent-deep); } .sp-empty-alt-modal__item:first-child { padding-top: 6px; } .sp-empty-alt-modal__item:last-child { border-bottom: none; padding-bottom: 6px; } .sp-empty-alt-modal__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .sp-empty-alt-modal__route { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.55rem; font-family: var(--sp-font-display); font-size: 1.05rem; font-weight: 650; font-stretch: 105%; letter-spacing: -0.02em; line-height: 1.25; color: var(--sp-ink); } .sp-empty-alt-modal__point { display: inline-flex; align-items: baseline; gap: 0.4rem; min-width: 0; } .sp-empty-alt-modal__place { font-weight: 650; } .sp-empty-alt-modal__from { font-family: var(--sp-font-data); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em; color: var(--sp-ink-faint); } .sp-empty-alt-modal__code { font-family: var(--sp-font-data); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; color: var(--sp-ink-faint); } .sp-empty-alt-modal__arrow { flex: none; color: var(--sp-ink-faint); font-weight: 500; } .sp-empty-alt-modal__meta { margin: 0; font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.35; color: var(--sp-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-empty-alt-modal__go { flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: none; background: none; color: var(--sp-accent-deep); font-family: var(--sp-font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: gap 0.18s var(--sp-ease, ease), color 0.15s ease; } .sp-empty-alt-modal__go::after { content: "→"; } .sp-empty-alt-modal__go:hover { gap: 10px; } .sp-empty-alt-modal__go:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; } @media (max-width: 640px) { .sp-empty-alt-modal__item { align-items: flex-start; gap: 10px; } .sp-empty-alt-modal__meta { white-space: normal; } } .sp-menu { position: relative; display: inline-flex; align-items: stretch; min-width: 0; max-width: 100%; } .sp-menu__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } .sp-menu__trigger { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 8.5rem; min-height: 36px; max-width: 100%; padding: 6px 2px 6px 0; border: none; border-bottom: 1.5px solid var(--sp-line-strong); border-radius: 0; background: transparent; color: var(--sp-ink); font-family: var(--sp-font-body); font-size: 0.875rem; font-weight: 550; letter-spacing: -0.01em; line-height: 1.25; text-align: left; cursor: pointer; transition: border-color 0.2s ease, color 0.18s ease; } .sp-menu__trigger:hover, .sp-menu.is-open .sp-menu__trigger, .sp-menu__trigger:focus-visible { outline: none; border-bottom-color: var(--sp-accent); } .sp-menu.is-active .sp-menu__trigger { border-bottom-color: var(--sp-accent); } .sp-menu__trigger:disabled { opacity: 0.5; cursor: default; } .sp-menu__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-menu__chevron { flex: none; color: var(--sp-ink-faint); font-size: 0.55rem; line-height: 1; transition: transform 0.18s var(--sp-ease), color 0.18s ease; } .sp-menu.is-open .sp-menu__chevron { transform: rotate(180deg); color: var(--sp-accent-deep); } .sp-menu__list { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; right: auto; box-sizing: border-box; min-width: max(100%, 13.5rem); max-width: min(20rem, 92vw); max-height: min(320px, 50vh); margin: 0; padding: 0; list-style: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--sp-card-stroke, rgba(60, 60, 67, 0.22)); border-radius: 0; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); box-shadow: 0 18px 40px rgba(13, 21, 32, 0.12), 0 1px 0 rgba(255, 255, 255, 0.35) inset; scrollbar-width: thin; } :root[data-theme="dark"] .sp-menu__list { background: rgba(28, 30, 36, 0.62); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset; } .sp-menu__list[hidden] { display: none !important; } .sp-menu__option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; margin: 0; padding: 0.55rem 0.9rem; border: none; border-top: 1px solid var(--sp-line); border-radius: 0; background: transparent; color: var(--sp-ink); font-family: var(--sp-font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.012em; line-height: 1.3; text-align: left; cursor: pointer; transition: background-color 0.14s ease, color 0.14s ease; } .sp-menu__list > li:first-child .sp-menu__option { border-top: none; } .sp-menu__option:hover, .sp-menu__option:focus-visible { outline: none; background: var(--sp-accent-wash); color: var(--sp-ink); } .sp-menu__option[aria-selected="true"] { color: var(--sp-accent-deep); font-weight: 600; background: var(--sp-accent-wash); } .sp-menu__option[aria-selected="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--sp-accent-wash); } .sp-menu__option:disabled { opacity: 0.45; cursor: default; } @media (max-width: 720px) { .sp-menu, .sp-menu__trigger { width: 100%; min-width: 0; } .sp-menu__list { left: auto; right: 0; min-width: 100%; } } .sp-cards { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px); margin: 0; padding: 0; list-style: none; } .sp-card { --sp-card-rail: 13.75rem; position: relative; display: grid; grid-template-columns: clamp(300px, 34%, 390px) minmax(0, 1fr) var(--sp-card-rail); padding: 0; border: 1px solid var(--sp-card-stroke); border-radius: 0; background: color-mix(in srgb, var(--sp-surface) 72%, transparent); box-shadow: none; overflow: visible; backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); transition: border-color 0.25s ease, background-color 0.25s ease; } @media (hover: hover) and (pointer: fine) { .sp-card:hover { border-color: var(--sp-accent); background: color-mix( in srgb, color-mix(in srgb, var(--sp-surface) 92%, var(--sp-accent-wash)) 72%, transparent ); } } @media (prefers-reduced-transparency: reduce) { .sp-card { background: var(--sp-surface); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-reduced-transparency: reduce) and (hover: hover) and (pointer: fine) { .sp-card:hover { background: color-mix(in srgb, var(--sp-surface) 92%, var(--sp-accent-wash)); } } .sp-card__kinds { z-index: 3; position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 20px); } .sp-card__kind { z-index: 3; position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; max-width: calc(100% - 20px); padding: 4px 11px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 3px; background: rgba(255, 255, 255, 0.48); box-shadow: 0 4px 14px rgba(13, 21, 32, 0.06); backdrop-filter: blur(12px) saturate(125%); -webkit-backdrop-filter: blur(12px) saturate(125%); color: rgba(22, 30, 39, 0.86); font-family: var(--sp-font-data); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-card__kinds .sp-card__kind { position: static; max-width: none; } .sp-card__kind--certified { border-color: color-mix(in srgb, var(--sp-accent) 50%, transparent); } :root[data-theme="dark"] .sp-card__kind { border-color: rgba(255, 255, 255, 0.14); background: rgba(15, 19, 24, 0.42); color: rgba(255, 255, 255, 0.9); } .sp-card__media { position: relative; margin: 0; align-self: stretch; min-height: 208px; overflow: hidden; background: var(--sp-surface-sunk); } .sp-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .sp-card__airline-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 20% 0%, var(--sp-accent-wash), transparent 60%), var(--sp-surface-sunk); } .sp-card__airline-logo { max-width: 62%; max-height: 56px; object-fit: contain; } .sp-card__airline-mono { font-family: var(--sp-font-display); font-size: 2rem; font-weight: 700; letter-spacing: 0.08em; color: var(--sp-ink-faint); } .sp-card__body { display: flex; flex-direction: column; min-width: 0; padding: clamp(18px, 2vw, 24px); } .sp-card__route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 14px; width: 100%; } .sp-card__endpoint { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; } .sp-card__endpoint--from { text-align: left; align-items: flex-start; } .sp-card__endpoint--to { text-align: right; align-items: flex-end; } .sp-card__iata { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 1.5rem; padding: 0.2rem 0.55rem; border: 1px solid var(--sp-line-strong); border-radius: 999px; background: transparent; font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; line-height: 1; color: var(--sp-ink); text-transform: uppercase; } .sp-card__place { font-size: 0.8438rem; font-weight: 600; line-height: 1.25; color: var(--sp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sp-card__country { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 0.75rem; color: var(--sp-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-card__country .flag-icon { width: 1.1rem; height: 0.76rem; border-radius: 2px; box-shadow: 0 0 0 1px var(--sp-line); } .sp-card__country-name { overflow: hidden; text-overflow: ellipsis; } .sp-card__path { align-self: center; width: clamp(88px, 16vw, 140px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .sp-card__path--via { width: clamp(108px, 20vw, 168px); } .sp-card__path-duration { font-family: var(--sp-font-data); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--sp-ink); white-space: nowrap; } .sp-card__path-via { display: inline-flex; align-items: baseline; justify-content: center; gap: 0.28em; max-width: 100%; font-size: 0.6875rem; line-height: 1.2; letter-spacing: 0.03em; white-space: nowrap; } .sp-card__path-via-prep { color: var(--sp-ink-faint); font-weight: 500; } .sp-card__path-via-city { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--sp-ink); } .sp-card__path-line { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 7px; } .sp-card__path-line::before { position: absolute; right: 0; left: 0; height: 1px; content: ""; background: var(--sp-line-strong); } .sp-card__path-node { position: relative; width: 7px; height: 7px; border: 1px solid var(--sp-accent); border-radius: 0; background: var(--sp-surface); } .sp-card__path-distance, .sp-card__path-stops { max-width: 100%; overflow: hidden; font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; color: var(--sp-ink-faint); text-align: center; text-overflow: ellipsis; white-space: nowrap; } .sp-card__path-stops--via { font-weight: 600; color: var(--sp-ink); } .sp-card__facts { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--sp-line); } .sp-card__facts-schedule { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 24px; } .sp-card__facts-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; } .sp-card__facts-specs { display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: 12px; min-width: 0; } .sp-card__fact { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-right: 18px; font-size: 0.8438rem; color: var(--sp-ink); } .sp-card__facts-specs .sp-card__fact + .sp-card__fact { padding-left: 18px; border-left: 1px solid var(--sp-line); } .sp-card__fact--primary { color: var(--sp-ink); } .sp-card__fact--departure, .sp-card__fact--arrival { flex-direction: row; align-items: baseline; gap: 8px; padding: 0; color: var(--sp-ink); } .sp-card__fact--arrival { justify-content: flex-end; text-align: right; } .sp-card__fact--good .sp-card__fact-value { color: var(--sp-accent-deep); } .sp-card__fact--warn .sp-card__fact-value { color: #a66c0a; } .sp-card__trip-note { margin: 0; font-size: 0.75rem; font-weight: 500; line-height: 1.35; color: var(--sp-accent-deep); } .sp-card__fact--party { flex: none; align-items: flex-end; gap: 3px; padding: 0; text-align: right; color: var(--sp-ink); } .sp-card__fact--party .sp-card__fact-head { display: inline-flex; align-items: baseline; gap: 6px; } .sp-card__fact--party .sp-card__fact-value { font-variant-numeric: tabular-nums; font-weight: 500; } .sp-card__fact-sub { font-size: 0.78rem; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.3; color: var(--sp-ink-faint); white-space: nowrap; } .sp-card__fact-label { font-family: var(--sp-font-data); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-ink-faint); } .sp-card__fact-value { line-height: 1.25; } .sp-card__fact--departure .sp-card__fact-value, .sp-card__fact--arrival .sp-card__fact-value { font-weight: 650; } .sp-card__rail { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 14px; box-sizing: border-box; width: 100%; min-width: 0; padding: clamp(16px, 2vw, 22px); border-left: 1px dashed var(--sp-line-strong); text-align: right; } .sp-card__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .sp-card__price--estimated { gap: 3px; } .sp-card__best-label { display: inline-flex; align-items: center; align-self: flex-end; gap: 6px; margin-bottom: 5px; color: var(--sp-accent-deep); font-family: var(--sp-font-data); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; } .sp-card__best-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentcolor; box-shadow: 0 0 0 3px var(--sp-accent-wash); } .sp-card__seats-left { margin-bottom: 4px; font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.02em; line-height: 1.3; color: #b33a4a; white-space: nowrap; } .sp-card__price-note { margin-top: 4px; font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.3; color: var(--sp-ink-faint); white-space: nowrap; } .sp-card__amount { font-family: var(--sp-font-display); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.05; color: var(--sp-ink); } .sp-card__price--estimated .sp-card__amount { font-variant-numeric: normal; letter-spacing: -0.025em; } .sp-card__approx { display: block; margin-top: 1px; font-family: var(--sp-font-data); font-size: 0.75rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; line-height: 1.25; color: var(--sp-ink-faint); white-space: nowrap; } .sp-card__score { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 7px; margin-top: 4px; } .sp-card__score-label { font-family: var(--sp-font-data); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-ink-faint); } .sp-card__score-value { font-family: var(--sp-font-display); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--sp-ink-soft); } .sp-card__score--green .sp-card__score-value { color: var(--sp-accent-deep); } .sp-card__score--yellow .sp-card__score-value { color: #a66c0a; } .sp-card__score--red .sp-card__score-value { color: #b33a4a; } .sp-card__score--black .sp-card__score-value { color: var(--sp-ink-soft); } .sp-card__details { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 0 0 2px; border: none; border-bottom: 1px solid transparent; background: none; box-shadow: none; color: var(--sp-accent-deep); font-family: var(--sp-font-data); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color 0.22s ease, gap 0.3s var(--sp-ease), color 0.18s ease; } .sp-card__details::after { content: "→"; } .sp-card__details:hover { border-bottom-color: currentcolor; gap: 12px; color: var(--sp-accent-deep); } .sp-card__details:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; border-radius: 2px; } .sp-card__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .sp-card__fav { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--sp-card-stroke); border-radius: 0; background: transparent; color: var(--sp-ink-soft); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--sp-ease); } .sp-card__fav:hover { border-color: #e2455a; color: #e2455a; border-radius: 0; box-shadow: none; transform: none; } .sp-card__fav:disabled { opacity: 0.55; cursor: default; } .sp-card__fav-icon { width: 18px; height: 18px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sp-card__fav.favorited { border-color: rgba(226, 69, 90, 0.45); color: #e2455a; } .sp-card__fav.favorited .sp-card__fav-icon { fill: currentcolor; } .sp-card__book { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 26px; border: none; border-radius: 0; background: var(--sp-cta); color: var(--sp-cta-ink); -webkit-text-fill-color: var(--sp-cta-ink); font-family: var(--sp-font-body); font-size: 0.75rem; font-weight: var(--sp-weight-label); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background-color 0.25s ease, transform 0.3s var(--sp-ease); } .sp-card__book:hover { color: var(--sp-cta-ink); -webkit-text-fill-color: var(--sp-cta-ink); background: color-mix(in srgb, var(--sp-cta) 88%, #000); transform: translateY(-1px); box-shadow: none; } .sp-card__rail > .sp-card__book { align-self: stretch; box-sizing: border-box; width: 100%; } .sp-card__actions--empty-leg { display: flex; flex-direction: column; align-items: stretch; align-self: stretch; width: 100%; max-width: none; margin-right: 0; gap: 0; } .sp-card__actions--empty-leg > .sp-card__details { align-self: flex-end; flex-shrink: 0; margin: 0 0 10px; transform-origin: right center; } @media (hover: hover) and (pointer: fine) { .sp-card__actions--empty-leg > .sp-card__details { max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; border-bottom-color: transparent; transform: translateY(6px); pointer-events: none; transition: max-height 0.28s var(--sp-ease), margin-bottom 0.28s var(--sp-ease), padding-bottom 0.22s ease, opacity 0.22s ease, transform 0.28s var(--sp-ease), border-color 0.22s ease, gap 0.3s var(--sp-ease), color 0.18s ease; } .sp-card:is(:hover, :focus-within) .sp-card__actions--empty-leg > .sp-card__details { max-height: 1.75rem; margin-bottom: 10px; padding-bottom: 2px; opacity: 1; transform: translateY(0); pointer-events: auto; } } @media (prefers-reduced-motion: reduce) { .sp-card__actions--empty-leg > .sp-card__details { transition: none; } } .sp-card__primary-actions { display: flex; align-items: stretch; gap: 8px; overflow: visible; border: none; border-radius: 0; background: transparent; box-shadow: none; } .sp-card__actions--empty-leg .sp-card__fav { flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid var(--sp-card-stroke); border-radius: 0; background: transparent; color: var(--sp-ink-soft); transition: border-color 0.2s ease, color 0.2s ease; } .sp-card__actions--empty-leg .sp-card__fav:hover { border-color: #e2455a; background: transparent; color: #e2455a; transform: none; } .sp-card__actions--empty-leg .sp-card__fav.favorited { border-color: rgba(226, 69, 90, 0.45); background: transparent; color: #e2455a; } .sp-card__actions--empty-leg .sp-card__book { flex: 1 1 auto; width: auto; min-height: 40px; padding-inline: 16px; border: 0; border-radius: 0; background: var(--sp-cta); color: var(--sp-cta-ink); -webkit-text-fill-color: var(--sp-cta-ink); box-shadow: none; } .sp-card__actions--empty-leg .sp-card__book:hover { color: var(--sp-cta-ink); -webkit-text-fill-color: var(--sp-cta-ink); background: color-mix(in srgb, var(--sp-cta) 88%, #000); box-shadow: none; transform: none; } .sp-card__fav:focus-visible, .sp-card__book:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; } .sp-card__book:disabled, .sp-card__book.booked { background: var(--sp-surface-sunk); color: var(--sp-ink-faint); box-shadow: none; cursor: default; transform: none; filter: none; } .sp-card__actions--empty-leg .sp-card__book:disabled, .sp-card__actions--empty-leg .sp-card__book.booked, .sp-card__actions--empty-leg .sp-card__book:disabled:hover, .sp-card__actions--empty-leg .sp-card__book.booked:hover { background: var(--sp-surface-sunk); color: var(--sp-ink-soft); -webkit-text-fill-color: var(--sp-ink-soft); box-shadow: inset 0 0 0 1px var(--sp-card-stroke); opacity: 1; } :root[data-theme="dark"] .sp-card__actions--empty-leg .sp-card__book:disabled, :root[data-theme="dark"] .sp-card__actions--empty-leg .sp-card__book.booked, :root[data-theme="dark"] .sp-card__actions--empty-leg .sp-card__book:disabled:hover, :root[data-theme="dark"] .sp-card__actions--empty-leg .sp-card__book.booked:hover { color: var(--sp-cta-ink); -webkit-text-fill-color: var(--sp-cta-ink); box-shadow: none; } .sp-card__purchase { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .sp-card__buy-error { margin: 0; max-width: 220px; font-size: 0.75rem; color: var(--color-error, #c0392b); text-align: right; } @media (max-width: 860px) { .sp-card { grid-template-columns: 1fr; } .sp-card__media { min-height: 0; aspect-ratio: auto; height: clamp(150px, 38vw, 210px); } .sp-card__body { padding-bottom: 4px; } .sp-card__rail { flex-direction: row; align-items: center; justify-content: space-between; border-left: none; border-top: 1px dashed var(--sp-line-strong); margin-top: 14px; text-align: left; } .sp-card__rail:has(> .sp-card__book) { flex-wrap: wrap; justify-content: flex-start; } .sp-card__rail > .sp-card__book { flex: 1 1 100%; width: 100%; } .sp-card__price { align-items: flex-start; } .sp-card__seats-left, .sp-card__price-note { text-align: left; } .sp-card__best-label { align-self: flex-start; } .sp-card__score { justify-content: flex-start; } .sp-card__place, .sp-card__country { max-width: 100%; } } @media (max-width: 480px) { .sp-card__facts-schedule, .sp-card__facts-meta { flex-direction: column; gap: 12px; } .sp-card__fact--arrival { justify-content: flex-start; text-align: left; } .sp-card__fact--party { align-items: flex-start; text-align: left; } .sp-card__facts-specs .sp-card__fact { padding-right: 0; } .sp-card__facts-specs .sp-card__fact + .sp-card__fact { padding-left: 0; border-left: none; } .sp-card__book { min-height: 44px; padding: 0 20px; } .sp-card__rail { flex-wrap: wrap; gap: 10px; } .sp-card__actions { flex: 1 1 auto; } .sp-card__actions--empty-leg { width: 100%; max-width: none; } .sp-card__actions--empty-leg .sp-card__book { min-height: 40px; padding-inline: 16px; } } .sp-card__tear, .sp-card__airport, .sp-card__charter-id, .sp-card__price-kicker, .sp-card__share, .sp-card__path-node--end { display: none; } .sp-card__quote { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; } .sp-card__quote-figures { display: contents; } .sp-card__score { order: 2; } .sp-card__price-kicker, .sp-card__charter-id-label { font-family: var(--sp-font-data); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; color: var(--sp-ink-faint); } .sp-card__charter-id-name { font-size: 1.0625rem; font-weight: 600; line-height: 1.2; color: var(--sp-ink); } .sp-card__share { align-items: center; justify-content: center; padding: 0; border: 1px solid var(--sp-card-stroke); border-radius: 0; background: transparent; color: var(--sp-ink-soft); cursor: pointer; } .sp-card__share-icon { width: 17px; height: 17px; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sp-card__share:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; } .sp-card--empty-leg .sp-card__facts, .sp-card--charter .sp-card__facts { flex-direction: row; flex-wrap: wrap; align-items: flex-start; column-gap: 0; } .sp-card--empty-leg .sp-card__fact--departure, .sp-card--charter .sp-card__fact--departure, .sp-card--empty-leg .sp-card__trip-note, .sp-card--charter .sp-card__trip-note { flex: 1 0 100%; } .sp-card--empty-leg .sp-card__fact--class, .sp-card--empty-leg .sp-card__fact--cabin, .sp-card--charter .sp-card__fact--cabin { padding-left: 18px; border-left: 1px solid var(--sp-line); } .sp-card--empty-leg .sp-card__fact--party, .sp-card--charter .sp-card__fact--party { margin-left: auto; } .sp-card__ticket-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; margin-left: auto; text-align: right; } .sp-card__ticket-side .sp-card__fact--party { align-items: flex-end; text-align: right; } .sp-card__ticket-side .sp-card__details { align-self: flex-end; margin-top: 2px; } @media (max-width: 768px) { .sp-card--empty-leg, .sp-card--charter { grid-template-columns: 1fr; cursor: pointer; } .sp-card--empty-leg .sp-card__media, .sp-card--charter .sp-card__media { height: 176px; min-height: 0; aspect-ratio: auto; } .sp-card--empty-leg .sp-card__body, .sp-card--charter .sp-card__body { padding: 18px 18px 6px; } .sp-card--empty-leg .sp-card__iata, .sp-card--charter .sp-card__iata { min-height: 0; padding: 4px 8px; border-radius: 0; letter-spacing: 0.04em; } .sp-card--empty-leg .sp-card__route, .sp-card--charter .sp-card__route { column-gap: 12px; } .sp-card--empty-leg .sp-card__place, .sp-card--charter .sp-card__place, .sp-card--empty-leg .sp-card__airport-name, .sp-card--charter .sp-card__airport-name { display: -webkit-box; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .sp-card--empty-leg .sp-card__place, .sp-card--charter .sp-card__place { font-size: 0.9375rem; font-weight: 600; } .sp-card--empty-leg .sp-card__airport, .sp-card--charter .sp-card__airport { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; font-size: 0.75rem; line-height: 1.25; color: var(--sp-ink-faint); } .sp-card--empty-leg .sp-card__airport .flag-icon, .sp-card--charter .sp-card__airport .flag-icon { flex: none; width: 1.1rem; height: 0.76rem; margin-top: 0.12rem; border-radius: 2px; box-shadow: 0 0 0 1px var(--sp-line); } .sp-card--empty-leg .sp-card__country, .sp-card--charter .sp-card__country { display: none; } .sp-card--empty-leg .sp-card__path, .sp-card--charter .sp-card__path, .sp-card--empty-leg .sp-card__path--via, .sp-card--charter .sp-card__path--via { align-self: start; width: 92px; padding-top: 2px; } .sp-card--empty-leg .sp-card__path-line, .sp-card--charter .sp-card__path-line { justify-content: space-between; } .sp-card--empty-leg .sp-card__path-node--end, .sp-card--charter .sp-card__path-node--end { display: block; z-index: 1; flex: none; } .sp-card--empty-leg .sp-card__facts, .sp-card--charter .sp-card__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 0; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--sp-line); } .sp-card--empty-leg .sp-card__fact, .sp-card--charter .sp-card__fact { min-width: 0; padding-right: 0; } .sp-card--empty-leg .sp-card__fact--departure, .sp-card--charter .sp-card__fact--departure { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 4px; } .sp-card--empty-leg .sp-card__fact--cabin, .sp-card--charter .sp-card__fact--cabin { grid-column: 2; grid-row: 1; align-items: flex-end; padding: 0; border: none; text-align: right; } .sp-card--empty-leg .sp-card__fact--departure .sp-card__fact-value { font-weight: 600; } .sp-card--empty-leg .sp-card__fact--cabin .sp-card__fact-value, .sp-card--charter .sp-card__fact--cabin .sp-card__fact-value { font-weight: 400; } .sp-card--empty-leg .sp-card__fact--aircraft { grid-column: 1; grid-row: 2; padding-right: 14px; } .sp-card--empty-leg .sp-card__fact--class { grid-column: 2; grid-row: 2; align-items: flex-end; padding-left: 14px; border-left: 1px solid var(--sp-line); text-align: right; } .sp-card--charter .sp-card__fact--class, .sp-card--empty-leg .sp-card__fact--party, .sp-card--charter .sp-card__fact--party { display: none; } .sp-card--empty-leg .sp-card__trip-note, .sp-card--charter .sp-card__trip-note { grid-column: 1 / -1; } } @media (max-width: 768px) { .sp-card--empty-leg .sp-card__tear, .sp-card--charter .sp-card__tear { display: block; height: 22px; background-image: repeating-linear-gradient( to right, var(--sp-line-strong) 0 4px, transparent 4px 7px ); background-repeat: repeat-x; background-position: center left; background-size: 7px 1px; } .sp-card--empty-leg .sp-card__rail, .sp-card--charter .sp-card__rail { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; margin-top: 0; padding: 6px 18px 18px; border-top: none; border-left: none; text-align: left; } .sp-card--charter .sp-card__rail > .sp-card__book { flex: 0 0 auto; align-self: stretch; width: 100%; } .sp-card--empty-leg .sp-card__price, .sp-card--charter .sp-card__price { align-items: stretch; width: 100%; text-align: left; } .sp-card--empty-leg .sp-card__best-label, .sp-card--charter .sp-card__best-label { align-self: flex-start; } .sp-card--empty-leg .sp-card__quote, .sp-card--charter .sp-card__quote { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; } .sp-card--empty-leg .sp-card__quote-figures, .sp-card--charter .sp-card__quote-figures { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; order: 1; max-width: 200px; margin-left: auto; text-align: right; } .sp-card--empty-leg .sp-card__price--estimated .sp-card__quote-figures { gap: 2px; } .sp-card--empty-leg .sp-card__score, .sp-card--charter .sp-card__charter-id { display: flex; flex-direction: column; align-items: flex-start; order: 0; gap: 4px; max-width: 150px; margin-top: 0; } .sp-card--charter .sp-card__charter-id { gap: 3px; } .sp-card--empty-leg .sp-card__score-value { font-size: 1rem; font-weight: 600; line-height: 1.2; } .sp-card--empty-leg .sp-card__price-kicker { display: block; } .sp-card--empty-leg .sp-card__amount, .sp-card--charter .sp-card__amount { font-size: 1.5rem; letter-spacing: -0.3px; } .sp-card--charter .sp-card__approx { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-ink-faint); } .sp-card--empty-leg .sp-card__price--estimated .sp-card__approx { order: 1; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--sp-ink-soft); } .sp-card--empty-leg .sp-card__price--estimated .sp-card__amount { order: 2; } .sp-card--empty-leg .sp-card__details { display: none; } .sp-card--empty-leg .sp-card__actions--empty-leg, .sp-card--empty-leg .sp-card__primary-actions { width: 100%; } .sp-card--empty-leg .sp-card__primary-actions { gap: 8px; } .sp-card--empty-leg .sp-card__share { display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; } .sp-card--empty-leg .sp-card__actions--empty-leg .sp-card__fav { flex-basis: 44px; width: 44px; height: 44px; } .sp-card--empty-leg .sp-card__actions--empty-leg .sp-card__book, .sp-card--charter .sp-card__rail > .sp-card__book { min-height: 44px; } .sp-card--empty-leg .sp-card__book::after, .sp-card--charter .sp-card__book::after { content: " →"; } .sp-card--ticket .sp-card__path { width: 84px; } .sp-card--ticket .sp-card__country, .sp-card--ticket .sp-card__country-name, .sp-card--ticket .sp-card__place { white-space: normal; } .sp-card--ticket .sp-card__country { align-items: flex-start; } .sp-card--ticket .sp-card__country-name, .sp-card--ticket .sp-card__place { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .sp-card--ticket .sp-card__facts-schedule, .sp-card--ticket .sp-card__facts-specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 12px 16px; } .sp-card--ticket .sp-card__facts-meta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .sp-card--ticket .sp-card__facts-schedule .sp-card__fact, .sp-card--ticket .sp-card__facts-specs .sp-card__fact { min-width: 0; padding: 0; border: none; } .sp-card--ticket .sp-card__fact--departure, .sp-card--ticket .sp-card__fact--arrival { flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; } .sp-card--ticket .sp-card__facts-specs .sp-card__fact:nth-child(even), .sp-card--ticket .sp-card__fact--arrival { align-items: flex-end; text-align: right; } .sp-card--ticket .sp-card__fact-label, .sp-card--ticket .sp-card__fact-value { max-width: 100%; overflow-wrap: anywhere; } .sp-card--ticket .sp-card__rail { align-items: flex-start; } } .sp-band { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 4px 2px 2px; } .sp-band:has(.sp-ticket-filters) { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; } .sp-band__copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .sp-band:has(.sp-ticket-filters) .sp-band__copy { flex: 1 1 auto; } .sp-list-head .sp-band { padding: 0; } .sp-cards > .sp-card + .sp-band, .sp-cards--classic > .sp-classic-item + .sp-band { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--sp-line); } .sp-band--certified { border-top-color: color-mix(in srgb, var(--sp-accent) 28%, transparent); } :root[data-theme="dark"] .sp-cards > .sp-card + .sp-band--certified { border-top-color: color-mix(in srgb, var(--sp-accent) 40%, transparent); } .sp-band__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4em; margin: 0; font-family: var(--sp-font-display); font-size: clamp(1.05rem, 1.55vw, 1.28rem); font-weight: 650; font-stretch: 108%; letter-spacing: -0.022em; line-height: 1.25; color: var(--sp-ink); text-wrap: balance; } .sp-band__mark { color: var(--sp-accent-deep); font-weight: 700; } .sp-band__sep { color: var(--sp-ink-faint); font-weight: 500; } .sp-band__product { color: var(--sp-ink); font-weight: 600; } .sp-band__note { margin: 0; max-width: 42rem; font-family: var(--sp-font-body); font-size: 0.8125rem; line-height: 1.45; color: var(--sp-ink-soft); } @media (max-width: 768px) { .sp-band:has(.sp-ticket-filters) { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; } } @media (max-width: 480px) { .sp-cards > .sp-card + .sp-band, .sp-cards--classic > .sp-classic-item + .sp-band { padding-top: 14px; } .sp-band__title { font-size: 1.05rem; } } .flight-card { background: var(--white); border-radius: 0; margin-bottom: var(--space-md); overflow: hidden; transition: all var(--transition-base) ease; } .flight-card-compact { background: #ffffff; border: 0.5px solid rgba(60, 60, 67, 0.14); border-radius: 0; padding: 10px 14px; margin-bottom: 0; cursor: pointer; transition: all var(--transition-base) ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); position: relative; } @media (hover: hover) and (pointer: fine) { .flight-card-compact:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); border-color: color-mix(in srgb, var(--primary) 65%, transparent); background: #ffffff; } } :root[data-theme="dark"] .flight-card { background: rgba(28, 30, 36, 0.52); } :root[data-theme="dark"] .flight-card-compact { background: rgba(28, 30, 36, 0.52); border: 0.5px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); } @media (hover: hover) and (pointer: fine) { :root[data-theme="dark"] .flight-card-compact:hover { background: rgba(38, 40, 48, 0.72); border-color: color-mix(in srgb, var(--primary) 65%, transparent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06); } } .flight-id-badge { position: absolute; top: -1px; left: -1px; background: #e0fdf9; color: #064e3b; padding: 4px 10px; border-radius: var(--radius-lg) 0 12px 0; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; cursor: pointer; transition: all 0.2s ease; z-index: 10; border: 1px solid #a7f3ea; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .flight-id-badge:hover { background: #a7f3ea; transform: scale(1.05); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); } .flight-id-badge:active { transform: scale(0.98); } .flight-id-badge i { font-size: 10px; opacity: 0.8; } .flight-id-text { font-family: "Roboto Mono", monospace; letter-spacing: 0.5px; } .flight-id-badge.copied { background: #86efac; color: #14532d; animation: copy-success 0.3s ease; } @keyframes copy-success { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1.05); } } .flight-id-badge-xl { position: absolute; top: 0; left: 0; background: #e0fdf9; color: #064e3b; padding: 4px 10px; border-radius: var(--radius-lg) 0 12px 0; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; cursor: pointer; transition: all 0.2s ease; z-index: 100; border: 1px solid #a7f3ea; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .flight-id-badge-xl:hover { background: #a7f3ea; transform: scale(1.05); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); } .flight-id-badge-xl:active { transform: scale(0.98); } .flight-id-badge-xl i { font-size: 10px; opacity: 0.8; } .flight-id-badge-xl .flight-id-text { font-family: "Roboto Mono", monospace; letter-spacing: 0.5px; } .flight-id-badge-xl.copied { background: #86efac; color: #14532d; animation: copy-success 0.3s ease; } .flight-card-content { display: flex; align-items: center; gap: 1rem; padding: 0 1rem; } .flight-table-container { background: transparent; margin-bottom: var(--space-lg); } .flight-table-headers { display: flex; align-items: center; padding: 12px 20px; background: var(--gray-50); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 2px solid var(--gray-200); font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--gray-600); margin-bottom: 0; } .flight-table-row { display: flex; align-items: center; padding: 0; background: transparent; margin-bottom: 12px; } .table-header, .table-cell { display: flex; align-items: center; padding: 0 var(--space-sm); } .table-header { font-weight: var(--font-semibold); color: var(--gray-700); user-select: none; } .cell-departure, .cell-arrival { flex: 1.5; min-width: 0; } .cell-datetime { flex: 1.2; min-width: 0; } .cell-duration { flex: 0.8; min-width: 0; } .cell-aircraft { flex: 1.5; min-width: 0; } .cell-seats { flex: 0.8; min-width: 0; text-align: center; } .cell-actions { width: 120px; flex-shrink: 0; display: flex; justify-content: flex-end; } .airport-info { display: flex; align-items: center; gap: var(--space-sm); } .airport-location { display: flex; flex-direction: column; gap: 2px; } .city-name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--gray-800); } .airport-code { font-size: var(--text-xs); color: var(--gray-500); font-family: var(--font-mono); } .airport-district { font-size: var(--text-xs); color: var(--gray-500); font-weight: normal; margin-top: 2px; } .country-flag { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; } .datetime-info { display: flex; flex-direction: column; gap: 2px; } .date { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--gray-800); } .time { font-size: var(--text-xs); color: var(--gray-500); } .duration-info { display: flex; flex-direction: column; gap: 2px; text-align: center; } .flight-time { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--gray-800); } .distance { font-size: var(--text-xs); color: var(--gray-500); } .aircraft-info { display: flex; align-items: center; gap: var(--space-sm); } .aircraft-image-container, .flight-list-aircraft-image { width: 136px !important; height: 102px !important; min-width: 136px; min-height: 102px; max-width: 136px; max-height: 102px; object-fit: cover; object-position: center; border-radius: 4px; background: var(--gray-50); display: block; flex-shrink: 0; transform: scale(1); transform-origin: center; } @supports (object-fit: cover) { .flight-list-aircraft-image { object-fit: cover !important; } } .aircraft-placeholder { width: 120px; height: 90px; display: flex; align-items: center; justify-content: center; background: var(--gray-100); border-radius: var(--radius-sm); color: var(--gray-400); font-size: 1.5rem; } .aircraft-details { display: flex; flex-direction: column; gap: 2px; } .model { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--gray-800); } .registration { font-size: var(--text-xs); color: var(--gray-500); font-family: var(--font-mono); } .seats-count { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--gray-700); } .action-buttons { display: flex; gap: var(--space-xs); align-items: center; } .action-btn { padding: 6px 10px; border: none; background: transparent; color: var(--gray-600); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition-fast) ease; font-size: var(--text-sm); } .action-btn:hover { background: var(--gray-100); color: var(--gray-800); } .favorite-btn { color: var(--gray-400); } .favorite-btn:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); } .favorite-btn.active { color: var(--danger); } .view-btn:hover { color: var(--info); background: rgba(59, 130, 246, 0.1); } .book-btn { background: var(--primary); color: var(--white); border: 0.5px solid var(--primary-dark); padding: 8px 16px; font-weight: var(--font-medium); border-radius: 0; } .book-btn:hover { background: var(--primary-hover); border-color: var(--primary); transform: translateY(-1px); } .book-btn.booked { cursor: default; opacity: 1; } .book-btn:disabled:not(.booked) { opacity: 0.5; cursor: not-allowed; } .price { font-weight: var(--font-semibold); } @media (max-width: 768px) { .flight-card-content { gap: 0.75rem; flex-wrap: wrap; } .flight-table-headers { display: none; } .flight-table-row { flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: 0; padding: var(--space-md); box-shadow: var(--shadow-sm); } .table-cell { width: 100%; padding: var(--space-xs) 0; } .cell-actions { width: 100%; justify-content: center; margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--gray-200); } .aircraft-image-container, .flight-list-aircraft-image { width: 96px !important; height: 75px !important; min-width: 96px; min-height: 75px; max-width: 96px; max-height: 75px; object-fit: cover; } .action-buttons { width: 100%; justify-content: space-between; } .book-btn { flex: 1; } } @media (max-width: 480px) { .flight-card-compact { padding: 8px; margin-bottom: 8px; } .flight-card-content { padding: 0 var(--space-xs); } .airport-info { flex-direction: column; align-items: flex-start; gap: 2px; } .country-flag { display: none; } } .btn.btn--solid.show-flights-btn, .btn.btn--solid.book-btn, .show-flights-btn, .book-btn.btn--solid, .flight-card-compact .action-buttons .book-btn, .fp-multi-leg-card .action-buttons .book-btn, .flight-page .fp-book-btn, #flight-details-popup .popup-footer .book-btn, #booking-details-modal .popup-footer .book-btn { --cta-apple-fill: #2b4666; --cta-apple-border: #2b4666; --cta-apple-hover-fill: color-mix(in srgb, #2b4666 88%, #000); --cta-apple-hover-border: color-mix(in srgb, #2b4666 88%, #000); background: var(--cta-apple-fill); border: none; color: #fff; -webkit-text-fill-color: #fff; font-family: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; -webkit-font-smoothing: antialiased; box-shadow: none; transition: background-color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } :root[data-theme="dark"] .btn.btn--solid.show-flights-btn, :root[data-theme="dark"] .btn.btn--solid.book-btn, :root[data-theme="dark"] .show-flights-btn, :root[data-theme="dark"] .book-btn.btn--solid, :root[data-theme="dark"] .flight-card-compact .action-buttons .book-btn, :root[data-theme="dark"] .fp-multi-leg-card .action-buttons .book-btn, :root[data-theme="dark"] .flight-page .fp-book-btn, :root[data-theme="dark"] #flight-details-popup .popup-footer .book-btn, :root[data-theme="dark"] #booking-details-modal .popup-footer .book-btn { --cta-apple-fill: #4a6a8f; --cta-apple-border: #4a6a8f; --cta-apple-hover-fill: color-mix(in srgb, #4a6a8f 88%, #000); --cta-apple-hover-border: color-mix(in srgb, #4a6a8f 88%, #000); } .btn.btn--solid.show-flights-btn:hover, .btn.btn--solid.book-btn:hover, .show-flights-btn:hover, .book-btn.btn--solid:hover, .flight-card-compact .action-buttons .book-btn:hover, .fp-multi-leg-card .action-buttons .book-btn:hover, .flight-page .fp-book-btn:hover, #flight-details-popup .popup-footer .book-btn:hover, #booking-details-modal .popup-footer .book-btn:hover { background: var(--cta-apple-hover-fill); border-color: var(--cta-apple-hover-border); color: #fff; -webkit-text-fill-color: #fff; transform: translateY(-1px); box-shadow: none; } .btn.btn--solid.show-flights-btn:active, .btn.btn--solid.book-btn:active, .show-flights-btn:active, .book-btn.btn--solid:active, .flight-card-compact .action-buttons .book-btn:active, .fp-multi-leg-card .action-buttons .book-btn:active, .flight-page .fp-book-btn:active, #flight-details-popup .popup-footer .book-btn:active, #booking-details-modal .popup-footer .book-btn:active { transform: none; opacity: 0.94; box-shadow: none; } .show-flights-btn { border-radius: 0; min-height: 48px; padding: 0.75rem 1.75rem; font-size: 0.75rem; } .flight-card-compact .action-buttons .book-btn, .fp-multi-leg-card .action-buttons .book-btn, #booking-flight-panel .fd-rail-actions > .action-buttons .book-btn, #flight-details-popup .fd-rail-actions > .action-buttons .book-btn, #booking-details-modal .fd-rail-actions > .action-buttons .book-btn { border-radius: 0; min-height: 42px; padding: 0 26px; font-size: 0.75rem; letter-spacing: 0.16em; border-right: none; flex: 1 1 auto; gap: 0; } .flight-page .fp-book-btn { border-radius: 0; min-height: 44px; padding: 0.625rem 1.5rem; font-size: 0.75rem; border-right: none; } .flight-card-compact .action-buttons .book-btn.booked, .fp-multi-leg-card .action-buttons .book-btn.booked, .btn.btn--solid.book-btn.booked, .btn.btn--solid.book-btn.is-success.booked, #booking-flight-panel .fd-rail-actions > .action-buttons .book-btn.booked, #flight-details-popup .popup-footer .book-btn.booked, #flight-details-popup .fd-rail-actions > .action-buttons .book-btn.booked, #booking-details-modal .popup-footer .book-btn.booked, #booking-details-modal .fd-rail-actions > .action-buttons .book-btn.booked, .flight-page .fp-book-btn.booked { --booked-fill: rgba(47, 111, 237, 0.1); --booked-border: rgba(47, 111, 237, 0.42); --booked-text: #2560d6; --booked-inset: transparent; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.16em; text-transform: uppercase; background: var(--booked-fill); border: 1px solid var(--booked-border); color: var(--booked-text); cursor: default; pointer-events: none; opacity: 1; box-shadow: none; transform: none; } :root[data-theme="dark"] .flight-card-compact .action-buttons .book-btn.booked, :root[data-theme="dark"] .fp-multi-leg-card .action-buttons .book-btn.booked, :root[data-theme="dark"] .btn.btn--solid.book-btn.booked, :root[data-theme="dark"] .btn.btn--solid.book-btn.is-success.booked, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions > .action-buttons .book-btn.booked, :root[data-theme="dark"] #flight-details-popup .popup-footer .book-btn.booked, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions > .action-buttons .book-btn.booked, :root[data-theme="dark"] #booking-details-modal .popup-footer .book-btn.booked, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions > .action-buttons .book-btn.booked, :root[data-theme="dark"] .flight-page .fp-book-btn.booked { --booked-fill: rgba(91, 140, 255, 0.14); --booked-border: rgba(91, 140, 255, 0.42); --booked-text: #5b8cff; --booked-inset: transparent; } .flight-card-compact .action-buttons .book-btn.booked:hover, .fp-multi-leg-card .action-buttons .book-btn.booked:hover, .btn.btn--solid.book-btn.booked:hover, .btn.btn--solid.book-btn.is-success.booked:hover, #flight-details-popup .popup-footer .book-btn.booked:hover, #booking-details-modal .popup-footer .book-btn.booked:hover, .flight-page .fp-book-btn.booked:hover, .btn.btn--solid.book-btn.is-success.booked:disabled, .btn.btn--solid.book-btn.is-success.booked:disabled:hover, .flight-card-compact .action-buttons .book-btn.booked:disabled, .flight-card-compact .action-buttons .book-btn.booked:disabled:hover { background: var(--booked-fill); border-color: var(--booked-border); color: var(--booked-text); transform: none; box-shadow: inset 0 1px 0 var(--booked-inset); opacity: 1; } .flight-card-compact .action-buttons .book-btn.booked, .fp-multi-leg-card .action-buttons .book-btn.booked, #booking-flight-panel .fd-rail-actions > .action-buttons .book-btn.booked, #flight-details-popup .fd-rail-actions > .action-buttons .book-btn.booked, #booking-details-modal .fd-rail-actions > .action-buttons .book-btn.booked { border-radius: 0; min-height: 42px; padding: 0 14px; } .flight-page .fp-book-btn.booked { border-radius: 0; min-height: 44px; padding: 0 20px; font-size: 0.75rem; } .show-flights-btn:disabled { background: var(--color-surface-strong); color: var(--color-text-faint); box-shadow: none; opacity: 1; } .show-flights-btn:disabled:hover { background: var(--color-surface-strong); transform: none; box-shadow: none; } .show-flights-btn.is-loading, .show-flights-btn.is-loading:disabled, .show-flights-btn.is-loading:disabled:hover { display: inline-flex; align-items: center; justify-content: center; cursor: progress; pointer-events: none; color: #fff; opacity: 1; background: var(--cta-apple-fill, var(--primary)); border-color: var(--cta-apple-border, var(--primary-dark)); box-shadow: none; transform: none; } .show-flights-btn__loading-content { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; } .show-flights-btn__label { letter-spacing: -0.024em; line-height: 1.15; white-space: nowrap; } .show-flights-btn__spinner { flex: 0 0 16px; width: 16px; height: 16px; border: 1.5px solid rgba(255, 255, 255, 0.28); border-top-color: #fff; border-radius: 50%; animation: show-flights-spin 0.72s linear infinite; } @keyframes show-flights-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .show-flights-btn__spinner { animation: none; border-top-color: rgba(255, 255, 255, 0.72); opacity: 0.9; } } .flight-card-compact, .fp-multi-leg-card { --fc-bg: #ffffff; --fc-fill: transparent; --fc-fill-elevated: #eceff3; --fc-segment-bg: transparent; --fc-separator: rgba(14, 26, 44, 0.12); --fc-label: #6b7686; --fc-text: #0e1a2c; --fc-text-secondary: #3e4b5e; --fc-radius: 0; --fc-radius-inner: 0; --fc-radius-pill: 0; --fc-shadow: none; --fc-perf-line: rgba(14, 26, 44, 0.18); --fc-divider: rgba(14, 26, 44, 0.12); --fc-aircraft-photo-radius: 0; --fc-aircraft-photo-w: 136px; --fc-aircraft-photo-h: 102px; --fc-col-gap: 12px; --fc-col-date-w: 70px; --fc-col-dur-w: 92px; --fc-col-ac-photo-w: 148px; --fc-ticket-ratings-w: 100px; --fc-ticket-actions-w: 140px; --fc-ticket-stub-w: calc( var(--fc-ticket-ratings-w) + var(--fc-col-gap) + var(--fc-ticket-actions-w) ); --fc-accent: #2f6fed; --fc-accent-border: #2f6fed; --fc-accent-line: rgba(47, 111, 237, 0.28); --fc-font: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; font-family: var(--fc-font); background: var(--fc-bg); border: 1px solid rgba(14, 26, 44, 0.18); border-radius: var(--fc-radius); padding: 14px 16px; margin-bottom: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease; } :root[data-theme="dark"] .flight-card-compact, :root[data-theme="dark"] .fp-multi-leg-card { --fc-bg: #12141a; --fc-fill: transparent; --fc-fill-elevated: #181b22; --fc-segment-bg: transparent; --fc-separator: rgba(255, 255, 255, 0.12); --fc-label: #7c8797; --fc-text: #f2f4f7; --fc-text-secondary: #b8c0cc; --fc-shadow: none; --fc-perf-line: rgba(255, 255, 255, 0.18); --fc-divider: rgba(255, 255, 255, 0.12); --fc-accent: #5b8cff; --fc-accent-border: #5b8cff; --fc-accent-line: rgba(91, 140, 255, 0.28); background: var(--fc-bg); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } @media (hover: hover) and (pointer: fine) { .flight-card-compact:hover, .fp-multi-leg-card:hover, .flight-card-compact.booking-card:hover { background: color-mix(in srgb, var(--fc-bg) 92%, rgba(47, 111, 237, 0.1)); border-color: var(--fc-accent-border); box-shadow: none; } :root[data-theme="dark"] .flight-card-compact:hover, :root[data-theme="dark"] .fp-multi-leg-card:hover, :root[data-theme="dark"] .flight-card-compact.booking-card:hover { background: color-mix(in srgb, var(--fc-bg) 92%, rgba(91, 140, 255, 0.14)); border-color: var(--fc-accent-border); box-shadow: none; } } .flight-card-compact:active, .fp-multi-leg-card:active { transform: none; } .flight-card-compact .flight-id-badge, .flight-card-compact .flight-id-badge-xl { top: 0; left: 0; background: var(--fc-fill); color: var(--fc-text-secondary); border: none; border-radius: var(--fc-radius) 0 10px 0; box-shadow: none; font-family: ui-monospace, "SF Mono", "Roboto Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 4px 10px; } .flight-card-compact .flight-id-badge:hover, .flight-card-compact .flight-id-badge-xl:hover { background: var(--fc-fill-elevated); transform: none; box-shadow: none; } .flight-card-compact .flight-id-badge.copied, .flight-card-compact .flight-id-badge-xl.copied { background: rgba(52, 199, 89, 0.14); color: #248a3d; } .flight-card-compact .flight-card-content, .fp-multi-leg-card .flight-card-content { gap: 12px 14px; padding: 0 2px; align-items: center; } .flight-card-compact .flight-datetime, .fp-multi-leg-card .flight-datetime { min-width: 52px; } .flight-card-compact .flight-date-month, .fp-multi-leg-card .fp-multi-leg-date-line { font-family: var(--fc-font); font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--fc-text); line-height: 1.25; } .flight-card-compact .flight-date-year { font-family: var(--fc-font); font-size: 12px; font-weight: 400; color: var(--fc-label); line-height: 1.25; } .flight-card-compact .flight-departure, .flight-card-compact .flight-destination { min-width: 0; gap: 3px; } .flight-card-compact .flight-departure .airport-city, .flight-card-compact .flight-destination .airport-city { font-family: var(--fc-font); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--fc-text); line-height: 1.35; white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; } .flight-card-compact .flight-departure .airport-district, .flight-card-compact .flight-destination .airport-district, .flight-card-compact .flight-departure .airport-name, .flight-card-compact .flight-destination .airport-name { font-family: var(--fc-font); font-size: 12px; font-weight: 400; color: var(--fc-label); line-height: 1.35; white-space: normal; overflow: visible; text-overflow: unset; word-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; } .flight-card-compact .flight-departure .airport-code, .flight-card-compact .flight-destination .airport-code { font-family: ui-monospace, "SF Mono", "Roboto Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--fc-text-secondary); margin-top: 1px; } .flight-card-compact .flight-duration { gap: 5px; } .flight-card-compact .duration-time, .flight-card-compact .duration-distance { font-family: var(--fc-font); font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: var(--fc-text-secondary); gap: 5px; } .flight-card-compact .duration-time { color: var(--fc-text); } .flight-card-compact .flight-duration i { font-size: 10px; color: var(--fc-label); opacity: 0.85; } .flight-card-compact .duration-separator { color: var(--fc-label); opacity: 0.5; } .flight-card-compact .duration-separator i { font-size: 9px; } .flight-card-compact .flight-aircraft .aircraft-details { gap: 3px; min-width: 0; } .flight-card-compact .aircraft-model { font-family: var(--fc-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--fc-text); line-height: 1.35; white-space: normal; overflow: visible; text-overflow: unset; word-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; } .flight-card-compact .aircraft-category { font-family: var(--fc-font); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fc-label); margin: 0; } .flight-card-compact .flight-aircraft .aircraft-seats { font-family: var(--fc-font); font-size: 12px; font-weight: 400; color: var(--fc-label); margin-top: 1px; } .flight-card-compact .flight-aircraft .aircraft-seats i { font-size: 10px; color: var(--fc-label); margin-right: 3px; } .flight-card-compact .flight-aircraft-image .aircraft-image-container { background: var(--fc-fill); border-radius: var(--fc-aircraft-photo-radius); border: none; min-height: 52px; overflow: hidden; } .flight-card-compact .flight-list-aircraft-image, .flight-card-compact .aircraft-image-container .aircraft-image { border-radius: var(--fc-aircraft-photo-radius); } .flight-card-compact .flight-ratings { flex: 0 0 auto; min-width: 0; max-width: 120px; gap: 4px; } .flight-card-compact .score-badge-container { gap: 3px; } .flight-card-compact .score-badge { min-width: 28px; height: 28px; padding: 2px 7px; border-radius: 8px; font-size: 13px; font-weight: 700; box-shadow: none; border: none; } .flight-card-compact .score-badge:hover { transform: none; box-shadow: none; filter: brightness(1.05); } .flight-card-compact .score-value { font-family: var(--fc-font); } .flight-card-compact .score-comment { font-family: var(--fc-font); font-size: 10px; font-weight: 400; line-height: 1.3; color: var(--fc-label); text-align: center; max-width: 110px; white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; } .flight-card-compact .price-label { font-family: var(--fc-font); font-size: 11px; color: var(--fc-label); } .flight-card-compact .flight-actions { width: 132px; gap: 6px; } .flight-card-compact .actions-price-display, .fp-multi-leg-card .actions-price-display { gap: 1px; width: 100%; max-width: 100%; min-width: 0; overflow: visible; } .flight-card-compact .price-line, .fp-multi-leg-card .price-line, .flight-card-compact .price-meta, .fp-multi-leg-card .price-meta { position: relative; width: 100%; max-width: 100%; min-width: 0; white-space: nowrap; flex-wrap: nowrap; } .flight-card-compact .price-line .current-price, .flight-card-compact .price-meta .original-price, .flight-card-compact .price-meta .savings-line, .flight-card-compact .price-meta .estimated-price-label, .fp-multi-leg-card .price-line .current-price, .fp-multi-leg-card .price-meta .original-price, .fp-multi-leg-card .price-meta .savings-line, .fp-multi-leg-card .price-meta .estimated-price-label { flex-shrink: 0; line-height: 1.1; } .flight-card-compact .actions-price-display--estimated, .fp-multi-leg-card .actions-price-display--estimated { align-items: flex-end; gap: 3px; } .flight-card-compact .estimated-price-label, .fp-multi-leg-card .estimated-price-label { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--fc-font); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--fc-label); } .flight-card-compact .estimated-price-label__sep, .fp-multi-leg-card .estimated-price-label__sep { width: 2px; height: 2px; border-radius: 50%; background: currentColor; opacity: 0.45; flex: 0 0 auto; } .flight-card-compact:not(.booking-card) .flight-actions, .fp-multi-leg-card:not(.booking-card) .flight-actions { overflow: visible; } .flight-card-compact .price-line.price-line--expand, .fp-multi-leg-card .price-line.price-line--expand { z-index: 5; width: max-content; max-width: none; } .flight-card-compact .price-line.price-line--expand::before, .fp-multi-leg-card .price-line.price-line--expand::before { content: ""; position: absolute; inset: -3px -6px -3px -12px; background: var(--fc-segment-bg, #fff); border-radius: 8px; z-index: -1; box-shadow: -12px 0 16px -8px var(--fc-segment-bg, #fff); } .flight-card-compact .current-price { font-family: var(--fc-font); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--fc-text); font-variant-numeric: tabular-nums; } .flight-card-compact .original-price { font-family: var(--fc-font); font-size: 13px; font-weight: 400; color: var(--fc-label); } .flight-card-compact .savings-line { font-family: var(--fc-font); font-size: 11px; font-weight: 500; letter-spacing: -0.01em; } .flight-card-compact .savings-line.has-savings { color: #248a3d; } .flight-card-compact .savings-line.has-overprice { color: var(--fc-text-secondary); } .flight-card-compact .overprice-badge { font-family: var(--fc-font); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: var(--fc-radius-pill); background: rgba(255, 59, 48, 0.1); color: #d70015; } .flight-card-compact .current-price.price-contact { font-size: 13px; font-weight: 600; color: var(--fc-text-secondary); } .flight-card-compact .action-buttons, #booking-flight-panel .fd-rail-actions > .action-buttons, #flight-details-popup .fd-rail-actions > .action-buttons, #booking-details-modal .fd-rail-actions > .action-buttons { flex-direction: row; gap: 8px; border: none; box-shadow: none; overflow: visible; background: transparent; border-radius: 0; width: 100%; align-items: stretch; } .flight-card-compact .action-buttons:hover, .fp-multi-leg-card .action-buttons:hover { box-shadow: none; border-color: transparent; } .flight-card-compact .fc-tear, .fp-multi-leg-card .fc-tear { display: none; } .flight-card-compact .action-buttons .favorite-btn, .flight-card-compact .flight-actions .action-btn { font-family: var(--fc-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; border-radius: 0; min-height: 36px; padding: 0 14px; transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease; } .flight-card-compact .action-buttons .book-btn { display: inline-flex; align-items: center; justify-content: center; } .flight-card-compact .action-buttons .fc-share-btn, .flight-card-compact .action-buttons .favorite-btn, #booking-flight-panel .fd-rail-actions > .action-buttons .fc-share-btn, #booking-flight-panel .fd-rail-actions > .action-buttons .favorite-btn, #flight-details-popup .fd-rail-actions > .action-buttons .fc-share-btn, #flight-details-popup .fd-rail-actions > .action-buttons .favorite-btn, #booking-details-modal .fd-rail-actions > .action-buttons .fc-share-btn, #booking-details-modal .fd-rail-actions > .action-buttons .favorite-btn { flex: 0 0 44px; width: 44px; min-width: 44px; padding: 0; background: #f2f2f7; color: #1d1d1f; border: 0.5px solid rgba(60, 60, 67, 0.22); box-shadow: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; } :root[data-theme="dark"] .flight-card-compact .action-buttons .fc-share-btn, :root[data-theme="dark"] .flight-card-compact .action-buttons .favorite-btn, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions > .action-buttons .fc-share-btn, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions > .action-buttons .favorite-btn, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions > .action-buttons .fc-share-btn, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions > .action-buttons .favorite-btn, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions > .action-buttons .fc-share-btn, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions > .action-buttons .favorite-btn { background: rgba(255, 255, 255, 0.06); color: var(--fc-text-secondary); border-color: rgba(255, 255, 255, 0.12); } .flight-card-compact .action-buttons .fc-share-btn:hover, #booking-flight-panel .fd-rail-actions > .action-buttons .fc-share-btn:hover, #flight-details-popup .fd-rail-actions > .action-buttons .fc-share-btn:hover, #booking-details-modal .fd-rail-actions > .action-buttons .fc-share-btn:hover { background: #eaeaed; color: var(--fc-text); border-color: rgba(60, 60, 67, 0.3); box-shadow: none; } :root[data-theme="dark"] .flight-card-compact .action-buttons .fc-share-btn:hover, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions > .action-buttons .fc-share-btn:hover, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions > .action-buttons .fc-share-btn:hover, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions > .action-buttons .fc-share-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); } .flight-card-compact .action-buttons .favorite-btn:hover { background: rgba(255, 59, 48, 0.12); color: var(--danger); border-color: rgba(255, 59, 48, 0.28); border-radius: 0; box-shadow: none; transform: none; } #booking-flight-panel .fd-rail-actions > .action-buttons .favorite-btn:hover, #flight-details-popup .fd-rail-actions > .action-buttons .favorite-btn:hover, #booking-details-modal .fd-rail-actions > .action-buttons .favorite-btn:hover { background: rgba(60, 60, 67, 0.1); color: #ff3b30; border-color: transparent; border-radius: 0; box-shadow: none; transform: none; } .flight-card-compact .action-buttons .favorite-btn.active, .flight-card-compact .action-buttons .favorite-btn.favorited { color: var(--danger); background: rgba(255, 59, 48, 0.12); border-color: rgba(255, 59, 48, 0.28); } #booking-flight-panel .fd-rail-actions > .action-buttons .favorite-btn.active, #booking-flight-panel .fd-rail-actions > .action-buttons .favorite-btn.favorited, #flight-details-popup .fd-rail-actions > .action-buttons .favorite-btn.active, #flight-details-popup .fd-rail-actions > .action-buttons .favorite-btn.favorited, #booking-details-modal .fd-rail-actions > .action-buttons .favorite-btn.active, #booking-details-modal .fd-rail-actions > .action-buttons .favorite-btn.favorited, #booking-flight-panel .fd-rail-actions .favorite-btn.favorited, #flight-details-popup .fd-rail-actions .favorite-btn.favorited, #booking-details-modal .fd-rail-actions .favorite-btn.favorited, #booking-flight-panel .fd-rail-actions .favorite-btn.is-favorite, #flight-details-popup .fd-rail-actions .favorite-btn.is-favorite, #booking-details-modal .fd-rail-actions .favorite-btn.is-favorite { color: #ff3b30; background: transparent; border-color: transparent; } .flight-card-compact .action-buttons .favorite-btn.favorited i, .flight-card-compact .action-buttons .favorite-btn.is-favorite i, #booking-flight-panel .fd-rail-actions .favorite-btn.favorited i, #flight-details-popup .fd-rail-actions .favorite-btn.favorited i, #booking-details-modal .fd-rail-actions .favorite-btn.favorited i { color: #ff3b30; } .flight-card-compact.booking-card { border-left: none; } @media (hover: hover) and (pointer: fine) { :root:not([data-theme="dark"]) .flight-card-compact.booking-card:hover { background: #ffffff; border-color: var(--fc-accent-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fc-accent-line); } } .flight-card-compact.booking-card .booking-status .status-badge { font-family: var(--fc-font); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-radius: var(--fc-radius-pill); padding: 4px 10px; } .flight-card-compact.booking-card .booking-date-time, .flight-card-compact.booking-card .booking-value { font-family: var(--fc-font); font-size: 12px; color: var(--fc-label); } .flight-card-compact.booking-card .booking-price-value { font-family: var(--fc-font); font-weight: 700; color: var(--fc-text); } .flight-card-compact .flight-actions .cancel-btn, .flight-card-compact .flight-actions .chat-btn { background: var(--fc-fill); color: var(--fc-text); border: none; box-shadow: none; } .flight-card-compact .flight-actions .cancel-btn:hover { background: rgba(255, 59, 48, 0.1); color: #d70015; transform: none; box-shadow: none; } .flight-card-compact .flight-actions .chat-btn:hover { background: var(--fc-fill-elevated); transform: none; box-shadow: none; } .fp-multi-leg-card { border-color: rgba(60, 60, 67, 0.14); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); } @media (hover: hover) and (pointer: fine) { :root:not([data-theme="dark"]) .fp-multi-leg-card:hover { background: #ffffff; border-color: var(--fc-accent-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--fc-accent-line); } } :root[data-theme="dark"] .fp-multi-leg-card { border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); } .fp-multi-leg-card .fp-multi-leg-badge { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); border: none; border-radius: var(--fc-radius) 0 10px 0; font-family: var(--fc-font); font-size: 10px; font-weight: 600; } .flight-card-compact.fp-multi-leg-card .flight-id-badge.fp-multi-leg-badge { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); } .flight-card-compact.fp-multi-leg-card .flight-id-badge.fp-multi-leg-badge .flight-id-text, .flight-card-compact.fp-multi-leg-card .flight-id-badge.fp-multi-leg-badge i { color: inherit; } .fp-multi-leg-card .fp-multi-leg-legs-panel { border-top: 0.5px solid var(--fc-separator); background: var(--fc-fill); border-radius: 0 0 var(--fc-radius) var(--fc-radius); margin-top: 8px; padding: 14px 16px 12px; } .fp-multi-leg-card .fp-leg-row { border-bottom-color: var(--fc-separator); } .fp-multi-leg-card .fp-leg-index { font-family: var(--fc-font); background: var(--fc-fill); color: var(--fc-label); } .fp-multi-leg-card .fp-leg-code { font-family: var(--fc-font); color: var(--fc-text); } .fp-multi-leg-card .fp-leg-city { font-family: var(--fc-font); color: var(--fc-label); } .fp-multi-leg-card .fp-leg-point { flex-direction: row; align-items: baseline; } .fp-multi-leg-card .fp-leg-arrow { background: var(--fc-separator); margin: 0; align-self: center; } .fp-multi-leg-card .fp-leg-arrow::after { border-left-color: var(--fc-label); } .fp-multi-leg-card .fp-leg-meta { font-family: var(--fc-font); color: var(--fc-label); } .fp-multi-leg-card .fp-leg-metrics { font-family: var(--fc-font); color: var(--fc-label); } .fp-multi-leg-card .fp-leg-aircraft { font-family: var(--fc-font); color: var(--fc-text); } .fp-multi-leg-card .fp-leg-price { font-family: var(--fc-font); color: var(--fc-text); } .flights-list, .bookmarks-list { gap: 12px; } :root[data-theme="dark"] .flights-list, :root[data-theme="dark"] .bookmarks-list { gap: 10px; } @media (max-width: 1024px) { .flight-card-compact, .fp-multi-leg-card { padding: 0; overflow: visible; border-radius: 0; background: color-mix(in srgb, var(--fc-bg) 72%, transparent); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); } :root[data-theme="dark"] .flight-card-compact, :root[data-theme="dark"] .fp-multi-leg-card { background: color-mix(in srgb, var(--fc-bg) 72%, transparent); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); } .flight-card-compact .flight-card-content, .fp-multi-leg-card .flight-card-content { display: flex !important; flex-direction: column !important; gap: 0; padding: 0; overflow: visible; align-items: stretch; grid-template-columns: none !important; } .flight-card-compact .flight-card-content > div, .fp-multi-leg-card .flight-card-content > div { width: 100%; min-width: 0; flex-shrink: 0; grid-column: auto !important; grid-row: auto !important; order: unset !important; margin: 0 !important; } .flight-card-compact .fc-hero.flight-aircraft-container, .fp-multi-leg-card .fc-hero.flight-aircraft-container { order: -1 !important; flex: 0 0 auto; } .flight-card-compact .fc-body, .fp-multi-leg-card .fc-body { order: 0 !important; flex: 1 1 auto; } .flight-card-compact .fc-desktop-only, .fp-multi-leg-card .fc-desktop-only { display: none !important; } .flight-card-compact .flight-duration.mobile-position, .flight-card-compact .flight-duration.desktop-position { display: none !important; } .flight-card-compact .fc-hero.flight-aircraft-container, .fp-multi-leg-card .fc-hero.flight-aircraft-container { position: relative; display: block !important; width: 100%; height: 190px; min-height: 190px; max-height: 220px; margin: 0 !important; padding: 0 !important; background: var(--fc-fill); border-radius: 0 !important; overflow: hidden; } .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .flight-card-compact .fc-hero .aircraft-image-container, .fp-multi-leg-card .fc-hero .aircraft-image-container { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; background: var(--fc-fill) !important; display: block !important; overflow: hidden; } .flight-card-compact .fc-hero .flight-list-aircraft-image, .flight-card-compact .fc-hero .aircraft-image, .fp-multi-leg-card .fc-hero .flight-list-aircraft-image, .fp-multi-leg-card .fc-hero .aircraft-image { width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center; border-radius: 0 !important; transform: none !important; } .flight-card-compact .fc-hero .fc-hero-meta, .fp-multi-leg-card .fc-hero .fc-hero-meta { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.02) 42%, rgba(0, 0, 0, 0.55) 100% ); } .flight-card-compact .fc-hero .aircraft-details, .fp-multi-leg-card .fc-hero .aircraft-details { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; align-items: start; height: 100%; width: 100%; gap: 0; } .flight-card-compact .fc-hero .aircraft-category, .fp-multi-leg-card .fc-hero .aircraft-category { grid-column: 2; grid-row: 1; place-self: start end; margin: 0; padding: 5px 10px; border-radius: var(--fc-radius-pill); background: rgba(255, 255, 255, 0.92); color: var(--fc-text); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; backdrop-filter: blur(8px); } :root[data-theme="dark"] .flight-card-compact .fc-hero .aircraft-category, :root[data-theme="dark"] .fp-multi-leg-card .fc-hero .aircraft-category { background: rgba(255, 255, 255, 0.08); color: var(--color-text); box-shadow: inset 0 0 0 0.5px rgba(58, 69, 84, 0.55); } .flight-card-compact .fc-hero .fc-hero-bottom, .fp-multi-leg-card .fc-hero .fc-hero-bottom { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; width: 100%; } .flight-card-compact .fc-hero .aircraft-model, .fp-multi-leg-card .fc-hero .aircraft-model { grid-column: 1; place-self: end start; text-align: left; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flight-card-compact .fc-hero .aircraft-seats, .fp-multi-leg-card .fc-hero .aircraft-seats { grid-column: 2; place-self: end end; text-align: right; color: rgba(255, 255, 255, 0.92); font-size: 12px; font-weight: 500; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); } .flight-card-compact .fc-body, .fp-multi-leg-card .fc-body { display: flex; flex-direction: column; gap: 0; padding: 12px 14px 14px; background: var(--fc-segment-bg); } .flight-card-compact .fc-stats, .fp-multi-leg-card .fc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 10px 0 12px; border-bottom: 0.5px solid var(--fc-separator); } .flight-card-compact .fc-stat, .fp-multi-leg-card .fc-stat { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 0 8px; font-family: var(--fc-font); font-size: 12px; font-weight: 500; color: var(--fc-text); text-align: left; } .flight-card-compact .fc-stat:not(:last-child), .fp-multi-leg-card .fc-stat:not(:last-child) { border-right: 0.5px solid var(--fc-separator); } .flight-card-compact .fc-stat i, .fp-multi-leg-card .fc-stat i { flex-shrink: 0; font-size: 12px; color: var(--fc-label); } .flight-card-compact .fc-stat span, .fp-multi-leg-card .fc-stat span { line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flight-card-compact .fc-route, .fp-multi-leg-card .fc-route { display: grid !important; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 14px; margin: 0 -14px; border-bottom: none; width: calc(100% + 28px) !important; } .flight-card-compact .fc-tear, .fp-multi-leg-card .fc-tear { display: block; position: relative; flex-shrink: 0; box-sizing: border-box; height: 0; margin: 0 -14px; padding: 0; width: calc(100% + 28px); background: transparent; border: none; border-top: 1px dashed var(--fc-perf-line); pointer-events: none; } .flight-card-compact .fc-route .flight-departure, .flight-card-compact .fc-route .flight-destination, .fp-multi-leg-card .fc-route .flight-departure, .fp-multi-leg-card .fc-route .flight-destination { order: unset !important; grid-row: 1 !important; grid-column: auto !important; width: auto !important; min-width: 0; display: flex !important; flex-direction: column !important; gap: 3px; margin: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; } .flight-card-compact .fc-route .flight-departure { grid-column: 1 !important; text-align: left; align-items: flex-start !important; } .flight-card-compact .fc-route .flight-destination { grid-column: 3 !important; text-align: right; align-items: flex-end !important; } .flight-card-compact .fc-route-connector, .fp-multi-leg-card .fc-route-connector { grid-column: 2 !important; grid-row: 1 !important; align-self: center; width: 28px; height: 1px; margin: 0; background: repeating-linear-gradient( 90deg, var(--fc-label) 0, var(--fc-label) 4px, transparent 4px, transparent 8px ); opacity: 0.45; } .flight-card-compact .flight-departure, .flight-card-compact .flight-destination { min-width: 0; gap: 4px; } .flight-card-compact .flight-departure { text-align: left; align-items: flex-start; } .flight-card-compact .flight-destination { text-align: right; align-items: flex-end; } .flight-card-compact .fc-endpoint-head { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; } .flight-card-compact .flight-destination .fc-endpoint-head { flex-direction: row-reverse; } .flight-card-compact .fc-desktop-flag { display: none; } .flight-card-compact .fc-endpoint-head .airport-code, .flight-card-compact .fc-compact-code { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; color: var(--fc-text); margin: 0; line-height: 1.1; } .flight-card-compact .fc-desktop-code { display: none; } .flight-card-compact .flight-departure .airport-city, .flight-card-compact .flight-destination .airport-city { display: block !important; font-size: 14px; font-weight: 600; color: var(--fc-text); line-height: 1.3; width: 100%; } .flight-card-compact .fc-route .fc-city-text { display: inline; } .flight-card-compact .flight-departure .airport-name, .flight-card-compact .flight-destination .airport-name, .flight-card-compact .flight-departure .airport-district, .flight-card-compact .flight-destination .airport-district { font-size: 11px; line-height: 1.35; color: var(--fc-label); } .flight-card-compact .flight-destination .airport-city, .flight-card-compact .flight-destination .airport-name, .flight-card-compact .flight-destination .airport-district { text-align: right; } .flight-card-compact .fc-bottom, .fp-multi-leg-card .fc-bottom { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 4px 10px; margin: 0 -14px; padding: 16px 14px 0; border-top: none; order: unset !important; width: calc(100% + 28px) !important; align-items: start; } .flight-card-compact .fc-bottom .flight-ratings:empty, .fp-multi-leg-card .fc-bottom .flight-ratings:empty { display: none; } .flight-card-compact .fc-bottom .flight-ratings:not(:empty) + .flight-actions .actions-price-display, .fp-multi-leg-card .fc-bottom .flight-ratings:not(:empty) + .flight-actions .actions-price-display { grid-column: 3; grid-row: 1; } .flight-card-compact .fc-bottom .flight-ratings:empty + .flight-actions .actions-price-display, .fp-multi-leg-card .fc-bottom .flight-ratings:empty + .flight-actions .actions-price-display { grid-column: 1 / -1; justify-self: end; } .flight-card-compact .fc-bottom .flight-actions, .flight-card-compact .fc-bottom .booking-info-section, .flight-card-compact .fc-bottom .price-info-section, .fp-multi-leg-card .fc-bottom .flight-actions, .fp-multi-leg-card .fc-bottom .booking-info-section, .fp-multi-leg-card .fc-bottom .price-info-section { order: unset !important; grid-row: auto !important; grid-column: auto !important; border-top: none !important; padding-top: 0 !important; margin: 0 !important; width: 100% !important; min-width: 0 !important; } .flight-card-compact .fc-bottom .flight-ratings, .flight-card-compact .fc-bottom .score-badge-container, .flight-card-compact .fc-bottom .score-badges-row, .fp-multi-leg-card .fc-bottom .flight-ratings, .fp-multi-leg-card .fc-bottom .score-badge-container, .fp-multi-leg-card .fc-bottom .score-badges-row { display: contents; } .flight-card-compact .fc-bottom .score-badge, .fp-multi-leg-card .fc-bottom .score-badge { grid-column: 1; grid-row: 1 / span 2; place-self: start start; flex-shrink: 0; } .flight-card-compact .fc-bottom .score-comment, .fp-multi-leg-card .fc-bottom .score-comment { grid-column: 2; grid-row: 1 / span 2; place-self: start start; text-align: left; min-width: 0; max-width: none; font-size: 11px; color: var(--fc-label); line-height: 1.4; white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; } .flight-card-compact .fc-bottom .score-comment:empty, .fp-multi-leg-card .fc-bottom .score-comment:empty { display: none; } .flight-card-compact .fc-bottom .price-label { grid-column: 1; grid-row: 1; place-self: center start; max-width: none; text-align: left; } .flight-card-compact .fc-bottom .flight-actions, .fp-multi-leg-card .fc-bottom .flight-actions { display: contents; width: 100%; border: none; padding: 0; } .flight-card-compact .fc-bottom .actions-price-display, .fp-multi-leg-card .fc-bottom .actions-price-display { grid-column: 3; grid-row: 1; place-self: start end; align-items: flex-end; width: auto; flex-shrink: 0; min-width: 0; } .flight-card-compact .fc-bottom .current-price { font-size: 22px; font-weight: 700; line-height: 1.1; } .flight-card-compact .fc-bottom .savings-line, .flight-card-compact .fc-bottom .estimated-price-label { text-align: right; font-size: 11px; } .flight-card-compact .fc-bottom .price-line, .flight-card-compact .fc-bottom .price-meta { justify-content: flex-end; } .flight-card-compact .fc-bottom .actions-price-display--estimated { width: 100%; align-items: flex-end; } .flight-card-compact .fc-bottom .action-buttons, .fp-multi-leg-card .fc-bottom .action-buttons { grid-column: 1 / -1; grid-row: 3; width: 100%; margin-top: 4px; gap: 8px; } .flight-card-compact .fc-bottom .action-buttons .book-btn { min-height: 46px; font-size: 15px; border-radius: 0; } .flight-card-compact .fc-bottom .action-buttons .fc-share-btn, .flight-card-compact .fc-bottom .action-buttons .favorite-btn { min-height: 46px; border-radius: 0; } .flight-card-compact.booking-card .fc-body { padding-top: 14px; } .flight-card-compact.booking-card .flight-ratings, .fp-multi-leg-card.booking-card .flight-ratings { display: none !important; } .flight-card-compact.booking-card .fc-bottom, .fp-multi-leg-card.booking-card .fc-bottom { display: flex; flex-direction: column; gap: 0; width: calc(100% + 28px) !important; } .flight-card-compact.booking-card .booking-info-section, .fp-multi-leg-card.booking-card .booking-info-section { width: 100% !important; min-width: 0; padding: 0 0 12px; border: none; flex-direction: column !important; align-items: center !important; gap: 8px; } .flight-card-compact.booking-card .booking-info-section .actions-price-display, .fp-multi-leg-card.booking-card .booking-info-section .actions-price-display { align-items: center; width: 100%; } .flight-card-compact.booking-card .booking-info-section .price-line, .fp-multi-leg-card.booking-card .booking-info-section .price-line, .flight-card-compact.booking-card .booking-info-section .price-meta, .fp-multi-leg-card.booking-card .booking-info-section .price-meta { justify-content: center; } .flight-card-compact.booking-card .booking-info-section .current-price, .fp-multi-leg-card.booking-card .booking-info-section .current-price { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .flight-card-compact.booking-card .booking-info-section .savings-line, .fp-multi-leg-card.booking-card .booking-info-section .savings-line { text-align: center; font-size: 11px; } .flight-card-compact.booking-card .booking-info-section .booking-status, .fp-multi-leg-card.booking-card .booking-info-section .booking-status { justify-content: center; margin-top: 0; } .flight-card-compact.booking-card .booking-info-section .booking-date-time, .fp-multi-leg-card.booking-card .booking-info-section .booking-date-time { justify-content: center; width: 100%; } .flight-card-compact.booking-card .booking-info-section .booking-value, .fp-multi-leg-card.booking-card .booking-info-section .booking-value { font-size: 12px; color: var(--fc-label); } .flight-card-compact.booking-card .price-info-section, .fp-multi-leg-card.booking-card .price-info-section { display: flex !important; flex-flow: row nowrap !important; align-items: stretch !important; justify-content: stretch !important; width: 100% !important; max-width: none !important; min-width: 0; padding: 12px 0 0; margin: 0; border: none; gap: 8px; } .flight-card-compact.booking-card .price-info-section .action-btn, .fp-multi-leg-card.booking-card .price-info-section .action-btn { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; width: auto !important; min-height: 46px; margin: 0 !important; padding: 0 12px; border-radius: 0; font-family: var(--fc-font); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; } .flight-card-compact.booking-card .price-info-section .cancel-btn, .fp-multi-leg-card.booking-card .price-info-section .cancel-btn { background: #fff; color: #d70015; border: 0.5px solid rgba(255, 59, 48, 0.35); box-shadow: none; } .flight-card-compact.booking-card .price-info-section .cancel-btn:hover, .fp-multi-leg-card.booking-card .price-info-section .cancel-btn:hover { background: rgba(255, 59, 48, 0.08); transform: none; box-shadow: none; } .flight-card-compact.booking-card .price-info-section .chat-btn, .fp-multi-leg-card.booking-card .price-info-section .chat-btn { background: var(--fc-fill); color: var(--fc-text); border: 0.5px solid rgba(60, 60, 67, 0.14); box-shadow: none; } .flight-card-compact.booking-card .price-info-section .chat-btn:hover, .fp-multi-leg-card.booking-card .price-info-section .chat-btn:hover { background: var(--fc-fill-elevated); transform: none; box-shadow: none; } .fp-multi-leg-card .fp-multi-leg-badge { z-index: 5; color: var(--fc-text); background: var(--fc-fill); } .flight-card-compact.fp-multi-leg-card .flight-id-badge.fp-multi-leg-badge { color: var(--fc-text); background: var(--fc-fill); } .fp-multi-leg-card .fp-multi-leg-legs-panel { margin: 0; padding: 12px 14px 14px; border-top: 0.5px solid var(--fc-separator); } } @media (max-width: 1024px) and (prefers-reduced-transparency: reduce) { .flight-card-compact, .fp-multi-leg-card, :root[data-theme="dark"] .flight-card-compact, :root[data-theme="dark"] .fp-multi-leg-card { background: var(--fc-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (max-width: 768px) { .flight-card-compact .flight-card-content, .fp-multi-leg-card .flight-card-content { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 0 !important; padding: 0 !important; } .flight-card-compact .flight-card-content > div, .fp-multi-leg-card .flight-card-content > div { grid-column: auto !important; grid-row: auto !important; order: unset !important; } .flight-card-compact .fc-hero.flight-aircraft-container, .fp-multi-leg-card .fc-hero.flight-aircraft-container { order: -1 !important; grid-row: auto !important; display: block !important; flex-direction: unset !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; background: var(--fc-fill) !important; border-radius: 0 !important; } .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image { order: unset !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; flex: none !important; display: block !important; align-items: stretch !important; justify-content: stretch !important; } .flight-card-compact .fc-hero .flight-aircraft-image .aircraft-image-container, .flight-card-compact .fc-hero .flight-aircraft-image .aircraft-image, .flight-card-compact .fc-hero .flight-aircraft-image .flight-list-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image .aircraft-image-container, .fp-multi-leg-card .fc-hero .flight-aircraft-image .aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image .flight-list-aircraft-image { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; transform: none !important; } .flight-card-compact .fc-hero .aircraft-model, .flight-card-compact .fc-hero .aircraft-seats, .fp-multi-leg-card .fc-hero .aircraft-model, .fp-multi-leg-card .fc-hero .aircraft-seats { color: #fff !important; } .flight-card-compact .fc-stat, .fp-multi-leg-card .fc-stat { flex-flow: row nowrap !important; align-items: center !important; justify-content: center !important; } .flight-card-compact .fc-stat i, .fp-multi-leg-card .fc-stat i { display: inline-block !important; width: auto !important; margin: 0 !important; } .flight-card-compact .fc-route .flight-departure, .flight-card-compact .fc-route .flight-destination, .fp-multi-leg-card .fc-route .flight-departure, .fp-multi-leg-card .fc-route .flight-destination { order: unset !important; grid-row: 1 !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; width: auto !important; min-width: 0 !important; } .flight-card-compact .fc-route .flight-destination, .fp-multi-leg-card .fc-route .flight-destination { align-items: flex-end !important; text-align: right !important; } .flight-card-compact .fc-route .flight-departure .airport-code, .flight-card-compact .fc-route .flight-departure .airport-city, .flight-card-compact .fc-route .flight-departure .airport-name, .flight-card-compact .fc-route .flight-departure .airport-district, .fp-multi-leg-card .fc-route .flight-departure .airport-code, .fp-multi-leg-card .fc-route .flight-departure .airport-city, .fp-multi-leg-card .fc-route .flight-departure .airport-name, .fp-multi-leg-card .fc-route .flight-departure .airport-district { text-align: left !important; width: auto !important; justify-content: flex-start !important; } .flight-card-compact .fc-route .flight-destination .airport-code, .flight-card-compact .fc-route .flight-destination .airport-city, .flight-card-compact .fc-route .flight-destination .airport-name, .flight-card-compact .fc-route .flight-destination .airport-district, .fp-multi-leg-card .fc-route .flight-destination .airport-code, .fp-multi-leg-card .fc-route .flight-destination .airport-city, .fp-multi-leg-card .fc-route .flight-destination .airport-name, .fp-multi-leg-card .fc-route .flight-destination .airport-district { text-align: right !important; width: auto !important; justify-content: flex-end !important; } .flight-card-compact:not(.booking-card) .fc-bottom .flight-actions, .fp-multi-leg-card:not(.booking-card) .fc-bottom .flight-actions, .flight-card-compact:not(.booking-card) .fc-bottom .booking-info-section, .fp-multi-leg-card:not(.booking-card) .fc-bottom .booking-info-section, .flight-card-compact:not(.booking-card) .fc-bottom .price-info-section, .fp-multi-leg-card:not(.booking-card) .fc-bottom .price-info-section { order: unset !important; grid-row: auto !important; border-top: none !important; padding-top: 0 !important; } } @media (max-width: 1024px) { .flight-card-compact.booking-card .fc-bottom .booking-info-section, .fp-multi-leg-card.booking-card .fc-bottom .booking-info-section { display: flex !important; flex-flow: column nowrap !important; flex: 0 0 auto !important; width: 100% !important; max-width: none !important; } .flight-card-compact.booking-card .fc-bottom .price-info-section, .fp-multi-leg-card.booking-card .fc-bottom .price-info-section { display: flex !important; flex-flow: row nowrap !important; flex: 0 0 auto !important; width: 100% !important; max-width: none !important; padding-top: 12px !important; margin-top: 0 !important; border-top: none !important; gap: 8px !important; } .flight-card-compact.booking-card .fc-bottom .price-info-section .action-btn, .fp-multi-leg-card.booking-card .fc-bottom .price-info-section .action-btn { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; } } @media (min-width: 769px) and (max-width: 1024px) { .flights-list, .bookmarks-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } } @media (max-width: 480px) { .flight-card-compact .fc-hero.flight-aircraft-container, .fp-multi-leg-card .fc-hero.flight-aircraft-container { height: 172px; min-height: 172px; } .flight-card-compact .fc-stat { font-size: 11px; padding: 0 4px; gap: 4px; } .flight-card-compact .fc-endpoint-head .airport-code, .flight-card-compact .fc-compact-code { font-size: 20px; } .flight-card-compact .fc-bottom .current-price { font-size: 20px; } } @media (min-width: 1025px) { .flight-card-compact .flight-card-content, .fp-multi-leg-card .flight-card-content { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 12px 14px; padding: 0 2px; } .flight-card-compact .fc-stats, .flight-card-compact .fc-route-connector, .fp-multi-leg-card .fc-stats, .fp-multi-leg-card .fc-route-connector { display: none !important; } .flight-card-compact .fc-desktop-only, .fp-multi-leg-card .fc-desktop-only { display: block; } .flight-card-compact .fc-journey.fc-desktop-only { display: flex; } .flight-card-compact .flight-duration.mobile-position, .fp-multi-leg-card .flight-duration.mobile-position { display: none !important; } .flight-card-compact .flight-duration.desktop-position, .fp-multi-leg-card .flight-duration.desktop-position { display: flex !important; order: 4; flex: 0.8; min-width: 0; } .flight-card-compact .fc-body, .fp-multi-leg-card .fc-body { display: contents; } .flight-card-compact .fc-route:not(.fc-mobile-route), .fp-multi-leg-card .fc-route { display: contents; } .flight-card-compact .fc-route.fc-mobile-route { display: none !important; } .flight-card-compact .fc-bottom, .fp-multi-leg-card .fc-bottom { display: contents; } .flight-card-compact .flight-datetime, .fp-multi-leg-card .flight-datetime { order: 1; flex: 1.2; min-width: 0; } .flight-card-compact .flight-departure, .fp-multi-leg-card .flight-departure { order: 2; flex: 1.5; min-width: 0; } .flight-card-compact .flight-destination, .fp-multi-leg-card .flight-destination { order: 3; flex: 1.5; min-width: 0; } .flight-card-compact .fc-hero.flight-aircraft-container, .fp-multi-leg-card .fc-hero.flight-aircraft-container { display: contents; } .flight-card-compact .fc-hero .flight-aircraft.fc-hero-meta, .fp-multi-leg-card .fc-hero .flight-aircraft.fc-hero-meta { position: static; order: 5; flex: 1.5; min-width: 0; display: flex; align-items: center; padding: 0; background: none; pointer-events: auto; } .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image { position: static; order: 6; flex: 0 0 auto; min-width: 0; display: flex; align-items: center; justify-content: center; height: auto; width: auto; padding: 4px 6px 4px 2px; } .flight-card-compact .fc-hero .aircraft-image-container, .fp-multi-leg-card .fc-hero .aircraft-image-container { width: var(--fc-aircraft-photo-w) !important; height: var(--fc-aircraft-photo-h) !important; min-width: var(--fc-aircraft-photo-w) !important; min-height: var(--fc-aircraft-photo-h) !important; max-width: var(--fc-aircraft-photo-w) !important; max-height: var(--fc-aircraft-photo-h) !important; flex-shrink: 0; border-radius: var(--fc-aircraft-photo-radius); background: var(--fc-fill) !important; } .flight-card-compact .fc-hero .flight-list-aircraft-image, .fp-multi-leg-card .fc-hero .flight-list-aircraft-image, .flight-card-compact .fc-hero .aircraft-image-container .aircraft-image, .fp-multi-leg-card .fc-hero .aircraft-image-container .aircraft-image { width: var(--fc-aircraft-photo-w) !important; height: var(--fc-aircraft-photo-h) !important; min-width: var(--fc-aircraft-photo-w) !important; min-height: var(--fc-aircraft-photo-h) !important; max-width: var(--fc-aircraft-photo-w) !important; max-height: var(--fc-aircraft-photo-h) !important; object-fit: cover; border-radius: var(--fc-aircraft-photo-radius); transform: none !important; } .flight-card-compact .fc-hero .aircraft-details, .fp-multi-leg-card .fc-hero .aircraft-details { display: flex; flex-direction: column; gap: 2px; height: auto; width: 100%; min-width: 0; padding-right: 8px; grid-template-columns: none; grid-template-rows: none; } .flight-card-compact .fc-hero .fc-hero-bottom, .fp-multi-leg-card .fc-hero .fc-hero-bottom { display: contents; } .flight-card-compact .fc-hero .aircraft-model, .fp-multi-leg-card .fc-hero .aircraft-model { order: 1; color: var(--fc-text); font-size: 13px; font-weight: 600; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .flight-card-compact .fc-hero .aircraft-category, .fp-multi-leg-card .fc-hero .aircraft-category { order: 2; align-self: flex-start; padding: 0; background: none; backdrop-filter: none; color: var(--fc-label); text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; } .flight-card-compact .fc-hero .aircraft-seats, .fp-multi-leg-card .fc-hero .aircraft-seats { order: 3; color: var(--fc-label); text-shadow: none; font-size: 12px; text-align: left; } .flight-card-compact .flight-ratings, .fp-multi-leg-card .flight-ratings { order: 7; flex: 0 0 var(--fc-ticket-ratings-w); width: var(--fc-ticket-ratings-w); min-width: var(--fc-ticket-ratings-w); max-width: var(--fc-ticket-ratings-w); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .flight-card-compact .flight-actions, .fp-multi-leg-card .flight-actions { order: 8; display: flex; flex-direction: column; flex: 0 0 var(--fc-ticket-actions-w); width: var(--fc-ticket-actions-w); min-width: var(--fc-ticket-actions-w); max-width: var(--fc-ticket-actions-w); flex-shrink: 0; gap: 8px; border-top: none; padding-top: 0; } .flight-card-compact .fc-endpoint-head, .fp-multi-leg-card .fc-endpoint-head { display: none; } .flight-card-compact .fc-desktop-flag, .fp-multi-leg-card .fc-desktop-flag { display: inline; } .flight-card-compact .fc-compact-code, .fp-multi-leg-card .fc-compact-code { display: none; } .flight-card-compact .fc-desktop-code, .fp-multi-leg-card .fc-desktop-code { display: block; } .flight-card-compact .flight-departure .airport-city, .flight-card-compact .flight-destination .airport-city, .fp-multi-leg-card .flight-departure .airport-city, .fp-multi-leg-card .flight-destination .airport-city { font-size: 15px; display: inline-flex !important; align-items: center; gap: 4px; } .flight-card-compact .flight-departure .fc-desktop-code, .flight-card-compact .flight-destination .fc-desktop-code, .fp-multi-leg-card .flight-departure .fc-desktop-code, .fp-multi-leg-card .flight-destination .fc-desktop-code { font-size: 11px; font-weight: 600; } .flight-card-compact .flight-departure, .flight-card-compact .flight-destination, .fp-multi-leg-card .flight-departure, .fp-multi-leg-card .flight-destination { text-align: left; align-items: flex-start; display: flex; flex-direction: column; } .flight-card-compact .flight-destination .airport-city, .flight-card-compact .flight-destination .airport-name, .flight-card-compact .flight-destination .airport-district, .fp-multi-leg-card .flight-destination .airport-city, .fp-multi-leg-card .flight-destination .airport-name, .fp-multi-leg-card .flight-destination .airport-district { text-align: left; } .flight-card-compact .fc-bottom .score-badge, .flight-card-compact .fc-bottom .score-comment, .flight-card-compact .fc-bottom .actions-price-display, .flight-card-compact .fc-bottom .action-buttons, .fp-multi-leg-card .fc-bottom .score-badge, .fp-multi-leg-card .fc-bottom .score-comment, .fp-multi-leg-card .fc-bottom .actions-price-display, .fp-multi-leg-card .fc-bottom .action-buttons { grid-column: auto; grid-row: auto; } .flight-card-compact .score-comment, .fp-multi-leg-card .score-comment { max-width: 110px; text-align: center; font-size: 10px; line-height: 1.3; display: block; overflow: visible; -webkit-line-clamp: unset; } .flight-card-compact .fc-bottom .flight-ratings, .flight-card-compact .fc-bottom .score-badge-container, .flight-card-compact .fc-bottom .score-badges-row, .fp-multi-leg-card .fc-bottom .flight-ratings, .fp-multi-leg-card .fc-bottom .score-badge-container, .fp-multi-leg-card .fc-bottom .score-badges-row { display: flex; } .flight-card-compact .fc-bottom .flight-actions, .fp-multi-leg-card .fc-bottom .flight-actions { display: flex; } .flight-card-compact .actions-price-display, .fp-multi-leg-card .actions-price-display { align-items: flex-end; } .flight-card-compact .fc-share-btn, .fp-multi-leg-card .fc-share-btn { display: none !important; } .flight-card-compact .action-buttons .favorite-btn, .fp-multi-leg-card .action-buttons .favorite-btn { flex: 0 0 36px; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 0; } } .flight-card-compact.fp-sample-card .fp-sample-stub, .fp-multi-leg-card.fp-sample-card .fp-sample-stub { display: flex; flex-direction: row; align-items: center; gap: 14px; width: 100%; min-width: 0; } .flight-card-compact.fp-sample-card .fp-sample-stub__body, .fp-multi-leg-card.fp-sample-card .fp-sample-stub__body { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; flex: 1; min-width: 0; } .flight-card-compact.fp-sample-card .fp-sample-badge, .fp-multi-leg-card.fp-sample-card .fp-sample-badge { flex: 0 0 auto; min-width: 48px; height: 48px; padding: 0 12px; border-radius: 14px; font-size: 17px; letter-spacing: 0.04em; box-shadow: none; border: none; } .flight-card-compact.fp-sample-card .fp-sample-badge .score-value, .fp-multi-leg-card.fp-sample-card .fp-sample-badge .score-value { font-weight: 700; } .flight-card-compact.fp-sample-card .fp-sample-status, .fp-multi-leg-card.fp-sample-card .fp-sample-status { margin: 0; font-family: var(--fc-font); font-size: 14px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--fc-text-secondary, var(--fc-label)); text-align: right; max-width: none; } .flight-card-compact.fp-sample-card .fp-sample-stub .actions-price-display, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .actions-price-display { align-items: flex-end; width: auto; max-width: 100%; gap: 0; } .flight-card-compact.fp-sample-card .fp-sample-stub .price-line, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .price-line { justify-content: flex-end; } .flight-card-compact.fp-sample-card .fp-sample-stub .current-price, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .current-price { font-size: 22px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; } .flight-card-compact.fp-sample-card .fp-sample-stub .savings-line:empty, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .savings-line:empty { display: none; } @media (min-width: 1025px) { .flight-card-compact.fp-sample-card:not(.booking-card) .flight-ratings:not(:empty):has(*), .fp-multi-leg-card.fp-sample-card:not(.booking-card) .flight-ratings:not(:empty):has(*) { flex: 0 0 var(--fc-ticket-stub-w); width: var(--fc-ticket-stub-w); min-width: var(--fc-ticket-stub-w); max-width: var(--fc-ticket-stub-w); padding: 12px 12px 12px 10px; align-items: center; justify-content: center; box-sizing: border-box; } .flight-card-compact.fp-sample-card .fp-sample-stub, .fp-multi-leg-card.fp-sample-card .fp-sample-stub { gap: 10px; width: 100%; } .flight-card-compact.fp-sample-card .fp-sample-badge, .fp-multi-leg-card.fp-sample-card .fp-sample-badge { min-width: 44px; height: 44px; border-radius: 12px; font-size: 16px; } .flight-card-compact.fp-sample-card .fp-sample-stub__body, .fp-multi-leg-card.fp-sample-card .fp-sample-stub__body { align-items: flex-start; gap: 5px; min-width: 0; } .flight-card-compact.fp-sample-card .fp-sample-stub .actions-price-display, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .actions-price-display { align-items: flex-start; width: 100%; } .flight-card-compact.fp-sample-card .fp-sample-stub .price-line, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .price-line { justify-content: flex-start; } .flight-card-compact.fp-sample-card .fp-sample-stub .current-price, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .current-price { font-size: 20px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; } .flight-card-compact.fp-sample-card .fp-sample-status, .fp-multi-leg-card.fp-sample-card .fp-sample-status { font-size: 12.5px; font-weight: 510; line-height: 1.3; letter-spacing: -0.015em; color: var(--fc-text-secondary); max-width: none; width: 100%; text-align: left; white-space: normal; } :root[data-theme="dark"] .flight-card-compact.fp-sample-card .fp-sample-status, :root[data-theme="dark"] .fp-multi-leg-card.fp-sample-card .fp-sample-status { color: rgba(235, 235, 245, 0.72); } } @media (max-width: 1024px) { .flight-card-compact.fp-sample-card .fc-bottom, .fp-multi-leg-card.fp-sample-card .fc-bottom { display: flex !important; flex-direction: column; grid-template-columns: none !important; gap: 0; align-items: stretch; padding-top: 18px; } .flight-card-compact.fp-sample-card .fc-bottom .flight-ratings, .fp-multi-leg-card.fp-sample-card .fc-bottom .flight-ratings { display: block !important; width: 100%; max-width: none; } .flight-card-compact.fp-sample-card .fc-bottom .flight-ratings .score-badge-container, .flight-card-compact.fp-sample-card .fc-bottom .flight-ratings .score-badges-row, .fp-multi-leg-card.fp-sample-card .fc-bottom .flight-ratings .score-badge-container, .fp-multi-leg-card.fp-sample-card .fc-bottom .flight-ratings .score-badges-row { display: contents; } .flight-card-compact.fp-sample-card .fp-sample-stub, .fp-multi-leg-card.fp-sample-card .fp-sample-stub { display: flex; flex-direction: row; align-items: center; gap: 16px; width: 100%; min-width: 0; } .flight-card-compact.fp-sample-card .fc-bottom .fp-sample-badge, .fp-multi-leg-card.fp-sample-card .fc-bottom .fp-sample-badge { grid-column: auto; grid-row: auto; place-self: auto; flex: 0 0 auto; min-width: 58px; height: 58px; border-radius: 16px; font-size: 20px; } .flight-card-compact.fp-sample-card .fp-sample-stub__body, .fp-multi-leg-card.fp-sample-card .fp-sample-stub__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; width: auto; min-width: 0; } .flight-card-compact.fp-sample-card .fc-bottom .fp-sample-stub .actions-price-display, .fp-multi-leg-card.fp-sample-card .fc-bottom .fp-sample-stub .actions-price-display { grid-column: auto; grid-row: auto; place-self: auto; width: auto; max-width: 100%; align-items: flex-end; margin-left: auto; } .flight-card-compact.fp-sample-card .fp-sample-stub .price-line, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .price-line { width: auto; max-width: 100%; justify-content: flex-end; text-align: right; } .flight-card-compact.fp-sample-card .fp-sample-stub .current-price, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .current-price { font-size: 22px; letter-spacing: -0.04em; text-align: right; margin-left: auto; } .flight-card-compact.fp-sample-card .fp-sample-status, .fp-multi-leg-card.fp-sample-card .fp-sample-status { width: auto; max-width: 100%; margin-left: auto; font-size: 12px; font-weight: 500; line-height: 1.25; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .fp-multi-leg-card { border-color: #99f6e4; display: flex; flex-direction: column; touch-action: manipulation; } @media (hover: hover) and (pointer: fine) { .fp-multi-leg-card:hover { border-color: var(--primary); } } .fp-multi-leg-card .flight-card-content { padding-bottom: 14px; margin-bottom: 2px; } .fp-multi-leg-badge { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); max-width: calc(100% - 24px); } .fp-multi-leg-badge .flight-id-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; color: inherit; } .fp-multi-leg-badge i { color: inherit; opacity: 1; } .fp-multi-leg-legs-panel { border-top: 1px solid var(--color-border); margin-top: 10px; padding: 18px 14px 14px; background: var(--color-surface-muted); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .fp-leg-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 0 14px; padding: 10px 0; border-bottom: 0.5px dashed var(--color-border); } .fp-leg-row:last-child { border-bottom: none; padding-bottom: 2px; } .fp-leg-row + .fp-leg-row { margin-top: 0; padding-top: 10px; } .fp-leg-index { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-control); font-size: 11px; font-weight: 700; color: var(--color-text-secondary); flex-shrink: 0; } .fp-leg-route { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; } .fp-leg-point { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 5px; min-width: 0; } .fp-leg-code { flex-shrink: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text); line-height: 1.2; } .fp-leg-city { min-width: 0; font-size: 13px; font-weight: 400; color: var(--color-text-muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-leg-arrow { position: relative; display: inline-block; width: 14px; height: 1px; margin: 0; background: var(--color-border); align-self: center; flex-shrink: 0; } .fp-leg-arrow::after { content: ""; position: absolute; right: -1px; top: -2px; border-top: 2.5px solid transparent; border-bottom: 2.5px solid transparent; border-left: 4px solid var(--color-text-faint); } .fp-leg-meta { font-size: 12px; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .fp-leg-metrics, .fp-leg-aircraft { display: none; } .fp-leg-price { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 76px; } @media (min-width: 1025px) { .fp-leg-row { align-items: baseline; } } @media (max-width: 1024px) { .fp-leg-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "index route route" "index metrics metrics" "index aircraft price"; gap: 4px 10px; align-items: baseline; } .fp-leg-index { grid-area: index; align-self: start; margin-top: 1px; } .fp-leg-route { grid-area: route; grid-column: 2 / -1; } .fp-leg-meta { display: none; } .fp-leg-metrics { display: block; grid-area: metrics; grid-column: 2 / -1; font-size: 13px; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-align: left; white-space: normal; } .fp-leg-aircraft { display: block; grid-area: aircraft; min-width: 0; font-size: 14px; font-weight: 500; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fp-leg-price { grid-area: price; min-width: 0; align-self: baseline; } .fp-multi-leg-card.flight-card-compact .flight-id-badge.fp-multi-leg-badge, .fp-multi-leg-card .fp-multi-leg-badge { color: var(--color-text); background: var(--color-control); border-color: transparent; } } .fp-multi-leg-card .fp-multi-leg-date { display: flex; flex-direction: row; align-items: center; } .fp-multi-leg-card.booking-card .flight-card-content { padding-bottom: 10px; } @media (min-width: 1025px) { .fp-multi-leg-card.booking-card .booking-info-section, .fp-multi-leg-card.booking-card .price-info-section { flex-wrap: wrap; } } .fp-multi-leg-card .fp-multi-leg-date-line { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); line-height: 1.3; white-space: nowrap; } @media (max-width: 768px) { .fp-multi-leg-badge .flight-id-text { max-width: min(160px, 52vw); } .fp-multi-leg-card .flight-card-content { overflow-x: visible; } .fp-multi-leg-card .flight-datetime.fp-multi-leg-datetime { grid-row: 1; grid-column: 1; place-self: start start; padding-top: 26px; margin-top: 0; } .fp-multi-leg-card .fp-multi-leg-date-line { font-size: 13px; } } .popup-multi-leg-via { grid-column: 1 / -1; margin-bottom: 12px; } .popup-multi-leg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #ccfbf1; color: #115e59; font-size: 13px; font-weight: 600; border: 1px solid #5eead4; } .popup-multi-leg-section { grid-column: 1 / -1; padding-bottom: 4px; } .popup-multi-leg-legs-grid { display: grid; gap: 12px; } .popup-multi-leg-leg-card { padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); } .popup-multi-leg-leg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .popup-multi-leg-leg-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #0f766e; } .popup-multi-leg-leg-price { font-size: 15px; font-weight: 700; color: var(--gray-900); } .popup-multi-leg-leg-route { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .popup-multi-leg-leg-endpoint { flex: 1; min-width: 0; } .popup-multi-leg-leg-code { display: block; font-size: 20px; font-weight: 700; color: var(--gray-900); letter-spacing: 0.04em; } .popup-multi-leg-leg-city { display: block; font-size: 13px; color: var(--gray-600); } .popup-multi-leg-leg-arrow { color: var(--primary); flex-shrink: 0; } .popup-multi-leg-leg-meta { display: flex; flex-wrap: wrap; gap: 12px 18px; font-size: 13px; color: var(--gray-600); } .popup-multi-leg-leg-meta i { margin-right: 5px; color: var(--gray-400); } @media (min-width: 768px) { .popup-multi-leg-legs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tbo-ticket-list { display: flex; flex-direction: column; gap: 22px; container-type: inline-size; container-name: tbo-tickets; } .tbo-ticket-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; } @media (min-width: 769px) and (max-width: 1024px) { .flights-list > .tbo-ticket-block, .bookmarks-list > .tbo-ticket-block, .flights-list > .tbo-ticket-list, .bookmarks-list > .tbo-ticket-list { grid-column: 1 / -1; } .flights-list > .tbo-ticket-block > .tbo-ticket-list > .tbo-ticket-section, .bookmarks-list > .tbo-ticket-block > .tbo-ticket-list > .tbo-ticket-section, .flights-list > .tbo-ticket-list > .tbo-ticket-section, .bookmarks-list > .tbo-ticket-list > .tbo-ticket-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .flights-list .tbo-ticket-section > .tbo-ticket-heading, .bookmarks-list .tbo-ticket-section > .tbo-ticket-heading { grid-column: 1 / -1; } .flights-list .tbo-ticket-section > .tbo-ticket-card, .bookmarks-list .tbo-ticket-section > .tbo-ticket-card { min-width: 0; } } .tbo-ticket-heading { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid rgba(14, 26, 44, 0.18); border-radius: 0; background: #ffffff; box-shadow: none; } :root[data-theme="dark"] .tbo-ticket-heading { border-color: rgba(255, 255, 255, 0.18); background: #12141a; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .tbo-ticket-heading__title { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; color: var(--color-text); } .tbo-ticket-heading--certified { border-color: color-mix(in srgb, var(--primary) 55%, transparent); border-width: 1px; } :root[data-theme="dark"] .tbo-ticket-heading--certified { border-color: color-mix(in srgb, var(--primary) 60%, transparent); } .tbo-ticket-heading--certified .tbo-ticket-heading__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35em; } .tbo-ticket-heading__mark { color: var(--primary-dark); font-weight: 700; letter-spacing: -0.015em; } .tbo-ticket-heading__sep { color: var(--color-text-muted); font-weight: 500; } .tbo-ticket-heading__product { color: var(--color-text); font-weight: 600; } .tbo-ticket-heading__note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--color-text-secondary); } @media (max-width: 480px) { .tbo-ticket-heading { padding: 12px 14px; } .tbo-ticket-heading__title { font-size: 17px; } } .tbo-ticket-card { --tt-accent: #2f6fed; --tt-accent-soft: rgba(47, 111, 237, 0.1); --tt-accent-line: rgba(47, 111, 237, 0.28); --tt-bg: #ffffff; --tt-border: rgba(14, 26, 44, 0.18); --tt-hairline: rgba(14, 26, 44, 0.12); --tt-good: #157f52; --tt-warn: #9a5b00; --tt-alert: #b3261e; --tt-radius: 0; display: grid; grid-template: "head fare aside" auto "routes fare aside" 1fr / minmax(0, 1.15fr) minmax(210px, 1.2fr) minmax(168px, 188px); column-gap: 24px; --tt-cabin-photo-radius: 0; padding: 18px 20px; color: #0e1a2c; font-family: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; background: var(--tt-bg); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); box-shadow: none; transition: border-color 0.25s ease, background-color 0.25s ease; } .tbo-ticket-card:hover { border-color: var(--tt-accent); background: color-mix(in srgb, var(--tt-bg) 92%, var(--tt-accent-soft)); box-shadow: none; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__fare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, 38%); column-gap: 16px; align-items: center; } .tbo-ticket__fare-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .tbo-ticket__cabin-photo { display: flex; align-items: center; justify-content: flex-end; margin: 0; width: 100%; min-width: 0; height: 100%; } .tbo-ticket__cabin-photo-frame { position: relative; width: 100%; height: auto; max-height: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--tt-cabin-photo-radius); background: #f2f2f7; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); } :root[data-theme='dark'] .tbo-ticket__cabin-photo-frame { background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); } .tbo-ticket__cabin-photo-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; cursor: zoom-in; } @media (hover: hover) and (pointer: fine) { .tbo-ticket__cabin-photo-img:hover { filter: brightness(1.03); } } .tbo-ticket__head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding-bottom: 14px; } .tbo-ticket__carrier { display: flex; align-items: center; gap: 10px; min-width: 0; } .tbo-ticket__airline-marks { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; } .tbo-ticket__airline-logo { display: block; width: 30px; height: 30px; object-fit: contain; background: transparent; border: none; border-radius: 0; } .tbo-ticket__airline-name { overflow: hidden; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; } .tbo-ticket__kind { flex: 0 0 auto; font-size: 10px; font-weight: 650; letter-spacing: 0.09em; color: var(--tt-accent); text-transform: uppercase; white-space: nowrap; } .tbo-ticket__routes { grid-area: routes; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .tbo-route__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 11px; color: var(--color-text-muted); } .tbo-route__direction { font-weight: 700; letter-spacing: 0.08em; color: var(--tt-accent); text-transform: uppercase; } .tbo-route__date { overflow: hidden; font-size: 11px; letter-spacing: 0.01em; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; } .tbo-route__grid { display: grid; grid-template-columns: minmax(76px, 1fr) minmax(92px, 1.15fr) minmax(76px, 1fr); gap: 14px; align-items: start; width: 100%; } .tbo-route__point { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tbo-route__point--arrival { text-align: right; justify-self: stretch; } .tbo-route__time { font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .tbo-route__city { overflow: hidden; font-size: 14px; font-weight: 550; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-text); white-space: nowrap; text-overflow: ellipsis; } .tbo-route__caption { overflow: hidden; font-size: 11px; letter-spacing: 0.02em; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; } .tbo-route__path { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding-top: 22px; } .tbo-route__duration { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .tbo-route__line { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 7px; } .tbo-route__line::before { position: absolute; right: 0; left: 0; height: 1px; content: ""; background: linear-gradient( to right, transparent, var(--tt-accent-line) 12%, var(--tt-accent-line) 88%, transparent ); } .tbo-route__node { position: relative; width: 7px; height: 7px; background: var(--tt-bg); border: 1.5px solid var(--tt-accent); border-radius: 50%; } .tbo-route__via { overflow: hidden; max-width: 100%; font-size: 12px; letter-spacing: -0.005em; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; } .tbo-route__via--stops { font-weight: 550; color: var(--color-text-secondary); } .tbo-ticket__aside { grid-area: aside; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; min-width: 0; padding-left: 22px; border-left: 1px solid var(--tt-hairline); } .tbo-ticket__seats { align-self: flex-end; margin: 0; font-size: 11.5px; font-weight: 650; line-height: 1.3; color: var(--tt-alert); white-space: nowrap; text-align: right; } .tbo-ticket__commit { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 10px; width: 100%; min-width: 0; margin-top: auto; } .tbo-ticket__price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; text-align: right; } .tbo-ticket__price-note { font-size: 11px; line-height: 1.3; color: var(--color-text-muted); } .tbo-ticket__amount { font-size: 26px; font-weight: 650; line-height: 1.1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .tbo-ticket__details-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 42px; padding: 9px 14px; font-family: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.25; color: #fff; -webkit-text-fill-color: #fff; cursor: pointer; background: #2b4666; border: none; border-radius: 0; -webkit-font-smoothing: antialiased; box-shadow: none; transition: background-color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .tbo-ticket__details-button:hover { color: #fff; -webkit-text-fill-color: #fff; background: color-mix(in srgb, #2b4666 88%, #000); border-color: transparent; box-shadow: none; transform: translateY(-1px); } .tbo-ticket__details-button:active { transform: none; opacity: 0.94; box-shadow: none; } .tbo-ticket__details-button:focus-visible { outline: 2px solid #2f6fed; outline-offset: 2px; } :root[data-theme="dark"] .tbo-ticket-card { --tt-accent: #5b8cff; --tt-accent-soft: rgba(91, 140, 255, 0.14); --tt-accent-line: rgba(91, 140, 255, 0.28); --tt-bg: #12141a; --tt-border: rgba(255, 255, 255, 0.18); --tt-hairline: rgba(255, 255, 255, 0.12); --tt-good: #6ee7a8; --tt-warn: #f6c177; --tt-alert: #ff938c; color: #f2f4f7; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-theme="dark"] .tbo-ticket__details-button { background: #4a6a8f; } :root[data-theme="dark"] .tbo-ticket__details-button:hover { background: color-mix(in srgb, #4a6a8f 88%, #000); } :root[data-theme="dark"] .tbo-route__node { background: rgba(20, 22, 28, 0.9); } @container tbo-tickets (max-width: 960px) { .tbo-ticket-card { grid-template: "head" auto "routes" auto "fare" auto "aside" auto / minmax(0, 1fr); column-gap: 0; row-gap: 0; padding: 16px 16px 18px; border-radius: 0; } .tbo-ticket__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-bottom: 12px; } .tbo-ticket__carrier { flex: 1 1 12rem; min-width: 0; } .tbo-ticket__airline-name { white-space: normal; text-overflow: clip; line-height: 1.25; } .tbo-ticket__kind { flex: 0 0 auto; margin-left: auto; } .tbo-ticket__routes { gap: 14px; } .tbo-route__grid { grid-template-columns: minmax(0, 1.1fr) minmax(68px, 0.9fr) minmax(0, 1.1fr); gap: 8px; } .tbo-route__time { font-size: 22px; } .tbo-route__city { font-size: 13px; } .tbo-route__path { padding-top: 18px; gap: 4px; } .tbo-route__duration { font-size: 10.5px; } .tbo-route__via { font-size: 11px; } .tbo-ticket__fare { gap: 12px; padding-top: 14px; padding-left: 0; margin-top: 14px; border-top: 1px solid var(--tt-hairline); border-left: none; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__fare { display: flex; flex-direction: column; align-items: stretch; grid-template-columns: none; column-gap: 0; row-gap: 12px; } .tbo-ticket__fare-main { width: 100%; min-width: 0; } .tbo-fare { display: flex; flex-direction: column; gap: 0; } .tbo-fare__row { padding: 8px 0; border-bottom: 1px solid var(--tt-hairline); } .tbo-fare__row:last-child { border-bottom: none; padding-bottom: 0; } .tbo-fare__row--headline { padding-top: 0; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__cabin-photo { display: block; width: 100%; max-width: none; height: auto; justify-content: stretch; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__cabin-photo-frame { width: 100%; max-height: none; aspect-ratio: 16 / 10; border-radius: 0; } .tbo-ticket__aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "seats price" "cta cta"; column-gap: 12px; row-gap: 12px; align-items: start; padding-top: 14px; padding-left: 0; margin-top: 14px; border-top: 1px solid var(--tt-hairline); border-left: none; } .tbo-ticket__seats { grid-area: seats; align-self: start; justify-self: start; text-align: left; white-space: normal; } .tbo-ticket__commit { display: contents; } .tbo-ticket__price { grid-area: price; align-items: flex-end; width: auto; max-width: 100%; text-align: right; } .tbo-ticket__amount { font-size: 24px; } .tbo-ticket__details-button { grid-area: cta; width: 100%; } } @container tbo-tickets (max-width: 420px) { .tbo-ticket-card { padding: 14px 14px 16px; } .tbo-ticket__airline-logo { width: 26px; height: 26px; } .tbo-ticket__airline-name { font-size: 14px; } .tbo-ticket__kind { font-size: 9px; letter-spacing: 0.08em; } .tbo-route__grid { grid-template-columns: minmax(0, 1.15fr) minmax(56px, 0.85fr) minmax(0, 1.15fr); gap: 6px; } .tbo-route__time { font-size: 20px; } .tbo-route__date, .tbo-route__caption { font-size: 10px; } .tbo-route__city { font-size: 12.5px; } .tbo-route__path { padding-top: 16px; } .tbo-fare__label { font-size: 12px; } .tbo-fare__value { font-size: 12.5px; } .tbo-fare__row--strong .tbo-fare__value, .tbo-fare__row--headline .tbo-fare__value { font-size: 14px; } .tbo-ticket__amount { font-size: 22px; } } @media (max-width: 1024px) { .tbo-ticket-card { grid-template: "head" auto "routes" auto "fare" auto "aside" auto / minmax(0, 1fr); column-gap: 0; row-gap: 0; padding: 16px 16px 18px; border-radius: 0; } .tbo-ticket__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-bottom: 12px; } .tbo-ticket__carrier { flex: 1 1 12rem; min-width: 0; } .tbo-ticket__airline-name { white-space: normal; text-overflow: clip; line-height: 1.25; } .tbo-ticket__kind { flex: 0 0 auto; margin-left: auto; } .tbo-ticket__routes { gap: 14px; } .tbo-route__grid { grid-template-columns: minmax(0, 1.1fr) minmax(68px, 0.9fr) minmax(0, 1.1fr); gap: 8px; } .tbo-route__time { font-size: 22px; } .tbo-route__city { font-size: 13px; } .tbo-route__path { padding-top: 18px; gap: 4px; } .tbo-ticket__fare { gap: 12px; padding-top: 14px; padding-left: 0; margin-top: 14px; border-top: 1px solid var(--tt-hairline); border-left: none; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__fare { display: flex; flex-direction: column; align-items: stretch; grid-template-columns: none; column-gap: 0; row-gap: 12px; } .tbo-ticket__fare-main { width: 100%; min-width: 0; } .tbo-fare { display: flex; flex-direction: column; gap: 0; } .tbo-fare__row { padding: 8px 0; border-bottom: 1px solid var(--tt-hairline); } .tbo-fare__row:last-child { border-bottom: none; padding-bottom: 0; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__cabin-photo { display: block; width: 100%; max-width: none; height: auto; justify-content: stretch; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__cabin-photo-frame { width: 100%; max-height: none; aspect-ratio: 16 / 10; border-radius: 0; } .tbo-ticket__aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "seats price" "cta cta"; column-gap: 12px; row-gap: 12px; align-items: start; padding-top: 14px; padding-left: 0; margin-top: 14px; border-top: 1px solid var(--tt-hairline); border-left: none; } .tbo-ticket__seats { grid-area: seats; align-self: start; justify-self: start; text-align: left; white-space: normal; } .tbo-ticket__commit { display: contents; } .tbo-ticket__price { grid-area: price; align-items: flex-end; width: auto; max-width: 100%; text-align: right; } .tbo-ticket__amount { font-size: 24px; } .tbo-ticket__details-button { grid-area: cta; width: 100%; } } @media (max-width: 420px) { .tbo-ticket-card { padding: 14px 14px 16px; } .tbo-ticket__airline-logo { width: 26px; height: 26px; } .tbo-ticket__airline-name { font-size: 14px; } .tbo-ticket__kind { font-size: 9px; letter-spacing: 0.08em; } .tbo-route__grid { grid-template-columns: minmax(0, 1.15fr) minmax(56px, 0.85fr) minmax(0, 1.15fr); gap: 6px; } .tbo-route__time { font-size: 20px; } .tbo-route__date, .tbo-route__caption { font-size: 10px; } .tbo-route__city { font-size: 12.5px; } .tbo-fare__label { font-size: 12px; } .tbo-fare__value { font-size: 12.5px; } .tbo-ticket__amount { font-size: 22px; } } .sp-cards--classic { container-type: inline-size; container-name: tbo-tickets; gap: 12px; } .sp-cards--classic .sp-classic-item { display: block; margin: 0; padding: 0; } .sp-cards--classic .flight-card-compact, .sp-cards--classic .tbo-ticket-card { width: 100%; } .sp-cards--classic .flight-card-compact { cursor: pointer; } .sp-cards--classic .flight-card-compact.fp-sample-card .fc-bottom { padding-top: 16px !important; gap: 14px; } .sp-cards--classic .fp-sample-card .fc-bottom .flight-ratings { display: block !important; width: 100%; } .sp-cards--classic .fp-sample-card .fc-charter-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; } .sp-cards--classic .fp-sample-card .fc-charter-class { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .sp-cards--classic .fp-sample-card .fc-charter-class__label { font-family: var(--fc-font, inherit); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.25; color: var(--fc-text-secondary, var(--fc-label, #6e6e73)); } .sp-cards--classic .fp-sample-card .fc-charter-class__value { font-family: var(--fc-font, inherit); font-size: 22px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; min-width: 0; overflow-wrap: break-word; } .sp-cards--classic .fp-sample-card .fc-charter-quote { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; width: 100%; min-width: 0; } .sp-cards--classic .fp-sample-card .fc-charter-price-row .fc-charter-quote { flex: 0 0 auto; width: auto; } .sp-cards--classic .fp-sample-card .fc-charter-quote__approx { font-family: var(--fc-font, inherit); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.25; color: var(--fc-text-secondary, var(--fc-label, #6e6e73)); } .sp-cards--classic .fp-sample-card .fc-charter-quote__amount { font-family: var(--fc-font, inherit); font-size: 22px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; } .sp-cards--classic .fp-sample-card .fc-bottom .flight-actions { display: block !important; width: 100%; margin-top: 0; } .sp-cards--classic .fp-sample-card .action-buttons { display: flex; justify-content: flex-start; width: 100%; } .sp-cards--classic .fp-sample-card .action-buttons .sp-card__book { flex: 1 1 auto; align-self: stretch; width: 100%; } .sp-cards--classic .fp-sample-card .fc-hero .fc-hero-bottom { display: flex; justify-content: flex-end; align-items: flex-end; } .sp-cards--classic .sp-band { margin-bottom: 4px; } @media (max-width: 768px) { .sp-cards--classic .flight-card-compact:not(.fp-sample-card) .fc-bottom .flight-ratings { display: none !important; } .sp-cards--classic .flight-card-compact .fc-bottom { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: calc(100% + 28px) !important; margin: 0 -14px; padding: 16px 14px 0; } .sp-cards--classic .flight-card-compact .fc-bottom .flight-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; border: none; padding: 0; margin: 0; } .sp-cards--classic .flight-card-compact .fc-bottom .fc-value-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; } .sp-cards--classic .flight-card-compact .fc-bottom .fc-value-price-row .sp-card__score { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; margin-top: 0; min-width: 0; } .sp-cards--classic .flight-card-compact .fc-bottom .fc-value-price-row .sp-card__score-label { font-family: var(--fc-font, inherit); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.25; text-transform: uppercase; color: var(--fc-text-secondary, var(--fc-label, #6e6e73)); } .sp-cards--classic .flight-card-compact .fc-bottom .fc-value-price-row .sp-card__score-value { font-family: var(--fc-font, inherit); font-size: 22px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; min-width: 0; overflow-wrap: break-word; } .sp-cards--classic .flight-card-compact .fc-bottom .fc-value-price-row .actions-price-display, .sp-cards--classic .flight-card-compact .fc-bottom .fc-value-price-row .actions-price-display--estimated { flex: 0 0 auto; width: auto; align-self: flex-end; } .sp-cards--classic .flight-card-compact .fc-bottom .actions-price-display, .sp-cards--classic .flight-card-compact .fc-bottom .actions-price-display--estimated { display: flex; flex-direction: column-reverse; align-items: flex-end; align-self: flex-end; width: 100%; max-width: 100%; gap: 2px; } .sp-cards--classic .flight-card-compact .fc-bottom .price-line { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; width: 100%; text-align: right; white-space: nowrap; } .sp-cards--classic .flight-card-compact .fc-bottom .price-meta { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: flex-end; width: 100%; white-space: nowrap; } .sp-cards--classic .flight-card-compact .fc-bottom .current-price { font-size: 22px; font-weight: 700; line-height: 1.1; text-align: right; } .sp-cards--classic .flight-card-compact .fc-bottom .estimated-price-label, .sp-cards--classic .flight-card-compact .fc-bottom .estimated-price-label__from, .sp-cards--classic .flight-card-compact .fc-bottom .price-per-passenger { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.25; color: var(--fc-text-secondary, var(--fc-label, #6e6e73)); text-align: right; font-variant-numeric: tabular-nums; } .sp-cards--classic .flight-card-compact .fc-bottom .action-buttons { width: 100%; margin-top: 0; } } body.sp-page .flight-card-compact, body.sp-page .fp-multi-leg-card { --fc-bg: var(--sp-surface); --fc-text: var(--sp-ink); --fc-text-secondary: var(--sp-ink-soft); --fc-label: var(--sp-ink-faint); --fc-radius: 0; --fc-radius-inner: 0; --fc-separator: var(--sp-line); --fc-divider: var(--sp-line); --fc-font: var(--sp-font-body); background: color-mix(in srgb, var(--sp-surface) 72%, transparent); border: 1px solid var(--sp-line-strong); border-radius: 0; box-shadow: none; overflow: visible; backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); } @media (hover: hover) and (pointer: fine) { body.sp-page .sp-cards .flight-card-compact:hover, body.sp-page .sp-cards .fp-multi-leg-card:hover { border-color: var(--sp-accent); background: color-mix( in srgb, color-mix(in srgb, var(--sp-surface) 92%, var(--sp-accent-wash)) 72%, transparent ); } } @media (prefers-reduced-transparency: reduce) { body.sp-page .flight-card-compact, body.sp-page .fp-multi-leg-card { background: var(--sp-surface); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-reduced-transparency: reduce) and (hover: hover) and (pointer: fine) { body.sp-page .sp-cards .flight-card-compact:hover, body.sp-page .sp-cards .fp-multi-leg-card:hover { background: color-mix(in srgb, var(--sp-surface) 92%, var(--sp-accent-wash)); } } .sp-page .tbo-ticket-card { --tt-accent: var(--sp-accent); --tt-accent-soft: var(--sp-accent-wash); --tt-accent-line: color-mix(in srgb, var(--sp-accent) 40%, transparent); --tt-bg: var(--sp-surface); --tt-border: var(--sp-line-strong); --tt-hairline: var(--sp-line); --tt-radius: 0; --tt-cabin-photo-radius: 0; background: var(--sp-surface); border: 1px solid var(--sp-line-strong); border-radius: 0; box-shadow: none; } .sp-page .flight-card-compact .action-buttons .book-btn, .sp-page .fp-multi-leg-card .action-buttons .book-btn, .sp-page .sp-cards--classic .action-buttons .sp-card__book { --cta-apple-fill: var(--sp-cta); --cta-apple-border: var(--sp-cta); --cta-apple-hover-fill: color-mix(in srgb, var(--sp-cta) 88%, #000); --cta-apple-hover-border: color-mix(in srgb, var(--sp-cta) 88%, #000); border-radius: 0; background: var(--sp-cta); color: var(--sp-cta-ink); } .sp-page .load-more-button { border-radius: 0; font-family: var(--sp-font-body); } .tbo-modal { --tt-accent: #2f6fed; --tt-accent-soft: rgba(47, 111, 237, 0.1); --tt-accent-line: rgba(47, 111, 237, 0.28); --tt-bg: #ffffff; --tt-hairline: rgba(14, 26, 44, 0.12); --tt-chip: #eceff3; --tt-good: #157f52; --tt-warn: #9a5b00; --tt-alert: #b3261e; --tt-rail: rgba(47, 111, 237, 0.3); --tt-cta: #2b4666; --tt-cta-ink: #ffffff; --tt-font: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-height: 100vh; max-height: 100dvh; padding: 28px 20px; overflow: hidden; } .tbo-modal[hidden] { display: none; } .tbo-modal__backdrop { position: absolute; inset: 0; background: rgba(14, 26, 44, 0.42); opacity: 0; transition: opacity 0.22s ease; backdrop-filter: none; -webkit-backdrop-filter: none; } .tbo-modal.is-open .tbo-modal__backdrop { opacity: 1; } .tbo-modal__dialog { position: relative; display: flex; flex-direction: column; width: min(960px, 100%); max-height: min(92vh, 940px); max-height: min(92dvh, 940px); min-height: 0; overflow: hidden; color: #0e1a2c; font-family: var(--tt-font); background: var(--tt-bg); border: 1px solid var(--tt-hairline); border-radius: 0; box-shadow: none; opacity: 0; transform: translateY(14px) scale(0.99); transition: opacity 0.22s ease, transform 0.22s ease; } .tbo-modal.is-open .tbo-modal__dialog { opacity: 1; transform: none; } .tbo-modal__dialog:focus { outline: none; } .tbo-modal__head { display: flex; flex: 0 0 auto; gap: 12px; align-items: flex-start; padding: 18px 22px 15px; border-bottom: 1px solid var(--tt-hairline); } .tbo-modal__kind { flex: 0 0 auto; margin-top: 5px; font-size: 10px; font-weight: 650; letter-spacing: 0.09em; color: var(--tt-accent); text-transform: uppercase; white-space: nowrap; } .tbo-modal__identity { display: flex; flex: 1 1 auto; gap: 13px; align-items: center; min-width: 0; } .tbo-modal__marks { display: inline-flex; flex: 0 0 auto; gap: 4px; align-items: center; } .tbo-modal__titles { min-width: 0; } .tbo-modal__title { margin: 0; overflow: hidden; font-size: 20px; font-weight: 650; letter-spacing: -0.025em; white-space: nowrap; text-overflow: ellipsis; } .tbo-modal__subtitle { margin: 3px 0 0; overflow: hidden; font-size: 12.5px; line-height: 1.35; color: var(--color-text-secondary); white-space: nowrap; text-overflow: ellipsis; } .tbo-modal__close { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; min-width: 36px; max-width: 36px; min-height: 36px; max-height: 36px; padding: 0; margin-left: auto; aspect-ratio: 1; color: var(--color-text-secondary); cursor: pointer; background: transparent; border: 1px solid var(--tt-hairline); border-radius: 0; transition: background 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .tbo-modal__close .tbo-icon { display: block; width: 18px; height: 18px; } .tbo-modal__close:hover { color: var(--color-text); background: var(--tt-accent-soft); } .tbo-modal__close:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 2px; } .tbo-modal__scroll { display: flex; flex: 1 1 auto; flex-direction: column; gap: 22px; min-height: 0; padding: 20px 22px 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .tbo-modal__route-panel { display: flex; flex: 0 0 auto; flex-direction: column; min-width: 0; } .tbo-modal__map { position: relative; flex: 0 0 auto; height: 260px; overflow: hidden; background: var(--tt-chip); border: 1px solid var(--tt-hairline); border-radius: 0; } .tbo-map__canvas { position: absolute; inset: 0; } .tbo-map__marker { display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-map-marker-text, #fff); border: 3px solid var(--color-map-marker-surface, #fff); border-radius: var(--radius-full, 999px); box-shadow: var(--shadow-map-marker, 0 2px 6px rgba(0, 0, 0, 0.35)); } .tbo-modal__foot { display: flex; flex: 0 0 auto; gap: 18px; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid var(--tt-hairline); } .tbo-modal__price { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0; } .tbo-modal__amount { font-size: 24px; font-weight: 650; line-height: 1.1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .tbo-modal__price-note { font-size: 12px; line-height: 1.3; color: var(--color-text-muted); } .tbo-modal__seats { margin: 0; font-size: 12px; font-weight: 650; line-height: 1.25; color: var(--tt-alert); white-space: nowrap; text-align: center; } .tbo-modal__purchase { display: flex; flex: 0 0 auto; flex-direction: column; gap: 6px; align-items: stretch; } .tbo-modal__buy { padding: 12px 26px; font-family: var(--tt-font); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-cta-ink); -webkit-text-fill-color: var(--tt-cta-ink); background: var(--tt-cta); border: none; border-radius: 0; cursor: pointer; transition: background-color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .tbo-modal__buy:hover:not(:disabled) { filter: none; background: color-mix(in srgb, var(--tt-cta) 88%, #000); transform: translateY(-1px); } .tbo-modal__buy:active:not(:disabled) { transform: translateY(1px); } .tbo-modal__buy:disabled { cursor: progress; opacity: 0.65; } .tbo-modal__buy:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 3px; } .tbo-modal__purchase-error { margin: 0; font-size: 12px; line-height: 1.4; font-weight: 550; color: var(--tt-alert); text-align: right; } :root[data-theme="dark"] .tbo-modal { --tt-accent: #5b8cff; --tt-accent-soft: rgba(91, 140, 255, 0.14); --tt-accent-line: rgba(91, 140, 255, 0.28); --tt-bg: #12141a; --tt-hairline: rgba(255, 255, 255, 0.12); --tt-chip: #181b22; --tt-good: #6ee7a8; --tt-warn: #f6c177; --tt-alert: #ff938c; --tt-rail: rgba(91, 140, 255, 0.38); --tt-cta: #4a6a8f; } :root[data-theme="dark"] .tbo-modal__dialog { color: #f2f4f7; box-shadow: none; } .tbo-modal__itinerary { display: flex; flex-direction: column; gap: 22px; } .tbo-itinerary__head { display: flex; flex-wrap: nowrap; gap: 6px 12px; align-items: center; justify-content: space-between; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--tt-hairline); } .tbo-itinerary__title { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 8px; align-items: baseline; min-width: 0; margin: 0; overflow: hidden; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; } .tbo-itinerary__route { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; } .tbo-itinerary__direction { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; color: var(--tt-accent); text-transform: uppercase; } .tbo-chip { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 3px 8px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; color: var(--color-text-secondary); white-space: nowrap; background: var(--tt-chip); border-radius: 0; } .tbo-chip--cabin { align-self: center; font-weight: 700; letter-spacing: 0.02em; color: var(--tt-accent); background: var(--tt-accent-soft); } .tbo-chip--flight { gap: 5px; } .tbo-chip--flight .tbo-chip__label { color: var(--color-text-secondary); } .tbo-chip--flight .tbo-chip__value { font-weight: 700; letter-spacing: 0.02em; color: var(--tt-accent); } .tbo-legs { padding: 0; margin: 10px 0 0; list-style: none; } .tbo-leg__row { display: grid; grid-template-columns: 52px 16px minmax(0, 1fr); gap: 14px; align-items: stretch; } .tbo-leg__time { display: flex; flex-direction: column; padding-top: 1px; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .tbo-leg__date { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--color-text-muted); white-space: nowrap; } .tbo-leg__duration { padding: 8px 0; font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .tbo-leg__rail { position: relative; display: flex; justify-content: center; align-items: flex-start; } .tbo-leg__rail::before { position: absolute; left: 50%; width: 1px; content: ""; background: var(--tt-rail); transform: translateX(-50%); } .tbo-leg__rail--departure::before { top: 9.5px; bottom: 0; } .tbo-leg__rail--flight::before { top: 0; bottom: 0; } .tbo-leg__rail--arrival::before { top: 0; height: 9.5px; } .tbo-leg__node { position: relative; z-index: 1; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 5px; background: var(--tt-bg); border: 2px solid var(--tt-accent); border-radius: 50%; } .tbo-leg__place { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .tbo-leg__city { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .tbo-leg__code { font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0.05em; color: var(--tt-accent); } .tbo-leg__airport { font-size: 11.5px; line-height: 1.35; color: var(--color-text-muted); } .tbo-leg__flight { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 0; } .tbo-leg__flight-head { display: flex; flex-wrap: wrap; gap: 3px 9px; align-items: center; min-width: 0; } .tbo-leg__flight-head .tbo-ticket__airline-logo { width: 22px; height: 22px; } .tbo-leg__carrier { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; } .tbo-leg__facts { font-size: 11.5px; line-height: 1.4; color: var(--color-text-muted); } .tbo-leg__alert { font-size: 11.5px; line-height: 1.4; color: var(--tt-warn); } .tbo-wait { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; padding: 8px 0 8px 68px; margin: 6px 0; font-size: 12px; color: var(--color-text-secondary); border-top: 1px dashed var(--tt-hairline); border-bottom: 1px dashed var(--tt-hairline); } .tbo-wait .tbo-icon { color: var(--color-text-muted); } .tbo-wait__terminals { font-weight: 600; color: var(--tt-warn); } .tbo-wait__terminals::before { margin-right: 8px; color: var(--color-text-muted); content: "·"; } .tbo-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 12px; align-items: start; font-size: 13px; } .tbo-details__section { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--tt-hairline); border-radius: 0; background: transparent; box-shadow: none; } .tbo-details__section > .tbo-details__heading { display: flex; gap: 8px; align-items: center; margin: 0; padding: 11px 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; color: var(--color-text-secondary); text-transform: uppercase; border-bottom: 1px solid var(--tt-hairline); background: transparent; } .tbo-details__section > .tbo-details__heading .tbo-icon { width: 1.2em; height: 1.2em; color: var(--primary); } .tbo-details__section--good > .tbo-details__heading .tbo-icon { color: var(--tt-good); } .tbo-details__section--warn > .tbo-details__heading .tbo-icon { color: var(--tt-warn); } .tbo-details__section--price > .tbo-details__heading .tbo-icon { color: var(--primary-dark); } .tbo-details__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; } .tbo-details__group { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .tbo-details h5 { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); } .tbo-details__rows { display: flex; flex-direction: column; gap: 8px; margin: 0; } .tbo-details__row { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; } .tbo-details__row dt { display: flex; gap: 7px; align-items: center; min-width: 0; color: var(--color-text-secondary); } .tbo-details__row dt .tbo-icon { width: 1.05em; height: 1.05em; color: var(--color-text-muted); } .tbo-details__row dd { flex: 0 0 auto; margin: 0; font-weight: 600; letter-spacing: -0.01em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text); } .tbo-details__row--muted dd { font-weight: 500; color: var(--color-text-muted); } .tbo-details__rows--charges { gap: 7px; padding: 10px 11px; border-radius: 0; background: color-mix(in srgb, var(--color-surface-muted) 72%, transparent); } .tbo-details__section--price .tbo-details__body { gap: 10px; padding-bottom: 0; } .tbo-details__rows--total { gap: 0; margin: 0 -14px 0; padding: 12px 14px; border-top: 1px solid var(--tt-accent-line); background: color-mix(in srgb, var(--primary) 9%, var(--color-surface-raised)); } .tbo-details__row--total { gap: 10px; align-items: baseline; } .tbo-details__row--total dt { font-weight: 600; color: var(--color-text); } .tbo-details__row--total dd { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-text); } .tbo-details__leg-bags { display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; margin: 0; list-style: none; border-radius: 0; background: color-mix(in srgb, var(--color-surface-muted) 72%, transparent); } .tbo-details__leg-bags li { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; font-size: 12px; color: var(--color-text-secondary); } .tbo-details__leg-bags li span:last-child { font-weight: 600; color: var(--color-text); } .tbo-details__notes { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; list-style: none; } .tbo-details__notes li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; line-height: 1.4; } .tbo-details__note-route { padding: 1px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--color-text-secondary); border-radius: 0; background: var(--color-surface-muted); } .tbo-details__note-who { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); } .tbo-details__note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--color-text-muted); } .tbo-details__note--foot { padding-top: 2px; } :root[data-theme="dark"] .tbo-details__rows--total { background: color-mix(in srgb, var(--primary) 14%, var(--color-surface-raised)); } @media (max-width: 720px) { .tbo-details { gap: 10px; } .tbo-details__section { border-radius: 0; } .tbo-details__body { padding: 13px; } .tbo-details__rows--total { margin-left: -13px; margin-right: -13px; padding: 11px 13px; } .tbo-details__row--total dd { font-size: 15px; } } .tbo-details__section--privileges { overflow: hidden; grid-column: 1 / -1; margin-bottom: 8px; padding: 0; border: 1px solid var(--tt-hairline); border-radius: 0; background: transparent; box-shadow: none; } .tbo-privileges__header { padding: 17px 18px 15px; border-bottom: 1px solid var(--tt-hairline); background: transparent; } .tbo-privileges__header > .tbo-details__heading { margin-bottom: 5px; font-size: 15px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; } .tbo-privileges { padding: 0; } .tbo-privileges__intro { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.45; letter-spacing: -0.01em; color: var(--color-text-secondary); } .tbo-privileges__footnote { margin: 16px 0 0; padding-top: 12px; border-top: 0.5px solid var(--tt-hairline); font-size: 11px; line-height: 1.45; color: var(--color-text-muted); } .tbo-privileges__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .tbo-privileges__station { min-width: 0; background: transparent; } .tbo-privileges__station + .tbo-privileges__station { border-left: 1px solid var(--color-border-subtle); } .tbo-privileges__station-head { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; padding: 16px; border-bottom: 1px solid var(--color-border-subtle); background: color-mix(in srgb, var(--color-surface-muted) 55%, var(--color-surface-raised)); } .tbo-privileges__direction { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 0; color: var(--primary); background: none; } .tbo-privileges__direction-icon { font-size: 16px; } .tbo-privileges__station-copy { display: grid; min-width: 0; gap: 2px; } .tbo-privileges__role { font-size: 10px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-dark); } .tbo-privileges__place { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .tbo-privileges__iata { font-size: 23px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; color: var(--color-text); font-variant-numeric: tabular-nums; } .tbo-privileges__airport { font-size: 13px; font-weight: 400; letter-spacing: -0.015em; color: var(--color-text-secondary); } .tbo-privileges__carrier { margin-top: 1px; font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--color-text-muted); } .tbo-privileges__list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; } .tbo-privileges__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; padding: 14px 16px; } .tbo-privileges__item + .tbo-privileges__item { border-top: 1px solid var(--color-border-subtle); } .tbo-privileges__item-icon { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 0; color: var(--color-text-secondary); background: none; } .tbo-privileges__item-icon i { font-size: 14px; } .tbo-privileges__item-copy { min-width: 0; } .tbo-privileges__title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; color: var(--color-text); } .tbo-privileges__detail { margin: 4px 0 0; max-width: 42ch; font-size: 12px; line-height: 1.45; letter-spacing: -0.005em; color: var(--color-text-secondary); } .tbo-privileges__fine { margin: 7px 0 0; max-width: 42ch; font-size: 11px; line-height: 1.4; letter-spacing: -0.005em; color: var(--color-text-muted); } :root[data-theme="dark"] .tbo-privileges__footnote { border-color: var(--color-border-subtle); } @media (max-width: 720px) { .tbo-privileges__grid { grid-template-columns: 1fr; } .tbo-privileges__station + .tbo-privileges__station { border-top: 1px solid var(--color-border-subtle); border-left: 0; } .tbo-privileges__iata { font-size: 20px; } } @media (max-width: 430px) { .tbo-privileges__header > .tbo-details__heading { font-size: 14px; } .tbo-privileges__header { padding: 15px 14px 13px; } .tbo-privileges__station-head { padding: 14px; } .tbo-privileges__item { padding: 13px 14px; } } @media (max-width: 900px) { .tbo-modal { padding: 20px 14px; } .tbo-modal__map { height: 220px; } } @media (max-width: 720px) { .tbo-modal { align-items: stretch; justify-content: stretch; padding: 0; } .tbo-modal__dialog { width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: none; } .tbo-modal__head { gap: 10px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; } .tbo-modal__close { width: 44px; height: 44px; min-width: 44px; max-width: 44px; min-height: 44px; max-height: 44px; aspect-ratio: 1; border-radius: 50%; } .tbo-modal__title { font-size: 18px; } .tbo-modal__kind { display: none; } .tbo-modal__scroll { gap: 18px; padding: 16px 16px 20px; } .tbo-modal__map { height: 200px; border-radius: 0; } .tbo-modal__foot { flex-direction: row; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); } .tbo-modal__price { flex: 1 1 auto; gap: 1px; min-width: 0; } .tbo-modal__amount { font-size: 20px; } .tbo-modal__price-note { font-size: 11.5px; } .tbo-modal__seats { font-size: 11px; } .tbo-modal__purchase { flex: 0 0 auto; max-width: 58%; } .tbo-modal__buy { width: auto; padding: 10px 16px; font-size: 14px; white-space: nowrap; } .tbo-modal__purchase-error { max-width: 11rem; font-size: 11px; text-align: right; } .tbo-details { grid-template-columns: minmax(0, 1fr); gap: 18px; } .tbo-leg__row { grid-template-columns: 46px 14px minmax(0, 1fr); gap: 11px; } .tbo-wait { padding-left: 60px; } } @media (max-width: 430px) { .tbo-modal__identity { gap: 10px; } .tbo-modal__title { font-size: 17px; } .tbo-leg__row { grid-template-columns: 42px 14px minmax(0, 1fr); gap: 10px; } .tbo-leg__time, .tbo-leg__city { font-size: 13px; } .tbo-wait { padding-left: 0; } .tbo-modal__amount { font-size: 19px; } } .tbo-icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; color: inherit; } .tbo-ticket__fare { grid-area: fare; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-left: 22px; border-left: 1px solid var(--tt-hairline); box-sizing: border-box; } .tbo-fare { display: flex; flex-direction: column; margin: 0; } .tbo-fare__row { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--tt-hairline); } .tbo-fare__row:last-child { border-bottom: none; } .tbo-fare__label { display: flex; flex: 0 1 auto; gap: 7px; align-items: center; min-width: 0; font-size: 12px; letter-spacing: -0.005em; color: var(--color-text-muted); white-space: nowrap; } .tbo-fare__value { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; justify-content: flex-end; min-width: 0; margin: 0; font-size: 13px; font-weight: 550; letter-spacing: -0.01em; color: var(--color-text); text-align: right; } .tbo-fare__row--strong .tbo-fare__value { font-size: 14px; font-weight: 600; } .tbo-fare__row--headline { align-items: center; } .tbo-fare__row--headline .tbo-fare__label { flex: 0 0 auto; } .tbo-fare__row--headline .tbo-fare__value { flex: 1 1 auto; justify-content: flex-start; text-align: left; } .tbo-fare__row--good .tbo-fare__value { color: var(--tt-good); } .tbo-fare__row--warn .tbo-fare__value { color: var(--tt-warn); } .tbo-fare__note { font-size: 10px; font-weight: 500; letter-spacing: 0.01em; color: var(--color-text-muted); } .tbo-fare__trip-notes { display: flex; flex-direction: column; gap: 5px; padding: 0; margin: 0; list-style: none; } .tbo-fare__trip-note { display: flex; gap: 7px; align-items: center; font-size: 11.5px; line-height: 1.35; color: var(--color-text-secondary); } .tbo-fare__trip-note--accent { color: var(--tt-accent); } .tbo-fare__trip-note--alert { font-weight: 600; color: var(--tt-alert); } .sp-list-head[hidden] { display: none !important; } .sp-loading { display: grid; justify-items: center; gap: 10px; margin: 0 0 22px; padding: 28px 20px 8px; text-align: center; } .sp-loading__kicker { margin: 0; font-family: var(--sp-font-data); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-ink-faint); } .sp-loading__title { margin: 0; max-width: 28rem; font-family: var(--sp-font-display); font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: var(--sp-weight-display); font-stretch: 100%; line-height: 1.15; letter-spacing: -0.02em; color: var(--sp-ink); text-wrap: balance; } .sp-loading__route { display: grid; grid-template-columns: auto minmax(7rem, 16rem) auto; align-items: center; gap: 14px; width: min(28rem, 100%); margin-top: 10px; } .sp-loading__code { font-family: var(--sp-font-data); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.08em; color: var(--sp-ink); } .sp-loading__spine { position: relative; height: 1px; background: linear-gradient( 90deg, transparent, var(--sp-line-strong) 12%, var(--sp-line-strong) 88%, transparent ); } .sp-loading__bead { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--sp-accent); box-shadow: 0 0 0 4px var(--sp-accent-wash); transform: translate(-50%, -50%); animation: sp-bead 1.8s var(--sp-ease) infinite; } .sp-loading__ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 8px 0 0; padding: 0; list-style: none; font-family: var(--sp-font-data); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-ink-faint); } .sp-loading__ways li { animation: sp-way-scan 2.1s ease-in-out infinite; animation-delay: calc(var(--sp-way-i, 0) * 0.28s); } .sp-card-skel { --sp-card-rail: 13.75rem; display: grid; grid-template-columns: clamp(220px, 32%, 360px) minmax(0, 1fr) var(--sp-card-rail); min-height: 188px; overflow: hidden; border: 1px solid var(--sp-card-stroke); border-radius: var(--sp-radius-sm); background: var(--sp-surface); box-shadow: none; animation: sp-skel-in 0.55s var(--sp-ease) both; animation-delay: calc(var(--sp-skel-i, 0) * 90ms); } :root[data-theme="dark"] .sp-card-skel { box-shadow: none; } .sp-card-skel__media { min-height: 188px; background: var(--sp-surface-sunk); } .sp-card-skel__body, .sp-card-skel__rail { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px 20px; } .sp-card-skel__rail { align-items: flex-end; border-left: 1px solid var(--sp-line); } .sp-card-skel__bone { display: block; border-radius: 3px; background: linear-gradient( 100deg, var(--sp-surface-sunk) 30%, rgba(255, 255, 255, 0.55) 48%, var(--sp-surface-sunk) 64% ); background-size: 220% 100%; animation: sp-shimmer 1.5s ease infinite; } :root[data-theme="dark"] .sp-card-skel__bone { background: linear-gradient( 100deg, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0.05) 64% ); background-size: 220% 100%; } .sp-card-skel__bone--kind { width: 5.5rem; height: 10px; } .sp-card-skel__bone--route { width: min(16rem, 88%); height: 18px; } .sp-card-skel__bone--facts { width: min(11rem, 62%); height: 10px; } .sp-card-skel__bone--price { width: 6.5rem; height: 22px; } .sp-card-skel__bone--cta { width: 7.5rem; height: 36px; border-radius: 8px; } @keyframes sp-bead { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @keyframes sp-way-scan { 0%, 100% { color: var(--sp-ink-faint); } 40% { color: var(--sp-ink); } } @keyframes sp-skel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { .sp-card-skel { grid-template-columns: 1fr; } .sp-card-skel__media { min-height: 140px; } .sp-card-skel__rail { align-items: stretch; border-left: 0; border-top: 1px solid var(--sp-line); padding-top: 16px; } } @media (prefers-reduced-motion: reduce) { .sp-loading__bead, .sp-loading__ways li, .sp-card-skel, .sp-card-skel__bone { animation: none; } .sp-loading__bead { left: 50%; opacity: 1; } } @media (max-width: 1180px) { .sp-bar { grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.1fr) minmax(10.5rem, 1fr) minmax(5.5rem, 0.36fr) auto; } .sp-search__submit { min-width: 8.25rem; padding: 0 14px; } } @media (max-width: 768px) { .sp-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 0; padding: 0.25rem; } .sp-bar > .sp-cell--airport:not(.sp-cell--to) { grid-column: 1 / -1; grid-row: 1; padding-right: 2.75rem; } .sp-bar > .sp-cell--to { grid-column: 1 / -1; grid-row: 2; padding-right: 2.75rem; } .sp-bar > .sp-cell--dates { grid-column: 1 / -1; grid-row: 3; } .sp-bar > .sp-cell--pax { grid-column: 1 / -1; grid-row: 4; } .sp-bar > .sp-search__submit { grid-column: 1 / -1; grid-row: 5; } .sp-cell { padding: 0.5rem 0.75rem; } .sp-cell--to::after, .sp-cell--dates::after, .sp-cell--pax::after { display: none; } .sp-search__submit { min-height: 44px; margin: 6px 8px 8px; } .sp-cell--dates, .sp-cell--pax { border-top: 1px solid var(--sp-bar-separator); } .sp-cell--to { border-top: none; } .sp-cell--to::before { display: block; top: 0; bottom: auto; left: 0.75rem; right: 3rem; width: auto; height: 1px; background: var(--sp-bar-separator); } .sp-cell--pax { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .sp-cell--pax .sp-pax { margin: 0; } .sp-cell--pax .sp-pax__btn { width: 36px; height: 36px; } .sp-swap { grid-column: 2; grid-row: 1 / 3; position: relative; top: auto; right: auto; z-index: 2; align-self: center; justify-self: end; width: 32px; height: 32px; margin: 0 8px 0 0; background: transparent; box-shadow: none; transform: rotate(90deg); } .sp-swap:hover { transform: rotate(270deg); } .sp-primer__grid { grid-template-columns: 1fr; } .sp-list-head { align-items: stretch; flex-direction: column; justify-content: flex-start; gap: 14px; } .sp-results__meta--band { flex: none; max-width: none; } .sp-list-head__controls, .sp-ticket-filters { width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; gap: 10px; } .sp-list-head__control { flex: 1 1 auto; width: 100%; justify-content: space-between; gap: 12px; } .sp-menu { flex: 1 1 auto; max-width: 70%; } } @media (max-width: 480px) { .sp-hero { padding-block: 32px 28px; } } .sp-charter-modal.prebook-modal { --fpn-font: var(--sp-font-body); --fpn-text: var(--sp-ink); --fpn-fill: transparent; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 36px); opacity: 0; transition: opacity 0.22s var(--sp-ease, ease); } .sp-charter-modal.prebook-modal.is-open, .sp-charter-modal.prebook-modal.active { display: flex; opacity: 1; } .sp-charter-modal__panel { display: flex; flex-direction: column; width: min(100%, 920px); max-height: min(92dvh, 780px); overflow: hidden; border-radius: 0; background: rgba(255, 255, 255, 0.97); border: 1px solid var(--sp-line); box-shadow: var(--sp-card-shadow-lift); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); } :root[data-theme="dark"] .sp-charter-modal__panel:not(.sp-charter-modal__panel--success) { background: rgba(28, 30, 36, 0.52); } .sp-charter-modal__panel--success { width: min(100%, 420px); background: var(--color-surface-muted, var(--sp-surface)); backdrop-filter: none; -webkit-backdrop-filter: none; } .sp-charter-modal__header { flex: none; padding: 28px 32px 18px; border-bottom: 1px solid var(--sp-line); } .sp-charter-modal__title { margin: 0; font-family: var(--sp-font-display); font-size: clamp(1.5rem, 2.2vw, 1.85rem); font-weight: 700; font-stretch: 108%; letter-spacing: -0.025em; color: var(--sp-ink); } .sp-charter-modal__lead { margin: 8px 0 0; max-width: 36rem; font-size: 0.9375rem; line-height: 1.45; color: var(--sp-ink-soft); } .sp-charter-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; overflow-x: hidden; padding: 24px 32px 12px; overscroll-behavior: contain; } .sp-charter-modal__layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 8px 48px; align-items: start; } .sp-charter-modal__col--trip { min-width: 0; padding-right: 8px; border-right: 1px solid var(--sp-line); } .sp-charter-modal__col--pax { min-width: 0; padding-left: 4px; } .sp-charter-citz { display: flex; flex-direction: column; gap: 0; min-width: 0; } .sp-charter-citz__title { margin: 0; font-family: var(--sp-font-display); font-size: 1.15rem; font-weight: 700; font-stretch: 105%; letter-spacing: -0.02em; color: var(--sp-ink); } .sp-charter-citz__lead { margin: 6px 0 18px; font-size: 0.875rem; line-height: 1.45; color: var(--sp-ink-soft); } .sp-charter-citz__list { list-style: none; margin: 0 0 4px; padding: 0; border-top: 1px solid var(--sp-line); } .sp-charter-citz__item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--sp-line); } .sp-charter-citz__flag { flex: none; display: inline-flex; width: 1.6rem; } .sp-charter-citz__flag img, .sp-charter-citz__flag .booking-country-flag { width: 1.5rem; height: 1rem; border-radius: 2px; object-fit: cover; } .sp-charter-citz__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sp-charter-citz__meta { font-family: var(--sp-font-data); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-ink-faint); } .sp-charter-citz__name { font-size: 1rem; font-weight: 650; letter-spacing: -0.015em; color: var(--sp-ink); } .sp-charter-citz__remove { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--sp-ink-faint); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .sp-charter-citz__remove:hover { background: var(--sp-accent-wash); color: var(--sp-ink); } .sp-charter-citz__add { display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; margin: 16px 0 0; padding: 8px 12px 8px 8px; border: 1px solid var(--sp-line); border-radius: 0; background: transparent; color: var(--sp-accent-deep); font-family: var(--sp-font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .sp-charter-citz__add:hover:not(:disabled) { border-color: var(--sp-accent); background: var(--sp-accent-wash); color: var(--sp-accent-deep); } .sp-charter-citz__add:disabled { opacity: 0.4; cursor: default; } .sp-charter-citz__add-mark { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sp-accent); color: #fff; line-height: 0; } .sp-charter-citz__add-mark svg { display: block; } .sp-charter-citz__add-label { line-height: 1; padding-bottom: 0; } .sp-charter-citz__note { margin: 14px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--sp-ink-faint); } .sp-charter-modal__route { margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid var(--sp-line); background: none; font-family: var(--sp-font-display); font-size: 1.05rem; font-weight: 650; font-stretch: 105%; line-height: 1.35; letter-spacing: -0.02em; color: var(--sp-ink); } .sp-charter-modal__route-endpoints { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.45rem; } .sp-charter-modal__route-point { min-width: 0; overflow-wrap: anywhere; } .sp-charter-modal__route-point:first-child { flex: 1 1 auto; max-width: calc(100% - 1.75rem); } .sp-charter-modal__route-point:last-child { flex: 1 1 100%; } .sp-charter-modal__route-arrow { flex: 0 0 auto; color: var(--sp-ink-soft); font-weight: 500; } .sp-charter-modal__field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--sp-line); background: none; } .sp-charter-modal__field:last-child { border-bottom: none; } .sp-charter-modal__field--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } .sp-charter-modal__field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .sp-charter-modal__field-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sp-charter-modal__field-label { margin: 0; font-family: var(--sp-font-display); font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.015em; color: var(--sp-ink); } .sp-charter-modal__field-hint { margin: 0; font-size: 0.78rem; line-height: 1.4; color: var(--sp-ink-soft); } .sp-charter-modal__field-value { font-size: 1rem; font-weight: 550; letter-spacing: -0.01em; color: var(--sp-ink); } .sp-charter-modal__date-control, .sp-charter-date-anchor { position: relative; } .sp-charter-modal__date-trigger { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0; border: none; border-bottom: 1.5px solid var(--sp-line-strong); border-radius: 0; background: transparent; color: var(--sp-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .sp-charter-modal__date-trigger:hover { border-bottom-color: var(--sp-accent); } .sp-charter-modal__date-trigger:focus-visible { outline: none; border-bottom-color: var(--sp-accent); box-shadow: 0 2px 0 0 var(--sp-accent-wash); } .sp-charter-modal__date-trigger-value { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--sp-ink-soft); } .sp-charter-modal__date-trigger.has-value .sp-charter-modal__date-trigger-value { font-weight: 650; color: var(--sp-ink); } .sp-charter-modal__date-trigger-chevron { display: inline-flex; color: var(--sp-ink-faint); transition: transform 0.18s var(--sp-ease), color 0.15s ease; } .sp-charter-date-anchor.date-range-picker-open .sp-charter-modal__date-trigger-chevron { transform: rotate(180deg); color: var(--sp-accent-deep); } .sp-charter-modal__field.is-error .sp-charter-modal__date-trigger { border-bottom-color: #c9342d; } .sp-charter-date-dropdown.date-range-picker-dropdown { position: fixed; z-index: 10200; width: 292px; max-width: min(292px, calc(100vw - 24px)); animation: none; } .sp-charter-date-dropdown .date-range-calendars { padding: 0.7rem 0.85rem 0.85rem; } .sp-charter-modal__stepper { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 0; border: none; border-radius: 0; background: transparent; } .sp-charter-modal__stepper-btn { width: 32px; height: 32px; border: none; border-radius: 50%; background: transparent; color: var(--sp-ink-soft); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .sp-charter-modal__stepper-btn:hover:not(:disabled) { background: var(--sp-accent-wash); color: var(--sp-accent-deep); } .sp-charter-modal__stepper-btn:disabled { opacity: 0.35; cursor: default; } .sp-charter-modal__stepper-value { min-width: 1.5rem; text-align: center; font-family: var(--sp-font-display); font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--sp-ink); } .sp-charter-modal .fpn-class-picker { grid-column: auto; width: 100%; } .sp-charter-modal .fpn-class-picker__trigger { min-height: 44px; padding: 0.35rem 0; border: none; border-bottom: 1.5px solid var(--sp-line-strong); border-radius: 0; background: transparent !important; filter: none !important; box-shadow: none !important; outline: none; } .sp-charter-modal .fpn-class-picker__trigger:hover, .sp-charter-modal .fpn-class-picker.is-open .fpn-class-picker__trigger, .sp-charter-modal .fpn-class-picker__trigger:focus, .sp-charter-modal .fpn-class-picker__trigger:focus-visible { filter: none !important; background: transparent !important; box-shadow: none !important; outline: none; border-bottom-color: var(--sp-accent); } .sp-charter-modal .fpn-class-picker__label { display: none; } .sp-charter-modal .fpn-class-picker__value { font-size: 1rem; font-weight: 550; letter-spacing: -0.01em; } .sp-charter-modal .fpn-class-picker__menu, .fpn-class-picker__menu.is-portaled { border-radius: 0; border: 1px solid var(--sp-line); box-shadow: var(--sp-card-shadow-lift); } .fpn-class-picker__menu.is-portaled { --fpn-font: var(--sp-font-body, inherit); --fpn-text: var(--sp-ink, #111); --fpn-muted: var(--sp-ink-faint, #6b7280); --fpn-accent: var(--sp-accent, #2f6fed); --fpn-menu-bg: var(--sp-surface, #fff); --fpn-menu-border: var(--sp-line, rgba(0, 0, 0, 0.08)); --fpn-menu-shadow: var(--sp-card-shadow-lift, 0 12px 40px rgba(0, 0, 0, 0.14)); --fpn-option-hover: var(--sp-accent-wash, rgba(47, 111, 237, 0.1)); --fpn-option-selected: rgba(47, 111, 237, 0.14); background: var(--fpn-menu-bg); border-color: var(--fpn-menu-border); } .sp-charter-modal__field.is-error .fpn-class-picker__trigger { border-bottom-color: #c9342d; } .sp-charter-modal__error { margin: 16px 0 0; padding: 0; border: none; border-radius: 0; background: none; color: #c9342d; font-size: 0.875rem; line-height: 1.4; } .sp-charter-modal__footer { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 16px 32px 24px; border-top: 1px solid var(--sp-line); background: transparent; } .sp-charter-modal__btn { min-height: 44px; padding: 0 18px; border-radius: 0; border: none; font-family: var(--sp-font-body); font-size: 0.75rem; font-weight: var(--sp-weight-label, 500); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: filter 0.15s ease, opacity 0.15s ease, color 0.15s ease; } .sp-charter-modal__btn:disabled { opacity: 0.55; cursor: default; } .sp-charter-modal__btn--ghost { background: transparent; color: var(--sp-ink-soft); } .sp-charter-modal__btn--ghost:hover:not(:disabled) { color: var(--sp-ink); } .sp-charter-modal__btn--primary { background: var(--sp-cta); color: var(--sp-cta-ink); } .sp-charter-modal__btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--sp-cta) 88%, #000); } .sp-charter-modal.prebook-modal--country-open .sp-charter-modal__body { overflow: hidden; } body.sp-charter-modal-open { overflow: hidden; } @media (max-width: 800px) { .sp-charter-modal__layout { grid-template-columns: 1fr; gap: 8px 0; } .sp-charter-modal__col--trip { padding-right: 0; border-right: none; border-bottom: 1px solid var(--sp-line); margin-bottom: 8px; padding-bottom: 4px; } .sp-charter-modal__col--pax { padding-left: 0; } } @media (max-width: 560px) { .sp-charter-modal.prebook-modal { align-items: flex-end; padding: 0; } .sp-charter-modal__panel { width: 100%; max-height: min(94dvh, 100%); border-radius: 0; border-left: none; border-right: none; border-bottom: none; } .sp-charter-modal__header, .sp-charter-modal__body, .sp-charter-modal__footer { padding-left: 20px; padding-right: 20px; } } .prebook-modal.prebook-modal--studio { --pb-accent: var(--sp-accent); --pb-radius: 0; --pb-radius-inner: 0; --pb-font: var(--sp-font-body); padding: clamp(16px, 3vw, 36px); font-family: var(--sp-font-body); } .prebook-modal--studio .prebook-modal__panel { --pb-radius: 0; --pb-radius-inner: 0; width: min(100%, 920px); max-height: min(92dvh, 780px); border-radius: 0; background: rgba(255, 255, 255, 0.97); border: 1px solid var(--sp-line); box-shadow: var(--sp-card-shadow-lift); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); } :root[data-theme="dark"] .prebook-modal--studio .prebook-modal__panel:not(.prebook-modal__panel--success) { background: rgba(28, 30, 36, 0.52); } .prebook-modal--studio .prebook-modal__toolbar { align-items: flex-start; padding: 28px 32px 8px; background: transparent; border-bottom: none; } .prebook-modal--studio .prebook-modal__title { font-family: var(--sp-font-display); font-size: clamp(1.5rem, 2.2vw, 1.85rem); font-weight: 700; font-stretch: 108%; letter-spacing: -0.025em; color: var(--sp-ink); } .prebook-modal--studio .prebook-modal__studio-lead { margin: 0; padding: 0 max(32px, calc(100% - 36rem - 32px)) 18px 32px; border-bottom: 1px solid var(--sp-line); font-size: 0.9375rem; line-height: 1.45; color: var(--sp-ink-soft); background: transparent; } .prebook-modal--studio .prebook-modal__close { width: 36px; height: 36px; margin-top: 2px; border: none; border-radius: 0; background: transparent; color: var(--sp-ink-soft); font-size: 1.35rem; } .prebook-modal--studio .prebook-modal__close:hover { background: var(--sp-accent-wash); color: var(--sp-ink); } .prebook-modal--studio .prebook-modal__body { padding: 24px 32px 12px; background: transparent; } .prebook-modal--studio .prebook-modal__studio-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 8px 48px; align-items: start; } .prebook-modal--studio .prebook-modal__studio-col--trip { min-width: 0; padding-right: 8px; border-right: 1px solid var(--sp-line); } .prebook-modal--studio .prebook-modal__studio-col--pax { min-width: 0; padding-left: 4px; } .prebook-modal--studio .prebook-modal__trip { margin: 0 0 8px; padding: 0 0 20px; border: none; border-bottom: 1px solid var(--sp-line); border-radius: 0; background: none; box-shadow: none; } .prebook-modal--studio .prebook-modal__route { font-family: var(--sp-font-display); font-size: 1.05rem; font-weight: 650; font-stretch: 105%; letter-spacing: -0.02em; color: var(--sp-ink); } .prebook-modal--studio .prebook-modal__trip-meta { margin-top: 8px; font-size: 0.875rem; color: var(--sp-ink-soft); } .prebook-modal--studio .prebook-modal__price { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sp-line); font-family: var(--sp-font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; color: var(--sp-ink); } .prebook-modal--studio .prebook-modal__group { margin-top: 0; border: none; border-radius: 0; background: none; box-shadow: none; } .prebook-modal--studio .prebook-modal__row--passengers { min-height: 0; padding: 16px 0; border-bottom: none; } .prebook-modal--studio .prebook-modal__row-label { font-family: var(--sp-font-display); font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.015em; color: var(--sp-ink); } .prebook-modal--studio .prebook-modal__row-hint { color: var(--sp-ink-soft); } .prebook-modal--studio .prebook-modal__stepper { border: none; background: transparent; gap: 4px; } .prebook-modal--studio .prebook-modal__stepper-btn { width: 32px; height: 32px; border: none; border-radius: 50%; background: transparent; color: var(--sp-ink-soft); } .prebook-modal--studio .prebook-modal__stepper-btn:hover:not(:disabled) { background: var(--sp-accent-wash); color: var(--sp-accent-deep); } .prebook-modal--studio .prebook-modal__stepper-value { font-family: var(--sp-font-display); font-size: 1.125rem; font-weight: 700; color: var(--sp-ink); } .prebook-modal--studio .prebook-modal__citizenship-section { margin: 0; } .prebook-modal--studio .prebook-modal__studio-col--trip .prebook-modal__citizenship-section { padding: 20px 0 4px; border-top: 1px solid var(--sp-line); } .prebook-modal--studio .prebook-modal__citizenship-title { font-family: var(--sp-font-display); font-size: 1.15rem; font-weight: 700; font-stretch: 105%; letter-spacing: -0.02em; color: var(--sp-ink); } .prebook-modal--studio .prebook-modal__citizenship-subtitle { margin: 6px 0 18px; font-size: 0.875rem; color: var(--sp-ink-soft); } .prebook-modal--studio .prebook-modal__citizenship-card { display: flex; flex-direction: column; padding: 0; border: none; background: transparent; box-shadow: none; } .prebook-modal--studio .prebook-modal__citizenship-empty { display: none; } .prebook-modal--studio .prebook-modal__citizenship-list { width: 100%; border-top: 1px solid var(--sp-line); } .prebook-modal--studio .prebook-modal__citizenship-item { padding: 14px 0; border-bottom: 1px solid var(--sp-line); } .prebook-modal--studio .prebook-modal__citizenship-item-label { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-ink-faint); } .prebook-modal--studio .prebook-modal__citizenship-item-value { font-weight: 650; color: var(--sp-ink); } .prebook-modal--studio .prebook-modal__citizenship-item-remove { width: 28px; height: 28px; border-radius: 50%; background: transparent; color: var(--sp-ink-faint); } .prebook-modal--studio .prebook-modal__citizenship-item-remove:hover, .prebook-modal--studio .prebook-modal__citizenship-item-remove:focus-visible { background: var(--sp-accent-wash); color: var(--sp-ink); } .prebook-modal--studio .prebook-modal__citizenship-add { width: auto; align-self: flex-start; margin-top: 16px; padding: 8px 12px 8px 8px; border: 1px solid var(--sp-line); border-radius: 0; background: transparent; color: var(--sp-accent-deep); font-size: 0.9375rem; } .prebook-modal--studio .prebook-modal__citizenship-add:hover:not(:disabled) { border-color: var(--sp-accent); background: var(--sp-accent-wash); } .prebook-modal--studio .prebook-modal__citizenship-add-icon { border-radius: 50%; background: var(--sp-accent); color: #fff; } .prebook-modal--studio .prebook-modal__citizenship-footnote { margin-top: 14px; font-size: 0.78rem; color: var(--sp-ink-faint); } .prebook-modal--studio .prebook-modal__footer { display: flex; justify-content: flex-end; grid-template-columns: none; gap: 8px; padding: 16px 32px 24px; border-top: 1px solid var(--sp-line); background: transparent; } .prebook-modal--studio .prebook-modal__btn { min-height: 44px; width: auto; min-width: 0; padding: 0 18px; border-radius: 0; border: none; box-shadow: none; font-family: var(--sp-font-body); font-size: 0.75rem; font-weight: var(--sp-weight-label, 500); letter-spacing: 0.16em; text-transform: uppercase; } .prebook-modal--studio .prebook-modal__btn--ghost { background: transparent; color: var(--sp-ink-soft); } .prebook-modal--studio .prebook-modal__btn--ghost:hover:not(:disabled) { background: transparent; color: var(--sp-ink); } .prebook-modal--studio .prebook-modal__btn--primary { background: var(--sp-cta); color: var(--sp-cta-ink); } .prebook-modal--studio .prebook-modal__btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--sp-cta) 88%, #000); } @media (max-width: 800px) { .prebook-modal--studio .prebook-modal__studio-layout { grid-template-columns: 1fr; gap: 20px; } .prebook-modal--studio .prebook-modal__studio-col--trip { padding-right: 0; border-right: none; padding-bottom: 8px; border-bottom: 1px solid var(--sp-line); } .prebook-modal--studio .prebook-modal__studio-col--pax { padding-left: 0; } .prebook-modal--studio .prebook-modal__toolbar, .prebook-modal--studio .prebook-modal__studio-lead, .prebook-modal--studio .prebook-modal__body, .prebook-modal--studio .prebook-modal__footer { padding-left: 20px; padding-right: 20px; } } .sp-back-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px) + 16px); bottom: max(20px, env(safe-area-inset-bottom, 0px) + 20px); z-index: 160; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--sp-line-strong, rgba(14, 26, 44, 0.18)); border-radius: 0; background: var(--sp-surface, #ffffff); color: var(--sp-ink, #1d1d1f); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 28px, 0) scale(0.55); transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.16, 1.2, 0.3, 1), visibility 0.42s step-end, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .sp-back-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.16, 1.25, 0.3, 1), visibility 0s linear, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .sp-back-top:hover { border-color: var(--sp-accent); color: var(--sp-accent-deep); box-shadow: none; transform: translate3d(0, -2px, 0) scale(1.04); } .sp-back-top:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; } .sp-back-top:active { transform: translate3d(0, 0, 0) scale(0.96); } .sp-back-top svg { display: block; } :root[data-theme="dark"] .sp-back-top { background: var(--sp-surface); border-color: var(--sp-line-strong); color: var(--sp-ink); box-shadow: none; } :root[data-theme="dark"] .sp-back-top:hover { border-color: var(--sp-accent); color: var(--sp-accent-deep); } @media (prefers-reduced-motion: reduce) { .sp-back-top, .sp-back-top.is-visible, .sp-back-top:hover, .sp-back-top:active { transition-duration: 0.01ms; transform: none; } } .fpn-class-picker { --fpn-menu-bg: rgba(255, 255, 255, 0.96); --fpn-menu-border: rgba(60, 60, 67, 0.12); --fpn-menu-shadow: 0 10px 36px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.06); --fpn-option-hover: rgba(0, 194, 168, 0.1); --fpn-option-selected: rgba(0, 194, 168, 0.14); position: relative; grid-column: 1 / 3; min-width: 0; width: 100%; z-index: 20; } .fpn-class-picker.is-open { z-index: 60; } :root[data-theme="dark"] .fpn-class-picker { --fpn-menu-bg: rgba(40, 42, 50, 0.96); --fpn-menu-border: rgba(255, 255, 255, 0.12); --fpn-menu-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.1); --fpn-option-hover: rgba(0, 194, 168, 0.16); --fpn-option-selected: rgba(0, 194, 168, 0.22); } .fpn-class-picker__trigger { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0.4rem 0.55rem 0.45rem 0.7rem; border: none; border-radius: 10px; background: var(--fpn-fill); color: var(--fpn-text); font-family: var(--fpn-font); text-align: left; cursor: pointer; transition: box-shadow 0.15s ease, filter 0.15s ease; } .fpn-class-picker__trigger:hover { filter: brightness(0.98); } :root[data-theme="dark"] .fpn-class-picker__trigger:hover { filter: brightness(1.08); } .fpn-class-picker__trigger:focus-visible, .fpn-class-picker.is-open .fpn-class-picker__trigger { outline: none; filter: none; box-shadow: inset 0 0 0 1px rgba(0, 194, 168, 0.5), 0 0 0 3px rgba(0, 194, 168, 0.12); } .fpn-class-picker.is-error .fpn-class-picker__trigger { background: rgb(255 59 48 / 5%); box-shadow: inset 0 0 0 1px rgb(255 59 48 / 55%), 0 0 0 3px rgb(255 59 48 / 10%); } .fpn-class-picker.is-error .fpn-class-picker__label { color: #d70015; } .fpn-class-picker__meta { display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; min-width: 0; flex: 1 1 auto; } .fpn-class-picker__label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fpn-muted); line-height: 1.2; } .fpn-class-picker__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.018em; line-height: 1.25; color: var(--fpn-text); } .fpn-class-picker__chevron { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--fpn-muted); font-size: 0.55rem; transition: transform 0.15s ease, color 0.15s ease; } .fpn-class-picker.is-open .fpn-class-picker__chevron { transform: rotate(180deg); color: var(--fpn-accent); } .fpn-class-picker__menu { position: absolute; z-index: 140; left: 0; right: 0; top: calc(100% + 0.35rem); bottom: auto; box-sizing: border-box; display: none; width: 100%; margin: 0; padding: 0.35rem; border: none; border-radius: 12px; background: var(--fpn-menu-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--fpn-menu-shadow); max-height: min(320px, 50vh); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .fpn-class-picker.is-open .fpn-class-picker__menu { display: block; } .fpn-class-picker.is-drop-up .fpn-class-picker__menu { top: auto; bottom: calc(100% + 0.35rem); } .fpn-class-picker__menu.is-portaled { display: block; left: auto; right: auto; top: auto; bottom: auto; width: auto; z-index: 10200; } .fpn-class-picker__option { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; width: 100%; min-height: 2.25rem; margin: 0; padding: 0.5rem 0.7rem; border: none; border-radius: 8px; background: transparent; color: var(--fpn-text); font-family: var(--fpn-font); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.016em; text-align: left; cursor: pointer; transition: background 0.12s ease; } .fpn-class-picker__option:hover, .fpn-class-picker__option:focus-visible { outline: none; background: var(--fpn-option-hover); } .fpn-class-picker__option[aria-selected="true"] { background: var(--fpn-option-selected); font-weight: 600; color: var(--fpn-text); } .fpn-class-picker__check { flex-shrink: 0; color: var(--fpn-accent); font-size: 0.7rem; opacity: 0; } .fpn-class-picker__option[aria-selected="true"] .fpn-class-picker__check { opacity: 1; } .fpn-class-picker__empty { padding: 0.75rem 0.65rem; font-size: 0.8125rem; color: var(--fpn-muted); text-align: center; line-height: 1.35; } .fpn-class-picker.is-disabled .fpn-class-picker__trigger { opacity: 0.55; cursor: not-allowed; } .fpn-class-picker__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; appearance: none !important; -webkit-appearance: none !important; } @media (max-width: 560px) { .fpn-class-picker { grid-column: 1; width: 100%; } .fpn-class-picker__menu { max-height: min(72vh, 440px); padding: 0.4rem; } .fpn-class-picker__option { min-height: 2.5rem; padding: 0.6rem 0.75rem; } } .load-more { display: flex; justify-content: center; width: 100%; margin-top: 0.75rem; padding: 0; box-sizing: border-box; } .load-more[hidden] { display: none !important; } .load-more-button { --lm-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; --lm-icon-size: 16px; --lm-gap: 8px; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; border: 0.5px solid var(--color-border); border-radius: 980px; background: var(--color-surface-glass-strong); font-family: var(--lm-font); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.016em; line-height: 1; color: var(--color-text); cursor: pointer; -webkit-font-smoothing: antialiased; box-shadow: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1); } .load-more-button:hover:not(:disabled):not(.end-of-results) { background: var(--color-surface-raised); border-color: var(--color-border-strong); transform: none; box-shadow: none; } .load-more-button:active:not(:disabled):not(.end-of-results) { transform: scale(0.98); } .load-more-button:disabled:not(.end-of-results):not(.is-loading) { opacity: 0.45; cursor: not-allowed; } .load-more-button .load-more-content { display: inline-flex; align-items: center; justify-content: center; gap: var(--lm-gap); min-width: 0; } .load-more-button .load-more-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--lm-icon-size); width: var(--lm-icon-size); height: var(--lm-icon-size); color: var(--primary); } .load-more-button .load-more-icon svg { display: block; width: var(--lm-icon-size); height: var(--lm-icon-size); } .load-more-button .load-more-label { display: block; white-space: nowrap; line-height: 1.15; } .load-more:has(.end-of-results) { align-items: center; gap: 14px; margin-top: 0.25rem; padding: 1rem 0 0.125rem; } .load-more:has(.end-of-results)::before, .load-more:has(.end-of-results)::after { content: ""; flex: 1 1 0; height: 0.5px; background: var(--color-border-subtle); } .load-more-button.end-of-results, .load-more-button.end-of-results:hover, .load-more-button.end-of-results:disabled { width: auto; max-width: none; min-height: 0; padding: 0; border: none; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transform: none; font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.006em; color: var(--color-text-muted); cursor: default; pointer-events: none; opacity: 1; flex: 0 0 auto; } .load-more-button.is-loading { cursor: progress; pointer-events: none; color: var(--color-text-muted); border-color: var(--color-border-subtle); background: transparent; } .load-more-button.is-loading .load-more-spinner { flex: 0 0 15px; width: 15px; height: 15px; border: 1.5px solid var(--color-border-subtle); border-top-color: var(--primary); border-radius: 50%; animation: load-more-spin 0.7s linear infinite; } @keyframes load-more-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .load-more-button.is-loading .load-more-spinner { animation: none; border-top-color: var(--color-text-faint); } } @media (max-width: 640px) { .load-more:has(.end-of-results) { gap: 10px; padding-top: 0.875rem; } .load-more-button:not(.end-of-results) { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; } }