/*
 * The storefront's header and footer (sii-storefront.css) on the shared pages that otherwise
 * carry the Lxera shell: checkout, receipts, error pages. Every rule is scoped to .sf-top or
 * .sf-foot, because those pages bring their own body, .wrap and .btn styles.
 */

.sf-top { background: #fff; border-bottom: 1px solid var(--lx-border-hairline, #ECEDF1); position: sticky; top: 0; z-index: 80; font-family: var(--lx-font-ar); }
.sf-top .wrap, .sf-foot .wrap { max-width: var(--lx-maxw, 1240px); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.sf-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.sf-top img { height: 44px; width: auto; display: block; }
.sf-top nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.sf-top nav > a { text-decoration: none; color: var(--lx-label, #3C4553); white-space: nowrap; }
.sf-top nav > a:hover { color: var(--lx-primary); }
.sf-top .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-family: inherit; font-weight: 700; font-size: 15px; border-radius: 10px; padding: 11px 22px; white-space: nowrap; }
.sf-top .btn-primary { background: var(--lx-primary); color: #fff !important; }
.sf-top .btn-primary:hover { background: var(--lx-primary-hover, var(--lx-primary)); }

.sf-foot { background: var(--lx-dark-surface); color: rgba(255, 255, 255, .82); font-family: var(--lx-font-ar); }
.sf-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-top: 30px; padding-bottom: 30px; font-size: 14px; }
.sf-foot img { height: 38px; width: auto; display: block; }
.sf-foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.sf-foot a { text-decoration: none; color: rgba(255, 255, 255, .82); }
.sf-foot a:hover { color: #fff; }

@media (max-width: 640px) {
  .sf-top nav .hide-sm { display: none; }
  .sf-top nav { gap: 14px; font-size: 14px; }
  .sf-top .btn { padding: 9px 14px; font-size: 14px; }
  .sf-top img { height: 36px; }
}
/* Institute header and footer shared with the shell pages. */
.sf-top { position:relative; top:auto; z-index:80; background:#FFFDEF; border:0; font-family:var(--lx-font-ar); }
.sf-top .wrap, .sf-foot .wrap { max-width:1180px; margin:0 auto; padding-inline:20px; box-sizing:border-box; }
.sf-top .sf-top__row { min-height:122px; padding-top:20px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.sf-top__actions { display:flex; align-items:center; gap:20px; }
.sf-top__actions--end { justify-content:flex-end; }
.sf-top__button { display:inline-flex; align-items:center; justify-content:center; background:#005A2F; color:#fff !important; font-size:16px; line-height:16px; font-weight:700; padding:12px 24px; white-space:nowrap; text-decoration:none; border-radius:0; }
.sf-top__button:hover { background:#00432A; color:#fff !important; }
.sf-top__logo img { display:block; height:82px; width:auto; }
.sf-top .sf-top__nav { display:flex; justify-content:space-between; align-items:center; max-width:1201px; margin:0 auto; padding:10px 20px 30px; box-sizing:content-box; }
.sf-top .sf-top__nav > a, .sf-top__dropdown > a, .sf-top__dropdown > button { display:block; padding:13px 0; line-height:20px; color:#313131; font:500 20px var(--lx-font-ar); text-decoration:none; background:none; border:0; cursor:pointer; white-space:nowrap; }
.sf-top__nav a:hover, .sf-top__dropdown > button:hover { color:#005E32; }
.sf-top__dropdown { position:relative; }
.sf-top__submenu { display:none; position:absolute; top:100%; inset-inline-start:0; z-index:90; min-width:290px; background:#FFFDEF; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:8px 0; }
.sf-top__dropdown:hover .sf-top__submenu, .sf-top__dropdown:focus-within .sf-top__submenu { display:block; }
.sf-top__submenu a { display:block; color:#313131; text-decoration:none; font-size:16px; padding:10px 16px; white-space:nowrap; }
.sf-top__toggle, .sf-top .sf-top__mobile { display:none; }
.sf-top__mobile[hidden] { display:none !important; }
.sf-foot { background:#292929; color:#fff; font-family:var(--lx-font-ar); }
.sf-foot .wrap { display:block; max-width:1251px; padding-top:41px; padding-bottom:40px; font-size:18px; }
.sf-foot__grid { display:grid; grid-template-columns:251fr 285fr 184fr 381fr; gap:30px; }
.sf-foot h2 { color:#fff; font:400 20px/26px var(--lx-font-heading); letter-spacing:-1px; margin:0 0 20px; }
.sf-foot__grid section > a { display:block; margin:0; padding:5px 0; color:#fff; font:400 18px/20px var(--lx-font-heading); text-decoration:none; }
.sf-foot a:hover { color:#fff; text-decoration:underline; }
.sf-foot__grid section:last-child { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.sf-foot__grid section:last-child h2 { flex-basis:100%; margin-bottom:8px; }
.sf-foot__grid img { display:block; width:181px; max-width:100%; height:auto; }
.sf-foot__social { display:flex; gap:10px; }
.sf-foot__social a { width:30px; height:30px; background:#fff; border-radius:50%; display:grid; place-items:center; color:#69727D; }
.sf-foot__social svg { width:15px; height:15px; fill:currentColor; }
.sf-foot__copyright { text-align:center; margin:30px 0 0; font:300 18px/18px var(--lx-font-heading); }
.sf-foot__copyright a { color:#fff; text-decoration:none; }
.sf-foot__divider { display:none; }
@media (max-width:1024px) {
 .sf-top .sf-top__row { display:flex; justify-content:space-between; min-height:76px; padding-top:12px; padding-bottom:12px; }
 .sf-top__logo img { height:64px; }
 .sf-top__actions, .sf-top__nav { display:none !important; }
 .sf-top__logo { order:0; }
 .sf-top__toggle { display:block; order:1; background:none; border:0; color:#005A2F; font:700 28px var(--lx-font-ar); cursor:pointer; }
 .sf-top__mobile:not([hidden]) { display:block; background:#FFFDEF; padding:0 20px 20px; }
 .sf-top__mobile a, .sf-top__mobile summary { display:block; padding:12px 8px; color:#33373D; text-decoration:none; font-size:17px; cursor:pointer; border-bottom:1px solid rgba(0,0,0,.08); }
 .sf-top__mobile details a { padding-inline-start:24px; }
 .sf-foot__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
 .sf-foot__grid { grid-template-columns:1fr; }
 .sf-foot .wrap { padding-top:42px; }
}
/* The lxera pages' decorative blobs have no place on the institute's plain cream look. */
[style*="border-radius:46% 54% 62% 38%"], [style*="border-radius:58% 42% 45% 55%"] { display:none !important; }

/* The signed-in account chip: avatar, name and the panel's own menu (see sii_storefront_header). */
.sf-account .sf-account__chip { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #E3E6EC; border-radius:999px; padding:4px 14px 4px 6px; font:600 15px var(--lx-font-ar); color:#1F2A24; cursor:pointer; }
.sf-account .sf-account__chip:hover { border-color:var(--lx-primary); }
.sf-account__chip img { width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; }
.sf-account__name { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sf-account .sf-account__menu { inset-inline-start:0; min-width:220px; border-radius:14px; padding:8px; background:#fff; border:1px solid #ECEDF1; }
.sf-account__menu a { border-radius:10px; font-size:15px; padding:10px 14px; color:#1F2A24; }
.sf-account__menu a:hover { background:#F5F6F8; color:var(--lx-primary); }
.sf-account__sep { height:1px; background:#ECEDF1; margin:6px 4px; }
.sf-account__menu a.sf-account__out { color:#C0392B; }