/* Umrah Room — 2026 redesign layer
   Loaded last so the existing PHP/CMS structure remains intact. */

:root{
  --blue:#0878ff;
  --blue-700:#0562dc;
  --blue-800:#064fae;
  --navy:#071b35;
  --navy-2:#0b294e;
  --ink:#122035;
  --text:#35445a;
  --muted:#6c7b90;
  --soft:#f4f7fb;
  --line:#e1e8f1;
  --line-strong:#cfd9e7;
  --gold:#d5ad59;
  --radius:15px;
  --radius-lg:22px;
  --shadow-xs:0 2px 8px rgba(7,27,53,.04);
  --shadow-sm:0 12px 30px rgba(7,27,53,.08);
  --shadow:0 24px 60px rgba(7,27,53,.12);
}

body{background:#fff;color:var(--text)}
.section{padding:92px 0}
.section-soft{background:#f5f8fc}
.section-heading h2{letter-spacing:-.045em}
.section-heading.signature-heading{max-width:none}
.eyebrow{letter-spacing:.11em}

/* Utility and primary navigation */
.utility-bar{position:relative;z-index:151;background:var(--navy);color:#dbe7f5;border-bottom:1px solid rgba(255,255,255,.08)}
.utility-bar-inner{height:34px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:.68rem}
.utility-location,.utility-contact{display:flex;align-items:center;gap:10px}
.utility-location svg{width:14px;height:14px;color:#7eb5ff}
.utility-contact>span{color:#9fb0c7}
.utility-contact>a{color:#f3f7fc;font-weight:700}
.utility-contact>a+a{padding-left:12px;border-left:1px solid rgba(255,255,255,.16)}
.utility-contact .utility-whatsapp{color:#7ee4a4}
.site-header{background:rgba(255,255,255,.97);border-bottom:1px solid #e8edf4}
.nav-row{height:76px;gap:28px}
.site-brand img{width:47px;height:47px;box-shadow:none}
.brand-copy strong{font-size:1.08rem}
.brand-copy span{font-size:.64rem}
.site-nav{gap:25px}
.site-nav>a{font-size:.77rem;font-weight:700}
.nav-actions{gap:10px}
.partner-nav-link{font-size:.76rem}
.nav-whatsapp{border-color:#d7e8df;background:#f4fbf7}

/* Homepage hero */
.v6-hero{min-height:690px}
.v6-hero .signature-hero-media:after{background:linear-gradient(90deg,rgba(5,22,46,.98) 0%,rgba(5,22,46,.94) 39%,rgba(5,22,46,.67) 66%,rgba(5,22,46,.34) 100%),linear-gradient(0deg,rgba(5,22,46,.72),transparent 60%)}
.v6-hero .signature-hero-media img{object-position:center 58%}
.v6-hero-grid{min-height:690px;grid-template-columns:minmax(0,680px) minmax(340px,400px);gap:72px;padding:58px 0 110px}
.v6-hero .signature-hero-copy{padding:20px 0}
.v6-hero h1{font-size:clamp(3.3rem,5.25vw,5.55rem);max-width:720px}
.v6-hero h1 em{color:#83baff}
.v6-hero .signature-hero-copy>p{font-size:1.02rem;max-width:620px;color:#d5dfec}
.v6-hero .site-btn.primary{background:#0878ff;box-shadow:0 14px 30px rgba(0,101,255,.25)}

.featured-stay-card{align-self:center;border:1px solid rgba(255,255,255,.34);border-radius:21px;background:rgba(255,255,255,.98);color:var(--text);overflow:hidden;box-shadow:0 30px 85px rgba(0,0,0,.25);backdrop-filter:blur(18px)}
.featured-stay-label{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#f3f7fd;color:#53657b;border-bottom:1px solid #e5ebf3;font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.featured-stay-label span{color:var(--gold)}
.featured-stay-photo{position:relative;display:block;height:190px;overflow:hidden;background:#dce6f1}
.featured-stay-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.featured-stay-card:hover .featured-stay-photo img{transform:scale(1.035)}
.featured-stay-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,22,46,.62),transparent 55%)}
.featured-stay-photo>span{position:absolute;left:14px;bottom:13px;z-index:1;padding:6px 9px;border:1px solid rgba(255,255,255,.38);border-radius:8px;background:rgba(7,27,53,.64);color:#fff;font-size:.61rem;font-weight:700;backdrop-filter:blur(8px)}
.featured-stay-content{padding:17px 18px 19px}
.featured-stay-meta{margin:0 0 5px;color:#78869a;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.featured-stay-content h2{margin:0 0 12px;font-size:1.14rem;line-height:1.25;color:var(--navy)}
.featured-stay-content .room-chip-row{margin-bottom:14px}
.featured-stay-content .site-btn{min-height:43px}
.featured-stay-content>small{display:block;margin-top:9px;color:#8290a3;font-size:.58rem;line-height:1.45;text-align:center}

/* Search and reassurance */
.v6-search-dock{margin-top:-55px}
.v6-search-dock .signature-search{border-radius:16px;box-shadow:0 22px 55px rgba(7,27,53,.18)}
.v6-search-dock .search-submit{min-width:145px;border-radius:11px;background:#0878ff}
.trust-strip-v6{border-bottom:1px solid var(--line);background:#fff}
.trust-strip-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:27px 0 25px}
.trust-strip-grid>div{display:flex;align-items:center;justify-content:center;gap:13px;padding:0 22px;border-right:1px solid var(--line)}
.trust-strip-grid>div:last-child{border-right:0}
.trust-icon{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:#eef5ff;color:var(--blue);font-size:.85rem;font-weight:800}
.trust-strip-grid p{margin:0;line-height:1.3}
.trust-strip-grid strong{display:block;color:var(--navy);font-family:var(--heading);font-size:.72rem}
.trust-strip-grid small{display:block;margin-top:4px;color:#8190a3;font-size:.6rem}

.v6-featured-section{padding-top:88px}
.featured-hotel-grid{gap:19px}

/* Stay type image tiles */
.stay-types-section{padding-top:85px}
.stay-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stay-type-grid>a{position:relative;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;border-radius:17px;overflow:hidden;color:#fff;background:var(--navy) var(--stay-image) center/cover no-repeat;isolation:isolate;box-shadow:var(--shadow-xs)}
.stay-type-grid>a:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,rgba(4,18,39,.93),rgba(4,18,39,.2) 72%);transition:background .25s ease}
.stay-type-grid>a:after{content:"→";position:absolute;right:20px;bottom:20px;width:31px;height:31px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:9px;background:rgba(255,255,255,.1);font-size:.85rem;transition:transform .2s ease}
.stay-type-grid>a:hover:before{background:linear-gradient(0deg,rgba(4,18,39,.96),rgba(4,18,39,.1) 78%)}
.stay-type-grid>a:hover:after{transform:translateX(3px)}
.stay-type-grid span{font-size:.61rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#b9d6ff}
.stay-type-grid strong{max-width:80%;margin-top:6px;font-family:var(--heading);font-size:1.13rem;line-height:1.25}
.stay-type-grid small{margin-top:6px;color:#d1dae6;font-size:.66rem}

/* Hotel cards */
.hotel-card-v6{border-radius:16px;box-shadow:0 5px 20px rgba(7,27,53,.06)}
.hotel-card-v6:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(7,27,53,.12)}
.hotel-card-v6 .hotel-image-wrap{display:block;aspect-ratio:16/9}
.hotel-photo-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,21,43,.34),transparent 55%)}
.hotel-card-v6 .image-top-row{left:12px;right:12px;top:12px;align-items:flex-start}
.hotel-card-v6 .city-label,.hotel-card-v6 .access-label{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:7px;font-family:var(--heading);font-size:.57rem;font-weight:800;box-shadow:0 4px 12px rgba(7,27,53,.12)}
.hotel-card-v6 .city-label{background:#fff;color:var(--blue)}
.hotel-card-v6 .access-label{max-width:62%;background:rgba(7,27,53,.76);color:#fff;line-height:1.3;backdrop-filter:blur(8px)}
.hotel-card-v6 .access-label svg{width:12px;height:12px;flex:0 0 auto}
.hotel-card-v6 .hotel-category{right:12px;bottom:11px;padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.93);color:#203550;font-size:.57rem;box-shadow:0 4px 14px rgba(7,27,53,.12)}
.hotel-card-v6 .hotel-card-body{padding:17px}
.hotel-card-heading h3{margin:0 0 6px;font-size:1rem;line-height:1.33}
.hotel-card-heading h3 a:hover{color:var(--blue)}
.hotel-card-v6 .hotel-location{font-size:.65rem}
.hotel-card-v6 .hotel-location svg{width:13px;height:13px}
.room-chip-row{display:flex;gap:6px;flex-wrap:wrap}
.room-chip-row span{padding:5px 8px;border:1px solid #dce5f0;border-radius:7px;background:#f8fafc;color:#596a80;font-size:.57rem;font-weight:700;line-height:1.2}
.hotel-card-v6 .room-chip-row{margin-top:13px}
.hotel-meal-line{display:flex;align-items:center;gap:7px;margin:12px 0 0;color:#637287;font-size:.63rem}
.hotel-meal-line svg{width:14px;height:14px;color:#8090a4}
.hotel-rate-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:14px;padding-top:13px;border-top:1px solid #e9edf3}
.hotel-rate-row small{display:block;color:#8c98a8;font-size:.56rem;text-transform:uppercase;letter-spacing:.06em}
.hotel-rate-row strong{display:block;margin-top:3px;color:var(--blue);font-family:var(--heading);font-size:.82rem}
.verified-detail{display:flex;align-items:center;gap:5px;color:#718097;font-size:.54rem;line-height:1.3;text-align:right}
.verified-detail i{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:#25b96d;box-shadow:0 0 0 3px rgba(37,185,109,.12)}
.hotel-card-v6 .hotel-card-actions{margin-top:13px}
.hotel-card-v6 .hotel-card-actions .site-btn{min-height:38px;border-radius:9px;font-size:.67rem}

/* Needs, destinations and B2B */
.destination-card{min-height:430px;border-radius:20px}
.destination-content{padding:29px}
.need-card{min-height:285px;border-radius:16px}
.b2b-signature-panel{min-height:520px;border-radius:22px}
.b2b-visual{min-height:520px}
.b2b-copy{padding-right:50px}

/* Listing page */
.inner-hero.compact{position:relative;padding:62px 0 66px;background:linear-gradient(110deg,#071b35,#0a315d);overflow:hidden}
.inner-hero.compact:after{content:"";position:absolute;right:-120px;top:-260px;width:610px;height:610px;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 65px rgba(255,255,255,.025),0 0 0 135px rgba(255,255,255,.018)}
.inner-hero.compact .site-container{position:relative;z-index:1}
.inner-hero.compact .breadcrumbs{margin-bottom:21px;color:#aebed2}
.inner-hero.compact .breadcrumbs a{color:#dce6f2}
.inner-hero.compact h1{max-width:850px;margin:10px 0 12px;color:#fff;font-size:clamp(2.4rem,4.5vw,4.1rem);line-height:1.05}
.inner-hero.compact p{max-width:760px;margin:0;color:#c0cddd;font-size:.92rem}
.benefit-grid{border-radius:15px;box-shadow:0 7px 24px rgba(7,27,53,.06)}
.benefit{padding:20px}
.benefit-icon{width:40px;height:40px;border-radius:11px}
.benefit h3{font-size:.78rem}
.benefit p{font-size:.65rem}
.listing-layout{grid-template-columns:272px minmax(0,1fr);gap:27px}
.listing-layout>.filter-panel{grid-column:1;grid-row:1}
.listing-layout>div:not(.filter-panel){grid-column:2;grid-row:1}
.filter-panel{top:98px;padding:20px;border-radius:15px;box-shadow:0 8px 25px rgba(7,27,53,.06)}
.filter-panel h2{padding-bottom:15px;margin-bottom:16px;border-bottom:1px solid var(--line);font-size:1rem}
.filter-panel form{gap:14px}
.filter-group label.title{font-size:.63rem;color:#56667b;text-transform:uppercase;letter-spacing:.06em}
.filter-panel input,.filter-panel select{min-height:41px;border-radius:9px;font-size:.7rem}
.results-head{margin-bottom:18px;padding-bottom:15px}
.results-head h2{font-size:1.08rem}
.results-head select{height:40px;border-radius:9px}
.listing-layout .hotel-grid{gap:18px}

/* Hotel detail */
.detail-hero{padding:38px 0 28px;background:#f4f7fb}
.detail-hero .breadcrumbs{margin-bottom:25px}
.detail-topline{margin:0 0 20px;align-items:end}
.detail-title h1{max-width:850px;font-size:clamp(2rem,4vw,3.45rem);letter-spacing:-.05em}
.detail-title p{font-size:.82rem}
.detail-rate{padding:14px 16px;border-radius:12px;box-shadow:var(--shadow-xs)}
.gallery-grid{grid-template-columns:1.55fr .8fr .8fr;grid-template-rows:210px 210px;border-radius:17px;gap:8px;background:#e8edf4}
.gallery-grid img{transition:filter .2s ease}
.gallery-grid img:hover{filter:brightness(.92)}
.detail-photo-note{margin:10px 1px 0;color:#7d8a9b;font-size:.62rem}
.detail-layout{grid-template-columns:minmax(0,1fr) 340px;gap:38px;padding:34px 0 85px}
.detail-tabs{position:sticky;top:77px;z-index:10;display:flex;gap:28px;margin-bottom:10px;padding:15px 0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}
.detail-tabs a{color:#637187;font-family:var(--heading);font-size:.72rem;font-weight:700}
.detail-tabs a:hover{color:var(--blue)}
.detail-main section{scroll-margin-top:135px;padding:28px 0}
.detail-main h2{font-size:1.35rem}
.detail-main p{font-size:.84rem;line-height:1.75}
.notice.blue{border-color:#d7e7ff;background:#f3f8ff;color:#405d80}
.amenity-grid{gap:9px}
.amenity{border-radius:10px;background:#f8fafc;font-size:.7rem}
.room-card{border-radius:13px;background:#fbfcfe}
.room-card h3{font-size:.86rem}
.room-card p{font-size:.68rem}
.map-placeholder{border-radius:15px;background:linear-gradient(135deg,#edf2f7,#f8fafc)}
.inquiry-card{position:sticky;top:98px;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--text);box-shadow:0 16px 45px rgba(7,27,53,.1)}
.inquiry-card h2{color:var(--navy);font-size:1.18rem}
.inquiry-card>p{color:var(--muted);font-size:.73rem}
.inquiry-card label{color:#4f5f73;font-size:.63rem}
.inquiry-card input,.inquiry-card select,.inquiry-card textarea{border-color:#dce4ee;background:#fff;color:var(--ink)}
.inquiry-card .secure-note{color:#7d8999}

/* Partner page */
.partner-hero{min-height:610px;background:var(--navy) url('../images/makkah-clock-kaaba-pexels.jpg') center 58%/cover no-repeat}
.partner-hero:before{background:linear-gradient(90deg,rgba(5,21,44,.98),rgba(5,21,44,.88) 49%,rgba(5,21,44,.25))}
.partner-hero h1{max-width:790px;font-size:clamp(3rem,5vw,5rem)}
.service-grid{gap:17px}
.service-card{min-height:330px;border-radius:16px;padding:22px}
.service-card>img{right:0;bottom:0;width:55%;height:53%;border-radius:0;opacity:.86;mask-image:linear-gradient(125deg,transparent 5%,#000 60%)}

/* Footer refinement */
.footer-cta{background:linear-gradient(115deg,#0878ff,#034daf)}
.site-footer{background:#06162d}
.footer-grid{gap:36px}

@media(max-width:1180px){
  .site-nav{gap:18px}
  .site-nav>a{font-size:.71rem}
  .v6-hero-grid{grid-template-columns:minmax(0,600px) 350px;gap:38px}
  .v6-hero h1{font-size:4.35rem}
  .trust-strip-grid>div{padding-inline:13px}
}

@media(max-width:960px){
  .utility-bar-inner{height:32px}
  .utility-contact>span{display:none}
  .site-header{height:70px}
  .site-nav{top:113px}
  .site-header.scrolled .site-nav{top:81px}
  .v6-hero,.v6-hero-grid{min-height:660px}
  .v6-hero-grid{display:flex;padding:45px 0 100px}
  .v6-hero .signature-hero-copy{max-width:720px}
  .featured-stay-card{display:none}
  .trust-strip-grid{grid-template-columns:repeat(2,1fr)}
  .trust-strip-grid>div{justify-content:flex-start;padding:18px 20px}
  .trust-strip-grid>div:nth-child(2){border-right:0}
  .trust-strip-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stay-type-grid{grid-template-columns:repeat(2,1fr)}
  .stay-type-grid>a{min-height:205px}
  .listing-layout{grid-template-columns:1fr}
  .listing-layout>.filter-panel,.listing-layout>div:not(.filter-panel){grid-column:auto;grid-row:auto}
  .detail-layout{grid-template-columns:1fr}
  .detail-tabs{top:69px}
  .inquiry-card{position:static}
  .partner-hero{min-height:560px}
}

@media(max-width:680px){
  .utility-bar-inner{height:31px;font-size:.61rem}
  .utility-contact>a:first-of-type{display:none}
  .utility-contact>a+a{padding-left:0;border-left:0}
  .utility-location{gap:6px}
  .site-nav{top:107px}
  .site-header.scrolled .site-nav{top:77px}
  .section{padding:66px 0}
  .v6-hero,.v6-hero-grid{min-height:630px}
  .v6-hero-grid{padding:38px 0 98px}
  .v6-hero h1{font-size:clamp(2.75rem,13vw,4rem);margin:18px 0}
  .v6-hero .signature-hero-copy>p{font-size:.88rem}
  .v6-search-dock{margin-top:-48px}
  .trust-strip-grid{grid-template-columns:1fr 1fr}
  .trust-strip-grid>div{padding:15px 10px;gap:9px}
  .trust-icon{width:33px;height:33px;border-radius:9px;font-size:.7rem}
  .trust-strip-grid strong{font-size:.64rem}
  .trust-strip-grid small{font-size:.54rem}
  .stay-type-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stay-type-grid>a{min-height:178px;padding:16px}
  .stay-type-grid>a:after{right:14px;bottom:14px;width:27px;height:27px}
  .stay-type-grid strong{font-size:.91rem}
  .stay-type-grid small{display:none}
  .destination-card{min-height:390px}
  .hotel-card-v6 .hotel-image-wrap{aspect-ratio:16/9}
  .inner-hero.compact{padding:52px 0 56px}
  .inner-hero.compact h1{font-size:2.3rem}
  .inner-hero.compact p{font-size:.79rem}
  .listing-layout .hotel-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:250px 120px}
  .gallery-grid img:nth-child(n+4){display:none}
  .detail-layout{padding-top:20px}
  .detail-tabs{top:69px;gap:18px;overflow-x:auto;white-space:nowrap}
  .detail-photo-note{font-size:.57rem}
  .partner-hero{min-height:590px;background-position:62% center}
  .partner-hero h1{font-size:2.75rem}
}

@media(max-width:420px){
  .utility-location svg{display:none}
  .utility-bar-inner{gap:8px}
  .v6-hero h1{font-size:2.7rem}
  .trust-strip-grid{grid-template-columns:1fr}
  .trust-strip-grid>div{border-right:0;border-bottom:1px solid var(--line)!important;padding:12px 6px}
  .trust-strip-grid>div:last-child{border-bottom:0!important}
  .stay-type-grid{grid-template-columns:1fr}
  .stay-type-grid>a{min-height:190px}
  .results-head{display:grid}
  .results-head form,.results-head select{width:100%}
  .detail-tabs{gap:16px}
}