/* ==========================================================================
   Вход, регистрация, восстановление пароля
   --------------------------------------------------------------------------
   Одна карточка с переключателем вместо двух форм рядом. Поверхности заданы
   плотными значениями, а не токенами с низкой прозрачностью: формы лежат
   прямо на фоне страницы, и 5-процентная заливка читается как пустое место.
   У токенов проставлены запасные цвета на случай, если основной стиль темы
   не загрузится.
   ========================================================================== */

.woocommerce-account:not(.logged-in) .entry-content > .woocommerce {
    max-width: 460px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Карточка
   -------------------------------------------------------------------------- */

.dim-auth {
    padding: 22px 24px 24px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 14px;
    background: #1a1552;
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

/* Переключатель: два равных сегмента, активный подсвечен акцентом */
.dim-auth__tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 22px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
}

.dim-auth__tab {
    flex: 1 1 50%;
    padding: 11px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, 0.60);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.dim-auth__tab:hover {
    color: #ffffff;
}

.dim-auth__tab.is-active {
    background: linear-gradient(180deg, #ff2ad0, #d3149f);
    color: #ffffff;
    box-shadow: 0 8px 20px -12px rgba(235, 24, 192, 0.95);
}

.dim-auth__pane[hidden] { display: none; }

.dim-auth form { margin: 0; }

/* --------------------------------------------------------------------------
   Поля
   -------------------------------------------------------------------------- */

.woocommerce-account .form-row {
    margin: 0 0 14px !important;
    padding: 0 !important;
    width: 100%;
}

.woocommerce-account .form-row > label,
.woocommerce-account label[for="user_login"] {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 600;
}

.woocommerce-account .form-row .required {
    border: 0;
    color: var(--dim-accent, #eb18c0);
    text-decoration: none;
}

.woocommerce-account input.input-text,
.woocommerce-account input[type="password"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="text"] {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 16px !important; /* ниже 16px iOS зумит страницу при фокусе */
    line-height: 1.4;
    box-shadow: none !important;
}

.woocommerce-account input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.woocommerce-account input:focus {
    outline: 0;
    border-color: var(--dim-accent, #eb18c0) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 0 0 3px rgba(235, 24, 192, 0.25) !important;
}

/* Автозаполнение. Браузеры красят подставленные поля своим светлым фоном и
   тёмным текстом — на тёмной карточке получается белая плашка. Убрать фон
   напрямую нельзя, поэтому закрашиваем его толстой внутренней тенью и
   отдельно задаём цвет подставляемого текста. */
.woocommerce-account input:-webkit-autofill,
.woocommerce-account input:-webkit-autofill:hover,
.woocommerce-account input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #2a255e inset !important;
    box-shadow: 0 0 0 1000px #2a255e inset !important;
    caret-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
}

/* Сгенерированный пароль набираем моноширинным — его переписывают руками */
.woocommerce-account #reg_password {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-ResetPassword button,
.woocommerce-account .woocommerce-ResetPassword input[type="submit"] {
    display: block;
    width: 100%;
    margin: 4px 0 0 !important;
    padding: 14px 20px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ff2ad0, #d3149f) !important;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: 0 12px 28px -14px rgba(235, 24, 192, 0.95) !important;
    transition: filter 0.16s ease, transform 0.16s ease;
}

.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-ResetPassword button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.dim-pass-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 10px;
}

.dim-pass-btn {
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.dim-pass-btn:hover {
    border-color: var(--dim-accent, #eb18c0);
    background: rgba(235, 24, 192, 0.22);
}

/* --------------------------------------------------------------------------
   Обещание бесплатных символов и ловушка для ботов
   -------------------------------------------------------------------------- */

.dim-reg-gift {
    margin: 0 0 16px !important;
    padding: 12px 14px;
    border: 1px solid rgba(235, 24, 192, 0.45);
    border-radius: 10px;
    background: rgba(235, 24, 192, 0.12);
    color: rgba(255, 255, 255, 0.90);
    font-size: 14px;
    line-height: 1.5;
}

.dim-reg-gift strong { color: #ffffff; }

/* Ловушка невидима человеку, но остаётся в разметке: боты пропускают поля
   с type=hidden и display:none, поэтому уводим за экран. */
.dim-reg-trap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Мелочи
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .woocommerce-form-register p:not(.form-row):not(.dim-reg-gift),
.woocommerce-account .lost_password {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1.55;
}

.woocommerce-account .woocommerce-privacy-policy-text a,
.woocommerce-account .lost_password a {
    color: var(--dim-link, #ff6fd8);
}

.woocommerce-account .lost_password { margin: 12px 0 0; text-align: center; }

.woocommerce-account .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}

.woocommerce-account .woocommerce-form-login__rememberme input {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #eb18c0;
}

/* Капча во всю ширину карточки. data-size="flexible" растягивает сам виджет,
   но у iframe остаётся собственная ширина — дожимаем стилем. */
.cf-turnstile {
    margin: 0 0 14px;
    width: 100%;
}

.cf-turnstile iframe {
    width: 100% !important;
}

/* Turnstile кладёт в контейнер не только рамку с проверкой, но и служебное
   поле с токеном. В серверной разметке между полем пароля и капчей нет ничего,
   значит короткая серая полоска над виджетом появляется именно отсюда —
   поле получает видимую коробку от общих стилей формы. Прячем: скрытое поле
   всё равно уходит в POST. */
.cf-turnstile input {
    display: none !important;
}

.cf-turnstile > *:not(iframe):not(input) {
    line-height: 0;
}

/* --------------------------------------------------------------------------
   Восстановление пароля
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-ResetPassword {
    max-width: 460px;
    margin: 0 auto;
    padding: 22px 24px 24px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 14px;
    background: #1a1552;
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

.woocommerce-account .woocommerce-ResetPassword > p:first-child {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.6;
}

.woocommerce-account .woocommerce-ResetPassword .form-row-first,
.woocommerce-account .woocommerce-ResetPassword .form-row {
    width: 100% !important;
    float: none !important;
}

/* --------------------------------------------------------------------------
   Уведомления
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
    max-width: 460px;
    margin: 0 auto 18px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 14px;
    line-height: 1.55;
    list-style: none;
}

.woocommerce-account .woocommerce-error {
    border-color: rgba(224, 73, 95, 0.55) !important;
    background: rgba(224, 73, 95, 0.12) !important;
}

.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before {
    content: none !important;
}

.woocommerce-account .woocommerce-error a,
.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a {
    color: var(--dim-link, #ff6fd8);
}

@media (max-width: 520px) {
    .dim-auth,
    .woocommerce-account .woocommerce-ResetPassword { padding: 18px 16px 20px; }
    .dim-auth__tab { font-size: 14px; padding: 10px 8px; }
}

/* --------------------------------------------------------------------------
   Кнопка «показать пароль»
   --------------------------------------------------------------------------
   WooCommerce кладёт рядом с полем пароля <button class="show-password-input">
   и рисует ей глаз своим иконочным шрифтом. Этот шрифт на сайте не
   подключается, поэтому кнопка схлопывалась в серую чёрточку 15×5 пикселей
   под полем. Возвращаем ей смысл: ставим внутрь поля справа и рисуем глаз
   символом, а не шрифтом. */

.password-input {
    position: relative;
    display: block;
}

.password-input input {
    padding-right: 46px !important;
}

.show-password-input {
    position: absolute !important;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 15px !important;
    line-height: 32px !important;
    text-align: center;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.16s ease, background-color 0.16s ease;
}

.show-password-input::after { content: "👁"; }

/* Класс переключается самим WooCommerce, когда пароль показан */
.show-password-input.display-password::after { content: "🙈"; }

.show-password-input:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-50%) !important;
}


/* Скрытие вкладки — классом: минификация HTML в LiteSpeed вырезает атрибут
   hidden, и обе формы показывались одновременно. */
.dim-auth__pane.is-off { display: none !important; }