/* ============================================
   LVD Group Manager – Variables CSS
   ============================================ */
:root {
  --gm-color-primary: #200b3e;
  --gm-color-black: #000;
  --gm-color-white: #fff;
  --gm-color-orange: #f47c20;
  --gm-color-border: #d7d1df;
  --gm-color-border-light: #e8e3ef;
  --gm-color-border-social: #e3dcec;
  --gm-color-border-hover: #cbbfe0;
  --gm-color-placeholder: #8f8f8f;
  --gm-color-icon: #8a8196;
  --gm-color-overlay: rgba(22, 18, 28, 0.6);
  --gm-color-shadow: rgba(0, 0, 0, 0.06);
  --gm-color-shadow-hover: rgba(43, 34, 54, 0.08);

  --gm-radius-sm: 6px;
  --gm-radius-md: 8px;
  --gm-radius-lg: 10px;

  --gm-input-height: 48px;
  --gm-input-font-size: 15px;
  --gm-input-border-radius: 6px;

  --gm-social-btn-size: 56px;
  --gm-social-btn-size-sm: 45px;
  --gm-social-icon-size: 28px;
  --gm-social-gap: 16px;

  --gm-padding-body: 16px 80px;
  --gm-padding-header: 15px 20px;
  --gm-padding-mobile: 20px;

  --gm-font-family: Sarabun, sans-serif;
  --gm-font-size-title: 20px;
  --gm-font-size-base: 15px;
  --gm-font-size-small: 14px;

  --gm-z-root: 2147483000;
  --gm-z-overlay: 1;
  --gm-z-dialog: 2;
}

/* ============================================
   Utilitaire blur
   ============================================ */
.class_blur {
  filter: blur(7px);
  -webkit-filter: blur(7px);
}

/* ============================================
   LVD Group Manager – Login Popup
   ============================================ */
.gm-popup-open {
  overflow: hidden;
}

.gm-popup {
  position: fixed;
  inset: 0;
  z-index: var(--gm-z-root);
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.gm-popup__overlay {
  position: absolute;
  inset: 0;
  background: var(--gm-color-overlay);
  backdrop-filter: blur(6px);
  z-index: var(--gm-z-overlay);
}

.gm-popup__dialog {
  display: flex;
  width: min(780px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-radius: var(--gm-radius-lg);
  background: var(--gm-color-white);
  z-index: var(--gm-z-dialog);
}

/* ============================================
   HEADER
   ============================================ */
.gm-popup_header {
  display: flex;
  padding: var(--gm-padding-header);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border-radius: var(--gm-radius-lg) var(--gm-radius-lg) 0 0;
  box-shadow: 0 4px 4px 0 var(--gm-color-shadow);
  z-index: var(--gm-z-overlay);
}

.gm-popup__right-title-text {
  color: var(--gm-color-black);
  leading-trim: both;
  text-edge: cap;
  font-family: var(--gm-font-family);
  font-size: var(--gm-font-size-title);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

/* ============================================
   PRE BODY (retour + intro)
   ============================================ */
.gm-popup_pre_body {
  display: flex;
  padding: 10px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.gm-popup__login-intro {
  font-size: var(--gm-font-size-base);
  font-weight: 400;
  color: var(--gm-color-primary);
  text-align: center;
  width: 100%;
  margin: 0;
}

/* ============================================
   BODY (formulaire + social)
   ============================================ */
.gm-popup_body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  padding: var(--gm-padding-body);
  align-self: stretch;
}

/* --- Formulaire login --- */
.gm-popup_body #login-form {
  width: 100%;
}

.gm-popup_body #login-form .input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* Uniquement le champ avec bouton œil */
.gm-popup_body #login-form .input-group:has(.input-group-append) {
  border: 1px solid var(--gm-color-border);
  border-radius: var(--gm-input-border-radius);
  background: var(--gm-color-white);
}

.gm-popup_body #login-form fieldset {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: none;
  padding: 0;
  margin: 0;
}

.gm-popup_body #login-form .form-group > .form-control {
  width: 100%;
  box-sizing: border-box;
}

/* Input group commun */
.gm-popup_body #login-form .input-group .form-control {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.gm-popup_body #login-form .input-group:has(.input-group-append) .form-control {
  border: none !important;
  border-radius: var(--gm-input-border-radius) 0 0 var(--gm-input-border-radius) !important;
  box-shadow: none !important;
}

.gm-popup_body #login-form .input-group-append {
  display: flex;
  margin-left: 0;
}

.gm-popup_body #login-form .input-group-append .btn {
  height: var(--gm-input-height) !important;
  min-width: var(--gm-input-height);
  border: none !important;
  border-left: 1px solid var(--gm-color-border) !important;
  border-radius: 0 var(--gm-input-border-radius) var(--gm-input-border-radius) 0 !important;
  background: var(--gm-color-white);
  color: var(--gm-color-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}

/* Input group email */
.gm-popup_body #login-form .form-control,
.gm-popup_body #login-form input.form-control {
  height: var(--gm-input-height);
  border: 1px solid var(--gm-color-border);
  border-radius: var(--gm-input-border-radius);
  font-size: var(--gm-input-font-size);
}

.gm-popup_body #login-form .form-control::placeholder {
  color: var(--gm-color-placeholder);
}

.gm-popup_body #login-form .login-form-email .form-control {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--gm-input-border-radius);
}

.gm-popup_body #login-form .input-group-append .btn:focus,
.gm-popup_body #login-form .input-group-append .btn:focus-visible,
.gm-popup_body #login-form .input-group-append .btn:active {
  outline: none;
  box-shadow: none;
  border-color: var(--gm-color-border);
}

/* Bouton connexion */
.gm-popup_body #login-form .btn-primary,
.gm-popup_body #submit-login {
  width: 100%;
  height: 52px;
  background: var(--gm-color-orange);
  border-color: var(--gm-color-orange);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
}

/* Mot de passe oublié */
.gm-popup_body #login-form .forgot-password {
  text-align: center;
}

.gm-popup_body #login-form .forgot-password a {
  color: var(--gm-color-orange);
  font-size: var(--gm-font-size-small);
  text-decoration: none;
}

.gm-popup_body #login-form .forgot-password a:hover {
  text-decoration: underline;
}

/* ============================================
   FOOTER
   ============================================ */
.gm-popup_footer {
  display: flex;
  padding: var(--gm-padding-body);
  align-items: flex-start;
  align-self: stretch;
  border-top: 1px solid var(--gm-color-border-light);
  flex-shrink: 0;
}

/* --- Switch "Vous avez déjà un compte ?" --- */
.gm-popup__switch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.gm-popup__switch span {
  font-size: var(--gm-font-size-small);
  color: var(--gm-color-primary);
}

.gm-popup__link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--gm-font-size-small);
  font-weight: 700;
  color: var(--gm-color-primary);
  text-decoration: underline;
  padding: 0;
  text-align: left;
}

/* --- Bouton retour --- */
.gm-popup__btn-back {
  color: var(--gm-color-black);
  font-family: var(--gm-font-family);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  display: flex;
  width: 30px;
  height: 30px;
  padding: 7px;
  justify-content: start;
  align-items: center;
  text-decoration: none;
  width: auto;
  height: auto;
  outline: none;
  border: none;
  background: none;
}

.gm-popup__btn-back:focus,
.gm-popup__btn-back:focus-visible {
  outline: none;
  box-shadow: none;
}

.gm-popup__back-arrow {
  display: flex;
  width: 30px;
  height: 30px;
  padding: 7px;
  justify-content: center;
  align-items: center;
  color: var(--gm-color-primary);
}

/* --- Divider --- */
.gm-popup__divider {
  height: 1px;
  background: var(--gm-color-border-light);
  margin: 0;
}

/* --- Social title --- */
.gm-popup__social .title {
  text-align: center;
  font-size: var(--gm-font-size-small);
  color: var(--gm-color-primary);
  font-weight: 400;
}

/* --- Social buttons --- */
.gm-popup__social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gm-popup__social .lvd-social-connect-buttons-block {
  display: flex;
  gap: var(--gm-social-gap);
  justify-content: center;
  flex-wrap: wrap;
}

[data-gm-popup] .gm-popup__social .lvd-social-connect-button,
[data-gm-popup]
  .gm-popup__social
  .lvd-social-connect-buttons-block:not(.lvd-social-connect-small-buttons)
  .lvd-social-connect-button,
[data-gm-popup]
  .gm-popup__social
  .lvd-social-connect-buttons-block.lvd-social-connect-small-buttons
  .lvd-social-connect-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  flex: 0 0 56px !important;
  flex-basis: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  width: 56px !important;
  height: 56px !important;
  border: 1px solid var(--gm-color-border-social);
  border-radius: var(--gm-radius-md);
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
}

.gm-popup__social .lvd-social-connect-button:focus,
.gm-popup__social .lvd-social-connect-button:hover {
  border-color: var(--gm-color-border-hover);
  box-shadow: 0 6px 16px var(--gm-color-shadow-hover);
}

.gm-popup__social .lvd-social-connect-button-text {
  display: none;
}

/* FIX CENTRAGE : on force static + flex center + on tue transform */
.gm-popup__social .lvd-social-connect-button-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  top: unset !important;
  left: unset !important;
  transform: none !important;
  inset: unset !important;
}

[data-gm-popup]
  .gm-popup__social
  .lvd-social-connect-buttons-block.lvd-social-connect-small-buttons,
[data-gm-popup]
  .gm-popup__social
  .lvd-social-connect-buttons-block:not(.lvd-social-connect-small-buttons) {
  width: auto !important;
  max-width: none !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--gm-social-gap) !important;
  flex-direction: row !important;
}

/* FIX CENTRAGE ICÔNE : static + pas de transform */
.gm-popup__social
  .lvd-social-connect-buttons-block
  .lvd-social-connect-item-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: var(--gm-social-icon-size) !important;
  height: var(--gm-social-icon-size) !important;
  margin: 0 !important;
  display: block !important;
}

.gm-popup__social
  .lvd-social-connect-buttons-block:not(.lvd-social-connect-small-buttons)
  .lvd-social-connect-item-icon {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.gm-popup__social .lvd-social-connect-button-inner > div {
  display: none;
}

.gm-popup__social .lvd-social-connect-button-inner img + div {
  display: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
  .gm-popup {
    padding: 12px;
  }

  .gm-popup_header {
    padding: var(--gm-padding-mobile) var(--gm-padding-mobile);
  }

  .gm-popup_body {
    padding: var(--gm-padding-mobile) var(--gm-padding-mobile) 24px;
    gap: 16px;
  }

  /* --- Fix icônes sociales mobile --- */
  [data-gm-popup] .gm-popup__social .lvd-social-connect-button,
  [data-gm-popup]
    .gm-popup__social
    .lvd-social-connect-buttons-block:not(.lvd-social-connect-small-buttons)
    .lvd-social-connect-button,
  [data-gm-popup]
    .gm-popup__social
    .lvd-social-connect-buttons-block.lvd-social-connect-small-buttons
    .lvd-social-connect-button {
    flex: 0 0 44px !important;
    flex-basis: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  [data-gm-popup]
    .gm-popup__social
    .lvd-social-connect-buttons-block.lvd-social-connect-small-buttons,
  [data-gm-popup]
    .gm-popup__social
    .lvd-social-connect-buttons-block:not(.lvd-social-connect-small-buttons) {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }

  .gm-popup__social
    .lvd-social-connect-buttons-block
    .lvd-social-connect-item-icon {
    width: 22px;
    height: 22px;
  }
}

@media (max-height: 680px) {
  .gm-popup__dialog {
    max-height: 95vh;
  }

  .gm-popup_body {
    gap: 12px;
  }
}

@media (max-height: 530px) {
  .gm-popup__switch {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
}

@media (max-height: 500px) {
  .gm-popup__dialog {
    max-height: 98vh;
  }
}

@media (max-height: 460px) {
  .gm-popup_body #submit-login {
    height: 40px;
  }

  .gm-popup_body {
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  [data-gm-popup] .gm-popup__social .lvd-social-connect-button {
    min-width: var(--gm-social-btn-size-sm) !important;
    max-width: var(--gm-social-btn-size-sm) !important;
    width: var(--gm-social-btn-size-sm) !important;
    height: var(--gm-social-btn-size-sm) !important;
  }
}

/* Social login transitions */
.gm-popup__dialog {
  transition:
    filter 0.5s ease,
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* ============================================
   VIEWS NAVIGATION (login / register)
   ============================================ */
.gm-popup__view[hidden] {
  display: none !important;
}

.gm-popup__view {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* --- Errors container --- */
.gm-popup__errors:empty {
  display: none;
}

.gm-popup__errors {
  margin-bottom: 8px;
}

.gm-popup__errors .alert {
  margin-bottom: 4px;
  font-size: 13px;
  padding: 8px 12px;
}

/* --- Field-level errors --- */
.gm-popup__field-error {
  color: #dc3545 !important;
  font-size: 12px;
  margin-top: 4px;
}

.gm-popup__is-invalid {
  border-color: #dc3545 !important;
}

/* ============================================
   REGISTER VIEW
   ============================================ */
.gm-popup__dialog--register {
  width: min(780px, 94vw);
}

/* --- Hide text labels (keep only placeholders) --- */
.gm-popup_body--register #customer-form .form-control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- Register form --- */
.gm-popup_body--register #customer-form {
  width: 100%;
  overflow: visible;
}

.gm-popup_body--register #customer-form fieldset {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border: none;
  padding: 0;
  margin: 0;
  overflow: visible;
}

/* Grid layout: 2 columns */
.gm-popup_body--register #customer-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  overflow: visible;
  margin: 0;
}

.gm-popup_body--register #customer-form .form-group {
  margin-bottom: 0;
  overflow: visible;
  min-width: 0;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent;
  padding: 0;
}

/* --- Grid positioning --- */
.gm-popup_body--register #customer-form .customer-form-id_gender,
.gm-popup_body--register #customer-form .customer-form-newsletter,
.gm-popup_body--register #customer-form .customer-form-optin,
.gm-popup_body--register #customer-form .customer-form-psgdpr,
.gm-popup_body--register #customer-form .customer-form-customer_privacy,
.gm-popup_body--register #customer-form .customer-form-date_add {
  grid-column: 1 / -1;
}

.gm-popup_body--register #customer-form .customer-form-id_gender {
  grid-column: 1 / -1;
  grid-row: 1;
}

.gm-popup_body--register #customer-form .customer-form-firstname {
  grid-column: 1;
  grid-row: 2;
}

.gm-popup_body--register #customer-form .customer-form-lastname {
  grid-column: 2;
  grid-row: 2;
}

.gm-popup_body--register #customer-form .customer-form-email {
  grid-column: 1;
  grid-row: 3;
}

.gm-popup_body--register #customer-form .customer-form-password,
.gm-popup_body--register #customer-form .customer-form-new_password {
  grid-column: 2;
  grid-row: 3;
}

.gm-popup_body--register #customer-form .customer-form-birthday,
.gm-popup_body--register #customer-form .customer-form-birthdate {
  grid-column: 1;
  grid-row: 4;
}

.gm-popup_body--register #customer-form .customer-form-referral_code,
.gm-popup_body--register #customer-form .customer-form-sponsor_code,
.gm-popup_body--register #customer-form .customer-form-sponsorship_code,
.gm-popup_body--register #customer-form .customer-form-parrainage {
  grid-column: 2;
  grid-row: 4;
}

.gm-popup_body--register #customer-form .customer-form-newsletter {
  grid-column: 1 / -1;
  grid-row: 5;
}

.gm-popup_body--register #customer-form .customer-form-optin {
  grid-column: 1 / -1;
  grid-row: 6;
}

.gm-popup_body--register #customer-form .customer-form-psgdpr,
.gm-popup_body--register #customer-form .customer-form-customer_privacy {
  grid-column: 1 / -1;
  grid-row: 7;
}

/* --- Gender row: inline --- */
.gm-popup_body--register #customer-form .customer-form-id_gender .row {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 26px;
}

.gm-popup_body--register
  #customer-form
  .customer-form-id_gender
  .col-form-label {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  /* Override sr-only for this specific label */
  position: static;
  height: auto;
  overflow: visible;
  clip: auto;
}

.gm-popup_body--register #customer-form .customer-form-id_gender .col-12 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 26px;
  padding: 0;
  width: auto;
  max-width: none;
}

.gm-popup_body--register
  #customer-form
  .customer-form-id_gender
  .custom-control-label {
  font-size: 16px;
}

/* --- Inputs --- */
.gm-popup_body--register #customer-form .form-control,
.gm-popup_body--register #customer-form .input-group .form-control,
.gm-popup_body--register #customer-form input.form-control,
.gm-popup_body--register #customer-form select.form-control {
  height: var(--gm-input-height);
  border: 1px solid var(--gm-color-border);
  border-radius: var(--gm-input-border-radius) !important;
  font-size: var(--gm-input-font-size);
  background: var(--gm-color-white);
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  box-shadow: none !important;
  outline: none !important;
}

.gm-popup_body--register #customer-form .form-control::placeholder {
  color: #8f8f8f;
}

.gm-popup_body--register #customer-form .form-control-comment {
  font-size: 12px;
  color: #7f7a89;
  margin-top: 6px;
}

/* --- Input group (tous les champs sont wrappés dans .input-group par PrestaShop) --- */
.gm-popup_body--register #customer-form .input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}

/* L'input garde sa propre bordure par défaut */
.gm-popup_body--register #customer-form .input-group .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Uniquement le champ mot de passe (avec bouton œil) --- */
.gm-popup_body--register #customer-form .input-group:has(.input-group-append) {
  border: 1px solid var(--gm-color-border);
  border-radius: var(--gm-input-border-radius);
  background: var(--gm-color-white);
}

.gm-popup_body--register
  #customer-form
  .input-group:has(.input-group-append)
  .form-control {
  border: none !important;
  border-radius: var(--gm-input-border-radius) 0 0 var(--gm-input-border-radius) !important;
  box-shadow: none !important;
}

.gm-popup_body--register #customer-form .input-group-append {
  display: flex;
  margin-left: 0;
}

.gm-popup_body--register #customer-form .input-group-append .btn {
  height: var(--gm-input-height) !important;
  min-width: var(--gm-input-height);
  border: none !important;
  border-left: 1px solid var(--gm-color-border) !important;
  border-radius: 0 var(--gm-input-border-radius) var(--gm-input-border-radius) 0 !important;
  background: var(--gm-color-white);
  color: var(--gm-color-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}

/* --- Toggle switches (newsletter, optin, psgdpr) --- */
.gm-popup_body--register #customer-form .custom-switch {
  padding-left: 0;
}

.gm-popup_body--register #customer-form .custom-switch .custom-control-label {
  font-size: 14px;
  line-height: 1.35;
  padding-left: 72px;
  min-height: 42px;
}

.gm-popup_body--register
  #customer-form
  .custom-switch
  .custom-control-label::before {
  left: 0;
  top: 3px;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #cfc9d9;
  background: #fff;
}

.gm-popup_body--register
  #customer-form
  .custom-switch
  .custom-control-label::after {
  left: 2px;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #6f637f;
}

.gm-popup_body--register
  #customer-form
  .custom-switch
  .custom-control-input:checked
  ~ .custom-control-label::before {
  border-color: var(--gm-color-primary);
  background: var(--gm-color-primary);
}

.gm-popup_body--register
  #customer-form
  .custom-switch
  .custom-control-input:checked
  ~ .custom-control-label::after {
  background: #fff;
}

/* --- Submit button --- */
.gm-popup_body--register #customer-form .form-footer {
  margin-top: 10px;
}

.gm-popup_body--register #customer-form .btn-primary,
.gm-popup_body--register #customer-form .form-footer .btn-primary {
  width: 100%;
  height: 52px;
  background: var(--gm-color-orange);
  border-color: var(--gm-color-orange);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
}

/* --- Responsive: 1 column on mobile --- */
@media (max-width: 600px) {
  .gm-popup__dialog--register {
    width: 94vw;
  }

  .gm-popup_body--register #customer-form .form-row {
    grid-template-columns: 1fr;
  }

  .gm-popup_body--register #customer-form .customer-form-firstname,
  .gm-popup_body--register #customer-form .customer-form-lastname,
  .gm-popup_body--register #customer-form .customer-form-email,
  .gm-popup_body--register #customer-form .customer-form-password,
  .gm-popup_body--register #customer-form .customer-form-new_password,
  .gm-popup_body--register #customer-form .customer-form-birthday,
  .gm-popup_body--register #customer-form .customer-form-birthdate {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.gm-popup__overlay {
  transition: background 0.5s ease;
}

/* OAuth: blur + scale-down */
.gm-popup--social-loading .gm-popup__dialog {
  filter: blur(10px);
  opacity: 0.2;
  transform: scale(0.96);
  pointer-events: none;
}

.gm-popup--social-loading .gm-popup__overlay {
  background: rgba(22, 18, 28, 0.9);
}

/* Spinner during OAuth transition */
.gm-popup--social-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  z-index: var(--gm-z-dialog);
  animation: gm-spin 0.65s linear infinite;
}

@keyframes gm-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* OTP / Magic Link: fade-out */
.gm-popup--closing {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Relocated Bootstrap modal above gm popup */
body > #social-loginModal.modal {
  z-index: 2147483002 !important;
}

body > #social-loginModal.modal ~ .modal-backdrop,
body > .modal-backdrop + #social-loginModal.modal ~ .modal-backdrop {
  z-index: 2147483001 !important;
}

/* Sociallogin overlay + toasts above gm popup */
#lvd-sc-overlay.lvd-sc-overlay {
  z-index: 2147483003 !important;
}

.lvd-toast-container {
  z-index: 2147483004 !important;
}