/* Barid Languages — header language picker, phone header icons, drawer, diagram cards. */

/* ── Picker (header, desktop and phone) ── */
.bl-switch{position:relative;display:inline-flex;flex:0 0 auto}
/* The theme styles every <button> (yellow on hover/focus); the picker keeps its own look. */
.bl-switch .bl-switch-btn,.bl-switch .bl-switch-btn:hover,.bl-switch .bl-switch-btn:focus,.bl-switch .bl-switch-btn:active{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  border:1.5px solid rgba(11,18,48,.16);background:#fff !important;color:#243158;font:inherit;font-size:14.5px;
  font-weight:700;line-height:1.2;letter-spacing:normal;text-transform:none;box-shadow:none;min-height:0;
  cursor:pointer;white-space:nowrap;transition:border-color .16s,color .16s}
.bl-switch .bl-switch-btn:hover,.bl-switch .bl-switch-btn[aria-expanded="true"]{border-color:#4B6BFF;color:#4B6BFF}
.bl-switch .bl-switch-btn:focus-visible{outline:2px solid #4B6BFF;outline-offset:2px}
.bl-ico{width:18px;height:18px;display:block;flex:0 0 auto}
.bl-caret{width:0;height:0;border-inline:4px solid transparent;border-top:5px solid currentColor;opacity:.6;transition:transform .16s}
.bl-switch-btn[aria-expanded="true"] .bl-caret{transform:rotate(180deg)}
.bl-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:960;min-width:210px;
  display:grid;gap:2px;padding:6px;background:#fff;border-radius:14px;border:1px solid rgba(11,18,48,.09);
  box-shadow:0 18px 48px rgba(11,18,48,.16)}
.bl-menu[hidden]{display:none}
.bl-menu-a{display:block;padding:9px 12px;border-radius:9px;font-size:14.5px;font-weight:600;color:#243158;
  text-decoration:none;line-height:1.45}
.bl-menu-a:hover,.bl-menu-a:focus-visible{background:#eef2ff;color:#4B6BFF;outline:none}
.bl-menu-a.is-on{background:#4B6BFF;color:#fff}

/* ── Phone header: log-in icon + picker next to the menu button ── */
.bl-mob{display:none;align-items:center;gap:8px;margin-inline-start:auto}
.bl-login{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 auto;
  border:1px solid rgba(11,18,48,.14);border-radius:12px;background:#fff;color:#0B1230;text-decoration:none}
.bl-login:hover{color:#4B6BFF;border-color:#4B6BFF}
.bl-login .bl-ico{width:21px;height:21px}
.bl-switch.bl-switch-mob .bl-switch-btn{height:46px;padding:0 11px;border-radius:12px;border-width:1px;
  border-color:rgba(11,18,48,.14);color:#0B1230;gap:6px}
.bl-switch-mob .bl-ico{width:20px;height:20px}
.bl-switch-mob .bl-switch-cur{font-size:13px;font-weight:800;letter-spacing:.3px}
.bl-switch-mob .bl-caret{display:none}
@media (max-width:1080px){
  .bl-mob{display:flex;flex:0 0 auto}
  /* The menu button must never be pushed off screen, whatever the logo text says. */
  .bc-hdr .bc-burger{flex:0 0 auto}
  .bc-hdr .bc-logo{min-width:0;flex:0 1 auto;overflow:hidden}
  .bc-hdr .bc-word{min-width:0}
  .bc-hdr .bc-word b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:380px){
  .bc-hdr .bc-hdr-in{gap:8px}
  .bl-mob{gap:6px}
  .bl-login{width:42px;height:42px}
  .bl-switch.bl-switch-mob .bl-switch-btn{height:42px;padding:0 8px}
  .bl-switch-mob .bl-switch-cur{display:none}
}

/* Desktop widths just above the phone layout: the picker shrinks to its icon. */
@media (min-width:1081px) and (max-width:1240px){
  .bc-hdr .bc-hdr-in{gap:16px}
  .bl-switch-desk .bl-switch-cur{display:none}
  .bl-switch.bl-switch-desk .bl-switch-btn{padding:9px 11px}
}
/* Menus in the added languages are longer than in Arabic: keep the phone
   layout (menu button) up to 1320px so the header never overflows. */
@media (min-width:1081px) and (max-width:1320px){
  body.bl-ltr .bc-nav,body.bl-ltr .bc-cta,body.bl-rtl .bc-nav,body.bl-rtl .bc-cta{display:none}
  body.bl-ltr .bc-burger,body.bl-rtl .bc-burger{display:flex}
  body.bl-ltr .bl-mob,body.bl-rtl .bl-mob{display:flex;flex:0 0 auto}
  body.bl-ltr .bc-hdr-in,body.bl-rtl .bc-hdr-in{justify-content:space-between;gap:14px;min-height:66px}
}

/* Signed-in customers: the phone icon opens the account (never the log-out link). */
.bl-login.is-in{color:#4B6BFF;border-color:rgba(75,107,255,.45)}

/* Tight desktop header: the same menu and buttons with less air between them and
   the picker shown as its icon. English always uses it (its menu already fills the
   row, so the picker would otherwise push everything into the menu button);
   front.js adds "bl-tight" in any other language whose row does not fit.
   The menu-link rule carries ".bc-hdr" on purpose: the theme's en.css loads after
   this file and sets `body.lang-en .bc-nav-a{padding-inline:11px}` from 1240px up;
   with equal weight the later file won, the row stayed 18px too wide and the
   whole English menu fell back to the menu button (1.1.1 on the live site). */
@media (min-width:1081px){
  body.bl-tight .bc-hdr .bc-hdr-in,body.lang-en .bc-hdr .bc-hdr-in{gap:18px}
  body.bl-tight .bc-hdr .bc-nav-a,body.lang-en .bc-hdr .bc-nav-a{padding-inline:8px}
  body.bl-tight .bc-cta,body.lang-en .bc-cta{gap:8px}
  body.bl-tight .bc-cta .bc-btn,body.lang-en .bc-cta .bc-btn{padding-inline:15px}
  body.bl-tight .bl-switch-desk .bl-switch-cur,body.lang-en .bl-switch-desk .bl-switch-cur{display:none}
  body.bl-tight .bl-switch.bl-switch-desk .bl-switch-btn,body.lang-en .bl-switch.bl-switch-desk .bl-switch-btn{padding:9px 11px}
}
/* English between the phone layout and 1240px: even the tight row does not fit
   (without this plugin the theme's row overflows the page there), so the menu
   button takes over, as on a phone. */
@media (min-width:1081px) and (max-width:1239px){
  body.lang-en .bc-nav,body.lang-en .bc-cta{display:none}
  body.lang-en .bc-burger{display:flex}
  body.lang-en .bl-mob{display:flex;flex:0 0 auto}
  body.lang-en .bc-hdr-in{justify-content:space-between;gap:14px;min-height:66px}
}

/* Set by front.js when the desktop header still does not fit (long translations). */
body.bl-compact .bc-nav,body.bl-compact .bc-cta{display:none}
body.bl-compact .bc-burger{display:flex}
body.bl-compact .bl-mob{display:flex;flex:0 0 auto}
body.bl-compact .bc-hdr-in{justify-content:space-between;gap:14px;min-height:66px}

/* Left-to-right languages: the theme's "forward" arrows point left (right-to-left). */
body.bl-ltr .btn svg:has(path[d="M19 12H5M11 18l-6-6 6-6"]){transform:scaleX(-1)}

/* ── Phone drawer: log-in, sign-up and languages first ── */
.bl-drawer-top{display:flex;flex-direction:column;gap:16px;padding:4px 0 20px;margin-bottom:8px;
  border-bottom:1px solid rgba(11,18,48,.09)}
.bl-drawer-top .bc-drawer-cta{margin-top:0;padding-top:0;border-top:0}
.bl-langs{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.bl-langs-t{display:inline-flex;color:#4B6BFF;margin-inline-end:2px}
.bl-langs-t .bl-ico{width:20px;height:20px}
.bl-langs-a{padding:8px 13px;border-radius:999px;background:#f2f5ff;font-size:14.5px;font-weight:600;
  color:#3d4a75;text-decoration:none;line-height:1.4}
.bl-langs-a.is-on{background:#4B6BFF;color:#fff}

/* ── Wide diagrams: readable cards on phones ── */
.bl-cards{display:none}
@media (max-width:640px){
  svg.bl-wide{display:none !important}
  .bl-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
  .bl-card{background:#eef1fb;border-radius:14px;padding:14px 10px;text-align:center;
    display:flex;flex-direction:column;justify-content:center;gap:5px}
  .bl-card-t{font-size:16px;font-weight:800;color:#0B1230;line-height:1.35}
  .bl-card-v{font-size:15px;font-weight:700;color:#4a5578;line-height:1.4;unicode-bidi:plaintext}
  .bl-card-c{font-size:13px;color:#6b7699;line-height:1.5}
  .bl-card-brand{grid-column:1/-1;background:linear-gradient(135deg,#4B6BFF,#7C5BFF);padding:18px 14px}
  .bl-card-brand .bl-card-t{color:#fff;font-size:17px}
  .bl-card-brand .bl-card-v{color:#fff;font-size:28px;font-weight:900}
  .bl-card-brand .bl-card-c{color:rgba(255,255,255,.88)}
}