/* PROPER BUTTON STYLING - Matches Reference Image */
/* Dark slate primary, purple accents */

/* PRIMARY BUTTONS - Dark Slate */
button[type="submit"],
button.bg-slate-900,
.bg-slate-900.text-white,
a.bg-slate-900,
a.bg-slate-900.text-white,
.btn-primary {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s ease !important;
}

/* HOVER STATE - Purple */
button[type="submit"]:hover,
button.bg-slate-900:hover,
.bg-slate-900.text-white:hover,
a.bg-slate-900:hover,
a.bg-slate-900.text-white:hover,
.btn-primary:hover {
    background-color: #7c3aed !important;
    background: #7c3aed !important;
    box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.3), 0 2px 4px -1px rgba(124, 58, 237, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* PURPLE BUTTONS - Keep Purple */
button.bg-purple-600,
.bg-purple-600.text-white,
a.bg-purple-600,
a.bg-purple-600.text-white {
    background-color: #9333ea !important;
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.3) !important;
}

button.bg-purple-600:hover,
.bg-purple-600.text-white:hover,
a.bg-purple-600:hover,
a.bg-purple-600.text-white:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* SECONDARY/OUTLINED BUTTONS */
button.bg-white\/10,
a.bg-white\/10,
.btn-secondary {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
}

button.bg-white\/10:hover,
a.bg-white\/10:hover,
.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* LINKS - Purple Accent */
a.text-purple-600,
.text-purple-600 {
    color: #9333ea !important;
}

a.text-purple-600:hover,
.text-purple-600:hover {
    color: #7c3aed !important;
}

/* ADMIN SIDEBAR - Keep Dark */
aside.bg-slate-900 {
    background-color: #0f172a !important;
}

aside.bg-slate-900 .nav-btn {
    color: #cbd5e1 !important;
}

aside.bg-slate-900 .nav-btn:hover {
    background-color: #1e293b !important;
    color: white !important;
}

aside.bg-slate-900 .nav-btn.active {
    background-color: #1e293b !important;
    color: white !important;
}

/* LOGIN/SIGNUP FORMS - Special handling for visibility */
#login-screen button[type="submit"],
#signup-form button[type="submit"],
form button[type="submit"] {
    background-color: #0f172a !important;
    background: #0f172a !important;
}

#login-screen button[type="submit"]:hover,
#signup-form button[type="submit"]:hover,
form button[type="submit"]:hover {
    background-color: #7c3aed !important;
    background: #7c3aed !important;
}

/* GALLERY SECTION - PURE WHITE BACKGROUND */
#gallery,
section#gallery {
    background-color: #ffffff !important;
}

/* FEATURES SECTION - WHITE BACKGROUND */
section.bg-white {
    background-color: #ffffff !important;
}

/* OVERRIDE ANY SLATE BACKGROUNDS ON MAIN SECTIONS */
body section.py-24 {
    background-color: #ffffff !important;
}