/* ub-home-v1: homepage order, categories, hero search fit, newsletter, footer featured listings */
.hero{min-height:0;padding-top:64px;padding-bottom:76px}
.search-bar{width:min(1040px,100%);max-width:100%;box-sizing:border-box;padding:8px 8px 8px 10px}
.search-field{min-height:54px;padding:2px 12px;gap:9px}
.sf-ico{width:34px;height:34px}.sf-ico .ico{width:17px;height:17px}
.search-field label{font-size:12px}
.search-field input,.search-field select{font-size:13px;text-overflow:ellipsis}
.search-bar .button{min-width:128px;min-height:50px;font-size:15px}
@media (min-width:1181px){.search-bar{grid-template-columns:1.2fr 1fr 1fr .8fr auto}}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 14px;border:1px solid #e2eaf3;border-radius:16px;background:#fff;text-align:center;text-decoration:none;transition:box-shadow .15s,transform .15s}
.cat-card:hover{box-shadow:0 10px 26px rgba(15,42,92,.10);transform:translateY(-2px)}
.cat-card h3{margin:0;color:var(--navy,#0f2a5c);font-size:15px}
.cat-grid:not(.is-open) .cat-card:nth-child(n+9){display:none}
.cat-more{display:flex;justify-content:center;margin-top:18px}
@media (max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr)}.cat-grid:not(.is-open) .cat-card:nth-child(n+5){display:none}}
.ub-news{display:flex;flex-direction:column;gap:16px}
.ub-news .button{width:100%;justify-content:center}
.f-listing{display:flex;align-items:center;gap:10px;margin-bottom:10px;text-decoration:none}
.f-listing img{width:72px;height:54px;flex:none;object-fit:cover;border-radius:8px;background:#1b3b6b}
.f-listing span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.f-listing b{font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.f-listing small{opacity:.8}

/* ub-news-v3: newsletter box 20% bigger, section space -10%, button with white space, hero title -2px */
.section.ub-news-sec{padding:54px 0}
.ub-news{max-width:552px;margin:0 auto;padding:24px 28px!important;gap:12px}
.ub-news h2{margin:0 0 5px;font-size:23px}
.ub-news p{font-size:15px;line-height:1.5}
.ub-news .field{margin:0}
.ub-news label{font-size:14px}
.ub-news input{min-height:48px!important;font-size:16px}
.ub-news .button{width:auto;min-width:260px;min-height:50px;align-self:center;margin:10px 0 6px;font-size:16px}
.hero h1{font-size:clamp(38px,calc(5.4vw - 2px),66px)}


/* ub-book-v5: listing card footer with Book button (as in the mockup) */
.stay-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #e6edf5}
.stay-card-foot .stay-card-price{margin:0}
.ub-book-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;background:#1a6ee8;color:#fff;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.ub-book-btn:hover{background:#1558c0;color:#fff}
.stay-card .icon-button{color:#e5383b}

/* ub-hero-v5: hero section ~15% taller; only the main title ("Find Your Perfect Stay Anywhere!") 2px smaller and 10% lighter */
.hero{padding-top:100px;padding-bottom:114px}
.hero h1{font-size:clamp(36px,calc(5.4vw - 4px),64px);font-weight:720}

/* ub-home-v9 */
/* hero search form about 15% smaller on tablets and desktops; phones keep full-size tap targets */
@media (min-width:801px){
 .search-bar{width:min(884px,100%);padding:7px 7px 7px 9px}
 .search-field{min-height:46px;padding:2px 10px;gap:8px}
 .sf-ico{width:29px;height:29px}.sf-ico .ico{width:14px;height:14px}
 .search-field label{font-size:10.5px}
 .search-field input,.search-field select{font-size:12.5px}
 .search-bar .button{min-width:109px;min-height:43px;font-size:13.5px}
}
/* Google suggestions under the hero form follow the same smaller size */
.ub-pl.ub-pl-hero{border-radius:14px}
.ub-pl-hero .ub-pl-item{gap:10px;padding:9px 13px}
.ub-pl-hero .ub-pl-pin{width:29px;height:29px}
.ub-pl-hero .ub-pl-main{font-size:13px}.ub-pl-hero .ub-pl-sec{font-size:11.5px}.ub-pl-hero .ub-pl-foot{padding:6px 13px 8px;font-size:11px}
/* accommodation type counts */
.cat-card h3 .ub-count{color:#64748b;font-weight:600}
/* cards: same height in a row, price and Book always line up */
.stay-card{display:flex;flex-direction:column}
.stay-card-body{display:flex;flex-direction:column;flex:1 1 auto}
.stay-card-foot{margin-top:auto}
/* safety net: runaway arrow icons inside any page-number bar stay small */
nav[role="navigation"] svg:not([width]),.pagination svg:not([width]){max-width:20px;max-height:20px}
/* app-like swipe rows on phones */
@media (max-width:700px){
 .stay-grid.ub-snap{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none}
 .stay-grid.ub-snap::-webkit-scrollbar{display:none}
 .stay-grid.ub-snap > *{flex:0 0 80%;max-width:80%;scroll-snap-align:start}
 .ub-book-btn,.search-bar .button{min-height:44px}
}

/* ub-home-v11 */
/* hero search form 20% taller, with text and icons scaled to match (tablets and desktops; phones unchanged) */
@media (min-width:801px){
 .search-bar{width:min(884px,100%);padding:7px 8px 7px 11px}
 .search-field{min-height:58px;padding:2px 12px;gap:10px}
 .sf-ico{width:35px;height:35px}.sf-ico .ico{width:17px;height:17px}
 .search-field label{font-size:12.5px}
 .search-field input,.search-field select{font-size:15px}
 .search-bar .button{min-width:131px;min-height:52px;font-size:16px}
}
/* Google suggestions under the hero form, scaled the same way */
.ub-pl-hero .ub-pl-item{gap:12px;padding:11px 16px}
.ub-pl-hero .ub-pl-pin{width:35px;height:35px}
.ub-pl-hero .ub-pl-main{font-size:15.5px}.ub-pl-hero .ub-pl-sec{font-size:14px}.ub-pl-hero .ub-pl-foot{padding:7px 16px 10px;font-size:13px}

/* ub-home-v10 */
/* Most viewed: 8 stays as 4 over 4 on desktop, 2 across on tablets, swipe row on phones */
@media (min-width:1000px){.stay-grid.ub-four{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:701px) and (max-width:999px){.stay-grid.ub-four{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ub-home-v12 */
/* scroll animation on the first row of the 4-over-4 card grid only; the second row is simply shown */
@media (min-width:1000px){
 .stay-grid.ub-four > :nth-child(n+5):not(:hover){opacity:1!important;transform:none!important;animation:none!important;visibility:visible!important}
}
@media (min-width:701px) and (max-width:999px){
 .stay-grid.ub-four > :nth-child(n+3):not(:hover){opacity:1!important;transform:none!important;animation:none!important;visibility:visible!important}
}