/* Custom Clerk Auth Styling - Renault Theme
 * This file provides aggressive overrides for Clerk components
 */

/* Remove all potentially problematic styling */
* {
    box-sizing: border-box;
}

/* Auth page body styling */
body.auth-page {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-family-primary) !important;
}

/* Force all Clerk elements to use proper styling */
[class*="cl-"],
[data-clerk-element],
[data-clerk-component] {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Hide Clerk's header elements since we have our own branding */
.cl-headerTitle,
.cl-headerSubtitle,
.cl-header,
.cl-headerBox {
    display: none !important;
}

/* Clerk main containers - Make completely seamless */
.cl-rootBox,
.cl-card,
.cl-main,
.cl-modalContent {
    background-color: transparent !important; /* Make transparent to blend with our background */
    color: var(--text-primary) !important;
    border-radius: 0 !important; /* Remove any card-like appearance */
    border: none !important; /* Remove all borders */
    box-shadow: none !important; /* Remove all shadows */
    margin: 0 !important; /* Remove all margins */
    padding: 0 !important; /* Remove all padding */
}

/* Clerk header components - Make them blend seamlessly */
.cl-header,
.cl-headerBox,
.cl-headerTitle,
.cl-headerSubtitle {
    background-color: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 5px 0 !important; /* Minimal padding */
}

/* Clerk form styling - Seamless integration */
.cl-form,
.cl-formContainer {
    background-color: transparent !important;
    padding: 0 !important; /* Remove all padding to make seamless */
    margin: 0 !important;
    border: none !important;
}

/* Clerk button styling - PRIMARY BUTTONS ONLY, exclude social buttons */
.cl-button:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton),
.cl-formButtonPrimary:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton),
.cl-footerActionButton:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton),
button[data-clerk-element]:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton) {
    background-color: var(--accent-color) !important;
    color: var(--text-inverse) !important;
    border: 2px solid var(--accent-color) !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    /* Remove any potential orange styling */
    outline: none !important;
    box-shadow: none !important;
}

.cl-button:hover:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton),
.cl-formButtonPrimary:hover:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton),
.cl-footerActionButton:hover:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton),
button[data-clerk-element]:hover:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton) {
    background-color: var(--accent-color-hover) !important;
    border-color: var(--accent-color-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(var(--accent-color-rgb), 0.3) !important;
}

/* Clerk input styling */
.cl-input,
.cl-formFieldInput,
input[data-clerk-element] {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    width: 100% !important;
}

.cl-input:focus,
.cl-formFieldInput:focus,
input[data-clerk-element]:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2) !important;
    outline: none !important;
}

/* Clerk labels and text */
.cl-formFieldLabel,
.cl-headerTitle,
.cl-headerSubtitle,
label[data-clerk-element] {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

/* Clerk footer styling - Completely seamless */
.cl-footer,
.cl-footerPages,
.cl-footerPage,
.cl-internal-b3fm6y,
.cl-modalFooter {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-top: none !important; /* Remove division line */
    border: none !important;
    padding: 10px 20px !important; /* Reduced padding for seamless look */
    margin: 0 !important;
    /* Aggressively remove any orange background */
    background-image: none !important;
    background: var(--bg-secondary) !important;
}

/* Target the "Secured by Clerk" text specifically - Make it blend in */
.cl-footerActionText,
.cl-brand,
[data-clerk-element="brand"] {
    color: var(--text-tertiary) !important; /* Even more subtle */
    background-color: transparent !important;
    font-size: 11px !important; /* Smaller font */
    opacity: 0.7 !important; /* Make it blend more */
}

/* Aggressively remove any orange coloring from all footer elements */
.cl-footer *,
.cl-footerPages *,
.cl-footerPage *,
.cl-modalFooter *,
.cl-internal-b3fm6y * {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    color: inherit !important;
    border: none !important;
}

/* Remove any potential orange borders or backgrounds from ANY Clerk element */
[class*="cl-"]:not(.cl-button):not(.cl-formButtonPrimary):not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton) {
    background-image: none !important;
    border-color: var(--border-color) !important;
}

.cl-rootBox,
.cl-card,
.cl-main,
.cl-modalContent {
    background-color: var(--bg-secondary) !important;
}

.cl-input,
.cl-formFieldInput,
input[data-clerk-element] {
    background-color: var(--bg-primary) !important;
}

/* Clerk links */
.cl-footerActionLink,
.cl-headerActionLink,
a[data-clerk-element] {
    color: var(--accent-color) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.cl-footerActionLink:hover,
.cl-headerActionLink:hover,
a[data-clerk-element]:hover {
    color: var(--accent-color-hover) !important;
    text-decoration: underline !important;
}

/* Social buttons (Google, Microsoft) - Even smaller and neutral styling */
.cl-socialButtons,
.cl-socialButtonsBlockButton,
.cl-socialButtonsProviderButton {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important; /* Even smaller padding */
    font-size: 12px !important; /* Smaller font */
    height: auto !important;
    min-height: 32px !important; /* Even smaller height */
    margin: 2px 0 !important; /* Tighter margins */
    font-weight: 500 !important;
}

.cl-socialButtonsBlockButton:hover,
.cl-socialButtonsProviderButton:hover {
    background-color: var(--hover-overlay) !important;
    border-color: var(--border-hover) !important;
    transform: none !important; /* No lift effect for social buttons */
}

/* Only primary buttons (Continue, Sign In) should be yellow */
.cl-button:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton),
.cl-formButtonPrimary:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton) {
    background-color: var(--accent-color) !important;
    color: var(--text-inverse) !important;
    border: 2px solid var(--accent-color) !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    min-height: 44px !important;
    font-weight: 600 !important;
}

/* Light theme overrides */
.light-theme .cl-rootBox,
.light-theme .cl-card,
.light-theme .cl-main,
.light-theme .cl-modalContent {
    background-color: #f8f9fa !important;
    color: #1a1a1a !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
}

.light-theme .cl-button:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton),
.light-theme .cl-formButtonPrimary:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton),
.light-theme .cl-footerActionButton:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton),
.light-theme button[data-clerk-element]:not(.cl-socialButtonsBlockButton):not(.cl-socialButtonsProviderButton) {
    background-color: var(--accent-color) !important;
    color: #000000 !important;
    border: 2px solid var(--accent-color) !important;
}

.light-theme .cl-input,
.light-theme .cl-formFieldInput,
.light-theme input[data-clerk-element] {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 2px solid #e0e0e0 !important;
}

.light-theme .cl-formFieldLabel,
.light-theme .cl-headerTitle,
.light-theme .cl-headerSubtitle,
.light-theme label[data-clerk-element] {
    color: #1a1a1a !important;
}

.light-theme .cl-footer,
.light-theme .cl-footerPages,
.light-theme .cl-footerPage,
.light-theme .cl-internal-b3fm6y,
.light-theme .cl-modalFooter {
    background-color: #f8f9fa !important;
    color: #666666 !important;
}

/* Ensure proper spacing and layout */
.auth-form {
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

#sign-in-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* AGGRESSIVE SEAMLESS STYLING - Force remove all divisions */

/* Remove ALL borders from Clerk components */
.cl-rootBox *,
.cl-card *,
.cl-main *,
.cl-form *,
.cl-header *,
.cl-body *,
.cl-footer * {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Force seamless header integration */
.cl-header,
.cl-headerBox,
.cl-headerTitle,
.cl-headerSubtitle {
    border: none !important;
    margin: 0 !important;
    padding-bottom: 8px !important;
}

/* Force seamless body/form integration */
.cl-main,
.cl-body,
.cl-formContainer {
    border: none !important;
    margin: 0 !important;
    padding-top: 8px !important;
}

/* Make dividers nearly invisible but "or" text white */
.cl-dividerLine,
.cl-divider,
.cl-dividerRow {
    opacity: 0.15 !important;
    margin: 8px 0 !important;
    height: 1px !important;
}

/* Make "or" text white */
.cl-dividerText,
.cl-dividerRow *,
.cl-divider *,
[data-clerk-element="dividerText"] {
    color: #ffffff !important;
    opacity: 1 !important; /* Override the parent opacity for text */
}

/* Reduce spacing around dividers */
.cl-dividerRow {
    margin: 6px 0 !important;
}

/* Force consistent background throughout */
.cl-rootBox,
.cl-card,
.cl-main,
.cl-body,
.cl-form,
.cl-formContainer,
.cl-header,
.cl-headerBox {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    background: var(--bg-secondary) !important;
}