/* ==========================================================================
   1.0.128: «احجز فندقك بالتقسيط مع تابي» (template-tabby.php), this page
   only, on top of pages.css. Tabby's mint (#6CFF93) as the accent, the
   site's navy and gold everywhere else.
   ========================================================================== */
.tl-page{--tl-mint:#6CFF93; --tl-mint-soft:#E6FBEC;}
.tl-page .section{max-width:1200px; margin:0 auto; padding-inline:24px;}

/* Hero */
.tl-crumbs{gap:8px;}
.tl-crumbs a{color:#fff; text-decoration:none; opacity:.85;}
.tl-crumbs a:hover{opacity:1; text-decoration:underline;}
.tl-crumbs span[aria-hidden]{opacity:.5;}
.tl-hero-logo{display:block; width:110px; height:auto; margin:18px auto 6px; border-radius:12px; box-shadow:0 18px 40px -16px rgba(108,255,147,.6); opacity:0; animation:pxFade .8s var(--px-ease) .1s forwards;}
.px-title .tl-accent{background:linear-gradient(90deg, #A8FFC4, var(--tl-mint) 45%, #8FD3FF, #A8FFC4); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;}
.tl-orb-mint{background:rgba(108,255,147,.28) !important;}

/* Steps: four instead of three */
.tl-steps{grid-template-columns:repeat(4, 1fr); max-width:1120px;}

/* Worked example */
.tl-example{
  position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:center;
  padding:44px; border-radius:32px; color:#fff;
  background:radial-gradient(120% 140% at 100% 0%, #1A4BC2 0%, #0E2E7A 40%, #06122E 100%);
  box-shadow:0 40px 80px -46px rgba(6,18,46,.75);
}
.tl-example-copy{position:relative;}
.tl-example .sx-eyebrow{background:rgba(108,255,147,.12); color:#9DFFB8;}
.tl-example .sx-eyebrow i{background:var(--tl-mint);}
.tl-example h2{margin:12px 0 10px; font-size:clamp(24px, 2.8vw, 36px); line-height:1.3; font-weight:800; color:#fff;}
.tl-example p{margin:0; color:#C9D8F5; font-size:15px; line-height:1.9;}
.tl-plan{position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;}
.tl-plan li{display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 8px; border-radius:20px; text-align:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);}
.tl-plan li.is-now{background:rgba(108,255,147,.14); border-color:rgba(108,255,147,.5); box-shadow:0 0 0 4px rgba(108,255,147,.08);}
.tl-plan b{font-size:20px; font-weight:900; font-variant-numeric:tabular-nums;}
.tl-plan b small{font-size:12px; color:#C9D8F5; font-weight:700;}
.tl-plan li.is-now b{color:#9DFFB8;}
.tl-plan span{font-size:12.5px; color:#C9D8F5; font-weight:700;}

/* Branches */
.tl-branches{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px;}
.tl-branch{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);}
.tl-branch.reveal{transition-delay:calc(var(--d, 0) * 70ms);}
.tl-branch:hover{transform:translateY(-6px); box-shadow:0 30px 60px -36px rgba(8,25,70,.6);}
.tl-branch-img{display:block; aspect-ratio:4 / 3; background:#E9EEF8; overflow:hidden;}
.tl-branch-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--px-ease);}
.tl-branch:hover .tl-branch-img img{transform:scale(1.06);}
.tl-branch-body{display:flex; flex-direction:column; gap:4px; padding:16px 18px 18px;}
.tl-branch-body small{font-size:12px; font-weight:800; color:var(--primary);}
.tl-branch-body b{font-size:16px; color:var(--px-ink); line-height:1.45;}
.tl-branch-body em{font-style:normal; font-size:13px; font-weight:700; color:#2E7D4F; background:var(--tl-mint-soft); padding:6px 10px; border-radius:10px; margin-top:6px; width:fit-content;}

/* FAQ */
.tl-faq{max-width:860px; margin:0 auto; display:grid; gap:12px;}
.tl-q{border-radius:18px; background:#fff; border:1px solid #E6ECF7; box-shadow:0 14px 34px -30px rgba(8,25,70,.5); overflow:hidden;}
.tl-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;}
.tl-q summary::-webkit-details-marker{display:none;}
.tl-q summary i{width:28px; height:28px; flex:none; border-radius:50%; background:#EEF3FD; position:relative; transition:background .35s;}
.tl-q summary i::before, .tl-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%);}
.tl-q summary i::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .35s var(--px-ease);}
.tl-q[open] summary i{background:var(--primary);}
.tl-q[open] summary i::before, .tl-q[open] summary i::after{background:#fff;}
.tl-q[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg);}
.tl-q p{margin:0; padding:0 20px 18px; color:var(--text-soft); line-height:2; font-size:14.5px;}
.tl-cta{display:flex; justify-content:center; margin-top:34px;}
.tl-page .pub-footer{margin-top:80px;}

@media (max-width:980px){
  .tl-steps{grid-template-columns:repeat(2, 1fr);}
  .tl-example{grid-template-columns:1fr; padding:32px 24px;}
  .tl-branches{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:640px){
  .tl-page .section{padding-inline:18px;}
  .tl-steps{grid-template-columns:1fr;}
  .tl-plan{grid-template-columns:repeat(2, 1fr);}
  .tl-branches{grid-template-columns:1fr;}
  .tl-example{border-radius:26px;}
}
@media (prefers-reduced-motion:reduce){
  .tl-hero-logo{animation:none; opacity:1;}
  .tl-branch, .tl-branch-img img{transition:none;}
}

/* 1.0.133: the gradient only paints inside the word's box, so the dots
   under «ي» in «تابي» were cut off; give the box room below the line. */
.tl-page .px-title .tl-accent{padding-bottom:.22em; margin-bottom:-.22em;}