/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* Custom scrollbars for a premium feel */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.8);
}

/* Tour overlay highlights and guides */
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.tour-highlight {
    position: relative;
    z-index: 9999 !important;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.75);
    pointer-events: auto !important;
    border: 2px solid var(--color-primary, #2563eb);
    transition: all 0.2s ease;
}

.tour-tooltip {
    position: absolute;
    background: white;
    color: #0f172a;
    padding: 1.25rem;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    z-index: 10000;
    width: 280px;
    font-family: 'Inter', sans-serif;
    border: 1px solid #e2e8f0;
}

.dark .tour-tooltip {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}

/* Global input focus and text colors to prevent white-on-white conflicts */
input[type="text"], 
input[type="number"], 
input[type="email"], 
input[type="tel"], 
input[type="password"], 
textarea, 
select {
    color: #0f172a !important;
}

.dark input[type="text"], 
.dark input[type="number"], 
.dark input[type="email"], 
.dark input[type="tel"], 
.dark input[type="password"], 
.dark textarea, 
.dark select {
    color: #ffffff !important;
}

/* Ensure inputs maintain high contrast backgrounds and text colors on focus */
input[type="text"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="tel"]:focus, 
input[type="password"]:focus, 
textarea:focus, 
select:focus {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

.dark input[type="text"]:focus, 
.dark input[type="number"]:focus, 
.dark input[type="email"]:focus, 
.dark input[type="tel"]:focus, 
.dark input[type="password"]:focus, 
.dark textarea:focus, 
.dark select:focus {
    background-color: #020617 !important; /* slate-950 equivalent */
    color: #ffffff !important;
}

/* Autofill styling overrides to avoid browser default white/yellow background overlay */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #0f172a !important;
    transition: background-color 5000s ease-in-out 0s;
}

.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover, 
.dark input:-webkit-autofill:focus, 
.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #090d16 inset !important; /* dark background for inputs */
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}