/* IONTMAX Theme managed source: 2026-08-01 */
/*
 * IONTMAX Login Dialog
 *
 * Přihlašovací popup otevíraný z hlavičky.
 * Společný základ popupových panelů spravuje modul shared-components.
 */

body.im-panel-open--login {
  --im-login-text: #111214;
  --im-login-muted: #6b7280;
  --im-login-line: #ececec;
  --im-login-accent: #303233;
  overflow: hidden;
}

body.im-panel-open--login .im-panel-backdrop,
body.im-panel-open--login.login-window-visible::before,
body.login-window-visible.im-panel-open--login::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  pointer-events: none !important;
}

body.im-panel-open--login .im-panel-overlay--login {
  top: 50% !important;
  right: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px)) !important;
  max-height: min(90vh, 640px);
  padding: clamp(20px, 4vw, 28px) !important;
  overflow: auto;
  border: 1px solid var(--im-login-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18) !important;
}

body.im-panel-open--login .im-panel-overlay__head {
  margin: 0 0 20px;
  padding-right: 48px;
  border: 0 !important;
  background: transparent !important;
}

body.im-panel-open--login .im-panel-overlay__title {
  color: var(--im-login-text) !important;
  font-size: clamp(20px, 4vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

body.im-panel-open--login .im-panel-overlay__close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: #f3f4f6 !important;
  color: var(--im-login-text) !important;
  border: 0 !important;
}

body.im-panel-open--login .popup-widget::before,
body.im-panel-open--login .user-action-login::before,
body.im-panel-open--login .login-widget::before,
body.im-panel-open--login #login::before,
body.im-panel-open--login .im-panel-overlay__content > .popup-widget::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.im-panel-open--login .im-panel-overlay__content {
  padding: 0 !important;
}

body.im-panel-open--login .im-panel-overlay__content > .user-action-login,
body.im-panel-open--login .im-panel-overlay__content > .popup-widget,
body.im-panel-open--login .popup-widget-inner,
body.im-panel-open--login #customerLogin,
body.im-panel-open--login .popup-widget-inner fieldset,
body.im-panel-open--login .popup-widget-inner .box {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

body.im-panel-open--login .popup-widget-inner > h2,
body.im-panel-open--login #loginHeading,
body.im-panel-open--login .popup-widget-inner > .h4 {
  display: none !important;
}

body.im-panel-open--login #formLoginIncluded,
body.im-panel-open--login #formLogin,
body.im-panel-open--login .formLogin {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.im-panel-open--login #formLoginIncluded .form-group,
body.im-panel-open--login #formLogin .form-group,
body.im-panel-open--login .formLogin .form-group {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.im-panel-open--login #formLoginIncluded .input-wrapper,
body.im-panel-open--login #formLogin .input-wrapper,
body.im-panel-open--login .formLogin .input-wrapper {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.im-panel-open--login #formLoginIncluded .form-control,
body.im-panel-open--login #formLogin .form-control,
body.im-panel-open--login .formLogin .form-control,
body.im-panel-open--login .im-panel-overlay--login input[type="email"],
body.im-panel-open--login .im-panel-overlay--login input[type="password"] {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--im-login-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--im-login-text) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  appearance: none !important;
}

body.im-panel-open--login #formLoginIncluded .form-control::placeholder,
body.im-panel-open--login #formLogin .form-control::placeholder,
body.im-panel-open--login .formLogin .form-control::placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

body.im-panel-open--login #formLoginIncluded .form-control:focus,
body.im-panel-open--login #formLogin .form-control:focus,
body.im-panel-open--login .formLogin .form-control:focus,
body.im-panel-open--login .im-panel-overlay--login input[type="email"]:focus,
body.im-panel-open--login .im-panel-overlay--login input[type="password"]:focus {
  border-color: var(--im-login-accent) !important;
  box-shadow: 0 0 0 2px rgba(48, 50, 51, 0.12) !important;
  outline: none !important;
}

body.im-panel-open--login #formLoginIncluded .login-wrapper,
body.im-panel-open--login #formLogin .login-wrapper,
body.im-panel-open--login .formLogin .login-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.im-panel-open--login .im-panel-overlay--login .btn.btn-login,
body.im-panel-open--login .im-panel-overlay--login .btn.btn-secondary.btn-login,
body.im-panel-open--login
  .im-panel-overlay--login
  .btn.btn-secondary.btn-text.btn-login,
body.im-panel-open--login .im-panel-overlay--login button.btn-login,
body.im-panel-open--login #formLoginIncluded .btn.btn-login,
body.im-panel-open--login #formLogin .btn.btn-login,
body.im-panel-open--login #formLoginIncluded button.btn-login,
body.im-panel-open--login #formLogin button.btn-login,
body.im-panel-open--login .formLogin .btn.btn-login,
body.im-panel-open--login .formLogin button.btn-login {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--im-login-accent) !important;
  background-color: var(--im-login-accent) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.im-panel-open--login .im-panel-overlay--login .btn.btn-login:hover,
body.im-panel-open--login
  .im-panel-overlay--login
  .btn.btn-secondary.btn-login:hover,
body.im-panel-open--login
  .im-panel-overlay--login
  .btn.btn-secondary.btn-text.btn-login:hover,
body.im-panel-open--login .im-panel-overlay--login button.btn-login:hover,
body.im-panel-open--login #formLoginIncluded .btn.btn-login:hover,
body.im-panel-open--login #formLogin .btn.btn-login:hover,
body.im-panel-open--login .formLogin .btn.btn-login:hover {
  border: 0 !important;
  background: #1a1b1d !important;
  background-color: #1a1b1d !important;
  color: #fff !important;
}

body.im-panel-open--login #formLoginIncluded .password-helper,
body.im-panel-open--login #formLogin .password-helper,
body.im-panel-open--login .formLogin .password-helper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.im-panel-open--login #formLoginIncluded .password-helper a,
body.im-panel-open--login #formLogin .password-helper a,
body.im-panel-open--login .formLogin .password-helper a {
  color: var(--im-login-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

body.im-panel-open--login #formLoginIncluded .password-helper a:hover,
body.im-panel-open--login #formLogin .password-helper a:hover,
body.im-panel-open--login .formLogin .password-helper a:hover {
  color: var(--im-login-text) !important;
}

body.im-panel-open--login #formLoginIncluded .validator-msg,
body.im-panel-open--login #formLoginIncluded .js-validator-msg,
body.im-panel-open--login #formLogin .validator-msg,
body.im-panel-open--login #formLogin .js-validator-msg,
body.im-panel-open--login .formLogin .validator-msg,
body.im-panel-open--login .formLogin .js-validator-msg {
  margin: 6px 0 0 !important;
  color: #b42318 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

@media (min-width: 480px) {
  body.im-panel-open--login #formLoginIncluded .password-helper,
  body.im-panel-open--login #formLogin .password-helper,
  body.im-panel-open--login .formLogin .password-helper {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 20px !important;
  }
}
/* ============================================================
   IONTMAX Login Dialog v2 – current Shoptet login widget DOM
   Covers #formLoginIncluded .btn-primary + .alternative-links.
   ============================================================ */

body.im-panel-open--login #formLoginIncluded .smart-label-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.im-panel-open--login #formLoginIncluded .smart-label-wrapper > label {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--im-login-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
  pointer-events: auto !important;
}

body.im-panel-open--login #formLoginIncluded .smart-label-wrapper > .form-control-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.im-panel-open--login #formLoginIncluded .submit-wrapper {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.im-panel-open--login #formLoginIncluded .submit-wrapper > .btn.btn-primary,
body.im-panel-open--login #formLoginIncluded button.btn.btn-primary[type="submit"],
body.im-panel-open--login #formLoginIncluded [data-testid="buttonSubmit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--im-login-accent) !important;
  background-color: var(--im-login-accent) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

body.im-panel-open--login #formLoginIncluded .submit-wrapper > .btn.btn-primary:hover,
body.im-panel-open--login #formLoginIncluded .submit-wrapper > .btn.btn-primary:focus,
body.im-panel-open--login #formLoginIncluded [data-testid="buttonSubmit"]:hover,
body.im-panel-open--login #formLoginIncluded [data-testid="buttonSubmit"]:focus {
  border: 0 !important;
  background: #1a1b1d !important;
  background-color: #1a1b1d !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

body.im-panel-open--login #formLoginIncluded .alternative-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 18px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.im-panel-open--login #formLoginIncluded .alternative-links > a {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--im-login-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  box-shadow: none !important;
}

body.im-panel-open--login #formLoginIncluded .alternative-links > a:hover,
body.im-panel-open--login #formLoginIncluded .alternative-links > a:focus {
  color: var(--im-login-text) !important;
  text-decoration: underline !important;
}

@media (max-width: 479px) {
  body.im-panel-open--login #formLoginIncluded .alternative-links {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px 16px !important;
  }
}