/* HAINT Brand Color Overrides */
/* Based on COLOR_PALETTE_SPECIFICATION.md */

:root {
    --haint-sky-blue: #2C88D9; /* Updated to Deep Sky Blue for better contrast/legibility */
    --haint-dark-text: #1E1E1E;
    --haint-light-blue: #9DD9F5;
    --haint-bg-light: #E8F4FD; /* Light background for input fields */
    --haint-bg-notification: #B8D9F0; /* Darker blue background for notifications (darker than input fields) */
    --haint-hover-blue: #C2E5FB;
    --haint-active-blue: #5AB3E8;
}

/* Logo Size - увеличенный для HAINT */
.brand img {
    height: 56px; /* Увеличен с 32px до 56px - полная высота header */
    width: auto;
}

/* Hero Brand Name (HAINT надпись над заголовком) */
.hero-brand {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    color: var(--haint-sky-blue);
    letter-spacing: 0.05em;
    text-align: left; /* Выравнивание влево */
}

/* Hero section - выравнивание влево, но прижато вправо */
.hero > div:first-child {
    text-align: left;
    margin-left: auto; /* Прижимаем блок к правому краю левой колонки */
    max-width: 500px; /* Ограничиваем ширину текстового блока */
}

/* Увеличиваем gap между текстом и изображением в Hero */
.hero {
    gap: 80px; /* Увеличен с 24px до 80px для больше "дыхания" между колонками */
}

.hero h1 {
    text-align: left;
}

.hero p {
    text-align: left;
}

/* Кнопки и ссылки в hero - выравнивание влево */
.hero .button-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Выравнивание по левому краю */
}

.hero .link-row {
    justify-content: flex-start;
}

.hero .trust-list {
    text-align: left;
    list-style-position: outside;
    padding-left: 20px;
}

/* Links */
a {
    color: var(--haint-sky-blue);
}

a:hover {
    color: var(--haint-sky-blue);
}

.link-secondary {
    color: var(--haint-sky-blue);
}

.link-secondary:hover {
    color: var(--haint-sky-blue);
}

/* Header navigation links */
.main-menu a:hover {
    color: var(--haint-sky-blue);
}

.main-menu a[aria-current="page"],
.main-menu a.is-active {
    color: var(--haint-sky-blue);
    border-bottom-color: var(--haint-sky-blue);
}

.account-link:hover {
    color: var(--haint-sky-blue);
}

/* Buttons */
.button {
    background-color: var(--haint-sky-blue);
}

.button:hover {
    background-color: var(--haint-active-blue);
}

.button-primary {
    background-color: var(--haint-sky-blue);
}

.button-primary:hover {
    background-color: var(--haint-active-blue);
}

/* Status Messages */
.status-message.success {
    background-color: var(--haint-bg-notification);
    border: 1px solid var(--haint-light-blue);
    color: var(--haint-dark-text);
}

.status-message.info {
    background-color: var(--haint-bg-notification);
    border: 1px solid var(--haint-light-blue);
    color: var(--haint-dark-text);
}

/* Email notification style - HAINT blue palette */
.email-notification {
    background-color: var(--haint-bg-notification);
    border-left: 4px solid var(--haint-sky-blue);
    color: var(--haint-dark-text);
}

/* Progress Bar */
.progress-fill {
    background: linear-gradient(90deg, var(--haint-sky-blue) 0%, var(--haint-light-blue) 100%);
}

.progress-stage {
    color: var(--haint-sky-blue);
}

.progress-project {
    color: var(--haint-sky-blue);
}

/* Results */
.results-info strong {
    color: var(--haint-sky-blue);
}

.results-actions a {
    color: var(--haint-sky-blue);
}

/* Prerequisites (Collapsible) */
.prerequisites-collapsed {
    background: var(--haint-bg-light);
    border: 1px solid var(--haint-light-blue);
    box-shadow: 0 2px 4px rgba(115, 198, 245, 0.08);
}

.status-badge.status-complete {
    background: var(--haint-sky-blue);
    color: white;
}

.collapsed-text {
    color: var(--haint-dark-text);
}

.expand-btn {
    border: 1px solid var(--haint-light-blue);
    color: var(--haint-dark-text);
}

.expand-btn:hover {
    background: var(--haint-hover-blue);
    border-color: var(--haint-sky-blue);
    color: var(--haint-sky-blue);
}

/* Step Cards - цвет цифры голубой для брендового акцента */
.step-icon {
    color: var(--haint-sky-blue); /* Цифра внутри голубая для брендового акцента */
}

/* Perfect for section - центрирование текста в карточках */
.testimonial-card {
    text-align: center;
}

.testimonial-card h3 {
    text-align: center;
}

.testimonial-card p {
    text-align: center;
}


/* CTA Buttons */
.cta-primary {
    background: var(--haint-sky-blue);
}

.cta-primary:hover {
    background: var(--haint-active-blue);
}

.cta-outline {
    color: var(--haint-sky-blue);
    border: 1px solid var(--haint-sky-blue);
}

.cta-outline:hover {
    background-color: var(--haint-bg-light);
    color: var(--haint-sky-blue);
}

/* Security Page */
.security-info {
    border-left: 4px solid var(--haint-sky-blue);
}

.security-contact a {
    color: var(--haint-sky-blue);
}

.security-contact a:hover {
    border-bottom-color: var(--haint-sky-blue);
}

/* Footer (if needed) */
.site-footer-min a:hover {
    color: var(--haint-sky-blue);
}

/* Form Labels */
label {
    color: var(--haint-sky-blue);
}

/* Form Inputs - голубоватый фон вместо зеленоватого */
input[type="email"],
input[type="password"],
input[type="number"],
input[type="text"],
textarea {
    background-color: var(--haint-bg-light) !important;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="text"]:focus,
textarea:focus {
    background-color: var(--haint-bg-light) !important;
}

/* Override browser autofill styles with HAINT blue */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--haint-bg-light) inset !important;
    -webkit-text-fill-color: #333 !important;
}

/* Focus states for accessibility */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--haint-sky-blue);
    box-shadow: 0 0 0 2px rgba(44, 136, 217, 0.2);
}

button:focus {
    box-shadow: 0 0 0 3px rgba(44, 136, 217, 0.3);
}

/* Unified focus styles for accessibility */
*:focus-visible {
    outline: 2px solid var(--haint-sky-blue);
    outline-offset: 2px;
}

/* Button container with additional top margin */
.button-container-top {
    margin-top: 1rem;
}

/* Hidden utility class for dynamic show/hide */
.hidden {
    display: none !important;
}

/* Trial activation error message spacing */
.trial-error-message {
    margin-top: 1rem;
}

/* Trial status colors */
.trial-status-active {
    color: #2e7d32;
    font-weight: 600;
}

.trial-status-expired {
    color: #d32f2f;
    font-weight: 600;
}

.trial-status-expiring-soon {
    color: #f57c00;
    font-weight: 600;
}

/* Success message styling */
.trial-success-message {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background-color: rgba(46, 125, 50, 0.1);
    border: 1px solid #2e7d32;
    border-radius: 4px;
    color: #2e7d32;
}

/* Loading indicator for trial section */
.trial-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--haint-text-secondary, #666);
}

.trial-loading::before {
    content: '';
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--haint-sky-blue, #2c88d9);
    border-top-color: transparent;
    border-radius: 50%;
    animation: trial-spin 0.8s linear infinite;
}

@keyframes trial-spin {
    to { transform: rotate(360deg); }
}