/**
 * Celerate SSO Login Block – Styles
 *
 * Two scoped styles:
 *   .celerate-sso-style-classic  = Original CYM design
 *   .celerate-sso-style-modern   = New ARANS design
 */

/* ========================================================================
   SHARED — Base wrapper (both styles)
   ======================================================================== */
.celerate-sso-block-wrapper {
  width: auto;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.celerate-sso-block-wrapper .celerate-sso-chevron {
  font-size: 1.3em;
  line-height: 1;
  margin-left: 4px;
}

.celerate-sso-block-wrapper .dropdown-checkbox {
  display: none;
}

/* ========================================================================
   SHARED — Cart (both styles)
   ======================================================================== */
.celerate-sso-block-wrapper .viewcart {
  height: auto;
  width: auto;
  padding: 8px;
  line-height: 20px;
  display: inline-flex;
  align-items: flex-end;
  text-decoration: none;
}

.celerate-sso-block-wrapper .viewcart svg {
  width: 20px;
  height: 20px;
  fill: var(--gowp-nav-color, #000000);
  transition: all 0.2s ease;
}

.celerate-sso-block-wrapper .viewcart:hover svg {
  fill: var(--gowp-nav-hover, #000000) !important;
}

.celerate-sso-block-wrapper .cart-label {
  color: var(--gowp-nav-color, #000000);
  font-family: var(--gowp-font-nav, "Open Sans", sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  padding-left: 10px;
  transition: all 0.2s ease;
}

.celerate-sso-block-wrapper .viewcart:hover .cart-label {
  color: var(--gowp-nav-hover, #000000) !important;
}

/* Cart count badge (both styles) */
.celerate-sso-block-wrapper .celerate-sso-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50%;
  background-color: var(--celerate-badge-bg, var(--gowp-nav-hover, #0B6306));
  border: 2px solid #fff;
  color: #fff;
  font-family: var(--gowp-font-nav, "Open Sans", sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  position: relative;
  top: -10px;
  left: -10px;
  margin-right: -18px;
  transition: all 0.2s ease;
}

.celerate-sso-block-wrapper .viewcart:hover .celerate-sso-cart-count {
  background-color: var(--gowp-nav-color, #333);
  color: #fff;
  border-color: #fff;
}

/* Shared login status bar */
.celerate-sso-block-wrapper .celerate-sso-login-status {
  display: flex;
  flex-direction: row;
  width: auto;
  height: auto;
  max-width: 100%;
  overflow: visible !important;
  align-items: center;
}

/* Classic logged-out links */
.celerate-sso-style-classic .celerate-sso-login-status > a {
  width: auto;
  padding: 8px 10px;
  color: var(--gowp-nav-color, #000000);
  font-family: var(--gowp-font-nav, "Open Sans", sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  border: 1px solid var(--celerate-border-color, var(--gowp-nav-color, #ccc)) !important;
  transition: all 0.2s ease;
  border-top: 0 !important;
  text-decoration: none;
}

.celerate-sso-style-classic .celerate-sso-login-status a:hover {
  color: var(--gowp-nav-hover, #000000);
}

.celerate-sso-style-classic .celerate-sso-login-status.n4m-loggedOut .icon_login.login {
  border-radius: 0 0 0 5px !important;
  border-right: none !important;
}

.celerate-sso-style-classic .celerate-sso-login-status.n4m-loggedOut .icon_login.c-account {
  border-radius: 0 0 5px 0 !important;
}

.celerate-sso-style-classic .celerate-sso-login-status.n4m-loggedOut .icon_login.login:last-child {
  border-radius: 0 0 5px 5px !important;
  border-right: 1px solid var(--celerate-border-color, var(--gowp-nav-color, #ccc)) !important;
}

/* Shared dropdown fade animation */
@keyframes celerateSSOfadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ========================================================================
   CLASSIC STYLE — Original CYM layout
   ======================================================================== */

/* Classic: no spacing — flush against top edge */
.celerate-sso-style-classic {
  margin: 0 !important;
  padding: 0 !important;
}

/* Classic: email visible in bar */
.celerate-sso-style-classic .login-status {
  align-items: center;
  height: auto;
  max-width: 150px;
  border: 1px solid var(--celerate-border-color, var(--gowp-nav-color, #ccc)) !important;
  border-radius: 0 0 0 5px !important;
  border-top: 0 !important;
  border-right: none !important;
  width: auto;
  padding: 8px 10px;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .celerate-sso-style-classic .login-status {
    max-width: 100%;
  }
}

.celerate-sso-style-classic .login-status span {
  color: var(--gowp-nav-color, #000000);
  font-family: var(--gowp-font-nav, "Open Sans", sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

/* Classic: dropdown trigger (text only, with border) */
.celerate-sso-style-classic .my-account-dropdown {
  position: relative;
  display: inline-block;
  border-radius: 0 0 5px 0 !important;
  border: 1px solid var(--celerate-border-color, var(--gowp-nav-color, #ccc));
  border-top: none !important;
  padding: 11px 10px !important;
}

.celerate-sso-style-classic .dropdown-toggle {
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--gowp-nav-color, #000000);
  font-family: var(--gowp-font-nav, "Open Sans", sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.celerate-sso-style-classic .dropdown-toggle::after {
  content: "\25BC";
  font-size: 10px;
  transition: transform 0.2s ease;
  border: none !important;
}

.celerate-sso-style-classic .dropdown-checkbox:checked + .dropdown-toggle::after {
  transform: rotate(180deg);
}

.celerate-sso-style-classic .dropdown-toggle:hover {
  color: var(--gowp-nav-hover, #000000) !important;
}

/* Classic: dropdown panel */
.celerate-sso-style-classic .dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 220px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  border: 1px solid var(--celerate-border-color, var(--gowp-nav-color, #ccc));
  border-radius: 0 0 8px 8px;
  top: 103%;
  right: 0;
  overflow: hidden;
  border-top: none;
}

.celerate-sso-style-classic .dropdown-checkbox:checked ~ .dropdown-content {
  display: block;
  animation: celerateSSOfadeIn 0.15s ease-out;
  padding: 10px 0;
}

.celerate-sso-style-classic .dropdown-content a {
  color: var(--gowp-nav-color, #000000) !important;
  padding: 12px 14px;
  text-decoration: none;
  display: block;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--gowp-font-nav, "Open Sans", sans-serif);
  font-size: 14px;
  line-height: 1.4;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
}

.celerate-sso-style-classic .dropdown-content a:last-child {
  border-bottom: none;
}

.celerate-sso-style-classic .dropdown-content a:hover {
  background-color: var(--gowp-primary-light, #f8f9fa);
  color: var(--gowp-nav-hover, #000000) !important;
  padding-left: 22px;
}

.celerate-sso-style-classic .dropdown-content a.logout-link {
  border-top: 2px solid #e9ecef;
  color: #dc3545 !important;
  font-weight: 500;
}

.celerate-sso-style-classic .dropdown-content a.logout-link:hover {
  background-color: #fff5f5;
  color: #c82333 !important;
}


/* ========================================================================
   MODERN STYLE — New ARANS layout
   ======================================================================== */

/* Modern: bigger cart icon */
.celerate-sso-style-modern .viewcart {
  padding: 10px 12px;
  gap: 2px;
}

.celerate-sso-style-modern .viewcart svg {
  width: 24px;
  height: 24px;
}

.celerate-sso-style-modern .cart-label {
  font-size: 16px;
  font-weight: 500;
  padding-left: 4px;
}

/* Modern: email hidden from bar (shows inside dropdown as username) */
.celerate-sso-style-modern .login-status {
  display: none;
}

/* Modern: logged-out login button — outline with hover fill */
.celerate-sso-style-modern .celerate-sso-login-status.n4m-loggedOut .icon_login.login {
  border: 1px solid var(--celerate-border-color, var(--gowp-nav-color, #333)) !important;
  border-radius: 5px !important;
  background-color: transparent;
  padding: 10px 16px !important;
  color: var(--gowp-nav-color, #333);
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.celerate-sso-style-modern .celerate-sso-login-status.n4m-loggedOut .icon_login.login:hover {
  background-color: var(--gowp-nav-hover, #0B6306) !important;
  border-color: var(--gowp-nav-hover, #0B6306) !important;
  color: #fff !important;
}

.celerate-sso-style-modern .celerate-sso-login-status.n4m-loggedOut .icon_login.login:hover .celerate-sso-chevron {
  color: #fff !important;
}

/* Modern: Create Account link */
.celerate-sso-style-modern .celerate-sso-login-status.n4m-loggedOut .icon_login.c-account {
  margin-left: 12px;
  color: var(--gowp-nav-color, #333);
  font-family: var(--gowp-font-nav, "Open Sans", sans-serif);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid var(--celerate-border-color, var(--gowp-nav-color, #333)) !important;
  border-radius: 5px !important;
  padding: 10px 16px !important;
  background-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.celerate-sso-style-modern .celerate-sso-login-status.n4m-loggedOut .icon_login.c-account:hover {
  background-color: var(--gowp-nav-hover, #0B6306) !important;
  border-color: var(--gowp-nav-hover, #0B6306) !important;
  color: #fff !important;
}

/* Modern: outline button trigger */
.celerate-sso-style-modern .my-account-dropdown {
  position: relative;
  display: inline-block;
  border-radius: 5px;
  background-color: transparent;
  padding: 10px 16px !important;
  border: 1px solid var(--celerate-border-color, var(--gowp-nav-color, #333)) !important;
  margin-left: 8px;
}

.celerate-sso-style-modern .dropdown-toggle {
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gowp-nav-color, #333);
  font-family: var(--gowp-font-nav, "Open Sans", sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.celerate-sso-style-modern .dropdown-toggle::after {
  content: "\25BC";
  font-size: 10px;
  transition: transform 0.2s ease;
  border: none !important;
  color: var(--gowp-nav-color, #333);
}

.celerate-sso-style-modern .dropdown-checkbox:checked + .dropdown-toggle::after {
  transform: rotate(180deg);
}

.celerate-sso-style-modern .my-account-dropdown:hover,
.celerate-sso-style-modern .my-account-dropdown:has(.dropdown-checkbox:checked) {
  background-color: var(--gowp-nav-hover, #0B6306) !important;
  border-color: var(--gowp-nav-hover, #0B6306) !important;
}

.celerate-sso-style-modern .my-account-dropdown:hover .dropdown-toggle,
.celerate-sso-style-modern .my-account-dropdown:hover .dropdown-toggle::after,
.celerate-sso-style-modern .my-account-dropdown:has(.dropdown-checkbox:checked) .dropdown-toggle,
.celerate-sso-style-modern .my-account-dropdown:has(.dropdown-checkbox:checked) .dropdown-toggle::after {
  color: #fff !important;
}

/* Modern: larger dropdown panel */
.celerate-sso-style-modern .dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 312px;
  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  top: 100%;
  right: 0;
  overflow: hidden;
  border-top: none;
}

.celerate-sso-style-modern .dropdown-checkbox:checked ~ .dropdown-content {
  display: block;
  animation: celerateSSOfadeIn 0.15s ease-out;
  padding: 8px 0;
}

/* Modern: username/email inside dropdown */
.celerate-sso-style-modern .dropdown-username {
  display: block;
  padding: 16px 20px;
  font-weight: 400;
  color: var(--gowp-nav-color, #333);
  font-family: var(--gowp-font-nav, "Open Sans", sans-serif);
  font-size: 15px;
  line-height: 1.3;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 4px;
}

/* Modern: dropdown links */
.celerate-sso-style-modern .dropdown-content a {
  color: var(--gowp-nav-color, #333) !important;
  padding: 14px 20px;
  text-decoration: none;
  display: block;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--gowp-font-nav, "Open Sans", sans-serif);
  font-size: 15px;
  line-height: 1.4;
  transition: all 0.15s ease;
}

.celerate-sso-style-modern .dropdown-content a:hover {
  background-color: var(--gowp-primary-light, #f5f5f5);
  color: var(--gowp-nav-hover, #000000) !important;
}

/* Modern: logout */
.celerate-sso-style-modern .dropdown-content a.logout-link {
  border-top: 1px solid #e0e0e0 !important;
  margin-top: 4px;
  color: var(--gowp-nav-color, #666) !important;
  font-weight: 500;
}

.celerate-sso-style-modern .dropdown-content a.logout-link:hover {
  background-color: var(--gowp-primary-light, #fafafa);
  color: var(--gowp-nav-hover, #333) !important;
}