/**
 * Global Styles
 * 
 * Общие стили для всего сайта:
 * - Темная тема
 * - Типографика
 * - Кнопки
 * - Формы
 * - Чекбоксы
 * 
 * @package HelloElementorChild
 * @since 1.0.0
 */

/* ========================================
   ТЕМНАЯ ТЕМА - БАЗОВЫЕ ЦВЕТА
   ======================================== */

:root {
    --color-bg-primary: #0B0E14;
    --color-bg-secondary: #151925;
    --color-bg-tertiary: #1B2032;
    
    --color-text-primary: #fff;
    --color-text-secondary: #E6EAF2;
    --color-text-muted: #5A6075;
    
    --color-accent-primary: #8A94FF;
    --color-accent-hover: #7C86F5;
    --color-accent-link: #8A94FF;
    
    --color-error: #FF6B6B;
    --color-success: #4CAF50;
    --color-warning: #FFA726;
    
    --color-border: #2A314A;
    
    --font-primary: "Inter", Sans-serif;
    
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 24px;
    --spacing-lg: 48px;
}

/* ========================================
   ТИПОГРАФИКА
   ======================================== */

body {
    font-family: var(--font-primary);
    color: var(--color-text-primary);
}

/* ========================================
   КНОПКИ
   ======================================== */

/* Базовые стили для всех кнопок */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
}

/* PRIMARY BUTTON */
.btn-primary {
    background: var(--color-accent-primary);
    color: #FFFFFF;
    padding: 14px;
}

.btn-primary:hover {
    background: var(--color-accent-hover);
    color: #FFFFFF;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 1;
}

/* SECONDARY BUTTON */
.btn-secondary {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    padding: 12px;
    gap: 10px;
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: #1A2033;
    color: #FFFFFF;
    border-color: var(--color-accent-primary);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    border-color: var(--color-bg-tertiary);
    cursor: not-allowed;
    opacity: 1;
}


/* ========================================
   ФОРМЫ
   ======================================== */

/* All text input fields */
input[type="text"]:not(.cbc input):not(.cbc__modal input):not(.wpfSingleInputSearch input),
input[type="email"]:not(.cbc input):not(.cbc__modal input),
input[type="password"]:not(.cbc input):not(.cbc__modal input),
input[type="number"]:not(.cbc input):not(.cbc__modal input),
input[type="tel"]:not(.cbc input):not(.cbc__modal input),
input[type="url"]:not(.cbc input):not(.cbc__modal input),
input[type="search"]:not(.cbc input):not(.cbc__modal input):not(.wpfSingleInputSearch input),
input[type="date"]:not(.cbc input):not(.cbc__modal input),
textarea:not(.cbc textarea):not(.cbc__modal textarea),
select:not(.cbc select):not(.cbc__modal select) {
    background: #111420;
    border: 1px solid #232838 !important;
    border-radius: 6px !important;
    padding: 16px 20px;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

/* Select specific styles */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../img/icons/arrow.svg');
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px 12px;
    padding-right: 50px;
    cursor: pointer;
}

/* Placeholder */
input:not(.cbc input):not(.cbc__modal input)::placeholder,
textarea:not(.cbc textarea):not(.cbc__modal textarea)::placeholder {
    color: #6C738A;
}

/* Active/Focus состояние */
input[type="text"]:not(.cbc input):not(.cbc__modal input):focus,
input[type="email"]:not(.cbc input):not(.cbc__modal input):focus,
input[type="password"]:not(.cbc input):not(.cbc__modal input):focus,
input[type="number"]:not(.cbc input):not(.cbc__modal input):focus,
input[type="tel"]:not(.cbc input):not(.cbc__modal input):focus,
input[type="url"]:not(.cbc input):not(.cbc__modal input):focus,
input[type="search"]:not(.cbc input):not(.cbc__modal input):focus,
input[type="date"]:not(.cbc input):not(.cbc__modal input):focus,
textarea:not(.cbc textarea):not(.cbc__modal textarea):focus,
select:not(.cbc select):not(.cbc__modal select):focus {
    border-color: var(--color-accent-primary);
    outline: none;
}

/* Textarea специфичные стили */
textarea:not(.cbc textarea):not(.cbc__modal textarea) {
    min-height: 120px;
    resize: vertical;
}


/* ========================================
   ЧЕКБОКСЫ (ГЛОБАЛЬНЫЕ) - С SVG ГАЛОЧКОЙ
   ======================================== */

/* Базовые стили чекбокса - перебивают все WooCommerce стили */
input[type="checkbox"],
.woocommerce input[type="checkbox"],
.woocommerce form input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.input-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 2px 8px 0 0 !important;
    padding: 0 !important;
    border: 1px solid #232838 !important;
    border-radius: 4px !important;
    background: #111420 !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: top !important;
    text-align: left !important;
}

input[type="checkbox"]:hover,
.woocommerce input[type="checkbox"]:hover,
.input-checkbox:hover {
    border-color: var(--color-accent-primary) !important;
}

input[type="checkbox"]:checked,
.woocommerce input[type="checkbox"]:checked,
.input-checkbox:checked {
    background: var(--color-accent-primary) !important;
    border-color: var(--color-accent-primary) !important;
}

/* SVG галочка вместо CSS */
input[type="checkbox"]:checked::after,
.woocommerce input[type="checkbox"]:checked::after,
.input-checkbox:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 8px !important;
    background-image: url('../img/icons/checkmark.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    border: none !important;
}

input[type="checkbox"]:checked:hover,
.woocommerce input[type="checkbox"]:checked:hover,
.input-checkbox:checked:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}

/* ========================================
   ССЫЛКИ
   ======================================== */

a {
    color: var(--color-accent-link);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-accent-hover);
}

a:active {
    color: var(--color-accent-hover);
}

/* ========================================
   ADMINBAR BUTTON (если появляется)
   ======================================== */

/* WordPress Admin Bar Search */
#wp-admin-bar-search .adminbar-input {
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-family: var(--font-primary) !important;
    font-size: 13px !important;
    color: var(--color-text-secondary) !important;
    margin-right: 4px !important;
}

#wp-admin-bar-search .adminbar-input:focus {
    border-color: var(--color-accent-primary) !important;
    outline: none !important;
}

input[type="submit"].adminbar-button,
button.adminbar-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--color-accent-primary) !important;
    color: #FFFFFF !important;
    padding: 4px 12px !important;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
}

input[type="submit"].adminbar-button:hover,
button.adminbar-button:hover {
    background: var(--color-accent-hover) !important;
    color: #FFFFFF !important;
}

/* ========================================
   SPO ОПЦИИ В MENU-CART (ГЛОБАЛЬНО)
   ======================================== */

/* Стили для menu-cart должны быть глобальными, так как menu-cart отображается на всех страницах */

/* Все div'ы внутри variation в menu-cart */
.elementor-menu-cart__product .variation > div,
.elementor-widget-woocommerce-menu-cart .variation > div {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Label опции (Bot A:, Bot B:) - нечетные div'ы */
.elementor-menu-cart__product .variation > div:nth-child(odd),
.elementor-widget-woocommerce-menu-cart .variation > div:nth-child(odd) {
    color: #E6EAF2 !important;
    margin-right: 4px !important;
}

/* Value опции (100 Points) - четные div'ы */
.elementor-menu-cart__product .variation > div:nth-child(even),
.elementor-widget-woocommerce-menu-cart .variation > div:nth-child(even) {
    color: #A8AFC3 !important;
}

/* Перенос строки после каждой опции */
.elementor-menu-cart__product .variation > div:nth-child(even)::after,
.elementor-widget-woocommerce-menu-cart .variation > div:nth-child(even)::after {
    content: "" !important;
    display: block !important;
    height: 4px !important;
}

/* Убираем ВСЕ отступы у параграфа */
.elementor-menu-cart__product .variation p,
.elementor-widget-woocommerce-menu-cart .variation p,
.elementor-menu-cart__product .variation > div p,
.elementor-widget-woocommerce-menu-cart .variation > div p {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: inherit !important;
    border: none !important;
    background: none !important;
}

/* Убираем лишние отступы у variation контейнера */
.elementor-menu-cart__product .variation,
.elementor-widget-woocommerce-menu-cart .variation {
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Перекрываем любые Elementor глобальные стили */
.elementor-widget-woocommerce-menu-cart .variation * {
    font-family: 'Inter', sans-serif !important;
}


/* ========================================
   WOOCOMMERCE NOTICES (ГЛОБАЛЬНО)
   ======================================== */

/* Обертка уведомлений */
.woocommerce-notices-wrapper {
    margin-bottom: var(--spacing-md);
}

/* СБРОС стандартных стилей WooCommerce и применение единого дизайна */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    /* Сброс стандартных стилей */
    list-style: none !important;
    border-top: none !important;
    
    /* Наши стили */
    background: var(--color-bg-secondary) !important;
    border-radius: var(--radius-md) !important;
    padding: 16px 20px !important;
    margin: 0 0 var(--spacing-sm) 0 !important;
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    border-left: 4px solid !important;
    color: var(--color-text-secondary) !important;
    position: relative !important;
    width: auto !important;
    word-wrap: break-word !important;
}

/* Success сообщение (зеленая левая граница) */
.woocommerce-message {
    border-left-color: var(--color-success) !important;
}

/* Info сообщение (синяя левая граница) */
.woocommerce-info {
    border-left-color: var(--color-accent-primary) !important;
}

/* Error сообщение (красная левая граница) */
.woocommerce-error {
    border-left-color: var(--color-error) !important;
}

/* Скрыть стандартные иконки WooCommerce перед уведомлениями */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none !important;
    content: none !important;
}

/* Ссылки внутри уведомлений */
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: var(--color-accent-link) !important;
    text-decoration: underline !important;
    margin-left: 8px !important;
    outline: none !important;
}

.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover {
    color: var(--color-accent-hover) !important;
}

.woocommerce-message a:focus,
.woocommerce-info a:focus,
.woocommerce-error a:focus,
.woocommerce-message a:focus-visible,
.woocommerce-info a:focus-visible,
.woocommerce-error a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Кнопка "View cart" в уведомлении - использует btn-primary стили */
.woocommerce-message a.button,
.woocommerce-message a.wc-forward {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--color-accent-primary) !important;
    color: #FFFFFF !important;
    padding: 14px !important;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    border: none !important;
    margin-left: 8px !important;
}

.woocommerce-message a.button:hover,
.woocommerce-message a.wc-forward:hover {
    background: var(--color-accent-hover) !important;
    color: #FFFFFF !important;
}

/* Убрать focus с самого уведомления */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* ========================================
   SIGNIN FORM
   ======================================== */

.signin-form-wrapper {
    max-width: 616px;
}

.signin-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.signin-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.signin-form__label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A8AFC3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.signin-form__input {
    /* Используем глобальные стили из input[type="email"], input[type="password"] */
}

.signin-form__forgot {
    margin-top: 0;
}

.signin-form__forgot a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #8A94FF;
    text-decoration: none;
    transition: color 0.3s ease;
}

.signin-form__forgot a:hover {
    color: #7C86F5;
}

.signin-form__button {
    width: 100%;
    margin-top: 0;
}

/* ========================================
   SIGNUP FORM
   ======================================== */

.signup-form-wrapper {
    max-width: 616px;
}

.signup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Row для двух полей в одной строке */
.signup-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.signup-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.signup-form__label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A8AFC3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.signup-form__label .required {
    color: var(--color-error);
    margin-left: 2px;
}

.signup-form__input {
    /* Используем глобальные стили из input[type="text"], input[type="email"], input[type="password"] */
}

/* Checkboxes контейнер - два чекбокса в одной строке */
.signup-form__checkboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}

.signup-form__checkbox-item {
    display: flex;
}

.signup-form__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.signup-form__checkbox-label input[type="checkbox"] {
    /* Используем глобальные стили чекбокса */
}

.signup-form__checkbox-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #E6EAF2;
}

.signup-form__checkbox-text a {
    color: #8A94FF;
    text-decoration: none;
    transition: color 0.3s ease;
}

.signup-form__checkbox-text a:hover {
    color: #7C86F5;
}

.signup-form__button {
    width: 100%;
    margin-top: 4px;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .signup-form__row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .signup-form__checkboxes {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* ========================================
   EMAIL VERIFICATION NOTICE
   ======================================== */

.tt-unverified-notice {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent-primary);
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 700px;
    margin: 0 auto;
}

.tt-unverified-notice__icon {
    flex-shrink: 0;
}

.tt-unverified-notice__icon svg {
    display: block;
}

.tt-unverified-notice__content {
    flex: 1;
}

.tt-unverified-notice__title {
    margin: 0 0 12px;
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary);
}

.tt-unverified-notice__text {
    margin: 0 0 16px;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.tt-unverified-notice__help {
    margin: 0 0 20px;
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.tt-unverified-notice__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Использует стили .btn-primary из global.css */
}

/* Мобильная версия */
@media (max-width: 768px) {
    .tt-unverified-notice {
        flex-direction: column;
        gap: 16px;
        padding: 24px;
    }
    
    .tt-unverified-notice__icon {
        align-self: center;
    }
    
    .tt-unverified-notice__title {
        font-size: 20px;
        text-align: center;
    }
    
    .tt-unverified-notice__text,
    .tt-unverified-notice__help {
        text-align: center;
    }
    
    .tt-unverified-notice__button {
        width: 100%;
    }
}