/* ==========================================================================
   Secondary pages redesign (1.0.107), body.eb-px, loaded after each page's
   own stylesheet. The same spirit as the homepage: a photo (or deep navy)
   hero with a word-by-word title and a see-through header, glass chips,
   soft big cards, and a still version under prefers-reduced-motion.
   Shared by: عضويات إليت، تحقق من حجزك، الشكاوى والاقتراحات، the legal
   pages and 404. pages.js only toggles the header state.
   ========================================================================== */

.eb-px{
  --px-navy:#06122E; --px-ink:#0B1E42;
  --px-ease:cubic-bezier(.2,.7,.2,1);
  background:#F5F8FD;
}

/* ---------- Header: see-through over the hero, white once scrolled ---------- */
.eb-px .pub-header-inner{transition:background .4s var(--px-ease), border-color .4s var(--px-ease), box-shadow .4s var(--px-ease);}
.eb-px .header-logo{transition:filter .4s var(--px-ease);}
.eb-px.hx-top .pub-header-inner{background:rgba(6,18,46,.22); border-color:rgba(255,255,255,.16); box-shadow:none;}
.eb-px.hx-top .header-logo{filter:brightness(0) invert(1);}
.eb-px.hx-top .mobile-menu-btn{background:rgba(255,255,255,.14); color:#fff;}
@media (min-width:901px){
  .eb-px .pub-nav{transition:background .4s var(--px-ease), color .4s var(--px-ease);}
  .eb-px.hx-top .pub-nav{background:rgba(255,255,255,.08); color:rgba(255,255,255,.84);}
  .eb-px.hx-top .pub-nav a:hover{background:rgba(255,255,255,.14); color:#fff;}
  .eb-px.hx-top .pub-nav a.active{background:rgba(255,255,255,.96); color:var(--primary-dark); box-shadow:none;}
}

/* ---------- Hero ---------- */
.px-hero{
  position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center;
  min-height:clamp(380px, 52vh, 560px); padding:calc(var(--eb-hdr-space) + 64px) 24px 72px;
  background:radial-gradient(120% 140% at 85% -10%, #123a9c 0%, #0E2E7A 35%, #06122E 100%);
  text-align:center;
}
.px-hero.px-tall{min-height:clamp(480px, 64vh, 680px);}
.px-hero.px-slim{min-height:0; padding:calc(var(--eb-hdr-space) + 44px) 24px 52px;}
.px-hero.px-dockroom{padding-bottom:120px;}
.px-media{position:absolute; inset:0; z-index:-3;}
.px-media img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.12); transform-origin:center 38%;}
.px-hero.has-img .px-media img{animation:pxKen 9s ease-out forwards;}
@keyframes pxKen{to{transform:scale(1.03);}}
.px-shade{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(90% 120% at 50% 110%, rgba(6,18,46,.35) 0%, transparent 55%),
    linear-gradient(180deg, rgba(6,18,46,.72) 0%, rgba(6,18,46,.55) 45%, rgba(6,18,46,.86) 100%);
}
.px-hero:not(.has-img) .px-shade{background:none;}
.px-orb{position:absolute; z-index:-1; border-radius:50%; filter:blur(80px); pointer-events:none; animation:pxFloat 16s ease-in-out infinite alternate;}
.px-orb-a{width:420px; height:420px; top:-150px; right:-110px; background:rgba(30,90,220,.5);}
.px-orb-b{width:340px; height:340px; bottom:-150px; left:12%; background:rgba(0,168,232,.3); animation-delay:-7s;}
.px-orb-gold{background:rgba(217,178,106,.3);}
@keyframes pxFloat{to{transform:translate3d(-46px,36px,0) scale(1.12);}}

.px-inner{position:relative; width:100%; max-width:860px; margin:0 auto;}
.px-eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px; padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#DCE8FF; font-size:13px; font-weight:800;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; animation:pxFade .8s var(--px-ease) .05s forwards;
}
.px-eyebrow i{width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pxPulse 2.2s infinite;}
@keyframes pxPulse{0%{box-shadow:0 0 0 0 rgba(0,168,232,.7);} 70%{box-shadow:0 0 0 10px rgba(0,168,232,0);} 100%{box-shadow:0 0 0 0 rgba(0,168,232,0);}}

.px-title{margin:0 0 18px; color:#fff; font-size:clamp(34px, 5.4vw, 62px); line-height:1.18; font-weight:800; text-wrap:balance;}
.px-wm{display:inline-block; overflow:hidden; vertical-align:bottom; padding:.12em 0 .2em; margin:-.12em 0 -.2em;}
.px-w{display:inline-block; transform:translateY(112%); color:#fff; animation:pxWord 1s var(--px-ease) forwards; animation-delay:calc(.15s + var(--w) * .12s);}
.px-w.px-accent{
  background:linear-gradient(90deg, #8FD3FF, #00A8E8, #5C8AF0, #8FD3FF); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:pxWord 1s var(--px-ease) calc(.15s + var(--w) * .12s) forwards, pxShine 4.5s linear 1.6s infinite;
}
.px-w.px-gold{background:linear-gradient(90deg, #F6E7C1, #D9B26A, #FCE7A8, #F6E7C1); background-size:220% auto; -webkit-background-clip:text; background-clip:text;}
@keyframes pxWord{to{transform:none;}}
@keyframes pxShine{to{background-position:220% center;}}
@keyframes pxFade{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}

.px-sub{max-width:560px; margin:0 auto 26px; color:#C9D8F5; font-size:clamp(14.5px, 1.3vw, 17px); line-height:1.9; opacity:0; animation:pxFade .9s var(--px-ease) .6s forwards;}
.px-ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; opacity:0; animation:pxFade .9s var(--px-ease) .75s forwards;}
.px-btn{
  position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; gap:9px;
  height:52px; padding:0 26px; border-radius:15px; font-size:15px; font-weight:800; white-space:nowrap; cursor:pointer; border:none;
  transition:transform .3s var(--px-ease), box-shadow .3s var(--px-ease), background .3s var(--px-ease);
}
.px-btn svg{width:18px; height:18px; flex:none;}
.px-btn:hover{transform:translateY(-2px);}
.px-btn-primary, .eb-px a.px-btn-primary{color:#fff; background:linear-gradient(135deg, #2C6BF0, #00A8E8); box-shadow:0 18px 40px -14px rgba(0,168,232,.75);}
.px-btn-primary::after{
  content:""; position:absolute; z-index:-1; top:0; bottom:0; right:-70%; width:45%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-20deg); transition:right .8s var(--px-ease);
}
.px-btn-primary:hover::after{right:135%;}
.px-btn-gold, .eb-px a.px-btn-gold{color:var(--px-ink); background:linear-gradient(135deg, #F6E7C1, #D9B26A); box-shadow:0 18px 40px -16px rgba(217,178,106,.7);}
.px-btn-glass, .eb-px a.px-btn-glass{color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.px-btn-glass:hover{background:rgba(255,255,255,.18);}

.px-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px; opacity:0; animation:pxFade .9s var(--px-ease) .9s forwards;}
.px-chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; color:#E3EBFA; font-size:13px; font-weight:800;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.px-chip svg{width:16px; height:16px; flex:none; color:#8FD3FF;}

/* ---------- A white card docked on the hero's lower edge (تحقق من حجزك) ---------- */
.px-dock{position:relative; z-index:6; max-width:880px; margin:-78px auto 0; padding:0 18px; opacity:0; animation:pxFade 1s var(--px-ease) .9s forwards;}
.px-dock-card{
  background:#fff; border:1px solid rgba(15,40,90,.06); border-radius:24px; padding:18px;
  box-shadow:0 36px 80px -32px rgba(8,25,70,.5), 0 6px 18px rgba(8,25,70,.06);
}

/* ---------- Section heads, like the homepage ---------- */
.eb-px .sx-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; padding:7px 14px; border-radius:999px;
  background:rgba(30,90,220,.08); color:var(--primary); font-size:12.5px; font-weight:800;
}
.eb-px .sx-eyebrow i{width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(30,90,220,.12);}
.eb-px .sx-eyebrow.sx-light{background:rgba(255,255,255,.1); color:#9FD8FF; border:1px solid rgba(255,255,255,.14);}
.px-head{max-width:680px; margin:0 auto 36px; text-align:center;}
.px-head h2{margin:0 0 10px; color:var(--px-ink); font-size:clamp(26px, 3vw, 40px); line-height:1.25; font-weight:800;}
.px-head p{margin:0; color:var(--text-soft); font-size:15px; line-height:1.85;}
.eb-px .section{padding-top:64px; padding-bottom:36px;}
.eb-px .reveal{transform:translateY(38px); transition:opacity 1s var(--px-ease), transform 1s var(--px-ease);}
.eb-px .reveal.revealed{opacity:1; transform:none;}

/* ---------- The three steps (عضويات: كيف تشتغل) ---------- */
.px-steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:1000px; margin:0 auto;}
.px-step{
  position:relative; padding:26px 22px 22px; border-radius:24px; background:#fff; border:1px solid rgba(15,40,90,.06);
  box-shadow:0 20px 46px -32px rgba(8,25,70,.4); transition:transform .5s var(--px-ease), box-shadow .5s var(--px-ease);
}
.px-step:hover{transform:translateY(-6px); box-shadow:0 34px 64px -34px rgba(8,25,70,.5);}
.px-step > span{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:14px;
  border-radius:14px; background:linear-gradient(135deg, #2C6BF0, #00A8E8); color:#fff; font-size:18px; font-weight:800;
  box-shadow:0 10px 22px -8px rgba(0,168,232,.6);
}
.px-step b{display:block; margin-bottom:6px; color:var(--px-ink); font-size:16.5px; font-weight:800;}
.px-step p{margin:0; color:var(--text-soft); font-size:13.5px; line-height:1.85;}

/* ---------- Membership tiers: dark glass cards ---------- */
.px-tiers-wrap{
  position:relative; isolation:isolate; overflow:hidden; border-radius:34px; padding:52px 36px 44px;
  background:linear-gradient(120deg, #06122E 0%, #0B1E42 45%, #1A2F6E 100%);
}
.px-tiers-wrap .px-orb{filter:blur(60px);}
.px-tiers-wrap .px-head h2{color:#fff;}
.px-tiers-wrap .px-head p{color:#AFC3E8;}
.px-tiers{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; align-items:stretch;}
.px-tier{
  position:relative; display:flex; flex-direction:column; padding:28px 24px 24px; border-radius:26px; color:#E3EBFA; text-align:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:transform .5s var(--px-ease), background .5s var(--px-ease), border-color .5s var(--px-ease);
}
.px-tier:hover{transform:translateY(-8px); background:rgba(255,255,255,.09);}
.px-tier-medal{
  width:54px; height:54px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
}
.px-tier-medal svg{width:26px; height:26px;}
.px-tier > b{font-size:17px; font-weight:800; color:#fff;}
.px-tier-pct{display:block; margin:10px 0 2px; font-size:52px; line-height:1; font-weight:800;}
.px-tier-pct i{font-style:normal; font-size:26px;}
.px-tier > small{display:block; margin-bottom:18px; color:#9FB7E3; font-size:12.5px; font-weight:700;}
.px-tier-perks{list-style:none; margin:auto 0 0; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.12); text-align:right; display:flex; flex-direction:column; gap:10px;}
.px-tier-perks li{position:relative; padding-right:26px; font-size:13px; font-weight:600; color:#C9D8F5; line-height:1.75;}
.px-tier-perks li::before{
  content:"✓"; position:absolute; right:0; top:1px; width:17px; height:17px; border-radius:50%;
  font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center;
  background:rgba(46,224,122,.16); color:#2EE07A;
}
.px-tier.is-silver .px-tier-medal{color:#DDE6F2;}
.px-tier.is-silver .px-tier-pct{background:linear-gradient(180deg, #FFFFFF, #B8C4D6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.px-tier.is-gold .px-tier-medal{color:#FCE7A8; background:rgba(217,178,106,.14); border-color:rgba(217,178,106,.35);}
.px-tier.is-gold .px-tier-pct{background:linear-gradient(180deg, #FCE7A8, #D9A63E); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.px-tier.is-gold{border-color:rgba(217,178,106,.4); background:rgba(217,178,106,.07);}
.px-tier.is-platinum .px-tier-medal{color:#CDB4FF; background:rgba(124,92,255,.16); border-color:rgba(124,92,255,.4);}
.px-tier.is-platinum .px-tier-pct{background:linear-gradient(180deg, #E8F4FF, #8FD3FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.px-tier.is-platinum{border-color:rgba(143,211,255,.35);}
.px-tier-tag{
  position:absolute; top:-13px; right:50%; transform:translateX(50%); padding:5px 14px; border-radius:999px;
  font-size:11.5px; font-weight:800; color:var(--px-ink); background:linear-gradient(135deg, #F6E7C1, #D9B26A);
  box-shadow:0 8px 18px -6px rgba(217,178,106,.7); white-space:nowrap;
}
.px-tiers-note{margin:26px auto 0; max-width:820px; text-align:center; color:#8FA6D3; font-size:11.5px; line-height:1.9;}

/* ---------- White glass cards (the forms) ---------- */
.eb-px .px-card{
  background:#fff; border:1px solid rgba(15,40,90,.06); border-radius:28px; padding:38px 34px;
  box-shadow:0 30px 70px -40px rgba(8,25,70,.45), 0 4px 14px rgba(8,25,70,.05);
}
.eb-px .px-card .form-group label{font-size:12px; font-weight:800; color:var(--text-soft);}
.eb-px .px-card input:not([type="checkbox"]), .eb-px .px-card select, .eb-px .px-card textarea{
  background:#F3F6FC; border:1.5px solid transparent; border-radius:14px; padding:13px 15px; font-size:14px; font-weight:600;
  transition:border-color .25s, background .25s, box-shadow .25s; width:100%;
}
.eb-px .px-card input:not([type="checkbox"]):hover, .eb-px .px-card select:hover, .eb-px .px-card textarea:hover{border-color:#D3E0FA;}
.eb-px .px-card input:not([type="checkbox"]):focus, .eb-px .px-card select:focus, .eb-px .px-card textarea:focus{
  outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(30,90,220,.1);
}
.eb-px .px-card .btn-primary{height:52px; border-radius:15px; font-size:15px;}

/* ---------- تحقق من حجزك: the search dock ---------- */
.eb-px .trk-search-box{display:grid; grid-template-columns:1.1fr 1.1fr auto; gap:12px; background:none; border:none; padding:0; box-shadow:none; margin:0;}
.eb-px .trk-search-field{
  display:flex; align-items:center; gap:10px; height:54px; padding:0 14px; border-radius:15px;
  background:#F3F6FC; border:1.5px solid transparent; transition:border-color .25s, background .25s, box-shadow .25s;
}
.eb-px .trk-search-field:hover{border-color:#D3E0FA;}
.eb-px .trk-search-field:focus-within{border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(30,90,220,.1);}
.eb-px .trk-search-field svg{width:18px; height:18px; flex:none; color:var(--primary);}
.eb-px .trk-search-field input{flex:1; min-width:0; border:none; background:none; font-size:14px; font-weight:700; color:var(--text);}
.eb-px .trk-search-field input:focus{outline:none;}
.eb-px .trk-search-box .btn-primary{height:54px; padding:0 30px; border-radius:15px; font-size:15px;}
.eb-px .trk-search-hint{margin:12px 4px 0; text-align:right; font-size:12.5px; font-weight:700;}
.eb-px .trk-result-section{padding-top:28px;}

/* ---------- The blue contact panel (like the homepage's) ---------- */
.px-panel{
  position:relative; overflow:hidden; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:36px;
  padding:48px; border-radius:34px; color:#fff;
  background:linear-gradient(135deg, #0E2B73 0%, #1E5ADC 62%, #0FA0E0 100%);
  box-shadow:0 40px 80px -40px rgba(14,43,115,.7);
}
.px-panel::before{content:""; position:absolute; width:520px; height:520px; left:-180px; top:-240px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18), transparent 65%); pointer-events:none;}
.px-panel h2{margin:0 0 12px; color:#fff; font-size:clamp(24px, 2.6vw, 34px); line-height:1.3; font-weight:800;}
.px-panel > div > p{margin:0; color:#D6E4FF; font-size:15px; line-height:1.85; max-width:460px;}
.px-panel .whatsapp-cards{flex-direction:column; align-items:stretch; gap:14px; margin:0; display:flex;}
.px-panel .whatsapp-card{
  max-width:none; flex:0 0 auto; padding:15px 18px; border-radius:22px; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); box-shadow:none;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:transform .4s var(--px-ease), background .4s var(--px-ease);
}
.px-panel .whatsapp-card:hover{transform:translateX(-6px); background:rgba(255,255,255,.2); box-shadow:none; border-color:rgba(255,255,255,.35);}
.px-panel .whatsapp-info b{color:#fff;}
.px-panel .whatsapp-info span{color:#D6E4FF;}
.px-panel .whatsapp-btn{background:#fff; color:#1FAE55;}
.px-panel .whatsapp-card:hover .whatsapp-btn{background:#25D366; color:#fff;}
.px-panel-pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
.eb-px .px-panel-pills a{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; color:#fff; font-size:13px; font-weight:800;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); transition:background .3s var(--px-ease);
}
.eb-px .px-panel-pills a:hover{background:rgba(255,255,255,.22);}
.px-panel-pills svg{width:15px; height:15px;}

/* ---------- Legal pages ---------- */
.eb-px .legal-section{padding-top:44px;}
.eb-px .legal-card{
  border-radius:28px; border:1px solid rgba(15,40,90,.06); box-shadow:0 30px 70px -40px rgba(8,25,70,.4), 0 4px 14px rgba(8,25,70,.05);
}
.eb-px .legal-card h1{display:none;} /* the hero already says it */
.eb-px .legal-content h2{
  position:relative; padding-right:16px; margin-top:34px; color:var(--px-ink);
}
.eb-px .legal-content h2::before{
  content:""; position:absolute; right:0; top:6px; bottom:6px; width:4px; border-radius:4px;
  background:linear-gradient(180deg, var(--primary), var(--accent));
}

/* ---------- 404 ---------- */
.px-404-code{
  display:block; font-size:clamp(110px, 22vw, 200px); line-height:1; font-weight:800; letter-spacing:.02em;
  background:linear-gradient(180deg, #8FD3FF 0%, #2C6BF0 70%, #0E2E7A 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:0; animation:pxFade .9s var(--px-ease) .05s forwards;
}
.px-hero.px-404{min-height:calc(100vh - 220px); padding-bottom:80px;}

/* ---------- Narrow screens ---------- */
@media (max-width:900px){
  .px-steps{grid-template-columns:1fr;}
  .px-tiers{grid-template-columns:1fr; gap:22px;}
  .px-tiers-wrap{padding:40px 18px 36px; border-radius:28px;}
  .px-panel{grid-template-columns:1fr; padding:36px 24px; gap:24px;}
}
@media (max-width:720px){
  .px-hero{padding:calc(var(--eb-hdr-space) + 44px) 18px 56px;}
  .px-hero.px-dockroom{padding-bottom:104px;}
  .px-dock{margin-top:-70px; padding:0 14px;}
  .px-dock-card{padding:14px; border-radius:20px;}
  .eb-px .trk-search-box{grid-template-columns:1fr;}
  .eb-px .section{padding-top:46px; padding-bottom:24px;}
  .eb-px .px-card{padding:26px 18px; border-radius:24px;}
  .px-btn{height:50px; padding:0 20px; font-size:14px;}
  .px-chips{gap:8px;}
  .px-chip{padding:8px 13px; font-size:12px;}
}

/* ---------- Visitors who ask for less motion ---------- */
@media (prefers-reduced-motion: reduce){
  .px-eyebrow, .px-sub, .px-ctas, .px-chips, .px-dock, .px-404-code{opacity:1; animation:none;}
  .px-w, .px-w.px-accent{transform:none; animation:none;}
  .px-hero.has-img .px-media img{animation:none; transform:none;}
  .px-orb, .px-eyebrow i{animation:none;}
  .eb-px .reveal{opacity:1; transform:none; transition:none;}
  .px-tier:hover, .px-step:hover{transform:none;}
}

/* ==========================================================================
   1.0.112: a branch's own page (template-branch.php)
   ========================================================================== */
.bx-crumbs{gap:8px;}
.px-title .bx-city{white-space:nowrap;}
.bx-crumbs a{color:#fff; text-decoration:none; opacity:.85;}
.bx-crumbs a:hover{opacity:1; text-decoration:underline;}
.bx-crumbs span[aria-hidden]{opacity:.5;}
.eb-branch-page .section{max-width:1200px; margin:0 auto; padding:84px 24px 0;}
.bx-about-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:start;}
.bx-about-copy h2{margin:10px 0 14px; color:var(--px-ink); font-size:clamp(26px, 3vw, 38px); line-height:1.3; font-weight:800;}
.bx-about-copy p{margin:0 0 20px; color:var(--text-soft); font-size:16px; line-height:2;}
.bx-perks{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.bx-perks li{position:relative; padding:12px 44px 12px 14px; border-radius:14px; background:#fff; border:1px solid #E6ECF7; font-weight:700; color:var(--px-ink); box-shadow:0 10px 26px -22px rgba(8,25,70,.45);}
.bx-perks li::before{content:"✓"; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#E4F7EF; color:#149E6E; font-size:12px; font-weight:900;}
.eb-px .bx-info{padding:26px; border-radius:26px; position:sticky; top:calc(var(--eb-hdr-space) + 16px);}
.bx-info h3{margin:0 0 16px; font-size:18px; color:var(--px-ink);}
.bx-line{display:flex; gap:12px; align-items:flex-start; margin:0 0 14px; color:var(--px-ink); font-weight:700; line-height:1.7;}
.bx-line svg{width:20px; height:20px; flex:none; margin-top:3px; color:var(--primary);}
.bx-line small{display:block; font-size:12px; color:var(--text-faint); font-weight:700;}
.bx-line a{color:var(--px-ink); text-decoration:none;}
.bx-info-actions{display:grid; gap:10px; margin-top:20px;}
.bx-btn-dark, .eb-px a.bx-btn-dark{color:#fff; background:linear-gradient(135deg, #0B1E42, #1E5ADC); justify-content:center;}
.bx-btn-wa, .eb-px a.bx-btn-wa{color:#fff; background:#25D366; justify-content:center; box-shadow:0 14px 30px -16px rgba(37,211,102,.7);}

.bx-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px;}
.bx-room{
  display:flex; flex-direction:column; overflow:hidden; border-radius:24px; background:#fff; border:1px solid #E6ECF7; text-decoration:none; color:inherit;
  box-shadow:0 22px 50px -38px rgba(8,25,70,.55); transition:transform .45s var(--px-ease), box-shadow .45s var(--px-ease);
}
.bx-room.reveal{transition-delay:calc(var(--d, 0) * 60ms);}
.bx-room:hover{transform:translateY(-6px); box-shadow:0 30px 60px -36px rgba(8,25,70,.6);}
.bx-room-img{display:block; aspect-ratio:4 / 3; background:#E9EEF8; overflow:hidden;}
.bx-room-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--px-ease);}
.bx-room:hover .bx-room-img img{transform:scale(1.06);}
.bx-room-body{display:flex; flex-direction:column; gap:8px; padding:18px 18px 16px; flex:1;}
.bx-room-body b{font-size:16px; color:var(--px-ink); line-height:1.5;}
.bx-room-meta{display:flex; flex-wrap:wrap; gap:6px;}
.bx-room-meta span{font-size:12px; font-weight:700; color:var(--text-soft); background:#F2F5FB; padding:4px 10px; border-radius:999px;}
.bx-room-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:10px; border-top:1px dashed #E3E9F5;}
.bx-price{font-size:13px; color:var(--text-soft); font-weight:700;}
.bx-price b{font-size:20px; color:var(--primary-dark);}
.bx-price small{color:var(--text-faint);}
.bx-go{display:inline-flex; align-items:center; gap:4px; padding:8px 14px; border-radius:12px; background:var(--primary); color:#fff; font-weight:800; font-size:13px;}
.bx-go svg{width:16px; height:16px;}

.bx-map{position:relative; overflow:hidden; border-radius:28px; border:1px solid #E6ECF7; box-shadow:0 30px 70px -44px rgba(8,25,70,.6); background:#E9EEF8;}
.bx-map iframe{display:block; width:100%; height:420px; border:0;}
.bx-map-pill{
  position:absolute; bottom:18px; left:18px; display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px;
  background:#0B1E42; color:#fff; font-weight:800; font-size:14px; text-decoration:none; box-shadow:0 16px 34px -14px rgba(6,18,46,.7);
}
.bx-map-pill svg{width:18px; height:18px;}
.eb-px a.bx-map-pill, .eb-px a.bx-map-pill:hover{color:#fff;}

.bx-faq-list{max-width:860px; margin:0 auto; display:grid; gap:12px;}
.bx-q{border-radius:18px; background:#fff; border:1px solid #E6ECF7; box-shadow:0 14px 34px -30px rgba(8,25,70,.5); overflow:hidden;}
.bx-q summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; font-weight:800; color:var(--px-ink); font-size:15.5px;}
.bx-q summary::-webkit-details-marker{display:none;}
.bx-q summary i{width:28px; height:28px; flex:none; border-radius:50%; background:#EEF3FD; position:relative; transition:transform .35s var(--px-ease), background .35s;}
.bx-q summary i::before, .bx-q summary i::after{content:""; position:absolute; top:50%; left:50%; width:12px; height:2px; background:var(--primary); border-radius:2px; transform:translate(-50%,-50%);}
.bx-q summary i::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .35s var(--px-ease);}
.bx-q[open] summary i{background:var(--primary);}
.bx-q[open] summary i::before, .bx-q[open] summary i::after{background:#fff;}
.bx-q[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg);}
.bx-q p{margin:0; padding:0 20px 18px; color:var(--text-soft); line-height:2; font-size:14.5px;}
.bx-q[open] p{animation:bxOpen .4s var(--px-ease);}
@keyframes bxOpen{from{opacity:0; transform:translateY(-6px);}to{opacity:1; transform:none;}}

.bx-others-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px;}
.bx-other{position:relative; display:block; overflow:hidden; border-radius:22px; aspect-ratio:16 / 10; background:#0B1E42; text-decoration:none;}
.bx-other img{width:100%; height:100%; object-fit:cover; display:block; opacity:.85; transition:transform .8s var(--px-ease), opacity .4s;}
.bx-other:hover img{transform:scale(1.07); opacity:1;}
.bx-other span{position:absolute; inset:auto 0 0 0; padding:16px 18px; background:linear-gradient(180deg, transparent, rgba(6,18,46,.88)); color:#fff;}
.bx-other small{display:block; font-size:12px; color:#C9D8F5; font-weight:700;}
.bx-other b{font-size:17px;}
.eb-branch-page .pub-footer{margin-top:96px;}

@media (max-width:980px){
  .bx-about-grid{grid-template-columns:1fr;}
  .eb-px .bx-info{position:static;}
  .bx-grid, .bx-others-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:640px){
  .eb-branch-page .section{padding:56px 18px 0;}
  .bx-grid, .bx-others-grid{grid-template-columns:1fr;}
  .bx-map iframe{height:320px;}
  .bx-map{border-radius:22px;}
}
@media (prefers-reduced-motion:reduce){
  .bx-room, .bx-room-img img, .bx-other img{transition:none;}
  .bx-q[open] p{animation:none;}
}

/* ==========================================================================
   1.0.120: a city's page (template-city.php), «فندق في جدة»
   ========================================================================== */
.cx-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px;}
.cx-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:28px; background:#fff; border:1px solid #E6ECF7;
  box-shadow:0 26px 60px -42px rgba(8,25,70,.6); transition:transform .45s var(--px-ease), box-shadow .45s var(--px-ease);
}
.cx-card.reveal{transition-delay:calc(var(--d, 0) * 80ms);}
.cx-card:hover{transform:translateY(-6px); box-shadow:0 34px 70px -40px rgba(8,25,70,.65);}
.cx-img{position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; background:#0B1E42;}
.cx-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--px-ease);}
.cx-card:hover .cx-img img{transform:scale(1.06);}
.cx-price{
  position:absolute; top:16px; right:16px; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:800; color:#0B1E42;
  background:linear-gradient(135deg, #F6E7C1, #D9B26A); box-shadow:0 12px 26px -12px rgba(0,0,0,.55);
}
.cx-price b{font-size:17px;}
.cx-body{display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; flex:1;}
.cx-body h3{margin:0; font-size:20px; line-height:1.4;}
.cx-body h3 a{color:var(--px-ink); text-decoration:none;}
.cx-body h3 a:hover{color:var(--primary);}
.cx-addr{display:flex; align-items:flex-start; gap:8px; margin:0; color:var(--text-soft); font-weight:700; font-size:14px; line-height:1.7;}
.cx-addr svg{width:18px; height:18px; flex:none; margin-top:2px; color:var(--primary);}
.cx-desc{margin:0; color:var(--text-soft); font-size:14.5px; line-height:1.9;}
.cx-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; padding-top:8px;}
.cx-actions .px-btn{justify-content:center;}
.cx-btn-line, .eb-px a.cx-btn-line{color:var(--px-ink); background:#F2F5FB; border:1px solid #E1E8F5;}
.eb-px a.cx-btn-line:hover{background:#E8EEFA;}
.cx-branch-tag{background:#EAF2FF !important; color:var(--primary-dark) !important;}
.bx-others .px-head p{margin-top:6px;}
.eb-px a.bx-city-link{color:var(--primary); font-weight:800; text-decoration:none; border-bottom:2px solid currentColor;}
@media (max-width:980px){
  .cx-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .cx-body{padding:18px 18px 20px;}
  .cx-actions{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .cx-card, .cx-img img{transition:none;}
}