/* ═══ Nav bar / dropdowns / membership tier — delete this block to revert ═══ */

/* Bar */
.sky-mega-menu{border-radius:14px;background:rgba(255,255,255,.93)!important;
 box-shadow:0 6px 24px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.07)!important;
 border:1px solid rgba(255,255,255,.7)}
.sky-mega-menu,.sky-mega-menu *{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
 -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.sky-mega-menu input,.sky-mega-menu textarea,.sky-mega-menu select{
 -webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-touch-callout:default}
.sky-mega-menu li{position:relative;border-color:rgba(0,0,0,.06)!important}
.sky-mega-menu>ul>li:first-child,.sky-mega-menu>ul>li:first-child>a{border-radius:13px 0 0 13px}
.sky-mega-menu>ul>li:last-child,.sky-mega-menu>ul>li:last-child>a{border-radius:0 13px 13px 0;border-right-width:0}
.sky-mega-menu li a{border-radius:9px;transition:background .2s,color .2s}
.sky-mega-menu li:hover>a{background:#2da5da!important;color:#fff!important}
.sky-mega-menu li:hover>a .fa{color:#fff}
.sky-mega-menu li a:focus-visible{outline:2px solid #2da5da;outline-offset:-2px}

/* Panel. No overflow:hidden — it would clip the :after hover-bridge and the
   menu would snap shut mid-gap. The theme's bridge is only 80% wide and
   left-anchored, which leaves the trigger unbridged on wide panels, so widen it. */
.sky-mega-menu li>div{border-radius:14px!important;border:1px solid rgba(0,0,0,.07);
 background:rgba(255,255,255,.97)!important;padding:6px 0;
 box-shadow:0 12px 32px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08)!important}
.sky-mega-menu li>div:after{left:0!important;right:0!important;width:auto!important;height:14px!important;z-index:2}
.sky-mega-menu li>div:before{z-index:3}
.sky-mega-menu li>div>ul,.sky-mega-menu li>div>form{border-radius:13px;overflow:hidden;display:block}
/* Closed panels: the theme only hides them with opacity:0 + left:-9999px, so they still take up
   height below the menu — on phones that is the long white area you can scroll into at the end of every page.
   Closed = no height, not visible, not clickable. Opening on hover/tap works as before. */
.sky-mega-menu li:not(:hover)>div{visibility:hidden;max-height:0!important;overflow:hidden!important;padding-top:0!important;padding-bottom:0!important;border-width:0!important;pointer-events:none}
.sky-mega-menu .grid-container3{width:252px!important;max-width:252px}
/* Balance/date rows are the longest and vary per user, so size to content
   where supported instead of guessing a fixed width. */
@supports (width:max-content){.sky-mega-menu .grid-container3{
 width:max-content!important;min-width:252px;max-width:320px}}
.sky-mega-menu .grid-container6{width:420px!important;max-width:420px;padding:0}

/* Rows */
.sky-mega-menu li>div li{border:0!important;padding:1px 6px!important;line-height:normal!important;
 display:block!important;float:none!important;width:auto!important}
.sky-mega-menu li>div li a{display:flex!important;align-items:center;gap:10px;border-radius:8px;
 padding:9px 12px!important;font-size:13px;line-height:1.3;white-space:nowrap;overflow:visible;height:auto!important}
.sky-mega-menu li>div li a .fa{flex:0 0 16px;margin:0!important;text-align:center;color:#8b93a0}
.sky-mega-menu li>div li:hover>a{background:rgba(45,165,218,.12)!important;color:#12708f!important}
.sky-mega-menu li>div li:hover>a .fa{color:#2da5da}

/* Identity block under the avatar: name, e-mail, balance capsule, join date */
.sky-mega-menu .id-name{display:block;margin:12px 0 1px;font-size:14px;font-weight:700;
 color:#2b3140;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sky-mega-menu .id-mail{display:block;font-size:11px;color:#98a0ad;line-height:1.3;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sky-mega-menu .id-bal{display:inline-block!important;margin-top:12px;padding:7px 16px;
 border-radius:999px;background:rgba(45,165,218,.10);color:#12708f!important;font-size:15px;
 font-weight:800;letter-spacing:-.2px;line-height:1.3;text-decoration:none;white-space:nowrap}
.sky-mega-menu .id-bal:hover{background:rgba(45,165,218,.18)!important}
.sky-mega-menu .id-bal small{font-size:10px;font-weight:700;opacity:.75;margin-left:3px}
.sky-mega-menu .id-since{display:block;margin-top:9px;font-size:10.5px;color:#a8afba}

/* Group headings inside the profile dropdown */
.sky-mega-menu li.menu-group{padding:10px 18px 4px!important;font-size:9.5px;font-weight:900;
 letter-spacing:1.4px;text-transform:uppercase;color:#a0a8b4;pointer-events:none;
 border-top:1px solid rgba(0,0,0,.07)!important;margin-top:4px}
.sky-mega-menu li.menu-group:first-of-type{border-top:0!important;margin-top:0}
.sky-mega-menu li.menu-group:hover{background:none!important}

/* Support form. The e-mail sits in .row>.col and the textarea does not, so the
   theme's gutters made them different widths — neutralise them. */
.sky-mega-menu li>div form{width:100%}
.sky-mega-menu li>div form fieldset{padding:16px 18px;margin:0}
.sky-mega-menu li>div form .row{margin:0!important;padding:0!important;width:100%!important;
 display:block!important;margin-bottom:12px!important}
.sky-mega-menu li>div form .row>section,.sky-mega-menu li>div form .row>.col,
.sky-mega-menu li>div form>fieldset>section{margin:0 0 12px!important;padding:0!important;
 width:100%!important;max-width:100%!important;float:none!important;display:block!important}
.sky-mega-menu li>div form label.input,.sky-mega-menu li>div form label.textarea{display:block;width:100%}
.sky-mega-menu li>div form input,.sky-mega-menu li>div form textarea,.sky-mega-menu li>div form select{
 width:100%!important;max-width:100%!important;box-sizing:border-box;white-space:normal}
.sky-mega-menu li>div form textarea{min-height:96px;resize:vertical}
.sky-mega-menu li>div form .button,.sky-mega-menu li>div form button[type=submit]{
 width:100%;box-sizing:border-box;margin-top:4px}

/* Membership tier ring. .tier-ring is on an <a> for admins, and the theme's
   "li a{display:block}" outranks a plain class selector — hence the !important. */
.sky-mega-menu li.tier-head{text-align:center!important;padding:20px 18px 22px!important;
 border:0!important;margin-bottom:0;background:none!important}
.sky-mega-menu li.tier-head:hover{background:none!important}
.sky-mega-menu li .tier-ring,.sky-mega-menu li a.tier-ring{position:relative!important;
 display:inline-block!important;width:96px!important;height:96px!important;padding:4px!important;
 margin:0 auto!important;border-radius:50%!important;line-height:0!important;
 background:none!important;overflow:visible!important;text-decoration:none}
.sky-mega-menu li a.tier-ring:hover{background:none!important}
.sky-mega-menu .tier-ring img{display:block!important;width:88px!important;height:88px!important;
 max-width:88px!important;border-radius:50%!important;border:2px solid #fff;background:#fff;
 position:relative;z-index:1;margin:0!important;box-sizing:border-box}
.sky-mega-menu .tier-ring:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;z-index:0}
.sky-mega-menu .tier-word{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
 display:inline-block;padding:3px 12px;border-radius:999px;font-size:9.5px;font-weight:900;
 letter-spacing:1.4px;line-height:1.5;color:#fff;white-space:nowrap;z-index:2;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.sky-mega-menu .tier-bronze:before{background:conic-gradient(#e8b784,#8a4f1d,#d99b6a,#8a4f1d,#e8b784)}
.sky-mega-menu .tier-silver:before{background:conic-gradient(#f2f4f6,#79828a,#cfd4d9,#79828a,#f2f4f6)}
.sky-mega-menu .tier-gold:before{background:conic-gradient(#ffe9a8,#b8890c,#f5cf5c,#b8890c,#ffe9a8)}
.sky-mega-menu .tier-vip:before{background:conic-gradient(#e0c9ff,#6a35bd,#b78ef0,#6a35bd,#e0c9ff)}
.sky-mega-menu .tier-bronze .tier-word{background:#8a4f1d}
.sky-mega-menu .tier-silver .tier-word{background:#79828a}
.sky-mega-menu .tier-gold .tier-word{background:#b8890c}
.sky-mega-menu .tier-vip .tier-word{background:#6a35bd}
@media (prefers-reduced-motion:no-preference){.sky-mega-menu .tier-vip:before{animation:tierSpin 6s linear infinite}}
@keyframes tierSpin{to{transform:rotate(360deg)}}
@supports not (background:conic-gradient(#000,#fff)){
 .sky-mega-menu .tier-bronze:before{background:#8a4f1d}
 .sky-mega-menu .tier-silver:before{background:#79828a}
 .sky-mega-menu .tier-gold:before{background:#b8890c}
 .sky-mega-menu .tier-vip:before{background:#6a35bd}}

/* ─── Logged-out menu, PHONES ONLY ──────────────────────────────────────
   The theme's collapse-to-icons variant hides labels below 767px (it sets
   font-size:0 on each item). Guests have only Home / Support / Login, which
   fit comfortably, so they keep their labels instead.

   Desktop is deliberately untouched: above 767px the theme's own rules apply
   exactly as before, because response-to-icons has no effect at that size
   either. Spreading three items across a full-width bar looks wrong on a
   large screen, so nothing here runs there.

   Note: <li> must stay position:relative or the dropdown panel, which is
   absolutely positioned inside it, anchors to the <ul> and the contact form
   opens under Home instead of Support. Items are matched by content rather
   than :nth-child because the list also holds hidden Register/Services items.
   ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width:767px){
 .sky-mega-menu-guest{display:flex;width:100%;padding:0;flex-wrap:nowrap}
 .sky-mega-menu-guest>li{position:relative;float:none;display:flex;
  flex:1 1 0;min-width:0;border-right:0;font-size:13px}
 .sky-mega-menu-guest>li>a{display:flex;align-items:center;gap:8px;
  white-space:nowrap;width:100%;padding:0 14px!important}
 .sky-mega-menu-guest>li>a>.fa{margin:0!important;font-size:14px}

 .sky-mega-menu-guest>li{order:2}
 .sky-mega-menu-guest>li:has(a[href="/"]){order:1;border-right:1px solid rgba(0,0,0,.07)}
 .sky-mega-menu-guest>li:has(a[href="/"])>a{justify-content:flex-start}
 .sky-mega-menu-guest>li:has(.fa-at){order:2;border-right:1px solid rgba(0,0,0,.07)}
 .sky-mega-menu-guest>li:has(.fa-at)>a{justify-content:center}
 .sky-mega-menu-guest>li:has(a[href*="signin"]){order:3}
 .sky-mega-menu-guest>li:has(a[href*="signin"])>a{justify-content:flex-end}

 .sky-mega-menu-guest li>div{width:auto!important;
  min-width:min(300px,calc(100vw - 16px));max-width:calc(100vw - 16px)!important}
 .sky-mega-menu-guest .grid-container6{min-width:min(320px,calc(100vw - 16px))!important}
}
@media screen and (max-width:400px){
 .sky-mega-menu-guest>li{font-size:12px}
 .sky-mega-menu-guest>li>a{padding:0 10px!important;gap:6px}
}

/* Phones: the theme's fixed panel widths overflow a narrow screen */
@media screen and (max-width:767px){
 /*.sky-mega-menu-response-to-icons .right li>div,
 .sky-mega-menu-response-to-icons .right li:hover>div{left:auto!important;right:4px!important}*/
 /* only the open panel moves on screen — closed ones stayed invisible over the page (and caught taps) */
 .sky-mega-menu-response-to-icons .right li:hover>div{left:auto!important;right:4px!important}
 .sky-mega-menu .grid-container2,.sky-mega-menu .grid-container3{
  width:auto!important;min-width:250px;max-width:calc(100vw - 16px)!important}
 .sky-mega-menu .grid-container6{
  width:auto!important;min-width:min(320px,calc(100vw - 16px));max-width:calc(100vw - 16px)!important}
 .sky-mega-menu li>div li a{overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:480px){
 .sky-mega-menu li .tier-ring,.sky-mega-menu li a.tier-ring{width:80px!important;height:80px!important}
 .sky-mega-menu .tier-ring img{width:74px!important;height:74px!important;max-width:74px!important}
 .sky-mega-menu li.tier-head{padding:14px 10px 20px!important}
}

/* ── "More tools" submenu in the admin part of the profile menu ──
   Desktop: a panel that opens to the left of the entry on hover. Phones: opens under the entry on tap. */
.sky-mega-menu li>div>ul.adm-host{overflow:visible}
.sky-mega-menu li.adm-sub{position:relative}
.sky-mega-menu li.adm-sub .adm-caret{margin-left:auto!important;flex:0 0 auto!important;font-size:11px;color:#b0b6c0}
.sky-mega-menu ul.adm-fly{display:none;position:absolute;top:-7px;right:100%;z-index:1002;min-width:230px;margin:0;padding:6px 0;list-style:none;
 background:rgba(255,255,255,.98);border:1px solid rgba(0,0,0,.07);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08)}
.sky-mega-menu li.adm-sub:hover>ul.adm-fly,.sky-mega-menu li.adm-sub.open>ul.adm-fly{display:block}
.sky-mega-menu ul.adm-fly li a{white-space:nowrap}
@media screen and (max-width:767px){
 .sky-mega-menu ul.adm-fly{position:static;min-width:0;padding:0 0 4px 16px;background:none;border:0;border-radius:0;box-shadow:none}
 .sky-mega-menu li.adm-sub:hover>ul.adm-fly{display:none}
 .sky-mega-menu li.adm-sub.open>ul.adm-fly{display:block}
 .sky-mega-menu li.adm-sub .adm-caret{transform:rotate(-90deg);transition:transform .15s}
 .sky-mega-menu li.adm-sub.open .adm-caret{transform:rotate(90deg)}
}