:root{--gold:#c99a3b;--gold2:#e0b65a;--ink:#171411;--cream:#f6f1e8;--paper:#fffdf9;--muted:#756d63;--line:#e7ded1;--shadow:0 22px 65px rgba(31,23,14,.13)} *{box-sizing:border-box} [hidden]{display:none !important}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,Arial,sans-serif;line-height:1.6}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.025;background-image:radial-gradient(#000 1px,transparent 1px);background-size:5px 5px;z-index:-1}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.site-header{position:sticky;top:0;z-index:40;background:rgba(255,253,249,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(201,154,59,.18)}.nav-wrap{max-width:1240px;margin:auto;padding:9px 24px;display:flex;align-items:center;gap:28px}.brand img{width:150px;height:58px;object-fit:contain}.nav{display:flex;gap:20px;align-items:center;margin-left:auto}.nav a{font-size:12px;font-weight:700;letter-spacing:.03em;transition:.2s}.nav a:hover,.text-link{color:#986c19}.nav-actions{display:flex;align-items:center;gap:10px}.lang{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer}.menu{display:none;border:0;background:none;font-size:25px;cursor:pointer}.btn{display:inline-flex;justify-content:center;align-items:center;border-radius:999px;padding:13px 23px;font-weight:800;letter-spacing:.01em;border:1px solid transparent;cursor:pointer;transition:.22s}.btn-gold{background:var(--gold);color:#fff;box-shadow:0 12px 28px rgba(201,154,59,.24)}.btn-gold:hover{background:#b88b2f;transform:translateY(-1px)}.btn-light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.65);color:#fff}.btn-dark{background:var(--ink);color:#fff}.small{padding:9px 15px;font-size:12px}.hero{position:relative;min-height:82vh;color:#fff;display:flex;align-items:center;overflow:hidden}.hero-bg{position:absolute;inset:0;background-position:center;background-size:cover;transform:scale(1.015)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,8,5,.78),rgba(11,8,5,.36) 55%,rgba(11,8,5,.12))}.hero-content{position:relative;z-index:1;max-width:1240px;width:100%;margin:auto;padding:120px 24px 185px}.eyebrow{font-size:10px;letter-spacing:.23em;font-weight:800;color:var(--gold);display:inline-block;margin-bottom:10px}.hero .eyebrow{color:#f0c56b}.hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(80px,7vw,96px);line-height:.91;margin:0 0 24px;font-weight:600;letter-spacing:-.035em;max-width:850px}.hero h1 em{color:#f1c86e;font-style:italic}.hero p{max-width:650px;font-size:17px;color:#f4efe8}.hero-actions{display:flex;gap:12px;margin-top:29px}.hero-bottom{position:absolute;bottom:0;left:0;right:0;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);max-width:1240px;margin:auto;padding:22px 24px;background:rgba(8,7,5,.55);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.22)}.hero-bottom span{font-size:14px;font-weight:800}.hero-bottom small{display:block;color:#ddd;font-weight:400;margin-top:3px}.section{max-width:1240px;margin:auto;padding:105px 24px} .section.gallery{padding-top:35px}.section-head{max-width:790px;margin-bottom:42px}.section-head.compact{margin-bottom:22px}.section-head h2,.copy h2,.feature-copy h2,.location-card h2{font-family:'Cormorant Garamond',serif;font-size:clamp(42px,5vw,64px);line-height:1;margin:0 0 15px;font-weight:600}.section-head p,.copy p,.feature-copy p{color:var(--muted);font-size:16px}.booking-strip{background:linear-gradient(135deg,#171411,#211c17);color:#fff;padding:56px max(24px,calc((100% - 1240px)/2));position:relative}.booking-strip:before{content:"";position:absolute;inset:0;opacity:.05;background:linear-gradient(135deg,transparent 35%,#fff 35%,transparent 36%,transparent 65%,#fff 65%,transparent 66%)}.booking-strip>*{position:relative}.booking-strip .section-head h2{font-size:46px}.booking-form{display:block}.booking-fields{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:11px}.booking-form label{display:flex;flex-direction:column;gap:6px;font-size:10px;color:#d7d0c7;font-weight:800}.booking-form input,.booking-form select{height:48px;border:1px solid #4d443a;background:#28231e;color:#fff;border-radius:10px;padding:0 12px;outline:none;min-width:0;box-sizing:border-box;width:100%}.booking-form input:focus,.booking-form select:focus{border-color:var(--gold)}.booking-contact-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;max-width:820px;margin:14px auto 0}.booking-contact-row label{font-size:11px}.booking-contact-row input{height:52px;font-size:15px}.booking-form .submit{display:flex;height:50px;padding:0 28px;margin:16px auto 0;min-width:210px}.price-row{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:16px;color:#aaa;font-size:11px}.price-row strong{color:#f0c56e;font-size:17px}.price-row span:nth-child(2){color:#d8d0c7}.booking-result{margin-top:20px;background:#29231e;border:1px solid #4a4036;padding:22px;border-radius:14px}.result-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:#bda98f}.result-number{font-family:'Cormorant Garamond',serif;font-size:48px;color:#f0c56e;line-height:1;margin:6px 0}.result-main{font-weight:700}.result-muted,.result-note{font-size:12px;color:#a9a097;margin-top:5px}.result-note{color:#d6a95b;margin-top:10px}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}.split.reverse{grid-template-columns:.9fr 1.1fr}.split.reverse .image-frame{order:2}.image-frame{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:#eee}.image-frame img{width:100%;height:520px;object-fit:cover}.copy{max-width:580px}.amenities{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.amenities span{background:var(--cream);padding:9px 12px;border-radius:999px;font-size:12px;font-weight:700}.cards{display:grid;gap:26px}.cards.two{grid-template-columns:1fr 1fr}.room-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 12px 35px rgba(20,15,10,.05);transition:.25s}.room-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.card-image{height:430px;position:relative;overflow:hidden}.card-image img{width:100%;height:100%;object-fit:cover}.price{position:absolute;top:18px;right:18px;background:#fff;color:var(--ink);padding:8px 12px;border-radius:999px;font-weight:900;font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.12)}.ribbon{position:absolute;top:18px;left:18px;background:var(--gold);color:#fff;padding:8px 12px;border-radius:999px;font-size:10px;font-weight:900}.card-body{padding:29px}.card-body h3,.service h3{font-family:'Cormorant Garamond',serif;font-size:35px;line-height:1;margin:2px 0 10px}.card-body p,.service p{color:var(--muted)}.meta{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.meta span{font-size:10px;border:1px solid var(--line);padding:7px 10px;border-radius:999px}.text-link{font-size:13px;font-weight:900}.feature-band{display:grid;grid-template-columns:1.15fr .85fr;min-height:570px;background:var(--cream)}.feature-img{background-position:center;background-size:cover;min-height:570px}.feature-copy{padding:80px max(30px,6vw);display:flex;flex-direction:column;justify-content:center}.feature-copy .hours,.hours{font-weight:900;color:#9a6d19;margin:15px 0 25px}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.service{background:var(--cream);border-radius:20px;overflow:hidden}.service img{width:100%;height:340px;object-fit:cover}.service>div{padding:27px}.spa-section{background:#fff}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gallery-grid img{width:100%;height:250px;object-fit:cover;border-radius:13px;cursor:pointer;transition:.25s}.gallery-grid img:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.location{padding-top:40px}.location-card{background:#1a1714;color:#fff;border-radius:24px;padding:48px;display:grid;grid-template-columns:1fr .9fr;gap:35px;align-items:center}.location-card p{color:#c7c0b8}.map-placeholder{min-height:290px;border-radius:17px;background:radial-gradient(circle at 35% 35%,#5a5045,#211c18 68%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#e0d7cb;border:1px solid #51483e;transition:.25s}.map-placeholder:hover{transform:translateY(-3px)}.map-placeholder small{color:#bcae9d}.pin{font-size:60px;color:#e3b65b}.footer{background:#100e0c;color:#d8d0c6;padding:65px 24px 20px}.footer-grid{max-width:1240px;margin:auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}.footer-logo{width:190px;background:#fff;padding:8px;border-radius:8px;margin-bottom:14px}.footer-grid>div{display:flex;flex-direction:column;gap:8px}.footer h4{color:#f2c76e;margin:0 0 8px}.copyright{max-width:1240px;margin:45px auto 0;padding-top:18px;border-top:1px solid #2b2722;font-size:11px;color:#8e867d}.floating-wa{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:#1c7b45;color:#fff;display:grid;place-items:center;z-index:30;font-size:25px;box-shadow:0 12px 30px rgba(0,0,0,.22)}.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;padding:0;z-index:80;overflow:hidden}.modal-card{position:relative;width:fit-content;max-width:100vw;max-height:100vh;overflow:hidden;background:transparent;border-radius:0;padding:0;display:flex;align-items:center;justify-content:center}.modal-close{position:absolute;right:10px;top:10px;border:0;background:rgba(255,255,255,.9);border-radius:50%;width:38px;height:38px;font-size:27px;cursor:pointer;z-index:6}.modal-image{display:block;width:auto;height:auto;max-width:100vw;max-height:100vh;object-fit:contain;border-radius:0;background:transparent}.modal-caption{text-align:center;padding:10px;font-size:13px;font-weight:700}.nav.open{display:flex} [dir="rtl"] .nav{margin-left:0;margin-right:auto}[dir="rtl"] .hero-overlay{background:linear-gradient(270deg,rgba(11,8,5,.78),rgba(11,8,5,.36) 55%,rgba(11,8,5,.12))}[dir="rtl"] .split.reverse .image-frame{order:0}[dir="rtl"] .price{right:auto;left:18px}[dir="rtl"] .ribbon{left:auto;right:18px} @media(max-width:1100px){.nav{display:none}.menu{display:block}.nav.open{position:absolute;top:77px;left:15px;right:15px;background:#fffdf9;padding:18px;flex-direction:column;align-items:flex-start;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.booking-form{grid-template-columns:repeat(3,1fr)}.booking-form .phone{grid-column:span 1}.booking-form .submit{grid-column:span 1}.split,.split.reverse,.feature-band,.location-card{grid-template-columns:1fr}.split.reverse .image-frame{order:0}.feature-img{min-height:420px}.gallery-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:700px){.nav-wrap{padding:8px 15px}.brand img{width:125px;height:48px}.nav-actions .btn{display:none}.hero{min-height:86vh}.hero-content{padding:90px 20px 155px}.hero h1{font-size:55px}.hero p{font-size:15px}.hero-actions{flex-direction:column;align-items:flex-start}.hero-bottom{grid-template-columns:1fr 1fr;padding:16px 20px;gap:14px}.hero-bottom span{font-size:12px}.section{padding:72px 18px}.booking-strip{padding:42px 18px}.booking-form{grid-template-columns:1fr 1fr}.booking-form label,.booking-form .phone{grid-column:auto}.booking-form .submit{grid-column:span 2}.price-row{flex-direction:column;align-items:flex-start}.cards.two,.service-grid{grid-template-columns:1fr}.card-image{height:320px}.image-frame img{height:380px}.feature-img{min-height:330px}.feature-copy{padding:55px 25px}.gallery-grid{grid-template-columns:1fr 1fr}.gallery-grid img{height:180px}.footer-grid{grid-template-columns:1fr;gap:28px}.location-card{padding:28px}.location-card h2{font-size:45px}.brand{flex-shrink:0}} /* Direct-booking promotion and menu controls */ .promo-banner{padding-top:0}.promo-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:38px 42px;background:linear-gradient(135deg,#171411,#2a2118);border:1px solid rgba(198,164,95,.35);border-radius:24px;color:#fff}.promo-inner h2{margin:.2rem 0 .5rem;font-family:"Cormorant Garamond",serif;font-size:clamp(2rem,4vw,3.2rem)}.promo-inner p{max-width:700px;margin:0;color:rgba(255,255,255,.75)}.service-feature .brand-file{margin-bottom:8px}.brand-file{min-height:72px;display:flex;align-items:center}.brand-file img{width:88px;height:68px;display:block;object-fit:contain;object-position:left center}.promo-logos{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}.promo-logos img{width:92px;height:70px;display:block;object-fit:contain;border:0;border-radius:10px;background:#fff}.spa-logo-frame{display:grid;place-items:center;background:#f8f4ec}.spa-logo-frame img{width:min(70%,420px);height:420px;display:block;object-fit:contain}.brand-pdf{font-family:"Cormorant Garamond",serif;letter-spacing:.16em;font-weight:700;font-size:1.15rem}.service-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}.menu-btn{border:0;cursor:pointer}.discount-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:1px solid rgba(198,164,95,.55);border-radius:999px;color:#b88c45;background:rgba(184,140,69,.08);font-weight:700;font-size:.78rem;letter-spacing:.08em}.modal-image{max-width:min(92vw,1100px);max-height:82vh;width:auto;height:auto;object-fit:contain;display:block;margin:auto;border-radius:10px}.modal-caption{text-align:center;color:#fff;margin-top:10px;font-weight:600}.footer-logo{max-width:190px;max-height:80px;object-fit:contain;object-position:left center}.rtl .footer-logo{object-position:right center}.booking-result .result-note{margin-top:8px}.result-error{color:#a64a42}@media(max-width:700px){.promo-inner{padding:28px 22px;flex-direction:column;align-items:flex-start}.promo-inner .btn{width:100%;text-align:center}.promo-logos img{width:78px;height:62px}.brand-file img{width:78px;height:62px}.spa-logo-frame img{width:72%;height:300px}.footer-logo{max-width:165px}} /* Final polish: transparent logos, compact icons, larger phone field */ .brand img, .footer-logo, .brand-file img, .promo-logos img, .spa-logo-frame img { background: transparent !important; } .footer-logo { padding: 0 !important; border-radius: 0 !important; } .brand-file img { width: 96px; height: 72px; } .promo-logos img { width: 100px; height: 74px; border-radius: 0; } .hero-bottom span { position: relative; } .feature-icon, .mini-icon, .contact-icon { display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-family: Arial, sans-serif; font-weight: 800; line-height: 1; } .feature-icon { width: 18px; height: 18px; margin-right: 7px; border: 1px solid rgba(240,197,110,.7); border-radius: 50%; color: #f0c56e; font-size: 9px; vertical-align: middle; } .mini-icon { width: 18px; height: 18px; margin-right: 7px; border: 1px solid rgba(154,109,25,.45); border-radius: 50%; color: #9a6d19; font-size: 8px; flex: 0 0 18px; } .amenities span { display: inline-flex; align-items: center; } .contact-icon { width: 18px; margin-right: 7px; color: #f2c76e; font-size: 13px; } .footer-grid a { display: flex; align-items: center; } .booking-form .phone { grid-column: 1 / span 3; grid-row: 2; } .booking-form .phone input { height: 58px; font-size: 17px; font-weight: 700; padding: 0 16px; } .booking-form .phone > span { font-size: 11px; } .booking-form .submit { grid-row: 2; } @media(max-width:1100px){ .booking-form .phone { grid-column: 1 / span 2; grid-row: auto; } .booking-form .submit { grid-row: auto; } } @media(max-width:700px){ .booking-form .phone { grid-column: 1 / -1; grid-row: auto; } .booking-form .phone input { height: 58px; font-size: 16px; } .brand-file img { width: 82px; height: 64px; } .promo-logos img { width: 84px; height: 64px; } } .wa-symbol { display:grid; place-items:center; width:100%; height:100%; font-size:27px; line-height:1; transform:rotate(-28deg); } /* Latest visual refinements */ .footer-logo { background:#fff; padding:8px; border-radius:8px; } .promo-place-names { display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; } .promo-place-names span { display:inline-flex; align-items:center; padding:9px 14px; border:1px solid rgba(198,164,95,.45); border-radius:999px; color:#f0c56e; font-size:12px; font-weight:900; letter-spacing:.12em; } .feature-icon { display:inline-flex; align-items:center; justify-content:center; } .door-icon { font-size:15px; font-weight:800; } .wifi-icon { font-size:15px; font-weight:800; } .booking-form .submit { grid-column:4 / span 3; grid-row:3; justify-self:center; width:220px; margin-top:8px; } .price-row { margin-top:20px; } @media(max-width:1100px){ .booking-form .submit { grid-column:1 / -1; grid-row:auto; justify-self:center; width:220px; } } @media(max-width:700px){ .booking-form .submit { grid-column:1 / -1; width:100%; } .promo-place-names { width:100%; } .promo-place-names span { flex:1 1 100%; justify-content:center; } } /* Icon and Al Laila visual refinement */ .feature-icon, .mini-icon { border:0; border-radius:0; } .feature-icon svg, .mini-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; } .mini-icon { color:#9a6d19; } .door-icon svg { width:20px; height:20px; } .wifi-icon svg { width:21px; height:21px; } .parking-icon svg, .minibar-icon svg { width:18px; height:18px; } .spa-main-frame { min-height:460px; background:#f3eee5; overflow:hidden; display:flex; align-items:center; justify-content:center; } .spa-main-frame img { width:100%; height:460px; display:block; object-fit:cover; object-position:center; } @media(max-width:1100px){ .spa-main-frame { min-height:430px; } .spa-main-frame img { height:430px; } } @media(max-width:700px){ .spa-main-frame { min-height:360px; } .spa-main-frame img { height:360px; object-fit:cover; } } .footer .contact-icon { font-size:0; width:20px; height:20px; } .footer .contact-icon::before { font-size:14px; } .footer .contact-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; } .whatsapp-number { font-size:15px; letter-spacing:.03em; color:#fff; } .footer-grid a { gap:7px; } .wa-symbol { transform:none; } .wa-symbol svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; } /* V7 refinements */ .spa-main-frame { background:#fff; } .spa-main-frame img { object-fit:contain; object-position:center; padding:0; } .service-highlight { margin-top:20px; display:inline-flex; align-items:center; padding:10px 15px; border:1px solid rgba(198,164,95,.55); border-radius:999px; color:#9a6d19; background:#fffaf1; font-size:12px; font-weight:900; letter-spacing:.04em; } .cabin-highlights { margin-top:10px; font-weight:900; color:#9a6d19; font-size:13px; letter-spacing:.02em; } .cabin-note { display:block; color:#a49b91; font-size:11px; margin-top:9px; } .footer-grid a { align-items:flex-start; } .footer .contact-icon { flex:0 0 20px; margin-top:2px; } .footer-grid a span { max-width:310px; } .footer-logo { background:#fff !important; padding:8px !important; border-radius:8px !important; } @media(max-width:700px){ .service-highlight{border-radius:14px; line-height:1.35;} .cabin-highlights{line-height:1.6;} } /* Latest spacing refinements */ .service-highlight, .cabin-highlights { margin-top: 28px; } .service-highlight { align-self: flex-start; } .cabin-highlights { padding-top: 4px; } /* V8 requested refinements */ .room-note { margin-top: 8px !important; font-size: 14px !important; color: var(--muted); } .pool-guest-price { margin-top: 16px; font-weight: 800; color: #9a6d19; font-size: 13px; } .service-highlight-lower { margin-top: 40px !important; } .cabin-whatsapp { margin-top: 24px; } @media(max-width:700px){ .service-highlight-lower { margin-top: 34px !important; } .cabin-whatsapp { margin-top: 26px; } } /* V11: align Grand House hours with Ward and place activities slightly below */ .grand-house-hours { display: block; margin-top: 0 !important; } .service-highlight-lower { display: inline-flex; width: fit-content; max-width: 100%; box-sizing: border-box; margin-top: 18px !important; } @media(max-width:700px){ .service-highlight-lower { margin-top: 16px !important; } } /* V15 final updates */ .booking-form .guest-name{grid-column:auto}.booking-form .phone{grid-column:auto}.admin-link{background:#fff!important;color:#8a641b!important;border-color:rgba(201,154,59,.45)!important}.theme-toggle{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;width:38px;height:38px;cursor:pointer;font-size:18px;display:grid;place-items:center}.report-filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.report-filters label{display:grid;gap:6px;font-size:11px;font-weight:800;color:#806329}.report-filters input{padding:11px 12px;border:1px solid #d8d0c5;background:#fff}.career-jobs{grid-column:1/-1;margin-top:35px}.career-jobs h2{font-family:'Cormorant Garamond',serif;font-size:38px;margin:0}.jobs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.jobs-grid span{background:#fff;border:1px solid rgba(35,29,24,.1);padding:14px 16px;border-radius:12px;font-weight:800}html.night-mode body{background:#11100f;color:#f4efe8}html.night-mode .site-header{background:rgba(17,16,15,.94);border-color:rgba(201,154,59,.28)}html.night-mode .nav a,html.night-mode .lang,html.night-mode .theme-toggle{color:#f4efe8}html.night-mode .lang,html.night-mode .theme-toggle{background:#1d1a17;border-color:#4b4032}html.night-mode .room-card,html.night-mode .service,html.night-mode .career-card{background:#1b1917;color:#f4efe8;border-color:#3b342d}html.night-mode .card-body p,html.night-mode .service p,html.night-mode .section-head p,html.night-mode .career-card p{color:#c5bdb4}@media(max-width:700px){.booking-form .guest-name{grid-column:1/-1}.report-filters{flex-direction:column;align-items:stretch}.report-filters label,.report-filters input,.report-filters button{width:100%;box-sizing:border-box}.jobs-grid{grid-template-columns:1fr 1fr}} /* Restored V14 Admin/Careers styling + Settings */ .page-hero { padding:150px 6vw 80px; background:linear-gradient(180deg,#171411 0%,#221d18 100%); color:#fff; } .page-hero .section-head { max-width:900px; margin:auto; text-align:center; } .page-hero h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(42px,6vw,76px); margin:12px 0; } .page-hero p { color:#cfc6bb; max-width:680px; margin:0 auto; font-size:17px; line-height:1.8; } .careers-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:28px; max-width:1050px; margin:auto; } .career-card { background:#fff; border:1px solid rgba(35,29,24,.1); padding:40px; box-shadow:0 15px 40px rgba(0,0,0,.06); } .career-card h2 { font-family:'Cormorant Garamond',serif; font-size:38px; margin:10px 0 14px; } .career-card p { line-height:1.8; color:var(--muted); } .admin-shell { min-height:100vh; background:#f5f1ea; padding:110px 5vw 60px; } .admin-wrap { max-width:1250px; margin:auto; } .admin-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; } .admin-head h1 { font-family:'Cormorant Garamond',serif; font-size:48px; margin:0; } .admin-actions { display:flex; gap:10px; flex-wrap:wrap; } .admin-card { background:#fff; border:1px solid rgba(35,29,24,.1); padding:24px; margin-bottom:24px; box-shadow:0 10px 30px rgba(0,0,0,.05); overflow:auto; } .admin-login { max-width:460px; margin:12vh auto; } .admin-form { display:grid; gap:14px; } .admin-form label { display:grid; gap:7px; font-weight:700; } .admin-form input,.admin-form select { width:100%; padding:13px 14px; border:1px solid #d8d0c5; background:#fff; font:inherit; box-sizing:border-box; } .admin-table { width:100%; border-collapse:collapse; min-width:1050px; } .admin-table th,.admin-table td { padding:12px 10px; border-bottom:1px solid #e8e0d6; text-align:left; vertical-align:top; font-size:13px; } .admin-table th { color:#806329; text-transform:uppercase; letter-spacing:.08em; font-size:11px; } .admin-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .admin-stat { padding:20px; background:#fbf8f2; border:1px solid #eee5d8; } .admin-stat small { display:block; color:#8d8175; text-transform:uppercase; letter-spacing:.08em; font-size:10px; } .admin-stat strong { display:block; font-size:28px; margin-top:7px; } .admin-muted { color:#8d8175; } .admin-error { color:#a33; background:#fff0f0; padding:10px 12px; } .status-badge { display:inline-block; padding:5px 8px; border-radius:999px; background:#eee7da; font-weight:800; font-size:11px; } .settings-wrap{position:relative;display:inline-flex;align-items:center}.settings-btn{width:42px;height:42px;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:20px;box-shadow:0 6px 18px rgba(0,0,0,.08)}.settings-btn:hover{border-color:rgba(201,154,59,.65)}.settings-menu{position:absolute;right:0;top:50px;min-width:190px;background:#fff;border:1px solid rgba(35,29,24,.12);box-shadow:0 15px 35px rgba(0,0,0,.14);padding:8px;z-index:50}.settings-menu a,.settings-menu button{display:block;width:100%;padding:11px 12px;border:0;background:transparent;text-align:left;color:var(--ink);font:inherit;text-decoration:none;cursor:pointer;border-radius:8px}.settings-menu a:hover,.settings-menu button:hover{background:#f5f1ea}.settings-menu[hidden]{display:none}.settings-title{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8d8175;padding:8px 12px 5px;font-weight:800}.password-card{max-width:520px}.password-card form{display:grid;gap:14px}.password-card label{display:grid;gap:7px;font-weight:700}.password-card input{padding:13px 14px;border:1px solid #d8d0c5;font:inherit}.settings-inline{display:flex;justify-content:flex-end;margin-bottom:18px} @media(max-width:800px){ .careers-grid{grid-template-columns:1fr}.admin-stat-grid{grid-template-columns:repeat(2,1fr)}.admin-head{align-items:flex-start;flex-direction:column}.page-hero{padding-top:125px}.career-card{padding:28px} } @media(max-width:700px){.booking-fields{grid-template-columns:1fr 1fr}.booking-contact-row{grid-template-columns:1fr 1fr;max-width:none;gap:10px}.booking-contact-row label{min-width:0}.booking-contact-row input{width:100%;box-sizing:border-box}.booking-form .submit{width:100%}.report-filters{flex-direction:column;align-items:stretch}.report-filters label,.report-filters input,.report-filters button{width:100%;box-sizing:border-box}.jobs-grid{grid-template-columns:1fr 1fr}} /* V20: Guest Name and Phone Number must always sit side-by-side */ .booking-contact-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; width: min(100%, 820px) !important; max-width: 820px !important; margin: 14px auto 0 !important; gap: 11px !important; } .booking-contact-row label, .booking-contact-row .guest-name, .booking-contact-row .phone { grid-column: auto !important; grid-row: auto !important; min-width: 0 !important; } .booking-contact-row input { width: 100% !important; box-sizing: border-box !important; } @media (max-width: 700px) { .booking-contact-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; width: 100% !important; max-width: none !important; gap: 10px !important; } .booking-contact-row .guest-name, .booking-contact-row .phone { grid-column: auto !important; } } /* V21: balanced booking spacing and guaranteed side-by-side contact fields */ .booking-contact-row { display: flex !important; flex-direction: row !important; align-items: flex-start !important; width: min(100%, 820px) !important; max-width: 820px !important; margin: 16px auto 0 !important; gap: 12px !important; } .booking-contact-row > label { flex: 1 1 0 !important; width: 50% !important; min-width: 0 !important; grid-column: auto !important; grid-row: auto !important; } .booking-contact-row > label input { width: 100% !important; box-sizing: border-box !important; } .booking-form .submit { margin: 24px auto 0 !important; } @media (max-width: 700px) { .booking-contact-row { display: flex !important; flex-direction: row !important; gap: 10px !important; width: 100% !important; max-width: none !important; margin-top: 16px !important; } .booking-contact-row > label { flex: 1 1 0 !important; width: 50% !important; } .booking-form .submit { margin-top: 22px !important; } } /* V21 Single-page navigation */ .spa-page-section { scroll-margin-top: 88px; } #careers.spa-page-section { padding: 0; } #careers.spa-page-section .page-hero { margin-top: 0; } .admin-spa[hidden] { display: none !important; } .admin-spa { padding: 0; } .admin-spa .admin-shell { min-height: auto; padding: 125px 5vw 70px; } .admin-spa .settings-inline { display:flex; justify-content:flex-end; margin-bottom:18px; } .spa-page-section .site-header { position: relative; } @media(max-width:800px){ .admin-spa .admin-shell { padding: 115px 4vw 55px; } } /* V22: robust single-page navigation and modal cleanup */ html { scroll-behavior: smooth; } body.modal-open { overflow: hidden; } .modal[hidden] { display: none !important; } .spa-special-mode .site-header { position: sticky; top: 0; } #careers.spa-page-section { min-height: 0; } #admin.admin-spa { min-height: 0; } /* Keep Guest Name and Phone Number side-by-side at all supported widths. */ .booking-contact-row { display: flex !important; flex-direction: row !important; align-items: stretch !important; width: min(100%, 820px) !important; max-width: 820px !important; margin: 16px auto 0 !important; gap: 11px !important; } .booking-contact-row > label { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; grid-column: auto !important; grid-row: auto !important; } .booking-contact-row > label input { width: 100% !important; box-sizing: border-box !important; } .booking-form .submit { margin-top: 24px !important; } @media(max-width:700px){ .booking-contact-row { flex-direction: row !important; gap: 8px !important; width: 100% !important; } .booking-contact-row > label { width: auto !important; flex: 1 1 0 !important; } .booking-form .submit { margin-top: 24px !important; } } /* V23 account settings + nights report */ .account-page{max-width:720px;margin:0 auto;padding:30px;} .account-form{display:grid;gap:14px;margin-top:20px;} .account-form label{display:grid;gap:7px;font-weight:700;} .account-form input{padding:13px 14px;border:1px solid #d8d0c5;font:inherit;border-radius:2px;} .account-form input[readonly]{background:#f3efe9;} .account-page .admin-actions{margin-top:6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;} @media(max-width:700px){.account-page{padding:22px 18px}.account-page .admin-actions .btn{width:100%;text-align:center}.account-page{margin:0 0 20px}} /* V25: keep Admin dashboard and Account Settings as separate pages */ #accountPage.account-page-section[hidden]{display:none !important} #accountPage .admin-shell{min-height:100vh;padding:125px 5vw 70px} #accountPage .account-page{max-width:720px;margin:0 auto;padding:30px} #accountPage .account-page h1{font-family:'Cormorant Garamond',serif;font-size:48px;margin:0} @media(max-width:800px){#accountPage .admin-shell{padding:115px 4vw 55px}#accountPage .account-page{padding:22px 18px}} .nights-field input{background:#322c26 !important;color:#f0c56e !important;font-weight:800;text-align:center;cursor:default;} @media(max-width:1100px){.booking-fields{grid-template-columns:repeat(4,minmax(0,1fr));}} @media(max-width:700px){.booking-fields{grid-template-columns:1fr 1fr;}.nights-field input{font-size:15px;}} /* V27 — compact Nights and Number of Rooms; keep all booking controls aligned on one desktop row */ @media(min-width:1101px){ .booking-fields{ grid-template-columns:1.18fr 1.18fr .62fr .96fr .96fr 1.22fr .62fr .94fr !important; gap:11px !important; align-items:end !important; } .booking-fields .nights-field, .booking-fields > label:nth-of-type(6){ min-width:0 !important; } .booking-fields .nights-field input, .booking-fields > label:nth-of-type(6) select{ text-align:center !important; padding-left:7px !important; padding-right:7px !important; } } @media(max-width:1100px){ .booking-fields{grid-template-columns:repeat(4,minmax(0,1fr)) !important;} } @media(max-width:700px){ .booking-fields{grid-template-columns:1fr 1fr !important;} } /* V28 - Admin cancellation action */ .cancel-booking-btn{display:block;margin-top:7px;padding:6px 10px;border:1px solid #b58b45;border-radius:6px;background:transparent;color:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap} .cancel-booking-btn:hover{opacity:.82} .cancelled-label{display:block;margin-top:7px;font-size:12px;opacity:.7} /* V30 - spacing between the section above and direct-booking promotion */ .promo-banner { padding-top: 28px !important; } @media(max-width:700px){ .promo-banner { padding-top: 22px !important; } } /* Gallery lightbox navigation */ .modal-card{position:relative;} .gallery-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(23,20,17,.72);color:#fff;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;} .gallery-nav:hover{background:rgba(23,20,17,.9);} .gallery-prev{left:14px;} .gallery-next{right:14px;} @media(max-width:700px){ .gallery-nav{width:42px;height:42px;font-size:22px;} .gallery-prev{left:8px;} .gallery-next{right:8px;} } /* Mobile Gallery polish */ @media (max-width:700px){ .gallery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .gallery-grid img{ height:170px; border-radius:12px; } .modal{ padding:10px; } .modal-card{ width:100%; max-width:100%; max-height:88vh; padding:8px; border-radius:16px; overflow:hidden; } .modal-image{ width:100%; height:auto; max-height:78vh; object-fit:contain; border-radius:10px; } .modal-close{ right:10px; top:10px; width:40px; height:40px; font-size:28px; background:rgba(23,20,17,.82); color:#fff; } .gallery-nav{ width:44px; height:44px; font-size:22px; background:rgba(23,20,17,.72); } .gallery-prev{left:6px;} .gallery-next{right:6px;} } /* Night Mode system-wide polish */ html.night-mode{ color-scheme:dark; --ink:#f6f1e8; --cream:#e9e1d4; --paper:#11100f; --muted:#c7beb3; --line:#3b342d; --shadow:0 22px 65px rgba(0,0,0,.45); } html.night-mode body{background:var(--paper);color:var(--ink);} html.night-mode body:before{opacity:.018;background-image:radial-gradient(#fff 1px,transparent 1px);} html.night-mode .site-header{background:rgba(17,16,15,.97);border-bottom-color:rgba(201,154,59,.34);} html.night-mode .brand{background:rgba(255,255,255,.06);border-radius:10px;padding:2px 8px;} html.night-mode .brand img{filter:drop-shadow(0 0 1px rgba(255,255,255,.38));} html.night-mode .nav a{color:#f6f1e8;} html.night-mode .nav a:hover,html.night-mode .text-link{color:#f0c56b;} html.night-mode .lang{background:#1d1a17;color:#f6f1e8;border-color:#5a4d3d;} html.night-mode .theme-toggle{background:#1d1a17;color:#f6f1e8;border-color:#5a4d3d;} html.night-mode .settings-menu{background:#1b1917;color:#f6f1e8;border-color:#4b4032;box-shadow:0 18px 40px rgba(0,0,0,.42);} html.night-mode .settings-menu a{color:#f6f1e8;} html.night-mode .section-head p,html.night-mode .copy p,html.night-mode .feature-copy p, html.night-mode .card-body p,html.night-mode .service p,html.night-mode .career-card p, html.night-mode .result-muted{color:#c9c0b6;} html.night-mode .room-card,html.night-mode .service,html.night-mode .career-card{ background:#1b1917;color:#f4efe8;border-color:#433a31; box-shadow:0 14px 38px rgba(0,0,0,.22); } html.night-mode .room-card .card-body,html.night-mode .service>div{background:transparent;} html.night-mode .promo-banner{background:#191613;color:#f4efe8;border-color:#41372d;} html.night-mode .promo-banner p{color:#c9c0b6;} html.night-mode .feature-band{background:#161412;color:#f4efe8;} html.night-mode .hero-bottom{background:rgba(8,7,5,.72);border-top-color:rgba(255,255,255,.18);} html.night-mode .booking-form input,html.night-mode .booking-form select{ background:#201c18;color:#f6f1e8;border-color:#55483a; } html.night-mode .booking-form input::placeholder{color:#9e958b;} html.night-mode .booking-form option{background:#201c18;color:#f6f1e8;} html.night-mode .booking-form label{color:#d9d1c8;} html.night-mode .price-row{color:#ded6cd;} html.night-mode .booking-result{ background:#1b1917;color:#f6f1e8;border-color:#4d4134; } html.night-mode .location-card{background:#171513;color:#fff;border:1px solid #3d352d;} html.night-mode .map-placeholder{background:radial-gradient(circle at 35% 35%,#40382f,#171513 68%);border-color:#51483e;} html.night-mode .footer{background:#0c0b0a;color:#d8d0c6;border-top:1px solid #2c2722;} html.night-mode .footer a{color:#d8d0c6;} html.night-mode .modal{background:rgba(0,0,0,.84);} html.night-mode .modal-card{background:#171513;color:#f6f1e8;border:1px solid #3f372f;} html.night-mode .modal-caption{display:none;} html.night-mode .modal-close{background:rgba(15,14,13,.9);color:#fff;} html.night-mode .gallery-nav{background:rgba(15,14,13,.82);color:#fff;border-color:rgba(255,255,255,.35);} html.night-mode .gallery-nav:hover{background:rgba(15,14,13,.96);} html.night-mode input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.85);} html.night-mode .btn-dark{background:#f0c56b;color:#1a1714;} @media(max-width:700px){ html.night-mode .site-header{backdrop-filter:blur(16px);} html.night-mode .brand{padding:2px 5px;} html.night-mode .gallery-grid img{box-shadow:0 5px 18px rgba(0,0,0,.18);} } /* Night Mode completeness: remove remaining light-mode hardcoded surfaces */ html.night-mode .lang, html.night-mode .theme-toggle, html.night-mode .settings-btn, html.night-mode .menu{background:#1b1917 !important;color:#f6f1e8 !important;border-color:#5a4d3d !important;} html.night-mode .nav.open{background:#171513 !important;color:#f6f1e8 !important;border-color:#40372f !important;} html.night-mode .nav.open a{color:#f6f1e8 !important;} html.night-mode .amenities span{ background:#28221d !important; color:#f6f1e8 !important; border:1px solid #4b4034; } html.night-mode .amenities .mini-icon{ color:#f0c56b !important; border-color:rgba(240,197,107,.55) !important; } html.night-mode .price{ background:#28221d !important; color:#f6f1e8 !important; border:1px solid #4b4034; } html.night-mode .ribbon{color:#171411 !important;} html.night-mode .spa-section{background:#11100f !important;} html.night-mode .service-highlight, html.night-mode .cabin-highlights{color:#f2e8d9;} html.night-mode .modal-card{background:#171513 !important;color:#f6f1e8 !important;} html.night-mode .modal-close{border:1px solid #5a4d3d !important;} html.night-mode .modal-image{background:#0a0908 !important;} html.night-mode .promo-logos img, html.night-mode .spa-logo-frame{ background:#201b17 !important; } html.night-mode .report-filters input, html.night-mode .admin-form input, html.night-mode .admin-form select, html.night-mode .account-form input{ background:#201c18 !important; color:#f6f1e8 !important; border-color:#55483a !important; } html.night-mode .account-form input[readonly]{background:#2a241e !important;} html.night-mode .jobs-grid span, html.night-mode .admin-stat{ background:#1b1917 !important; color:#f6f1e8 !important; border-color:#40372f !important; } html.night-mode .admin-shell{background:#11100f !important;color:#f6f1e8 !important;} html.night-mode .admin-table th, html.night-mode .admin-table td{color:#ded6cd;border-color:#40372f;} html.night-mode .settings-menu a:hover, html.night-mode .settings-menu button:hover{background:#28221d !important;} html.night-mode :focus-visible{ outline:2px solid #f0c56b; outline-offset:3px; } @media(max-width:700px){ html.night-mode .nav.open{box-shadow:0 18px 42px rgba(0,0,0,.5);} html.night-mode .amenities span{padding:9px 11px;} html.night-mode .lang{padding:8px 12px;} } /* Night mode logo and highlight fixes */ html.night-mode .brand-file{ background:rgba(255,255,255,.055); border:1px solid rgba(240,197,110,.18); border-radius:12px; padding:4px 9px; width:max-content; } html.night-mode .brand-file img{ filter:brightness(1.18) contrast(1.06); } html.night-mode .brand-file img[alt*="Grand House"]{ filter:brightness(1.45) contrast(1.08); } html.night-mode .service-highlight, html.night-mode .service-highlight-lower{ background:#24201b !important; color:#f0c56e !important; border:1px solid rgba(240,197,110,.48) !important; box-shadow:none !important; } html.night-mode .service-highlight-lower{ display:inline-flex !important; align-items:center; width:auto; max-width:100%; padding:10px 15px; border-radius:999px; white-space:normal; } html.night-mode .header .brand img, html.night-mode .site-header .brand img{ filter:brightness(1.2) contrast(1.08) drop-shadow(0 1px 1px rgba(0,0,0,.35)); } html.night-mode .footer-logo{ background:#e9e2d7 !important; } @media(max-width:700px){ html.night-mode .brand-file{ max-width:100%; } html.night-mode .service-highlight-lower{ width:100%; justify-content:center; text-align:center; } } /* Night mode: preserve logo colors and increase logo legibility */ html.night-mode .brand{ background:#f5f1e8 !important; border-radius:10px; padding:4px 10px; } html.night-mode .brand img{ filter:none !important; } html.night-mode .brand-file{ background:#f5f1e8 !important; border:1px solid rgba(201,154,59,.32) !important; border-radius:12px; padding:6px 10px; width:max-content; } html.night-mode .brand-file img{ filter:none !important; } html.night-mode .brand-file img[alt*="Grand House"]{ filter:none !important; } html.night-mode .brand-file img[alt*="Ward Restaurant"]{ filter:none !important; } /* Mobile header / menu refinement */ @media(max-width:1100px){ .site-header{z-index:100;} .nav-wrap{position:relative;} .nav.open{ top:calc(100% + 8px) !important; left:12px !important; right:12px !important; max-height:calc(100vh - 96px); overflow:auto; z-index:120; background:rgba(255,253,249,.98) !important; backdrop-filter:blur(14px); } .nav.open a{ width:100%; padding:12px 10px; font-size:14px; border-radius:10px; } .nav.open a:hover{background:#f5f1ea;} body.mobile-menu-open{overflow:hidden;} } @media(max-width:700px){ .nav-wrap{padding:8px 12px;gap:8px;} .brand img{width:118px;height:46px;} .nav-actions{gap:7px;} .settings-btn,.theme-toggle{width:38px;height:38px;} .lang{padding:8px 11px;} .menu{font-size:28px;padding:4px 2px;} .nav.open{ left:10px !important; right:10px !important; top:calc(100% + 7px) !important; padding:10px !important; border-radius:14px; } } html.night-mode .nav.open{ background:rgba(23,21,19,.98) !important; border-color:#40372f !important; } html.night-mode .nav.open a:hover{background:#28221d !important;} /* Final mobile header clarity */ @media(max-width:700px){ .site-header{background:rgba(255,253,249,.98) !important;border-bottom:1px solid rgba(201,154,59,.28);box-shadow:0 4px 18px rgba(0,0,0,.08);} .nav-wrap{min-height:66px;align-items:center;} .brand{display:flex;align-items:center;min-width:0;} .brand img{width:122px !important;height:48px !important;object-fit:contain;} .nav-actions{margin-left:auto;display:flex;align-items:center;gap:6px;} .settings-btn,.theme-toggle,.lang,.menu{ flex:0 0 auto !important; min-width:40px; min-height:40px; } .lang{ display:inline-flex !important; align-items:center; justify-content:center; width:78px !important; height:40px !important; padding:0 10px !important; background:#fff !important; color:#171411 !important; border:1px solid #c9a66a !important; font-size:14px !important; line-height:1 !important; white-space:nowrap; opacity:1 !important; visibility:visible !important; } .menu{ display:grid !important; place-items:center; width:42px; height:42px; padding:0; background:transparent !important; color:#171411 !important; border:1px solid transparent; } .nav.open{ display:flex !important; top:calc(100% + 8px) !important; left:10px !important; right:10px !important; padding:8px !important; background:#fffdf9 !important; border:1px solid #d8c7a9 !important; box-shadow:0 18px 40px rgba(24,18,11,.18) !important; } .nav.open a{ display:flex !important; align-items:center; justify-content:flex-start; width:100%; min-height:46px; padding:11px 13px !important; color:#171411 !important; background:transparent !important; font-size:14px !important; font-weight:800 !important; border-radius:10px; } .nav.open a:hover,.nav.open a:focus-visible{ background:#f4ecdf !important; color:#8a641b !important; } } html.night-mode .lang{ background:#1b1917 !important; color:#f6f1e8 !important; border-color:#6f5a3d !important; } html.night-mode .menu{ color:#f6f1e8 !important; } @media(max-width:700px){ html.night-mode .site-header{ background:rgba(17,16,15,.98) !important; border-bottom-color:rgba(201,154,59,.36); } html.night-mode .nav.open{ background:#171513 !important; border-color:#514333 !important; } html.night-mode .nav.open a{color:#f6f1e8 !important;} html.night-mode .nav.open a:hover,html.night-mode .nav.open a:focus-visible{ background:#28221d !important;color:#f0c56e !important; } } /* MOBILE SPACING FIX - V31 */ /* Keep the mobile hero controls balanced and prevent uneven spacing. */ @media (max-width:700px){ .hero{ min-height:86vh; } .hero-content{ padding:88px 20px 150px; } .hero-actions{ display:flex; flex-direction:column; align-items:stretch; gap:14px; margin-top:24px; width:min(100%, 310px); } .hero-actions .btn{ width:100%; min-height:56px; box-sizing:border-box; margin:0 !important; display:flex; align-items:center; justify-content:center; } .hero-bottom{ grid-template-columns:repeat(2,minmax(0,1fr)); padding:18px 20px 20px; column-gap:22px; row-gap:18px; align-items:start; } .hero-bottom > *{ min-width:0; margin:0; } .hero-bottom span{ display:block; font-size:12px; line-height:1.25; } .hero-bottom small{ margin-top:4px; font-size:12px; line-height:1.35; } } /* V32 — final mobile hero spacing correction Keep both CTA buttons fully visible and keep the hero feature strip separated from the CTA area. Do not crop or reposition the hero image. */ @media (max-width:700px){ .hero{ min-height:92svh; } .hero-content{ padding:42px 20px 215px !important; } .hero-actions{ width:100% !important; max-width:300px !important; margin-top:22px !important; gap:12px !important; align-items:stretch !important; } .hero-actions .btn{ width:100% !important; min-height:54px !important; margin:0 !important; padding:12px 18px !important; box-sizing:border-box !important; } .hero-bottom{ padding:16px 20px 18px !important; column-gap:20px !important; row-gap:14px !important; } .hero-bottom span{ min-width:0 !important; line-height:1.25 !important; } .hero-bottom small{ margin-top:3px !important; line-height:1.3 !important; } } /* V27 — mobile hero reference layout */ @media (max-width:700px){ .hero{ min-height:calc(100svh - 64px) !important; align-items:flex-start !important; } .hero-content{ transform:none !important; display:block !important; width:100% !important; max-width:520px !important; box-sizing:border-box !important; padding:82px 20px 150px !important; margin:0 auto !important; } .hero .eyebrow{margin:0 0 10px !important;} .hero h1{ margin:0 0 18px !important; font-size:clamp(42px,12.5vw,54px) !important; line-height:.96 !important; } .hero p{ margin:0 !important; max-width:100% !important; font-size:15px !important; line-height:1.6 !important; } .hero-actions{ margin:26px auto 0 !important; width:100% !important; max-width:310px !important; display:flex !important; flex-direction:column !important; gap:12px !important; } .hero-actions .btn{ width:100% !important; min-height:56px !important; margin:0 !important; box-sizing:border-box !important; } } /* V28 — exact mobile hero composition based on supplied reference */ @media (max-width:700px){ .hero{ min-height:calc(100svh - 64px) !important; align-items:flex-start !important; overflow:hidden !important; } .hero-content{ position:relative !important; display:block !important; width:100% !important; max-width:none !important; box-sizing:border-box !important; padding:34px 20px 150px !important; margin:0 !important; transform:none !important; } .hero .eyebrow{ display:none !important; } .hero h1{ max-width:none !important; margin:0 auto 22px !important; text-align:center !important; font-size:36px !important; line-height:.98 !important; letter-spacing:-.035em !important; } .hero p{ max-width:340px !important; margin:0 auto !important; text-align:center !important; font-size:15px !important; line-height:1.62 !important; } .hero-actions{ width:100% !important; max-width:310px !important; margin:26px auto 0 !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important; } .hero-actions .btn{ width:100% !important; min-height:56px !important; margin:0 !important; padding:12px 18px !important; display:flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; } .hero-bottom{ padding:18px 20px 20px !important; column-gap:20px !important; row-gap:14px !important; } } /* V33 — mobile hero vertical placement Lower the hero text/CTAs together so the hotel name/background remain visible. Keep the internal spacing unchanged. */ @media (max-width:700px){ .hero-content{ padding-top:120px !important; } } /* V34 — mobile title only Raise only "A Stay Made for / Comfort & Hospitality". Keep paragraph and CTA positions unchanged. */ @media (max-width:700px){ .hero h1{ position:relative !important; top:-22px !important; margin-bottom:-22px !important; } } /* V37 — mobile only: place heading in upper empty area and enlarge slightly */ @media(max-width:700px){ .hero h1{ position:relative !important; top:-90px !important; margin-bottom:18px !important; font-size:40px !important; } .hero p{ position:relative !important; top:62px !important; } .hero-actions{ position:relative !important; top:62px !important; } } /* V38 — top Home link Move Home out of the mobile dropdown and place it in the top header beside the logo/theme controls. The Home link always returns to #top. */ .home-top{ display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 8px; color:var(--ink); font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; transition:.2s; } .home-top:hover{color:#986c19;} html.night-mode .home-top{color:#f4efe8;} html.night-mode .home-top:hover{color:#f0c56e;} @media(max-width:700px){ .nav-actions{gap:5px !important;} .home-top{ min-height:40px; padding:0 4px; font-size:13px; flex:0 0 auto; } } /* V39 — top Home + theme order and mobile alignment */ .home-top{ font-family:inherit; text-decoration:none; line-height:1; display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 34px; border:1px solid #c9a66a; border-radius:999px; color:var(--gold,#b88a2b); font-weight:700; } .nav-actions{display:flex;align-items:center;gap:10px;} /* Visual order: Night Mode → Home → Arabic */ .theme-toggle{order:1;} .home-top{order:2;} .lang{order:3;} .nav-actions .btn{order:4;} .menu{order:5;} @media(max-width:1100px){ .home-top{ font-size:12px !important; font-weight:800 !important; min-height:48px !important; padding:0 22px !important; border:1px solid #c9a66a !important; border-radius:999px !important; } .nav-actions{gap:6px !important;} } /* V40 — match mobile Home control to Arabic control */ @media(max-width:700px){ .home-top{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:78px !important; height:40px !important; min-width:78px !important; min-height:40px !important; box-sizing:border-box !important; padding:0 10px !important; margin:0 !important; border:1px solid #c9a66a !important; border-radius:999px !important; background:#fff !important; color:var(--ink) !important; font-family:inherit !important; font-size:14px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:0 !important; white-space:nowrap !important; } html.night-mode .home-top{ background:#1b1917 !important; color:#f6f1e8 !important; border-color:#c9a66a !important; } .theme-toggle{ border-color:#c9a66a !important; } html.night-mode .theme-toggle{ border-color:#c9a66a !important; } @media(max-width:700px){ .lang{ border-color:#c9a66a !important; } } } /* V41 — Arabic language typography and layout cleanup */ html[lang="ar"] body, body.rtl{ font-family:"Tajawal", Tahoma, Arial, sans-serif !important; line-height:1.7; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .eyebrow, html[lang="ar"] .btn, html[lang="ar"] .nav, html[lang="ar"] .home-top, html[lang="ar"] .lang, html[lang="ar"] label, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] button{ font-family:"Tajawal", Tahoma, Arial, sans-serif !important; } html[lang="ar"] .hero h1{ line-height:1.15 !important; letter-spacing:0 !important; } html[lang="ar"] .hero p, html[lang="ar"] .copy p, html[lang="ar"] .section-head p, html[lang="ar"] .room-card p, html[lang="ar"] .service p, html[lang="ar"] .feature-copy p, html[lang="ar"] .promo-copy p{ line-height:1.9 !important; } html[lang="ar"] .hero .eyebrow{ letter-spacing:0 !important; } html[lang="ar"] .nav{ gap:18px; } html[lang="ar"] .nav a, html[lang="ar"] .home-top, html[lang="ar"] .lang{ white-space:nowrap; } html[lang="ar"] .hero-actions{ direction:rtl; } html[lang="ar"] .hero-bottom{ direction:rtl; } @media(max-width:700px){ html[lang="ar"] .hero h1{ font-size:38px !important; line-height:1.18 !important; margin-bottom:20px !important; } html[lang="ar"] .hero p{ font-size:16px !important; line-height:1.9 !important; max-width:340px !important; } html[lang="ar"] .hero-actions{ gap:12px !important; } html[lang="ar"] .hero-bottom{ column-gap:18px !important; row-gap:18px !important; } html[lang="ar"] .hero-bottom span{ line-height:1.45 !important; } html[lang="ar"] .section-head h2, html[lang="ar"] .copy h2, html[lang="ar"] .feature-copy h2{ line-height:1.35 !important; } html[lang="ar"] .booking-fields, html[lang="ar"] .booking-contact-row{ direction:rtl; } } /* Arabic-only spacing refinement */ html[lang="ar"] body{font-family:"Tajawal",Tahoma,Arial,sans-serif !important;line-height:1.75 !important} html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0 !important;line-height:1.35 !important} html[lang="ar"] p{letter-spacing:0 !important;line-height:1.9 !important} html[lang="ar"] .nav,html[lang="ar"] .nav a,html[lang="ar"] .btn,html[lang="ar"] label,html[lang="ar"] input,html[lang="ar"] select,html[lang="ar"] button{letter-spacing:0 !important;line-height:1.5 !important} @media(max-width:700px){html[lang="ar"] .hero h1{font-size:38px !important;line-height:1.3 !important;margin-bottom:18px !important}html[lang="ar"] .hero p{font-size:16px !important;line-height:1.9 !important;max-width:340px !important}html[lang="ar"] .hero-actions{margin-top:26px !important;gap:12px !important}html[lang="ar"] .section-head h2,html[lang="ar"] .copy h2,html[lang="ar"] .feature-copy h2{font-size:32px !important;line-height:1.4 !important}} /* Arabic mobile layout: improve vertical rhythm without affecting English */ @media(max-width:700px){html[lang="ar"] .hero{min-height:100svh}html[lang="ar"] .hero-content{padding:72px 20px 210px}html[lang="ar"] .hero h1{font-size:37px !important;line-height:1.22 !important;margin-bottom:22px !important}html[lang="ar"] .hero p{font-size:15px !important;line-height:1.85 !important;margin:0 auto !important}html[lang="ar"] .hero-actions{margin-top:24px !important}html[lang="ar"] .hero-bottom{padding:15px 18px !important;gap:12px !important}html[lang="ar"] .hero-bottom span{font-size:12px !important;line-height:1.45 !important}html[lang="ar"] .hero-bottom small{margin-top:4px !important;font-size:11px !important}} /* V41 — fixed header only; preserve existing layout */ :root{--aldar-header-height:76px;} .site-header{position:fixed !important;top:0;left:0;right:0;width:100%;z-index:9999 !important;} body{padding-top:var(--aldar-header-height);} @media(max-width:700px){ :root{--aldar-header-height:64px;} body{padding-top:var(--aldar-header-height);} } /* V42 — ensure mobile header controls receive the first tap */ .site-header .nav-wrap,.site-header .nav-actions,.site-header .nav-actions>*{pointer-events:auto;} .site-header .nav-actions{position:relative;z-index:10001;} .site-header .nav-actions .home-top, .site-header .nav-actions .theme-toggle, .site-header .nav-actions .lang, .site-header .nav-actions .menu{position:relative;z-index:10002;touch-action:manipulation;} /* MOBILE HEADER HOTFIX — controls must remain visible and independently tappable. Mobile only. Desktop styles are intentionally untouched. */ @media (max-width:700px){ .site-header .nav-wrap{ width:100% !important; max-width:none !important; min-height:64px !important; padding:7px 10px !important; gap:5px !important; display:flex !important; align-items:center !important; overflow:visible !important; } .site-header .brand{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; display:flex !important; align-items:center !important; } .site-header .brand img{ width:96px !important; height:44px !important; max-width:96px !important; object-fit:contain !important; } .site-header .nav-actions{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; margin-left:auto !important; gap:4px !important; display:flex !important; align-items:center !important; position:relative !important; z-index:10001 !important; } .site-header .nav-actions .theme-toggle, .site-header .nav-actions .home-top, .site-header .nav-actions .lang, .site-header .nav-actions .menu{ flex:0 0 auto !important; box-sizing:border-box !important; margin:0 !important; } .site-header .nav-actions .theme-toggle{ width:34px !important; min-width:34px !important; height:34px !important; min-height:34px !important; padding:0 !important; font-size:16px !important; } .site-header .nav-actions .home-top{ width:62px !important; min-width:62px !important; height:34px !important; min-height:34px !important; padding:0 6px !important; font-size:12px !important; border-radius:999px !important; } .site-header .nav-actions .lang{ width:62px !important; min-width:62px !important; height:34px !important; min-height:34px !important; padding:0 6px !important; font-size:12px !important; border-radius:999px !important; } .site-header .nav-actions .menu{ display:grid !important; width:34px !important; min-width:34px !important; height:34px !important; min-height:34px !important; padding:0 !important; font-size:22px !important; place-items:center !important; } .site-header .nav-actions>*{ pointer-events:auto !important; touch-action:manipulation !important; } } /* PHONE LAYOUT SAFETY — applies only to touch/coarse-pointer devices. This prevents a mobile browser using a wide/desktop layout from shrinking the whole site into a tiny column. Desktop mouse/trackpad layouts are untouched. */ @media (hover:none) and (pointer:coarse) and (max-width:1200px){ html,body{ width:100% !important; max-width:100% !important; min-width:0 !important; overflow-x:hidden !important; } .site-header, main, .footer{ width:100% !important; max-width:none !important; min-width:0 !important; } .nav-wrap{ width:100% !important; max-width:none !important; box-sizing:border-box !important; } .hero, .hero-content, .hero-bottom, .section, .booking-strip, .promo-banner, .promo-inner, .feature-band, .location, .footer-grid{ box-sizing:border-box !important; width:100% !important; max-width:none !important; min-width:0 !important; } .hero-content{ padding-left:20px !important; padding-right:20px !important; } img,video,svg{ max-width:100% !important; } } /* ARABIC ONLY — final mobile spacing and typography */ html[lang="ar"] body{ font-family:"Tajawal",Tahoma,Arial,sans-serif !important; line-height:1.7 !important; } html[lang="ar"] .hero h1, html[lang="ar"] .hero p, html[lang="ar"] .hero-actions, html[lang="ar"] .hero .eyebrow{ position:static !important; top:auto !important; transform:none !important; } html[lang="ar"] .hero h1{ text-align:center !important; margin:0 0 18px !important; font-weight:700 !important; } html[lang="ar"] .hero p{ text-align:center !important; margin:0 auto !important; max-width:680px !important; font-weight:500 !important; } html[lang="ar"] .hero-actions{ direction:rtl !important; } html[lang="ar"] .hero-bottom{ direction:rtl !important; text-align:right !important; } html[lang="ar"] .section-head, html[lang="ar"] .copy, html[lang="ar"] .feature-copy, html[lang="ar"] .card-body, html[lang="ar"] .service>div, html[lang="ar"] .promo-copy, html[lang="ar"] .location-card{ text-align:right; } @media(max-width:700px){ html[lang="ar"] .hero{ min-height:calc(100svh - 64px) !important; align-items:flex-start !important; } html[lang="ar"] .hero-content{ padding:42px 18px 185px !important; margin:0 auto !important; } html[lang="ar"] .hero h1{ font-size:39px !important; line-height:1.2 !important; margin:0 auto 20px !important; max-width:360px !important; } html[lang="ar"] .hero p{ font-size:15px !important; line-height:1.75 !important; max-width:350px !important; } html[lang="ar"] .hero-actions{ margin:24px auto 0 !important; width:100% !important; max-width:310px !important; gap:12px !important; } html[lang="ar"] .hero-actions .btn{ width:100% !important; min-height:54px !important; padding:12px 16px !important; line-height:1.4 !important; } html[lang="ar"] .hero-bottom{ padding:15px 18px 18px !important; column-gap:18px !important; row-gap:13px !important; } html[lang="ar"] .hero-bottom span{ font-size:12px !important; line-height:1.4 !important; } html[lang="ar"] .hero-bottom small{ font-size:11px !important; line-height:1.5 !important; } html[lang="ar"] .section-head h2, html[lang="ar"] .copy h2, html[lang="ar"] .feature-copy h2, html[lang="ar"] .location-card h2{ font-size:34px !important; line-height:1.35 !important; } html[lang="ar"] .section-head p, html[lang="ar"] .copy p, html[lang="ar"] .feature-copy p, html[lang="ar"] .service p, html[lang="ar"] .room-card p{ font-size:15px !important; line-height:1.8 !important; } html[lang="ar"] .amenities{ justify-content:flex-start; direction:rtl; } } /* ARABIC HERO — preserve the hotel name in the background and match English spacing */ html[lang="ar"] .hero{ position:relative; } html[lang="ar"] .hero-content{ z-index:3; } html[lang="ar"] .hero h1{ position:relative !important; z-index:4 !important; } html[lang="ar"] .hero p{ position:relative !important; z-index:3 !important; max-width:680px !important; } @media(max-width:700px){ html[lang="ar"] .hero{ min-height:calc(100svh - 64px) !important; } html[lang="ar"] .hero-content{ padding:52px 18px 220px !important; } html[lang="ar"] .hero h1{ top:0 !important; margin:0 auto 34px !important; font-size:38px !important; line-height:1.22 !important; max-width:355px !important; } html[lang="ar"] .hero p{ top:0 !important; margin:0 auto !important; max-width:350px !important; font-size:15px !important; line-height:1.85 !important; text-shadow:0 2px 8px rgba(0,0,0,.65); } html[lang="ar"] .hero-actions{ top:0 !important; margin:30px auto 0 !important; max-width:310px !important; gap:12px !important; } html[lang="ar"] .hero-actions .btn{ min-height:56px !important; } } /* Slightly stronger readability without hiding the illuminated hotel name */ html[lang="ar"] .hero-overlay{ background:linear-gradient(90deg,rgba(11,8,5,.68),rgba(11,8,5,.28) 55%,rgba(11,8,5,.08)) !important; } [dir="rtl"] .hero-overlay{ background:linear-gradient(270deg,rgba(11,8,5,.68),rgba(11,8,5,.28) 55%,rgba(11,8,5,.08)) !important; } /* Arabic hero: move text block slightly lower */ @media(max-width:700px){ html[lang="ar"] .hero-content{ padding-top:78px !important; } } /* Promo Ward / Spa names are clickable menu buttons on desktop and mobile */ .promo-place-names .menu-btn{ appearance:none; flex:1 1 0; min-width:220px; justify-content:center; background:transparent; border:1px solid rgba(198,164,95,.45); border-radius:999px; color:#f0c56e; padding:12px 16px; font-size:12px; font-weight:900; letter-spacing:.12em; cursor:pointer; transition:.22s; } .promo-place-names .menu-btn:hover{ background:rgba(198,164,95,.10); border-color:rgba(198,164,95,.8); transform:translateY(-1px); } @media(max-width:700px){ .promo-place-names .menu-btn{ width:100%; min-width:0; flex:1 1 100%; } } /* Restore the original promo design — only add click behavior */ .promo-place-names .menu-btn{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-width:0; width:auto; padding:9px 14px; border:1px solid rgba(198,164,95,.45); border-radius:999px; background:transparent; color:#f0c56e; font-size:12px; font-weight:900; letter-spacing:.12em; line-height:normal; font-family:inherit; cursor:pointer; box-sizing:border-box; transition:none; } .promo-place-names .menu-btn:hover{ background:transparent; border-color:rgba(198,164,95,.45); transform:none; } @media(max-width:700px){ .promo-place-names .menu-btn{ width:100%; flex:1 1 100%; } } /* Night Mode — lighter charcoal finish Keep the night theme elegant and readable, avoiding near-black surfaces. */ html.night-mode{ --paper:#181818; --ink:#f2eee7; --cream:#2a2927; --muted:#c5beb5; --line:#3d3a36; --shadow:0 22px 65px rgba(0,0,0,.30); } html.night-mode body{background:#2A2A2A;color:#f2eee7;} html.night-mode body:before{opacity:.012;} html.night-mode .site-header{background:rgba(28,28,28,.96);border-bottom-color:rgba(201,154,59,.28);} html.night-mode .lang, html.night-mode .theme-toggle, html.night-mode .settings-btn, html.night-mode .menu{background:#252525 !important;color:#f2eee7 !important;border-color:#5a5147 !important;} html.night-mode .nav.open{background:#202020 !important;color:#f2eee7 !important;border-color:#45413c !important;} html.night-mode .nav.open a{color:#f2eee7 !important;} html.night-mode .section-head p, html.night-mode .copy p, html.night-mode .feature-copy p, html.night-mode .card-body p, html.night-mode .service p, html.night-mode .career-card p, html.night-mode .result-muted{color:#c8c1b8;} html.night-mode .room-card, html.night-mode .service, html.night-mode .career-card{background:#242424;color:#f2eee7;border-color:#44413d;box-shadow:0 14px 38px rgba(0,0,0,.18);} html.night-mode .promo-banner{background:#2A2A2A;color:#f2eee7;border-color:#47423b;} html.night-mode .feature-band{background:#262626;color:#f2eee7;} html.night-mode .spa-section{background:#2A2A2A !important;} html.night-mode .amenities span{background:#30302f !important;color:#f2eee7 !important;border-color:#4b4843;} html.night-mode .price{background:#30302f !important;color:#f2eee7 !important;border-color:#4b4843;} html.night-mode .booking-form input, html.night-mode .booking-form select, html.night-mode .report-filters input, html.night-mode .admin-form input, html.night-mode .admin-form select, html.night-mode .account-form input{background:#2b2b2a !important;color:#f2eee7 !important;border-color:#55514b !important;} html.night-mode .booking-form option{background:#2b2b2a;color:#f2eee7;} html.night-mode .booking-result{background:#292929;color:#f2eee7;border-color:#4d4943;} html.night-mode .location-card{background:#242424;color:#fff;border-color:#47433d;} html.night-mode .map-placeholder{background:radial-gradient(circle at 35% 35%,#55514a,#272727 68%);border-color:#5b554d;} html.night-mode .footer{background:#202020;color:#d8d0c6;border-top-color:#393631;} html.night-mode .modal-card{background:#242424 !important;color:#f2eee7 !important;border-color:#4a4640;} html.night-mode .modal-image{background:#202020 !important;} html.night-mode .promo-logos img, html.night-mode .spa-logo-frame{background:#2b2b2b !important;} html.night-mode .jobs-grid span, html.night-mode .admin-stat{background:#292929 !important;color:#f2eee7 !important;border-color:#47433d !important;} html.night-mode .admin-shell{background:#202020 !important;color:#f2eee7 !important;} html.night-mode .admin-table th, html.night-mode .admin-table td{color:#ded6cd;border-color:#45413c;} html.night-mode .settings-menu{background:#292929;color:#f2eee7;border-color:#4b4741;} html.night-mode .settings-menu a{color:#f2eee7;} html.night-mode .settings-menu a:hover, html.night-mode .settings-menu button:hover{background:#363534 !important;} html.night-mode .account-form input[readonly]{background:#333231 !important;} html.night-mode .modal{background:rgba(0,0,0,.72);} /* Desktop header — Home beside Rooms; preserve mobile header unchanged */ .desktop-home{display:none;} @media(min-width:1101px){ .site-header .nav .desktop-home{ display:inline; } .site-header .nav-actions .home-top{ display:none !important; } } /* Desktop hero facts — keep all six items on one row; mobile unchanged */ @media(min-width:1101px){ .hero-bottom{ grid-template-columns:repeat(6,minmax(0,1fr)); } } /* Gallery-only slider */ .gallery-slider{display:block!important;width:100%!important;max-width:1200px!important;margin:0 auto!important;} .gallery-slider-viewport{position:relative!important;width:100%!important;aspect-ratio:16/9!important;overflow:hidden!important;border-radius:16px!important;background:#eee!important;} .gallery-slider-track{position:relative!important;width:100%!important;height:100%!important;} .gallery-slider-track img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;margin:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;cursor:grab!important;} .gallery-slider-arrow{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:20!important;width:48px!important;height:68px!important;border:0!important;border-radius:0 8px 8px 0!important;background:rgba(20,20,20,.68)!important;color:#fff!important;font-size:30px!important;line-height:1!important;display:grid!important;place-items:center!important;cursor:pointer!important;opacity:.95!important;} .gallery-slider-arrow:hover{background:rgba(20,20,20,.88)!important;} .gallery-slider-prev{left:0!important;right:auto!important;} .gallery-slider-next{right:0!important;left:auto!important;border-radius:8px 0 0 8px!important;} .gallery-slider-counter{position:absolute!important;right:10px!important;bottom:9px!important;z-index:21!important;padding:4px 7px!important;border-radius:4px!important;background:rgba(20,20,20,.68)!important;color:#fff!important;font-size:11px!important;font-weight:700!important;line-height:1!important;} #gallerySource{display:none!important;} @media(max-width:700px){ .gallery-slider-viewport{aspect-ratio:4/3!important;border-radius:12px!important;} .gallery-slider-arrow{width:38px!important;height:54px!important;font-size:24px!important;} } /* Gallery slider track: one image visible, horizontal movement */ .gallery-slider-track{display:flex!important;flex-direction:row!important;width:100%!important;height:100%!important;transition:transform .48s cubic-bezier(.22,.61,.36,1)!important;will-change:transform!important;} .gallery-slider-track img{flex:0 0 100%!important;width:100%!important;min-width:100%!important;height:100%!important;object-fit:contain!important;} /* Final isolated gallery image */ .gallery-slider-viewport{overflow:hidden!important;} .gallery-slider-image{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;margin:0!important;transform:translateX(0)!important;will-change:transform!important;} /* Isolated full-width Gallery carousel */ #gallery{overflow:hidden!important;} #gallery .gallery-slider{width:100vw!important;max-width:none!important;margin-left:50%!important;transform:translateX(-50%)!important;} #gallery .gallery-radio-carousel{position:relative!important;width:100vw!important;height:min(32vw,520px)!important;min-height:300px!important;overflow:hidden!important;background:transparent!important;} #gallery .gallery-radio-track{position:absolute!important;top:0!important;left:0!important;height:100%!important;display:flex!important;gap:16px!important;width:max-content!important;will-change:transform!important;} #gallery .gallery-radio-slide{flex:0 0 calc((100vw - 32px)/3)!important;width:calc((100vw - 32px)/3)!important;height:100%!important;overflow:hidden!important;border-radius:16px!important;background:#eee!important;} #gallery .gallery-radio-slide img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;margin:0!important;border-radius:16px!important;} #gallery .gallery-radio{position:absolute!important;opacity:0!important;pointer-events:none!important;} #gallery .gallery-controls{display:none;} #gallery .gallery-radio-arrow{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:50!important;width:52px!important;height:64px!important;display:grid!important;place-items:center!important;background:rgba(20,20,20,.68)!important;color:#fff!important;font-size:30px!important;cursor:pointer!important;user-select:none!important;} #gallery .gallery-radio-prev{left:0!important;border-radius:0 8px 8px 0!important;} #gallery .gallery-radio-next{right:0!important;border-radius:8px 0 0 8px!important;} #gallery .gallery-radio-counter{position:absolute!important;right:16px!important;bottom:12px!important;z-index:51!important;padding:5px 8px!important;border-radius:4px!important;background:rgba(20,20,20,.72)!important;color:#fff!important;font-size:12px!important;font-weight:700!important;} @media(max-width:700px){ #gallery .gallery-radio-carousel{height:70vw!important;min-height:230px!important;max-height:420px!important;} #gallery .gallery-radio-slide{flex-basis:calc(100vw - 32px)!important;width:calc(100vw - 32px)!important;border-radius:12px!important;} #gallery .gallery-radio-slide img{border-radius:12px!important;} #gallery .gallery-radio-arrow{width:42px!important;height:56px!important;font-size:25px!important;} } /* Gallery carousel: true edge-to-edge viewport width */ #gallery .gallery-slider{ position:relative!important; width:100vw!important; max-width:none!important; left:50%!important; margin-left:-50vw!important; margin-right:0!important; transform:none!important; padding-left:0!important; padding-right:0!important; } #gallery .gallery-radio-carousel{ width:100vw!important; max-width:none!important; margin:0!important; } #gallery .gallery-radio-track{ left:0!important; } #gallery{overflow:visible!important;} /* FINAL GALLERY LAYOUT — full viewport carousel, title stays aligned */ #gallery.section.gallery{ width:100vw!important; max-width:none!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important; padding-left:0!important; padding-right:0!important; overflow:visible!important; } #gallery.section.gallery > .section-head{ margin-bottom:42px !important; width:min(1240px,100%)!important; max-width:1240px!important; margin-left:auto!important; margin-right:auto!important; padding-left:24px!important; padding-right:24px!important; box-sizing:border-box!important; } #gallery.section.gallery > .gallery-slider{ display:block!important; position:relative!important; width:100vw!important; max-width:none!important; margin:0!important; left:0!important; transform:none!important; padding:0!important; } #gallery .gallery-radio-carousel{ position:relative!important; width:100vw!important; max-width:none!important; height:min(32vw,520px)!important; min-height:300px!important; margin:0!important; overflow:hidden!important; } #gallery .gallery-radio-track{ position:absolute!important; top:0!important; left:0!important; height:100%!important; width:max-content!important; display:flex!important; gap:16px!important; transition:transform .55s cubic-bezier(.22,.61,.36,1)!important; } #gallery .gallery-radio-slide{ flex:0 0 calc((100vw - 32px)/3)!important; width:calc((100vw - 32px)/3)!important; height:100%!important; } @media(max-width:700px){ #gallery.section.gallery > .section-head{ padding-left:16px!important; padding-right:16px!important; } #gallery .gallery-radio-carousel{ height:70vw!important; min-height:230px!important; max-height:420px!important; } #gallery .gallery-radio-slide{ flex:0 0 calc(100vw - 32px)!important; width:calc(100vw - 32px)!important; } } /* Service menu modal */ .menu-modal-view{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:92vw;max-height:86vh;} .menu-modal-title{font:600 22px "Cormorant Garamond",Georgia,serif;color:#f6f1e8;margin:0 0 10px;text-align:center;} .menu-modal-image{display:block;max-width:92vw;max-height:78vh;width:auto;height:auto;object-fit:contain;border-radius:10px;background:#fff;} @media(max-width:700px){ .menu-modal-view{max-width:94vw;max-height:84vh;} .menu-modal-title{font-size:20px;margin-bottom:8px;} .menu-modal-image{max-width:94vw;max-height:74vh;} } /* Service menu — proportional size */ .menu-modal-view{ width:min(88vw,1000px)!important; max-width:min(88vw,1000px)!important; max-height:82vh!important; box-sizing:border-box!important; } .menu-modal-image{ width:auto!important; height:auto!important; max-width:100%!important; max-height:72vh!important; object-fit:contain!important; } @media(max-width:700px){ .menu-modal-view{ width:92vw!important; max-width:92vw!important; max-height:82vh!important; } .menu-modal-image{ max-width:92vw!important; max-height:72vh!important; } } /* Room card photo carousels — horizontal, one image at a time */ .room-gallery{position:relative!important;overflow:hidden!important;touch-action:pan-y!important;} .room-gallery-track{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;overflow:hidden!important;} .room-gallery-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;transform:translate3d(0,0,0);transition:transform .48s cubic-bezier(.22,.61,.36,1)!important;will-change:transform!important;} .room-gallery-slide img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;} .room-gallery-prev,.room-gallery-next{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;width:42px!important;height:42px!important;border:0!important;border-radius:50%!important;background:rgba(20,18,15,.68)!important;color:#fff!important;font-size:25px!important;line-height:42px!important;text-align:center!important;cursor:pointer!important;z-index:10!important;opacity:.92!important;transition:.2s!important;padding:0!important;} .room-gallery-prev{left:14px!important}.room-gallery-next{right:14px!important} .room-gallery-prev:hover,.room-gallery-next:hover{background:rgba(20,18,15,.9)!important;transform:translateY(-50%) scale(1.05)!important;} .room-gallery-counter{position:absolute!important;right:18px!important;bottom:16px!important;background:rgba(20,18,15,.68)!important;color:#fff!important;border-radius:999px!important;padding:5px 9px!important;font-size:10px!important;font-weight:800!important;z-index:11!important;} @media(max-width:700px){ .room-gallery-prev,.room-gallery-next{width:36px!important;height:36px!important;line-height:36px!important;font-size:21px!important;} .room-gallery-prev{left:10px!important}.room-gallery-next{right:10px!important} .room-gallery-counter{right:12px!important;bottom:12px!important;} } /* V31 — Equal booking field widths on desktop */ @media (min-width:1101px){ .booking-fields{ grid-template-columns:repeat(8,minmax(0,1fr)) !important; gap:11px !important; align-items:end !important; } .booking-fields > label{ min-width:0 !important; } } /* Guest name and phone: equal width, directly below the first row */ .booking-contact-row{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; width:min(100%,820px) !important; max-width:820px !important; gap:11px !important; } .booking-contact-row > label{ width:auto !important; min-width:0 !important; } .booking-contact-row > label input{ width:100% !important; box-sizing:border-box !important; } /* Strict 50/50 sizing for Guest Name and Phone Number */ .booking-contact-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; width: min(100%, 820px) !important; max-width: 820px !important; box-sizing: border-box !important; } .booking-contact-row > label { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .booking-contact-row > label input { display: block !important; width: 100% !important; height: 52px !important; min-height: 52px !important; box-sizing: border-box !important; border-radius: 10px !important; margin: 0 !important; } /* Mobile */ @media (max-width: 700px) { .booking-contact-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; max-width: none !important; } } /* Booking screenshot reminder — direct styles */ .booking-result{position:relative} .booking-screenshot-reminder{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;margin:18px auto 2px!important;padding:10px 16px!important;border:1px solid rgba(201,154,59,.28)!important;border-radius:10px!important;background:rgba(201,154,59,.06)!important;color:#f1d58f!important;font-size:13px!important;font-weight:600!important;line-height:1.35!important;text-align:left!important;max-width:430px!important;box-sizing:border-box!important} .booking-screenshot-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 34px!important;width:34px!important;height:34px!important;max-width:34px!important;max-height:34px!important;color:var(--gold,#c99a3b)!important;overflow:hidden!important} .booking-screenshot-icon svg{display:block!important;width:34px!important;height:34px!important;max-width:34px!important;max-height:34px!important;min-width:34px!important;min-height:34px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important} .booking-screenshot-icon svg circle{fill:currentColor!important;stroke:none!important} .booking-screenshot-text{display:block!important} @media(min-width:701px){ .booking-result{min-height:180px!important} .booking-screenshot-reminder{position:absolute!important;right:7%!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;width:390px!important;max-width:390px!important} .booking-screenshot-icon,.booking-screenshot-icon svg{width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important;min-width:40px!important;min-height:40px!important} } @media(max-width:700px){ .booking-screenshot-reminder{position:static!important;transform:none!important;width:auto!important;max-width:none!important;justify-content:flex-start!important} .booking-screenshot-icon,.booking-screenshot-icon svg{width:30px!important;height:30px!important;max-width:30px!important;max-height:30px!important;min-width:30px!important;min-height:30px!important} } /* TABLET + FOLD NAVIGATION — isolated addition */ @media (min-width:701px) and (max-width:1100px){ /* Keep the desktop-style navigation only for Tablet and Fold. */ .nav-wrap{ max-width:1240px; padding:8px 18px; gap:14px; } .brand img{ width:122px; height:48px; } .nav{ display:flex !important; gap:11px; align-items:center; margin-left:auto; flex:1 1 auto; min-width:0; } .nav a{ font-size:10px; white-space:nowrap; } .site-header .nav .desktop-home{ display:inline; } .nav-actions{ gap:7px; flex:0 0 auto; } .nav-actions .home-top{ display:none !important; } .nav-actions .menu{ display:none !important; } .nav-actions .theme-toggle{ width:34px; height:34px; font-size:16px; } .nav-actions .lang{ padding:7px 9px; font-size:11px; white-space:nowrap; } .nav-actions .btn.small{ padding:8px 11px; font-size:10px; white-space:nowrap; } } /* TABLET + FOLD ARABIC BUTTON TEXT VISIBILITY — isolated fix */ @media (min-width:701px) and (max-width:1100px){ .site-header .nav-actions .lang{ color:#171411 !important; background:#fffdf9 !important; border:1px solid #c9a66a !important; font-family:"Tajawal",Tahoma,Arial,sans-serif !important; font-size:12px !important; font-weight:800 !important; line-height:1 !important; text-align:center !important; opacity:1 !important; visibility:visible !important; } html.night-mode .site-header .nav-actions .lang{ color:#f2eee7 !important; background:#252525 !important; border-color:#5a5147 !important; } } /* Gallery title-to-images spacing only */ #gallery.section.gallery > .section-head{ margin-bottom: 0 !important; } /* Gallery-only: remove the legacy radio carousel spacer; keep the active 3-image Swiper */ #gallery .gallery-radio-carousel{ display:none!important; } /* SERVICE MENU MODAL — Night Mode only, all screen sizes */ html.night-mode .modal-card:has(.menu-modal-image[src*="ward-menu.png"]), html.night-mode .modal-card:has(.menu-modal-image[src*="spa-menu.png"]){ background:transparent !important; border:0 !important; box-shadow:none !important; } html.night-mode .modal-card:has(.menu-modal-image[src*="ward-menu.png"]) .menu-modal-view, html.night-mode .modal-card:has(.menu-modal-image[src*="spa-menu.png"]) .menu-modal-view{ background:transparent !important; border:0 !important; box-shadow:none !important; } html.night-mode .modal-card:has(.menu-modal-image[src*="ward-menu.png"]) .menu-modal-image, html.night-mode .modal-card:has(.menu-modal-image[src*="spa-menu.png"]) .menu-modal-image{ background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } html.night-mode .modal-card:has(.menu-modal-image[src*="ward-menu.png"]) .menu-modal-title, html.night-mode .modal-card:has(.menu-modal-image[src*="spa-menu.png"]) .menu-modal-title{ display:none !important; } /* HERO BOTTOM LANDSCAPE — six equal items in one row */ @media (min-width:701px) and (max-width:1100px) and (orientation:landscape){ .hero-bottom{ grid-template-columns:repeat(6,minmax(0,1fr)); } } /* PROMO LANDSCAPE — keep only the Promo Book Now button on one line */ @media (min-width:701px) and (max-width:1100px) and (orientation:landscape){ main > section.promo-banner.section .promo-inner > a.btn[data-i18n="promo.book"]{ flex:0 0 auto; white-space:nowrap; } } /* SPA LANDSCAPE — match service/room card width only */ @media (min-width:701px) and (max-width:1100px) and (orientation:landscape){ .spa-section .split.reverse{ grid-template-columns:1fr 1fr; gap:26px; } } /* V42 — iPhone booking LTR control fix */ html[lang="ar"] #checkin, html[lang="ar"] #checkout, html[lang="ar"] #phone{ direction:ltr !important; text-align:left !important; unicode-bidi:plaintext !important; } /* NIGHT MODE HEADER LOGO — JPG white background visually removed */ html.night-mode .site-header .brand{ background:transparent !important; border-radius:0 !important; padding:0 !important; } html.night-mode .site-header .brand img{ filter:invert(1) brightness(1.08) contrast(1.08) !important; mix-blend-mode:screen !important; background:transparent !important; } /* NIGHT MODE FOOTER LOGO — match header logo treatment */ html.night-mode .footer-logo{ background:transparent !important; padding:0 !important; border-radius:0 !important; filter:invert(1) brightness(1.08) contrast(1.08) !important; mix-blend-mode:screen !important; } /* NIGHT MODE — Ward Restaurant logo only: remove light frame, preserve original logo colors */ html.night-mode .brand-file:has(img[alt*="Ward Restaurant"]){ background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; } html.night-mode .brand-file:has(img[alt*="Ward Restaurant"]) img{ filter:none !important; mix-blend-mode:normal !important; background:transparent !important; } /* NIGHT MODE — Grand House Coffee logo only: remove light frame, preserve original logo colors */ html.night-mode .brand-file:has(img[alt*="Grand House"]){ background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; } html.night-mode .brand-file:has(img[alt*="Grand House"]) img{ filter:none !important; mix-blend-mode:normal !important; background:transparent !important; } /* NIGHT MODE — Al Laila logo only: remove light frame, preserve original logo colors */ html.night-mode .brand-file:has(img[alt*="Al Laila"]){ background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; } html.night-mode .brand-file:has(img[alt*="Al Laila"]) img{ filter:none !important; mix-blend-mode:normal !important; background:transparent !important; } /* NIGHT MODE — requested section backgrounds only */ html.night-mode .feature-band.cabin{background:#2A2A2A !important;} html.night-mode #pool.feature-band{background:#2A2A2A !important;} /* NIGHT MODE — remove only the inner Amenities text border */ html.night-mode .amenities > span > span{ border:0 !important; background:transparent !important; } /* DAY MODE — Footer hotel logo only: remove the white frame */ html:not(.night-mode) .footer-logo{ background:transparent !important; padding:0 !important; border-radius:0 !important; } /* DAY MODE — Footer hotel logo: use the same visual treatment as Night Mode */ html:not(.night-mode) .footer-logo{ filter:invert(1) brightness(1.08) contrast(1.08) !important; mix-blend-mode:screen !important; background:transparent !important; } /* MOBILE NIGHT MODE — header border correction only Home matches the Arabic control border; hamburger keeps its background but has no visible border. The dropdown panel border is unchanged. */ @media (max-width:700px){ html.night-mode .site-header .nav-actions .home-top{ border-color:#5a5147 !important; } html.night-mode .site-header .nav-actions .menu{ border:0 !important; background:transparent !important; } } /* MOBILE HERO — restore natural fit within hero frame */ @media (max-width:700px) and (orientation:portrait){ .hero-bg{ background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; transform:none !important; } } /* LANDSCAPE ENGLISH HERO — center the English hero content to match Arabic layout */ @media (min-width:701px) and (max-width:1100px) and (orientation:landscape){ html:not([lang="ar"]) .hero-content{ width:100% !important; max-width:1240px !important; margin:0 auto !important; padding-left:24px !important; padding-right:24px !important; text-align:center !important; } html:not([lang="ar"]) .hero .eyebrow[data-i18n="hero.eyebrow"]{display:none !important;} html:not([lang="ar"]) .hero h1{ max-width:850px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } html:not([lang="ar"]) .hero p{ max-width:680px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } html:not([lang="ar"]) .hero-actions{ justify-content:center !important; align-items:center !important; } } /* MOBILE PORTRAIT HERO TITLE — move existing title into the open area only */ @media (max-width:720px) and (orientation:portrait){ .hero h1{ position:relative !important; top:50px !important; z-index:3 !important; } } /* ARABIC HERO — mobile portrait only Changes in this block are intentionally limited to the basic mobile view. */ @media (max-width:700px) and (orientation:portrait){ /* Match the English mobile composition while keeping Arabic typography. */ html[lang="ar"] .hero h1, html[lang="ar"] .hero p, html[lang="ar"] .hero-actions{ position:relative !important; transform:none !important; } html[lang="ar"] .hero-content{ padding:120px 20px 155px !important; margin:0 auto !important; } html[lang="ar"] .hero h1{ font-family:"Tajawal",Tahoma,Arial,sans-serif !important; font-size:40px !important; line-height:.98 !important; font-weight:600 !important; letter-spacing:0 !important; text-align:center !important; max-width:360px !important; top:-90px !important; margin:0 auto 18px !important; } html[lang="ar"] .hero p{ font-family:"Tajawal",Tahoma,Arial,sans-serif !important; font-size:15px !important; line-height:1.62 !important; font-weight:500 !important; letter-spacing:0 !important; text-align:center !important; max-width:350px !important; top:62px !important; margin:0 auto !important; } html[lang="ar"] .hero-actions{ direction:rtl !important; width:100% !important; max-width:310px !important; top:62px !important; margin:26px auto 0 !important; justify-content:center !important; align-items:center !important; gap:12px !important; } html[lang="ar"] .hero-actions .btn{ width:100% !important; min-height:56px !important; padding:12px 18px !important; line-height:1.4 !important; margin:0 !important; } } /* SPA SECTION BACKGROUND — isolated to #spa only */ /* Only #spa is changed. No other .section, .split, image, or child element is modified. */ main > section#spa.spa-section{ background-color:transparent !important; background-image:none !important; } html.night-mode main > section#spa.spa-section{ background-color:transparent !important; background-image:none !important; } /* FINAL HOME SPACING GUARD — keep section rhythm consistent without touching booking controls, feature bands, gallery carousel internals, or admin/careers. */ main > section.intro.section, main > section#rooms.section, main > section#dining.section, main > section#spa.section{ padding-top:48px !important; padding-bottom:48px !important; } main > section#rooms.section{padding-bottom:36px !important;} main > section#gallery.section.gallery{padding-top:40px !important;padding-bottom:32px !important;} main > section#location.section.location{padding-top:40px !important;padding-bottom:56px !important;} main > section.promo-banner.section{padding-top:28px !important;padding-bottom:36px !important;} @media(max-width:700px){ main > section.intro.section, main > section#rooms.section, main > section#dining.section, main > section#spa.section{padding-top:36px !important;padding-bottom:36px !important;} main > section#rooms.section{padding-bottom:30px !important;} main > section#gallery.section.gallery{padding-top:32px !important;padding-bottom:28px !important;} main > section#location.section.location{padding-top:32px !important;padding-bottom:44px !important;} main > section.promo-banner.section{padding-top:22px !important;padding-bottom:30px !important;} } /* ADMIN REPORTS — restore previous action/button sizing, scoped to admin page only */ #admin #dashboard .admin-actions .aldar-header-action,#admin #dashboard .admin-actions #refreshBtn,#admin #dashboard .admin-actions #csvBtn,#admin #dashboard .admin-actions #logoutBtn{min-width:120px!important;height:42px!important;padding:0 18px!important;border:1px solid #c99a3b!important;border-radius:999px!important;background:#c99a3b!important;color:#fff!important;font:700 12px Inter,Arial,sans-serif!important;cursor:pointer!important;outline:none!important;box-sizing:border-box!important} #admin #dashboard .admin-actions #refreshBtn:hover,#admin #dashboard .admin-actions #refreshBtn:focus,#admin #dashboard .admin-actions #csvBtn:hover,#admin #dashboard .admin-actions #csvBtn:focus,#admin #dashboard .admin-actions #logoutBtn:hover,#admin #dashboard .admin-actions #logoutBtn:focus{background:#b88b32!important;border-color:#b88b32!important;box-shadow:0 0 0 2px rgba(201,154,59,.14)!important} #admin #dashboard .admin-table .status-select,#admin #dashboard .admin-table .aldar-status-action{min-width:126px!important;height:38px!important;padding:0 34px 0 13px!important;border:1px solid #c99a3b!important;border-radius:999px!important;background:#fffdf9!important;color:#171411!important;font:700 12px Inter,Arial,sans-serif!important;line-height:1!important;cursor:pointer!important;box-sizing:border-box!important;outline:none!important} #admin #dashboard .admin-table .status-select:hover,#admin #dashboard .admin-table .status-select:focus,#admin #dashboard .admin-table .aldar-status-action:hover,#admin #dashboard .admin-table .aldar-status-action:focus{border-color:#b88b2f!important;box-shadow:0 0 0 2px rgba(201,154,59,.14)!important} #admin #dashboard .admin-table .booking-export-btn,#admin #dashboard .admin-table .aldar-invoice-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:86px!important;height:38px!important;padding:0 15px!important;border:1px solid #c99a3b!important;border-radius:999px!important;background:#c99a3b!important;color:#fff!important;font:800 12px Inter,Arial,sans-serif!important;cursor:pointer!important;box-sizing:border-box!important;box-shadow:0 8px 20px rgba(201,154,59,.20)!important} #admin #dashboard .admin-table .booking-export-btn:hover,#admin #dashboard .admin-table .aldar-invoice-btn:hover{background:#b88b2f!important;border-color:#b88b2f!important;transform:translateY(-1px)} @media(max-width:700px){#admin #dashboard .admin-actions{flex-wrap:wrap}#admin #dashboard .admin-actions #refreshBtn,#admin #dashboard .admin-actions #csvBtn,#admin #dashboard .admin-actions #logoutBtn{min-width:118px!important}#admin #dashboard .admin-table .status-select,#admin #dashboard .admin-table .aldar-status-action{min-width:118px!important}#admin #dashboard .admin-table .booking-export-btn,#admin #dashboard .admin-table .aldar-invoice-btn{min-width:80px!important}} /* ADMIN REPORTS — make Status control match Invoice button */ #admin #dashboard .admin-table .status-select{ min-width:126px!important;height:38px!important;padding:0 34px 0 15px!important; border:1px solid #c99a3b!important;border-radius:999px!important; background:#c99a3b!important;color:#fff!important; font:800 12px Inter,Arial,sans-serif!important;line-height:1!important; cursor:pointer!important;box-sizing:border-box!important;outline:none!important; box-shadow:0 8px 20px rgba(201,154,59,.20)!important; } #admin #dashboard .admin-table .status-select:hover, #admin #dashboard .admin-table .status-select:focus{ background:#b88b2f!important;border-color:#b88b2f!important; color:#fff!important;box-shadow:0 0 0 2px rgba(201,154,59,.14),0 8px 20px rgba(201,154,59,.18)!important; } @media(max-width:700px){#admin #dashboard .admin-table .status-select{min-width:118px!important;}} /* ADMIN NIGHT MODE — restore readable dark panels and table contrast */ html.night-mode #admin .admin-shell, html.night-mode #accountPage .admin-shell{ background:#202020 !important; color:#f2eee7 !important; } html.night-mode #admin .admin-card, html.night-mode #accountPage .admin-card{ background:#292929 !important; color:#f2eee7 !important; border-color:#47433d !important; box-shadow:0 10px 30px rgba(0,0,0,.22) !important; } html.night-mode #admin .admin-head h1, html.night-mode #admin .admin-card h2, html.night-mode #accountPage .admin-card h1, html.night-mode #accountPage .admin-card h2{ color:#f2eee7 !important; } html.night-mode #admin .admin-muted, html.night-mode #accountPage .admin-muted{ color:#c9c0b6 !important; } html.night-mode #admin .admin-table{ background:#292929 !important; } html.night-mode #admin .admin-table th{ background:#242424 !important; color:#d7b774 !important; border-color:#45413c !important; } html.night-mode #admin .admin-table td{ background:#292929 !important; color:#eee8df !important; border-color:#45413c !important; } html.night-mode #admin .admin-table tbody tr:hover td{ background:#333333 !important; } html.night-mode #admin .report-filters label, html.night-mode #admin .admin-form label, html.night-mode #accountPage .account-form label{ color:#eee8df !important; } html.night-mode #admin .report-filters input, html.night-mode #admin .admin-form input, html.night-mode #admin .admin-form select, html.night-mode #accountPage .account-form input{ background:#2b2b2a !important; color:#f2eee7 !important; border-color:#55514b !important; } html.night-mode #admin .admin-stat{ background:#292929 !important; color:#f2eee7 !important; border-color:#47433d !important; } html.night-mode #admin .admin-stat small{ color:#bdb4aa !important; } html.night-mode #admin .admin-stat strong{ color:#f2eee7 !important; } html.night-mode #admin .status-select{ background:#c99a3b !important; color:#fff !important; border-color:#c99a3b !important; } html.night-mode #admin .booking-export-btn, html.night-mode #admin .aldar-invoice-btn{ background:#c99a3b !important; color:#fff !important; border-color:#c99a3b !important; } /* ADMIN NIGHT MODE — main background tone */ html.night-mode #admin .admin-shell{ background:#2D2C2B !important; } /* PROMO TABLET BOOK NOW — match the wide pill style used in the reference */ @media (min-width:701px) and (max-width:1100px){ main > section.promo-banner.section .promo-inner > a.btn[data-i18n="promo.book"]{ flex:0 0 auto; width:clamp(230px,30vw,340px); min-height:84px; padding:18px 34px; border-radius:999px; font-size:20px; font-weight:800; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:18px; } main > section.promo-banner.section .promo-inner > a.btn[data-i18n="promo.book"]::after{ content:"→"; font-size:1.25em; line-height:1; } } /* PROMO REFERENCE MATCH — scoped only to Direct Booking Benefit */ main > section.promo-banner.section .promo-inner{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:clamp(24px,4vw,56px) !important; padding:clamp(30px,4vw,52px) clamp(24px,4vw,56px) !important; background:linear-gradient(135deg,#171411 0%,#211b16 52%,#2a2118 100%) !important; border:1px solid rgba(198,164,95,.38) !important; border-radius:24px !important; box-shadow:0 18px 48px rgba(20,15,10,.10); box-sizing:border-box !important; width:100% !important; min-width:0 !important; } main > section.promo-banner.section .promo-copy{ flex:1 1 auto !important; min-width:0 !important; } main > section.promo-banner.section .promo-inner h2{ margin:.15rem 0 .65rem !important; font-family:"Cormorant Garamond",serif !important; font-size:clamp(34px,4.1vw,58px) !important; line-height:1.02 !important; letter-spacing:-.02em !important; font-weight:600 !important; color:#fff !important; } main > section.promo-banner.section .promo-inner p{ max-width:820px !important; margin:0 !important; color:rgba(255,255,255,.76) !important; font-size:clamp(13px,1.35vw,17px) !important; line-height:1.55 !important; } main > section.promo-banner.section .promo-place-names{ display:flex !important; align-items:center !important; gap:12px !important; margin-top:22px !important; flex-wrap:wrap !important; } main > section.promo-banner.section .promo-place-names .menu-btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:0 !important; flex:0 0 auto !important; padding:10px 18px !important; border:1px solid rgba(198,164,95,.55) !important; border-radius:999px !important; background:transparent !important; color:#f0c56e !important; font-size:11px !important; line-height:1 !important; font-weight:900 !important; letter-spacing:.12em !important; white-space:nowrap !important; transform:none !important; box-sizing:border-box !important; } main > section.promo-banner.section .promo-inner > a.btn[data-i18n="promo.book"]{ flex:0 0 auto !important; width:clamp(210px,20vw,290px) !important; min-height:84px !important; padding:18px 28px !important; border:0 !important; border-radius:999px !important; background:linear-gradient(135deg,#e0b65a 0%,#c99a3b 100%) !important; color:#171411 !important; box-shadow:0 14px 30px rgba(201,154,59,.25) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:16px !important; font-size:20px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:0 !important; white-space:nowrap !important; text-align:center !important; box-sizing:border-box !important; } main > section.promo-banner.section .promo-inner > a.btn[data-i18n="promo.book"]::after{ content:"→" !important; display:inline-block !important; font-size:1.25em !important; line-height:1 !important; } main > section.promo-banner.section .promo-inner > a.btn[data-i18n="promo.book"]:hover{ background:linear-gradient(135deg,#e0b65a 0%,#c99a3b 100%) !important; color:#171411 !important; transform:translateY(-1px); } @media (max-width:700px){ main > section.promo-banner.section .promo-inner{ flex-direction:column !important; align-items:stretch !important; gap:24px !important; padding:28px 22px !important; border-radius:20px !important; } main > section.promo-banner.section .promo-inner h2{ font-size:clamp(34px,10vw,43px) !important; line-height:1.04 !important; margin-bottom:12px !important; } main > section.promo-banner.section .promo-inner p{ font-size:15px !important; line-height:1.65 !important; max-width:none !important; } main > section.promo-banner.section .promo-place-names{ gap:10px !important; margin-top:18px !important; } main > section.promo-banner.section .promo-place-names .menu-btn{ flex:1 1 calc(50% - 5px) !important; width:auto !important; min-width:0 !important; padding:10px 12px !important; font-size:10px !important; } main > section.promo-banner.section .promo-inner > a.btn[data-i18n="promo.book"]{ width:100% !important; min-height:72px !important; font-size:19px !important; padding:16px 24px !important; } } @media (min-width:701px) and (max-width:900px){ main > section.promo-banner.section .promo-inner{ gap:22px !important; padding:30px !important; } main > section.promo-banner.section .promo-inner h2{ font-size:38px !important; } main > section.promo-banner.section .promo-inner p{ font-size:14px !important; } main > section.promo-banner.section .promo-place-names{ margin-top:16px !important; } main > section.promo-banner.section .promo-inner > a.btn[data-i18n="promo.book"]{ width:220px !important; min-height:78px !important; font-size:18px !important; padding:16px 22px !important; } } /* PROMO PILL ICONS — scoped only to Direct Booking Benefit */ main > section.promo-banner.section .promo-place-names .menu-btn{ gap:10px !important; } main > section.promo-banner.section .promo-pill-icon{ width:23px !important; height:23px !important; flex:0 0 23px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; color:#f0c56e !important; } main > section.promo-banner.section .promo-pill-icon svg{ width:23px !important; height:23px !important; display:block !important; max-width:none !important; } main > section.promo-banner.section .promo-pill-divider{ width:1px !important; height:24px !important; flex:0 0 1px !important; background:rgba(240,197,110,.55) !important; } @media(max-width:700px){ main > section.promo-banner.section .promo-place-names .menu-btn{ gap:8px !important; padding:10px 10px !important; } main > section.promo-banner.section .promo-pill-icon{ width:20px !important; height:20px !important; flex-basis:20px !important; } main > section.promo-banner.section .promo-pill-icon svg{ width:20px !important; height:20px !important; } main > section.promo-banner.section .promo-pill-divider{ height:21px !important; } } /* PROMO REFERENCE CLEANUP — remove legacy nested-span styling only inside Direct Booking Benefit */ main > section.promo-banner.section .promo-place-names .menu-btn > span{ margin:0 !important; border:0 !important; border-radius:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; } main > section.promo-banner.section .promo-place-names .menu-btn > .promo-pill-icon{ width:23px !important; height:23px !important; min-width:23px !important; min-height:23px !important; flex:0 0 23px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border:0 !important; border-radius:0 !important; padding:0 !important; background:transparent !important; } main > section.promo-banner.section .promo-place-names .menu-btn > .promo-pill-icon svg{ width:23px !important; height:23px !important; min-width:23px !important; min-height:23px !important; max-width:23px !important; max-height:23px !important; padding:0 !important; margin:0 !important; } main > section.promo-banner.section .promo-place-names .menu-btn > .promo-pill-divider{ width:1px !important; min-width:1px !important; height:24px !important; min-height:24px !important; flex:0 0 1px !important; display:block !important; border:0 !important; border-radius:0 !important; padding:0 !important; margin:0 2px !important; background:rgba(240,197,110,.55) !important; } main > section.promo-banner.section .promo-place-names .menu-btn > span:last-child{ display:inline-block !important; border:0 !important; border-radius:0 !important; padding:0 !important; background:transparent !important; font-size:11px !important; font-weight:900 !important; letter-spacing:.12em !important; line-height:1 !important; white-space:nowrap !important; } @media(max-width:700px){ main > section.promo-banner.section .promo-place-names .menu-btn > .promo-pill-icon{ width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; flex-basis:20px !important; } main > section.promo-banner.section .promo-place-names .menu-btn > .promo-pill-icon svg{ width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; max-width:20px !important; max-height:20px !important; } main > section.promo-banner.section .promo-place-names .menu-btn > .promo-pill-divider{ height:21px !important; min-height:21px !important; } main > section.promo-banner.section .promo-place-names .menu-btn > span:last-child{ font-size:10px !important; letter-spacing:.1em !important; } } /* BOOKING RESULT — Arabic screenshot reminder mirrors English placement */ @media(min-width:701px){ html[lang="ar"] .booking-result .booking-screenshot-reminder{ left:7% !important; right:auto !important; direction:rtl !important; text-align:right !important; justify-content:flex-start !important; } } /* IPHONE / MOBILE PROMO FIX — scoped only to Direct Booking Benefit */ @media(max-width:700px){ main > section.promo-banner.section .promo-inner{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; padding:26px 18px 22px !important; gap:18px !important; border-radius:18px !important; overflow:hidden !important; } main > section.promo-banner.section .promo-inner h2{ width:100% !important; max-width:100% !important; font-size:clamp(30px,9vw,35px) !important; line-height:1.04 !important; letter-spacing:-.018em !important; margin:0 0 11px !important; overflow-wrap:normal !important; } main > section.promo-banner.section .promo-inner p{ width:100% !important; max-width:100% !important; font-size:14px !important; line-height:1.55 !important; margin:0 !important; } main > section.promo-banner.section .promo-place-names{ width:100% !important; max-width:100% !important; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:9px !important; margin-top:17px !important; flex-wrap:nowrap !important; } main > section.promo-banner.section .promo-place-names .menu-btn{ width:100% !important; min-width:0 !important; max-width:100% !important; min-height:40px !important; flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; padding:8px 7px !important; box-sizing:border-box !important; overflow:hidden !important; } main > section.promo-banner.section .promo-place-names .menu-btn > span{ flex:0 0 auto !important; min-width:0 !important; width:auto !important; max-width:none !important; white-space:nowrap !important; } main > section.promo-banner.section .promo-place-names .menu-btn > .promo-pill-icon{ width:17px !important; height:17px !important; min-width:17px !important; min-height:17px !important; flex:0 0 17px !important; } main > section.promo-banner.section .promo-place-names .menu-btn > .promo-pill-icon svg{ width:17px !important; height:17px !important; min-width:17px !important; min-height:17px !important; max-width:17px !important; max-height:17px !important; } main > section.promo-banner.section .promo-place-names .menu-btn > .promo-pill-divider{ width:1px !important; min-width:1px !important; height:19px !important; min-height:19px !important; flex:0 0 1px !important; margin:0 1px !important; } main > section.promo-banner.section .promo-place-names .menu-btn > span:last-child{ flex:0 0 auto !important; font-size:9px !important; line-height:1 !important; letter-spacing:.055em !important; overflow:visible !important; } main > section.promo-banner.section .promo-inner > a.btn[data-i18n="promo.book"]{ width:100% !important; min-width:0 !important; max-width:100% !important; min-height:60px !important; padding:14px 20px !important; font-size:17px !important; line-height:1 !important; gap:13px !important; box-sizing:border-box !important; } } @media(max-width:360px){ main > section.promo-banner.section .promo-inner{ padding:24px 16px 20px !important; gap:16px !important; } main > section.promo-banner.section .promo-inner h2{ font-size:30px !important; } main > section.promo-banner.section .promo-place-names{ gap:7px !important; } main > section.promo-banner.section .promo-place-names .menu-btn{ padding:8px 5px !important; gap:5px !important; } main > section.promo-banner.section .promo-place-names .menu-btn > .promo-pill-icon{ width:15px !important; height:15px !important; min-width:15px !important; min-height:15px !important; flex-basis:15px !important; } main > section.promo-banner.section .promo-place-names .menu-btn > .promo-pill-icon svg{ width:15px !important; height:15px !important; min-width:15px !important; min-height:15px !important; max-width:15px !important; max-height:15px !important; } main > section.promo-banner.section .promo-place-names .menu-btn > span:last-child{ font-size:8px !important; letter-spacing:.045em !important; } } /* LOCATION REFERENCE DESIGN — scoped only to #location */ main > section#location.location{ padding-top:40px !important; padding-bottom:56px !important; } main > section#location.location .location-card{ position:relative !important; display:block !important; min-height:500px !important; padding:0 !important; overflow:hidden !important; border-radius:28px !important; border:1px solid rgba(214,176,99,.32) !important; background:#1a1714 !important; color:#fff !important; box-shadow:0 24px 70px rgba(20,15,10,.18) !important; isolation:isolate !important; } main > section#location.location .location-map-link{ position:absolute !important; inset:0 !important; z-index:0 !important; display:flex !important; align-items:flex-end !important; justify-content:flex-end !important; flex-direction:column !important; gap:6px !important; padding:28px 32px !important; min-height:0 !important; border:0 !important; border-radius:0 !important; background-color:#201b17 !important; background-image: radial-gradient(circle at 63% 45%,rgba(214,176,99,.18) 0 2px,transparent 3px), radial-gradient(circle at 63% 45%,rgba(214,176,99,.08) 0 14px,transparent 15px), linear-gradient(90deg,rgba(15,12,10,.91) 0%,rgba(15,12,10,.58) 45%,rgba(15,12,10,.28) 75%,rgba(15,12,10,.47) 100%) !important; background-size:auto,auto,auto !important; box-shadow:none !important; color:#fff !important; } main > section#location.location .location-map-link::before{ content:"" !important; position:absolute !important; inset:0 !important; background-image:url("https://upload.wikimedia.org/wikipedia/commons/0/0d/WorldMap.svg") !important; background-repeat:no-repeat !important; background-position:center !important; background-size:112% auto !important; opacity:.24 !important; filter:invert(1) sepia(.18) saturate(.65) !important; pointer-events:none !important; } main > section#location.location .location-map-link::after{ content:"" !important; position:absolute !important; left:63% !important; top:45% !important; width:12px !important; height:12px !important; border-radius:50% !important; background:#f0c56e !important; box-shadow:0 0 0 8px rgba(240,197,110,.11),0 0 24px rgba(240,197,110,.42) !important; pointer-events:none !important; } main > section#location.location .location-map-link > *{ position:relative !important; z-index:2 !important; } main > section#location.location .location-map-link .pin{ display:none !important; } main > section#location.location .location-map-label{ font-size:12px !important; font-weight:800 !important; letter-spacing:.04em !important; color:rgba(255,255,255,.92) !important; text-align:right !important; } main > section#location.location .location-map-link small{ font-size:10px !important; color:rgba(255,255,255,.62) !important; } main > section#location.location .location-content{ position:relative !important; z-index:3 !important; width:min(620px,58%) !important; min-height:500px !important; padding:58px 54px 54px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; box-sizing:border-box !important; } main > section#location.location .location-content .eyebrow{ margin-bottom:14px !important; color:#f0c56e !important; font-size:10px !important; letter-spacing:.24em !important; } main > section#location.location .location-content h2{ margin:0 0 18px !important; max-width:560px !important; font-family:"Cormorant Garamond",serif !important; font-size:clamp(44px,5vw,68px) !important; line-height:.98 !important; font-weight:600 !important; letter-spacing:-.025em !important; color:#fff !important; } main > section#location.location .location-content p{ margin:0 !important; max-width:520px !important; color:rgba(255,255,255,.76) !important; font-size:15px !important; line-height:1.75 !important; } main > section#location.location .location-directions{ margin-top:auto !important; min-height:54px !important; padding:0 22px !important; background:#c99a3b !important; color:#171411 !important; box-shadow:0 12px 28px rgba(201,154,59,.22) !important; font-size:12px !important; font-weight:900 !important; } main > section#location.location .location-directions::after{ content:"→" !important; margin-inline-start:9px !important; font-size:1.15em !important; line-height:1 !important; } main > section#location.location .location-directions:hover{ background:#d7a94b !important; color:#171411 !important; } html.night-mode main > section#location.location .location-card{ background:#242424 !important; border-color:#4d4943 !important; box-shadow:0 24px 70px rgba(0,0,0,.25) !important; } html.night-mode main > section#location.location .location-map-link{ background-color:#242424 !important; background-image: radial-gradient(circle at 63% 45%,rgba(240,197,110,.22) 0 2px,transparent 3px), radial-gradient(circle at 63% 45%,rgba(240,197,110,.09) 0 14px,transparent 15px), linear-gradient(90deg,rgba(12,12,12,.91) 0%,rgba(18,18,18,.58) 45%,rgba(22,22,22,.25) 75%,rgba(12,12,12,.45) 100%) !important; color:#fff !important; } @media(max-width:1100px){ main > section#location.location .location-card{ min-height:460px !important; border-radius:24px !important; } main > section#location.location .location-content{ width:min(620px,64%) !important; min-height:460px !important; padding:46px 42px 42px !important; } main > section#location.location .location-content h2{ font-size:52px !important; } } @media(max-width:700px){ main > section#location.location{ padding-top:28px !important; padding-bottom:42px !important; } main > section#location.location .location-card{ min-height:530px !important; border-radius:20px !important; } main > section#location.location .location-map-link{ padding:20px !important; } main > section#location.location .location-map-link::before{ background-size:auto 100% !important; opacity:.2 !important; } main > section#location.location .location-map-link::after{ left:64% !important; top:43% !important; width:10px !important; height:10px !important; } main > section#location.location .location-content{ width:100% !important; min-height:530px !important; padding:34px 24px 24px !important; background:linear-gradient(180deg,rgba(17,14,12,.78) 0%,rgba(17,14,12,.35) 54%,rgba(17,14,12,.06) 100%) !important; } main > section#location.location .location-content .eyebrow{ margin-bottom:12px !important; font-size:9px !important; letter-spacing:.18em !important; } main > section#location.location .location-content h2{ max-width:330px !important; margin-bottom:14px !important; font-size:clamp(40px,12vw,52px) !important; line-height:1 !important; } main > section#location.location .location-content p{ max-width:340px !important; font-size:14px !important; line-height:1.7 !important; } main > section#location.location .location-directions{ min-height:52px !important; width:100% !important; margin-top:auto !important; padding:0 18px !important; font-size:12px !important; } main > section#location.location .location-map-label{ font-size:10px !important; } } html[lang="ar"] main > section#location.location .location-content{ align-items:flex-end !important; text-align:right !important; direction:rtl !important; } html[lang="ar"] main > section#location.location .location-content h2, html[lang="ar"] main > section#location.location .location-content p{ width:100% !important; text-align:right !important; } html[lang="ar"] main > section#location.location .location-map-label{ text-align:left !important; direction:ltr !important; } @media(max-width:700px){ html[lang="ar"] main > section#location.location .location-content{ align-items:flex-end !important; } html[lang="ar"] main > section#location.location .location-content p{ max-width:340px !important; } } /* LOCATION MOBILE BALANCE — scoped only to #location */ @media (max-width:700px){ main > section#location.location .location-card{ height:clamp(410px,108vw,470px) !important; min-height:0 !important; border-radius:20px !important; } main > section#location.location .location-map-link::before{ background-size:auto 118% !important; background-position:center center !important; opacity:.17 !important; } main > section#location.location .location-map-link::after{ left:64% !important; top:41% !important; width:9px !important; height:9px !important; box-shadow:0 0 0 7px rgba(240,197,110,.10),0 0 18px rgba(240,197,110,.34) !important; } main > section#location.location .location-content{ width:100% !important; height:100% !important; min-height:0 !important; padding:28px 22px 20px !important; display:flex !important; flex-direction:column !important; justify-content:flex-start !important; background:linear-gradient(180deg,rgba(17,14,12,.82) 0%,rgba(17,14,12,.52) 45%,rgba(17,14,12,.08) 78%,rgba(17,14,12,.02) 100%) !important; } main > section#location.location .location-content .eyebrow{ margin-bottom:9px !important; font-size:9px !important; line-height:1.2 !important; letter-spacing:.16em !important; } main > section#location.location .location-content h2{ max-width:300px !important; margin:0 0 12px !important; font-size:clamp(37px,10.5vw,46px) !important; line-height:.98 !important; } main > section#location.location .location-content p{ max-width:315px !important; margin:0 !important; font-size:13.5px !important; line-height:1.6 !important; } main > section#location.location .location-directions{ width:min(100%,250px) !important; min-height:50px !important; margin-top:auto !important; align-self:flex-start !important; padding:0 18px !important; font-size:11px !important; } main > section#location.location .location-map-link{ padding:16px 18px !important; } main > section#location.location .location-map-label{ font-size:9px !important; line-height:1.25 !important; } main > section#location.location .location-map-link small{ font-size:9px !important; } html[lang="ar"] main > section#location.location .location-content{ align-items:flex-end !important; } html[lang="ar"] main > section#location.location .location-content h2, html[lang="ar"] main > section#location.location .location-content p{ max-width:315px !important; } html[lang="ar"] main > section#location.location .location-directions{ align-self:flex-end !important; margin-inline-start:0 !important; margin-inline-end:0 !important; } } @media (max-width:390px){ main > section#location.location .location-card{ height:clamp(400px,106vw,435px) !important; } main > section#location.location .location-content{ padding:25px 18px 18px !important; } main > section#location.location .location-content h2{ max-width:285px !important; font-size:36px !important; margin-bottom:10px !important; } main > section#location.location .location-content p{ max-width:285px !important; font-size:13px !important; line-height:1.55 !important; } main > section#location.location .location-directions{ width:min(100%,230px) !important; min-height:48px !important; font-size:10.5px !important; padding:0 16px !important; } main > section#location.location .location-map-link::before{ background-size:auto 112% !important; opacity:.15 !important; } } @media (max-width:350px){ main > section#location.location .location-card{ height:405px !important; border-radius:18px !important; } main > section#location.location .location-content{ padding:22px 16px 16px !important; } main > section#location.location .location-content h2{ max-width:260px !important; font-size:33px !important; } main > section#location.location .location-content p{ max-width:260px !important; font-size:12.5px !important; } main > section#location.location .location-directions{ width:100% !important; max-width:220px !important; } } /* LOCATION MOBILE REWORK — iPhone & Samsung only; scoped to #location */ @media (max-width:700px){ main > section#location.location .location-card{ position:relative !important; height:clamp(430px,118vw,500px) !important; min-height:0 !important; overflow:hidden !important; border-radius:20px !important; background:#6e675d !important; } main > section#location.location .location-map-link{ position:absolute !important; inset:0 !important; z-index:0 !important; display:block !important; padding:0 !important; background:#6e675d !important; } main > section#location.location .location-map-link::before{ content:"" !important; position:absolute !important; inset:-5% !important; background-image:url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Physical_World_Map.svg") !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important; opacity:.58 !important; filter:grayscale(.38) sepia(.18) saturate(.72) brightness(1.06) contrast(.82) !important; pointer-events:none !important; } main > section#location.location .location-map-link::after{ left:65% !important; top:44% !important; width:9px !important; height:9px !important; background:#f2c96f !important; box-shadow:0 0 0 7px rgba(242,201,111,.14),0 0 20px rgba(242,201,111,.42) !important; } main > section#location.location .location-map-link > .location-map-label, main > section#location.location .location-map-link > small{ display:none !important; } main > section#location.location .location-content{ position:absolute !important; inset:0 !important; z-index:3 !important; width:100% !important; height:100% !important; min-height:0 !important; padding:28px 24px 22px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-end !important; background:linear-gradient(180deg,rgba(18,15,12,0) 18%,rgba(18,15,12,.04) 34%,rgba(18,15,12,.38) 58%,rgba(18,15,12,.86) 100%) !important; box-sizing:border-box !important; } main > section#location.location .location-content .eyebrow{ margin:0 0 9px !important; font-size:9px !important; line-height:1.15 !important; letter-spacing:.17em !important; color:#f0c56e !important; } main > section#location.location .location-content h2{ width:100% !important; max-width:330px !important; margin:0 0 11px !important; font-size:clamp(34px,10.4vw,44px) !important; line-height:.98 !important; letter-spacing:-.012em !important; color:#fff !important; } main > section#location.location .location-content p{ width:100% !important; max-width:330px !important; margin:0 !important; font-size:13px !important; line-height:1.58 !important; color:rgba(255,255,255,.86) !important; } main > section#location.location .location-directions{ align-self:flex-start !important; width:auto !important; min-width:0 !important; max-width:260px !important; min-height:50px !important; margin-top:17px !important; padding:0 19px !important; border-radius:14px !important; font-size:11px !important; white-space:nowrap !important; box-shadow:0 10px 22px rgba(0,0,0,.18) !important; } main > section#location.location .location-directions::after{ margin-inline-start:8px !important; } html[lang="ar"] main > section#location.location .location-content{ align-items:flex-end !important; text-align:right !important; } html[lang="ar"] main > section#location.location .location-content h2, html[lang="ar"] main > section#location.location .location-content p{ text-align:right !important; } html[lang="ar"] main > section#location.location .location-directions{ align-self:flex-end !important; } } @media (max-width:390px){ main > section#location.location .location-card{ height:430px !important; } main > section#location.location .location-content{ padding:24px 20px 18px !important; } main > section#location.location .location-content h2{ max-width:285px !important; font-size:35px !important; } main > section#location.location .location-content p{ max-width:290px !important; font-size:12.5px !important; line-height:1.52 !important; } main > section#location.location .location-directions{ min-height:48px !important; margin-top:14px !important; font-size:10.5px !important; padding:0 17px !important; } } /* LOCATION MOBILE DARK MAP — scoped only to #location */ @media(max-width:700px){ main > section#location.location .location-card{ background:#201b17 !important; border-color:rgba(214,176,99,.32) !important; } main > section#location.location .location-map-link{ background-color:#201b17 !important; background-image: radial-gradient(circle at 63% 45%,rgba(214,176,99,.18) 0 2px,transparent 3px), radial-gradient(circle at 63% 45%,rgba(214,176,99,.08) 0 14px,transparent 15px), linear-gradient(90deg,rgba(15,12,10,.94) 0%,rgba(15,12,10,.72) 48%,rgba(15,12,10,.48) 100%) !important; } main > section#location.location .location-map-link::before{ background-image:url("https://upload.wikimedia.org/wikipedia/commons/0/0d/WorldMap.svg") !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:112% auto !important; opacity:.24 !important; filter:invert(1) sepia(.18) saturate(.65) !important; } main > section#location.location .location-map-link::after{ left:63% !important; top:45% !important; width:10px !important; height:10px !important; background:#f0c56e !important; box-shadow:0 0 0 7px rgba(240,197,110,.11),0 0 20px rgba(240,197,110,.38) !important; } html.night-mode main > section#location.location .location-map-link{ background-color:#242424 !important; background-image: radial-gradient(circle at 63% 45%,rgba(240,197,110,.20) 0 2px,transparent 3px), radial-gradient(circle at 63% 45%,rgba(240,197,110,.08) 0 14px,transparent 15px), linear-gradient(90deg,rgba(12,12,12,.95) 0%,rgba(18,18,18,.72) 48%,rgba(24,24,24,.46) 100%) !important; } } /* BOOKING REFERENCE MATCH — scoped only to #booking; preserves booking logic and other sections */ @media (min-width: 1101px){ main > section#booking.booking-strip{ padding: 54px max(24px,calc((100% - 1240px)/2)) 48px !important; background:linear-gradient(135deg,#171411 0%,#1d1915 52%,#211b17 100%) !important; overflow:hidden !important; } main > section#booking.booking-strip .section-head.compact{ max-width:none !important; margin-bottom:26px !important; } main > section#booking.booking-strip .section-head.compact .eyebrow{ margin-bottom:12px !important; font-size:10px !important; letter-spacing:.24em !important; } main > section#booking.booking-strip .section-head.compact h2{ font-size:clamp(50px,4vw,60px) !important; line-height:.98 !important; letter-spacing:-.025em !important; margin:0 !important; } main > section#booking.booking-strip .booking-fields{ grid-template-columns:repeat(8,minmax(0,1fr)) !important; gap:12px !important; width:100% !important; align-items:end !important; } main > section#booking.booking-strip .booking-form label{ gap:7px !important; font-size:11px !important; line-height:1.2 !important; color:#e2dbd2 !important; } main > section#booking.booking-strip .booking-form input, main > section#booking.booking-strip .booking-form select{ height:56px !important; min-height:56px !important; border-radius:12px !important; border:1px solid #5a5148 !important; background:#29241f !important; padding:0 14px !important; font-size:12px !important; font-weight:700 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important; } main > section#booking.booking-strip .booking-form input:focus, main > section#booking.booking-strip .booking-form select:focus{ border-color:#c99a3b !important; box-shadow:0 0 0 2px rgba(201,154,59,.10) !important; } main > section#booking.booking-strip .booking-form .nights-field input{ color:#c8c0b7 !important; } main > section#booking.booking-strip .booking-contact-row{ width:100% !important; max-width:none !important; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) !important; gap:12px !important; margin:15px 0 0 !important; } main > section#booking.booking-strip .booking-contact-row > label input{ height:58px !important; min-height:58px !important; border-radius:12px !important; font-size:14px !important; } main > section#booking.booking-strip .booking-contact-row > label > span{ font-size:11px !important; } main > section#booking.booking-strip .booking-form .submit{ width:250px !important; min-width:250px !important; height:58px !important; min-height:58px !important; padding:0 28px !important; margin:22px auto 0 !important; border-radius:999px !important; font-size:13px !important; box-shadow:0 14px 30px rgba(201,154,59,.25) !important; } main > section#booking.booking-strip .price-row{ width:100% !important; margin:17px 0 0 !important; padding:0 !important; align-items:center !important; color:#aaa39b !important; font-size:11px !important; } main > section#booking.booking-strip .price-row strong{ color:#f0c56e !important; font-size:16px !important; letter-spacing:.01em !important; } } @media (min-width:701px) and (max-width:1100px){ main > section#booking.booking-strip{ padding:46px 24px 40px !important; } main > section#booking.booking-strip .section-head.compact{ margin-bottom:22px !important; } main > section#booking.booking-strip .section-head.compact h2{ font-size:clamp(42px,5vw,54px) !important; } main > section#booking.booking-strip .booking-fields{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important; } main > section#booking.booking-strip .booking-form label{ font-size:10.5px !important; } main > section#booking.booking-strip .booking-form input, main > section#booking.booking-strip .booking-form select{ height:52px !important; min-height:52px !important; border-radius:11px !important; } main > section#booking.booking-strip .booking-contact-row{ width:100% !important; max-width:none !important; margin:14px 0 0 !important; } main > section#booking.booking-strip .booking-form .submit{ height:54px !important; min-height:54px !important; margin:18px auto 0 !important; } } @media (max-width:700px){ main > section#booking.booking-strip{ padding:38px 18px 34px !important; } main > section#booking.booking-strip .section-head.compact{ margin-bottom:20px !important; } main > section#booking.booking-strip .section-head.compact h2{ font-size:clamp(39px,10vw,48px) !important; line-height:1 !important; } main > section#booking.booking-strip .booking-fields{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } main > section#booking.booking-strip .booking-form label{ font-size:10px !important; } main > section#booking.booking-strip .booking-form input, main > section#booking.booking-strip .booking-form select{ height:50px !important; min-height:50px !important; border-radius:11px !important; } main > section#booking.booking-strip .booking-contact-row{ grid-template-columns:1fr !important; gap:10px !important; width:100% !important; max-width:none !important; margin:12px 0 0 !important; } main > section#booking.booking-strip .booking-contact-row > label input{ height:52px !important; min-height:52px !important; } main > section#booking.booking-strip .booking-form .submit{ width:100% !important; min-width:0 !important; height:52px !important; min-height:52px !important; margin:18px auto 0 !important; } main > section#booking.booking-strip .price-row{ margin-top:15px !important; font-size:10.5px !important; } main > section#booking.booking-strip .price-row strong{ font-size:15px !important; } } /* Reference total state: no stay dates = em dash, calculated total appears once nights are > 0. */ html[lang="ar"] main > section#booking.booking-strip .price-row strong{ font-size:15px !important; } /* BOOKING FINAL RESPONSIVE PASS — scoped only to #booking. Purpose: consistent proportions across desktop, tablet portrait/landscape, fold devices, iPhone and Samsung phones. No booking logic is changed. */ main > section#booking.booking-strip{ overflow:hidden !important; } main > section#booking.booking-strip .booking-fields, main > section#booking.booking-strip .booking-contact-row, main > section#booking.booking-strip .price-row{ min-width:0 !important; box-sizing:border-box !important; } main > section#booking.booking-strip .booking-fields > label, main > section#booking.booking-strip .booking-contact-row > label{ min-width:0 !important; } main > section#booking.booking-strip .booking-form input, main > section#booking.booking-strip .booking-form select{ box-sizing:border-box !important; max-width:100% !important; min-width:0 !important; width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* Large desktop */ @media (min-width:1201px){ main > section#booking.booking-strip{ padding:56px max(28px,calc((100% - 1240px)/2)) 46px !important; } main > section#booking.booking-strip .section-head.compact{ margin-bottom:27px !important; } main > section#booking.booking-strip .section-head.compact h2{ font-size:clamp(52px,4vw,60px) !important; } main > section#booking.booking-strip .booking-fields{ grid-template-columns:1.12fr 1.12fr .82fr .88fr .88fr 1.05fr 1fr .92fr !important; gap:12px !important; align-items:end !important; } main > section#booking.booking-strip .booking-form label > span{ min-height:14px !important; line-height:1.25 !important; } main > section#booking.booking-strip .booking-form input, main > section#booking.booking-strip .booking-form select{ height:54px !important; min-height:54px !important; border-radius:12px !important; padding:0 13px !important; font-size:12px !important; } main > section#booking.booking-strip .booking-contact-row{ width:min(100%,900px) !important; max-width:900px !important; grid-template-columns:1.15fr .85fr !important; gap:12px !important; margin:16px auto 0 !important; } main > section#booking.booking-strip .booking-contact-row > label > span{ min-height:14px !important; line-height:1.25 !important; } main > section#booking.booking-strip .booking-contact-row > label input{ height:58px !important; min-height:58px !important; font-size:15px !important; } main > section#booking.booking-strip .booking-form .submit{ width:min(250px,100%) !important; min-width:0 !important; height:56px !important; min-height:56px !important; margin:21px auto 0 !important; padding:0 24px !important; border-radius:999px !important; font-size:13px !important; } main > section#booking.booking-strip .price-row{ flex-direction:row !important; width:100% !important; margin:17px 0 0 !important; padding:0 !important; align-items:center !important; justify-content:space-between !important; gap:20px !important; } } /* Standard desktop / medium laptop */ @media (min-width:1101px) and (max-width:1200px){ main > section#booking.booking-strip{ padding:50px 28px 44px !important; } main > section#booking.booking-strip .booking-fields{ grid-template-columns:1.08fr 1.08fr .82fr .88fr .88fr 1.04fr 1fr .92fr !important; gap:10px !important; } main > section#booking.booking-strip .booking-form label{ font-size:10.5px !important; } main > section#booking.booking-strip .booking-form input, main > section#booking.booking-strip .booking-form select{ height:52px !important; min-height:52px !important; padding:0 11px !important; font-size:11.5px !important; } main > section#booking.booking-strip .booking-contact-row{ width:min(100%,860px) !important; max-width:860px !important; grid-template-columns:1.15fr .85fr !important; margin-top:15px !important; } main > section#booking.booking-strip .booking-contact-row > label input{ height:56px !important; min-height:56px !important; } main > section#booking.booking-strip .booking-form .submit{ width:240px !important; min-width:240px !important; height:55px !important; } main > section#booking.booking-strip .price-row{ flex-direction:row !important; margin-top:16px !important; } } /* Tablet landscape, including wider fold devices */ @media (min-width:900px) and (max-width:1100px) and (orientation:landscape){ main > section#booking.booking-strip{ padding:38px 24px 34px !important; } main > section#booking.booking-strip .section-head.compact{ margin-bottom:20px !important; } main > section#booking.booking-strip .section-head.compact h2{ font-size:clamp(40px,4.7vw,50px) !important; } main > section#booking.booking-strip .booking-fields{ grid-template-columns:1.05fr 1.05fr .78fr .82fr .82fr 1fr .95fr .88fr !important; gap:8px !important; } main > section#booking.booking-strip .booking-form label{ gap:5px !important; font-size:9.5px !important; line-height:1.15 !important; } main > section#booking.booking-strip .booking-form label > span{ min-height:12px !important; } main > section#booking.booking-strip .booking-form input, main > section#booking.booking-strip .booking-form select{ height:48px !important; min-height:48px !important; border-radius:10px !important; padding:0 9px !important; font-size:10.5px !important; } main > section#booking.booking-strip .booking-contact-row{ width:min(100%,760px) !important; max-width:760px !important; grid-template-columns:1.15fr .85fr !important; gap:10px !important; margin:12px auto 0 !important; } main > section#booking.booking-strip .booking-contact-row > label{ font-size:10px !important; } main > section#booking.booking-strip .booking-contact-row > label input{ height:50px !important; min-height:50px !important; font-size:13px !important; } main > section#booking.booking-strip .booking-form .submit{ width:220px !important; min-width:220px !important; height:50px !important; min-height:50px !important; margin-top:15px !important; font-size:12px !important; } main > section#booking.booking-strip .price-row{ flex-direction:row !important; margin-top:13px !important; gap:16px !important; } main > section#booking.booking-strip .price-row strong{ font-size:15px !important; } } /* Tablet portrait and narrower landscape tablets */ @media (min-width:701px) and (max-width:899px){ main > section#booking.booking-strip{ padding:42px 22px 38px !important; } main > section#booking.booking-strip .section-head.compact{ margin-bottom:21px !important; } main > section#booking.booking-strip .section-head.compact h2{ font-size:clamp(42px,6vw,52px) !important; } main > section#booking.booking-strip .booking-fields{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:11px !important; } main > section#booking.booking-strip .booking-form label{ font-size:10px !important; gap:6px !important; } main > section#booking.booking-strip .booking-form input, main > section#booking.booking-strip .booking-form select{ height:52px !important; min-height:52px !important; border-radius:11px !important; padding:0 11px !important; font-size:12px !important; } main > section#booking.booking-strip .booking-contact-row{ width:100% !important; max-width:none !important; grid-template-columns:1.1fr .9fr !important; gap:11px !important; margin-top:14px !important; } main > section#booking.booking-strip .booking-contact-row > label input{ height:54px !important; min-height:54px !important; font-size:14px !important; } main > section#booking.booking-strip .booking-form .submit{ width:230px !important; min-width:230px !important; height:52px !important; min-height:52px !important; margin-top:17px !important; } main > section#booking.booking-strip .price-row{ flex-direction:row !important; margin-top:15px !important; } } /* iPhone + Samsung portrait phones */ @media (max-width:700px){ main > section#booking.booking-strip{ width:100% !important; max-width:none !important; padding:36px 16px 30px !important; } main > section#booking.booking-strip .section-head.compact{ width:100% !important; margin-bottom:20px !important; } main > section#booking.booking-strip .section-head.compact .eyebrow{ font-size:9px !important; margin-bottom:9px !important; letter-spacing:.18em !important; } main > section#booking.booking-strip .section-head.compact h2{ width:100% !important; font-size:clamp(36px,10.5vw,46px) !important; line-height:1.02 !important; letter-spacing:-.02em !important; } main > section#booking.booking-strip .booking-fields{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; width:100% !important; } main > section#booking.booking-strip .booking-fields > label{ width:100% !important; min-width:0 !important; gap:5px !important; font-size:10px !important; line-height:1.2 !important; } main > section#booking.booking-strip .booking-fields > label > span{ min-height:13px !important; white-space:normal !important; overflow-wrap:anywhere !important; } main > section#booking.booking-strip .booking-form input, main > section#booking.booking-strip .booking-form select{ height:50px !important; min-height:50px !important; border-radius:11px !important; padding:0 11px !important; font-size:16px !important; line-height:1.2 !important; -webkit-appearance:auto !important; } /* Keep native date/phone controls readable and stop iPhone focus zoom. */ main > section#booking.booking-strip #checkin, main > section#booking.booking-strip #checkout, main > section#booking.booking-strip #phone{ font-size:16px !important; } main > section#booking.booking-strip .booking-form select{ padding-left:10px !important; padding-right:28px !important; } main > section#booking.booking-strip .booking-contact-row{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; width:100% !important; max-width:none !important; margin:12px 0 0 !important; } main > section#booking.booking-strip .booking-contact-row > label{ width:100% !important; min-width:0 !important; gap:5px !important; font-size:10px !important; } main > section#booking.booking-strip .booking-contact-row > label > span{ min-height:13px !important; } main > section#booking.booking-strip .booking-contact-row > label input{ height:52px !important; min-height:52px !important; width:100% !important; font-size:16px !important; } main > section#booking.booking-strip .booking-form .submit{ width:min(100%,300px) !important; min-width:0 !important; height:52px !important; min-height:52px !important; margin:18px auto 0 !important; padding:0 20px !important; border-radius:999px !important; font-size:13px !important; } main > section#booking.booking-strip .price-row{ width:100% !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin-top:15px !important; font-size:10.5px !important; } main > section#booking.booking-strip .price-row span{ min-width:0 !important; flex:1 1 auto !important; } main > section#booking.booking-strip .price-row strong{ flex:0 0 auto !important; font-size:15px !important; white-space:nowrap !important; } html[lang="ar"] main > section#booking.booking-strip .section-head.compact h2{ font-size:clamp(33px,9.7vw,42px) !important; line-height:1.2 !important; letter-spacing:0 !important; } html[lang="ar"] main > section#booking.booking-strip .booking-fields, html[lang="ar"] main > section#booking.booking-strip .booking-contact-row{ direction:rtl !important; } html[lang="ar"] main > section#booking.booking-strip .booking-form label{ text-align:right !important; } html[lang="ar"] main > section#booking.booking-strip .booking-form select, html[lang="ar"] main > section#booking.booking-strip #guestName{ text-align:right !important; } html[lang="ar"] main > section#booking.booking-strip #checkin, html[lang="ar"] main > section#booking.booking-strip #checkout, html[lang="ar"] main > section#booking.booking-strip #phone{ direction:ltr !important; text-align:left !important; unicode-bidi:plaintext !important; } html[lang="ar"] main > section#booking.booking-strip .price-row{ direction:rtl !important; text-align:right !important; } } /* Very small phones: iPhone SE / compact Samsung devices */ @media (max-width:359px){ main > section#booking.booking-strip{ padding:32px 13px 28px !important; } main > section#booking.booking-strip .section-head.compact{ margin-bottom:17px !important; } main > section#booking.booking-strip .section-head.compact h2{ font-size:33px !important; } main > section#booking.booking-strip .booking-fields{ gap:8px !important; } main > section#booking.booking-strip .booking-form label{ font-size:9.5px !important; } main > section#booking.booking-strip .booking-form input, main > section#booking.booking-strip .booking-form select{ height:48px !important; min-height:48px !important; padding:0 9px !important; font-size:15px !important; } main > section#booking.booking-strip .booking-form select{ padding-right:25px !important; } main > section#booking.booking-strip .booking-contact-row{ gap:8px !important; margin-top:10px !important; } main > section#booking.booking-strip .booking-contact-row > label input{ height:50px !important; min-height:50px !important; font-size:15px !important; } main > section#booking.booking-strip .booking-form .submit{ width:100% !important; height:50px !important; min-height:50px !important; margin-top:15px !important; font-size:12.5px !important; } main > section#booking.booking-strip .price-row{ font-size:10px !important; } main > section#booking.booking-strip .price-row strong{ font-size:14px !important; } } /* Landscape phones / narrow folds */ @media (max-width:899px) and (orientation:landscape){ main > section#booking.booking-strip{ padding-top:28px !important; padding-bottom:25px !important; } main > section#booking.booking-strip .section-head.compact{ margin-bottom:15px !important; } main > section#booking.booking-strip .section-head.compact h2{ font-size:clamp(30px,5vw,42px) !important; } main > section#booking.booking-strip .booking-fields{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px !important; } main > section#booking.booking-strip .booking-form input, main > section#booking.booking-strip .booking-form select{ height:46px !important; min-height:46px !important; font-size:14px !important; } main > section#booking.booking-strip .booking-contact-row{ grid-template-columns:1.1fr .9fr !important; gap:8px !important; margin-top:9px !important; } main > section#booking.booking-strip .booking-contact-row > label{ font-size:9px !important; } main > section#booking.booking-strip .booking-contact-row > label input{ height:46px !important; min-height:46px !important; font-size:14px !important; } main > section#booking.booking-strip .booking-form .submit{ width:210px !important; min-width:210px !important; height:46px !important; min-height:46px !important; margin-top:10px !important; } main > section#booking.booking-strip .price-row{ margin-top:9px !important; } } /* Translation alignment and control labels for all device sizes. */ html[lang="ar"] main > section#booking.booking-strip{ direction:rtl !important; } html[lang="ar"] main > section#booking.booking-strip .section-head.compact, html[lang="ar"] main > section#booking.booking-strip .section-head.compact h2{ text-align:right !important; } html[lang="ar"] main > section#booking.booking-strip .booking-form label{ text-align:right !important; } html[lang="ar"] main > section#booking.booking-strip .booking-form select, html[lang="ar"] main > section#booking.booking-strip #guestName{ text-align:right !important; } html[lang="ar"] main > section#booking.booking-strip #checkin, html[lang="ar"] main > section#booking.booking-strip #checkout, html[lang="ar"] main > section#booking.booking-strip #phone, html[lang="ar"] main > section#booking.booking-strip #nights{ direction:ltr !important; unicode-bidi:plaintext !important; } html[lang="ar"] main > section#booking.booking-strip .price-row{ direction:rtl !important; } /* V46 — Align Guest Name / Phone Number with the full booking width on desktop/tablet/fold. Scoped to the booking section only. Mobile remains stacked as-is. */ @media (min-width:701px){ main > section#booking.booking-strip .booking-contact-row{ width:100% !important; max-width:none !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; margin-left:0 !important; margin-right:0 !important; } } /* Aldar Inn admin export invoice fix v6 */ .admin-table .aldar-invoice-btn,.admin-table .aldar-status-action{min-width:120px;height:36px;padding:0 12px;border:1px solid #d9c9a8;border-radius:8px;background:#fff;color:#171411;font:700 12px Inter,Arial,sans-serif;cursor:pointer;outline:none;box-sizing:border-box}.admin-table .aldar-invoice-btn:hover,.admin-table .aldar-invoice-btn:focus,.admin-table .aldar-status-action:hover,.admin-table .aldar-status-action:focus{border-color:#c99a3b;box-shadow:0 0 0 2px rgba(201,154,59,.14)} .aldar-header-action{min-width:120px;height:42px;padding:0 18px;border:1px solid #c99a3b;border-radius:999px;background:#c99a3b;color:#fff;font:700 12px Inter,Arial,sans-serif;cursor:pointer;outline:none;box-sizing:border-box}.aldar-header-action:hover,.aldar-header-action:focus{background:#b88b32;border-color:#b88b32;box-shadow:0 0 0 2px rgba(201,154,59,.14)}