/* =============================================
   AUTH PAGE — GoraFish
   Файл: assets/css/sections/auth.css
   Базується на стандартному WooCommerce HTML
   ============================================= */

/* -----------------------------------------------
   1. СЕКЦІЯ — базовий layout
----------------------------------------------- */
.myaccount {
  padding: var(--space-3xl) 0 !important;
  margin: 0 !important;
  min-height: 70vh;
}

.myaccount .brxe-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-xl) !important;
  box-sizing: border-box !important;
}

/* -----------------------------------------------
   2. ЗАГОЛОВОК GoraFish
----------------------------------------------- */
.account__wrap-text {
  text-align: center !important;
  margin-bottom: var(--space-2xl) !important;
}

.account__title-page {
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  color: var(--title) !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* -----------------------------------------------
   ТАБИ — auth-tabs
----------------------------------------------- */
.auth-tabs-layout {
  display: block !important;
}

/* Перевизначаємо flex колонок коли таби активні */
.wrap__account-content .auth-tabs-layout.col2-set {
  display: block !important;
  flex-direction: unset !important;
}

.auth-tabs {
  display: flex !important;
  border-bottom: 2px solid var(--bricks-color-grey-300) !important;
  margin-bottom: var(--space-xl) !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.auth-tab {
  flex: 1 !important;
  padding: var(--space-s) var(--space-m) !important;
  background: transparent !important;
  border: none !important;
  font-size: var(--text-m) !important;
  font-weight: 500 !important;
  color: var(--title-l-2) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: color 0.2s !important;
}

.auth-tab::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--primary) !important;
  transform: scaleX(0) !important;
  transition: transform 0.25s ease !important;
}

.auth-tab--active {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

.auth-tab--active::after {
  transform: scaleX(1) !important;
}

/* Панелі — приховані за замовчуванням */
.auth-panel {
  display: none !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.auth-panel--active {
  display: block !important;
}

/* -----------------------------------------------
   3. ДВОКОЛОНКОВИЙ LAYOUT — fallback без JS
----------------------------------------------- */
.wrap__account-content .woocommerce {
  width: 100% !important;
}

/* Дефолтний layout — дві колонки поруч (без JS) */
.wrap__account-content .col2-set {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-2xl) !important;
  align-items: start !important;
}

/* Коли JS додав таби — перемикаємо на block */
.wrap__account-content .auth-tabs-layout.col2-set {
  display: block !important;
}

.wrap__account-content .u-column1,
.wrap__account-content .u-column2 {
  background: #fff !important;
  border: 1px solid var(--bricks-color-grey-300) !important;
  border-radius: 12px !important;
  padding: var(--space-xl) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* -----------------------------------------------
   ЦЕНТРУВАННЯ — таби і форма
----------------------------------------------- */

/* Обгортка контенту — по центру */
.wrap__account-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.wrap__account-content .woocommerce {
  width: 100% !important;
  max-width: 560px !important;
}

/* Таби — повна ширина контейнера */
.auth-tabs {
  max-width: 100% !important;
  width: 100% !important;
}

/* Панель — повна ширина */
.auth-panel {
  max-width: 100% !important;
  width: 100% !important;
}
/* -----------------------------------------------
   4. ФОРМИ — поля
----------------------------------------------- */

/* Стандартні WC рядки форми */
.wrap__account-content .woocommerce-form-row {
  margin-bottom: var(--space-m) !important;
}

.wrap__account-content .form-row {
  margin-bottom: var(--space-m) !important;
}

/* Labels */
.wrap__account-content label {
  display: block !important;
  font-size: var(--text-s) !important;
  font-weight: 500 !important;
  color: var(--title) !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
}

.wrap__account-content label .required {
  color: var(--primary) !important;
  margin-left: 2px !important;
}

/* Inputs */
.wrap__account-content .woocommerce-Input--text,
.wrap__account-content input[type="text"],
.wrap__account-content input[type="email"],
.wrap__account-content input[type="password"],
.wrap__account-content input[type="tel"] {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 var(--space-m) !important;
  border: 1.5px solid var(--bricks-color-grey-300) !important;
  border-radius: 8px !important;
  font-size: var(--text-m) !important;
  color: var(--title) !important;
  background: #fff !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
}

.wrap__account-content .woocommerce-Input--text:focus,
.wrap__account-content input[type="text"]:focus,
.wrap__account-content input[type="email"]:focus,
.wrap__account-content input[type="password"]:focus,
.wrap__account-content input[type="tel"]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.08) !important;
}

/* Поле пароля */
.wrap__account-content .password-input {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.wrap__account-content .password-input input[type="password"] {
  padding-right: 48px !important;
}

.wrap__account-content .show-password-input {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  color: var(--title-l-2) !important;
  width: 20px !important;
  height: 20px !important;
}

/* -----------------------------------------------
   5. КАСТОМНІ ПОЛЯ РЕЄСТРАЦІЇ (PHP)
----------------------------------------------- */
.wrap__account-content .form-row-two-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-m) !important;
  margin-bottom: var(--space-m) !important;
}

.wrap__account-content .form-group {
  margin-bottom: var(--space-m) !important;
}

.wrap__account-content .form-group label {
  display: block !important;
  font-size: var(--text-s) !important;
  font-weight: 500 !important;
  color: var(--title) !important;
  margin-bottom: 6px !important;
}

/* -----------------------------------------------
   6. КНОПКИ
----------------------------------------------- */
.wrap__account-content button[type="submit"],
.wrap__account-content .woocommerce-Button,
.wrap__account-content .woocommerce-button {
  display: block !important;
  width: 100% !important;
  height: 52px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: var(--text-m) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  text-align: center !important;
  margin-top: var(--space-s) !important;
}

.wrap__account-content button[type="submit"]:hover,
.wrap__account-content .woocommerce-Button:hover {
  background: var(--primary-l-1) !important;
}

/* -----------------------------------------------
   7. ДОДАТКОВІ ЕЛЕМЕНТИ
----------------------------------------------- */

/* Remember me */
.wrap__account-content .woocommerce-form-login__rememberme {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-xs) !important;
  margin-bottom: var(--space-m) !important;
  font-size: var(--text-s) !important;
  color: var(--title) !important;
  cursor: pointer !important;
}

.wrap__account-content .woocommerce-form__input-checkbox {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--primary) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Форма submit row */
.wrap__account-content .form-row:last-of-type {
  display: flex !important;
  flex-direction: column !important;
}

/* Забули пароль */
.wrap__account-content .woocommerce-LostPassword {
  margin-top: var(--space-m) !important;
  text-align: right !important;
}

.wrap__account-content .woocommerce-LostPassword a {
  font-size: var(--text-s) !important;
  color: var(--primary) !important;
  text-decoration: none !important;
}

.wrap__account-content .woocommerce-LostPassword a:hover {
  text-decoration: underline !important;
}

/* Текст "надіслати пароль на email" */
.wrap__account-content .u-column2 > form > p:not(.woocommerce-form-row):not(.form-row) {
  font-size: var(--text-xs) !important;
  color: var(--title-l-2) !important;
  line-height: 1.5 !important;
  margin-bottom: var(--space-m) !important;
}

/* Privacy policy */
.wrap__account-content .woocommerce-privacy-policy-text {
  font-size: var(--text-xs) !important;
  color: var(--title-l-2) !important;
  line-height: 1.5 !important;
  margin-bottom: var(--space-m) !important;
}

.wrap__account-content .woocommerce-privacy-policy-text a {
  color: var(--primary) !important;
}

/* -----------------------------------------------
   8. WC NOTICES
----------------------------------------------- */
.wrap__account-content .woocommerce-error,
.myaccount .woocommerce-error {
  background: #fff5f5 !important;
  border-left: 3px solid #e53935 !important;
  border-radius: 8px !important;
  color: #c62828 !important;
  padding: var(--space-s) var(--space-m) !important;
  margin: 0 0 var(--space-l) !important;
  list-style: none !important;
  font-size: var(--text-s) !important;
}

.wrap__account-content .woocommerce-message,
.myaccount .woocommerce-message {
  background: #f0fff4 !important;
  border-left: 3px solid #43a047 !important;
  border-radius: 8px !important;
  color: #2e7d32 !important;
  padding: var(--space-s) var(--space-m) !important;
  margin: 0 0 var(--space-l) !important;
  list-style: none !important;
  font-size: var(--text-s) !important;
}

/* -----------------------------------------------
   9. АДАПТИВ
----------------------------------------------- */
@media (max-width: 768px) {
  .myaccount {
    padding: var(--space-xl) 0 !important;
  }

  .wrap__account-content .col2-set {
    grid-template-columns: 1fr !important;
    gap: var(--space-l) !important;
  }

  .wrap__account-content .form-row-two-cols {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}