/*
 * Header "Countries" mega menu (templates/default/megamenu_countries.php),
 * loaded site-wide from header.php. Uses the site's self-hosted Poppins.
 * Navy #14183A on neutral greys; no pink here (pink is for primary buttons).
 */

/* ------------------------------------------------------------------ */
/* Desktop dropdown                                                    */
/* ------------------------------------------------------------------ */
/* UIkit stretches the dropdown to the navbar; the visible panel is
   centred inside it, so the dropdown itself is see-through. */
.uk-navbar-dropdown.ss-mega {
   /* UIkit positions the dropdown absolutely, which also anchors ::before.
      The see-through wrapper is stretched to the navbar width, so it lets
      clicks through: only the visible panel (and the bridge) count as
      "inside", and a click beside the panel reaches the dimmer and closes
      the menu. */
   padding: 0;
   background: transparent;
   box-shadow: none;
   max-height: none;
   overflow: visible;
   pointer-events: none;
}

/* Invisible bridge over the gap between the nav and the panel, so a
   pointer moving down from "Countries" never leaves the dropdown. */
.uk-navbar-dropdown.ss-mega::before {
   content: "";
   position: absolute;
   top: -4px;
   left: 50%;
   width: min(1000px, 100%);
   transform: translateX(-50%);
   height: 30px;
   pointer-events: auto;
}

.uk-navbar-dropdown.ss-mega .ss-mega-panel {
   pointer-events: auto;
}

.ss-mega-panel {
   --ss-rail: 236px;
   display: flex;
   box-sizing: border-box;
   width: 100%;
   max-width: 1000px;
   /* Floats about 14px below the header bar; the see-through dropdown around it
      (and the ::before strip) keeps that gap part of the menu. */
   margin: 24px auto 0;
   max-height: calc(100vh - 134px);
   /* The rail's tint and divider are painted on the panel itself, so they
      always run the full height and follow all four rounded corners. */
   background: linear-gradient(to right,
         #F5F7FA 0, #F5F7FA var(--ss-rail),
         #E4E8F0 var(--ss-rail), #E4E8F0 calc(var(--ss-rail) + 1px),
         #fff calc(var(--ss-rail) + 1px));
   border: 1px solid rgba(20, 24, 58, 0.10);
   border-radius: 20px;
   box-shadow: 0 24px 60px rgba(20, 24, 58, 0.18), 0 4px 12px rgba(20, 24, 58, 0.08);
   overflow: hidden;
   /* Safari: keep the rounded clip while UIkit animates the dropdown. */
   isolation: isolate;
   -webkit-mask-image: -webkit-radial-gradient(white, black);
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
   color: #14183A;
   text-align: left;
}

.ss-mega-panel *,
.ss-mega-panel *::before,
.ss-mega-panel *::after {
   box-sizing: border-box;
}

/* Left rail */
.ss-mega-rail {
   flex: 0 0 calc(var(--ss-rail) + 1px);
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-height: 0;
   padding: 16px 13px 16px 12px;
   overflow-y: auto;
   scrollbar-width: thin;
}

.ss-mega-tab,
.ss-mega-rail-link {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   margin: 0;
   padding: 9px 12px;
   border: 0;
   border-radius: 12px;
   background: transparent;
   font: inherit;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.3;
   color: #14183A;
   text-align: left;
   text-decoration: none;
   cursor: pointer;
   transition: background-color .15s ease, color .15s ease;
}

.ss-mega-tab i,
.ss-mega-rail-link i {
   width: 16px;
   color: #5B6178;
   font-size: 13px;
}

.ss-mega-tab:hover,
.ss-mega-rail-link:hover {
   background: #EBEEF4;
   color: #14183A;
   text-decoration: none;
}

.ss-mega-tab[aria-selected="true"] {
   background: #fff;
   color: #14183A;
   font-weight: 600;
   box-shadow: 0 2px 8px rgba(20, 24, 58, 0.08);
}

.ss-mega-tab:focus-visible,
.ss-mega-rail-link:focus-visible {
   outline: 2px solid #14183A;
   outline-offset: 1px;
}

.ss-mega-count {
   margin-left: auto;
   min-width: 26px;
   padding: 1px 7px;
   border-radius: 999px;
   background: #F0F0F0;
   font-size: 11px;
   font-weight: 600;
   color: #6B6B6B;
   text-align: center;
}

.ss-mega-tab[aria-selected="true"] .ss-mega-count {
   background: #14183A;
   color: #fff;
}

.ss-mega-rail-link {
   margin-top: auto;
   border-top: 1px solid #E4E8F0;
   border-radius: 0 0 12px 12px;
   padding-top: 14px;
}

.ss-mega-rail-link span {
   white-space: nowrap;
}

/* While searching, no continent reads as selected. */
.ss-mega-panel.is-searching .ss-mega-tab[aria-selected="true"] {
   background: transparent;
   box-shadow: none;
   color: #14183A;
   font-weight: 500;
}

.ss-mega-panel.is-searching .ss-mega-tab[aria-selected="true"] .ss-mega-count {
   background: #F0F0F0;
   color: #6B6B6B;
}

.ss-mega-rail-arrow {
   margin-left: auto;
   font-size: 11px !important;
}

/* Main area */
.ss-mega-main {
   flex: 1 1 auto;
   min-width: 0;
   padding: 16px 22px 18px;
   overflow-y: auto;
}

.ss-mega-search {
   position: relative;
   max-width: 360px;
   margin-bottom: 10px;
}

.ss-mega-search i {
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: #8A8A8A;
   font-size: 13px;
   pointer-events: none;
}

.ss-mega-search-input {
   width: 100%;
   height: 38px;
   padding: 0 14px 0 38px;
   border: 1px solid #E4E8F0;
   border-radius: 20px;
   background: #FAFAFA;
   font: inherit;
   font-size: 14px;
   color: #14183A;
   outline: none;
   transition: border-color .15s ease, background-color .15s ease;
}

.ss-mega-search-input:focus {
   border-color: #9AA1B5;
   background: #fff;
}

/* All panes sit in the same grid cell; the cell takes the tallest pane's
   height, so switching tabs never resizes the panel. Inactive panes keep
   their box but are invisible, so they can't be focused or clicked. */
.ss-mega-stack {
   position: relative;
   display: grid;
}

.ss-mega-stack > .ss-mega-pane {
   grid-area: 1 / 1;
   min-width: 0;
}

.ss-mega-pane.is-off {
   visibility: hidden;
}

/* Search results never stretch the panel: they fill the fixed cell and
   scroll inside it when there are more matches than fit. */
.ss-mega-stack > .ss-mega-results {
   position: absolute;
   inset: 0;
   overflow-y: auto;
   background: #fff;
}

.ss-mega-stack > .ss-mega-results[hidden] {
   display: none;
}

.ss-mega-pane-title {
   margin: 0 0 6px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.2px;
   color: #6B6B6B;
}

/* Country list: 3 columns, 4 for the bigger continents; names wrap. */
.ss-mega-list {
   columns: 3;
   column-gap: 20px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.ss-mega-list.is-long {
   columns: 4;
}

.ss-mega-list > li {
   break-inside: avoid;
   margin: 0 0 2px;
}

.ss-mega-list a {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 6px 10px;
   border-radius: 999px;
   font-size: 13.5px;
   line-height: 1.3;
   color: #14183A;
   text-decoration: none;
   transition: background-color .15s ease, color .15s ease;
}

.ss-mega-list a:hover,
.ss-mega-list a:focus-visible {
   background: #EEF1F6;
   color: #14183A;
   text-decoration: none;
   outline: none;
}

.ss-mega-list img {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.ss-mega-empty {
   margin: 6px 0 0;
   font-size: 14px;
   color: #6B6B6B;
}

/* Popular tiles */
.ss-mega-popular {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 14px 8px;
   list-style: none;
   margin: 0;
   padding: 2px 0 0;
}

.ss-mega-popular li {
   margin: 0;
}

.ss-mega-popular a {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 4px;
   border-radius: 14px;
   text-align: center;
   color: #14183A;
   text-decoration: none;
   transition: background-color .15s ease, color .15s ease;
}

.ss-mega-popular a:hover,
.ss-mega-popular a:focus-visible {
   background: #EEF1F6;
   color: #14183A;
   text-decoration: none;
   outline: none;
}

.ss-mega-popular-flag {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   overflow: hidden;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.ss-mega-popular-flag img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.ss-mega-popular-name {
   font-size: 12.5px;
   font-weight: 500;
   line-height: 1.25;
}

@media (max-width: 1100px) {
   .ss-mega-panel {
      --ss-rail: 216px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .ss-mega-tab,
   .ss-mega-rail-link,
   .ss-mega-list a,
   .ss-mega-popular a,
   .ss-mega-search-input {
      transition: none;
   }
}

/* ------------------------------------------------------------------ */
/* Compact header dropdowns in the same family (Support, currency).    */
/* UIkit positions them absolutely; the top margin floats them about   */
/* 15px below the header line, like the Countries panel.               */
/* ------------------------------------------------------------------ */
.uk-navbar-dropdown.ss-menu {
   /* See-through wrapper: the visible card is .ss-menu-panel, whose top
      margin floats it about 15px below the header line (UIkit ignores
      margins on the dropdown itself when positioning it). Clicks pass
      through the wrapper so only the card counts as inside. */
   padding: 0;
   background: transparent;
   box-shadow: none;
   max-height: none;
   overflow: visible;
   pointer-events: none;
}

.uk-navbar-dropdown.ss-menu .ss-menu-panel {
   pointer-events: auto;
}

.ss-menu-panel {
   box-sizing: border-box;
   margin-top: 24px;
   padding: 18px;
   background: #fff;
   border: 1px solid rgba(20, 24, 58, 0.10);
   border-radius: 20px;
   box-shadow: 0 24px 60px rgba(20, 24, 58, 0.18), 0 4px 12px rgba(20, 24, 58, 0.08);
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
   color: #14183A;
}

/* Invisible bridge over the gap, so hover menus stay open on the way down. */
.uk-navbar-dropdown.ss-menu::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 26px;
   pointer-events: auto;
}

.ss-menu-support {
   width: 760px;
   max-width: calc(100vw - 32px);
}

.ss-menu-cols {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
}

.ss-menu-group {
   margin: 2px 10px 8px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #5B6178;
}

.ss-menu-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.ss-menu-list > li {
   margin: 0;
}

.ss-menu-list a {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 7px 10px;
   border-radius: 12px;
   color: #14183A;
   text-decoration: none;
   transition: background-color .15s ease;
}

.ss-menu-list a:hover,
.ss-menu-list a:focus-visible {
   background: #F3F5F9;
   color: #14183A;
   text-decoration: none;
   outline: none;
}

.ss-menu-icon {
   flex: 0 0 32px;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 9px;
   background: #F3F5F9;
   border: 1px solid #E4E8F0;
   color: #5B6178;
   font-size: 14px;
}

.ss-menu-list a:hover .ss-menu-icon {
   background: #fff;
}

.ss-menu-text {
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.ss-menu-label {
   font-size: 14px;
   font-weight: 600;
   line-height: 1.25;
}

.ss-menu-desc {
   font-size: 12px;
   line-height: 1.3;
   color: #6B7085;
}

/* Currency list */
.ss-menu-currency {
   width: 280px;
}

.ss-menu-currency .ss-menu-panel {
   padding: 10px;
}

.ss-menu-currency .uk-navbar-dropdown-nav {
   margin: 0;
   padding: 0;
}

.ss-menu-currency .uk-navbar-dropdown-nav > li > a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
   border-radius: 10px;
   font-size: 14px;
   color: #14183A;
   white-space: nowrap;
}

.ss-menu-currency .uk-navbar-dropdown-nav > li > a:hover {
   background: #F3F5F9;
   color: #14183A;
}

@media (prefers-reduced-motion: reduce) {
   .ss-menu-list a {
      transition: none;
   }
}

/* ------------------------------------------------------------------ */
/* Page dimmer while the menu is open. body::after sits under the      */
/* header (z-index 1010), so the bar and the panel stay bright; a      */
/* click on it lands on <body>, which UIkit treats as an outside click */
/* and closes the menu.                                                */
/* ------------------------------------------------------------------ */
body::after {
   content: "";
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
   background: rgba(20, 24, 58, 0.28);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity .2s ease, visibility 0s linear .2s;
}

/* No accidental text selection on the dimmed page while a menu is open. */
body.ss-mega-open {
   -webkit-user-select: none;
   user-select: none;
}

body.ss-mega-open .ss-mega-panel,
body.ss-mega-open .ss-menu-panel {
   -webkit-user-select: text;
   user-select: text;
}

body.ss-mega-open::after {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   transition: opacity .2s ease, visibility 0s linear 0s;
}

/* The header needs a stacking position to sit above the dimmer on pages
   where it isn't sticky (the basket). */
body.ss-mega-open header.uk-box-shadow-small:not(.uk-sticky) {
   position: relative;
}

/* v2 homepage, unscrolled: the header stays see-through, so the dimmer
   behind it darkens the sky evenly while the logo, nav and panel (in the
   header, above the dimmer) stay at full brightness. */

@media (prefers-reduced-motion: reduce) {
   body::after,
   body.ss-mega-open::after {
      transition: none;
   }
}

/* ------------------------------------------------------------------ */
/* Offcanvas accordion (mobile)                                        */
/* ------------------------------------------------------------------ */
.ss-mega-acc-wrap > .ss-mega-acc {
   margin: 0;
}

.ss-mega-acc .uk-nav-sub {
   padding: 4px 0 8px 10px;
   font-size: 0.85em !important;
}

.ss-mega-acc .uk-nav-sub a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 6px 0;
}

.ss-mega-acc .uk-nav-sub img {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   object-fit: cover;
}

/* Only short viewports scroll; keep the scrollbar thin and light. */
.ss-mega-main,
.ss-mega-rail,
.ss-mega-results {
   scrollbar-width: thin;
   scrollbar-color: #D5DAE4 transparent;
}

.ss-mega-main::-webkit-scrollbar,
.ss-mega-rail::-webkit-scrollbar,
.ss-mega-results::-webkit-scrollbar {
   width: 6px;
}

.ss-mega-main::-webkit-scrollbar-track,
.ss-mega-rail::-webkit-scrollbar-track,
.ss-mega-results::-webkit-scrollbar-track {
   background: transparent;
}

.ss-mega-main::-webkit-scrollbar-thumb,
.ss-mega-rail::-webkit-scrollbar-thumb,
.ss-mega-results::-webkit-scrollbar-thumb {
   background: #D5DAE4;
   border-radius: 3px;
}

/* ------------------------------------------------------------------ */
/* "Use my location" messages (window.ssLocationToast in header.php):  */
/* a small white toast at the bottom centre, separate from UIkit's     */
/* notifications so nothing else changes.                              */
/* ------------------------------------------------------------------ */
.ss-loc-toast {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 24px;
   width: max-content;
   margin: 0 auto;
   z-index: 1100;
   display: flex;
   align-items: center;
   gap: 10px;
   box-sizing: border-box;
   max-width: calc(100vw - 32px);
   padding: 12px 16px;
   background: #fff;
   border: 1px solid rgba(20, 24, 58, 0.10);
   border-radius: 14px;
   box-shadow: 0 12px 32px rgba(20, 24, 58, 0.18), 0 2px 6px rgba(20, 24, 58, 0.08);
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
   font-size: 14px;
   line-height: 1.4;
   color: #14183A;
   opacity: 0;
   transform: translateY(12px);
   transition: opacity .2s ease, transform .2s ease;
}

.ss-loc-toast.is-visible {
   opacity: 1;
   transform: none;
}

.ss-loc-toast i {
   flex: 0 0 auto;
   color: #5B6178;
}

.ss-loc-toast a {
   flex: 0 0 auto;
   font-weight: 600;
   color: #14183A;
   text-decoration: underline;
   text-underline-offset: 2px;
   white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
   .ss-loc-toast {
      transition: none;
   }
}