/**
 * CSS Cleanup - Fixes background color mismatches and visual inconsistencies
 * Loaded LAST to override all other CSS files
 *
 * Standard palette:
 *   White:      #ffffff / var(--color-white)
 *   Gray-50:    #f8fafc / var(--color-gray-50)   — alternating sections
 *   Gray-100:   #f1f5f9 / var(--color-gray-100)  — card icon backgrounds
 *   Gray-200:   #e2e8f0 / var(--color-gray-200)  — borders
 *   Gray-300:   #cbd5e1                           — subtle borders
 *   Text:       #0f172a / var(--color-text)
 *   Text-light: #475569 / var(--color-text-light)
 *   Primary:    #002D72                            — brand blue
 *   Accent:     #28a745                            — brand green
 */

/* ==========================================================================
   1. STANDARDIZE GRAY BACKGROUNDS
   Different CSS files use #f8f9fa, #f8fafc, #f1f3f5 inconsistently.
   Consolidate to var(--color-gray-50) = #f8fafc
   ========================================================================== */

.section--gray,
.faq-section,
.platforms-section,
.server-solution-section {
    background-color: var(--color-gray-50, #f8fafc) !important;
}

/* Cards and elements inside gray sections should be white */
.section--gray .value-card,
.section--gray .server-feature-card,
.section--gray .tip-card,
.section--gray .protection-layer,
.faq-section .faq-list details {
    background-color: var(--color-white, #ffffff);
}

/* Icon backgrounds in cards - standardize to gray-100 */
.platform-card__icon,
.value-card__icon,
.trust-signal__icon,
.solution-icon,
.contact-method-card__icon {
    background-color: var(--color-gray-100, #f1f5f9) !important;
}

/* Pricing cards on content pages - clean white */
.pricing-preview__card {
    background-color: var(--color-white, #ffffff) !important;
    border: 1px solid var(--color-gray-200, #e2e8f0);
}

/* Ransomware demo elements */
.ransomware-result,
.ransomware-demo__file--restored {
    background-color: var(--color-gray-50, #f8fafc) !important;
}

/* ==========================================================================
   2. MIJN ACCOUNT / LOGIN PAGE
   WooCommerce login forms need theme styling
   ========================================================================== */

/* Fix the huge gap below the forms */
.woocommerce-account:not(.logged-in) .woocommerce {
    min-height: auto !important;
    padding-bottom: 2rem !important;
}

/* Wrapper max-width */
.woocommerce-account:not(.logged-in) .u-columns {
    gap: 1.5rem !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* Style login/register cards */
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Login heading */
.woocommerce-account:not(.logged-in) h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 1rem !important;
}

/* Form rows - Override glass-ui.css grid (line 1572) that forces 2-column grid */
.woocommerce-account .form-row,
.woocommerce-account .woocommerce-form-row {
    display: block !important;
    grid-template-columns: none !important;
    margin-bottom: 1rem !important;
}

/* Labels */
.woocommerce-account:not(.logged-in) .woocommerce-form label {
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 6px !important;
    display: block !important;
    font-size: 0.9375rem !important;
}

/* Form inputs - FULL WIDTH */
.woocommerce-account:not(.logged-in) .woocommerce-form input[type="text"],
.woocommerce-account:not(.logged-in) .woocommerce-form input[type="email"],
.woocommerce-account:not(.logged-in) .woocommerce-form input[type="password"],
.woocommerce-account:not(.logged-in) .woocommerce-form input#username,
.woocommerce-account:not(.logged-in) .woocommerce-form input#password,
.woocommerce-account:not(.logged-in) .woocommerce-form input#reg_email {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.woocommerce-account:not(.logged-in) .woocommerce-form input:focus {
    border-color: #002D72 !important;
    box-shadow: 0 0 0 3px rgba(0, 45, 114, 0.1) !important;
    outline: none !important;
}

/* Submit buttons */
.woocommerce-account:not(.logged-in) .woocommerce-form button[type="submit"],
.woocommerce-account:not(.logged-in) .woocommerce-form .button {
    background: #002D72 !important;
    color: white !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.1s !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
}

.woocommerce-account:not(.logged-in) .woocommerce-form button[type="submit"]:hover {
    background: #001a45 !important;
    transform: translateY(-1px) !important;
}

/* Lost password link */
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a {
    color: #002D72 !important;
    font-size: 0.875rem !important;
}

/* Remember me checkbox */
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0.75rem 0 !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
}

/* Privacy text */
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text {
    font-size: 0.8125rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
}

/* Hide prefooter CTA on login page */
.woocommerce-account:not(.logged-in) .prefooter-cta {
    display: none !important;
}

/* ==========================================================================
   3. CONTACT FORM FIELDS - more visible
   ========================================================================== */

.contact-form .form-input,
.contact-form .form-select,
.contact-form .form-textarea {
    border: 1.5px solid var(--color-gray-300, #cbd5e1) !important;
    border-radius: var(--radius-md, 10px) !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    background: var(--color-white, #fff) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.contact-form .form-input:focus,
.contact-form .form-select:focus,
.contact-form .form-textarea:focus {
    border-color: var(--color-primary, #002D72) !important;
    box-shadow: 0 0 0 3px rgba(0, 45, 114, 0.1) !important;
    outline: none !important;
}

.contact-form .form-label {
    font-weight: 600;
    color: var(--color-text, #0f172a);
    margin-bottom: 6px;
}

/* Submit button */
.contact-form button[type="submit"] {
    margin-top: var(--space-4, 1rem);
}

/* ==========================================================================
   4. OVER ONS - AVATAR IMPROVEMENT
   ========================================================================== */

.about-photo-card-new__placeholder--large {
    width: 160px !important;
    height: 160px !important;
    background: linear-gradient(135deg, #002D72 0%, #0a4da3 100%) !important;
    border: 3px solid rgba(40, 167, 69, 0.4) !important;
    box-shadow: 0 12px 40px rgba(0, 45, 114, 0.3) !important;
}

.about-photo-card-new__badges {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.about-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-gray-100, #f1f5f9);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light, #475569);
}

.about-badge i {
    color: var(--color-primary, #002D72);
    font-size: 0.875rem;
}

/* ==========================================================================
   5. GENERAL POLISH
   ========================================================================== */

/* Ensure all cards have consistent border radius */
.value-card,
.server-feature-card,
.tip-card,
.usecase-card,
.solution-card,
.contact-method-card,
.package-highlight {
    border-radius: var(--radius-lg, 14px);
}

/* Consistent card shadows */
.value-card,
.server-feature-card,
.contact-method-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Footer KvK/BTW bar */
.footer-registration {
    display: flex;
    justify-content: center;
    gap: var(--space-6, 1.5rem);
    padding: var(--space-4, 1rem) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: var(--space-6, 1.5rem);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}