/* ===== libs/nunito-font.css ===== */
@font-face{font-family:Lexend;font-style:normal;font-weight:100 900;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/lexend/wlpwgwvFAVdoq2_v9KQU4Wc.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Lexend;font-style:normal;font-weight:100 900;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/lexend/wlpwgwvFAVdoq2_v9aQU4Wc.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Lexend;font-style:normal;font-weight:100 900;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/lexend/wlpwgwvFAVdoq2_v-6QU.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXX3I6Li01BKofIMNaORs71cA.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXX3I6Li01BKofIMNaHRs71cA.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXX3I6Li01BKofIMNaMRs71cA.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXX3I6Li01BKofIMNaNRs71cA.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXX3I6Li01BKofIMNaDRs4.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXV3I6Li01BKofIOOaBXso.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXV3I6Li01BKofIMeaBXso.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXV3I6Li01BKofIOuaBXso.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXV3I6Li01BKofIO-aBXso.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXV3I6Li01BKofINeaB.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
/* ===== libs/flags.css ===== */
.flag-icon-background{background-repeat:no-repeat;background-position:50%;-webkit-background-size:contain;background-size:contain}.flag-icon{position:relative;display:inline-block;width:1.33333333em;line-height:1em;background-repeat:no-repeat;background-position:50%;-webkit-background-size:contain;background-size:contain}.flag-icon:before{content:"\00a0"}.dropdown-menu .flag-icon{margin-right:5px}.flag-icon-ad{background-image:url(/assets/libs/flags/ad.svg)}.flag-icon-ae{background-image:url(/assets/libs/flags/ae.svg)}.flag-icon-af{background-image:url(/assets/libs/flags/af.svg)}.flag-icon-ag{background-image:url(/assets/libs/flags/ag.svg)}.flag-icon-ai{background-image:url(/assets/libs/flags/ai.svg)}.flag-icon-al{background-image:url(/assets/libs/flags/al.svg)}.flag-icon-am{background-image:url(/assets/libs/flags/am.svg)}.flag-icon-ao{background-image:url(/assets/libs/flags/ao.svg)}.flag-icon-aq{background-image:url(/assets/libs/flags/aq.svg)}.flag-icon-ar{background-image:url(/assets/libs/flags/ar.svg)}.flag-icon-as{background-image:url(/assets/libs/flags/as.svg)}.flag-icon-at{background-image:url(/assets/libs/flags/at.svg)}.flag-icon-au{background-image:url(/assets/libs/flags/au.svg)}.flag-icon-aw{background-image:url(/assets/libs/flags/aw.svg)}.flag-icon-ax{background-image:url(/assets/libs/flags/ax.svg)}.flag-icon-az{background-image:url(/assets/libs/flags/az.svg)}.flag-icon-ba{background-image:url(/assets/libs/flags/ba.svg)}.flag-icon-bb{background-image:url(/assets/libs/flags/bb.svg)}.flag-icon-bd{background-image:url(/assets/libs/flags/bd.svg)}.flag-icon-be{background-image:url(/assets/libs/flags/be.svg)}.flag-icon-bf{background-image:url(/assets/libs/flags/bf.svg)}.flag-icon-bg{background-image:url(/assets/libs/flags/bg.svg)}.flag-icon-bh{background-image:url(/assets/libs/flags/bh.svg)}.flag-icon-bi{background-image:url(/assets/libs/flags/bi.svg)}.flag-icon-bj{background-image:url(/assets/libs/flags/bj.svg)}.flag-icon-bl{background-image:url(/assets/libs/flags/bl.svg)}.flag-icon-bm{background-image:url(/assets/libs/flags/bm.svg)}.flag-icon-bn{background-image:url(/assets/libs/flags/bn.svg)}.flag-icon-bo{background-image:url(/assets/libs/flags/bo.svg)}.flag-icon-bq{background-image:url(/assets/libs/flags/bq.svg)}.flag-icon-br{background-image:url(/assets/libs/flags/br.svg)}.flag-icon-bs{background-image:url(/assets/libs/flags/bs.svg)}.flag-icon-bt{background-image:url(/assets/libs/flags/bt.svg)}.flag-icon-bv{background-image:url(/assets/libs/flags/bv.svg)}.flag-icon-bw{background-image:url(/assets/libs/flags/bw.svg)}.flag-icon-by{background-image:url(/assets/libs/flags/by.svg)}.flag-icon-bz{background-image:url(/assets/libs/flags/bz.svg)}.flag-icon-ca{background-image:url(/assets/libs/flags/ca.svg)}.flag-icon-cc{background-image:url(/assets/libs/flags/cc.svg)}.flag-icon-cd{background-image:url(/assets/libs/flags/cd.svg)}.flag-icon-cf{background-image:url(/assets/libs/flags/cf.svg)}.flag-icon-cg{background-image:url(/assets/libs/flags/cg.svg)}.flag-icon-ch{background-image:url(/assets/libs/flags/ch.svg)}.flag-icon-ci{background-image:url(/assets/libs/flags/ci.svg)}.flag-icon-ck{background-image:url(/assets/libs/flags/ck.svg)}.flag-icon-cl{background-image:url(/assets/libs/flags/cl.svg)}.flag-icon-cm{background-image:url(/assets/libs/flags/cm.svg)}.flag-icon-cn{background-image:url(/assets/libs/flags/cn.svg)}.flag-icon-co{background-image:url(/assets/libs/flags/co.svg)}.flag-icon-cr{background-image:url(/assets/libs/flags/cr.svg)}.flag-icon-cu{background-image:url(/assets/libs/flags/cu.svg)}.flag-icon-cv{background-image:url(/assets/libs/flags/cv.svg)}.flag-icon-cw{background-image:url(/assets/libs/flags/cw.svg)}.flag-icon-cx{background-image:url(/assets/libs/flags/cx.svg)}.flag-icon-cy{background-image:url(/assets/libs/flags/cy.svg)}.flag-icon-cz{background-image:url(/assets/libs/flags/cz.svg)}.flag-icon-de{background-image:url(/assets/libs/flags/de.svg)}.flag-icon-dj{background-image:url(/assets/libs/flags/dj.svg)}.flag-icon-dk{background-image:url(/assets/libs/flags/dk.svg)}.flag-icon-dm{background-image:url(/assets/libs/flags/dm.svg)}.flag-icon-do{background-image:url(/assets/libs/flags/do.svg)}.flag-icon-dz{background-image:url(/assets/libs/flags/dz.svg)}.flag-icon-ec{background-image:url(/assets/libs/flags/ec.svg)}.flag-icon-ee{background-image:url(/assets/libs/flags/ee.svg)}.flag-icon-eg{background-image:url(/assets/libs/flags/eg.svg)}.flag-icon-eh{background-image:url(/assets/libs/flags/eh.svg)}.flag-icon-er{background-image:url(/assets/libs/flags/er.svg)}.flag-icon-es{background-image:url(/assets/libs/flags/es.svg)}.flag-icon-et{background-image:url(/assets/libs/flags/et.svg)}.flag-icon-fi{background-image:url(/assets/libs/flags/fi.svg)}.flag-icon-fj{background-image:url(/assets/libs/flags/fj.svg)}.flag-icon-fk{background-image:url(/assets/libs/flags/fk.svg)}.flag-icon-fm{background-image:url(/assets/libs/flags/fm.svg)}.flag-icon-fo{background-image:url(/assets/libs/flags/fo.svg)}.flag-icon-fr{background-image:url(/assets/libs/flags/fr.svg)}.flag-icon-ga{background-image:url(/assets/libs/flags/ga.svg)}.flag-icon-gb{background-image:url(/assets/libs/flags/gb.svg)}.flag-icon-gd{background-image:url(/assets/libs/flags/gd.svg)}.flag-icon-ge{background-image:url(/assets/libs/flags/ge.svg)}.flag-icon-gf{background-image:url(/assets/libs/flags/gf.svg)}.flag-icon-gg{background-image:url(/assets/libs/flags/gg.svg)}.flag-icon-gh{background-image:url(/assets/libs/flags/gh.svg)}.flag-icon-gi{background-image:url(/assets/libs/flags/gi.svg)}.flag-icon-gl{background-image:url(/assets/libs/flags/gl.svg)}.flag-icon-gm{background-image:url(/assets/libs/flags/gm.svg)}.flag-icon-gn{background-image:url(/assets/libs/flags/gn.svg)}.flag-icon-gp{background-image:url(/assets/libs/flags/gp.svg)}.flag-icon-gq{background-image:url(/assets/libs/flags/gq.svg)}.flag-icon-gr{background-image:url(/assets/libs/flags/gr.svg)}.flag-icon-gs{background-image:url(/assets/libs/flags/gs.svg)}.flag-icon-gt{background-image:url(/assets/libs/flags/gt.svg)}.flag-icon-gu{background-image:url(/assets/libs/flags/gu.svg)}.flag-icon-gw{background-image:url(/assets/libs/flags/gw.svg)}.flag-icon-gy{background-image:url(/assets/libs/flags/gy.svg)}.flag-icon-hk{background-image:url(/assets/libs/flags/hk.svg)}.flag-icon-hm{background-image:url(/assets/libs/flags/hm.svg)}.flag-icon-hn{background-image:url(/assets/libs/flags/hn.svg)}.flag-icon-hr{background-image:url(/assets/libs/flags/hr.svg)}.flag-icon-ht{background-image:url(/assets/libs/flags/ht.svg)}.flag-icon-hu{background-image:url(/assets/libs/flags/hu.svg)}.flag-icon-id{background-image:url(/assets/libs/flags/id.svg)}.flag-icon-ie{background-image:url(/assets/libs/flags/ie.svg)}.flag-icon-il{background-image:url(/assets/libs/flags/il.svg)}.flag-icon-im{background-image:url(/assets/libs/flags/im.svg)}.flag-icon-in{background-image:url(/assets/libs/flags/in.svg)}.flag-icon-io{background-image:url(/assets/libs/flags/io.svg)}.flag-icon-iq{background-image:url(/assets/libs/flags/iq.svg)}.flag-icon-ir{background-image:url(/assets/libs/flags/ir.svg)}.flag-icon-is{background-image:url(/assets/libs/flags/is.svg)}.flag-icon-it{background-image:url(/assets/libs/flags/it.svg)}.flag-icon-je{background-image:url(/assets/libs/flags/je.svg)}.flag-icon-jm{background-image:url(/assets/libs/flags/jm.svg)}.flag-icon-jo{background-image:url(/assets/libs/flags/jo.svg)}.flag-icon-jp{background-image:url(/assets/libs/flags/jp.svg)}.flag-icon-ke{background-image:url(/assets/libs/flags/ke.svg)}.flag-icon-kg{background-image:url(/assets/libs/flags/kg.svg)}.flag-icon-kh{background-image:url(/assets/libs/flags/kh.svg)}.flag-icon-ki{background-image:url(/assets/libs/flags/ki.svg)}.flag-icon-km{background-image:url(/assets/libs/flags/km.svg)}.flag-icon-kn{background-image:url(/assets/libs/flags/kn.svg)}.flag-icon-kp{background-image:url(/assets/libs/flags/kp.svg)}.flag-icon-kr{background-image:url(/assets/libs/flags/kr.svg)}.flag-icon-kw{background-image:url(/assets/libs/flags/kw.svg)}.flag-icon-ky{background-image:url(/assets/libs/flags/ky.svg)}.flag-icon-kz{background-image:url(/assets/libs/flags/kz.svg)}.flag-icon-la{background-image:url(/assets/libs/flags/la.svg)}.flag-icon-lb{background-image:url(/assets/libs/flags/lb.svg)}.flag-icon-lc{background-image:url(/assets/libs/flags/lc.svg)}.flag-icon-li{background-image:url(/assets/libs/flags/li.svg)}.flag-icon-lk{background-image:url(/assets/libs/flags/lk.svg)}.flag-icon-lr{background-image:url(/assets/libs/flags/lr.svg)}.flag-icon-ls{background-image:url(/assets/libs/flags/ls.svg)}.flag-icon-lt{background-image:url(/assets/libs/flags/lt.svg)}.flag-icon-lu{background-image:url(/assets/libs/flags/lu.svg)}.flag-icon-lv{background-image:url(/assets/libs/flags/lv.svg)}.flag-icon-ly{background-image:url(/assets/libs/flags/ly.svg)}.flag-icon-ma{background-image:url(/assets/libs/flags/ma.svg)}.flag-icon-mc{background-image:url(/assets/libs/flags/mc.svg)}.flag-icon-md{background-image:url(/assets/libs/flags/md.svg)}.flag-icon-me{background-image:url(/assets/libs/flags/me.svg)}.flag-icon-mf{background-image:url(/assets/libs/flags/mf.svg)}.flag-icon-mg{background-image:url(/assets/libs/flags/mg.svg)}.flag-icon-mh{background-image:url(/assets/libs/flags/mh.svg)}.flag-icon-mk{background-image:url(/assets/libs/flags/mk.svg)}.flag-icon-ml{background-image:url(/assets/libs/flags/ml.svg)}.flag-icon-mm{background-image:url(/assets/libs/flags/mm.svg)}.flag-icon-mn{background-image:url(/assets/libs/flags/mn.svg)}.flag-icon-mo{background-image:url(/assets/libs/flags/mo.svg)}.flag-icon-mp{background-image:url(/assets/libs/flags/mp.svg)}.flag-icon-mq{background-image:url(/assets/libs/flags/mq.svg)}.flag-icon-mr{background-image:url(/assets/libs/flags/mr.svg)}.flag-icon-ms{background-image:url(/assets/libs/flags/ms.svg)}.flag-icon-mt{background-image:url(/assets/libs/flags/mt.svg)}.flag-icon-mu{background-image:url(/assets/libs/flags/mu.svg)}.flag-icon-mv{background-image:url(/assets/libs/flags/mv.svg)}.flag-icon-mw{background-image:url(/assets/libs/flags/mw.svg)}.flag-icon-mx{background-image:url(/assets/libs/flags/mx.svg)}.flag-icon-my{background-image:url(/assets/libs/flags/my.svg)}.flag-icon-mz{background-image:url(/assets/libs/flags/mz.svg)}.flag-icon-na{background-image:url(/assets/libs/flags/na.svg)}.flag-icon-nc{background-image:url(/assets/libs/flags/nc.svg)}.flag-icon-ne{background-image:url(/assets/libs/flags/ne.svg)}.flag-icon-nf{background-image:url(/assets/libs/flags/nf.svg)}.flag-icon-ng{background-image:url(/assets/libs/flags/ng.svg)}.flag-icon-ni{background-image:url(/assets/libs/flags/ni.svg)}.flag-icon-nl{background-image:url(/assets/libs/flags/nl.svg)}.flag-icon-no{background-image:url(/assets/libs/flags/no.svg)}.flag-icon-np{background-image:url(/assets/libs/flags/np.svg)}.flag-icon-nr{background-image:url(/assets/libs/flags/nr.svg)}.flag-icon-nu{background-image:url(/assets/libs/flags/nu.svg)}.flag-icon-nz{background-image:url(/assets/libs/flags/nz.svg)}.flag-icon-om{background-image:url(/assets/libs/flags/om.svg)}.flag-icon-pa{background-image:url(/assets/libs/flags/pa.svg)}.flag-icon-pe{background-image:url(/assets/libs/flags/pe.svg)}.flag-icon-pf{background-image:url(/assets/libs/flags/pf.svg)}.flag-icon-pg{background-image:url(/assets/libs/flags/pg.svg)}.flag-icon-ph{background-image:url(/assets/libs/flags/ph.svg)}.flag-icon-pk{background-image:url(/assets/libs/flags/pk.svg)}.flag-icon-pl{background-image:url(/assets/libs/flags/pl.svg)}.flag-icon-pm{background-image:url(/assets/libs/flags/pm.svg)}.flag-icon-pn{background-image:url(/assets/libs/flags/pn.svg)}.flag-icon-pr{background-image:url(/assets/libs/flags/pr.svg)}.flag-icon-ps{background-image:url(/assets/libs/flags/ps.svg)}.flag-icon-pt{background-image:url(/assets/libs/flags/pt.svg)}.flag-icon-pw{background-image:url(/assets/libs/flags/pw.svg)}.flag-icon-py{background-image:url(/assets/libs/flags/py.svg)}.flag-icon-qa{background-image:url(/assets/libs/flags/qa.svg)}.flag-icon-re{background-image:url(/assets/libs/flags/re.svg)}.flag-icon-ro{background-image:url(/assets/libs/flags/ro.svg)}.flag-icon-rs{background-image:url(/assets/libs/flags/rs.svg)}.flag-icon-ru{background-image:url(/assets/libs/flags/ru.svg)}.flag-icon-rw{background-image:url(/assets/libs/flags/rw.svg)}.flag-icon-sa{background-image:url(/assets/libs/flags/sa.svg)}.flag-icon-sb{background-image:url(/assets/libs/flags/sb.svg)}.flag-icon-sc{background-image:url(/assets/libs/flags/sc.svg)}.flag-icon-sd{background-image:url(/assets/libs/flags/sd.svg)}.flag-icon-se{background-image:url(/assets/libs/flags/se.svg)}.flag-icon-sg{background-image:url(/assets/libs/flags/sg.svg)}.flag-icon-sh{background-image:url(/assets/libs/flags/sh.svg)}.flag-icon-si{background-image:url(/assets/libs/flags/si.svg)}.flag-icon-sj{background-image:url(/assets/libs/flags/sj.svg)}.flag-icon-sk{background-image:url(/assets/libs/flags/sk.svg)}.flag-icon-sl{background-image:url(/assets/libs/flags/sl.svg)}.flag-icon-sm{background-image:url(/assets/libs/flags/sm.svg)}.flag-icon-sn{background-image:url(/assets/libs/flags/sn.svg)}.flag-icon-so{background-image:url(/assets/libs/flags/so.svg)}.flag-icon-sr{background-image:url(/assets/libs/flags/sr.svg)}.flag-icon-ss{background-image:url(/assets/libs/flags/ss.svg)}.flag-icon-st{background-image:url(/assets/libs/flags/st.svg)}.flag-icon-sv{background-image:url(/assets/libs/flags/sv.svg)}.flag-icon-sx{background-image:url(/assets/libs/flags/sx.svg)}.flag-icon-sy{background-image:url(/assets/libs/flags/sy.svg)}.flag-icon-sz{background-image:url(/assets/libs/flags/sz.svg)}.flag-icon-tc{background-image:url(/assets/libs/flags/tc.svg)}.flag-icon-td{background-image:url(/assets/libs/flags/td.svg)}.flag-icon-tf{background-image:url(/assets/libs/flags/tf.svg)}.flag-icon-tg{background-image:url(/assets/libs/flags/tg.svg)}.flag-icon-th{background-image:url(/assets/libs/flags/th.svg)}.flag-icon-tj{background-image:url(/assets/libs/flags/tj.svg)}.flag-icon-tk{background-image:url(/assets/libs/flags/tk.svg)}.flag-icon-tl{background-image:url(/assets/libs/flags/tl.svg)}.flag-icon-tm{background-image:url(/assets/libs/flags/tm.svg)}.flag-icon-tn{background-image:url(/assets/libs/flags/tn.svg)}.flag-icon-to{background-image:url(/assets/libs/flags/to.svg)}.flag-icon-tr{background-image:url(/assets/libs/flags/tr.svg)}.flag-icon-tt{background-image:url(/assets/libs/flags/tt.svg)}.flag-icon-tv{background-image:url(/assets/libs/flags/tv.svg)}.flag-icon-tw{background-image:url(/assets/libs/flags/tw.svg)}.flag-icon-tz{background-image:url(/assets/libs/flags/tz.svg)}.flag-icon-ua{background-image:url(/assets/libs/flags/ua.svg)}.flag-icon-ug{background-image:url(/assets/libs/flags/ug.svg)}.flag-icon-um{background-image:url(/assets/libs/flags/um.svg)}.flag-icon-us{background-image:url(/assets/libs/flags/us.svg)}.flag-icon-uy{background-image:url(/assets/libs/flags/uy.svg)}.flag-icon-uz{background-image:url(/assets/libs/flags/uz.svg)}.flag-icon-va{background-image:url(/assets/libs/flags/va.svg)}.flag-icon-vc{background-image:url(/assets/libs/flags/vc.svg)}.flag-icon-ve{background-image:url(/assets/libs/flags/ve.svg)}.flag-icon-vg{background-image:url(/assets/libs/flags/vg.svg)}.flag-icon-vi{background-image:url(/assets/libs/flags/vi.svg)}.flag-icon-vn{background-image:url(/assets/libs/flags/vn.svg)}.flag-icon-vu{background-image:url(/assets/libs/flags/vu.svg)}.flag-icon-wf{background-image:url(/assets/libs/flags/wf.svg)}.flag-icon-ws{background-image:url(/assets/libs/flags/ws.svg)}.flag-icon-ye{background-image:url(/assets/libs/flags/ye.svg)}.flag-icon-yt{background-image:url(/assets/libs/flags/yt.svg)}.flag-icon-za{background-image:url(/assets/libs/flags/za.svg)}.flag-icon-zm{background-image:url(/assets/libs/flags/zm.svg)}.flag-icon-zw{background-image:url(/assets/libs/flags/zw.svg)}
/* ===== css/ui-scale.css ===== */
/* ui-scale.css
---------------------------------------------------------
? GLOBAL UI SCALE (Base 1920px)
Goal:
- 1920px par jo design hai wohi EXACT rahe
- 1920px se upar (2K/4K/8K) par page proportionally zoom ho
- Existing 2560/3840/7680 media queries ki �manual scaling� ko freeze/override kare
--------------------------------------------------------- */
:root {
--ui-base: 1921px;
--ui-scale: 1;
--ui-scale-max: 5;
}
/* 1921px+ par scale compute */
@media (min-width: 1921px) {
html[data-ui-scale="on"] {
--ui-scale: clamp(1,
calc(100vw / var(--ui-base)),
var(--ui-scale-max));
}
}
@media (min-width: 1920px) {
html[data-ui-scale="on"] #cardsContainer {
gap: 20px !important;
}
}
/* Stage scaling (Firefox fallback) */
html[data-ui-scale="on"] .ui-scale-stage {
transform: scale(var(--ui-scale));
transform-origin: top left;
width: calc(100% / var(--ui-scale));
}
/* Chrome/Edge best: zoom */
@supports (zoom: 1) {
html[data-ui-scale="on"] .ui-scale-stage {
zoom: var(--ui-scale);
transform: none !important;
width: 100% !important;
}
}
/* ---------------------------------------------------------
? FREEZE: 1920 design ko lock kar do for 1921px+
(taake tumhari 2560/3840/7680 wali manual-resize CSS apply na ho)
Ye values tumhare 1920�2559 block ke mutabiq hain.
--------------------------------------------------------- */
@media (min-width: 1920px) {
.ui-scale-stage #standardNavHeader {
margin-bottom: 0 !important;
}
.ui-scale-stage #topHeader {
padding-left: 0 !important;
padding-right: 0 !important;
}
.ui-scale-stage .header-wrapper {
max-width: calc(1560px + 2rem) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ui-scale-stage #logo img {
height: 3rem !important;
}
.ui-scale-stage #announce img {
height: 2.4rem !important;
margin-left: 0 !important;
}
.ui-scale-stage #headerNavLinks ul {
font-size: 1.3rem !important;
gap: 2rem !important;
}
.ui-scale-stage #headerNavLinks ul li {
gap: 10px !important;
}
.ui-scale-stage #headerNavLinks ul li svg {
height: 24px !important;
width: auto !important;
}
.ui-scale-stage #headerNavLinks ul li span {
font-size: 20px !important;
}
}
/* Optional: scaling band karni ho */
:root[data-ui-scale="off"] {
--ui-scale: 1 !important;
}
@media (min-width: 1920px) {
.ui-scale-stage #standardNavHeader {
margin-bottom: 0 !important;
}
.ui-scale-stage #topHeader {
padding-left: 0 !important;
padding-right: 0 !important;
}
.ui-scale-stage .header-wrapper {
max-width: calc(1560px + 2rem) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ui-scale-stage #logo img {
height: 3rem !important;
}
.ui-scale-stage #announce img {
height: 2.4rem !important;
margin-left: 0 !important;
}
.ui-scale-stage #headerNavLinks ul {
font-size: 1.3rem !important;
gap: 2rem !important;
}
.ui-scale-stage #headerNavLinks ul li {
gap: 10px !important;
}
.ui-scale-stage #headerNavLinks ul li svg {
height: 24px !important;
width: auto !important;
}
.ui-scale-stage #headerNavLinks ul li span {
font-size: 20px !important;
}
}
/* Optional: scaling band karni ho */
:root[data-ui-scale="off"] {
--ui-scale: 1 !important;
}
@media (min-width: 1920px) {
html[data-ui-scale="on"] #lc-filter-overlay,
html[data-ui-scale="on"] #lc-save-search {
display: none !important;
}
html[data-ui-scale="on"] #lc-save-search-desktop {
display: flex !important;
}
html[data-ui-scale="on"] #searchInput {
width: 620px !important;
height: 50px !important;
font-size: 1.4rem !important;
}
html[data-ui-scale="on"] #filterButton {
height: 50px !important;
gap: 8px !important;
padding: 0 20px !important;
}
html[data-ui-scale="on"] #filterButton span {
font-size: 1.2rem !important;
margin-bottom: 0 !important;
}
html[data-ui-scale="on"] #filterButton svg {
width: 30px !important;
height: 30px !important;
}
html[data-ui-scale="on"] .card-inner {
scale: 1 !important;
}
html[data-ui-scale="on"] #contentArea {
padding: 120px 0 !important;
margin: auto !important;
max-width: calc(1560px + 5rem) !important;
}
html[data-ui-scale="on"] #cardsContainer {
gap: 20px !important;
}
html[data-ui-scale="on"] .mc-title {
font-size: 24px !important;
}
html[data-ui-scale="on"] .mc-desc {
font-size: 18px !important;
}
html[data-ui-scale="on"] .mc-loc-data {
flex-direction: row-reverse !important;
justify-content: flex-end !important;
gap: 5% !important;
}
html[data-ui-scale="on"] .mc-book,
html[data-ui-scale="on"] .mc-price {
font-size: 18px !important;
}
html[data-ui-scale="on"] .secondary-cards:not(.top-secondary-cards) {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
html[data-ui-scale="on"] .sc-title {
font-size: 19px !important;
}
html[data-ui-scale="on"] .footer-logo p {
font-size: 18px !important;
}
html[data-ui-scale="on"] .footer-center nav a {
font-size: 17px !important;
margin: 0 12px !important;
}
html[data-ui-scale="on"] .footer-bottom {
font-size: 15px !important;
}
html[data-ui-scale="on"] .apps img {
height: 48px !important;
}
html[data-ui-scale="on"] .custom-select {
width: 200px !important;
}
html[data-ui-scale="on"] #fc-loc-data {
font-size: 18px !important;
}
html[data-ui-scale="on"] .chips>.chip,
html[data-ui-scale="on"] .rc-col,
html[data-ui-scale="on"] .rc-row {
font-size: 14px !important;
}
}
/* Optional: OFF switch */
html[data-ui-scale="off"] {
--ui-scale: 1 !important;
}
html[data-ui-scale="off"] .ui-scale-stage {
transform: none !important;
zoom: 1 !important;
width: 100% !important;
}
/* ===== css/base.css ===== */
@keyframes spin {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}
@keyframes flip-show {
0%,
25% {
transform: translateY(50px)
}
33%,
58% {
transform: translateY(0)
}
66%,
91% {
transform: translateY(-50px)
}
to {
transform: translateY(50px)
}
}
@keyframes slide-up {
0% {
transform: translateY(40%);
opacity: 0
}
to {
transform: translateY(0);
opacity: 1
}
}
@keyframes slide-left {
0% {
transform: translateX(100%)
}
70% {
transform: translateX(0)
}
}
@keyframes slide-right {
0% {
transform: translateX(0)
}
to {
transform: translateX(100%)
}
}
@keyframes fade-in {
0% {
opacity: 0
}
}
* {
font-family: nunito, sans-serif !important;
box-sizing: border-box
}
#navBoxesContainer {
min-height: 150px
}
.main-card,
.secondary-card {
content-visibility: auto;
contain-intrinsic-size: 320px 620px;
}
.secondary-card {
contain-intrinsic-size: 300px 260px;
}
.ending-line {
display: none;
border-bottom: 1px solid var(--gray-bg);
width: 100%;
margin-bottom: 50px
}
body,
html {
margin-top: -1px !important;
background-color: var(--background-color)
}
a {
text-decoration: none;
color: #fff
}
li,
menu,
ol,
ul {
list-style: none
}
.slide-right {
animation: slide-right .5s ease
}
.slide-left {
animation: slide-left .5s ease-out
}
.white-text {
color: #fff
}
.darken-content {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 20;
background-color: var(--semi-transparent-black)
}
.hidden {
display: none !important
}
.screenreader-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0
}
.all-rounded {
border-radius: .5rem;
padding: 0;
text-align: center
}
#ad-timer {
position: fixed;
top: 16px;
right: 16px;
background: transparent;
border: 3px solid var(--yellow);
color: var(--yellow);
font-weight: 700;
padding: 8px 12px;
border-radius: 20px;
font-family: Arial, sans-serif;
font-size: 14px;
z-index: 1000;
backdrop-filter: blur(4px);
box-shadow: 0 2px 4px #313131
}
#premium-ad-view {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1100
}
#premium-container {
width: 100%;
background-position: 50%;
background-size: cover;
height: 100vh;
position: relative
}
#bottom-progress-bar {
width: 100%;
position: absolute;
background-color: #f6bb26;
bottom: 0;
height: 8px;
left: 0;
z-index: 10
}
@media (max-width:769px) {
#ad-timer {
font-size: 12px;
padding: 6px 10px;
top: 15px;
right: 15px
}
}
#infoPageView {
display: none;
position: relative;
width: 100%;
min-height: 100vh;
background: #f4f7f6;
z-index: 50;
overflow: visible;
overflow-anchor: none
}
body.info-page-active #infoPageView {
display: block !important
}
body.info-page-active #contentArea,
body.info-page-active #listing-detail-view,
body.info-page-active #standardNavText,
body.info-page-active #standardNavSearchContainer,
body.info-page-active #searchBtnContainer,
body.info-page-active .boxes-carousel,
body.info-page-active #standardNavBar .bg-shapes,
body.info-page-active #standardNavBar > :not(#standardNavHeader) {
display: none !important
}
body.info-page-active #standardNavBar {
min-height: 0 !important;
height: auto !important;
padding-bottom: 0 !important;
overflow: visible !important
}
body.info-page-active header {
margin-bottom: 0 !important
}
body.info-page-active #infoPageView {
margin-top: 0 !important
}
#infoPageView .info-page-shell {
width: 100%;
min-height: 100vh;
overflow: visible
}
#infoPageView .info-page-landing {
max-width: none;
margin: 0;
padding: 0;
background: #f4f7f6
}
#infoPageView .info-page-landing > [data-info-inline-root],
#infoPageView .info-page-landing > #page {
display: block !important;
width: 100%;
max-width: none;
min-height: 100vh;
opacity: 1 !important;
visibility: visible !important;
transform: none !important
}
#infoPageView .info-page-document {
--info-teal: #00897b;
--info-teal-dark: #005a4a;
--info-teal-soft: #dff4f1;
--info-yellow: #f6bb26;
--info-text: #17213b;
--info-muted: #5f6f8c;
--info-border: rgba(0, 131, 116, .16);
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
padding: 34px 0 56px;
box-sizing: border-box;
color: var(--info-text);
font-family: Outfit, Poppins, Arial, sans-serif
}
#infoPageView .info-page-document *,
#infoPageView .info-page-document *::before,
#infoPageView .info-page-document *::after {
box-sizing: border-box
}
#infoPageView .info-page-document > style,
#infoPageView .info-page-document > link,
#infoPageView .info-page-document #progress-bar,
#infoPageView .info-page-document #cg,
#infoPageView .info-page-document #btt,
#infoPageView .info-page-document #cookie-banner {
display: none !important
}
#infoPageView .info-page-document > * {
max-width: 100%
}
#infoPageView .info-page-document a {
color: var(--info-teal);
font-weight: 700;
text-decoration: none
}
#infoPageView .info-page-document .tc-hero,
#infoPageView .info-page-document .careers-hero,
#infoPageView .info-page-document .hero {
position: relative;
overflow: hidden;
padding: 44px 28px;
text-align: center;
color: #fff;
border-radius: 18px 18px 0 0;
background: linear-gradient(135deg, var(--info-teal-dark), var(--info-teal))
}
#infoPageView .info-page-document .tc-hero h1,
#infoPageView .info-page-document .careers-hero h1,
#infoPageView .info-page-document .hero h1 {
margin: 10px 0;
color: #fff;
font-size: clamp(30px, 4vw, 56px);
line-height: 1.1
}
#infoPageView .info-page-document .tc-hero p,
#infoPageView .info-page-document .careers-hero p,
#infoPageView .info-page-document .hero p {
max-width: 760px;
margin: 12px auto 0;
color: rgba(255, 255, 255, .78)
}
#infoPageView .info-page-document .tc-kicker,
#infoPageView .info-page-document .eyebrow,
#infoPageView .info-page-document .hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, .78);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase
}
#infoPageView .info-page-document .tc-body,
#infoPageView .info-page-document .page-body {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 22px;
width: 100%;
max-width: 100%;
padding-top: 28px
}
#infoPageView .info-page-document .toc {
display: none
}
#infoPageView .info-page-document .tc-content,
#infoPageView .info-page-document .careers-main,
#infoPageView .info-page-document .page-content,
#infoPageView .info-page-document .content,
#infoPageView .info-page-document .tc-sections,
#infoPageView .info-page-document .sections {
display: grid;
gap: 18px;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto
}
#infoPageView .info-page-document .tc-sec,
#infoPageView .info-page-document .section,
#infoPageView .info-page-document .value-card,
#infoPageView .info-page-document .dept-card,
#infoPageView .info-page-document .open-app-card,
#infoPageView .info-page-document .culture-card,
#infoPageView .info-page-document .contact-card {
overflow: hidden;
background: #fff;
border: 1px solid var(--info-border);
border-radius: 14px;
box-shadow: 0 10px 26px rgba(0, 0, 0, .05)
}
#infoPageView .info-page-document .tc-hero,
#infoPageView .info-page-document .careers-hero,
#infoPageView .info-page-document .hero {
border: 0;
box-shadow: none;
background: linear-gradient(135deg, var(--info-teal-dark), var(--info-teal))
}
#infoPageView .info-page-document .tc-sec-head,
#infoPageView .info-page-document .section-head {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 24px;
color: #fff;
background: linear-gradient(135deg, var(--info-teal-dark), var(--info-teal))
}
#infoPageView .info-page-document .tc-sec-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 12px;
background: rgba(255, 255, 255, .12)
}
#infoPageView .info-page-document .tc-sec-icon svg {
width: 21px;
height: 21px;
stroke: #fff;
fill: none
}
#infoPageView .info-page-document .tc-sec-num {
margin-bottom: 4px;
color: rgba(255, 255, 255, .58);
font-size: 12px;
font-weight: 700;
letter-spacing: .04em
}
#infoPageView .info-page-document .tc-sec-head h2,
#infoPageView .info-page-document .sec-title,
#infoPageView .info-page-document h2 {
margin: 0;
color: inherit;
font-size: clamp(22px, 2.6vw, 32px);
line-height: 1.2
}
#infoPageView .info-page-document .tc-sec-body,
#infoPageView .info-page-document .prose,
#infoPageView .info-page-document .section-body {
padding: 24px;
color: var(--info-muted);
font-size: 16px;
line-height: 1.75
}
#infoPageView .info-page-document p,
#infoPageView .info-page-document li {
color: var(--info-muted);
font-size: 16px;
line-height: 1.75
}
#infoPageView .info-page-document ul,
#infoPageView .info-page-document ol {
padding-left: 24px;
margin: 14px 0
}
#infoPageView .info-page-document h3,
#infoPageView .info-page-document h4 {
margin: 18px 0 8px;
color: var(--info-text)
}
#infoPageView .info-page-document .highlight-box,
#infoPageView .info-page-document .note,
#infoPageView .info-page-document .info-box {
padding: 16px 18px;
color: var(--info-teal-dark);
background: var(--info-teal-soft);
border-left: 4px solid var(--info-teal);
border-radius: 10px
}
#infoPageView .info-page-document .btn,
#infoPageView .info-page-document button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 0;
border-radius: 999px;
padding: 11px 20px;
background: var(--info-teal);
color: #fff;
font-weight: 700;
text-decoration: none
}
#infoPageView .info-page-document table {
width: 100%;
margin: 16px 0;
border-collapse: collapse;
border-radius: 10px;
overflow: hidden
}
#infoPageView .info-page-document th,
#infoPageView .info-page-document td {
padding: 12px;
border: 1px solid var(--info-border);
text-align: left
}
@media (max-width: 768px) {
#infoPageView .info-page-document {
width: min(100% - 20px, 1180px);
padding: 22px 0 42px
}
#infoPageView .info-page-document .tc-hero,
#infoPageView .info-page-document .careers-hero,
#infoPageView .info-page-document .hero {
padding: 34px 18px
}
#infoPageView .info-page-document .tc-sec-head,
#infoPageView .info-page-document .section-head {
padding: 18px
}
#infoPageView .info-page-document .tc-sec-body,
#infoPageView .info-page-document .prose,
#infoPageView .info-page-document .section-body {
padding: 18px
}
}
#infoPageView .info-page-error {
padding: 80px 20px;
text-align: center;
color: #313131
}
#infoPageView .info-page-error h1 {
margin: 0 0 12px;
font-size: 28px;
color: #111
}
#infoPageView .info-page-error p {
margin: 0;
color: #5f6c7b
}
#infoPageView #page {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important
}
#infoPageView .rev {
opacity: 1 !important;
visibility: visible !important;
transform: none !important
}
html.maintenance-active,
body.maintenance-active {
margin: 0;
min-height: 100%;
overflow: hidden;
background: #ededed;
font-family: Nunito, Arial, sans-serif;
}
.maintenance-page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 28px 16px;
box-sizing: border-box;
background:
radial-gradient(circle at 18% 16%, rgba(0, 131, 116, .12), transparent 28%),
radial-gradient(circle at 84% 78%, rgba(246, 187, 38, .17), transparent 26%),
#ededed;
color: #17213b;
}
.maintenance-card {
width: min(680px, 100%);
text-align: center;
background: #fff;
border: 1px solid rgba(0, 131, 116, .16);
border-radius: 22px;
padding: 42px 30px;
box-shadow: 0 24px 70px rgba(49, 49, 49, .14);
}
.maintenance-visual {
width: 76px;
height: 76px;
margin: 0 auto 18px;
border-radius: 24px;
display: grid;
place-items: center;
color: #f6bb26;
background: linear-gradient(135deg, #005a4a, #008374);
box-shadow: 0 16px 36px rgba(0, 131, 116, .25);
}
.maintenance-visual svg {
width: 38px;
height: 38px;
}
.maintenance-kicker {
margin-bottom: 10px;
color: #008374;
font-size: 12px;
font-weight: 900;
letter-spacing: .16em;
text-transform: uppercase;
}
.maintenance-card h1 {
margin: 0;
color: #17213b;
font-size: clamp(30px, 4vw, 46px);
line-height: 1.08;
font-weight: 900;
}
.maintenance-card p {
max-width: 520px;
margin: 16px auto 0;
color: #5f6f8c;
font-size: 16px;
line-height: 1.65;
}
.maintenance-action {
min-height: 46px;
margin-top: 26px;
border: 0;
border-radius: 999px;
padding: 0 24px;
background: #008374;
color: #fff;
font-weight: 900;
cursor: pointer;
}
@media (max-width: 640px) {
.maintenance-card {
padding: 30px 18px;
border-radius: 18px;
}
.maintenance-card h1 {
font-size: 30px;
}
}
/* ===== css/header.css ===== */
/* Header Component Styles */
/* Right-side alignment for navigation and language selector */
.right-side-titlebar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
}
/* Background for the main header navigation container */
#standardNavHeader {
background-color: var(--teal);
}
/* Internal header container with background and padding */
#topHeader {
background-color: var(--secondary-dark);
padding: 0 4rem 0 5rem;
}
/* Layout for the top header and wrapper using flexbox */
#topHeader,
.header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.header-wrapper {
width: 100%;
margin: 0;
padding-top: 3px;
padding-bottom: 3px;
}
/* Logo container styling and positioning */
#headerLogo {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0.5rem 0;
position: relative;
}
#headerLogo a {
display: flex;
gap: 1rem;
}
/* Logo image dimensions */
#logo img {
height: 2.8rem;
padding-left: 2px;
}
/* Announcement logo image dimensions */
#announce img {
height: 1.8rem;
margin-bottom: 6px;
object-fit: contain;
}
/* Navigation list layout and typography */
#headerNavLinks ul {
font-size: 1.25rem;
gap: 1.3rem;
}
#headerNavLinks ul,
#headerNavLinks ul li a {
display: flex;
align-items: center;
justify-content: center;
}
#headerNavLinks ul li a {
gap: 10px;
position: relative;
}
/* Icon and radio button base styles */
#headerNavLinks ul li a img,
#headerNavLinks ul li a svg,
.radio-style {
height: 24px;
color: #ededed;
}
/* Highlighted state for active icons */
#headerNavLinks ul li a svg.highlight,
#headerNavLinks ul li a svg.highlight-icon {
color: var(--yellow);
}
/* Navigation labels with interactive underline effect */
#headerNavLinks ul li a span {
font-size: 1.3rem;
border-bottom: 4px solid transparent;
}
#headerNavLinks ul li a span:hover {
border-bottom: 4px solid #f6bb03;
}
/* Media Queries for Responsive Adjustments */
/* Large desktop adjustments */
@media (min-width: 1441px) and (max-width: 1919px) {
.header-wrapper {
max-width: calc(1440px + 2rem);
margin: auto;
}
}
/* Medium desktop and large tablet adjustments */
@media (min-width: 1221px) and (max-width: 2559px) {
#topHeader {
padding-left: 0;
padding-right: 0;
}
#headerNavLinks ul {
gap: 0.9rem;
}
#headerNavLinks ul li a span {
font-size: 1.2rem;
margin-bottom: -2px;
}
}
@media (min-width: 1221px) and (max-width: 1440px) {
.header-wrapper {
max-width: calc(clamp(175px, 12.153vw, 230px) * 6 + 3rem);
margin: auto;
}
#logo img {
height: 2.2rem;
}
#announce {
margin-left: -8px;
}
#announce img {
height: 1.7rem;
margin-left: 7px;
object-fit: contain;
}
}
/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1220px) {
#topHeader {
padding-left: 3rem;
padding-right: 3rem;
}
#logo img {
height: 2.2rem;
}
#announce img {
height: 1.7rem;
object-fit: contain;
}
#headerNavLinks ul li a img,
#headerNavLinks ul li a svg {
height: 24px;
}
#headerNavLinks ul li a {
flex-direction: column;
gap: 2px;
}
#headerNavLinks ul li a span {
font-size: 1rem;
}
}
/* Small tablet and large phone adjustments */
@media (min-width: 481px) and (max-width: 769px) {
.header-wrapper {
align-items: center;
justify-content: center;
}
#logo img {
height: 2.2rem;
}
#headerLogo {
width: 100%;
margin-left: 0;
justify-content: center;
}
#announce {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: calc(50% + clamp(70px, 18vw, 78px));
top: 50%;
width: clamp(38px, 6vw, 46px);
height: 36px;
margin: 0;
flex: 0 0 auto;
transform: translateY(-50%);
}
#announce img {
width: clamp(34px, 5.4vw, 42px);
height: clamp(29px, 4.6vw, 36px);
object-fit: contain;
margin: 0;
transform: none;
}
#headerNavLinks {
display: none;
}
}
/* Small phone adjustments */
@media (max-width: 480px) {
#topHeader {
padding: 0;
height: 4rem;
}
.header-wrapper {
align-items: center;
justify-content: center;
}
#headerLogo {
gap: 8px;
width: 100%;
margin-left: 0;
justify-content: center;
}
#logo img {
height: 2.1rem;
}
#announce {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: calc(50% + clamp(64px, 18vw, 72px));
top: 50%;
width: clamp(34px, 10vw, 42px);
height: 34px;
margin: 0;
flex: 0 0 auto;
transform: translateY(-50%);
}
#announce img {
width: clamp(30px, 8.8vw, 38px);
height: clamp(26px, 7.6vw, 34px);
object-fit: contain;
margin: 0;
transform: none;
}
#headerNavLinks {
display: none;
}
}
/* Floating Back Button Styles */
#header-back-btn {
display: none;
position: absolute;
left: -34px;
top: 50%;
transform: translateY(-50%);
height: auto;
width: 28px;
padding: 2px;
cursor: pointer;
border-radius: 10px;
transition: background-color 0.3s ease;
}
#header-back-btn.active {
display: block;
}
#header-back-btn:hover {
background-color: rgba(0, 0, 0, 0.2);
}
#logo img {
width: auto !important;
aspect-ratio: 751 / 196;
object-fit: contain;
}
/* Repositioning back button for mobile and shifting logo container */
@media (max-width: 769px) {
#headerLogo {
position: relative;
}
#header-back-btn {
left: 2%;
top: auto;
transform: translateY(0);
}
}
/* ===== css/search.css ===== */
#standardNavText {
gap: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem
}
.banner-title{
font-size: clamp(18px, 3vw, 32px);
font-weight: 500;
line-height: 1.3;
text-align: center;
letter-spacing: -0.5px;
background: linear-gradient(135deg,
#ffffff 0%,
rgba(255, 255, 255, 0.8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: fadeInUp 0.8s ease-out 0.3s both;
position: relative;
padding: 2px 0;
margin-bottom: 20px;
}
.banner-title::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(to right, transparent, white 50%, transparent);
animation: glow 2s ease-in-out infinite;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes glow {
0%,
100% {
opacity: 0.5;
width: 60px;
}
50% {
opacity: 1;
width: 120px;
}
}
#standardNavText h1 {
font-size: 2.6rem;
font-weight: 700;
line-height: 1.3;
margin: 0;
text-align: center;
max-width: 92%
}
#standardNavText a {
gap: 6px
}
#standardNavText a,
#standardNavText a span {
display: flex;
align-items: center;
justify-content: center
}
#standardNavText a span {
font-size: min(3.2vw, 20px)
}
#standardNavText a span svg {
width: 2.5rem
}
#mainSearchContainer,
#standardNavSearchContainer {
display: flex;
align-items: center;
justify-content: center
}
#mainSearchContainer {
z-index: 22;
position: relative;
gap: 0
}
#dropdownButton {
background-color: var(--secondary-dark);
display: inline-flex;
padding: 0 15px;
height: 50px;
line-height: 16px;
gap: 5px;
color: #fff;
border: none;
border-top-left-radius: 999px;
align-items: center;
justify-content: center;
font-size: medium
}
#searchInput {
border-top-right-radius: 26px !important;
border-bottom-right-radius: 26px !important;
transition: none !important;
transition: border-radius .16s ease !important
}
@media (min-width:1920px) and (max-width:2559px) {
:root:not([data-ui-scale="on"]) #standardNavText h1 {
font-size: 2.07vw
}
:root:not([data-ui-scale="on"]) #standardNavText a span {
font-size: 1.4rem
}
:root:not([data-ui-scale="on"]) #dropdownButton {
height: 50px;
gap: 8px;
padding: 0 20px
}
:root:not([data-ui-scale="on"]) #dropdownButton span {
font-size: 1.2rem;
margin-bottom: 0
}
:root:not([data-ui-scale="on"]) #dropdownButton svg {
width: 30px;
height: 30px
}
:root:not([data-ui-scale="on"]) #dropdownButton span {
font-size: 1.4rem
}
}
@media (min-width:1441px) and (max-width:1919px) {
#standardNavText a span {
font-size: 1.3rem
}
}
@media (min-width:1221px) and (max-width:1440px) {
#standardNavText h1 {
font-size: 3vw
}
#standardNavText a span {
font-size: 1.2rem
}
}
@media (min-width:769px) and (max-width:1220px) {
#standardNavText h1 {
font-size: max(3.3vw, 35px)
}
}
@media (min-width:481px) and (max-width:769px) {
#standardNavText {
padding: 25px 0
}
#standardNavText h1 {
font-size: max(4.375vw, 23px);
text-align: center
}
#mainSearchContainer {
width: max(75%, 430px);
margin: 0
}
}
@media (max-width:480px) {
#standardNavText {
padding: 20px 0
}
#standardNavText h1 {
font-size: min(6.07vw, 23px) !important;
text-align: center;
padding: 0
}
#standardNavText a {
gap: 2px
}
#standardNavText a span {
font-size: max(3vw, 11px);
line-height: 5px;
display: flex;
align-items: center;
justify-content: center
}
#standardNavText a span svg {
width: 1.5rem;
margin-top: -2px
}
#standardNavSearchContainer {
padding-bottom: .4rem
}
#mainSearchContainer {
width: 100%;
margin: 0 10px
}
}
#searchSuggestions>div>div>div.content {
width: 100%
}
.msc-ic-search {
position: absolute;
right: 14px;
display: flex;
gap: 6px;
align-items: center
}
.msc-ic-search>img {
height: 24px;
width: auto
}
/* ===== css/menu.css ===== */
.boxes-carousel {
position: relative;
overflow: visible;
max-width: fit-content;
margin: auto
}
.arrow,
.boxes-carousel {
display: flex;
align-items: center;
justify-content: center
}
.arrow {
position: absolute;
width: 36px;
height: 36px;
border: none;
background-color: color-mix(in srgb, var(--secondary-dark) 60%, transparent);
border-radius: 50%;
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 10;
top: 50%;
transform: translateY(-50%);
transition: none
}
.arrow:disabled {
cursor: not-allowed
}
.arrow:hover {
background-color: var(--secondary-dark)
}
.arrow.back,
.arrow.left {
left: -2.5rem
}
.arrow.right {
right: -2.5rem
}
#navBoxesContainer {
display: flex;
gap: 1rem;
z-index: 4;
bottom: 0;
margin-top: 0;
margin-bottom: 0;
background: 0 0;
overflow-y: visible;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
align-items: center
}
.box-card {
background-color: var(--teal-light);
width: min-content;
min-width: 160px;
aspect-ratio: 4/4;
border-radius: 1.1rem;
overflow: hidden;
display: grid;
grid-template-rows: 1fr auto 1fr;
align-items: center;
justify-items: center;
justify-content: center;
row-gap: 5px;
z-index: 5;
position: relative;
padding: 12px;
scroll-snap-align: start
}
.box-card:hover .card-hover-effect {
opacity: 1
}
.card-hover-effect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(250, 235, 215, .07450980392156863);
transition-property: opacity;
transition-duration: .3s;
opacity: 0;
z-index: 7
}
.box-card img {
width: 25%;
height: auto;
z-index: 6;
align-self: end
}
.box-card h2 {
color: #fff;
font-size: 1.1rem;
font-weight: 400;
line-height: 1.75rem;
text-wrap-mode: nowrap;
width: 100%;
overflow: hidden;
text-align: center;
z-index: 6;
position: relative
}
.box-card h2>span {
display: inline-block;
white-space: nowrap
}
.box-card .card-inner {
align-self: start
}
@media (min-width:1920px) and (max-width:2559px) {
.boxes-carousel {
top: 6.4rem;
margin-top: -60px;
margin-bottom: 20px
}
#navBoxesContainer {
max-width: calc(1560px + 5rem)
}
.box-card {
width: clamp(260px, 13.542vw, 330px);
min-width: 260px;
row-gap: clamp(.3rem, .6vw, .5rem);
aspect-ratio: 6/5;
scroll-snap-align: start
}
.box-card h2 {
font-size: 1.3rem
}
.box-card img {
width: 50px
}
.card-inner {
scale: 1
}
}
@media (min-width: 1220px) and (max-width: 1440px) {
.box-card {
flex: 0 0 calc((100% / 5) - 0.8rem);
min-width: calc((220 / 5) - 0.8rem);
aspect-ratio: 1/1;
scroll-snap-align: start;
height: 173px !important;
}
.box-card {
padding: 20px 10px !important;
min-width: clamp(178px, 16.438vw, 218px) !important;
width: clamp(175px, 12.153vw, 230px) !important;
aspect-ratio: 1 / 1 !important;
height: 185px !important;
scroll-snap-align: start !important;
}
}
@media (min-width: 1441px) and (max-width: 1600px) {
#navBoxesContainer{
max-width: calc(1191px + 5rem) !important;
}
.box-card {
flex: 0 0 calc((100% / 5) - 0.8rem);
min-width: calc((220 / 5) - 0.8rem);
aspect-ratio: 1/1;
scroll-snap-align: start;
}
}
/* @media (min-width: 1520px) and (max-width: 1600px) {
#cardsContainer{
max-width: calc(1199px + 5rem) !important;
margin-left: 120px !important;
margin-right: 120px !important;
}
} */
/* @media (min-width: 1490px) and (max-width: 1519px) {
#cardsContainer{
max-width: calc(1199px + 5rem) !important;
margin-left: 110px !important;
margin-right: 110px !important;
}
} */
/* @media (min-width: 1450px) and (max-width: 1489px) {
#cardsContainer{
max-width: calc(1199px + 5rem) !important;
margin-left: 95px !important;
margin-right: 95px !important;
}
} */
@media (min-width: 1440px) and (max-width: 1599px) {
#cardsContainer{
max-width: calc(1199px + 5rem) !important;
margin-left: 87px !important;
margin-right: 87px !important;
}
}
@media (min-width: 1441px) and (max-width: 1600px) {
/* 1. Main wrapper ko relative karein taake arrows iske andar rahein */
.boxes-carousel {
position: relative;
width: 100%;
max-width: 1400px !important; /* Card row ki total width ke mutabiq */
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
overflow: visible; /* Arrows ko bahar dikhane ke liye */
}
/* 2. Arrows ki base settings */
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 110;
}
/* 3. Back/Left Arrow: Pehle card ke sath */
.arrow.back, .arrow.left {
/* Isay container ke bahar thoda sa left dhalel dein */
left: -40px;
}
/* 4. Right Arrow: Aakhri card ke bilkul sath (Jaisa 2nd image mein hai) */
.arrow.right {
/* Isay container ke bahar thoda sa right dhakel dein */
right: -40px;
}
/* Container alignment setup */
#navBoxesContainer {
width: 100%;
display: flex;
gap: 1rem;
justify-content: center; /* Taake cards centered rahein */
overflow: visible;
}
/* Card size adjustment */
.box-card {
flex: 0 0 220px; /* Cards ki width ko fix rakhein */
aspect-ratio: 1/1;
}
}
@media (min-width: 1221px) and (max-width: 1600px) {
.boxes-carousel {
margin-top: -40px;
margin-bottom: 10px;
top: 5rem;
width: 100%;
max-width: 100%;
overflow: visible;
}
#navBoxesContainer {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 1rem;
margin: 0 auto;
/*max-width: 97% !important; */
justify-content: flex-start;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
/* #cardsContainer {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
margin: 0 auto !important;
gap: 20px !important;
width: 100% !important;
align-items: flex-start !important;
}*/
#navBoxesContainer::-webkit-scrollbar {
display: none;
}
.box-card {
flex: 0 0 calc((100% / 5) - 0.8rem);
min-width: calc((220 / 5) - 0.8rem);
aspect-ratio: 1/1;
scroll-snap-align: start;
}
.box-card {
padding: 20px 10px !important;
min-width: clamp(178px, 16.438vw, 218px) !important;
width: clamp(175px, 12.153vw, 230px) !important;
aspect-ratio: 1 / 1 !important;
height: 192px !important;
scroll-snap-align: start !important;
}
.arrow.back {
left: 17%;
top: 50%;
transform: translateY(-50%);
position: absolute;
z-index: 101;
}
.arrow {
z-index: 100;
position: absolute;
}
.arrow.right {
right: 1%;
}
.arrow.left {
left: 1%;
}
.box-card h2 {
font-size: 1.1rem;
}
.box-card img {
width: 30%;
}
}
@media (min-width:1441px) and (max-width:1919px) {
.boxes-carousel {
top: 5.6rem;
margin-top: -60px;
margin-bottom: 10px
}
#navBoxesContainer {
max-width: calc(1440px + 5rem)
}
.box-card {
aspect-ratio: 6/5;
min-width: 240px;
width: clamp(240px, 15.65vw, 300px);
scroll-snap-align: start
}
.box-card h2 {
margin-bottom: 0;
font-size: 1.4rem
}
}
@media (min-width:1221px) and (max-width:1440px) {
.boxes-carousel {
margin-top: -40px;
margin-bottom: 10px;
top: 5rem;
}
#navBoxesContainer {
margin-top: 0;
margin-bottom: 0;
max-width: calc(100vw - 6rem);
overflow-x: auto
}
.box-card {
padding: 15px;
min-width: clamp(178px, 16.438vw, 218px);
width: clamp(175px, 12.153vw, 230px);
aspect-ratio: 1/1;
scroll-snap-align: start
}
.box-card h2 {
font-size: 1.2rem
}
.box-card img {
width: 30%
}
.card-inner {
padding: 0
}
}
/* ✅ 1441–1599: Boxes same as 1440 (width + height lock) */
@media (min-width:1441px) and (max-width:1600px) {
.boxes-carousel{
margin-top: -40px !important;
margin-bottom: 10px !important;
top: 5rem !important;
}
#navBoxesContainer {
margin-top: 0 !important;
margin-bottom: 0 !important;
max-width: 100% !important;
overflow-x: auto !important;
}
.box-card{
padding: 20px 10px!important;
min-width: clamp(178px, 16.438vw, 218px) !important;
width: clamp(175px, 12.153vw, 230px) !important;
aspect-ratio: 1/1 !important;
/* ✅ ye height 1440 wali feel match karti hai */
height: 185px !important;
scroll-snap-align: start !important;
}
.box-card h2{
font-size: 1.2rem !important;
}
.box-card img{
width: 30% !important;
}
.card-inner{
padding: 0 !important;
}
}
@media (min-width:769px) and (max-width:1220px) {
.boxes-carousel {
top: 110px;
margin-top: -100px;
margin-bottom: 80px
}
}
@media (min-width:900px) and (max-width:1220px) {
#navBoxesContainer {
gap: .5rem;
padding-bottom: 2.2rem;
margin-top: 2.2rem;
max-width: calc(760px + 2.1rem)
}
.box-card {
max-width: 152px;
width: 152px;
min-width: 152px;
aspect-ratio: 1/1;
z-index: 5;
position: relative;
row-gap: 2px;
scroll-snap-align: start;
padding: 5px
}
.box-card h2 {
font-size: 1.1rem;
margin-bottom: 0
}
.box-card img {
width: 30%
}
.card-inner {
padding: 0 6px;
scale: .85
}
}
@media (min-width:769px) and (max-width:899px) {
#navBoxesContainer {
gap: .5rem;
padding-bottom: 2.2rem;
margin-top: 2.2rem;
max-width: calc(608px + 1.6rem)
}
.box-card {
max-width: 152px;
width: 152px;
min-width: 152px;
aspect-ratio: 1/1;
z-index: 5;
position: relative;
row-gap: 1px;
scroll-snap-align: start;
padding: 5px
}
.box-card h2 {
font-size: 1.1rem;
margin-bottom: 0
}
.box-card img {
width: 30%
}
.card-inner {
padding: 0 6px;
scale: .85
}
}
@media (min-width:481px) and (max-width:769px) {
.boxes-carousel {
top: 105px;
margin-top: -110px;
margin-bottom: 80px;
zoom: .85
}
#navBoxesContainer {
gap: 10px;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
max-width: 500px
}
}
@media (max-width:480px) {
.boxes-carousel {
top: 50px;
margin-top: -70px;
margin-bottom: calc(clamp(70px, 25vw, 100px)*0.7)
}
.arrow.back,
.arrow.left {
left: -1.75rem
}
.arrow.right {
right: -1.75rem
}
.arrow {
width: 24px;
height: 24px
}
.arrow>svg {
width: 14px;
height: auto
}
#navBoxesContainer {
gap: .5rem;
max-width: calc(clamp(75px, 25vw, 999px)*3 + 1rem);
margin: auto;
min-height: 102px
}
.box-card {
width: 100%;
aspect-ratio: 1/1;
z-index: 5;
position: relative;
min-width: 140px;
padding: 4px;
row-gap: 4px;
scroll-snap-align: start;
grid-template-rows: minmax(24px, auto) auto;
align-content: center;
justify-content: center
}
.box-card h2 {
font-size: 15px;
margin-bottom: 0
}
.box-card img {
width: 30%;
align-self: center;
justify-self: center
}
.card-inner {
display: none
}
}
@media (max-width:300px) {
.boxes-carousel {
zoom: .9
}
}
@media (max-width:250px) {
.boxes-carousel {
zoom: .8
}
}
/* ==========================================================
✅ UI-SCALE MODE (1920+): Freeze MENU/CAROUSEL rules
- When html has data-ui-scale="on", we do NOT want
2560/3840/7680 manual resize rules to kick in.
- Instead, keep the 1920-2559 look and let ui-scale.css
handle the zoom.
========================================================== */
@media (min-width:1921px){
html[data-ui-scale="on"] .boxes-carousel{
top: 6.4rem !important;
margin-top: -60px !important;
margin-bottom: 20px !important;
}
html[data-ui-scale="on"] #navBoxesContainer{
max-width: calc(1560px + 5rem) !important;
gap: 1rem !important;
justify-content: center !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html[data-ui-scale="on"] .box-card{
width: clamp(260px, 13.542vw, 330px) !important;
min-width: 260px !important;
row-gap: clamp(.3rem, .6vw, .5rem) !important;
aspect-ratio: 6/5 !important;
scroll-snap-align: start !important;
}
html[data-ui-scale="on"] .box-card h2{
font-size: 1.3rem !important;
margin-bottom: 0 !important;
}
html[data-ui-scale="on"] .box-card img{
/* vw double-scale fix: viewport sizing cancel using --ui-scale */
width: calc(3.1vw / var(--ui-scale)) !important;
}
html[data-ui-scale="on"] .card-inner{
scale: 1 !important;
margin-top: 0 !important;
}
html[data-ui-scale="on"] .arrow{
width: 36px !important;
height: 36px !important;
font-size: 18px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
html[data-ui-scale="on"] .arrow>svg{
width: 24px !important;
height: auto !important;
}
}
@media (min-width: 7680px) {
body .box-card > img {
width: 50% !important;
}
}
/* ===== css/styles.css ===== */
#home-screen {
overflow-y: auto;
}
@media (max-width: 769px) {
html,
body {
height: auto !important;
min-height: 100%;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
.ui-scale-stage,
#app,
#home-screen {
height: auto !important;
min-height: 100dvh;
overflow: visible !important;
touch-action: pan-y;
}
}
.secondary-cards {
display: flex;
flex-direction: column;
gap: 8px;
}
.bg-shapes {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.shape {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: float 20s infinite;
}
.shape1 {
width: 300px;
height: 300px;
bottom: 15%;
left: -9%;
animation-delay: 0s;
}
/* .shape2 {} */
.shape3 {
width: 300px;
height: 300px;
top: 10%;
right: -9%;
animation-delay: 0s;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-30px) rotate(180deg);
}
}
.box-card::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
top: -10px;
right: -10px;
animation: pulse 8s ease-in-out infinite;
}
.box-card::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
bottom: -10px;
left: -10px;
animation: pulse 6s ease-in-out infinite reverse;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
/*/* Preloader */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #265f5c 0%, #332f2f 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
transition:
opacity 0.5s ease,
visibility 0.5s ease;
}
#preloader.fade-out {
opacity: 0;
visibility: hidden;
}
.loader-container {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 3vw, 30px);
}
.loader-text {
color: white;
font-size: clamp(14px, 1vw, 0.7vw);
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
animation: textFade 1.5s ease-in-out infinite;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
}
.loader-square {
width: clamp(50px, 6vw, 2vw);
height: clamp(50px, 6vw, 2vw);
display: flex;
align-items: center;
justify-content: center;
border: 4px solid rgba(255, 255, 255, 0.2);
border-radius: clamp(12px, 0.8vw, 0.45vw);
animation: squareSpin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.loader-square img {
width: 80%;
height: 80%;
object-fit: cover;
background: transparent;
}
@keyframes textFade {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
@keyframes squareSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#preloader {
position: fixed;
inset: 0;
background: rad;
z-index: 99998;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
pointer-events: auto;
}
#premium-ad-view {
position: fixed;
inset: 0;
background: #313131;
z-index: 999999;
/* Always above preloader - shown when ad is ready */
transition: opacity 0.5s ease;
display: none;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
#preloader.fade-out {
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}
.main-cards {
min-height: 400px;
}
#cardsContainer {
min-height: 500px;
}
.listings-layout {
min-height: 620px;
}
@media (max-width: 769px) {
#cardsContainer {
min-height: 1450px;
}
.listing-wrapper,
.listings-layout {
min-height: 1120px;
}
}
#categoriesDropdown {
z-index: 22;
}
#phoneNavBar {
position: fixed;
bottom: -1px;
left: 0;
width: 100vw;
height: 3.4rem;
background-color: var(--secondary-dark);
color: #fff;
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
transition: none;
padding-top: 3px;
border-top: 2px solid hsla(0, 0%, 100%, 0.1);
}
#phoneNavBar ul {
display: flex;
align-items: center;
width: 100%;
justify-content: space-around;
}
#phoneNavBar ul li {
width: 100%;
}
#phoneNavBar ul li a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.svg-container {
width: max-content;
position: relative;
}
#phoneNavBar ul li a .navicon-badge {
position: absolute;
}
#phoneNavBar ul li a img,
#phoneNavBar ul li a svg {
height: 20px;
margin: 4px 0;
color: #f2f2f2;
}
#phoneNavBar ul li a svg.highlight {
color: var(--yellow);
}
#phoneNavBar ul li a span {
font-size: small;
}
#categoryBack,
#filterButton {
background-color: var(--secondary-dark);
display: inline-flex;
padding: 0 15px;
height: 50px;
line-height: 16px;
gap: 5px;
color: #fff;
}
#categoryBack {
border: none;
align-items: center;
justify-content: center;
font-size: medium;
cursor: pointer;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
display: none;
position: absolute;
left: -32px;
transition: none !important;
}
#phoneNavBar ul li a:hover span {
border-bottom: 4px solid #f6bb03;
}
#phoneNavBar ul li a span {
border-bottom: 4px solid transparent;
}
#phoneNavBar ul li a span.navActive {
border-bottom: 4px solid #f6bb03;
}
.brl20 {
border-bottom-left-radius: 999px;
}
.brr20 {
border-bottom-right-radius: 999px;
border-top-right-radius: 999px;
}
#searchInput {
height: 50px;
font-size: 1.125rem;
line-height: 1.75rem;
padding: 0 10px;
border: none;
outline: 0;
width: 700px;
color: var(--secondary-dark);
}
#filterButton {
border: none;
border-top-right-radius: 20px;
align-items: center;
justify-content: center;
font-size: medium;
}
#categoriesDropdown {
position: absolute;
left: 0;
box-shadow: -1px -1px 20px rgba(0, 0, 0, 0.23921568627450981);
border-radius: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
width: 100%;
margin-top: -2px;
top: 100%;
height: fit-content;
z-index: 8;
background-color: var(--teal);
border: 4px solid var(--secondary-dark);
animation: none;
transition: none;
}
#categoriesDropdown ul {
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
padding: 28px;
font-size: 0.875rem;
line-height: 1.25rem;
transition: none;
}
#categoriesDropdown ul,
#filterSidebar {
display: flex;
align-items: center;
justify-content: center;
}
#filterSidebar {
z-index: 22;
}
#mainFilterSidebar {
position: fixed;
inset: 0;
z-index: 10;
}
#sidebarOverlay {
position: fixed;
inset: 0;
width: 100vw;
background-color: var(--semi-transparent-black);
animation: fade-in 0.3s;
}
#sidebarSection {
position: fixed;
top: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
z-index: 10001;
background-color: #ededed;
transform: translateX(-100%);
transition: transform 0.4s ease-out;
padding-left: 0;
margin: 0;
/* --- Ye rahi woh logic --- */
/* Clamp syntax: clamp(MIN, PREFERRED, MAX) */
/* Iska matlab: Kam se kam 300px, wese 80% screen, magar 500px se zyada nahi */
width: clamp(300px, 80vw, 500px) !important;
}
/* Choti mobile screens (iPhone SE wagera) par full width ke liye sirf ek query kaafi hai */
@media (max-width: 480px) {
#sidebarSection {
width: 100% !important;
max-width: calc(-3rem + 100vw);
max-width: 100% !important;
}
#sidebarBody {
max-width: calc(-3rem + 100vw) !important;
zoom: 0.8 !important;
margin-inline: auto;
}
.qfc-location-box {
max-width: 80% !important;
width: 80% !important;
}
}
@media (max-width: 1220px) {
#sidebarBody {
padding: 15px;
overflow-y: auto;
max-height: calc(100vh - 80px);
/* Header nikaal kar baaki scrollable area */
/* Center karne ke liye niche wali lines aham hain */
display: flex;
flex-direction: column;
align-items: center;
/* Horizontal centering */
justify-content: flex-start;
/* Content ko top se shuru karega */
width: 100%;
box-sizing: border-box;
}
#sidebarBody .qfc-filters-wrapper {
margin-top: 1rem;
}
.qfc-filters {
margin-bottom: 10px;
}
}
.box-card {
gap: 0.5rem;
}
#sidebarContent>div {
height: 100%;
display: flex;
flex-direction: column;
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
background-color: #ededed;
}
#sidebarHeader,
.radio-option {
display: flex;
align-items: center;
}
#sidebarHeader {
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #ccc;
background-color: #313131;
}
#sidebarHeader h2 {
color: #fff;
font-size: 1.25rem;
line-height: 1.75rem;
}
#sidebarHeader button {
background: 0 0;
border: none;
color: #fff;
cursor: pointer;
}
#sidebarHeader button svg {
width: 1.5rem;
height: 1.5rem;
color: #fff;
}
.qfc-loc-input {
max-width: 500px;
height: auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 300px;
}
.radio-option {
justify-content: space-between;
flex-direction: row-reverse;
gap: 2rem;
font-size: 1rem;
line-height: 1.5rem;
color: #000;
}
.range-suffix,
.section-title-flex {
align-items: center;
display: flex;
}
.radio-style {
width: 1.25rem;
margin: 0.75rem 1rem;
}
#sidebarContent label {
padding: 0.5rem 0;
font-size: 1.125rem;
line-height: 1.75rem;
}
#sidebarContent label[for] {
width: 100%;
}
.radio-option,
.range-group {
width: 88% !important;
margin: auto;
}
.clickable-text {
cursor: pointer;
}
.section-title,
.section-title-flex {
font-size: 1.25rem;
font-weight: 600;
color: #000;
padding: 1.5rem 0;
line-height: 1.75rem;
}
.icon-circle {
width: 1.75rem;
height: 1.75rem;
margin-right: 0.5rem;
border-radius: 50%;
background-color: #ededed;
color: #000;
flex-shrink: 0;
}
.section-divider {
margin: 1rem auto;
max-width: 88%;
border-top: 1px solid var(--text-copyright);
}
.range-group {
display: flex;
gap: 1rem;
justify-content: space-between;
margin: 0 auto;
width: 100%;
color: #000;
}
.range-input-wrapper {
display: flex;
width: 100%;
position: relative;
}
.range-input {
width: 100%;
border: 1px solid #000;
height: 2.75rem;
padding: 0 2.5rem 0 1rem;
border-radius: 0.5rem 0 0 0.5rem;
}
.range-suffix {
border: 1px solid #000;
border-left: none;
background: var(--secondary-dark);
color: var(--text-light);
padding: 0 1rem;
border-radius: 0 0.5rem 0.5rem 0;
}
.sidebar-actions {
justify-content: space-between;
gap: 1rem;
border-top: 1px solid #ccc;
padding: 1rem 0;
margin-top: 1rem;
width: 88%;
margin-left: auto;
margin-right: auto;
}
.ad-card,
.sidebar-actions {
display: flex;
align-items: center;
}
.ad-card {
justify-content: center;
background: #fff;
border: 2px dashed #666;
border-radius: 8px;
color: #555;
font-size: 1rem;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.m-auto {
margin: auto auto 10px;
}
#geoDataDetails {
display: none !important;
align-items: center;
justify-content: center;
flex-wrap: wrap;
background-color: var(--secondary-dark);
padding: 6px 12px;
color: #fff;
gap: 10px;
text-transform: capitalize;
}
html.show-geo-debug #geoDataDetails {
display: flex !important;
}
.gd-row {
display: flex;
gap: 5px;
font-family: Nunito, sans-serif;
}
#bottom-progress-bar {
transition: none !important;
}
#adRedirect {
display: inline-block;
position: relative;
}
#adRedirect:after {
content: none !important;
}
.ad-media-wrapper {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: var(--secondary-dark);
overflow: hidden;
}
#myImage,
#myVideo {
max-width: 100vw;
width: 100vw;
max-height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
#bottom-progress-bar {
background-color: var(--yellow) !important;
}
#gd-lang {
text-transform: none !important;
}
.footer-applications {
color: #8b8b8b !important;
font-weight: 700 !important;
}
#filterButton {
display: none !important;
}
#searchSuggestions {
position: absolute;
z-index: 1000;
background: #fff;
color: #0f172a;
border: 1px solid rgba(2, 6, 23, 0.08);
border-radius: 0 0 12px 12px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
overflow: hidden;
max-height: 420px;
display: none;
transform-origin: top left;
will-change: transform, opacity;
}
#searchSuggestions.animating-open {
display: block;
animation: dropdownIn 0.14s ease-out forwards;
}
#searchSuggestions.animating-close {
animation: dropdownOut 0.12s ease-in forwards;
}
#searchSuggestions.open {
display: block;
opacity: 1;
}
#searchSuggestions .list {
overflow: auto;
max-height: 420px;
scrollbar-width: none;
-ms-overflow-style: none;
}
#searchSuggestions .list::-webkit-scrollbar {
display: none;
}
#searchSuggestions .section {
padding: 8px 14px 6px;
font-size: 0.72rem;
color: #475569;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#searchSuggestions .suggestion-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 14px;
cursor: pointer;
transition:
transform 0.12s ease,
background 0.12s ease;
border-top: 1px solid rgba(2, 6, 23, 0.06);
animation: itemIn 0.16s ease both;
}
#searchSuggestions .suggestion-item:first-of-type {
border-top: none;
}
#searchSuggestions .suggestion-item.active,
#searchSuggestions .suggestion-item:hover {
background: rgba(2, 6, 23, 0.04);
transform: translateX(1px);
}
#searchSuggestions .icon {
display: inline-flex;
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(2, 6, 23, 0.04);
align-items: center;
justify-content: center;
overflow: hidden;
}
#searchSuggestions .icon img {
width: 18px;
height: 18px;
object-fit: contain;
display: block;
}
#searchSuggestions .content {
min-width: 0;
}
#searchSuggestions .title {
font-size: 0.92rem;
line-height: 1.2rem;
color: #0f172a;
}
#searchSuggestions .meta,
#searchSuggestions .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#searchSuggestions .meta {
font-size: 0.78rem;
color: #64748b;
}
#searchSuggestions .pill {
font-size: 0.72rem;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(2, 6, 23, 0.12);
color: #0f172a;
background: #fff;
white-space: nowrap;
margin-left: 8px;
}
#searchSuggestions mark {
background: #fef3c7;
color: inherit;
padding: 0 2px;
border-radius: 3px;
}
#searchSuggestions .suggestion-item[data-skeleton] {
pointer-events: none;
opacity: 0.9;
}
#searchSuggestions .suggestion-item[data-skeleton] .icon {
background: #e5e7eb;
position: relative;
overflow: hidden;
}
#searchSuggestions .suggestion-item[data-skeleton] .icon:after,
#searchSuggestions .suggestion-item[data-skeleton] .meta:after,
#searchSuggestions .suggestion-item[data-skeleton] .pill:after,
#searchSuggestions .suggestion-item[data-skeleton] .title:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0.6) 50%,
hsla(0, 0%, 100%, 0));
background-size: 200% 100%;
animation: jsShimmer 1.1s linear infinite;
border-radius: inherit;
}
#searchSuggestions .suggestion-item[data-skeleton] .meta,
#searchSuggestions .suggestion-item[data-skeleton] .pill,
#searchSuggestions .suggestion-item[data-skeleton] .title {
color: transparent !important;
position: relative;
background: #f1f5f9;
border-radius: 6px;
overflow: hidden;
}
#searchSuggestions .suggestion-item[data-skeleton] .title {
height: 16px;
max-width: 70%;
margin-top: 2px;
}
#searchSuggestions .suggestion-item[data-skeleton] .meta {
height: 12px;
max-width: 45%;
margin-top: 8px;
}
#searchSuggestions .suggestion-item[data-skeleton] .pill {
height: 20px;
width: 64px;
border-color: transparent !important;
}
#searchInput.dd-open {
border-bottom-right-radius: 0 !important;
}
.mc-image {
min-height: 200px;
background: #f5f5f5;
overflow: hidden;
border-top-left-radius: 17px;
border-bottom-left-radius: 17px;
}
.view-small-grid .mc-image {
border-radius: 17px 17px 0 0;
}
.mc-image.loading {
background: #f0f0f0;
}
.loader-spinner {
top: 10px;
left: 10px;
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.card-image-placeholder {
display: block;
width: 100%;
height: 160px;
aspect-ratio: 15 / 8;
object-fit: cover;
background: #f2f2f2;
}
img.loaded-image {
opacity: 1;
transition: opacity 0.2s ease-in;
}
img.lazy {
opacity: 0;
}
.fallback-image {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
color: #666;
background: #fafafa;
}
.listing-control {
display: flex;
flex-direction: column;
gap: 12px;
width: 100% !important;
}
.lc-controls {
background-color: #fff;
padding: 8px 10px;
border-radius: 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
border: 2px solid rgba(0, 0, 0, 0.18);
display: flex;
justify-content: space-between;
}
.lcc-left,
.lcc-right {
display: flex;
gap: 10px;
align-items: center;
}
#lcc-right-more {
display: none;
}
#lc-save-search-desktop,
.filters-toggle-btn {
display: none !important;
}
#lc-filter-overlay,
#lc-save-search {
position: fixed;
bottom: 80px;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
color: #fff;
cursor: pointer;
border: 2px solid var(--yellow);
background-color: var(--secondary-dark);
border-radius: 20px;
padding: 6px 10px;
z-index: 10;
height: 40px;
}
#lc-save-search {
right: 20px;
}
#lc-filter-overlay {
left: 20px;
}
#lc-filter-overlay>svg,
#lc-save-search>svg {
margin-top: -2px;
}
#lc-filter-overlay>span,
#lc-save-search>span {
font-size: 0.95rem;
text-wrap-mode: nowrap;
}
.lcc-left button,
.lcc-right button {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
border: 2px solid var(--secondary-dark);
color: #fff;
background-color: var(--secondary-dark);
border-radius: 20px;
padding: 6px 12px;
transition: scale 0.4s ease;
}
.lcc-left button:hover,
.lcc-right button:hover {
scale: 1.05;
}
.lc-filter-view {
align-items: center;
}
.lc-filter-view,
.lcfv-chips-container {
display: flex;
gap: 10px;
}
.lcfv-chip {
gap: 4px;
color: var(--secondary-dark);
background-color: color-mix(in srgb, var(--secondary-dark) 25%, transparent);
border: 2px solid var(--secondary-dark);
border-radius: 8px;
padding: 4px 10px;
}
.lcfv-chip,
.no-results-message {
display: flex;
align-items: center;
justify-content: center;
}
.no-results-message {
flex-direction: column;
padding: 60px 20px;
font-size: 16px;
color: #666;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 20px;
margin: 20px 0;
text-align: center;
min-height: 200px;
}
.no-results-icon {
width: 60px;
height: 60px;
margin-bottom: 20px;
color: var(--secondary-dark, #333);
opacity: 0.7;
}
.no-results-message p {
margin: 0;
font-weight: 500;
}
.sc-body-container {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 10px;
}
.card-skeleton {
display: flex;
flex-direction: row;
background: #f9f9f9;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
margin: auto;
width: 100%;
}
.sidebar-actions button {
padding: 0.625rem 1.5rem;
border: none;
border-radius: 15px;
font-size: 0.875rem;
cursor: pointer;
}
.sidebar-actions .clear-btn,
.sidebar-actions .search-btn {
background: #313131;
color: #fff;
}
#sidebarBody {
padding: 10px;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
#sidebarBody::-webkit-scrollbar {
display: none;
}
.card-inner>* {
text-align: center;
font-size: small;
}
#searchBtnContainer {
margin-top: 0;
zoom: 1;
}
#searchBtnContainer,
#searchBtnContainer>button {
display: flex;
align-items: center;
justify-content: center;
}
#searchBtnContainer>button {
position: relative;
gap: 6px;
color: #fff;
padding: 0.75rem 1.8rem 0.75rem 1.4rem;
margin-top: 2rem;
border-radius: 9999px;
border: 2px solid #fff;
background-color: #006b60;
}
#searchBtnContainer>button>svg {
width: 1.4rem;
aspect-ratio: 1/1;
}
#searchBtnContainer>button>span {
color: #fff;
font-weight: 700;
font-size: 1.1rem;
}
.anim-flip {
height: 40px;
overflow: hidden;
align-items: center;
justify-content: center;
font-family: sans-serif;
font-size: 18px;
font-weight: 600;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: 2px solid #fff;
}
.anim-flip,
.anim-flip>div {
display: flex;
flex-direction: column;
}
.anim-flip>div {
animation: flip-show 6s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
animation-fill-mode: both;
}
.anim-flip>div>div {
color: #fff;
padding: 8px 16px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
font-weight: 700;
line-height: 20px;
}
#contentArea {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
padding: 100px 5rem;
}
#cardsContainer {
display: flex;
gap: 10px;
justify-content: space-between;
}
.main-cards {
flex-direction: column;
gap: 20px;
}
.main-card,
.main-cards {
display: flex;
width: 100%;
}
.main-card {
gap: 0;
background: #fff;
border: 2px solid #ddd;
border-radius: 18px;
/* overflow: hidden; */
cursor: pointer;
}
.main-card:hover .mc-title {
color: var(--teal);
}
.mc-image {
flex: 1 1;
max-width: 300px;
position: relative;
}
.listing-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.mc-img-loader {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -15px 0 0 -15px;
border: 4px solid #e3e3e3;
border-top: 4px solid var(--yellow);
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 2;
}
.mc-image>img,
.mc-image>.listing-video-media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ad-badges,
.mc-image>img,
.mc-image>.listing-video-media {
position: absolute;
top: 0;
left: 0;
}
.listing-video-media {
position: relative;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: #111;
color: #fff;
cursor: pointer;
overflow: hidden;
}
.listing-card-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #111;
pointer-events: none;
}
.listing-video-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: radial-gradient(circle, rgba(0, 0, 0, .36) 0, rgba(0, 0, 0, .18) 34%, rgba(0, 0, 0, 0) 60%);
transition: opacity .18s ease, transform .18s ease;
pointer-events: none;
}
.listing-video-play svg {
width: 48px;
height: 48px;
padding: 12px;
border-radius: 999px;
background: rgba(0, 0, 0, .56);
box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.listing-video-media.is-playing .listing-video-play {
opacity: 0;
transform: scale(.92);
}
.ad-badges {
margin: 12px;
flex-direction: column;
gap: 5px;
}
.ad-badges,
.ad-badges span {
display: flex;
align-items: center;
justify-content: center;
}
.ad-badges span {
overflow: hidden;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
aspect-ratio: 1/1;
padding: 2px;
border-radius: 999px;
}
.ad-badges img {
width: 65%;
height: auto;
}
.item-like {
position: absolute;
top: 0 !important;
right: 0 !important;
margin: 12px;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
padding: 7px;
border-radius: 999px;
}
.item-like svg {
width: 20px;
height: auto;
transition: stroke 0.2s;
}
.item-like.liked svg {
stroke: var(--yellow);
fill: var(--yellow);
}
.item-like:hover svg {
stroke: var(--yellow);
}
.mc-body {
flex: 1 1 10%;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.mc-main {
padding: 10px 20px;
gap: 4px;
}
.mc-main,
.mc-title-container {
display: flex;
flex-direction: column;
}
.mc-title-container {
width: calc(100% - 16px);
gap: 0;
margin: auto auto 4px;
}
.mc-title {
color: var(--secondary-dark);
font-size: 1.3rem;
}
.c-line {
height: 4px;
background-color: var(--teal);
}
.mc-cat,
.mc-post-date {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 3px;
color: #555;
font-size: 13px;
}
.mc-cat svg,
.mc-post-date svg {
width: 18px;
height: auto;
}
.mc-tags {
flex-wrap: wrap;
gap: 10px;
color: #555;
}
.mc-tag,
.mc-tags {
display: flex;
align-items: center;
}
.mc-tag {
justify-content: center;
gap: 5px;
font-size: 12px;
font-weight: 700;
border: 2px solid var(--secondary-dark);
min-width: 50px;
padding: 4px 8px;
border-radius: 999px;
}
.mc-tag svg {
height: 16px;
width: auto;
}
.mc-loc-data {
display: flex;
flex-direction: column;
gap: 2px;
flex-wrap: wrap;
color: #555;
font-size: 13px;
}
.mc-city {
display: flex;
align-items: center;
gap: 2px;
}
.mc-city svg {
height: 16px;
width: auto;
}
.mc-postal-code {
display: flex;
gap: 2px;
}
.mc-postal-code svg {
height: 16px;
width: auto;
}
.mc-loc-data .mc-city span {
display: block;
}
.mc-price {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.mc-price img {
margin-top: -4px;
}
.mc-bottom {
background-color: var(--secondary-dark);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 10px 20px;
font-size: 18px;
border-bottom-right-radius: 17px;
}
.view-small-grid .mc-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
border-radius: 0 0 17px 17px;
}
.secondary-card .mc-bottom {
justify-content: center !important;
}
.view-grid .mc-bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.view-grid .mc-body {
position: relative;
}
.view-small-grid .mc-body {
position: relative;
}
.view-small-grid .mc-main {
margin-bottom: 3rem;
}
.view-grid .mc-main {
margin-bottom: 3rem;
}
.star-rating {
scale: 1.2;
margin-right: 12px;
}
.star-rating .filled {
color: var(--yellow);
}
.main-card.visited .c-line {
background-color: var(--text-copyright);
}
.main-card.visited .mc-title {
color: var(--dark-gray);
}
.secondary-card {
display: flex;
flex-direction: column;
gap: 0;
background: #fff;
width: 300px;
border: 2px solid #ddd;
border-radius: 22px;
overflow: hidden;
}
.sc-image {
position: relative;
flex: none;
overflow: hidden;
margin: 0 0 8px;
border-radius: 0;
width: 100%;
height: 190px;
}
/*.sc-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover
}*/
/* Badge Circles */
.badge-circle {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
background: #1a1a1a;
border: 2.5px solid #f5c542;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.5),
inset 0 -5px 8px rgba(0, 0, 0, 0.8),
inset 0 3px 5px rgba(255, 255, 255, 0.15);
}
/* Icons ko image ke mutabiq chota aur center karne ke liye */
.badge-circle img {
width: 18px;
height: 18px;
object-fit: contain;
/* Image mein icons thode dull golden hain, agar aap chaho to filter use kar sakte ho */
filter: brightness(0.9) contrast(1.1);
}
/* Hover effect taake user ko pata chale click ho sakta hai */
.badge-circle:hover {
background: #222;
border-color: #ffd700;
transform: scale(1.05);
transition: all 0.2s ease-in-out;
}
.badge-circle img {
width: 16px;
height: auto;
}
/* Heart Icon (Initial) */
.item-like {
position: absolute;
top: 8px;
right: 8px;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.item-like svg {
width: 22px;
height: 22px;
}
/* Heart Icon (When Liked - Becomes Circle with Yellow Color) */
.item-like.liked {
width: 36px;
height: 36px;
background: radial-gradient(circle at center, #111 0%, #000 70%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
/* main ring */
border: 2.5px solid #f6bb26;
/* glowing outer ring */
box-shadow:
0 0 6px rgba(246, 187, 38, 0.8),
0 0 14px rgba(246, 187, 38, 0.6),
0 0 26px rgba(246, 187, 38, 0.35);
}
.item-like.liked svg {
fill: #f6bb26;
/* Yellow heart */
stroke: #f6bb26;
width: 32px;
height: 32px;
}
.sc-body {
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
#filterSidebar.hidden {
display: none !important;
}
#filterSidebar {
display: flex;
/* hidden class hat-te hi flex ho jaye */
position: fixed;
inset: 0;
z-index: 9999;
}
/* Sidebar ka main container jo poori screen par hota hai */
#filterSidebar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
}
/* Sidebar ka wo hissa jo slide hota hai */
#sidebarSection {
position: fixed;
top: 0;
left: 0;
/* Isay 0 karne se white space khatam ho jayegi */
width: 85%;
/* Aap 90% ya 100% bhi kar sakte hain */
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.clickable-text {
color: black !important;
}
/* Sidebar content aur all-wrapper ko full width karein */
#sidebarContent {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Sidebar Body ko scrollable aur full width karein */
#sidebarBody {
flex: 1;
overflow-y: auto;
padding: 15px;
width: 100%;
box-sizing: border-box;
/* Taake padding se width bahar na jaye */
}
/* Jab sidebar khule (Animation ke liye classes) */
.animate-in-left {
transform: translateX(0) !important;
}
/* Animations Definitions */
@keyframes slide-in-from-left {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes slide-out-to-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* Helper Classes */
.slide-in {
animation: slide-in-from-left 0.5s forwards ease-out;
}
.slide-out {
animation: slide-out-to-left 0.4s forwards ease-in;
}
.sc-title {
font-size: 1.25rem;
}
.badge-circle {
position: relative;
display: inline-flex;
/* Icon aur tooltip ki alignment behtar karne ke liye */
align-items: center;
}
#filterSidebar.hidden {
display: none;
}
#sidebarBody {
padding: 15px;
overflow-y: auto;
max-height: calc(100vh - 80px);
/* Header nikaal kar baaki scrollable area */
}
/* Sidebar ke andar filters ko vertical dikhane ke liye */
#sidebarBody .qfc-filters-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Hover aur Touch dono ke liye trigger */
.badge-circle:hover::after,
.badge-circle.active-tooltip::after {
content: attr(data-label);
position: absolute;
/* Position change: Niche ki jagah Right side (Front) par lane ke liye */
top: 50%;
left: 105%;
/* Icon ke khatam hone ke foran baad shuru hoga */
transform: translateY(-50%);
/* Tooltip ko icon ke bilkul center mein rakhne ke liye */
background: var(--secondary-dark);
color: #ffffff;
padding: 4px 10px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
z-index: 999;
/* Smooth appearance */
pointer-events: none;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.sc-price {
font-weight: 700;
font-size: 1.1rem;
background-color: var(--secondary-dark);
width: max-content;
padding: 8px 16px;
color: #fff;
border-radius: 999px;
margin: auto;
}
/* 1. Parent container ki height ko image ke mutabiq adjust karein */
.secondary-card .sc-image {
height: 190px;
/* 250px se kam karke 190px karein (ye 75% ke barabar hai) */
width: 100%;
overflow: hidden;
position: relative;
margin-bottom: 0;
/* Extra gap khatam karne ke liye */
}
.secondary-card .sc-image>a {
display: block;
width: 100%;
height: 100%;
}
/* 2. Image ko ab 100% height dein taake container fill ho jaye */
.sc-img-fixed,
.sc-image .listing-video-media {
width: 100% !important;
height: 100% !important;
aspect-ratio: 3 / 2;
/* Container ki height 190px hai, isliye ise 100% karein */
object-fit: cover;
display: block;
}
#navBoxesContainer .box-card h2 a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 4px 8px;
}
/* 3. Body container ka margin/padding check karein */
.sc-body-container {
padding-top: 5px !important;
/* Isay mazeed kam kar diya */
margin-top: -2px !important;
/* Thoda sa upar lane ke liye negative margin */
}
.sc-title {
margin: 12px 0 5px 0 !important;
line-height: 1.2;
}
.skeleton-img {
width: 300px;
height: 180px;
background: #ddd;
position: relative;
overflow: hidden;
}
.skeleton-content {
flex: 1;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.skeleton-line,
.skeleton-price,
.skeleton-stars,
.skeleton-title {
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
}
.skeleton-title {
width: 60%;
height: 18px;
margin-bottom: 12px;
}
.skeleton-line {
width: 80%;
height: 12px;
margin-bottom: 8px;
}
.skeleton-line.small {
width: 40%;
}
.skeleton-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
}
.skeleton-price {
width: 100px;
height: 16px;
}
.skeleton-stars {
width: 80px;
height: 16px;
}
.ad-300 {
width: 300px;
aspect-ratio: 300/250;
height: auto;
}
.ad-970 {
width: 970px;
aspect-ratio: 970/250;
height: auto;
}
.navicon-badge {
position: absolute;
top: 0;
right: 0;
font-size: 12px;
background-color: red;
width: 13px;
height: 13px;
border-radius: 99px;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
content: "1";
}
.filter-controls {
width: 100%;
background-color: #fff;
min-height: 20px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.26666666666666666);
display: flex;
align-items: center;
padding: 14px 16px;
border-radius: 10px;
}
.fc-location-box {
flex: 1 1;
height: 100%;
min-width: 360px;
}
.fc-loc-input,
.fc-location-box {
position: relative;
}
.fc-loc-drop,
.fc-loc-icon {
position: absolute;
top: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
aspect-ratio: 1/1;
}
.fc-loc-drop svg,
.fc-loc-icon svg {
height: 80%;
width: auto;
}
.fc-loc-drop {
right: 4px;
transition: all 0.3s ease;
color: #6f6f6f;
}
.fc-loc-input {
max-width: 500px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.fc-loc-input:focus-within .fc-loc-drop,
.fc-loc-input:focus-within .fc-loc-icon {
color: var(--secondary-dark);
}
.fc-loc-input:focus-within .fc-loc-drop {
transform: rotate(180deg) translateY(2px);
}
.fc-loc-dropdown {
overflow: hidden;
position: absolute;
width: 100%;
max-width: 500px;
min-height: 0;
margin-top: 2px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.26666666666666666);
background-color: #f9f9f9;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 16px 16px;
z-index: 100;
transition: none;
}
.chips {
width: 100%;
padding: 6px;
display: flex;
gap: 3px;
font-size: 12px;
color: #fff;
}
.chips>.chip {
background-color: var(--secondary-dark);
padding: 6px 6px 6px 10px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.radius-choice {
display: flex;
flex-direction: column;
padding: 6px;
gap: 6px;
}
.rc-row {
align-items: center;
justify-content: space-between;
}
.rc-col,
.rc-row {
display: flex;
font-size: small;
}
.rc-col {
flex-direction: column;
gap: 4px;
}
input[type="range"] {
font-size: 1.5rem;
color: var(--secondary-dark);
--thumb-height: 0.75em;
--track-height: 0.25em;
--track-color: rgba(0, 0, 0, 0.2);
--brightness-hover: 180%;
--brightness-down: 80%;
--clip-edges: 0.125em;
position: relative;
background: 0 0;
overflow: hidden;
}
input[type="range"]:active {
cursor: grabbing;
}
input[type="range"]:disabled {
filter: grayscale(1);
opacity: 0.3;
cursor: not-allowed;
}
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
transition: all 0.1s ease;
height: var(--thumb-height);
}
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
position: relative;
}
input[type="range"]::-webkit-slider-thumb {
--thumb-radius: calc(var(--thumb-height) * 0.5 - 1px);
--clip-top: calc(var(--thumb-height) * 0.5 - var(--track-height) * 0.5 - 0.5px);
--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
--clip-further: calc(100% + 1px);
--box-fill: calc(-100vmax - var(--thumb-height)) 0 0 100vmax currentColor;
width: var(--thumb-height);
background: linear-gradient(currentColor 0 0) scroll no-repeat 0/50% calc(var(--track-height) + 1px);
background-color: currentColor;
box-shadow: var(--box-fill);
border-radius: var(--thumb-height);
filter: brightness(100%);
clip-path: polygon(100% -1px,
var(--clip-edges) -1px,
0 var(--clip-top),
-100vmax var(--clip-top),
-100vmax var(--clip-bottom),
0 var(--clip-bottom),
var(--clip-edges) 100%,
var(--clip-further) var(--clip-further));
}
input[type="range"]:hover::-webkit-slider-thumb {
filter: brightness(var(--brightness-hover));
cursor: grab;
}
input[type="range"]:active::-webkit-slider-thumb {
filter: brightness(var(--brightness-down));
cursor: grabbing;
}
input[type="range"]::-webkit-slider-runnable-track {
background: linear-gradient(var(--track-color) 0 0) scroll no-repeat 50%/100% calc(var(--track-height) + 1px);
}
input[type="range"]:disabled::-webkit-slider-thumb {
cursor: not-allowed;
}
input[type="range"],
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-track {
appearance: none;
transition: all 0.1s ease;
height: var(--thumb-height);
}
input[type="range"]::-moz-range-progress,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-track {
background: 0 0;
}
input[type="range"]::-moz-range-thumb {
background: currentColor;
border: 0;
width: var(--thumb-height);
border-radius: var(--thumb-height);
cursor: grab;
}
input[type="range"]:active::-moz-range-thumb {
cursor: grabbing;
}
input[type="range"]::-moz-range-track {
width: 100%;
background: var(--track-color);
}
input[type="range"]::-moz-range-progress {
appearance: none;
background: currentColor;
transition-delay: 30ms;
}
input[type="range"]::-moz-range-progress,
input[type="range"]::-moz-range-track {
height: calc(var(--track-height) + 1px);
border-radius: var(--track-height);
}
input[type="range"]::-moz-range-progress,
input[type="range"]::-moz-range-thumb {
filter: brightness(100%);
}
input[type="range"]:hover::-moz-range-progress,
input[type="range"]:hover::-moz-range-thumb {
filter: brightness(var(--brightness-hover));
}
input[type="range"]:active::-moz-range-progress,
input[type="range"]:active::-moz-range-thumb {
filter: brightness(var(--brightness-down));
}
input[type="range"]:disabled::-moz-range-thumb {
cursor: not-allowed;
}
.fc-loc-controls {
display: flex;
align-items: center;
justify-content: space-between;
}
.fc-loc-controls>button {
font-size: 14px;
padding: 6px 12px;
border-radius: 8px;
}
.fc-loc-reset {
border: 1px solid var(--secondary-dark);
color: var(--secondary-dark);
background-color: transparent;
}
.fc-loc-apply {
border: none;
background-color: var(--secondary-dark);
color: #fff;
}
.range-helpers {
display: flex;
align-items: center;
justify-content: space-between;
}
.range-helpers span {
text-align: center;
width: 50px;
}
.fc-right-controls {
flex: 1 1;
display: flex;
align-items: center;
justify-content: end;
gap: 14px;
align-self: stretch;
}
.fc-sort-opt {
border: 1px solid rgba(0, 0, 0, 0.26666666666666666);
border-radius: 8px;
height: 100%;
width: 230px;
font-size: medium;
color: #444;
outline: 0;
}
.fc-right-controls>button {
border: none;
font-size: medium;
border-radius: 8px;
height: 100%;
background-color: transparent;
display: flex;
align-items: center;
}
.fc-right-controls>button>img,
.fc-right-controls>button>svg {
padding: 5px 0;
height: 100%;
max-height: 36px;
width: auto;
color: #6f6f6f;
}
.fc-right-controls>button>svg:hover {
color: var(--yellow);
}
:root {
--rd-size: 20px;
--rd-border: var(--secondary-dark);
--rd-bg: #fff;
--rd-accent: var(--secondary-dark);
--rd-focus: rgba(0, 200, 200, 0);
--rd-disabled: hsla(0, 0%, 100%, 0.06);
}
.radio-dark-wrap {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
margin-right: 20px;
}
.radio-dark-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio-dark-custom {
width: var(--rd-size);
height: var(--rd-size);
border-radius: 50%;
background: var(--rd-bg);
border: 2px solid var(--rd-border);
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.02);
position: relative;
flex-shrink: 0;
transition:
transform 0.12s ease,
box-shadow 0.12s ease,
border-color 0.12s ease;
}
.radio-dark-custom:after {
content: "";
position: absolute;
inset: 50%;
transform: translate(-50%, -50%) scale(0.001);
width: calc(var(--rd-size) * 0.52);
height: calc(var(--rd-size) * 0.52);
border-radius: 50%;
background: var(--rd-accent);
transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.2, 1);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.radio-dark-input:checked+.radio-dark-custom:after {
transform: translate(-50%, -50%) scale(1);
}
.radio-dark-input:focus-visible+.radio-dark-custom {
box-shadow: 0 0 0 4px var(--rd-focus);
}
.radio-dark-wrap:hover .radio-dark-custom {
transform: translateY(-1px);
}
.radio-dark-input:disabled+.radio-dark-custom {
background: var(--rd-disabled);
border-color: hsla(0, 0%, 100%, 0.04);
opacity: 0.6;
cursor: not-allowed;
}
.radio-dark-input:disabled~.radio-dark-label {
opacity: 0.6;
cursor: not-allowed;
}
.top-secondary-cards {
display: none !important;
}
:root {
--cb-size: var(--rd-size);
--cb-border: var(--rd-border);
--cb-bg: #fff;
--cb-accent: var(--rd-accent);
--cb-focus: var(--rd-focus);
--cb-disabled: var(--rd-disabled);
}
.checkbox-dark-wrap {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
margin-right: 20px;
}
.checkbox-dark-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.checkbox-dark-custom {
width: var(--cb-size);
height: var(--cb-size);
border-radius: 6px;
background: var(--cb-bg);
border: 2px solid var(--secondary-dark);
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.02);
position: relative;
flex-shrink: 0;
transition:
transform 0.12s ease,
box-shadow 0.12s ease,
border-color 0.12s ease;
}
.checkbox-dark-custom:after {
content: "";
position: absolute;
top: 35%;
left: 50%;
width: 45%;
height: 25%;
border-left: 2px solid var(--cb-accent);
border-bottom: 2px solid var(--cb-accent);
border-radius: 6px;
transform: translate(-50%, -50%) rotate(-45deg) scale(0.001);
transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.2, 1);
transform-origin: center;
}
.checkbox-dark-input:checked+.checkbox-dark-custom:after {
transform: translate(-50%, -50%) rotate(-45deg) scale(1.8);
}
.checkbox-dark-input:focus-visible+.checkbox-dark-custom {
box-shadow: 0 0 0 4px var(--cb-focus);
}
.checkbox-dark-wrap:hover .checkbox-dark-custom {
transform: translateY(-1px);
}
.checkbox-dark-input:disabled+.checkbox-dark-custom {
background: var(--cb-disabled);
border-color: hsla(0, 0%, 100%, 0.04);
opacity: 0.6;
cursor: not-allowed;
}
.checkbox-dark-input:disabled~.checkbox-dark-label {
opacity: 0.6;
cursor: not-allowed;
}
@media (max-width: 710px) {
.filter-controls {
flex-direction: column;
gap: 4px;
}
.fc-right-controls {
justify-content: center;
min-height: 36px;
flex-direction: row;
}
.fc-location-box {
width: 100%;
min-width: 245px;
}
.fc-sort-opt {
height: 36px;
width: 100%;
background-color: #f9f9f9;
}
.fc-loc-input {
max-width: 100%;
width: 100%;
}
}
@media (max-width: 800px) {
.main-cards {
align-items: center;
}
.mc-loc-data {
flex-direction: column;
gap: 0;
align-items: flex-start;
}
.mc-image {
position: relative;
width: 100%;
max-width: 100%;
height: 200px;
flex: none;
}
.mc-image>img,
.mc-image>.listing-video-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media (min-width: 1920px) and (max-width: 2559px) {
:root:not([data-ui-scale="on"]) #lc-filter-overlay,
:root:not([data-ui-scale="on"]) #lc-save-search {
display: none;
}
:root:not([data-ui-scale="on"]) #lc-save-search-desktop {
display: flex !important;
}
:root:not([data-ui-scale="on"]) #searchInput {
width: 620px;
font-size: large;
height: 50px;
font-size: 20px;
}
:root:not([data-ui-scale="on"]) #filterButton {
height: 50px;
gap: 8px;
padding: 0 20px;
}
:root:not([data-ui-scale="on"]) #filterButton span {
font-size: 1.2rem;
margin-bottom: 0;
}
:root:not([data-ui-scale="on"]) #filterButton svg {
width: 30px;
height: 30px;
}
:root:not([data-ui-scale="on"]) .card-inner {
scale: 1;
}
:root:not([data-ui-scale="on"]) #contentArea {
padding: 120px 0;
margin: auto;
max-width: calc(1560px + 5rem);
}
:root:not([data-ui-scale="on"]) #cardsContainer {
gap: 20px;
}
:root:not([data-ui-scale="on"]) .mc-title {
font-size: 24px;
}
:root:not([data-ui-scale="on"]) .mc-desc {
font-size: 18px;
}
:root:not([data-ui-scale="on"]) .mc-loc-data {
flex-direction: row-reverse;
justify-content: flex-end;
gap: 5%;
}
:root:not([data-ui-scale="on"]) .mc-book,
:root:not([data-ui-scale="on"]) .mc-price {
font-size: 18px;
}
:root:not([data-ui-scale="on"]) .secondary-cards {
display: flex;
flex-direction: column;
gap: 20px;
}
:root:not([data-ui-scale="on"]) .sc-title {
font-size: 19px;
}
:root:not([data-ui-scale="on"]) .footer-logo p {
font-size: 18px;
}
:root:not([data-ui-scale="on"]) .footer-center nav a {
font-size: 17px;
margin: 0 12px;
}
:root:not([data-ui-scale="on"]) .footer-bottom {
font-size: 15px;
}
:root:not([data-ui-scale="on"]) .apps img {
height: 48px;
}
:root:not([data-ui-scale="on"]) .custom-select {
width: 200px;
}
:root:not([data-ui-scale="on"]) #filterButton span,
:root:not([data-ui-scale="on"]) #searchInput {
font-size: 1.4rem;
}
:root:not([data-ui-scale="on"]) #fc-loc-data {
font-size: 18px;
}
:root:not([data-ui-scale="on"]) .chips>.chip,
:root:not([data-ui-scale="on"]) .rc-col,
:root:not([data-ui-scale="on"]) .rc-row {
font-size: 14px;
}
:root:not([data-ui-scale="on"]) .footer-contact p,
:root:not([data-ui-scale="on"]) .footer-links a,
:root:not([data-ui-scale="on"]) .footer-logo p,
:root:not([data-ui-scale="on"]) .footer-services a {
font-size: clamp(18px, 0.938vw, 20px);
}
:root:not([data-ui-scale="on"]) .footer-contact h4,
:root:not([data-ui-scale="on"]) .footer-links h4,
:root:not([data-ui-scale="on"]) .footer-services h4 {
font-size: clamp(20px, 1.05vw, 22px);
}
:root:not([data-ui-scale="on"]) .mc-cat,
:root:not([data-ui-scale="on"]) .mc-loc-data,
:root:not([data-ui-scale="on"]) .mc-post-date,
:root:not([data-ui-scale="on"]) .mc-tag {
font-size: clamp(14px, 0.729vw, 16px);
}
:root:not([data-ui-scale="on"]) .mc-main {
gap: 4px;
}
}
@media (min-width: 1441px) and (max-width: 1919px) {
#lc-filter-overlay,
#lc-save-search {
display: none;
}
#lc-save-search-desktop {
display: flex !important;
}
#contentArea {
padding: 120px 0;
margin: auto;
max-width: calc(1440px + 5rem);
}
#dropdownButton span,
#filterButton span,
#searchInput {
font-size: 1.3rem;
}
.footer-contact p,
.footer-links a,
.footer-logo p,
.footer-services a {
font-size: clamp(17px, 1.17vw, 18px);
}
.footer-contact h4,
.footer-links h4,
.footer-services h4 {
font-size: clamp(19px, 1.25vw, 21px);
}
.mc-cat,
.mc-loc-data,
.mc-post-date {
font-size: 14px;
}
.mc-loc-data {
flex-direction: row-reverse;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-bottom: -4px;
}
}
@media (max-width: 1600px) and (min-width: 1221px) {
.box-card img {
width: 3rem !important;
height: 3rem;
margin-top: 0.3rem;
object-fit: contain;
}
#lc-filter-overlay,
#lc-save-search {
display: none;
}
#lc-save-search-desktop {
display: flex !important;
}
.anim-flip {
scale: 0.9;
margin-top: -4px;
}
#searchInput {
width: 640px;
height: 50px;
font-size: 1.2rem;
}
#dropdownButton,
#filterButton {
height: 50px;
gap: 6px;
padding: 0 18px;
}
#dropdownButton span,
#filterButton span {
font-size: 1.2rem;
margin-bottom: 3px;
}
#dropdownButton svg,
#filterButton svg {
width: 25px;
height: 25px;
}
#contentArea {
max-width: 1400px;
padding: 100px 0;
margin: auto;
}
.mc-main {
gap: 4px;
}
.mc-image {
max-width: 20vw;
}
.mc-loc-data {
flex-direction: row-reverse;
justify-content: flex-end;
gap: 8px;
}
.mc-loc-data,
.mc-loc-data>span {
align-items: center;
}
.mc-postal-code>svg {
margin-top: -7px;
}
.footer-center nav a {
font-size: 16px;
margin: 0 8px;
}
.footer-bottom {
font-size: 14px;
}
.apps img {
height: 42px;
}
.card-inner {
padding: 0;
}
.secondary-cards {
display: flex;
flex-direction: column;
gap: 8px;
/* ✅ RIGHT column ko left jaisa narrow karo */
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
flex: 0 0 240px !important;
/* ✅ overflow cut (image/card bahar na niklay) */
overflow: hidden;
box-sizing: border-box;
}
/* ✅ Right column ke andar jo bhi card aye (main-card ya secondary-card) usko 100% pe lock karo */
.secondary-cards .main-card,
.secondary-cards .secondary-card {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
/* ✅ Right column ke andar image wrapper ko bhi 100% force karo */
.secondary-cards .mc-image {
max-width: 100% !important;
width: 100% !important;
}
.ad-970 {
width: 100%;
max-width: 970px;
}
.footer-contact p,
.footer-links a,
.footer-logo p,
.footer-services a {
font-size: clamp(16px, 1.3vw, 17px);
}
.footer-contact h4,
.footer-links h4,
.footer-services h4 {
font-size: clamp(18px, 1.43vw, 20px);
}
.mc-tags {
gap: 4px;
}
.mc-tag {
gap: 2px;
font-size: 11px;
}
}
@media (max-width: 1290px) {
.mc-title {
font-size: 1.1rem;
}
.lcc-left,
.lcc-right {
gap: 6px;
}
.qfc-loc-input {
width: 230px;
}
.mc-main {
padding: 10px;
}
}
@media (max-width: 1220px) and (min-width: 850px) {
.listing-wrapper {
max-width: 830px;
margin: auto;
}
}
@media (max-width: 1220px) and (min-width: 769px) {
#searchInput {
width: 450px;
font-size: medium;
height: 50px;
padding-bottom: 2px;
font-size: 18px;
}
#dropdownButton,
#filterButton {
height: 50px;
gap: 8px;
padding: 0 15px;
}
#dropdownButton span,
#filterButton span {
font-size: 1.1rem;
margin-bottom: 2px;
}
#dropdownButton svg,
#filterButton svg {
width: 28px;
height: 28px;
}
.anim-flip>div>div {
font-size: 14px;
}
.filter-controls {
margin: 10px;
width: auto;
}
#contentArea {
padding: 6px;
}
#cardsContainer {
flex-direction: column-reverse;
gap: 16px;
margin-top: 10px;
margin-bottom: 24px;
}
.main-card {
flex-direction: row;
max-width: 850px;
margin: auto;
}
.quick-filters-container {
display: none;
}
.mc-image {
flex: 1 1;
max-width: 285px;
height: auto;
}
.mc-body {
flex: 1 1;
}
.top-secondary-cards {
display: flex !important;
flex-direction: column !important;
}
.top-secondary-cards.grid {
flex-direction: row !important;
}
.secondary-cards {
display: none;
}
.secondary-card {
flex-direction: row;
width: 100%;
height: 250px;
}
.top-secondary-cards.grid .secondary-card,
.top-secondary-cards.grid .main-card {
flex-direction: column;
width: 200px;
height: 100%;
}
.sc-image,
.top-secondary-cards .mc-image {
width: 285px;
height: 100%;
}
.top-secondary-cards.grid .sc-image {
width: 100%;
height: 150px;
}
.sc-body {
width: 100%;
height: 100%;
justify-content: space-between;
}
.sc-title {
margin-top: 5px;
}
.top-secondary-cards.grid .sc-title,
.top-secondary-cards.grid .mc-title {
margin-top: 0;
font-size: 0.95rem;
}
.footer-contact h4,
.footer-links h4,
.footer-services h4 {
font-size: 16px;
}
.footer-center nav a {
font-size: 15px;
margin: 0 6px;
}
.footer-bottom {
font-size: 13px;
}
.ad-970 {
width: 95%;
max-width: 970px;
}
.footer-contact p,
.footer-links a,
.footer-logo p,
.footer-services a {
font-size: clamp(14px, 2vw, 16px);
}
.footer-contact h4,
.footer-links h4,
.footer-services h4 {
font-size: clamp(17px, 2.2vw, 20px);
}
.mc-title {
font-size: 20px;
}
.mc-main {
gap: 3px;
}
.top-secondary-cards.grid .star-rating {
display: none !important;
}
.top-secondary-cards.grid .mc-price {
zoom: 0.75;
}
.top-secondary-cards.grid .sc-body-container {
zoom: 0.9;
}
.top-secondary-cards.grid .mc-tags {
display: none !important;
}
}
@media (max-width: 769px) and (min-width: 481px) {
.top-secondary-cards {
display: flex !important;
flex-direction: row !important;
width: 100%;
align-items: center;
flex-wrap: wrap;
}
.item-like {
zoom: 0.78;
}
.secondary-cards {
display: none;
}
.secondary-card {
flex-direction: column;
width: 49%;
margin: 0;
height: 100%;
}
.sc-image {
width: 100%;
height: 210px;
}
.sc-body {
width: 100%;
height: 100%;
justify-content: space-between;
}
.sc-title {
margin-top: 5px;
}
#searchInput {
font-size: 0.9rem;
width: 100%;
height: 44px;
font-size: 18px;
min-width: 0;
padding: 0 72px 0 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#dropdownButton span,
#filterButton span {
display: none;
}
#searchBtnContainer {
margin-bottom: 0;
}
#phoneNavBar {
display: flex;
border-radius: 18px 18px 0 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.add-icon {
width: 40px;
height: 40px;
margin-top: -25px;
margin-bottom: 5px;
background-color: var(--yellow);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
/* box-shadow: 0 8px 22px rgba(255, 178, 43, 0.45); */
border: 1px solid transparent;
box-shadow: 0 0 0 3px rgba(255, 188, 43, 0.45);
}
#dropdownButton,
#filterButton {
height: 46px;
gap: 20px;
padding: 0 20px;
}
#dropdownButton svg,
#filterButton svg {
width: 26px;
height: 26px;
}
#contentArea {
padding: 6px;
}
#cardsContainer {
flex-direction: column-reverse;
}
.quick-filters-container {
display: none;
}
.main-card {
flex-direction: column;
max-width: 49%;
margin: 0;
}
.mc-title-container {
width: 100%;
margin: 0;
}
.star-rating {
scale: 1;
margin-right: -6px;
}
.listing-wrapper {
align-items: center;
}
.listing-control {
width: 100%;
}
.lc-controls,
.lcc-left,
.lcc-right {
gap: 5px;
}
.main-cards {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
}
.mc-tag {
min-width: 0;
font-size: 10px;
padding: 2px 5px;
}
.mc-tag svg {
height: 13px;
}
.mc-tags {
gap: 4px;
}
.mc-image,
.sc-image {
position: relative;
width: 100%;
max-width: 100%;
min-height: 0;
height: 32vw;
flex: none;
}
.mc-body {
flex: 1 1;
}
footer {
margin-bottom: 50px;
}
.footer-copyright {
font-size: 10px;
}
.footer-center nav a {
font-size: 13px;
}
.footer-bottom {
font-size: 12px;
gap: 12px;
}
.apps img {
height: 32px;
}
.custom-select {
width: 140px;
}
.mc-tag {
min-width: 90px;
}
.mc-title {
font-size: 1rem;
}
.links-footer-bottom svg {
height: 22px;
}
.ad-970 {
width: 95%;
}
.footer-contact p,
.footer-links a,
.footer-logo p,
.footer-services a {
font-size: clamp(12px, 2.5vw, 16px);
}
.footer-contact h4,
.footer-links h4,
.footer-services h4 {
font-size: clamp(15px, 2.7vw, 19px);
}
}
@media (max-width: 480px) {
.qfc-loc-dropdown {
margin-top: 34px;
}
#lcc-right-more {
display: block !important;
}
.filters-toggle-btn,
.filters-toggle-btn>span,
.more-dropdown-wrapper,
.sort-toggle-btn>span {
display: none !important;
}
.main-cards {
flex-direction: column;
}
.main-card,
.secondary-card {
max-width: none !important;
}
.lcc-left,
.lcc-right {
gap: 3px;
}
.listing-wrapper {
padding: 0 5vw;
}
.mc-image,
.sc-image {
min-height: 0;
height: 65vw;
}
.top-secondary-cards {
display: flex !important;
flex-direction: row !important;
width: 100%;
align-items: center;
flex-wrap: wrap;
}
.secondary-cards {
display: none;
}
.secondary-card {
flex-direction: column;
width: 100%;
height: 100%;
}
.sc-body,
.sc-image {
width: 100%;
}
.sc-body {
height: 100%;
justify-content: space-between;
}
.sc-title {
margin-top: 5px;
}
.quick-filters-container {
display: none;
}
#searchInput {
height: 40px;
font-size: 15px;
width: 100%;
min-width: 0;
padding: 0 62px 0 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#dropdownButton span,
#filterButton span {
display: none;
}
#dropdownButton svg,
#filterButton svg {
width: 18px;
}
#dropdownButton {
padding: 0 8px 0 12px;
height: 40px;
}
#dropdownButton svg {
scale: 1.2;
}
#filterButton {
padding: 0 12px 0 8px;
height: 40px;
}
.box-card {
width: clamp(75px, 25vw, 999px);
height: clamp(70px, 25vw, 100px);
min-width: clamp(75px, 25vw, 999px);
min-height: clamp(70px, 25vw, 100px);
aspect-ratio: auto;
animation: slide-up 1s ease-out;
z-index: 5;
position: relative;
scroll-snap-align: start;
padding: 1px 5px;
}
.box-card img {
width: 24px;
}
.card-inner {
display: none;
}
#searchBtnContainer>button>svg {
width: 1.1rem;
aspect-ratio: 1/1;
}
#searchBtnContainer>button>span {
font-weight: 700;
font-size: 1rem;
}
#searchBtnContainer>button {
padding: 0.4rem 1.3rem 0.5rem 1rem;
margin-top: 0.8rem;
margin-bottom: 1.4rem;
scale: 1;
}
#phoneNavBar {
display: flex;
border-radius: 18px 18px 0 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.add-icon {
width: 40px;
height: 40px;
margin-top: -25px;
margin-bottom: 5px;
background-color: var(--yellow);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
/* box-shadow: 0 8px 22px rgba(255, 178, 43, 0.45); */
border: 1px solid transparent;
box-shadow: 0 0 0 3px rgba(255, 188, 43, 0.45);
}
#phoneNavBar ul li a span {
font-size: 10px;
}
#searchBtnContainer {
margin-bottom: 0.9rem;
}
#categoriesDropdown {
margin-top: -2px;
}
#contentArea {
padding: 6px;
}
#cardsContainer {
flex-direction: column-reverse;
}
.item-like {
padding: 8px;
zoom: 0.8;
}
.item-like svg {
width: 24px;
height: auto;
transition: stroke 0.2s;
}
.footer-center nav a {
font-size: 13px;
}
.footer-bottom {
font-size: 12px;
gap: 12px;
}
.apps img {
height: 32px;
}
.custom-select {
width: 140px;
}
.mc-tag {
min-width: 0;
font-size: 10px;
padding: 2px 5px;
}
.mc-tag svg {
height: 13px;
}
.mc-tags {
gap: 4px;
}
footer {
margin-bottom: 50px;
}
#categoriesDropdown {
display: none;
}
#filterButton {
border-bottom-right-radius: 20px;
}
.ad-970 {
width: 95%;
}
.footer-contact p,
.footer-links a,
.footer-logo p,
.footer-services a,
.mc-cat,
.mc-loc-data,
.mc-post-date {
font-size: 12px;
}
.footer-contact h4,
.footer-links h4,
.footer-services h4,
.mc-title {
font-size: clamp(16px, 4.4vw, 18px);
}
.msc-ic-search>img {
height: min(5vw, 22px);
}
}
@media (min-width: 361px) and (max-width: 400px) {
.lc-controls {
zoom: 0.915;
}
}
@media (max-width: 360px) {
.sort-dropdown-wrapper {
display: none !important;
}
.more-dropdown-wrapper {
display: inline-block !important;
}
}
@media (min-width: 411px) and (max-width: 530px) {
.sort-dropdown-wrapper,
.viewmode-toggle-wrapper {
display: inline-block !important;
}
.sort-toggle-btn>span {
display: none !important;
}
.main-cards {
flex-direction: row !important;
flex-wrap: wrap;
}
.main-card {
width: 49% !important;
}
.mc-title {
font-size: 0.818rem;
}
.mc-tag {
min-width: 0;
border-color: transparent;
}
.mc-tag svg {
height: 16px;
}
.mc-bottom {
padding: 8px 12px;
}
.mc-price {
font-size: 13px;
}
.listing-wrapper {
padding: 0 5vw;
}
.listing-control {
margin-bottom: 6px;
}
.mc-image,
.sc-image {
min-height: 0;
height: 30vw;
}
.mc-cat,
.mc-loc-data,
.mc-post-date {
font-size: 12px;
}
.filters-toggle-btn>span,
.mc-postal-code,
.sort-toggle-btn>span,
.tag-text {
display: none;
}
.secondary-cards {
flex-direction: row !important;
gap: 0;
}
.secondary-card {
width: 49%;
}
.listing-wrapper,
.main-cards {
gap: 2px;
padding: 0;
}
}
@media (min-width: 770px) {
#sidebarContent {
max-width: 500px !important;
}
#categoriesDropdown {
display: flex;
}
}
@media (max-width: 769px) {
#categoriesDropdown {
display: none !important;
}
}
@media (max-width: 659px) {
#categoryBack {
display: none !important;
}
}
@keyframes dropdownIn {
0% {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes dropdownOut {
0% {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.98);
}
}
@keyframes itemIn {
0% {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes jsShimmer {
0% {
background-position: -200% 0;
}
to {
background-position: 200% 0;
}
}
@media (min-width: 1221px) {
.filters-toggle-btn {
display: none !important;
}
}
/* ✅ 1221px - 1599px: left filters + right secondary cards narrower */
@media (min-width: 1220px) and (max-width: 1441px) {
#cardsContainer {
max-width: calc(-6rem + 100vw);
width: 100%;
margin: auto;
}
}
@media (min-width: 1221px) and (max-width: 1599px) {
/* Left */
.qfc-location-box,
.qfc-filters {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
}
.qfc-filters {
margin-bottom: 10px;
}
/* Right */
.secondary-cards {
width: 240px !important;
max-width: 240px !important;
}
.loader-square {
width: clamp(6vw, 6vw, 2vw);
height: clamp(6vw, 6vw, 2vw);
border-radius: clamp(12px, 0.8vw, 0.2vw);
}
}
@media (max-width: 480px) {
.card-skeleton,
.main-card {
flex-direction: column;
max-width: 300px;
}
.lcc-left {
width: 90%;
margin-right: 6px;
}
}
@media (max-width: 1220px) {
.quick-filters-container {
display: none !important;
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
to {
background-position: 200% 0;
}
}
@media (max-width: 360px) {
.viewmode-toggle-wrapper {
display: none !important;
}
}
@media (max-width: 305px) {
.mc-bottom {
flex-direction: column;
}
.mc-tags,
.star-rating {
display: none;
}
.mc-bottom {
align-items: flex-start;
}
.mc-price>span {
font-size: 15px;
}
#searchInput {
font-size: 13px;
}
#searchInput::placeholder {
width: calc(100% - 50px);
}
.msc-ic-search>img {
height: 16px;
}
.mc-title,
.sc-title {
font-size: 14px;
}
.lcc-left {
width: 90%;
}
.lcc-left,
.lcc-right {
zoom: 0.86;
}
.item-like {
zoom: 0.8;
}
}
@media (max-width: 265px) {
#lcc-right-more {
height: 24px;
width: auto;
}
.lcc-left {
width: 90%;
zoom: 0.7;
}
.qfc-loc-input {
width: 100%;
}
.listing-wrapper {
padding: 0 4px;
}
.lc-controls {
padding: 4px;
}
.item-like {
zoom: 0.68;
}
}
@media (max-width: 550px) {
.ad-badges {
flex-direction: row;
gap: 4px;
}
#searchBtnContainer {
zoom: 0.85;
}
}
@media (max-width: 510px) {
.ad-badges {
top: auto;
left: auto;
bottom: 0;
right: 0;
zoom: 0.8;
}
#searchBtnContainer {
zoom: 0.8;
}
}
@media (max-width: 360px) {
.ad-badges {
bottom: auto;
right: auto;
top: 0;
left: 0;
flex-direction: column;
zoom: 0.85;
}
#lc-save-search {
right: 10px;
zoom: 0.9;
}
#lc-filter-overlay {
left: 10px;
zoom: 0.9;
}
#searchBtnContainer {
zoom: 0.74;
}
}
@media (min-width: 1440px) and (max-width: 1599px) {
/* main 3-column wrapper ko expand karo */
html body #cardsContainer {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* center list ko shrink allow karo (overflow avoid) */
html body #cardsContainer .main-cards {
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* right column ko hard width de do (left jaisa) */
html body #cardsContainer .secondary-cards {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
flex: 0 0 240px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* right column ke cards ko 100% pe lock */
html body #cardsContainer .secondary-cards .secondary-card,
html body #cardsContainer .secondary-cards .main-card {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* right column ki image bhi overflow na kare */
html body #cardsContainer .secondary-cards .mc-image {
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 250px) {
.ad-badges {
bottom: 0;
right: 0;
top: auto;
left: auto;
flex-direction: row;
zoom: 0.85;
}
#phoneNavBar>ul {
zoom: 0.9;
}
#searchBtnContainer {
zoom: 0.65;
}
}
.qfc-loc-dropdown.visible {
z-index: 111;
}
.main-cards.grid {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 20px 8px;
}
.main-cards.grid .main-card {
flex-direction: column;
max-width: 24.4%;
}
.main-cards.grid .mc-cat,
.main-cards.grid .mc-loc-data,
.main-cards.grid .mc-post-date {
font-size: 12px;
}
.main-cards.grid .mc-tags {
display: none;
}
.main-cards.grid .mc-title {
font-size: 1rem;
text-wrap-mode: nowrap;
overflow: hidden;
}
.main-cards.grid .mc-title-container {
width: auto;
margin: 0;
}
.main-cards.grid .mc-main {
padding: 6px 14px;
}
.main-cards.grid .mc-postal-code {
display: none;
}
.main-cards.grid .mc-price {
zoom: 0.8;
}
.main-cards.grid .mc-image {
max-width: none;
}
@media (max-width: 1919px) {
.main-cards.grid .main-card {
max-width: 32%;
}
}
@media (max-width: 1600px) {
.main-cards.grid {
zoom: 0.92;
}
}
@media (min-width: 1440px) and (max-width: 1600px) {
.main-cards.view-grid {
zoom: 1.03 !important;
}
}
.qfc-filters {
margin-bottom: 10px;
}
/* @media (min-width: 1360px) and (max-width: 1599px) {
.main-cards.grid {
zoom: .9;
}
} */
@media (min-width: 1360px) and (max-width: 1600px) {
.main-cards.view-grid {
zoom: 1;
}
}
@media (max-width: 1280px) {
.main-cards.grid .main-card {
max-width: 32%;
}
}
@media (max-width: 1220px) {
.main-cards.grid .main-card {
max-width: 24%;
}
}
@media (max-width: 720px) {
.main-cards.grid .main-card {
max-width: 32.3%;
}
}
@media (min-width: 246px) and (max-width: 410px) {
.main-cards.grid {
zoom: 0.68;
}
.main-cards.grid .main-card {
max-width: 48.8% !important;
}
.main-cards.grid .mc-image {
min-height: 0;
height: 160px;
}
}
@media (max-width: 245px) {
.main-cards.grid {
zoom: 1;
}
.main-cards.grid .main-card {
max-width: none;
}
}
/* @media (max-width: 1440px) and (min-width: 1221px) {
#cardsContainer {
margin: 0 10px !important;
}
} */
/* ✅ FIX: 1440px–1599px me left narrow hone ke baad right overflow na ho */
@media (max-width: 480px) {
.main-cards.view-small-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
gap: 10px !important;
}
.main-cards.view-small-grid .main-card {
width: 48% !important;
max-width: 48% !important;
margin: 0 !important;
flex: 0 0 48% !important;
}
.main-cards.view-small-grid .mc-image {
height: 35vw !important;
max-width: 100% !important;
}
.main-cards.view-grid {
display: flex !important;
flex-direction: column !important;
}
.main-cards.view-grid .main-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 20px 0 !important;
flex: 0 0 100% !important;
}
.main-cards.view-grid .mc-image {
height: 65vw !important;
max-width: 100% !important;
}
}
@media (max-width: 769px) {
#cardsContainer.small-grid-layout,
#cardsContainer:has(.main-cards.view-small-grid),
#cardsContainer:has(.top-secondary-cards.view-small-grid) {
min-height: 0 !important;
}
#cardsContainer.small-grid-layout .listing-wrapper,
#cardsContainer:has(.main-cards.view-small-grid) .listing-wrapper,
#cardsContainer:has(.top-secondary-cards.view-small-grid) .listing-wrapper {
min-height: 0 !important;
}
}
.last-visited {
animation: lastVisted 0.5s ease-in-out 2 !important;
}
@keyframes lastVisted {
0% {
transform: translate(0, 0);
box-shadow: 2px 8px 1px rgba(0, 0, 0, 0);
}
25% {
transform: translate(-4px, 0);
box-shadow: 2px 8px 1px rgba(0, 0, 0, 0.2);
}
50% {
transform: translate(4px, 0);
}
75% {
transform: translate(-4px, 0);
box-shadow: 2px 8px 1px rgba(0, 0, 0, 0.2);
}
to {
transform: translate(0, 0);
box-shadow: 2px 8px 1px rgba(0, 0, 0, 0);
}
}
#media {
height: 100% !important;
min-width: 100% !important;
object-fit: cover !important;
width: 100% !important;
}
.top-secondary-cards .mc-image {
height: auto !important;
width: auto !important;
}
.top-secondary-cards.grid .main-card {
max-width: 32.3%;
}
.top-secondary-cards.grid .mc-tags {
display: none;
}
.top-secondary-cards.grid .mc-bottom {
zoom: 0.78;
}
/* 769px and below */
@media (min-width: 481px) and (max-width: 769px) {
.top-secondary-cards .mc-image {
height: 32vw !important;
}
}
@media (min-width: 1221px) {
.top-secondary-cards {
display: none !important;
}
}
@media (max-width: 480px) {
.top-secondary-cards.view-grid .main-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 20px 0 !important;
flex: 0 0 100% !important;
}
.top-secondary-cards.view-small-grid .main-card {
width: 48% !important;
max-width: 48% !important;
margin: 0 !important;
flex: 0 0 48% !important;
}
.top-secondary-cards.view-small-grid .mc-body {
zoom: 0.76;
}
.ad-media-wrapper {
width: 100% !important;
height: 100% !important;
display: flex;
justify-content: center;
align-items: center;
background: var(--secondary-dark);
overflow: hidden;
}
#media {
height: 100% !important;
min-width: 100% !important;
object-fit: contain !important;
width: 100% !important;
}
.mc-bottom {
border-radius: 0 0 17px 17px;
}
.mc-image {
border-radius: 17px 17px 0 0;
}
}
@media (min-width: 1880px) and (max-width: 2800px) {
.loader-square {
width: clamp(50px, 6vw, 6vw);
height: clamp(50px, 6vw, 6vw);
border-radius: clamp(16px, 0.8vw, 0.45vw);
}
.loader-square img {
width: 80%;
height: 80%;
object-fit: cover;
background: transparent;
}
.loader-text {
color: white;
font-size: clamp(14px, 1vw, 1vw);
}
}
.top-secondary-cards {
padding-bottom: 16px;
}
.top-secondary-cards.grid .mc-postal-code {
display: none !important;
}
.option-icon {
filter: brightness(0) !important;
fill: black;
height: 14px;
width: auto;
}
@media (max-width: 480px) {
.top-secondary-cards .mc-image {
height: 65vw !important;
max-width: 100% !important;
}
.top-secondary-cards.view-small-grid .mc-image {
height: 35vw !important;
max-width: 100% !important;
}
}
.ad-card {
background: white;
margin: 1rem 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 250px;
box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.ad-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #ccc;
font-size: 1.2rem;
text-align: center;
flex-direction: column;
gap: 0.5rem;
}
.ad-placeholder svg {
width: 50px;
height: 50px;
opacity: 0.3;
}
.listing-wrapper {
z-index: 9 !important;
}
.category-updating-popup {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.category-updating-popup[aria-hidden="false"] {
display: flex;
}
.category-updating-backdrop {
position: absolute;
inset: 0;
background: rgba(16, 24, 32, 0.62);
backdrop-filter: blur(5px);
}
.category-updating-card {
position: relative;
width: min(520px, 100%);
border: 1px solid rgba(0, 137, 123, 0.18);
border-radius: 18px;
padding: 34px 28px 30px;
background: #fff;
color: #17213b;
text-align: center;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}
.category-updating-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border: 0;
border-radius: 999px;
background: #313131;
color: #fff;
font-size: 20px;
font-weight: 800;
line-height: 1;
cursor: pointer;
}
.category-updating-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
margin-bottom: 18px;
border-radius: 22px;
background: #00897b;
color: #f6bb26;
box-shadow: 0 18px 42px rgba(0, 137, 123, 0.26);
}
.category-updating-kicker {
margin: 0 0 8px;
color: #00897b;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.category-updating-card h2 {
margin: 0 0 12px;
color: #17213b;
font-size: clamp(26px, 4vw, 38px);
line-height: 1.12;
}
.category-updating-message {
margin: 0 auto 18px;
max-width: 390px;
color: #5f6f8c;
font-size: 16px;
line-height: 1.55;
}
.category-updating-countdown {
margin: 0 0 22px;
color: #17213b;
font-size: 15px;
font-weight: 700;
}
.category-updating-home-btn {
border: 0;
border-radius: 999px;
padding: 13px 24px;
background: #00897b;
color: #fff;
font-size: 15px;
font-weight: 900;
cursor: pointer;
}
body.category-updating-active {
overflow: hidden;
}
@media (max-width: 480px) {
.category-updating-card {
padding: 30px 20px 26px;
border-radius: 16px;
}
.category-updating-icon {
width: 68px;
height: 68px;
border-radius: 19px;
}
}
/* ===== css/sidebars.css ===== */
.cat-sidebar-container {
--cat-menu-teal: #008f81;
--cat-menu-teal-dark: #00796d;
--cat-menu-yellow: #f4c430;
--cat-menu-dark: #1b1e20;
--cat-menu-muted: #8a8f93;
--cat-menu-bg: #eeeeee;
--cat-menu-card: #dff1ef;
position: fixed;
inset: 0 auto 0 0;
z-index: 30;
width: min(100vw, 380px);
background: transparent;
transform: translateX(0);
transition: transform .38s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
.cat-sidebar-container.hidden-left {
transform: translateX(-100%);
}
.cat-sidebar {
width: 100%;
height: 100%;
background: var(--cat-menu-bg);
border-right: 0;
box-shadow: 8px 0 32px rgba(0, 0, 0, .28);
display: flex;
flex-direction: column;
overflow: hidden;
animation: none;
}
.catside-head {
min-height: 72px;
background: var(--cat-menu-dark);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 14px 14px 18px;
position: relative;
flex: 0 0 auto;
}
.catside-head::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, var(--cat-menu-teal), var(--cat-menu-yellow) 72%, transparent);
}
.catside-title {
display: flex;
flex-direction: column;
gap: 4px;
line-height: 1;
}
.catside-title::before {
display: none;
}
.catside-title::after {
display: none;
}
.catside-brand {
color: #fff;
font-size: 18px;
font-weight: 800;
letter-spacing: -.4px;
}
.catside-brand-accent {
color: var(--cat-menu-yellow);
}
.catside-brand-domain {
color: rgba(255, 255, 255, .62);
font-size: .7em;
font-weight: 600;
letter-spacing: 0;
}
.catside-subtitle {
color: rgba(255, 255, 255, .42);
font-size: 11px;
font-weight: 500;
letter-spacing: .01em;
}
.catside-close {
width: 34px;
height: 34px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 9px;
background: rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .72);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.catside-close:hover {
background: rgba(244, 196, 48, .14);
border-color: rgba(244, 196, 48, .36);
color: var(--cat-menu-yellow);
transform: rotate(90deg);
}
.catside-close svg {
width: 20px;
height: 20px;
}
.catside-body {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
align-items: flex-start;
gap: 10px;
flex: 1 1 auto;
padding: 12px 14px 28px;
background: var(--cat-menu-bg);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(0, 143, 129, .45) transparent;
position: relative;
user-select: none;
}
.catside-body::-webkit-scrollbar {
width: 5px;
}
.catside-body::-webkit-scrollbar-track {
background: transparent;
}
.catside-body::-webkit-scrollbar-thumb {
background: rgba(0, 143, 129, .45);
border-radius: 20px;
}
.catside-body::before {
content: none;
position: absolute;
top: 12px;
left: 14px;
right: 14px;
height: 42px;
border: 1.5px solid var(--cat-menu-teal);
border-radius: 12px;
background: #fff;
color: #9ca3af;
display: flex;
align-items: center;
padding: 0 14px;
font-size: 14px;
font-weight: 500;
pointer-events: none;
}
.catside-body::after {
content: none;
position: absolute;
top: 142px;
left: 14px;
right: 14px;
color: #868b90;
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
}
.catside-search {
flex: 0 0 100%;
height: 42px;
display: flex;
align-items: center;
gap: 10px;
border: 1.5px solid var(--cat-menu-teal);
border-radius: 12px;
background: #fff;
padding: 0 12px;
color: var(--cat-menu-teal);
}
.catside-search-icon {
width: 18px;
height: 18px;
flex: 0 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.catside-search-input {
min-width: 0;
flex: 1;
border: 0;
outline: 0;
background: transparent;
color: #222;
font: inherit;
font-size: 14px;
}
.catside-search-input::placeholder {
color: #9ca3af;
}
.catside-search-clear {
display: none;
width: 24px;
height: 24px;
border: 0;
border-radius: 50%;
background: rgba(0, 143, 129, .1);
color: var(--cat-menu-teal-dark);
cursor: pointer;
line-height: 1;
}
.catside-search-clear.visible {
display: inline-flex;
align-items: center;
justify-content: center;
}
.catside-path {
flex: 0 0 100%;
display: none;
align-items: center;
gap: 4px;
min-height: 29px;
margin: 2px -14px 0;
padding: 7px 14px;
background: var(--cat-menu-teal-dark);
color: rgba(255, 255, 255, .8);
font-size: 11px;
line-height: 1.2;
overflow: hidden;
}
.catside-path.visible {
display: flex;
flex-wrap: wrap;
}
.catside-path .sep {
opacity: .55;
}
.catside-path .current {
color: var(--cat-menu-yellow);
font-weight: 800;
}
.catside-recent {
flex: 0 0 100%;
display: none;
padding: 2px 0 8px;
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.catside-recent.visible {
display: block;
}
.catside-recent-label,
.catside-toolbar span {
color: #868b90;
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
}
.catside-recent-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 7px;
}
.catside-recent-chip {
max-width: 100%;
border: 1px solid rgba(0, 143, 129, .28);
border-radius: 16px;
background: #fff;
color: var(--cat-menu-teal-dark);
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.catside-toolbar {
flex: 0 0 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 8px;
}
.catside-collapse {
border: 0;
background: transparent;
color: var(--cat-menu-teal-dark);
cursor: pointer;
padding: 2px 0;
font-size: 10px;
font-weight: 800;
}
.catside-collapse::before {
content: "\2195 ";
}
.cat-card {
min-width: 0;
max-width: none;
width: 100%;
height: 122px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 18px;
background: linear-gradient(145deg, #009c8d, var(--cat-menu-teal));
box-shadow: 0 8px 18px rgba(0, 0, 0, .18), 0 2px 5px rgba(0, 0, 0, .1);
color: #fff;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 10px 14px;
text-align: center;
text-decoration: none;
overflow: hidden;
position: relative;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.cat-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: rgba(255, 255, 255, .22);
}
.cat-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: var(--cat-menu-yellow);
opacity: 0;
transition: opacity .2s ease;
}
.cat-card:hover {
transform: translateY(-3px);
background: linear-gradient(145deg, #00a998, #008f81);
box-shadow: 0 12px 28px rgba(0, 0, 0, .24), 0 4px 8px rgba(0, 0, 0, .12);
}
.cat-card:hover::after,
.cat-card.selected::after {
opacity: 1;
}
.cat-card.selected {
border-color: rgba(244, 196, 48, .78);
box-shadow: 0 0 0 2px rgba(244, 196, 48, .24), 0 8px 20px rgba(0, 0, 0, .2);
}
.cat-card img {
width: 42px;
height: 42px;
object-fit: contain;
filter: brightness(0) invert(1);
display: block;
}
.cat-card span {
color: #fff;
font-size: 14px;
font-weight: 800;
line-height: 1.18;
max-width: 100%;
overflow-wrap: anywhere;
text-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.cat-card .card-inner {
padding: 0;
margin: 0;
}
.category-box {
flex: 0 0 calc(50% - 5px);
background: linear-gradient(145deg, #009688 0%, var(--cat-menu-teal) 100%);
border-radius: 20px;
min-height: 122px;
padding: 0;
text-align: center;
cursor: pointer;
transition: transform .24s cubic-bezier(.4, 0, .2, 1), box-shadow .24s ease, border-color .24s ease;
box-shadow: 0 7px 18px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .1);
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .12);
color: #fff;
}
.category-box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(255, 255, 255, .22);
}
.category-box::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: var(--cat-menu-yellow);
opacity: 0;
transition: opacity .2s ease;
}
.category-box:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0, 0, 0, .22), 0 4px 9px rgba(0, 0, 0, .12);
}
.category-box:hover::after,
.category-box.selected::after {
opacity: 1;
}
.category-box.selected {
border-color: rgba(244, 196, 48, .78);
box-shadow: 0 0 0 2px rgba(244, 196, 48, .24), 0 8px 20px rgba(0, 0, 0, .2);
}
.category-box.expanded {
flex-basis: 100%;
align-self: start;
padding: 0;
min-height: 0;
height: auto;
background: #fff;
border-color: rgba(244, 196, 48, .9);
box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
overflow: hidden;
}
.category-box.expanded:hover {
transform: none;
}
.category-box.expanded::after {
display: none;
}
.category-top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 122px;
padding: 16px 8px 18px;
}
.category-box.expanded .category-top {
min-height: 60px;
flex-direction: row;
background: linear-gradient(135deg, var(--cat-menu-teal), var(--cat-menu-teal-dark));
border-bottom: 2px solid var(--cat-menu-yellow);
padding: 14px 18px;
}
.category-icon {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.category-icon img {
width: 42px;
height: 42px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.category-box.expanded .category-icon,
.category-box.expanded .category-icon img {
width: 24px;
height: 24px;
}
.category-title {
color: #fff;
font-size: 14px;
font-weight: 800;
line-height: 1.2;
max-width: 100%;
overflow-wrap: anywhere;
text-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}
.category-box.expanded .category-title {
font-size: 15px;
}
.submenu-container {
display: none;
max-height: none;
overflow: hidden;
transition: none;
}
.category-box.expanded .submenu-container {
background: #fff;
padding: 16px 10px 20px;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
border-radius: 0 0 20px 20px;
}
.submenu-container.show {
display: block;
max-height: none;
margin-top: 0;
}
.sub-cats-container {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
width: 100%;
padding: 0 10px 12px;
border: 1.5px solid rgba(244, 196, 48, .9);
border-radius: 18px;
background: #fff;
box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
position: relative;
overflow: hidden;
transition: none !important;
}
.side-sub-heading {
min-height: 60px;
margin: 0 -10px 10px;
background: linear-gradient(135deg, var(--cat-menu-teal), var(--cat-menu-teal-dark));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border-bottom: 2px solid var(--cat-menu-yellow);
font-size: 15px;
font-weight: 800;
text-align: center;
padding: 0 16px;
}
.side-sub-heading img {
width: 24px;
height: 24px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.cat-row {
min-height: 41px;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border: 1px solid rgba(0, 143, 129, .24);
border-radius: 9px;
background: var(--cat-menu-card);
color: var(--cat-menu-teal-dark);
cursor: pointer;
text-decoration: none;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.cat-row:hover {
transform: translateX(2px);
background: #cfe9e6;
border-color: rgba(0, 143, 129, .55);
opacity: 1;
}
.cat-row img {
width: 22px;
height: 22px;
object-fit: contain;
flex: 0 0 auto;
}
.cat-row span {
width: auto;
flex: 1;
display: block;
color: var(--cat-menu-teal-dark);
font-size: 14px;
font-weight: 700;
line-height: 1.25;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cat-row::after {
content: ">";
color: var(--cat-menu-teal);
font-size: 16px;
opacity: .65;
}
.submenu-items {
display: flex;
flex-direction: column;
gap: 7px;
overflow-x: hidden;
text-align: left;
}
.sub-lvl {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 6px;
margin-bottom: 3px;
overflow-x: hidden;
}
.sub-lvl[data-level="2"],
.sub-lvl[data-level="3"] {
margin-left: 10px;
padding-left: 5px;
border-left: 2px solid rgba(0, 143, 129, .14);
}
.sub-lvl[data-level="4"],
.sub-lvl[data-level="5"] {
margin-left: 8px;
padding-left: 4px;
border-left: 2px solid rgba(0, 143, 129, .1);
}
.sub-lvl[data-level="5"],
.sub-lvl[data-level="6"],
.sub-lvl[data-level="7"],
.sub-lvl[data-level="8"],
.sub-lvl[data-level="9"],
.sub-lvl[data-level="10"] {
margin-left: 6px;
padding-left: 4px;
border-left: 2px solid rgba(0, 143, 129, .08);
}
.sub-item {
width: 100%;
min-width: 0;
box-sizing: border-box;
min-height: 41px;
display: flex;
align-items: center;
gap: 9px;
padding: 9px 11px;
border: 1px solid rgba(0, 143, 129, .24);
border-radius: 9px;
background: #e0f2f0;
color: var(--cat-menu-teal-dark);
cursor: pointer;
justify-content: flex-start;
text-align: left;
user-select: none;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.sub-item:hover,
.sub-item.open {
background: #cfe9e6;
border-color: rgba(0, 143, 129, .58);
}
.sub-item:hover {
transform: none;
}
.sub-icon {
width: 28px;
height: 28px;
flex: 0 0 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: linear-gradient(135deg, var(--cat-menu-teal), var(--cat-menu-teal-dark));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
overflow: hidden;
}
.sub-icon img {
max-width: 20px;
max-height: 20px;
object-fit: contain;
}
.sub-text {
flex: 1;
min-width: 0;
color: var(--cat-menu-teal-dark);
font-size: 14px;
font-weight: 700;
line-height: 1.25;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sub-arrow {
margin-left: auto;
flex: 0 0 auto;
color: var(--cat-menu-teal);
font-size: 14px;
font-weight: 800;
opacity: .72;
transition: transform .2s ease, opacity .2s ease;
}
.sub-item.open .sub-arrow {
transform: rotate(90deg);
opacity: 1;
}
.sub-arrow-muted {
opacity: .45;
}
.sub-children {
display: none;
max-height: none;
overflow: hidden;
flex-direction: column;
gap: 6px;
transition: none;
}
.sub-children.open {
display: flex;
max-height: none;
margin-top: 1px;
}
.sub-lvl[data-level="2"] .sub-item {
background: #e7f5f4;
padding: 8px 10px;
}
.sub-lvl[data-level="3"] .sub-item {
background: #edf8f7;
padding: 8px 10px;
}
.sub-lvl[data-level="4"] .sub-item,
.sub-lvl[data-level="5"] .sub-item,
.sub-lvl[data-level="6"] .sub-item,
.sub-lvl[data-level="7"] .sub-item,
.sub-lvl[data-level="8"] .sub-item,
.sub-lvl[data-level="9"] .sub-item,
.sub-lvl[data-level="10"] .sub-item {
background: #f4fbfa;
border-style: dashed;
padding: 7px 9px;
}
ul .cat-card {
flex: none;
max-width: none;
}
@media (min-width: 1026px) and (max-width: 1240px) {
#sidebarSection {
width: 33% !important;
}
}
@media (min-width: 768px) and (max-width: 1025px) {
#sidebarBody .qfc-filters-wrapper {
width: 100% !important;
}
#sidebarSection {
width: 40% !important;
}
.qfc-location-box {
width: 90% !important;
max-width: 90% !important;
min-width: 90% !important;
}
.qfc-filters {
width: 90% !important;
max-width: 90% !important;
min-width: 90% !important;
margin: 0 auto;
}
}
@media (min-width: 550px) and (max-width: 767px) {
#sidebarBody .qfc-filters-wrapper {
width: 100% !important;
}
#sidebarSection {
width: 45% !important;
}
.qfc-location-box {
width: 90% !important;
max-width: 90% !important;
min-width: 90% !important;
margin: 0 auto;
}
.qfc-filters {
width: 90% !important;
max-width: 90% !important;
min-width: 90% !important;
margin: 0 auto;
}
}
@media (min-width: 401px) and (max-width: 549px) {
#sidebarBody .qfc-filters-wrapper {
width: 100% !important;
}
#sidebarSection {
width: 65% !important;
}
.qfc-location-box {
width: 90% !important;
max-width: 90% !important;
min-width: 90% !important;
}
.qfc-filters {
width: 90% !important;
max-width: 90% !important;
min-width: 90% !important;
margin: 0 auto;
}
}
@media (max-width: 400px) {
.cat-sidebar-container {
width: 100vw;
}
.catside-body {
gap: 10px;
padding-left: 14px;
padding-right: 14px;
}
.cat-card {
height: 122px;
}
#sidebarBody .qfc-filters-wrapper {
width: 100% !important;
}
#sidebarSection {
width: 100% !important;
}
.qfc-location-box {
width: 95% !important;
max-width: 95% !important;
min-width: 95% !important;
}
.qfc-filters {
width: 95% !important;
max-width: 95% !important;
min-width: 95% !important;
margin: 0 auto !important;
}
}
@media (max-width: 341px) {
.catside-body {
gap: 8px;
padding-left: 10px;
padding-right: 10px;
}
.cat-card {
height: 110px;
border-radius: 16px;
}
.cat-card img {
width: 34px;
height: 34px;
}
.cat-card span {
font-size: 12px;
}
}
@media (min-width: 770px) {
.cat-sidebar-container {
display: block;
max-width: 380px !important;
}
}
/* ===== css/filter.css ===== */
.qfc-location-box {
width: 300px;
max-width: 300px;
min-width: 300px;
background-color: #fff;
padding: 0 0 10px;
border: 2px solid #ddd;
border-radius: 18px;
display: flex;
flex-direction: column;
gap: 6px
}
#fc-loc-data {
border: none;
width: 100%;
height: 100%;
padding: 6px 24px;
background-color: #f9f9f9;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, .4666666666666667);
text-align: center;
font-size: medium;
cursor: pointer;
outline: 0
}
.qfc-loc-title {
background-color: var(--secondary-dark);
color: #fff;
padding: 6px 0;
margin-bottom: 6px;
text-align: center
}
.fc-loc-icon {
left: 0
}
.fc-loc-icon,
.qfc-loc-dd-trigger {
color: #6f6f6f;
transition: all .3s ease
}
.qfc-loc-dd-trigger {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px
}
.qfc-loc-dd-trigger:hover {
color: var(--secondary-dark)
}
.qfc-loc-dd-trigger svg {
width: 22px;
height: 22px
}
.qfc-loc-dropdown {
position: absolute;
top: 0;
z-index: 1;
background: #f9f9f9;
width: 100%;
padding: 10px;
margin-top: 39px;
border: 1px solid rgba(0, 0, 0, .4666666666666667);
border-radius: 0 0 16px 16px;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
display: none
}
.qfc-loc-suggestions {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ddd
}
.qfc-loc-suggest-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
cursor: pointer;
transition: all .2s ease;
font-size: 14px;
color: #333
}
.qfc-loc-suggest-item:hover {
background: #f0f9f8;
border-color: var(--secondary-dark);
color: var(--secondary-dark);
transform: translateX(3px)
}
.qfc-loc-suggest-item:active {
transform: translateX(3px) scale(.98)
}
.qfc-loc-suggest-item svg {
flex-shrink: 0;
color: var(--secondary-dark);
opacity: .8;
transition: opacity .2s ease
}
.qfc-loc-suggest-item:hover svg {
opacity: 1
}
.qfc-loc-suggest-item span {
flex: 1;
font-weight: 500
}
.quick-filters-container {
background: transparent
}
.qfc-filters-wrapper,
.quick-filters-container {
display: flex;
flex-direction: column;
gap: 10px
}
.qfc-filters {
width: 300px;
max-width: 300px;
min-width: 300px;
background-color: #fff;
padding: 0 0 10px;
border: 2px solid #ddd;
border-radius: 18px;
flex-direction: column;
gap: 6px;
overflow: hidden
}
.qfc-filter-row,
.qfc-filters {
display: flex;
transition: none !important
}
.qfc-filter-row {
flex-direction: row;
gap: 4px;
align-items: center;
justify-content: space-between;
font-size: 15px
}
.qfc-filter-row.qfc-row-title {
justify-content: center;
font-size: 19px;
background-color: var(--secondary-dark);
padding: 5px 0;
margin: -1px;
border-radius: 18px 18px 0 0;
text-transform: capitalize;
color: #fff;
transition: none !important;
min-height: 47px
}
.qfc-filter-row.pl {
padding-left: 14px;
transition: none !important
}
.qfc-filter-row.pl .clickable-text {
width: 100%;
transition: none !important
}
.active-category-bg {
border: 3px solid rgba(0, 0, 0, .4);
box-sizing: border-box
}
.qfc-filter-col {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
font-size: 15px;
padding: 0 14px;
transition: none !important
}
.qfc-filter-input {
background-color: #fff;
color: var(--secondary-dark);
border: 2px solid var(--secondary-dark);
border-radius: 10px;
margin: 0 14px;
padding: 5px 10px;
outline: none
}
.qfc-riw {
flex-grow: 1;
gap: -1px
}
.range-group.qfc-rg {
width: 100% !important;
gap: 5px;
padding: 0 10px !important;
flex-direction: column
}
.qfc-row-title {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0
}
.qfc-row-title .arrow {
transition: transform .3s ease;
font-size: .9em;
color: #aaa;
margin-left: 6px
}
.qfc-row-title.expanded .arrow {
transform: rotate(180deg);
color: #8b5cf6
}
.qfc-filter-select {
margin: 0 10px;
padding: 6px 8px;
background-color: #fff;
border: 2px solid var(--secondary-dark);
outline: none;
border-radius: .5rem
}
.range-input.price-max,
.range-input.price-min {
padding: 0;
text-align: center;
outline: none
}
.qfc-unit-label {
padding: 0 .7rem
}
.qfc-riw>input {
height: 33px !important;
font-size: 14px !important
}
.qfc-selected-text {
text-align: left;
font-size: 13px;
font-weight: 600;
color: var(--secondary-dark);
letter-spacing: .5px;
margin-top: 8px;
margin-bottom: 4px;
padding: 0 14px
}
.qfc-selected-list {
display: flex;
flex-direction: column;
gap: 0;
padding: 0 10px;
min-height: 50px
}
.qfc-empty-state {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 10px;
color: #999;
font-size: 14px;
font-style: italic;
text-align: center
}
.qfc-selected-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 8px;
border-bottom: 1px solid #e0e0e0;
transition: background-color .2s ease
}
.qfc-selected-item.location-item {
background-color: #f0f7ff;
border-left: 3px solid var(--secondary-dark);
cursor: default
}
.qfc-selected-item.location-item .qfc-selected-label {
font-weight: 600;
color: var(--secondary-dark);
display: flex;
align-items: center;
gap: 8px
}
.qfc-selected-item.location-item .qfc-selected-label:before {
content: none
}
.qfc-selected-item:last-child {
border-bottom: none
}
.qfc-selected-item:hover {
background-color: #f8f8f8
}
.qfc-selected-label {
color: var(--secondary-dark);
font-size: 14px;
flex-grow: 1
}
.qfc-remove-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
transition: color .2s ease, transform .2s ease
}
.qfc-remove-btn:hover {
color: #dc3545;
transform: scale(1.1)
}
.qfc-remove-btn svg {
display: block
}
.qfc-actions {
display: flex;
justify-content: flex-end;
padding: 8px 14px 0
}
.qfc-delete-all {
background: none;
border: none;
color: var(--secondary-dark);
font-size: 14px;
font-weight: 500;
cursor: pointer;
padding: 6px 12px;
transition: color .2s ease, text-decoration .2s ease
}
.qfc-delete-all:hover {
color: #dc3545;
text-decoration: underline
}
.sort-dropdown-wrapper {
position: relative;
display: inline-block
}
.sort-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
min-width: 190px;
z-index: 1000;
overflow: hidden;
color: #000
}
.sort-option {
display: flex;
align-items: center;
gap: 2px;
padding: 8px 16px;
cursor: pointer;
transition: background-color .2s ease;
user-select: none;
opacity: 0;
transform: translateX(-20px)
}
.sort-option:hover {
background-color: #f5f5f5
}
.sort-option .sort-check-icon {
flex-shrink: 0;
opacity: 0;
transition: opacity .2s ease;
border: none
}
.sort-option.active .sort-check-icon {
opacity: 1
}
.sort-option span {
font-size: 14px;
color: #000;
font-weight: 500;
text-align: right;
flex-grow: 1
}
.sort-option.active span {
color: #000;
font-weight: 600
}
.viewmode-toggle-wrapper {
display: inline-block
}
.viewmode-toggle-btn,
.viewmode-toggle-wrapper {
position: relative;
height: 100%
}
.viewmode-toggle-btn .viewmode-icon {
flex-shrink: 0;
transition: opacity .3s ease, transform .3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.viewmode-toggle-btn .viewmode-icon:not(.active) {
opacity: 0;
pointer-events: none
}
.viewmode-toggle-btn .viewmode-icon.active {
opacity: 1
}
.qfc-suggest {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 1000;
background: #fff;
color: #000;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 10px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
overflow: hidden
}
.qfc-suggest.hidden {
display: none
}
.qfc-suggest-list {
max-height: 320px;
overflow-y: auto
}
.qfc-suggest-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
user-select: none
}
.qfc-suggest-item:hover {
background: #e5e5e5
}
.qfc-suggest-title {
line-height: 1.2
}
.qfc-suggest-type {
font-size: .72rem;
padding: 4px 8px;
line-height: 1;
border-radius: 9999px;
border: 1px solid rgba(2, 6, 23, .12);
color: #0f172a;
background: #fff;
white-space: nowrap
}
.qfc-suggest-empty {
padding: 14px;
color: #555;
font-size: 14px
}
.qfc-skeleton-item {
padding: 12px 14px
}
.qfc-skel-line {
height: 14px;
width: 60%;
border-radius: 6px
}
.qfc-skel-line,
.qfc-skel-sub {
background: #eee;
position: relative;
overflow: hidden
}
.qfc-skel-sub {
margin-top: 8px;
height: 10px;
width: 90px;
border-radius: 9999px
}
.qfc-skel-line:after,
.qfc-skel-sub:after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8) 50%, hsla(0, 0%, 100%, 0));
animation: qfc-shimmer 1.2s linear infinite
}
@keyframes qfc-shimmer {
0% {
left: -100%
}
to {
left: 100%
}
}
.more-dropdown-wrapper {
position: relative;
display: inline-block
}
.more-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
min-width: 190px;
z-index: 1000;
overflow: hidden;
color: #000
}
.more-toggle-btn {
height: 100%;
position: relative;
aspect-ratio: unset !important;
padding: 4px !important
}
.sort-by-header {
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
color: #000;
border-bottom: 1px solid #e0e0e0;
opacity: 0;
transform: translateX(-20px);
transition: opacity .2s ease, transform .2s ease
}
@media (min-width:481px) {
.more-dropdown-wrapper {
display: none
}
}
.dropdown-header {
font-size: 14px;
font-weight: 600;
color: #000;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
transition: opacity .2s ease, transform .2s ease
}
.dropdown-header,
.dropdown-option {
padding: 8px 16px;
opacity: 0;
transform: translateX(-20px)
}
.dropdown-option {
display: flex;
align-items: center;
gap: 2px;
cursor: pointer;
transition: background-color .2s ease;
user-select: none
}
.dropdown-option:hover {
background-color: #f5f5f5
}
.dropdown-option .sort-check-icon {
flex-shrink: 0;
opacity: 0;
transition: opacity .2s ease;
border: none
}
.dropdown-option.active .sort-check-icon {
opacity: 1
}
.dropdown-option span {
font-size: 14px;
color: #000;
font-weight: 500;
text-align: right;
flex-grow: 1
}
.qfc-toggle-row {
padding: 6px 0 0 0;
text-align: center;
border-top: 1px solid #eaeaea;
margin-bottom: -3px;
}
.qfc-toggle-btn {
background: none;
border: none;
color: #888;
cursor: pointer;
font-size: 13px;
font-weight: 600;
padding: 0;
text-decoration: none;
transition: color 0.2s ease;
width: 100%;
height: 100%;
}
.qfc-toggle-btn:hover {
color: #333;
text-decoration: underline;
}
@media (max-width: 769px) {
#filterSidebar #sidebarSection {
width: min(86vw, 326px) !important;
max-width: calc(100vw - 6px) !important;
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
background: #ededed !important;
}
#filterSidebar #sidebarBody {
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
box-sizing: border-box !important;
width: 100% !important;
padding: 10px var(--mobile-filter-right-pad, 2px) 140px var(--mobile-filter-left-pad, 4px) !important;
margin: 0 !important;
zoom: 1 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: thin !important;
scrollbar-gutter: auto !important;
scrollbar-color: var(--teal) transparent !important;
-webkit-overflow-scrolling: touch;
align-items: stretch !important;
}
#filterSidebar #sidebarBody::-webkit-scrollbar {
width: 5px !important;
display: block !important;
}
#filterSidebar #sidebarBody::-webkit-scrollbar-track {
background: transparent !important;
}
#filterSidebar #sidebarBody::-webkit-scrollbar-thumb {
background: var(--teal) !important;
border-radius: 999px !important;
}
#filterSidebar #sidebarContent,
#filterSidebar #sidebarContent > div {
min-height: 0 !important;
height: 100% !important;
overflow: hidden !important;
}
#filterSidebar .quick-filters-container,
#filterSidebar .qfc-filters-wrapper {
width: 100% !important;
max-width: none !important;
gap: 26px !important;
align-items: stretch !important;
}
#filterSidebar .qfc-location-box,
#filterSidebar .qfc-filters {
width: var(--mobile-filter-card-width, calc(100vw - 16px)) !important;
min-width: 0 !important;
max-width: calc(100% - 6px) !important;
margin: 0 !important;
border-radius: 16px;
box-sizing: border-box !important;
}
#filterSidebar .qfc-filters + .qfc-filters,
#filterSidebar .qfc-location-box + .qfc-filters {
margin-top: 8px !important;
}
#filterSidebar .qfc-location-box {
padding-bottom: 0 !important;
}
#filterSidebar .qfc-filter-row.qfc-row-title {
min-height: 42px;
font-size: 16px;
border-radius: 15px 15px 0 0;
}
#filterSidebar .qfc-filter-row.pl {
min-height: 26px !important;
padding: 2px 18px 2px 16px !important;
gap: 12px !important;
box-sizing: border-box !important;
}
#filterSidebar .qfc-filter-row.pl .clickable-text {
padding: 0 !important;
line-height: 1.25 !important;
text-align: left !important;
}
#filterSidebar .radio-dark-wrap,
#filterSidebar .checkbox-dark-wrap {
margin-right: 0 !important;
margin-left: auto !important;
flex: 0 0 auto !important;
}
#filterSidebar .radio-dark-custom,
#filterSidebar .checkbox-dark-custom {
flex: 0 0 auto !important;
width: 20px !important;
height: 20px !important;
}
#filterSidebar .qfc-toggle-row {
margin: 0 !important;
padding: 7px 0 6px !important;
border-top: 1px solid #e5e5e5 !important;
}
#filterSidebar .radio-option {
min-height: 52px !important;
padding: 8px 18px !important;
gap: 16px !important;
box-sizing: border-box !important;
}
#filterSidebar .radio-option label[for] {
padding: 5px 0 !important;
line-height: 1.35 !important;
}
#filterSidebar .qfc-filter-col {
padding: 10px 16px 12px !important;
gap: 12px !important;
align-items: stretch !important;
}
#filterSidebar .range-group.qfc-rg {
gap: 10px !important;
padding: 10px 14px 12px !important;
}
#filterSidebar .qfc-selected-list {
min-height: 0 !important;
padding: 0 10px 10px;
}
#filterSidebar .qfc-actions {
padding: 0 10px 8px !important;
}
#filterSidebar .selected-item,
#filterSidebar .qfc-selected-item {
width: 100%;
box-sizing: border-box;
}
}
@media (max-width: 400px) {
#filterSidebar #sidebarSection {
width: min(86vw, 326px) !important;
max-width: calc(100vw - 4px) !important;
}
#filterSidebar #sidebarBody {
padding-left: var(--mobile-filter-left-pad, 2px) !important;
padding-right: var(--mobile-filter-right-pad, 2px) !important;
}
}
/* ===== css/footer.css ===== */
footer {
color: var(--text-light);
background: #006f63;
margin-top: 0;
min-height: 430px;
}
.footer-links-contact-container {
display: flex;
flex-wrap: nowrap;
gap: 100px;
padding-right: 10px;
}
.footer-top {
background: #006f63;
padding: 40px 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 19px;
}
.footer-logo {
max-width: 400px;
}
.footer-logo .brand {
display: flex;
align-items: center;
margin-bottom: 8px;
}
#logo-def {
height: auto;
margin-right: 8px;
}
#logo-sm {
height: 38px;
margin-top: -10px;
}
.footer-logo p {
font-size: 17px;
color: #fff;
text-align: justify;
font-weight: 600;
}
.social-icons {
margin-top: 18px;
margin-left: 8px;
display: flex;
gap: 8px;
}
.social-icons a {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
text-decoration: none;
padding: 10px;
border: 2px solid var(--text-muted);
border-radius: 50%;
transition:
background 0.3s ease,
color 0.3s ease;
}
.social-icons a:hover {
background-color: var(--text-muted);
}
.social-icons a:hover svg path {
fill: var(--teal);
}
.social-icons svg {
height: 20px;
width: auto;
}
.footer-contact h4,
.footer-links h4,
.footer-links h2,
.footer-support h4,
.footer-support h2,
.footer-services h2,
.footer-services h4 {
margin-bottom: 15px;
font-size: 20px;
font-weight: 700;
}
.footer-links ul li,
.footer-support ul li,
.footer-services ul li {
margin-bottom: 10px;
}
.footer-links a,
.footer-support a,
.footer-services a {
color: #fff;
text-decoration: none;
font-size: 17px;
font-weight: 700;
transition: color 0.3s ease;
border: none;
outline: none;
}
.footer-links a:hover,
.footer-support a:hover,
.footer-services a:hover {
color: var(--highlight);
text-decoration: none;
}
.footer-links a:focus,
.footer-support a:focus,
.footer-services a:focus,
.footer-links a:active,
.footer-support a:active,
.footer-services a:active {
text-decoration: none;
outline: none;
border: none;
}
.footer-contact p {
font-size: 17px;
margin-bottom: 3px;
}
.footer-contact strong {
display: inline-block;
width: 50px;
}
.footer-center {
background: #005f55;
color: #fff;
padding: 15px 20px;
text-align: center;
}
.footer-center nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
color: #fff;
}
.footer-center strong,
.footer-center p,
.footer-center span,
.footer-address,
.contact-heading-footer,
.footer-phone {
color: #fff;
font-weight: 700;
}
.footer-center nav a {
color: #fff;
text-decoration: none;
font-size: 15px;
transition: color 0.3s ease;
border: none;
outline: none;
}
.footer-center nav a:hover {
color: var(--highlight);
text-decoration: none;
}
.footer-center nav a:focus,
.footer-center nav a:active {
text-decoration: none;
outline: none;
border: none;
}
.footer-bottom {
background: var(--secondary-dark);
padding: 15px 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
font-size: 13px;
text-align: center;
}
.footer-section {
flex: 1 1 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
.links-footer-bottom {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.links-footer-bottom svg {
height: 28px;
width: auto;
}
.apps {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
}
.apps img {
height: 40px;
width: auto;
}
.country {
display: flex;
align-items: center;
gap: 10px;
}
.custom-select {
position: relative;
width: 200px;
}
.custom-select select {
display: none; /* Hide the real select */
}
.custom-select-trigger {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 36px 6px 12px;
background-color: var(--text-light);
color: var(--dark-gray);
font-size: 14px;
cursor: pointer;
border: none;
height: 36px;
position: relative;
user-select: none;
}
.custom-select-trigger::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 36px;
height: 100%;
background: var(--gray-bg);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
}
.custom-select-trigger.active::after {
background-image: url('data:image/svg+xml;utf8,');
}
.custom-select-trigger .flag-icon {
font-size: 18px;
line-height: 1;
}
.custom-options {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: var(--text-light);
border: 1px solid var(--gray-bg);
max-height: 200px;
overflow-y: auto;
z-index: 1000;
display: none;
margin-bottom: 2px;
}
.custom-options.active {
display: block;
}
.custom-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
color: var(--dark-gray);
font-size: 14px;
transition: background-color 0.2s ease;
}
.custom-option:hover {
background-color: var(--gray-bg);
color: var(--text-light);
}
.custom-option.selected {
background-color: var(--teal-light);
color: var(--text-light);
}
.custom-option .flag-icon {
font-size: 18px;
line-height: 1;
}
.footer-copyright {
color: #f2f2f2;
font-size: 12px;
}
.footer-copyright a {
color: #fff;
text-decoration: underline;
text-underline-offset: 2px;
}
.footer-links a:focus-visible,
.footer-support a:focus-visible,
.footer-services a:focus-visible {
outline: 2px solid var(--yellow);
outline-offset: 3px;
}
@media (max-width: 769px) {
.footer-links a,
.footer-support a,
.footer-services a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 8px 0;
}
}
@media (min-width: 1920px) and (max-width: 2000px) {
.footer-top {
padding: 50px 0px;
gap: 28px;
max-width: calc(1560px + 2rem);
margin: auto;
}
}
@media (max-width: 1919px) {
.footer-top {
padding: 38px 0;
max-width: calc(1440px + 2rem);
margin: auto;
}
}
@media (max-width: 1550px) {
.footer-top {
max-width: 1350px;
}
}
@media (max-width: 1770px) {
.footer-links-contact-container {
gap: 80px;
padding-right: 14px;
}
.footer-contact h4,
.footer-links h4,
.footer-links h2,
.footer-support h4,
.footer-support h2,
.footer-services h2,
.footer-services h4 {
font-size: 19px;
}
.footer-links a,
.footer-support a,
.footer-services a,
.footer-contact p {
font-size: 16px;
}
}
@media (max-width: 1440px) {
.footer-links-contact-container {
gap: 65px;
}
.footer-top {
padding: 40px 30px;
}
}
@media (max-width: 1220px) {
.footer-links-contact-container {
gap: 55px;
}
.footer-contact h4,
.footer-links h4,
.footer-links h2,
.footer-support h4,
.footer-support h4,
.footer-support h2,
.footer-services h2,
.footer-services h4 {
margin-bottom: 10px;
font-size: 18px;
}
.footer-links a,
.footer-support a,
.footer-services a,
.footer-contact p,
.footer-logo p {
font-size: 15px;
}
.footer-top {
padding: 36px 20px;
}
}
@media (max-width: 1111px) {
.footer-links-contact-container {
gap: 40px;
padding-right: 0;
}
}
@media (max-width: 1046px) {
.footer-links-contact-container {
gap: 27px;
}
.footer-links a,
.footer-support a,
.footer-services a,
.footer-contact p {
font-size: 14.5px;
}
}
@media (max-width: 1000px) {
.footer-top {
flex-direction: column;
gap: 25px;
}
.footer-logo p {
font-size: 17px;
}
.footer-logo {
max-width: 700px;
}
#logo-def {
height: 68px;
width: auto;
}
.footer-links-contact-container {
align-items: baseline;
justify-content: space-between;
gap: 0;
width: 700px;
}
.footer-contact h4,
.footer-links h4,
.footer-links h2,
.footer-support h4,
.footer-support h2,
.footer-services h2,
.footer-services h4 {
font-size: 19px;
}
.footer-links a,
.footer-support a,
.footer-services a,
.footer-contact p {
font-size: 15.5px;
}
}
@media (min-width: 790px) and (max-width: 920px) {
.links-footer-bottom {
gap: 8px;
}
.links-footer-bottom svg {
height: 24px;
}
}
@media (max-width: 888px) {
.footer-logo,
.footer-links-contact-container {
max-width: 650px;
}
#logo-def {
height: 57px;
width: auto;
}
.footer-logo p {
font-size: 14px;
}
.footer-links a,
.footer-support a,
.footer-services a,
.footer-contact p,
.footer-center nav a {
font-size: 13px;
}
.footer-links ul li,
.footer-support ul li,
.footer-services ul li {
margin-bottom: 0;
}
.footer-center {
padding: 12px 6px;
}
#geoDataDetails {
display: none;
}
.footer-center nav {
gap: 3px;
}
}
@media (max-width: 769px) {
.footer-top {
padding: 24px 12px;
gap: 16px;
}
}
@media (max-width: 789px) {
.footer-bottom {
flex-direction: column-reverse;
align-items: center;
gap: 24px;
}
.footer-section {
flex: 1 1;
}
}
@media (max-width: 715px) {
.footer-top {
zoom: 0.92;
}
}
@media (max-width: 630px) {
.footer-links-contact-container {
width: 100%;
flex-wrap: wrap;
gap: 26px;
}
.footer-contact h4,
.footer-links h4,
.footer-links h2,
.footer-support h4,
.footer-support h2,
.footer-services h2,
.footer-services h4 {
font-size: 16px;
margin-bottom: 5px;
}
.country {
zoom: 0.93;
}
.footer-copyright {
zoom: 0.95;
}
.apps,
.links-footer-bottom {
zoom: 0.82;
}
}
@media (max-width: 485px) {
.footer-links-contact-container {
flex-direction: column;
}
.country {
zoom: 0.9;
}
.apps,
.footer-copyright,
.links-footer-bottom {
zoom: 0.78;
}
.footer-top {
padding: 24px 12px;
gap: 16px;
}
}
@media (max-width: 350px) {
.footer-bottom {
padding: 15px 0;
}
.country,
.apps {
flex-direction: row;
}
#logo-def {
height: 52px;
width: auto;
}
.footer-links-contact-container {
gap: 22px;
}
.footer-bottom {
gap: 14px;
}
.apps,
.footer-copyright,
.links-footer-bottom {
zoom: 0.72;
}
.country {
zoom: 0.85;
}
}
@media (max-width: 273px) {
.footer-links-contact-container {
gap: 18px;
}
.footer-links a,
.footer-support a,
.footer-services a,
.footer-contact p {
font-size: 12px;
}
.footer-logo p {
font-size: 12.5px;
}
.footer-bottom {
gap: 14px;
}
.apps,
.footer-copyright,
.links-footer-bottom {
zoom: 0.65;
}
.country {
zoom: 0.8;
}
}
@media (max-width: 200px) {
.footer-logo p {
font-size: min(6.15vw, 14.15px);
}
}
/* =========================================================
UI SCALE FREEZE (BASE 1920)
- 1920px wali footer layout ko lock rakho
- 1921px+ par koi manual (2K/4K/8K) scaling rules apply na hon
- Actual size ui-scale.css (zoom/transform) se handle hogi
========================================================= */
@media (min-width: 1921px) {
html[data-ui-scale="on"] .footer-top {
padding: 50px 0px !important;
gap: 28px !important;
max-width: calc(1560px + 2rem) !important;
margin: auto !important;
}
html[data-ui-scale="on"] .footer-links-contact-container {
display: flex !important;
flex-wrap: nowrap !important;
gap: 100px !important;
padding-right: 10px !important;
}
html[data-ui-scale="on"] .footer-logo {
max-width: 400px !important;
}
html[data-ui-scale="on"] #logo-def {
height: 60px !important;
margin-right: 8px !important;
}
html[data-ui-scale="on"] #logo-sm {
height: 38px !important;
margin-top: -10px !important;
}
html[data-ui-scale="on"] .footer-logo p {
font-size: 17px !important;
}
html[data-ui-scale="on"] .footer-contact h4,
html[data-ui-scale="on"] .footer-links h4,
html[data-ui-scale="on"] .footer-links h2,
html[data-ui-scale="on"] .footer-services h2,
html[data-ui-scale="on"] .footer-services h4 {
margin-bottom: 15px !important;
font-size: 20px !important;
font-weight: 700 !important;
}
html[data-ui-scale="on"] .footer-links a,
html[data-ui-scale="on"] .footer-services a,
html[data-ui-scale="on"] .footer-contact p {
font-size: 17px !important;
}
html[data-ui-scale="on"] .footer-center {
padding: 15px 20px !important;
text-align: center !important;
}
html[data-ui-scale="on"] .footer-center nav {
gap: 8px !important;
}
html[data-ui-scale="on"] .footer-center nav a {
font-size: 15px !important;
}
html[data-ui-scale="on"] .footer-bottom {
padding: 15px 20px !important;
gap: 20px !important;
font-size: 13px !important;
}
html[data-ui-scale="on"] .apps {
font-size: 16px !important;
}
html[data-ui-scale="on"] .apps img {
height: 40px !important;
width: auto !important;
}
html[data-ui-scale="on"] .custom-select {
width: 200px !important;
}
html[data-ui-scale="on"] .custom-select-trigger {
font-size: 14px !important;
height: 36px !important;
}
html[data-ui-scale="on"] .custom-option {
font-size: 14px !important;
}
html[data-ui-scale="on"] .footer-copyright {
font-size: 12px !important;
}
}
html.rtl-active .custom-select-trigger::after {
content: "";
position: absolute;
top: 0;
right: 100%;
left: 0;
}
html.rtl-active .custom-select-trigger {
padding: 6px 12px 6px 20px;
}
/* ===== css/skeleton.css ===== */
/* Main Card Skeleton Styles */
.card-skeleton {
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 16px;
animation: skeleton-pulse 1.5s ease-in-out infinite alternate;
}
.card-skeleton .skeleton-img {
height: 200px;
background: #e0e0e0;
position: relative;
}
.card-skeleton .skeleton-content {
padding: 16px;
}
.card-skeleton .skeleton-title {
height: 24px;
background: #e0e0e0;
margin-bottom: 12px;
border-radius: 4px;
}
.card-skeleton .skeleton-line {
height: 16px;
background: #e0e0e0;
margin-bottom: 8px;
border-radius: 4px;
}
.card-skeleton .skeleton-line.small {
width: 60%;
}
.card-skeleton .skeleton-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
}
.card-skeleton .skeleton-price {
height: 24px;
width: 80px;
background: #e0e0e0;
border-radius: 4px;
}
.card-skeleton .skeleton-stars {
height: 20px;
width: 100px;
background: #e0e0e0;
border-radius: 4px;
}
/* Secondary Card Skeleton Styles */
.secondary-card-skeleton {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 12px;
display: flex;
flex-direction: column;
}
.secondary-card-skeleton > div {
animation: skeleton-shimmer 1.5s ease-in-out infinite alternate;
}
.secondary-card-skeleton .skeleton-img {
height: 150px;
background: #e0e0e0;
position: relative;
}
.secondary-card-skeleton .skeleton-content {
padding: 12px;
flex: 1;
}
.secondary-card-skeleton .skeleton-title {
height: 20px;
background: #e0e0e0;
margin-bottom: 8px;
border-radius: 4px;
}
.secondary-card-skeleton .skeleton-line {
height: 14px;
background: #e0e0e0;
margin-bottom: 6px;
border-radius: 4px;
}
.secondary-card-skeleton .skeleton-line.small {
width: 50%;
}
.secondary-card-skeleton .skeleton-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
padding-top: 8px;
border-top: 1px solid #f0f0f0;
}
.secondary-card-skeleton .skeleton-price {
height: 20px;
width: 70px;
background: #e0e0e0;
border-radius: 4px;
}
@keyframes skeleton-shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
/* Shimmer effect for skeleton elements */
.card-skeleton .skeleton-img,
.card-skeleton .skeleton-title,
.card-skeleton .skeleton-line,
.card-skeleton .skeleton-price,
.card-skeleton .skeleton-stars,
.secondary-card-skeleton .skeleton-img,
.secondary-card-skeleton .skeleton-title,
.secondary-card-skeleton .skeleton-line,
.secondary-card-skeleton .skeleton-price {
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 1000px 100%;
}
/* Smooth fade-out transition for skeleton removal */
.card-skeleton,
.secondary-card-skeleton {
transition: opacity 0.3s ease-out;
}
@keyframes skeleton-pulse {
0% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
/* =========================================== */
/* Container based on your theme */
.refine-card-skeleton {
width: 280px;
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
animation: skeleton-pulse 1.5s ease-in-out infinite alternate;
}
/* Dark Header Match */
.skeleton-header {
height: 50px;
/* Using a darker version of your shimmer for the header */
background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
background-size: 1000px 100%;
animation: skeleton-shimmer 1.5s infinite linear;
}
.skeleton-body {
padding: 20px;
}
/* Applying your shimmer style to inner elements */
.skeleton-label,
.skeleton-icon,
.skeleton-text {
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 1000px 100%;
animation: skeleton-shimmer 1.5s infinite linear;
border-radius: 4px;
}
.skeleton-label {
height: 12px;
width: 130px;
margin-bottom: 15px;
}
/* The light blue selection box from the image */
.skeleton-selection-container {
display: flex;
align-items: center;
height: 48px;
background: #f1f5f9; /* Subtle blue tint */
padding: 0 12px;
border-left: 3px solid #333; /* The dark vertical accent */
}
.skeleton-icon {
width: 18px;
height: 18px;
margin-right: 10px;
border-radius: 50%;
}
.skeleton-text {
width: 140px;
height: 14px;
}
.qfcloc-skeleton {
border-radius: 18px;
overflow: hidden;
display: none; /* Hidden by default, shown when skeleton loading starts */
}
/* ===== css/language-dropdown.css ===== */
/**
* Language Dropdown Styles
* Trendy but minimal design with glassmorphism
*/
@media (max-width: 769px) {
#language-selector {
position: absolute;
right: 2%;
}
}
.language-dropdown-container {
position: relative;
display: inline-flex;
align-items: center;
}
#language-dropdown {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 160px;
background: rgba(33, 33, 33, 0.85);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.3),
0 0 1px rgba(255, 255, 255, 0.1) inset;
padding: 6px;
z-index: 1000;
/* Animation state */
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(0.98);
transform-origin: top right;
transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
pointer-events: none;
}
#language-dropdown.show {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Subtle triangle pointer */
#language-dropdown::before {
content: "";
position: absolute;
top: -6px;
right: 15px;
width: 12px;
height: 12px;
background: rgba(33, 33, 33, 0.85);
backdrop-filter: blur(12px);
border-left: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.08);
transform: rotate(45deg);
z-index: -1;
}
.language-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
margin: 2px 0;
cursor: pointer;
color: rgba(255, 255, 255, 0.85);
font-size: 13.5px;
font-weight: 500;
font-family:
"Inter",
-apple-system,
BlinkMacSystemFont,
sans-serif;
border-radius: 8px;
transition: all 0.2s ease;
user-select: none;
}
.language-option:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.language-option.selected {
background: rgba(245, 197, 66, 0.15);
color: #facc15;
}
.lang-text {
flex: 1;
text-align: left;
}
.check-mark {
opacity: 0;
transform: scale(0.5);
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
color: #facc15;
font-size: 14px;
margin-right: 4px;
}
.language-option.selected .check-mark {
opacity: 1;
transform: scale(1);
}
/* RTL Support for Urdu */
[dir="rtl"] #language-dropdown {
right: auto;
left: 0;
transform-origin: top left;
}
[dir="rtl"] #language-dropdown::before {
right: auto;
left: 15px;
}
[dir="rtl"] .lang-text {
text-align: right;
}
[dir="rtl"] .check-mark {
margin-right: 0;
margin-left: 4px;
}
/* ===== css/cookiebar.css ===== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.cookie-bar {
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: #313131;
border-top: 1px solid #1a2e42;
padding: 14px 24px;
font-family: sans-serif;
font-size: 14px;
color: #c8d8e8;
min-height: 56px;
width: 100%;
}
.cookie-left {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex: 0 1 auto;
max-width: 980px;
text-align: center;
}
.cookie-icon {
width: 22px;
height: 22px;
border: 1.5px solid #008d7f;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cookie-icon svg {
display: block;
}
.cookie-text a {
color: #8ff7e8;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 700;
}
.cookie-text a:hover {
color: #ffffff;
}
.cookie-btns {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
flex-shrink: 0;
flex-wrap: wrap;
}
.btn-reject {
background: transparent;
border: 1px solid #7893a8;
color: #ffffff;
padding: 7px 18px;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: border-color 0.2s;
}
.btn-reject:hover {
border-color: #8ff7e8;
}
.btn-accept {
background: #007769;
border: 1px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
padding: 7px 22px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.btn-accept:hover {
background: #00685d;
}
/* ===== css/premium-ad-listing.css ===== */
#premium-side-ad {
max-width: 300px;
background: white;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 0;
margin: 0;
border-radius: 18px;
min-height: 200px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.premium-side-ad-badge {
background: var(--yellow);
color: black;
padding: 4px 8px;
border-radius: 20px;
position: absolute;
top: 6px;
right: 5px;
zoom: 0.9;
}
.premium-side-ad-img,
.premium-side-ad-video {
height: 100%;
border-radius: 18px;
display: block;
object-fit: cover;
}
@media (min-width: 1221px) and (max-width: 1600px) {
#premium-side-ad {
min-width: 240px;
}
}
@media (min-width: 1601px) and (max-width: 1920px) {
#premium-side-ad {
min-width: 300px;
}
}
.premium-ad-top-container {
display: none;
}
@media screen and (max-width: 1220px) {
.premium-ad-top-container {
display: flex;
width: 100%;
flex: 0 0 100%;
}
#premium-side-ad {
background: #101010;
max-width: 100%;
height: clamp(190px, 44vw, 255px);
min-height: 0;
max-height: none;
margin-bottom: 12px;
}
.premium-ad-top-container #premium-side-ad {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
.premium-side-ad-img,
.premium-side-ad-video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
}
}
@media(max-width: 540px) {
#premium-side-ad {
height: clamp(205px, 52vw, 255px);
min-height: 0;
width: 100%;
margin-bottom: 5px;
}
}
@media (max-width: 769px) {
.top-secondary-cards {
display: none !important;
}
.premium-ad-top-container {
display: flex !important;
width: 100%;
margin: 0 0 12px;
}
}
/* ===== css/rating-overlay.css ===== */
/* ============================================================
JustSelect – Review Rating Popup Styles
File: review-styles.css
Scope: .js-review-trigger, .js-review-popup, #js-review-overlay
============================================================ */
/* ── Trigger: the star row inside .mc-bottom ── */
.js-review-trigger {
display: flex;
align-items: center;
gap: 2px;
cursor: pointer;
padding: 5px 7px;
border-radius: 9px;
transition: background 0.18s;
position: relative; /* popup anchors to this on desktop */
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.js-review-trigger.js-active {
background: rgba(245, 180, 0, 0.12);
}
.js-review-trigger .js-si {
font-size: 18px;
color: #fff;
line-height: 1;
display: inline-block;
}
.js-review-trigger .js-si.filled {
color: var(--yellow);
}
/* ── Mobile full-screen overlay ── */
#js-review-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 9998;
}
#js-review-overlay.js-show {
display: block;
}
/* ── Popup card ── */
.js-review-popup {
position: absolute;
bottom: calc(100% + 30px);
right: -6px;
width: 300px;
background: #2a2a2a;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
opacity: 0;
pointer-events: none;
transform: translateY(10px) scale(0.96);
transform-origin: bottom right;
transition:
opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9999;
overflow: hidden;
}
.js-review-popup.js-floating {
position: fixed;
right: auto;
bottom: auto;
transform-origin: bottom right;
}
.js-review-popup.js-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
/* ── Drag handle (mobile only) ── */
.js-pop-handle {
display: none; /* shown via media query below */
width: 36px;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
margin: 10px auto 0;
}
/* ── Dark header ── */
.js-pop-head {
background: #1e1e1e;
padding: 16px 16px 15px;
}
.js-pop-brand {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.js-pb-just {
font-size: 14px;
font-weight: 700;
color: #fff;
}
.js-pb-sel {
font-size: 14px;
font-weight: 700;
color: #f5b400;
}
.js-pb-com {
font-size: 13px;
color: rgba(255, 255, 255, 0.35);
}
.js-pop-score-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.js-pop-num {
font-size: 34px;
font-weight: 800;
color: #fff;
letter-spacing: -1.5px;
line-height: 1;
}
.js-pop-num sub {
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.3);
vertical-align: baseline;
}
.js-pop-right {
display: flex;
flex-direction: column;
gap: 4px;
}
.js-pop-stars {
display: flex;
gap: 2px;
}
.js-pop-stars .js-si {
font-size: 19px;
color: #fff !important;
}
.js-pop-stars .js-si.filled {
color: var(--yellow, #f6bb26) !important;
}
.js-review-popup .js-si {
color: #fff !important;
}
.js-review-popup .js-si.filled {
color: var(--yellow, #f6bb26) !important;
}
.js-si.half {
background: linear-gradient(90deg, var(--yellow, #f6bb26) 50%, white 50%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.js-pop-rcount {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
min-height: 12px;
display: inline-flex;
align-items: center;
}
.js-rating-mini-spinner {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid rgba(255, 255, 255, 0.24);
border-top-color: #f5b400;
border-radius: 50%;
animation: js-cspin 0.7s linear infinite;
}
.js-vpill {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(245, 180, 0, 0.1);
border: 1px solid rgba(245, 180, 0, 0.25);
border-radius: 20px;
padding: 4px 10px;
}
.js-vpill svg {
width: 9px;
height: 9px;
color: #f5b400;
}
.js-vpill span {
font-size: 10px;
color: #f5b400;
font-weight: 600;
}
/* ── White body ── */
.js-pop-body {
background: #fff;
}
/* ── Spinner ── */
.js-spinner-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 0 24px;
gap: 12px;
}
.js-c-ring {
width: 52px;
height: 52px;
border-radius: 50%;
border: 4px solid rgba(245, 180, 0, 0.2);
border-top-color: #f5b400;
border-right-color: #f5b400;
animation: js-cspin 0.75s linear infinite;
}
@keyframes js-cspin {
to {
transform: rotate(360deg);
}
}
.js-c-lbl {
font-size: 11px;
color: #9ca3af;
font-weight: 500;
letter-spacing: 0.4px;
}
/* ── Rating bars ── */
.js-pop-bars {
padding: 14px 16px 16px;
}
.js-pbb-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 9px;
}
.js-pbb-row:last-child {
margin-bottom: 0;
}
.js-pbl {
text-wrap: nowrap;
font-size: 10px;
color: #6b7280;
width: 36px;
text-align: right;
flex-shrink: 0;
font-weight: 500;
}
.js-pbt {
flex: 1;
height: 7px;
background: #f0f0f0;
border-radius: 5px;
overflow: hidden;
}
.js-pbf {
height: 100%;
border-radius: 5px;
background: linear-gradient(90deg, #f5b400, #ffd966);
width: 0%;
transition: width 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.js-pbp {
font-size: 11px;
color: #1a9e8a;
width: 32px;
text-align: right;
font-weight: 700;
opacity: 0;
transition: opacity 0.3s 0.8s;
}
.js-pbp.js-show {
opacity: 1;
}
/* ── Error state ── */
.js-pop-error {
padding: 20px 16px;
text-align: center;
}
.js-pop-error p {
font-size: 11px;
color: #e24b4a;
margin-bottom: 10px;
}
.js-retry-btn {
font-size: 11px;
font-weight: 600;
color: #f5b400;
background: rgba(245, 180, 0, 0.08);
border: 1px solid rgba(245, 180, 0, 0.3);
border-radius: 20px;
padding: 5px 14px;
cursor: pointer;
}
/* ── Bottom caret ── */
.js-pop-caret {
position: absolute;
bottom: -7px;
right: 22px;
width: 13px;
height: 13px;
background: #fff;
border-right: 1px solid rgba(0, 0, 0, 0.08);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
transform: rotate(45deg);
}
/* ══ RESPONSIVE ══ */
/* Mobile: popup becomes a bottom sheet */
@media (max-width: 480px) {
.js-pop-handle {
display: block;
}
/* The trigger must be position:static so the popup can break out */
.js-review-trigger {
position: static;
}
.js-review-popup {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
border-radius: 18px 18px 0 0;
transform: translateY(100%);
transform-origin: bottom center;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
max-height: 80vh;
overflow-y: auto;
}
.js-review-popup.js-visible {
transform: translateY(0);
opacity: 1;
}
.js-pop-head {
padding: 20px 20px 16px;
}
.js-pop-num {
font-size: 38px;
}
.js-pop-bars {
padding: 16px 20px 28px;
}
.js-pbb-row {
margin-bottom: 12px;
}
.js-pbl {
font-size: 12px;
width: 40px;
}
.js-pbt {
height: 9px;
}
.js-pbp {
font-size: 12px;
width: 36px;
}
.js-pop-caret {
display: none;
}
}
/* ===== css/free-ads.css ===== */
#load-more-btn {
margin-top: 10px;
padding: 11px 36px;
background-color: #008374;
color: #fff;
border: none;
border-radius: 28px;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.6px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-width: 168px;
font-family: inherit;
transition: background-color 0.22s ease, transform 0.13s ease, box-shadow 0.22s ease;
outline: none;
position: relative;
box-shadow: 0 2px 0 rgba(0,100,85,0.22);
}
#load-more-btn:hover:not(:disabled) {
background-color: #006b5e;
box-shadow: 0 4px 0 rgba(0,80,68,0.22);
transform: translateY(-2px);
}
#load-more-btn:active:not(:disabled) {
background-color: #005a4e;
transform: translateY(1px);
box-shadow: 0 1px 0 rgba(0,80,68,0.18);
}
#load-more-btn:disabled {
cursor: not-allowed;
opacity: 0.55;
box-shadow: none;
}
.lm-icon {
width: 15px; height: 15px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.lm-spinner {
width: 15px; height: 15px;
display: block; flex-shrink: 0;
border-radius: 50%;
position: relative;
background: conic-gradient(
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.18) 40%,
rgba(255,255,255,0.95) 100%
);
animation: lm-spin 0.75s linear infinite;
}
.lm-spinner::before {
content: '';
position: absolute;
inset: 2.5px;
background: #008374;
border-radius: 50%;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }
/* ===== css/detail-page.css ===== */
/* Static fallback for the listing detail page.
The detail markup uses Tailwind/Daisy classes; this keeps the page stable
when the detail view is loaded inside the SPA without the Tailwind browser runtime. */
#listing-detail-view {
background: #f8fafc;
min-height: 100vh;
color: #313131;
}
.server-error-state {
min-height: min(720px, 100vh);
width: 100%;
display: grid;
place-items: center;
padding: 44px 16px;
background:
radial-gradient(circle at 18% 16%, rgba(0, 131, 116, .12), transparent 28%),
radial-gradient(circle at 84% 78%, rgba(246, 187, 38, .17), transparent 26%),
#ededed;
}
.server-error-card {
width: min(680px, 100%);
text-align: center;
background: #fff;
border: 1px solid rgba(0, 131, 116, .16);
border-radius: 20px;
padding: 34px 28px;
box-shadow: 0 24px 70px rgba(49, 49, 49, .14);
}
.server-error-visual {
width: 76px;
height: 76px;
margin: 0 auto 18px;
border-radius: 24px;
display: grid;
place-items: center;
color: #f6bb26;
background: linear-gradient(135deg, #005a4a, #008374);
box-shadow: 0 16px 36px rgba(0, 131, 116, .25);
}
.server-error-visual svg {
width: 38px;
height: 38px;
stroke: currentColor;
}
.server-error-code {
margin-bottom: 8px;
color: #008374;
font-size: 12px;
font-weight: 900;
letter-spacing: .16em;
text-transform: uppercase;
}
.server-error-card h1 {
margin: 0;
color: #17213b;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.08;
font-weight: 900;
}
.server-error-card p {
max-width: 520px;
margin: 14px auto 0;
color: #5f6f8c;
font-size: 16px;
line-height: 1.65;
}
.server-error-context {
color: #17213b !important;
font-weight: 800;
}
.server-error-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.server-error-action {
min-height: 44px;
border: 0;
border-radius: 999px;
padding: 0 22px;
background: #008374;
color: #fff;
font-weight: 900;
cursor: pointer;
}
.server-error-action.secondary {
background: #313131;
}
#listing-detail-view > .navbar {
display: none;
}
#listing-detail-view #teal-bg-ext,
body > #teal-bg-ext {
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 400px;
background: #007769;
border-radius: 0 0 24px 24px;
z-index: 0;
}
#listing-detail-view main.container,
#listing-detail-view main.detail-container,
body > main.container {
position: relative;
z-index: 1;
width: min(100% - 32px, 1152px);
margin: 0 auto;
padding: 32px 0;
display: flex;
flex-direction: column;
gap: 32px;
}
#listing-detail-view .text-center,
body > main .text-center {
text-align: center;
}
#listing-detail-view .gsap-fade-up,
body > main .gsap-fade-up {
opacity: 1;
transform: none;
}
#listing-detail-view main > .space-y-4:first-child,
#listing-detail-view main.detail-container > .gsap-fade-up:first-child,
body > main > .space-y-4:first-child {
color: #fff;
}
#listing-detail-view main h1,
body > main h1 {
margin: 0;
color: #fff;
font-size: clamp(28px, 3vw, 42px);
line-height: 1.15;
font-weight: 800;
}
#listing-detail-view main > .space-y-4:first-child > div,
#listing-detail-view main.detail-container > .gsap-fade-up:first-child > div,
body > main > .space-y-4:first-child > div {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
color: rgba(255, 255, 255, .78);
}
#listing-detail-view main > .card:first-of-type,
body > main > .card:first-of-type {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
overflow: hidden;
border-radius: 22px;
background: #007769;
color: #fff;
box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
}
#listing-detail-view main > .card:first-of-type figure,
body > main > .card:first-of-type figure {
position: relative;
min-height: 420px;
margin: 0;
}
#listing-detail-view main > .card:first-of-type figure img,
body > main > .card:first-of-type figure img {
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
display: block;
}
#listing-detail-view main > .card:first-of-type figure > div,
body > main > .card:first-of-type figure > div {
position: absolute;
right: 24px;
bottom: 24px;
min-width: 140px;
padding: 10px 18px;
border-radius: 999px;
background: rgba(49, 49, 49, .55);
color: #fff;
font-size: 20px;
font-weight: 800;
text-align: center;
border: 1px solid rgba(255, 255, 255, .2);
backdrop-filter: blur(10px);
}
#listing-detail-view .card-body,
body > main .card-body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 22px;
padding: 32px;
background: #313131;
}
#listing-detail-view .card-body svg,
body > main .card-body svg {
width: 18px;
height: 18px;
}
#listing-detail-view .card-body > .flex:first-child,
body > main .card-body > .flex:first-child {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, .9);
font-size: 14px;
font-weight: 600;
}
#listing-detail-view .card-body .grid,
body > main .card-body .grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
#listing-detail-view .card-body .grid > div,
body > main .card-body .grid > div {
padding: 14px;
border-radius: 14px;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .18);
}
#listing-detail-view .card-body small,
body > main .card-body small {
display: block;
margin-bottom: 4px;
color: rgba(255, 255, 255, .68);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
}
#listing-detail-view .card-body .grid span,
body > main .card-body .grid span {
color: #fff;
font-size: 18px;
font-weight: 800;
}
#listing-detail-view .card-actions,
body > main .card-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
}
#listing-detail-view .btn,
body > main .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 22px;
border-radius: 16px;
border: 1px solid transparent;
font-weight: 800;
cursor: pointer;
}
#listing-detail-view .card-actions .btn:first-child,
body > main .card-actions .btn:first-child {
background: #007769;
color: #fff;
}
#listing-detail-view .card-actions .btn:last-child,
body > main .card-actions .btn:last-child {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
#listing-detail-view #detail-tabs,
body > main #detail-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
background: #008374;
}
#listing-detail-view #detail-tabs .tab,
body > main #detail-tabs .tab {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
color: rgba(255, 255, 255, .72);
font-size: 20px;
font-weight: 800;
border-bottom: 3px solid transparent;
}
#listing-detail-view #detail-tabs .tab-active,
body > main #detail-tabs .tab-active {
color: #fff;
border-bottom-color: #f6bb26;
}
#listing-detail-view main > .bg-\[\#008374\],
body > main > .bg-\[\#008374\] {
overflow: hidden;
border-radius: 18px;
background: #008374;
box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
}
#listing-detail-view .custom-tab-content,
body > main .custom-tab-content {
padding: 28px;
background: #fff;
color: #313131;
}
#listing-detail-view .custom-tab-content.hidden,
body > main .custom-tab-content.hidden {
display: none;
}
#listing-detail-view .custom-tab-content h3,
body > main .custom-tab-content h3 {
margin: 0 0 14px;
color: #111;
font-size: 20px;
font-weight: 800;
}
#listing-detail-view .custom-tab-content p,
body > main .custom-tab-content p {
color: #313131;
line-height: 1.7;
}
#listing-detail-view .custom-tab-content .grid,
body > main .custom-tab-content .grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
}
#listing-detail-view .custom-tab-content .grid > div,
body > main .custom-tab-content .grid > div {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
#listing-detail-view main > .space-y-4:last-of-type,
body > main > .space-y-4:last-of-type {
display: flex;
flex-direction: column;
gap: 16px;
}
#listing-detail-view .collapse,
body > main .collapse {
overflow: hidden;
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}
#listing-detail-view .collapse-title,
body > main .collapse-title {
padding: 18px 22px;
background: #007769;
color: #fff;
font-size: 20px;
font-weight: 800;
}
#listing-detail-view .collapse-content,
body > main .collapse-content {
padding: 0 22px 18px;
color: #111;
}
#listing-detail-view footer {
display: none;
}
@media (max-width: 900px) {
#listing-detail-view main > .card:first-of-type,
body > main > .card:first-of-type {
grid-template-columns: 1fr;
}
#listing-detail-view main > .card:first-of-type figure,
#listing-detail-view main > .card:first-of-type figure img,
body > main > .card:first-of-type figure,
body > main > .card:first-of-type figure img {
min-height: 300px;
}
#listing-detail-view .custom-tab-content .grid,
body > main .custom-tab-content .grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
#listing-detail-view main.container,
#listing-detail-view main.detail-container,
body > main.container {
width: min(100% - 20px, 1152px);
padding: 20px 0;
gap: 20px;
}
#listing-detail-view .card-body,
body > main .card-body {
padding: 22px;
}
#listing-detail-view .card-body .grid,
body > main .card-body .grid,
#listing-detail-view #detail-tabs,
body > main #detail-tabs {
grid-template-columns: 1fr;
}
}
/* ===== css/video-widget.css ===== */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
#vid-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s ease, background-color 0.35s ease, visibility 0.35s;
}
#vid-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: all;
background-color: rgba(0, 0, 0, 0.88);
}
#vid-box {
position: relative;
width: min(880px, 95vw);
}
#vid-close {
position: absolute;
top: -40px;
right: 0;
background: none;
border: none;
color: #fff;
font-size: 28px;
cursor: pointer;
line-height: 1;
opacity: 0.8;
transition: opacity 0.2s;
}
#vid-close:hover {
opacity: 1;
}
#vid-frame {
position: relative;
padding-bottom: 56.25%;
background: #000;
border-radius: 10px;
overflow: hidden;
}
#vid-player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
outline: none;
}
#vid-spinner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
#vid-spin-circle {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}