/* ==========================================================================
   Vanity Theme - Main Stylesheet
   ========================================================================== */

:root {
    --vanity-bg: #0a0a1a;
    --vanity-surface: rgba(255, 255, 255, 0.03);
    --vanity-primary: #00f0ff;
    --vanity-secondary: #b44aff;
    --vanity-accent: #ff2d7b;
    --vanity-text: #e0e0ff;
    --vanity-text-muted: rgba(224, 224, 255, 0.5);
    --vanity-border: rgba(255, 255, 255, 0.05);
    --vanity-glass: rgba(255, 255, 255, 0.03);
    --vanity-glass-border: rgba(255, 255, 255, 0.08);
    --vanity-radius: 1rem;
    --vanity-radius-sm: 0.75rem;
    --vanity-radius-lg: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--vanity-bg);
    color: var(--vanity-text);
    overflow-x: hidden;
    line-height: 1.6;
}

/* ── Tailwind Extension Classes ── */
.bg-vanity-bg { background-color: var(--vanity-bg); }
.bg-vanity-surface { background-color: var(--vanity-surface); }
.text-vanity-text { color: var(--vanity-text); }
.text-vanity-primary { color: var(--vanity-primary); }
.text-vanity-secondary { color: var(--vanity-secondary); }
.text-vanity-accent { color: var(--vanity-accent); }
.border-vanity-border { border-color: var(--vanity-border); }
.from-vanity-primary { --tw-gradient-from: var(--vanity-primary); }
.to-vanity-secondary { --tw-gradient-to: var(--vanity-secondary); }
.via-vanity-secondary { --tw-gradient-via: var(--vanity-secondary); }
.to-vanity-accent { --tw-gradient-to: var(--vanity-accent); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

::selection { background-color: rgba(0, 240, 255, 0.2); color: white; }
:focus-visible { outline: 2px solid var(--vanity-primary); outline-offset: 2px; border-radius: 4px; }

/* ── Glassmorphism ── */
.glass { background: var(--vanity-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--vanity-glass-border); }
.glass-strong { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255, 255, 255, 0.1); }

/* ── Animated Background Orbs ── */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    will-change: transform;
}
.orb-1 {
    width: 600px; height: 600px;
    top: -20%; left: -10%;
    background: rgba(0, 240, 255, 0.08);
    animation: orbFloat1 12s ease-in-out infinite;
}
.orb-2 {
    width: 500px; height: 500px;
    bottom: -20%; right: -10%;
    background: rgba(180, 74, 255, 0.08);
    animation: orbFloat2 15s ease-in-out infinite;
}
.orb-3 {
    width: 350px; height: 350px;
    top: 40%; left: 50%;
    background: rgba(255, 45, 123, 0.05);
    animation: orbFloat3 18s ease-in-out infinite;
}
.orb-4 {
    width: 250px; height: 250px;
    top: 10%; right: 20%;
    background: rgba(123, 104, 238, 0.06);
    animation: orbFloat1 20s ease-in-out infinite reverse;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, -80px) scale(1.1); }
    50% { transform: translate(-30px, 40px) scale(0.95); }
    75% { transform: translate(40px, 20px) scale(1.05); }
}
@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-60px, 50px) scale(1.08); }
    66% { transform: translate(40px, -30px) scale(0.92); }
}
@keyframes orbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(70px, -50px) scale(1.12); }
}

/* ── Particle Canvas ── */
#particles {
    opacity: 0.4;
}

/* ── Animations ── */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-left { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fade-in-right { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 240, 255, 0.1); }
    50% { box-shadow: 0 0 40px rgba(0, 240, 255, 0.25); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes border-glow {
    0%, 100% { border-color: rgba(0, 240, 255, 0.2); }
    50% { border-color: rgba(0, 240, 255, 0.5); }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shimmer-border {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes bounce-in {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes magnetic-hover {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-2px, -2px); }
    50% { transform: translate(2px, -1px); }
    75% { transform: translate(-1px, 2px); }
    100% { transform: translate(0, 0); }
}

.animate-float { animation: orbFloat1 8s ease-in-out infinite; }
.animate-float-delayed { animation: orbFloat2 10s ease-in-out infinite; }
.animate-float-slow { animation: orbFloat3 12s ease-in-out infinite; }
.animate-fade-in { animation: fade-in 0.8s ease-out both; }
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out both; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-gradient-shift {
    background-size: 200% 200%;
    animation: gradient-shift 4s ease infinite;
}
.animate-shimmer-border {
    background-size: 200% 100%;
    animation: shimmer-border 2s linear infinite;
}

/* ── Stagger Entry Animations ── */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.stagger-item.visible {
    opacity: 1;
    transform: translateY(0);
}

[data-stagger="1"] { transition-delay: 0.08s; }
[data-stagger="2"] { transition-delay: 0.16s; }
[data-stagger="3"] { transition-delay: 0.24s; }
[data-stagger="4"] { transition-delay: 0.32s; }
[data-stagger="5"] { transition-delay: 0.40s; }
[data-stagger="6"] { transition-delay: 0.48s; }
[data-stagger="7"] { transition-delay: 0.56s; }
[data-stagger="8"] { transition-delay: 0.64s; }
[data-stagger="9"] { transition-delay: 0.72s; }
[data-stagger="10"] { transition-delay: 0.80s; }

/* ── Gradient Text ── */
.vanity-gradient-text {
    background: linear-gradient(135deg, var(--vanity-primary), var(--vanity-secondary), var(--vanity-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Link Underline Animation ── */
.link-underline {
    position: relative;
}
.link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--vanity-primary);
    transition: width 0.3s ease;
}
.link-underline:hover::after {
    width: 100%;
}

/* ── Card Tilt 3D ── */
[data-tilt] {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* ── Button Shine Effect ── */
.btn-shine {
    position: relative;
    overflow: hidden;
}
.btn-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        transparent 100%
    );
    transform: rotate(30deg) translateX(-150%);
    transition: transform 0.6s ease;
}
.btn-shine:hover::after {
    transform: rotate(30deg) translateX(150%);
}

/* ── Line Clamp ── */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

[x-cloak] { display: none !important; }

.transition-gpu { will-change: transform; transform: translateZ(0); }

/* ── Neon Glow Utilities ── */
.neon-glow-cyan { box-shadow: 0 0 15px rgba(0, 240, 255, 0.15), 0 0 45px rgba(0, 240, 255, 0.05); }
.neon-glow-purple { box-shadow: 0 0 15px rgba(180, 74, 255, 0.15), 0 0 45px rgba(180, 74, 255, 0.05); }
.neon-glow-pink { box-shadow: 0 0 15px rgba(255, 45, 123, 0.15), 0 0 45px rgba(255, 45, 123, 0.05); }
.neon-glow-slate { box-shadow: 0 0 15px rgba(123, 104, 238, 0.15), 0 0 45px rgba(123, 104, 238, 0.05); }

code, pre, .font-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }

/* ==========================================================================
   Override Default Paymenter Components
   ========================================================================== */

/* ── Global Dark Base ── */
html, body { background: #0a0a1a !important; color: #e0e0ff !important; }
.bg-background { background: #0a0a1a !important; }
.bg-background-secondary, [class*="bg-background-secondary"] { background: rgba(15, 15, 35, 0.95) !important; }

/* ── Navigation ── */
nav { background: rgba(10, 10, 26, 0.95) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(255,255,255,0.05) !important; }
nav a { color: rgba(224, 224, 255, 0.6) !important; }
nav a:hover { color: #00f0ff !important; }
nav img.rounded-full { border-color: rgba(255,255,255,0.1) !important; background: rgba(255,255,255,0.05) !important; }

/* ── Text Colors ── */
.text-base, .text-sm, .text-md { color: #e0e0ff !important; }
h1, h2, h3, h4, h5, h6 { color: #e0e0ff !important; }
.text-xl, .text-2xl, .text-3xl, .text-lg { color: #e0e0ff !important; }
.form-label, label, .label { color: rgba(224, 224, 255, 0.7) !important; font-weight: 500 !important; }

/* All gray/neutral text overrides */
.text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900,
.text-neutral-300, .text-neutral-400, .text-neutral-500, .text-neutral-600, .text-neutral-700, .text-neutral-800, .text-neutral-900 {
    color: rgba(224, 224, 255, 0.5) !important;
}
.text-gray-300, .text-neutral-300 { color: rgba(224, 224, 255, 0.6) !important; }
.text-gray-400, .text-neutral-400 { color: rgba(224, 224, 255, 0.4) !important; }

/* ── ALL Background Overrides (most aggressive) ── */
.bg-white, .bg-white\/50, .bg-white\/80, .bg-white\/25, .bg-white\/75,
[class*="bg-white"] {
    background: rgba(255,255,255,0.03) !important;
}
.bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300,
.bg-neutral, .bg-neutral-50, .bg-neutral-100, .bg-neutral-200, .bg-neutral-300,
[class*="bg-gray"], [class*="bg-neutral-"] {
    background: rgba(15, 15, 35, 0.95) !important;
}

/* ── Border Overrides ── */
.border-neutral { border-color: rgba(255,255,255,0.08) !important; }
.border-gray-100, .border-gray-200, .border-gray-300,
.border-neutral-100, .border-neutral-200, .border-neutral-300 {
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── Dropdowns ── */
[x-dropdown] { background: rgba(15, 15, 35, 0.95) !important; backdrop-filter: blur(20px); border-color: rgba(255,255,255,0.08) !important; }

/* ── Hover Overrides ── */
.hover\:bg-background-secondary:hover, .hover\:bg-gray-100:hover, .hover\:bg-white:hover,
[class*="hover\:bg-gray"]:hover, [class*="hover\:bg-white"]:hover, [class*="hover\:bg-neutral"]:hover {
    background: rgba(255,255,255,0.05) !important;
}

/* ── Button Text ── */
button[type="submit"], .btn-primary, [wire\:click], [x-on\:click] { color: #e0e0ff; }

/* ── Alerts ── */
.alert-success { background: rgba(0, 230, 118, 0.1) !important; border-color: rgba(0, 230, 118, 0.2) !important; color: #00e676 !important; }
.alert-danger, .alert-error { background: rgba(255, 45, 123, 0.1) !important; border-color: rgba(255, 45, 123, 0.2) !important; color: #ff2d7b !important; }

/* ── Inputs ── */
input, select, textarea {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #e0e0ff !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
}
input::placeholder, textarea::placeholder { color: rgba(224, 224, 255, 0.3) !important; }
input:focus, select:focus, textarea:focus {
    border-color: #00f0ff !important;
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.15) !important;
    outline: none !important;
}
select option { background: #0f0f23 !important; color: #e0e0ff !important; }
label, .form-label, .label { color: rgba(224, 224, 255, 0.7) !important; font-weight: 500 !important; }

/* ── Tables ── */
table { color: rgba(224, 224, 255, 0.7) !important; background: transparent !important; }
thead th, thead td { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; color: rgba(224, 224, 255, 0.5) !important; }
tbody td, tbody th { border-color: rgba(255,255,255,0.05) !important; background: transparent !important; }
tbody tr { background: transparent !important; }
tbody tr:hover { background: rgba(255,255,255,0.02) !important; }

/* ── Links ── */
a { transition: color 0.2s ease; }
a:not(.vanity-btn-primary):not(.vanity-btn-secondary):not([class*="text-vanity"]):not([wire\:click]) { color: #00f0ff !important; }

/* ── Prose / Rich Text ── */
.prose { color: rgba(224, 224, 255, 0.7) !important; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: #e0e0ff !important; }
.prose a { color: #00f0ff !important; }
.prose strong { color: #e0e0ff !important; }
.prose code { color: #b44aff !important; background: rgba(180, 74, 255, 0.1) !important; }
.prose pre { background: rgba(0,0,0,0.3) !important; border-color: rgba(255,255,255,0.08) !important; }
.prose li, .prose p { color: rgba(224, 224, 255, 0.6) !important; }
.prose ul > li::marker { color: rgba(224, 224, 255, 0.3) !important; }
.prose hr { border-color: rgba(255,255,255,0.08) !important; }
.prose blockquote { border-color: #00f0ff !important; color: rgba(224, 224, 255, 0.5) !important; }
.prose thead th { color: rgba(224, 224, 255, 0.5) !important; border-color: rgba(255,255,255,0.08) !important; }
.prose tbody td { border-color: rgba(255,255,255,0.05) !important; }

/* ── Code Blocks ── */
pre, code {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #b44aff !important;
}

/* ── Pagination ── */
.pagination a, .pagination span {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(224, 224, 255, 0.6) !important;
}
.pagination a:hover { background: rgba(255,255,255,0.08) !important; color: #00f0ff !important; }
.pagination .active { background: rgba(0, 240, 255, 0.15) !important; color: #00f0ff !important; border-color: #00f0ff !important; }

/* ── Modal/Dialog ── */
.modal, [role="dialog"], .fixed.inset-0 {
    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(8px);
}
.modal-content, [role="dialog"] > div, .fixed.inset-0 > div:not([class*="bg-background"]) {
    background: #0f0f23 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── Notification bar ── */
[x-notification], .notification-bar {
    background: rgba(15, 15, 35, 0.95) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── Confirm dialog ── */
.confirmation-dialog {
    background: #0f0f23 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── Mobile Slide-Over Menu ── */
[x-teleport="body"] > div,
[x-teleport="body"] > div > div {
    background: rgba(10, 10, 26, 0.98) !important;
}
[x-teleport="body"] a { color: rgba(224, 224, 255, 0.6) !important; }
[x-teleport="body"] a:hover { color: #00f0ff !important; }
[x-teleport="body"] span { color: rgba(224, 224, 255, 0.8) !important; }
[x-teleport="body"] button { color: rgba(224, 224, 255, 0.8) !important; }

/* ── Livewire / WireUI Overrides ── */
.wireui-card, .card, [class*="card"] {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e0e0ff !important;
}
.livewire-table, .table-responsive {
    background: transparent !important;
}

/* ── Checkout, Cart, Invoices, Services ── */
.invoice-card, .service-card, .ticket-card,
[class*="invoice"], [class*="service-card"], [class*="ticket"] {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #e0e0ff !important;
}

/* ── Status badges ── */
.badge, .inline-flex.items-center.gap-1 { }

/* ── Payment methods ── */
.payment-method {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.payment-method.active, .payment-method.selected {
    border-color: #00f0ff !important;
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.15) !important;
}

/* ── Checkout & Cart ── */
.checkout-container, .cart-container { background: transparent !important; }

/* ==========================================================================
   Nuclear Override - Catch-All for Paymenter/WireUI Components
   ========================================================================== */

/* Force dark on ALL div-based containers that might be white */
div[class*="bg-white"],
div[class*="bg-gray"],
div[class*="bg-neutral"],
section[class*="bg-white"],
section[class*="bg-gray"],
div[class*="rounded"][class*="bg-"]:not([class*="bg-vanity"]):not([class*="bg-gradient"]):not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="bg-yellow"]):not([class*="bg-green"]):not([class*="bg-blue"]):not([class*="bg-orange"]):not([class*="bg-transparent"]):not([class*="bg-black"]):not([class*="bg-[#"]) {
    background: rgba(255,255,255,0.03) !important;
}

/* WireUI specific overrides */
.wireui-btn-primary { background: linear-gradient(135deg, var(--vanity-primary), var(--vanity-secondary)) !important; }
.wireui-btn-secondary { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.1) !important; color: #e0e0ff !important; }

/* WireUI dropdowns and popovers */
.wireui-dropdown, .wireui-popover, [wireui-dropdown], [wireui-popover] {
    background: rgba(15, 15, 35, 0.95) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.wireui-dropdown .wireui-dropdown-item,
.wireui-popover .wireui-popover-item {
    color: rgba(224, 224, 255, 0.7) !important;
}
.wireui-dropdown .wireui-dropdown-item:hover,
.wireui-popover .wireui-popover-item:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #00f0ff !important;
}

/* WireUI modal */
.wireui-modal { background: rgba(0,0,0,0.6) !important; backdrop-filter: blur(8px); }
.wireui-modal-box, .wireui-modal > div > div {
    background: #0f0f23 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #e0e0ff !important;
}

/* WireUI inputs */
.wireui-input, .wireui-textarea, .wireui-select,
div[class*="wireui-input"], div[class*="wireui-select"] {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0ff !important;
}

/* WireUI card */
.wireui-card, .wireui-card-body {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e0e0ff !important;
}

/* Paymenter page container overrides */
.max-w-xl, .max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl {
    color: #e0e0ff !important;
}

/* Override any remaining white section backgrounds */
main > div > section,
main > div > div > section {
    background: transparent !important;
}

/* Generic override for any element with white-ish background */
[class*="bg-[#fff"],
[class*="bg-[white"],
[class*="bg-[#ffffff"] {
    background: rgba(255,255,255,0.03) !important;
}

/* Specific Paymenter account page overrides */
.account-section, .settings-section, .payment-section {
    background: transparent !important;
}
.account-section .card, .settings-section .card, .payment-section .card {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e0e0ff !important;
}

/* Fix any remaining button styles */
button:not([class*="vanity"]):not([class*="fas"]):not([class*="fab"]) {
    color: #e0e0ff !important;
}

/* ==========================================================================
   Dashboard + Account Pages Fix
   ========================================================================== */

/* Force dark on Paymenter default dashboard cards (NOT the vanity theme ones) */
.bg-background-secondary { background: rgba(15, 15, 35, 0.95) !important; }
.bg-background { background: #0a0a1a !important; }

/* Dashboard stat card backgrounds - ONLY inside the dashboard grid */
.grid > .stagger-item {
    background: rgba(255,255,255,0.03) !important;
}
.grid > .stagger-item:hover {
    background: rgba(255,255,255,0.05) !important;
}

/* Livewire widget content - force dark */
[wire\\:snapshot], [wire\\:id] {
    background: transparent !important;
}
[wire\\:snapshot] > *, [wire\\:id] > * {
    background: transparent !important;
}

/* Re-enable colored backgrounds inside widgets */
[wire\\:snapshot] [class*="bg-emerald"],
[wire\\:snapshot] [class*="bg-green"],
[wire\\:snapshot] [class*="bg-red"],
[wire\\:snapshot] [class*="bg-yellow"],
[wire\\:snapshot] [class*="bg-blue"],
[wire\\:snapshot] [class*="bg-orange"],
[wire\\:snapshot] [class*="bg-vanity"],
[wire\\:snapshot] [class*="bg-gradient"],
[wire\\:id] [class*="bg-emerald"],
[wire\\:id] [class*="bg-green"],
[wire\\:id] [class*="bg-red"],
[wire\\:id] [class*="bg-yellow"],
[wire\\:id] [class*="bg-blue"],
[wire\\:id] [class*="bg-orange"],
[wire\\:id] [class*="bg-vanity"],
[wire\\:id] [class*="bg-gradient"] {
    background-color: revert !important;
    background: revert !important;
}

/* Widget cards specifically */
[wire\\:snapshot] > div,
[wire\\:id] > div,
[wire\\:snapshot] > div > div,
[wire\\:id] > div > div {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 0.75rem !important;
    color: #e0e0ff !important;
}

/* Widget text colors */
[wire\\:snapshot] *, [wire\\:id] * {
    color: rgba(224, 224, 255, 0.7) !important;
}
[wire\\:snapshot] h1, [wire\\:snapshot] h2, [wire\\:snapshot] h3,
[wire\\:snapshot] h4, [wire\\:snapshot] h5, [wire\\:snapshot] h6,
[wire\\:id] h1, [wire\\:id] h2, [wire\\:id] h3,
[wire\\:id] h4, [wire\\:id] h5, [wire\\:id] h6 {
    color: #e0e0ff !important;
}
[wire\\:snapshot] a, [wire\\:id] a {
    color: #00f0ff !important;
}

/* Account/payment-methods page centering */
main > div:not(.flex):not(.grid):not(.relative) {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    main > div:not(.flex):not(.grid):not(.relative) {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    main > div:not(.flex):not(.grid):not(.relative) {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Force all buttons dark */
.btn, .wireui-btn {
    color: #e0e0ff !important;
}
.btn-primary, .wireui-btn-primary {
    background: linear-gradient(135deg, var(--vanity-primary), var(--vanity-secondary)) !important;
    color: white !important;
    border: none !important;
}
.btn-secondary, .wireui-btn-secondary {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0ff !important;
}
.btn-danger, .btn-red, .wireui-btn-danger {
    background: rgba(255, 45, 123, 0.1) !important;
    border-color: rgba(255, 45, 123, 0.2) !important;
    color: #ff2d7b !important;
}

/* ==========================================================================
   Mobile Base Overrides
   ========================================================================== */

@media (max-width: 768px) {
    /* Make product card resources responsive */
    .resource-chip {
        padding: 0.5rem !important;
    }

    /* Ensure all containers respect padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Mobile nav text alignment */
    nav .flex.flex-row {
        flex-wrap: wrap;
    }

    /* Fix footer grid on mobile */
    footer .grid {
        gap: 1.5rem !important;
    }

    /* Ensure product card images don't overflow */
    .product-card img {
        max-height: 12rem;
        object-fit: cover;
    }

    /* Mobile input fixes */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], select, textarea {
        font-size: 16px !important;
        -webkit-appearance: none !important;
    }
}

@media (max-width: 480px) {
    /* Hero section mobile */
    section:first-child {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Ensure product cards are full width */
    .grid-cols-1 {
        gap: 1rem !important;
    }

    /* Mobile footer centering */
    footer .flex.items-center.gap-3 {
        justify-content: center;
    }
}