/* Classic Theme Styles - Helles Design */

:root {
    --classic-bg: #f3f4f6;
    --classic-bg-alt: #e5e7eb;
    --classic-card: #ffffff;
    --classic-border: #e2e8f0;
    --classic-text: #1e293b;
    --classic-text-secondary: #64748b;
    --classic-primary: #2563eb;
    --classic-primary-hover: #1d4ed8;
}

/* CRITICAL: Footer always at bottom */
html {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
}

html body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--classic-bg);
    color: var(--classic-text);
}

html body > footer ~ * {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: 0 !important;
}
html body > #livechat-widget,
html body > #marketing-popup-container,
html body > script,
html body > style,
html body > template,
html body > noscript {
    flex: 0 0 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body > nav,
html body > header {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

html body > main {
    flex: 1 0 auto !important;
    background: var(--classic-bg);
    padding-bottom: 2rem;
}

html body > footer {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    margin-top: auto !important;
    width: 100% !important;
    order: 999 !important;
}

/* Cards */
.theme-card {
    background: var(--classic-card);
    border: 1px solid var(--classic-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Buttons */
.theme-button {
    background: var(--classic-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.theme-button:hover {
    background: var(--classic-primary-hover);
}

/* Account Pages */
.account-page {
    padding: 2rem 0;
}


.account-card {
    background: var(--classic-card);
    border: 1px solid var(--classic-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.account-card h1,
.account-card h2 {
    color: var(--classic-text);
    margin-bottom: 1rem;
}

.account-card p {
    color: var(--classic-text-secondary);
}

/* Forms */
.theme-input {
    background: var(--classic-bg);
    border: 1px solid var(--classic-border);
    color: var(--classic-text);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
}

.theme-input:focus {
    outline: none;
    border-color: var(--classic-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Tables */
.theme-table {
    width: 100%;
    border-collapse: collapse;
}

.theme-table th,
.theme-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--classic-border);
    color: var(--classic-text);
}

.theme-table th {
    background: var(--classic-bg-alt);
    font-weight: 600;
    color: var(--classic-text);
}

.theme-table tr:hover {
    background: rgba(37, 99, 235, 0.04);
}

/* Prose */
.prose i {
    margin-right: 0.25rem;
}

.prose {
    color: var(--classic-text-secondary);
}

.prose h1, .prose h2, .prose h3 {
    color: var(--classic-text);
}

/* Footer */
footer {
    background: var(--classic-bg-alt) !important;
    border-top: 1px solid var(--classic-border) !important;
    color: var(--classic-text-secondary) !important;
}

footer a {
    color: var(--classic-text-secondary) !important;
}

footer a:hover {
    color: var(--classic-text) !important;
}

/* ============================================
   LIGHT THEME COLOR OVERRIDES
   Tailwind dark classes -> light equivalents
   ============================================ */

/* Text colors */
.text-white {
    color: var(--classic-text) !important;
}

.text-gray-300,
.text-gray-400 {
    color: var(--classic-text-secondary) !important;
}

.text-gray-500 {
    color: #94a3b8 !important;
}

.text-gray-600,
.text-gray-700 {
    color: var(--classic-text) !important;
}

/* Background colors */
.bg-gray-900 {
    background-color: var(--classic-bg) !important;
}

.bg-gray-800 {
    background-color: #ffffff !important;
}

.bg-gray-700 {
    background-color: #f1f5f9 !important;
}

.bg-gray-800\/50 {
    background-color: rgba(241, 245, 249, 0.5) !important;
}

.bg-gray-700\/50 {
    background-color: rgba(241, 245, 249, 0.5) !important;
}

/* Border colors */
.border-gray-700 {
    border-color: var(--classic-border) !important;
}

.border-gray-600 {
    border-color: #cbd5e1 !important;
}

/* ============================================
   COLORED BUTTON & ELEMENT OVERRIDES
   Keep white text on colored backgrounds
   (must come AFTER the global .text-white rule)
   ============================================ */

/* Primary colored backgrounds -> white text */
.bg-green-600, .bg-green-700,
.bg-red-600, .bg-red-700,
.bg-blue-600, .bg-blue-700,
.bg-yellow-600, .bg-yellow-700,
.bg-purple-600, .bg-purple-700,
.bg-amber-600, .bg-amber-700,
.bg-indigo-600, .bg-indigo-700,
.bg-orange-600, .bg-orange-700 {
    color: #ffffff !important;
}

/* Hover variants keep white text */
.hover\:bg-green-700:hover,
.hover\:bg-red-700:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-yellow-700:hover,
.hover\:bg-purple-700:hover,
.hover\:bg-amber-700:hover,
.hover\:bg-indigo-700:hover {
    color: #ffffff !important;
}

/* Child elements inside colored backgrounds */
.bg-green-600 i, .bg-red-600 i, .bg-blue-600 i,
.bg-yellow-600 i, .bg-purple-600 i,
.bg-green-600 span, .bg-red-600 span, .bg-blue-600 span,
.bg-yellow-600 span, .bg-purple-600 span {
    color: #ffffff !important;
}

/* Secondary/Cancel buttons */
button.bg-gray-600,
a.bg-gray-600 {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

button.bg-gray-600:hover,
a.bg-gray-600:hover {
    background-color: #d1d5db !important;
}

/* Gray hover states */
.hover\:bg-gray-600:hover {
    background-color: #e5e7eb !important;
}

.hover\:bg-gray-700:hover {
    background-color: #e2e8f0 !important;
}

/* ============================================
   ALERT / STATUS BOX OVERRIDES
   ============================================ */

/* Yellow alert (Installation running) */
.bg-yellow-800 {
    background-color: #fef3c7 !important;
}

.bg-yellow-800 h3,
.bg-yellow-800 p {
    color: #92400e !important;
}

.bg-yellow-800 .text-yellow-200,
.bg-yellow-800 .text-yellow-300 {
    color: #a16207 !important;
}

.bg-yellow-800 .text-yellow-400 {
    color: #d97706 !important;
}

.border-yellow-600 {
    border-color: #f59e0b !important;
}

/* Blue alert (Reinstall running) */
.bg-blue-800 {
    background-color: #dbeafe !important;
}

.bg-blue-800 h3,
.bg-blue-800 p {
    color: #1e40af !important;
}

.bg-blue-800 .text-blue-200,
.bg-blue-800 .text-blue-300 {
    color: #1d4ed8 !important;
}

.bg-blue-800 .text-blue-400 {
    color: #2563eb !important;
}

.border-blue-600 {
    border-color: #3b82f6 !important;
}

/* ============================================
   SUSPENDED DASHBOARD OVERRIDES
   ============================================ */

.bg-red-900\/50 {
    background-color: #fef2f2 !important;
}

.bg-red-900\/30 {
    background-color: #fef2f2 !important;
}

.bg-blue-900\/50 {
    background-color: #eff6ff !important;
}

.bg-green-900\/50 {
    background-color: #f0fdf4 !important;
}

.bg-yellow-900\/50 {
    background-color: #fffbeb !important;
}

.bg-purple-900\/50 {
    background-color: #faf5ff !important;
}

.bg-orange-900\/50 {
    background-color: #fff7ed !important;
}

.bg-indigo-900\/50 {
    background-color: #eef2ff !important;
}

/* ============================================
   MODAL OVERRIDES
   ============================================ */

/* Modal body */
.bg-gray-800.rounded-lg.shadow-xl {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

/* Modal form elements (select, input inside modals) */
select.bg-gray-700,
input.bg-gray-700,
textarea.bg-gray-700 {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #1e293b !important;
}

/* ============================================
   DASHBOARD-SPECIFIC CARD STYLING
   ============================================ */

/* Dashboard cards get shadow for depth */
.bg-gray-800.rounded-lg {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Inner detail cards */
.bg-gray-700.rounded-lg {
    border: 1px solid #e5e7eb;
}

/* Accent icon text colors - keep vivid */
.fa-circle.text-green-400,
.text-green-400 { color: #22c55e !important; }
.fa-circle.text-red-400,
.text-red-400 { color: #ef4444 !important; }
.fa-circle.text-yellow-400,
.text-yellow-400 { color: #eab308 !important; }
.fa-circle.text-blue-400,
.text-blue-400 { color: #3b82f6 !important; }
.text-purple-400 { color: #a855f7 !important; }
.text-orange-400 { color: #f97316 !important; }
.text-cyan-400 { color: #06b6d4 !important; }
.text-amber-400 { color: #f59e0b !important; }

/* JS-generated notification toasts (positioned fixed) */
.fixed.top-4.right-4 {
    color: #ffffff !important;
}

/* ============================================
   STOREFRONT FORM ELEMENTS
   ============================================ */

select,
.product-option-select,
#laufzeit-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.75rem !important;
    color: #1e293b !important;
    padding: 0.75rem 2.5rem 0.75rem 1rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em 1.25em !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

select:focus,
.product-option-select:focus,
#laufzeit-select:focus {
    outline: none !important;
    border-color: var(--classic-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

select:hover,
.product-option-select:hover,
#laufzeit-select:hover {
    border-color: #9ca3af !important;
}

select option {
    background-color: #ffffff !important;
    color: #1e293b !important;
    padding: 0.5rem !important;
}

input[type="text"].product-option-input,
input[type="number"].product-option-input,
textarea.product-option-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.75rem !important;
    color: #1e293b !important;
}

input[type="text"].product-option-input:focus,
input[type="number"].product-option-input:focus,
textarea.product-option-input:focus {
    outline: none !important;
    border-color: var(--classic-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    border: 2px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: var(--classic-primary) !important;
    border-color: var(--classic-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Gradient boxes keep their own text color */
.bg-gradient-to-r {
    color: white !important;
}

.bg-gradient-to-r .text-white,
.bg-gradient-to-r p,
.bg-gradient-to-r span,
.bg-gradient-to-r div {
    color: white !important;
}

/* Links */
.account-card a {
    color: var(--classic-primary) !important;
}

.account-card a:hover {
    color: var(--classic-primary-hover) !important;
}

/* ============================================
   CMS BLOCK STYLES - Classic (Light)
   ============================================ */

:root {
    /* Block: Hero */
    --block-hero-bg: #f8fafc;
    --block-hero-text: #1e293b;

    /* Block: Hero Register */
    --block-hero-register-bg: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    --block-hero-register-title-color: #1d4ed8;
    --block-hero-register-button-color: #2563eb;
    --block-hero-register-form-bg: #ffffff;
    --block-hero-register-badge-color: #2563eb;

    /* Block: CTA */
    --block-cta-bg: #2563eb;
    --block-cta-text: #ffffff;
    --block-cta-button-bg: #ffffff;
    --block-cta-button-text: #2563eb;

    /* Block: Domain Search */
    --block-domain-search-bg: linear-gradient(180deg, #1e3a5f 0%, #1e293b 100%);
    --block-domain-search-text: #ffffff;

    /* Block: Contact Form */
    --block-contact-bg: #f1f5f9;

    /* Block: Feature Boxes */
    --block-feature-box-bg: #ffffff;
    --block-feature-box-border: #e2e8f0;
    --block-feature-text: #1e293b;

    /* Block: Category Overview */
    --block-category-card-bg: #ffffff;
    --block-category-text: #1e293b;

    /* Block: Payment Methods */
    --block-payment-title-color: #1e293b;
    --block-payment-card-bg: #ffffff;

    /* Block: FAQ */
    --block-faq-bg: #ffffff;
    --block-faq-header-bg: #f8fafc;
    --block-faq-open-bg: #eff6ff;
    --block-faq-open-border: #bfdbfe;

    /* Block: Divider */
    --block-divider-color: #e2e8f0;
}

/* Block: Hero */
.block-hero {
    background-color: var(--block-hero-bg);
    color: var(--block-hero-text);
}

/* Block: Hero Register */
.block-hero-register {
    background: var(--block-hero-register-bg);
}

.block-hero-register .block-title {
    color: var(--block-hero-register-title-color);
}

.block-hero-register .block-button-primary {
    background: var(--block-hero-register-button-color);
    color: #ffffff !important;
}

.block-hero-register .block-form-bg {
    background: var(--block-hero-register-form-bg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-color: var(--classic-border) !important;
}

.block-hero-register .block-badge-icon {
    color: var(--block-hero-register-badge-color);
    background: color-mix(in srgb, var(--block-hero-register-badge-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--block-hero-register-badge-color) 25%, transparent);
}

/* Block: CTA */
.block-cta {
    background-color: var(--block-cta-bg);
    color: var(--block-cta-text);
}

.block-cta h2,
.block-cta p {
    color: #ffffff !important;
}

.block-cta .block-button {
    background-color: var(--block-cta-button-bg);
    color: var(--block-cta-button-text);
}

/* Block: Domain Search */
.block-domain-search {
    background: var(--block-domain-search-bg);
    color: var(--block-domain-search-text);
}

.block-domain-search .text-white,
.block-domain-search h2,
.block-domain-search p {
    color: #ffffff !important;
}

/* Block: Contact Form */
.block-contact-form {
    background-color: var(--block-contact-bg);
}

.block-contact-form h2 {
    color: var(--classic-text) !important;
}

.block-contact-form p {
    color: var(--classic-text-secondary) !important;
}

.block-contact-form input,
.block-contact-form textarea {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #1e293b !important;
}

.block-contact-form input::placeholder,
.block-contact-form textarea::placeholder {
    color: #94a3b8 !important;
}

/* Block: Feature Boxes */
.block-feature-boxes .block-title {
    color: var(--block-feature-text);
}

.block-feature-boxes .block-subtitle {
    color: var(--block-feature-text);
    opacity: 0.7;
}

.block-feature-boxes .block-box {
    background: var(--block-feature-box-bg);
    border: 1px solid var(--block-feature-box-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.block-feature-boxes .block-box-title {
    color: var(--block-feature-text);
}

.block-feature-boxes .block-box-text {
    color: var(--block-feature-text);
    opacity: 0.7;
}

/* Block: Category Overview */
.block-category-overview .block-title {
    color: var(--block-category-text);
}

.block-category-overview .block-subtitle {
    color: var(--block-category-text);
    opacity: 0.7;
}

.block-category-overview .block-card {
    background: var(--block-category-card-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--classic-border);
}

.block-category-overview .block-card-title {
    color: var(--block-category-text);
}

.block-category-overview .block-card-text {
    color: var(--block-category-text);
    opacity: 0.7;
}

/* Block: Payment Methods */
.block-payment-methods .block-title {
    color: var(--block-payment-title-color);
}

.block-payment-methods .block-card {
    background: var(--block-payment-card-bg);
    border: 1px solid var(--classic-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.block-payment-methods span {
    color: var(--classic-text) !important;
}

/* Block: FAQ */
.block-faq .faq-item {
    background: var(--block-faq-bg);
    border: 1px solid var(--classic-border);
}

.block-faq .faq-item button {
    background: var(--block-faq-header-bg);
}

.block-faq .faq-item h3 {
    color: var(--classic-text) !important;
}

.block-faq .faq-answer p {
    color: var(--classic-text-secondary) !important;
}

.block-faq .faq-item.faq-open {
    border-color: var(--block-faq-open-border) !important;
    background: var(--block-faq-open-bg) !important;
}

/* Block: Divider */
.block-divider hr {
    background-color: var(--block-divider-color);
}

/* ============================================
   NAVIGATION HOVER EFFECTS WITH ROUNDED CORNERS
   ============================================ */

/* Header button/link hovers - subtle light background with rounded corners */
nav.bg-gray-800 button:hover,
nav.bg-gray-800 .hover\:bg-gray-700:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    border-radius: 0.5rem;
}

/* Dropdown menus - rounded corners */
nav .absolute,
nav #cartDropdown,
nav #accountDropdown {
    background: #ffffff !important;
    border: 1px solid var(--classic-border) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 6px rgba(0, 0, 0, 0.06) !important;
    border-radius: 0.75rem !important;
}

/* Dropdown hover items - rounded corners */
nav .absolute a:hover:not(.cart-checkout-btn),
nav #cartDropdown a:hover:not(.cart-checkout-btn),
nav #accountDropdown a:hover,
nav .hover\:bg-gray-600:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    border-radius: 0.375rem !important;
}

/* Cart checkout button */
.cart-checkout-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 8px 16px !important;
    background: var(--classic-primary) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
}

.cart-checkout-btn:hover {
    background: var(--classic-primary-hover) !important;
}

/* ============================================
   CLASSIC THEME SPECIFIC OVERRIDES
   ============================================ */

/* Hero Register: Light theme form inputs */
.block-hero-register input[type="text"],
.block-hero-register input[type="email"] {
    background-color: #f8fafc !important;
    border-color: #d1d5db !important;
    color: #1e293b !important;
}

.block-hero-register input[type="text"]::placeholder,
.block-hero-register input[type="email"]::placeholder {
    color: #94a3b8 !important;
}

/* Hero Register: description and badge text */
.block-hero-register .text-gray-300 {
    color: #475569 !important;
}

.block-hero-register .font-semibold.tracking-wide {
    color: var(--classic-text) !important;
}

/* Button 2 in hero register */
.block-hero-register a[style*="background: #374151"] {
    background: #e2e8f0 !important;
    color: var(--classic-text) !important;
}

/* Form title in hero register */
.block-hero-register .block-form-bg h2 {
    color: var(--classic-text) !important;
}

/* Form labels in hero register */
.block-hero-register .block-form-bg label {
    color: var(--classic-text) !important;
}

/* Form submit button text */
.block-hero-register .block-form-bg button[type="submit"] {
    color: #ffffff !important;
}