/* ANDALUS_SITE_HEADER_TOP_V3 (owner, 23 Oct 2026) — the top bar of the one header (includes/header.php).
   «حسن شكله من فوق يتوافق مع الفوتر — علامة جوجل وفيس بوك جنب التقييمات، ويتناسب مع التليفون والكمبيوتر».
   Same palette as the footer: the logo's graphite with white; Google and Facebook in their own colours; star yellow
   filled to the real rating. Phones: the two ratings only. Tablets: + 2 promises. Computers: + all 4 promises. */

html body .an-site-header .an-hq{display:block!important;position:relative;background:linear-gradient(90deg,#2d2a35 0%,#1b1921 100%);color:#fff;font-family:'Tajawal',Arial,sans-serif;direction:rtl}
.an-hq *{box-sizing:border-box}
.an-hq a{color:inherit!important;text-decoration:none!important}
.an-hq a:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px;border-radius:8px}
.an-hq__row{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;min-height:44px;padding-block:5px}

/* ratings */
.an-hq__ratings{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.an-hq__rating{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:3px 12px 3px 4px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);white-space:nowrap;transition:background .15s,border-color .15s}
.an-hq__rating:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.an-hq__logo{flex:0 0 26px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff}
.an-hq__logo svg{display:block;width:16px;height:16px}
.an-hq__logo--facebook{background:#1877f2}
.an-hq__logo--facebook svg{width:17px;height:17px;transform:translateY(1.5px)}
.an-hq__rating b{font-size:15px;font-weight:900;line-height:1}
.an-hq__stars{position:relative;display:inline-block;font-size:13px;line-height:1;letter-spacing:1px;direction:ltr}
.an-hq__stars>span:first-child{color:rgba(255,255,255,.22)}
.an-hq__stars>span:last-child{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#fbbc04}
.an-hq__rating small{font-size:12.5px;font-weight:700;color:#c4bfcb}

/* promises */
.an-hq__perks{display:flex;align-items:center;gap:6px 20px;margin:0;padding:0;list-style:none;min-width:0}
.an-hq__perks li{display:flex;align-items:center;min-width:0}
.an-hq__perks li>a,.an-hq__perks li{gap:7px;font-size:13.5px;font-weight:800;color:#fff;white-space:nowrap}
.an-hq__perks li>a{display:inline-flex;align-items:center;transition:opacity .15s}
.an-hq__perks li>a:hover{opacity:.8}
.an-hq__perks svg{flex:0 0 16px;width:16px;height:16px;fill:#fff;opacity:.9}
.an-hq__perks li+li{position:relative}
.an-hq__perks li+li:before{content:"";position:absolute;right:-11px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:rgba(255,255,255,.35)}

/* the finance strip right under the header: the same graphite label instead of the red one */
html body .an-fp-strip__lbl{background:linear-gradient(90deg,#2d2a35,#1b1921)!important;color:#fff!important}

@media (min-width:1440px){
  .an-hq__row{min-height:46px}
  .an-hq__perks li>a,.an-hq__perks li{font-size:14px}
}
/* tablets / small laptops: ratings + the 2 promises that sell most */
@media (max-width:1180px){
  .an-hq__perks li:nth-child(3),.an-hq__perks li:nth-child(4){display:none}
}
/* phones: just the two ratings, side by side and centred */
@media (max-width:700px){
  .an-hq__row{justify-content:center;min-height:40px;padding-block:4px}
  .an-hq__perks{display:none}
  .an-hq__ratings{gap:6px;width:100%;justify-content:center}
  .an-hq__rating{gap:5px;min-height:30px;padding:2px 9px 2px 3px}
  .an-hq__logo{flex-basis:22px;width:22px;height:22px}
  .an-hq__logo svg{width:14px;height:14px}
  .an-hq__rating b{font-size:14px}
  .an-hq__stars{font-size:11.5px;letter-spacing:.5px}
  .an-hq__rating small{font-size:11.5px}
}
@media (max-width:370px){
  .an-hq__rating small{display:none}
}
/* phones and tablets: the bar folds away once the page scrolls, so the sticky header stays as small as before */
@media (max-width:1024px){
  html body .an-site-header .an-hq{max-height:60px;overflow:hidden;transition:max-height .22s ease}
  html body .an-site-header.is-scrolled .an-hq{max-height:0}
}
@media (prefers-reduced-motion:reduce){html body .an-site-header .an-hq{transition:none}}
