/* Overrides to apply mobile theme site-wide and reduce 'thickness' */
:root{
    --primary: #0E4A6B;
    --secondary: #FF8A8A;
    --background: #F8FAFF;
    --surface: #FFFFFF;
    --text-primary: #2D3748;
    --border: rgba(45,55,72,0.08);
}

/* Typography: lighter by default */
html,body{
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing:antialiased !important;
    -moz-osx-font-smoothing:grayscale !important;
    font-weight: 400 !important;
    color: var(--text-primary) !important;
    background: var(--background) !important;
}

/* Headings slightly stronger but not heavy */
h1,h2,h3,h4,h5{ font-weight: 600 !important; letter-spacing: -0.01em; }
p, a, li, label, input, button { font-weight: 400 !important; }

/* Reduce heavy borders/shadows */
.card, .section, .dashboard-section, .modal-content, .form-container, .sidebar {
    border: 1px solid var(--border) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.06) !important;
    border-radius: 12px !important;
}

/* Buttons: less bulky */
.btn, button, .action-btn, .book-btn {
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.06) !important;
}

/* Logo and nav should not look too bold */
.logo, .brand, .site-title { font-weight: 600 !important; font-size: 1.15rem !important; }
nav a, .nav-item { font-weight: 500 !important; }

/* Form controls: slimmer */
input, select, textarea, .form-control { border-radius: 10px !important; border: 1px solid var(--border) !important; }

/* Reduce heavy hero/background overlay */
.hero, .dashboard-header, .hero-section { box-shadow: 0 8px 20px rgba(15,23,42,0.06) !important; }

/* Make sure images remain responsive */
img, video { max-width: 100%; height: auto; }

/* Mobile tweaks */
@media (max-width: 768px){
    .logo { font-size: 1.05rem !important; }
    .btn, .mobile-menu, .nav-item { min-height: 44px !important; }
}

/* Ensure active bottom-nav items have high-contrast text */
.bottom-nav .nav-item.active,
.bottom-nav .nav-item.active i,
.bottom-nav .nav-item.active span {
    color: var(--text-primary) !important;
}

/* If the theme applies a bright active background (orange/coral), keep text dark for contrast */
.bottom-nav .nav-item.active {
    color: var(--text-primary) !important;
}