/* Sewa Rent — home template */
.sewa-hero{position:relative;background-size:cover;background-position:center;padding:120px 0 90px;color:var(--sewa-white);text-align:center}
.sewa-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--sewa-hero-rgb),.35),rgba(var(--sewa-hero-rgb),.65))}
.sewa-hero .container,.sewa-cta .container{position:relative;z-index:2}
/* 2.63 hero photo: <picture> under the overlay (media.php sewa_rent_media_home_hero_html); object-position set inline per photo */
.sewa-hero--photo{background-color:rgb(var(--sewa-hero-rgb))}
.sewa-hero-media,.sewa-hero-media img{position:absolute;inset:0;width:100%;height:100%;margin:0}
.sewa-hero-media img{display:block;max-width:none;object-fit:cover}
/* phones: the title sits on bright sky — denser top of the overlay keeps white text ≥ 4.5:1 (sub) / ≥ 3:1 (title), measured 2.63 */
@media (max-width:767px){.sewa-hero--photo .sewa-hero-overlay{background:linear-gradient(180deg,rgba(var(--sewa-hero-rgb),.5),rgba(var(--sewa-hero-rgb),.65))}}
.sewa-hero-title{color:var(--sewa-white);font-size:46px;font-weight:600;line-height:1.15;margin:0 0 14px}
.sewa-hero-sub{color:rgba(var(--sewa-white-rgb),.9);font-size:19px;margin:0 0 30px}
.sewa-hero-search{background:var(--sewa-white);border-radius:50px;padding:8px;box-shadow:0 12px 40px rgba(var(--sewa-black-rgb),.25);text-align:left}
.sewa-hero-search .main-search-input{box-shadow:none;margin:0;border-radius:50px;padding:0;min-height:0}
.sewa-hero-search .main-search-input-item{height:56px;border-color:var(--sewa-grey-ee)}
.sewa-hero-search .main-search-input-item input,.sewa-hero-search .main-search-input-item .chosen-single,.sewa-hero-search .main-search-input-item .chosen-container{height:56px!important;line-height:56px!important;font-size:15px}
.sewa-hero-search .main-search-input-item input{padding-left:20px}
.sewa-hero-search button.button,.sewa-hero-search .main-search-input button{height:56px;line-height:56px;padding:0 32px;border-radius:50px;font-size:16px;margin:0}
.sewa-hero-chips{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sewa-hero-chips a{color:var(--sewa-white);background:rgba(var(--sewa-white-rgb),.16);border:1px solid rgba(var(--sewa-white-rgb),.4);border-radius:50px;padding:9px 18px;font-size:15px;transition:.2s}
.sewa-hero-chips a:hover{background:var(--sewa-white);color:var(--sewa-grey-22)}
.sewa-section{padding:70px 0}
.sewa-section-grey{background:var(--sewa-bg-soft)}
.sewa-section-head{text-align:center;margin-bottom:36px}
.sewa-section-head h2{font-size:32px;margin:0 0 8px}
.sewa-section-head p{color:var(--sewa-muted);font-size:17px;margin:0}
.sewa-type-card{display:block;position:relative;height:340px;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;color:var(--sewa-white);margin-bottom:30px;box-shadow:0 6px 24px rgba(var(--sewa-black-rgb),.08);transition:transform .25s}
.sewa-type-card:hover{transform:translateY(-4px);color:var(--sewa-white)}
.sewa-type-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--sewa-black-rgb),0) 30%,rgba(var(--sewa-black-rgb),.78))}
.sewa-type-card-content{position:absolute;left:0;right:0;bottom:0;padding:26px}
.sewa-type-card-content i{font-size:26px;margin-bottom:8px;display:block}
.sewa-type-card-content h3{color:var(--sewa-white);font-size:24px;margin:0 0 6px}
.sewa-type-card-content p{color:rgba(var(--sewa-white-rgb),.85);margin:0 0 12px;font-size:15px;line-height:1.4}
.sewa-type-count{display:inline-block;background:rgba(var(--sewa-white-rgb),.2);border-radius:50px;padding:4px 12px;font-size:13px}
.sewa-featured .listings-container{margin-top:0}
.sewa-featured .fs-switcher,.sewa-featured .list-top-buttons,.sewa-featured .pagination-container{display:none}
.sewa-region-card{display:flex;align-items:center;gap:14px;height:110px;border-radius:12px;padding:0 26px;color:var(--sewa-white);font-size:20px;font-weight:600;margin-bottom:30px;background:linear-gradient(135deg,var(--sewa-tone-1-from),var(--sewa-tone-1-to));transition:transform .25s}
.sewa-region-card:hover{transform:translateY(-3px);color:var(--sewa-white)}
.sewa-region-card i{font-size:22px;opacity:.9}
/* Destination cards: tone by position (regions come from the taxonomy, see sewa_rent_srch_home_destinations()). */
.sewa-region-tone-2{background:linear-gradient(135deg,var(--sewa-tone-2-from),var(--sewa-tone-2-to))}
.sewa-region-tone-3{background:linear-gradient(135deg,var(--sewa-tone-3-from),var(--sewa-tone-3-to))}
.sewa-region-tone-4{background:linear-gradient(135deg,var(--sewa-tone-4-from),var(--sewa-tone-4-to))}
.sewa-region-tone-5{background:linear-gradient(135deg,var(--sewa-tone-5-from),var(--sewa-tone-5-to))}
.sewa-region-tone-6{background:linear-gradient(135deg,var(--sewa-tone-6-from),var(--sewa-tone-6-to))}
.sewa-region-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sewa-region-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sewa-region-count{font-size:14px;font-weight:400;opacity:.92;margin-top:4px}
.sewa-hero-chips a:focus-visible,.sewa-type-card:focus-visible,.sewa-region-card:focus-visible{outline:3px solid var(--sewa-white);outline-offset:3px;box-shadow:0 0 0 6px var(--sewa-navy)}
.sewa-step{background:var(--sewa-white);border-radius:14px;padding:36px 28px 28px;position:relative;text-align:center;height:100%;min-height:230px;box-shadow:0 4px 18px rgba(var(--sewa-black-rgb),.05);margin-bottom:30px}
.sewa-step-num{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:var(--sewa-accent);color:var(--sewa-white);font-weight:700;line-height:34px}
.sewa-step i{font-size:30px;color:var(--sewa-accent);margin-bottom:14px}
.sewa-step h4{font-size:19px;margin:0 0 8px}
.sewa-step p{color:var(--sewa-muted);margin:0;font-size:15px}
.sewa-cta{position:relative;background-size:cover;background-position:center;padding:90px 0;color:var(--sewa-white);text-align:center}
.sewa-cta-inner h2{color:var(--sewa-white);font-size:34px;margin:0 0 12px}
.sewa-cta-inner p{color:rgba(var(--sewa-white-rgb),.9);font-size:18px;margin:0 0 26px}
.sewa-cta-button{background:var(--sewa-white)!important;color:var(--sewa-grey-22)!important;font-size:17px;padding:14px 32px;border-radius:50px}
@media (max-width:767px){.sewa-hero{padding:80px 0 60px}.sewa-hero-title{font-size:32px}.sewa-section{padding:50px 0}.sewa-type-card{height:260px}}

.sewa-type-cards .col-md-3 .sewa-type-card{height:300px}
.sewa-type-card-grad:before{background:linear-gradient(180deg,rgba(var(--sewa-black-rgb),.05) 30%,rgba(var(--sewa-black-rgb),.45))}
.sewa-grad-villa{background:linear-gradient(135deg,var(--sewa-cat-villa-from),var(--sewa-cat-villa-to))}
.sewa-grad-equipment{background:linear-gradient(135deg,var(--sewa-warn),var(--sewa-cat-equipment-to))}
.sewa-grad-aircraft{background:linear-gradient(135deg,var(--sewa-cat-aircraft-from),var(--sewa-cat-aircraft-to))}
.sewa-grad-helicopter{background:linear-gradient(135deg,var(--sewa-cat-helicopter-from),var(--sewa-cat-helicopter-to))}
.sewa-type-icon{display:block;margin-bottom:8px;line-height:0}
.sewa-type-icon svg{width:30px;height:30px}
@media (max-width:991px){.sewa-type-cards .col-md-3 .sewa-type-card{height:240px}}

/* Hero chips in two deliberate rows (4 + 3) and the excavator chip icon. */
.sewa-chip-break{flex-basis:100%;height:0;margin:-4px 0 0}
.sewa-hero-chips a{display:inline-flex;align-items:center;gap:7px;line-height:1.2}
.sewa-chip-icon{display:inline-flex;line-height:0}
.sewa-chip-icon svg{width:18px;height:18px}
@media (max-width:767px){.sewa-chip-break{display:none}}
/* Cars card gradient (photo was a boat). */
.sewa-grad-car{background:linear-gradient(135deg,var(--sewa-cat-car-from),var(--sewa-cat-car-to))}
/* Mobile hero search: no big white container — three separate white fields + a full-width Search button (owner request). */
@media (max-width:991px){
	.sewa-hero-search .main-search-input{background:transparent;box-shadow:none;padding:0;border-radius:0;display:flex;flex-direction:column;gap:10px}
	.sewa-hero-search .main-search-input-item{background:var(--sewa-white);border-radius:14px;margin:0;padding:0 16px;border:0;box-shadow:0 4px 14px rgba(var(--sewa-black-rgb),.08);min-height:54px;display:flex;align-items:center;position:relative}
	.sewa-hero-search .main-search-input-item input,.sewa-hero-search .main-search-input-item .chosen-container,.sewa-hero-search .main-search-input-item .chosen-single{background:transparent;border:0;box-shadow:none;height:54px;line-height:54px;padding-left:0;font-size:16px;width:100%}
	.sewa-hero-search .main-search-input-item .chosen-single div b{top:12px}
	.sewa-hero-search .main-search-input-item.location a{right:14px}
	.sewa-hero-search .main-search-input-item.location .tip,.sewa-hero-search .main-search-input-item.location .tip-content{display:none}
	.sewa-hero-search .main-search-input > button.button{width:100%;height:54px;border-radius:50px;margin:2px 0 0;font-size:17px;font-weight:600;box-shadow:0 8px 24px rgba(var(--sewa-accent-rgb),.28)}
}
@media (max-width:991px){
	.sewa-hero-search{background:transparent;padding:0;border-radius:0;box-shadow:none}
	.sewa-hero-search .main-search-input-item,.sewa-hero-search .main-search-input-item > div{width:100%}
}
/* Hero "Dates" field (TRACKER 2.50, sewa-rent-core search-dates): desktop = 4th segment of the pill; phones = Category and
   Dates share one row (no extra height), the full-width Search button stays below. */
.sewa-hero-search .main-search-input-item.sewa-dates{flex:0 0 180px;padding:0;border-left:1px solid var(--sewa-grey-ee)}
@media (min-width:992px){.sewa-hero-search .main-search-input > .main-search-input-item:is(.select-taxonomy,.sewa-category){flex:0 0 190px}}
/* Visual review N4 (1440): the keyword field gets the larger share so "What are you looking for?" / "Semua kategori" fit. */
@media (min-width:992px){
	.sewa-hero-search .main-search-input > .main-search-input-item.text{flex:1.6 1 0;min-width:0}
	.sewa-hero-search .main-search-input > .main-search-input-item:is(.location,.sewa-location){flex:1 1 0;min-width:0}
	.sewa-hero-search .main-search-input > .main-search-input-item:is(.select-taxonomy,.sewa-category){flex:0 0 205px;min-width:0}
	.sewa-hero-search .main-search-input-item input{text-overflow:ellipsis}
}
@media (min-width:1200px){.sewa-hero-search{margin-left:-50px;margin-right:-50px}}
.sewa-hero-search .main-search-input-item.sewa-dates .sewa-dates-field{height:100%}
.sewa-hero-search .main-search-input .sewa-dates-trigger{height:56px;min-height:56px;border:0;border-radius:0;background:transparent;padding:0 22px 0 24px;font-size:15px;line-height:1.2;color:var(--sewa-grey-88);box-shadow:none}
.sewa-hero-search .main-search-input .sewa-dates-trigger.has-value{color:var(--sewa-text)}
@media (max-width:991px){
	.sewa-hero-search .main-search-input{flex-direction:row;flex-wrap:wrap}
	.sewa-hero-search .main-search-input > .main-search-input-item{flex:0 0 100%}
	.sewa-hero-search .main-search-input > .main-search-input-item:is(.select-taxonomy,.sewa-category),.sewa-hero-search .main-search-input > .main-search-input-item.sewa-dates{flex:0 0 calc(50% - 5px);width:calc(50% - 5px);min-width:0}
	.sewa-hero-search .main-search-input-item.sewa-dates{border-left:0;padding:0}
	.sewa-hero-search .main-search-input .sewa-dates-trigger{height:54px;min-height:54px;padding:0 12px 0 16px;font-size:16px;border-radius:14px}
	.sewa-hero-search .main-search-input .sewa-dates-trigger .fa{display:none} /* half-width field: room for "Pick-up – Return" */
	.sewa-hero-search .main-search-input > button.button{flex:0 0 100%}
}

/* ---------- Visual review 2026-10-08 ---------- */
/* #22 AA contrast: card text over photos (Motorbikes sunset) and the partner banner over waves. */
.sewa-type-card:before{background:linear-gradient(180deg,rgba(var(--sewa-black-rgb),.05) 0%,rgba(var(--sewa-black-rgb),.35) 45%,rgba(var(--sewa-black-rgb),.86) 100%)}
.sewa-type-card-content h3,.sewa-type-card-content p,.sewa-type-count{text-shadow:0 1px 3px rgba(var(--sewa-black-rgb),.55)}
.sewa-type-card-content p{color:var(--sewa-white)}
.sewa-type-count{font-size:14px;background:rgba(var(--sewa-black-rgb),.38)}
.sewa-cta .sewa-hero-overlay{background:linear-gradient(180deg,rgba(var(--sewa-hero-rgb),.62),rgba(var(--sewa-hero-rgb),.78))}
.sewa-cta-inner h2,.sewa-cta-inner p{text-shadow:0 1px 4px rgba(var(--sewa-black-rgb),.45)}
.sewa-cta-inner p{color:var(--sewa-white)}
/* #22 the 3-card second row is centred instead of leaving a hole on the right. */
@media (min-width:992px){.sewa-type-cards{display:flex;flex-wrap:wrap;justify-content:center}.sewa-type-cards:before,.sewa-type-cards:after{display:none}}
/* Tap targets >= 44px: hero chips, market picker, partner CTA. */
@media (max-width:991px){
	.sewa-hero-chips a,.sewa-cta-button{min-height:44px}
	.sewa-cta-button{display:inline-flex;align-items:center;justify-content:center}
}

/* #10 Phones: the home page was ~9 900px of stacked full-width cards. Categories, featured listings, destinations and
   "How it works" become horizontal snap rows (next card peeks in), sections are tighter. Desktop is unchanged. */
@media (max-width:767px){
	.sewa-section{padding:36px 0}
	.sewa-section-head{margin-bottom:16px}
	.sewa-section-head h2{font-size:24px}
	.sewa-section-head p{font-size:15px}
	.sewa-type-cards,.sewa-regions,.sewa-steps,.sewa-featured #listeo-listings-container{display:flex!important;flex-wrap:nowrap;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 15px;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -15px;padding:4px 15px 12px}
	.sewa-type-cards::-webkit-scrollbar,.sewa-regions::-webkit-scrollbar,.sewa-steps::-webkit-scrollbar,.sewa-featured #listeo-listings-container::-webkit-scrollbar{display:none}
	.sewa-type-cards:before,.sewa-type-cards:after,.sewa-regions:before,.sewa-regions:after,.sewa-steps:before,.sewa-steps:after{display:none}
	.sewa-type-cards > div,.sewa-regions > div,.sewa-steps > div{flex:0 0 70%;max-width:70%;min-width:0;padding:0;float:none;scroll-snap-align:start}
	.sewa-type-cards .col-md-3 .sewa-type-card,.sewa-type-card{height:200px;margin:0}
	.sewa-type-card-content{padding:18px}
	.sewa-type-card-content h3{font-size:20px}
	.sewa-type-card-content p{font-size:14px;margin-bottom:8px}
	.sewa-regions > div{flex-basis:58%;max-width:58%}
	.sewa-region-card{height:84px;margin:0;padding:0 18px;font-size:17px}
	.sewa-steps{padding-top:20px}
	.sewa-steps > div{flex-basis:76%;max-width:76%}
	.sewa-step{min-height:0;margin:0;padding:30px 20px 20px}
	.sewa-featured #listeo-listings-container > .listing-card-container-nl,.sewa-featured #listeo-listings-container > div:not(.loader-ajax-container){flex:0 0 82%;max-width:82%;min-width:0;margin:0!important;scroll-snap-align:start}
	.sewa-cta{padding:52px 0}
	.sewa-cta-inner h2{font-size:26px}
	.sewa-cta-inner p{font-size:16px}
}
/* TRACKER 2.57: hero = "What do you want to rent?" (sewa-category, catalogue order) → Location → Dates → Search; no free-text
   field, no category chips. Desktop: one pill, the category gets the larger share; phones: three full-width fields. */
.sewa-hero-search .main-search-input-item.sewa-category .sewa-category-field,.sewa-hero-search .main-search-input-item.sewa-location .sewa-location-field{width:100%;height:100%}
.sewa-hero-search :is(.sewa-category,.sewa-location) .bootstrap-select .dropdown-toggle .filter-option{max-width:none;width:calc(100% - 20px)} /* Listeo caps the hero select text at 200px ("What do you want to re…") */
@media (min-width:992px){
	.sewa-hero-search .main-search-input > .main-search-input-item.sewa-category{flex:1.2 1 0;min-width:0}
	.sewa-hero-search .main-search-input > .main-search-input-item.sewa-category + .main-search-input-item:is(.location,.sewa-location){border-left:1px solid var(--sewa-grey-ee)}
	.sewa-hero-search :is(.sewa-category,.sewa-location) .bootstrap-select .dropdown-menu{min-width:320px}
}
@media (max-width:991px){
	.sewa-hero-search .main-search-input > .main-search-input-item.sewa-category,.sewa-hero-search .main-search-input > .main-search-input-item.sewa-dates{flex:0 0 100%;width:100%}
	.sewa-hero-search .main-search-input .sewa-dates-trigger .fa{display:inline-block}
}
/* Home category cards for drivers, kos, guides (gradient art like villas/equipment). */
.sewa-grad-driver{background:linear-gradient(135deg,var(--sewa-cat-driver-from),var(--sewa-cat-driver-to))}
.sewa-grad-kos{background:linear-gradient(135deg,var(--sewa-cat-kos-from),var(--sewa-cat-kos-to))}
.sewa-grad-guide{background:linear-gradient(135deg,var(--sewa-cat-guide-from),var(--sewa-cat-guide-to))}

/* ---------- Readability pass (TRACKER 2.95, docs/review/readability-2026-10-11.md) ---------- */
/* Text over photos / gradient tiles: a scrim right under the text block (the photo top stays bright); card titles are
   bold so 20px phone titles count as large text (3:1). */
.sewa-type-card-content{background:linear-gradient(180deg,rgba(var(--sewa-black-rgb),0) 0,rgba(var(--sewa-black-rgb),.42) 48px,rgba(var(--sewa-black-rgb),.6) 100%)}
.sewa-type-card-content h3{font-weight:700}
.sewa-region-card{position:relative;isolation:isolate}
.sewa-region-card:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--sewa-photo-scrim)}
.sewa-region-count{opacity:1}
/* Location "use my position" icon: 44px tap target. */
.sewa-hero-search .main-search-input-item.location a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;right:8px}
@media (max-width:767px){
	.sewa-section-head p,.sewa-step p{font-size:16px;line-height:1.5}
	.sewa-type-card-content p{font-size:15px;line-height:1.4} /* caption on a 70%-wide card; 16px pushed the icon out in de/ru */
	.sewa-type-cards .col-md-3 .sewa-type-card,.sewa-type-card{height:228px}
}