/* ======================================================
   Vaper – My Account Login / Register Switcher (FINAL)
   ====================================================== */

/* ---------- Base layout ---------- */

/* Центрируем блок и убираем влияние bootstrap-row */
.woocommerce-account #customer_login{
  max-width: 900px;
  margin: 0 auto !important;
  display: block !important;
}

/* Левая колонка (Login) – единственная видимая */
.woocommerce-account #customer_login > .vaper-col-login{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Правая колонка (Register) полностью скрыта */
.woocommerce-account #customer_login > .vaper-col-register{
  display: none !important;
}

/* ---------- Switch header (Login | Register) ---------- */

.woocommerce-account #customer_login .vaper-switch-head{
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 26px 0;   /* отступ до полей */
}

.woocommerce-account #customer_login .vaper-switch-head h2{
  width: 50%;
  text-align: center;
  margin: 0 !important;
  cursor: pointer;
  user-select: none;
  position: relative;
  border-bottom: 0 !important;
}

/* ---------- Disable theme underline (if any) ---------- */
/* ВАЖНО: мы НЕ трогаем ::after — там наша линия */
.woocommerce-account #customer_login .vaper-switch-head h2{
  text-decoration: none !important;
}

/* ---------- Animated underline (OUR line) ---------- */

.woocommerce-account #customer_login .vaper-switch-head h2::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 150px;
  height: 2px;
  background: #000;
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  transform-origin: center;
  transition: transform 140ms ease, opacity 140ms ease;
}

/* Активный таб – линия видна */
.woocommerce-account #customer_login.vaper-mode-login
.vaper-switch-head h2:first-child::after{
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

.woocommerce-account #customer_login.vaper-mode-register
.vaper-switch-head h2:last-child::after{
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* ---------- Icon fix ---------- */
/* Убираем "дверь со стрелкой" ТОЛЬКО у Register
   (иконка рисуется темой через ::before) */
.woocommerce-account #customer_login
.vaper-switch-head h2:last-child::before{
  content: none !important;
}

/* ---------- Inactive tab opacity ---------- */

.woocommerce-account #customer_login .vaper-tab{
  transition: opacity 140ms ease;
}

.woocommerce-account #customer_login .vaper-tab.is-inactive{
  opacity: 0.45;
}

/* ---------- Form visibility ---------- */

.woocommerce-account #customer_login.vaper-mode-login
.vaper-content-register{
  display: none !important;
}

.woocommerce-account #customer_login.vaper-mode-register
.vaper-content-login{
  display: none !important;
}


/* ======================================================
   Mobile – FULL WIDTH + RU long titles + centered button
   ====================================================== */

@media (max-width: 767px){

  /* 1) Разжать контейнеры темы ТОЛЬКО в зоне контента (bwp-main), не трогая header */
  body.woocommerce-account #bwp-main > .container,
  body.woocommerce-account #bwp-main > .container-fluid{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* На всякий случай: сам контент тоже не должен быть ограничен */
  body.woocommerce-account #bwp-main #content,
  body.woocommerce-account #bwp-main #primary,
  body.woocommerce-account #bwp-main .site-content,
  body.woocommerce-account #bwp-main .content-area{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2) Паддинги даём уже нашему блоку, чтобы выглядело широко и аккуратно */
  body.woocommerce-account #customer_login{
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;   /* можно 10–16 */
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  /* 3) Растянуть белый бокс и контент внутри */
  body.woocommerce-account #customer_login .box-form-login,
  body.woocommerce-account #customer_login .box-content{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* 4) Шапка: дать место словам (RU) */
  body.woocommerce-account #customer_login .vaper-switch-head{
    margin-bottom: 18px !important;
    gap: 8px;
  }

  body.woocommerce-account #customer_login .vaper-switch-head h2{
    width: 50%;
    font-size: 16px !important;
    line-height: 1.15 !important;

    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;

    padding: 0 6px;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  /* Иконка у Login — не раздувать */
  body.woocommerce-account #customer_login .vaper-switch-head h2:first-child svg,
  body.woocommerce-account #customer_login .vaper-switch-head h2:first-child i{
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }

  /* Линия: короче и ближе */
  body.woocommerce-account #customer_login .vaper-switch-head h2::after{
    width: 90px !important;
    bottom: -6px !important;
    height: 2px;
  }

  /* Поля удобнее на мобиле */
  body.woocommerce-account #customer_login input.input-text{
    width: 100% !important;
    height: 46px;
    font-size: 15px;
    padding: 10px 12px;
    box-sizing: border-box;
  }

  body.woocommerce-account #customer_login label{
    font-size: 14px;
    margin-bottom: 6px;
  }

  /* Remember/Lost: в столбик */
  body.woocommerce-account #customer_login .rememberme-lost{
    flex-direction: column;
    gap: 10px;
  }

  /* Кнопка: по центру и 100% ширины */
  body.woocommerce-account #customer_login .button-login,
  body.woocommerce-account #customer_login .button-register{
    text-align: center !important;
  }

  body.woocommerce-account #customer_login input.button,
  body.woocommerce-account #customer_login button.button{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;

    height: 50px;
    font-size: 14px;
    letter-spacing: .4px;
  }
}