/* ──────────────────────────────────────────────────────────────
   footer.css — styles for <footer>, scroll-to-top (#stt),
   and the mobile sticky action bar (#sticky-bar)
   ────────────────────────────────────────────────────────────── */

footer {
  background:#183630; color:#fff;
  padding:52px 5% 24px;
}
.f-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr; gap:44px; margin-bottom:36px }
.f-brand p { font-size:.78rem; color:rgba(255,255,255,.45); margin-top:12px; line-height:1.68; max-width:280px; text-align:right }
.f-logo-mark {
  width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-size:14px; font-weight:600; color:#fff;
}
.f-logo-name { font-size:.85rem; font-weight:700; color:#fff }
.f-col h4 { font-size:.66rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:#B69667; margin-bottom:12px }
.f-col ul { list-style:none; text-align:right }
.f-col li { margin-bottom:7px }
.f-col li::before { content:'— '; color:#B69667; font-size:.70rem }
.f-col a  { font-size:.78rem; color:rgba(255,255,255,.45); text-decoration:none; transition:color .2s }
.f-col a:hover { color:#fff }
.f-col span { font-size:.78rem; color:rgba(255,255,255,.45) }

/* Commercial registration number — links to Saudi Business CR verification */
.cr-link {
  color:rgba(182,150,103,.70);
  direction:ltr; unicode-bidi:embed;
  text-decoration:none;
  transition:color .2s;
}
.cr-link:hover { color:#B69667 }

.f-bot {
  border-top:1px solid rgba(255,255,255,.10); padding-top:18px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.f-bot p { font-size:.72rem; color:rgba(255,255,255,.30) }
.f-links { display:flex; gap:14px }
.f-links a { font-size:.72rem; color:rgba(255,255,255,.30); text-decoration:none; transition:color .2s }
.f-links a:hover { color:rgba(255,255,255,.80) }

/* Footer powered-by bar */
.f-powered { margin-top:28px }
.f-powered-line { height:1px; background:rgba(255,255,255,.10) }
.f-powered-content {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding-top:18px; padding-bottom:4px; flex-direction:column;
}
.f-powered-txt {
  font-size:.68rem; font-weight:500; letter-spacing:.06em;
  color:rgba(255,255,255,.25); text-transform:uppercase;
}
.f-powered-logo { display:flex; align-items:center; opacity:.55; transition:opacity .2s }
.f-powered-logo:hover { opacity:1 }
.f-powered-logo img { height:14vh; width:auto; display:inline; vertical-align:middle; filter:brightness(0) invert(1) }

/* Social icons — glass effect */
.f-socials { display:flex; gap:10px; margin-top:14px; margin-bottom:14px; justify-content:flex-start }
.soc-btn {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:.88rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:rgba(255,255,255,.65);
  transition:all .25s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.10);
}
.soc-btn:hover {
  background:rgba(182,150,103,.18);
  border-color:rgba(182,150,103,.45);
  color:#B69667;
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(182,150,103,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.soc-btn.li:hover { background:rgba(182,150,103,.18); border-color:rgba(182,150,103,.45) }
.soc-btn.wa:hover { background:rgba(182,150,103,.18); border-color:rgba(182,150,103,.45); color:#B69667 }
.soc-btn.mp:hover { background:rgba(182,150,103,.18); border-color:rgba(182,150,103,.45); color:#B69667 }
.soc-btn.em:hover { background:rgba(182,150,103,.18); border-color:rgba(182,150,103,.45); color:#B69667 }

/* Numbered badge for differentiating multiple location pins */
.soc-btn.mp { position:relative }
.pin-num {
  position:absolute;
  top:-4px; right:-4px;
  width:15px; height:15px;
  border-radius:50%;
  background:#B69667;
  color:#fff;
  font-size:9px;
  font-weight:800;
  font-variant-numeric:lining-nums;
  direction:ltr;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  border:1.5px solid #183630;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:background .25s ease, transform .25s ease;
  pointer-events:none;
}
.soc-btn.mp:hover .pin-num {
  background:#fff;
  color:#183630;
  transform:scale(1.08);
}

/* SCROLL TOP */
#stt {
  position:fixed; bottom:80px; left:26px; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:900; opacity:0; pointer-events:none;
  transition:all .3s; border:none;
  background:#183630; box-shadow:0 4px 16px rgba(24,54,48,.25);
}
#stt.show { opacity:1; pointer-events:all }
#stt:hover { transform:translateY(-3px) }
#stt.gold { background:#B69667; box-shadow:0 4px 16px rgba(182,150,103,.35) }
#stt.gold:hover { background:#a0845a }
#stt i { color:whitesmoke; font-size:.82rem }
#stt.gold i { color:#fff }

/* Sticky bottom action bar — instant WhatsApp/email access on mobile */
#sticky-bar {
  display:none;
  position:fixed; bottom:0; inset-inline:0; z-index:950;
  width:100%; box-sizing:border-box;
  padding:10px 5% max(14px, env(safe-area-inset-bottom));
  background:rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.45);
  box-shadow:0 -1px 0 rgba(182,150,103,.12), 0 -8px 32px rgba(24,54,48,.10);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  gap:10px;
}
.sb-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 10px; border-radius:12px; text-decoration:none;
  font-size:.82rem; font-weight:700; transition:all .2s; min-height:48px;
}
.sb-wa  { background:rgba(37,211,102,.88); color:#fff; box-shadow:0 2px 12px rgba(37,211,102,.30); border:1px solid rgba(255,255,255,.25) }
.sb-wa:hover { background:rgba(29,174,86,.92); box-shadow:0 4px 20px rgba(37,211,102,.40); transform:translateY(-1px) }
.sb-mail { background:rgba(24,54,48,.82); color:#fff; box-shadow:0 2px 12px rgba(24,54,48,.22); border:1px solid rgba(255,255,255,.12) }
.sb-mail:hover { background:rgba(15,34,24,.90); box-shadow:0 4px 20px rgba(24,54,48,.32); transform:translateY(-1px) }

/* ── Breakpoints ───────────────────────────────────────────── */

@media(max-width:1024px){
  .f-grid { grid-template-columns:1fr 1fr }
  .f-brand { text-align:center !important }
  .f-brand-info { text-align:center !important }
  .f-brand p { text-align:center !important; max-width:100% !important }
  .f-grid.mobile-logo { display:flex !important; justify-content:center !important }
  .footer-logo { margin-right:0 !important }
  .f-socials { justify-content:center !important }
}

@media(max-width:900px) and (orientation:landscape){
  #sticky-bar {
    padding:6px 5% max(8px, env(safe-area-inset-bottom));
  }
  .sb-btn { min-height:40px; padding:8px 10px; font-size:.78rem }
}

@media(max-width:768px){
  #sticky-bar { display:flex }
  .f-grid  { grid-template-columns:1fr; gap:24px }
  .f-bot   { flex-direction:column; text-align:center }
  .f-grid  { text-align:center }
  .f-brand { place-items:center; text-align:center }
  .f-brand > div, .f-brand p { text-align:center !important; width:100% }
  .f-brand-info { text-align:center !important }
  .f-grid.mobile-logo { display:flex !important; justify-content:center !important; text-align:center !important }
  .footer-logo { margin-right:0 !important; }
  .f-brand .f-socials { justify-content:center !important; }
  footer { padding-bottom:80px }
  .mobile-logo { justify-self:center }
}

@media(max-width:700px){
  .f-col li::before { content:'' }
  .f-col ul { text-align:center }
}