/*
 * MahaExcise Modern UI Stylesheet
 * Version: 1.0
 * Description: Modern, clean UI improvements for MahaExcise website
 */

/* ========================================
   FIXED NAVBAR SPACING FIX
   ======================================== */
/* Add padding to body to prevent content hiding behind fixed navbar */
body {
    padding-top: 75px !important; /* Height of fixed navbar + small buffer */
    scroll-padding-top: 85px; /* For smooth scroll anchor positioning */
}

/* Adjust for mobile devices (smaller navbar) */
@media (max-width: 576px) {
    body {
        padding-top: 65px !important;
        scroll-padding-top: 75px;
    }
}

/* ========================================
   CSS VARIABLES (Design Tokens)
   ======================================== */
:root {
    /* Primary Colors */
    --primary-color: #0066FB;
    --primary-dark: #0052cc;
    --primary-light: #4d94ff;
    --primary-gradient: linear-gradient(135deg, #0066FB 0%, #0052cc 100%);

    /* Secondary Colors */
    --secondary-color: #28a745;
    --secondary-dark: #1e7e34;
    --secondary-light: #48c764;

    /* Accent Colors */
    --accent-color: #FF6B35;
    --accent-dark: #e55a2b;
    --accent-light: #ff8c5a;

    /* Neutral Colors */
    --white: #ffffff;
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --black: #000000;

    /* Reading-optimized text color (deeper than gray-800, softer than black) */
    --text-reading: #1d2939;

    /* Status Colors */
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --info: #17a2b8;

    /* Typography */
    --font-family-base: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-heading: 'Inter', 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem;  /* 36px */
    --line-height-tight: 1.25;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.75;
    --line-height-reading: 1.85;

    /* Spacing */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Z-Index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}

/* ========================================
   BASE STYLES & TYPOGRAPHY
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-reading);
    background-color: var(--gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.01em;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 600;
    line-height: var(--line-height-tight);
    color: var(--gray-900);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    margin-bottom: var(--spacing-md);
    color: var(--text-reading);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

/* ========================================
   NAVBAR IMPROVEMENTS
   ======================================== */
.navbar {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--primary-gradient) !important;
    box-shadow: var(--shadow-md);
    min-height: 60px;
}

.navbar-brand {
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    background: var(--white);
    transition: transform var(--transition-base);
}

.navbar-brand:hover {
    transform: scale(1.02);
}

.navbar-brand img {
    height: 45px;
    border-radius: var(--radius-md);
}

/* Search Button */
.search-btn-group {
    background: var(--white);
    border-radius: var(--radius-full);
    padding: var(--spacing-xs) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.search-btn-group:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.search-btn-group .btn {
    border: none;
    background: transparent;
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Mobile Menu Toggle */
.navbar-toggler {
    border: 2px solid var(--white);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.1);
    transition: all var(--transition-base);
}

.navbar-toggler:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Offcanvas Menu */
.offcanvas {
    max-width: 320px !important;
}

.offcanvas-header {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    padding: var(--spacing-lg);
}

.offcanvas-title h5 {
    color: var(--primary-color);
    font-weight: 700;
}

.offcanvas-body {
    padding: var(--spacing-md);
}

/* 2026-06-18 / 2026-06-19: aggressive scroll-trap fix for the mobile
   hamburger menu. Founder reported the menu still wouldn't scroll
   after the first attempt — likely because Bootstrap's default
   .offcanvas-body { overflow-y: auto } was being shadowed by some
   other rule, OR the body padding-bottom from mobile_bottom_nav was
   throwing off the offcanvas height calculation on iOS, OR the
   service worker was still serving the old cached CSS.

   This block uses !important to win any specificity battle and
   constrains the .offcanvas-body to (100vh - header height) so
   the overflow is meaningful even when the body has padding-bottom
   for the bottom nav bar. */
#offcanvasDarkNavbar .offcanvas-body,
.offcanvas.offcanvas-end .offcanvas-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    /* Explicit height bound: total viewport minus the gradient header
       (~72px) so the body actually has overflow to scroll. Without
       this, on some Android Chromes the body's intrinsic height grew
       to fit content and never triggered the overflow:auto. */
    max-height: calc(100vh - 72px) !important;
    height: calc(100vh - 72px) !important;
    /* Reserves room for mobile_bottom_nav (64px) + safe gap so the
       last menu item is always visible/tappable above the bottom bar. */
    padding-bottom: calc(var(--spacing-md) + 88px) !important;
}

/* When the offcanvas is open, lock body scroll. Bootstrap normally
   does this via inline style on body, but in some browsers the
   inline style is applied AFTER our overscroll rule fires, leaking
   one scroll event to the page underneath. Belt-and-suspenders. */
body.modal-open,
body:has(.offcanvas.show) {
    overflow: hidden !important;
    touch-action: none !important;
}

/* 2026-07-21: the "Ask MyExcise AI" floating pill (.ai-prompt-box) has
   z-index 9998 which sits ABOVE Bootstrap's offcanvas (z-index 1050).
   Founder screenshot showed the purple pill overlapping menu content.
   Hide it while any offcanvas is open — user can still access AI from
   the menu itself. */
body:has(.offcanvas.show) .ai-prompt-box {
    display: none !important;
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 251, 0.25);
}

/* Primary Button */
.btn-primary {
    background: var(--primary-gradient);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(0, 102, 251, 0.25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #003d99 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 251, 0.35);
    color: var(--white);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Secondary Button */
.btn-secondary {
    background: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* Success Button */
.btn-success {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.25);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
}

/* Danger Button */
.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, #c82333 100%);
    color: var(--white);
}

/* Warning Button */
.btn-warning {
    background: linear-gradient(135deg, var(--warning) 0%, #e0a800 100%);
    color: var(--gray-900);
}

/* Light Button */
.btn-light {
    background: var(--white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-light:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

/* Button Sizes */
.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* Digital Manual Button - Refined */
.btn-digital-manual {
    background: linear-gradient(135deg, var(--accent-color) 0%, #FF8C42 50%, var(--accent-color) 100%);
    background-size: 200% 200%;
    animation: gentleGradient 4s ease infinite;
    color: var(--white);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    border: none;
}

.btn-digital-manual:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    color: var(--white);
}

@keyframes gentleGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ========================================
   CARD COMPONENTS
   ======================================== */
.card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-slow);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--gray-300);
}

.card-header {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: 600;
}

.card-body {
    padding: var(--spacing-lg);
}

.card-footer {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    padding: var(--spacing-md) var(--spacing-lg);
}

/* Feature Cards (Homepage Icons) */
.feature-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-slow);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-card);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--primary-light);
}

.feature-card .icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    background: var(--gray-100);
    transition: all var(--transition-base);
}

.feature-card:hover .icon-wrapper {
    background: var(--primary-light);
    transform: scale(1.1);
}

.feature-card .icon-wrapper img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.feature-card .card-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: var(--spacing-xs);
}

.feature-card .card-text {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    margin-bottom: 0;
}

/* Icon Image Styling */
.img-icon {
    width: 100%;
    max-height: 56px;
    object-fit: contain;
    border-radius: var(--radius-md);
    transition: transform var(--transition-base);
}

.card:hover .img-icon {
    transform: scale(1.05);
}

.icon-title {
    font-size: var(--font-size-xs) !important;
    font-weight: 600;
    color: var(--gray-700);
    margin-top: var(--spacing-sm);
    text-align: center;
    line-height: 1.3;
}

/* ========================================
   FORM STYLES
   ======================================== */
.form-control {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    color: var(--gray-800);
    background-color: var(--white);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    min-height: 48px;
}

.form-control:hover {
    border-color: var(--gray-400);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(0, 102, 251, 0.1);
    background-color: var(--white);
}

.form-control::placeholder {
    color: var(--gray-500);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--gray-100);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Success State */
.form-control.is-valid {
    border-color: var(--success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 44px;
}

.form-control.is-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.1);
}

/* Error State */
.form-control.is-invalid {
    border-color: var(--danger);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc3545'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 44px;
}

.form-control.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
}

/* Validation Feedback */
.valid-feedback {
    display: none;
    font-size: var(--font-size-sm);
    color: var(--success);
    margin-top: var(--spacing-xs);
}

.invalid-feedback {
    display: none;
    font-size: var(--font-size-sm);
    color: var(--danger);
    margin-top: var(--spacing-xs);
}

.is-valid ~ .valid-feedback,
.is-invalid ~ .invalid-feedback {
    display: block;
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--spacing-xs);
}

/* Required field indicator */
.form-label.required::after {
    content: " *";
    color: var(--danger);
}

/* Form Groups */
.mb-3 {
    margin-bottom: var(--spacing-md) !important;
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

/* Select */
.form-select {
    padding: 12px 40px 12px 16px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    background-color: var(--white);
    transition: all var(--transition-base);
    min-height: 48px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
}

.form-select:hover {
    border-color: var(--gray-400);
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(0, 102, 251, 0.1);
}

/* Textarea */
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Input Groups */
.input-group {
    display: flex;
    align-items: stretch;
}

.input-group .form-control {
    border-radius: 0;
}

.input-group .form-control:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.input-group .form-control:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--gray-700);
    background-color: var(--gray-100);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
}

.input-group-text:first-child {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-text:last-child {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Checkbox & Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-left: 0;
    margin-bottom: var(--spacing-sm);
    min-height: 24px;
}

.form-check-input {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--gray-400);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    appearance: none;
    background-color: var(--white);
}

.form-check-input:hover {
    border-color: var(--primary-color);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 251, 0.2);
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input[type="radio"]:checked {
    background-image: none;
    background-color: var(--white);
    border-width: 6px;
}

.form-check-label {
    font-size: var(--font-size-base);
    color: var(--gray-700);
    cursor: pointer;
}

/* Switch */
.form-switch .form-check-input {
    width: 44px;
    height: 24px;
    border-radius: var(--radius-full);
    background-image: none;
    position: relative;
}

.form-switch .form-check-input::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--white);
    top: 1px;
    left: 1px;
    transition: transform var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.form-switch .form-check-input:checked::before {
    transform: translateX(20px);
}

/* Form Helper Text */
.form-text {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-top: var(--spacing-xs);
}

/* ========================================
   CONTAINER & LAYOUT
   ======================================== */
.container {
    padding: var(--spacing-lg);
    background-color: var(--white);
    border: none !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

/* Page Background */
.page-wrapper {
    background: var(--gray-50);
    min-height: 100vh;
}

/* Section Spacing */
.section {
    padding: var(--spacing-2xl) 0;
}

/* ========================================
   NAVIGATION TABS (Button Bar)
   ======================================== */
.nav-button-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
    padding: var(--spacing-md);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
}

.nav-button-bar .btn {
    flex: 0 1 auto;
    min-width: 100px;
}

/* ========================================
   BADGES
   ======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
}

.badge.bg-danger {
    background: var(--danger) !important;
    color: var(--white);
}

.badge.bg-success {
    background: var(--success) !important;
}

.badge.bg-warning {
    background: var(--warning) !important;
    color: var(--gray-900);
}

/* ========================================
   MODAL IMPROVEMENTS
   ======================================== */
.modal-content {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    border-bottom: 1px solid var(--gray-200);
    padding: var(--spacing-lg);
}

.modal-title {
    font-weight: 600;
    color: var(--gray-900);
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-footer {
    border-top: 1px solid var(--gray-200);
    padding: var(--spacing-md) var(--spacing-lg);
}

/* Search Modal */
#searchModal .modal-content {
    border-radius: var(--radius-xl);
}

#searchModal .form-control {
    border-radius: var(--radius-full);
    padding-left: var(--spacing-lg);
}

/* ========================================
   LOADING STATES & ANIMATIONS
   ======================================== */

/* Basic Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.spinner-lg {
    width: 56px;
    height: 56px;
    border-width: 4px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Dots Loading Animation */
.loading-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
    border-radius: 50%;
    animation: dotPulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-title {
    height: 24px;
    width: 60%;
    margin-bottom: 12px;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-card {
    height: 200px;
    border-radius: var(--radius-xl);
}

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

/* Button Loading State */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin-left: -9px;
    margin-top: -9px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn-primary.is-loading::after,
.btn-success.is-loading::after,
.btn-danger.is-loading::after {
    border-color: var(--white);
    border-right-color: transparent;
}

/* Page Loading Overlay */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    flex-direction: column;
    gap: 16px;
}

.page-loader.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Progress Bar */
.progress {
    height: 8px;
    background-color: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.progress-bar.animated {
    background-size: 30px 30px;
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    animation: progressStripes 1s linear infinite;
}

@keyframes progressStripes {
    0% { background-position: 30px 0; }
    100% { background-position: 0 0; }
}

/* Fade In Animation */
.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide In Animation */
.slide-in-left {
    animation: slideInLeft 0.3s ease forwards;
}

.slide-in-right {
    animation: slideInRight 0.3s ease forwards;
}

.slide-in-up {
    animation: slideInUp 0.3s ease forwards;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale Animation */
.scale-in {
    animation: scaleIn 0.2s ease forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse Animation */
.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Shake Animation (for errors) */
.shake {
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Toast Notification */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 400px;
    animation: slideInRight 0.3s ease forwards;
}

.toast.toast-success {
    border-left: 4px solid var(--success);
}

.toast.toast-error {
    border-left: 4px solid var(--danger);
}

.toast.toast-warning {
    border-left: 4px solid var(--warning);
}

.toast.toast-info {
    border-left: 4px solid var(--info);
}

.toast .toast-icon {
    font-size: 20px;
}

.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--info); }

.toast .toast-content {
    flex: 1;
}

.toast .toast-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 2px;
}

.toast .toast-message {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.toast .toast-close {
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    padding: 4px;
}

.toast .toast-close:hover {
    color: var(--gray-700);
}

/* Ripple Effect for Buttons */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-ripple:active::before {
    width: 300px;
    height: 300px;
}

/* ========================================
   FLOATING ACTION BUTTON (legacy - replaced by unified FAB in book.blade.php)
   ======================================== */
.floating-home-btn { display: none; }

/* ========================================
   TABLES
   ======================================== */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--gray-200);
}

.table th {
    background: var(--gray-50);
    font-weight: 600;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table tbody tr:hover {
    background: var(--gray-50);
}

/* ========================================
   ALERTS & NOTIFICATIONS
   ======================================== */
.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: none;
    margin-bottom: var(--spacing-md);
}

.alert-success {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success);
    border-left: 4px solid var(--success);
}

.alert-danger {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger);
    border-left: 4px solid var(--danger);
}

.alert-warning {
    background: rgba(255, 193, 7, 0.1);
    color: #856404;
    border-left: 4px solid var(--warning);
}

.alert-info {
    background: rgba(23, 162, 184, 0.1);
    color: var(--info);
    border-left: 4px solid var(--info);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-muted { color: var(--gray-600) !important; }
.text-dark { color: var(--gray-900) !important; }

.bg-light { background-color: var(--gray-50) !important; }
.bg-white { background-color: var(--white) !important; }

.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

/* Tablet Breakpoint */
@media (max-width: 992px) {
    .container {
        padding: var(--spacing-md);
    }

    .navbar-brand img {
        height: 42px;
    }

    /* Better table scrolling */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile Breakpoint */
@media (max-width: 768px) {
    :root {
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
        --font-size-2xl: 1.25rem;
    }

    body {
        font-size: 15px;
        /* Safe area for notched devices */
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .navbar {
        padding: var(--spacing-xs) var(--spacing-sm);
        /* Safe area insets for mobile */
        padding-top: max(var(--spacing-xs), env(safe-area-inset-top));
    }

    .navbar-brand img {
        height: 40px;
    }

    .container {
        padding: var(--spacing-md);
        border-radius: var(--radius-lg);
        margin-left: 0;
        margin-right: 0;
    }

    .card-body {
        padding: var(--spacing-md);
    }

    /* Touch-friendly buttons - minimum 44px touch target */
    .btn {
        padding: 12px 16px;
        font-size: var(--font-size-sm);
        min-height: 44px;
    }

    .btn-sm {
        padding: 8px 12px;
        min-height: 36px;
    }

    .feature-card {
        min-height: 120px;
        padding: var(--spacing-md);
    }

    .feature-card .icon-wrapper {
        width: 48px;
        height: 48px;
    }

    .feature-card .icon-wrapper img {
        width: 36px;
        height: 36px;
    }

    .img-icon {
        max-height: 48px;
    }

    .icon-title {
        font-size: 12px !important;
        word-break: break-word;
    }

    /* Improved button bar for mobile */
    .nav-button-bar {
        gap: 8px;
        padding: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: wrap;
    }

    .nav-button-bar .btn {
        font-size: 12px;
        padding: 10px 14px;
        min-width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Bottom padding for fixed elements */
    .page-content {
        padding-bottom: 80px;
    }

    /* Floating button adjustments */
    .floating-home-btn {
        bottom: max(20px, env(safe-area-inset-bottom));
        right: 20px;
        width: 50px;
        height: 50px;
    }

    .floating-home-btn i {
        font-size: 20px;
    }

    /* Hide search text on mobile */
    .search-text-mobile {
        display: none;
    }

    /* Form improvements for mobile */
    .form-control {
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 44px;
    }

    .form-select {
        font-size: 16px;
        min-height: 44px;
    }

    /* Modal full screen on mobile */
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    /* Table improvements for mobile */
    .table th,
    .table td {
        padding: 10px 8px;
        font-size: var(--font-size-sm);
    }

    /* 2026-06-18: was here as a one-line touch-scroll hint on mobile;
       superseded by the base .offcanvas-body block which now sets the
       full overflow container (overflow-y, overscroll-behavior,
       touch-action, padding-bottom for the bottom-nav bar). Keeping
       the breakpoint block empty as a documentation tombstone in case
       a mobile-only tweak is needed later. */

    /* Card grid on mobile */
    .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Section spacing */
    .section-divider {
        padding: 10px 16px;
        margin: 16px 0 12px 0;
    }

    .section-divider p {
        font-size: 1rem;
    }
}

/* Small Mobile Breakpoint */
@media (max-width: 576px) {
    .navbar {
        padding: 6px 10px;
    }

    .navbar-brand img {
        height: 36px;
    }

    .container {
        padding: 12px;
        margin-left: 6px;
        margin-right: 6px;
    }

    .feature-card {
        min-height: 100px;
        padding: 10px 8px;
    }

    .icon-title {
        font-size: 12px !important;
        line-height: 1.2;
    }

    .nav-button-bar {
        padding: 10px;
        gap: 6px;
    }

    .nav-button-bar .btn {
        font-size: 11px;
        padding: 8px 12px;
    }

    /* Cards with 3 columns on small phones */
    .col-4 {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Floating button smaller on very small screens */
    .floating-home-btn {
        width: 46px;
        height: 46px;
        bottom: 16px;
        right: 16px;
    }

    .floating-home-btn i {
        font-size: 18px;
    }

    /* Improved badges on small screens */
    .badge {
        font-size: 9px;
        padding: 3px 6px;
    }

    /* Table scrollable on small screens */
    .table {
        font-size: 12px;
    }

    .table th,
    .table td {
        padding: 8px 6px;
    }
}

/* Extra small devices (iPhone SE, etc.) */
@media (max-width: 375px) {
    .navbar-brand img {
        height: 32px;
    }

    .nav-button-bar .btn {
        font-size: 10px;
        padding: 6px 10px;
    }

    .icon-title {
        font-size: 12px !important;
    }

    .section-divider p {
        font-size: 0.875rem;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .navbar {
        padding: 4px 12px;
    }

    .navbar-brand img {
        height: 32px;
    }

    .floating-home-btn {
        width: 40px;
        height: 40px;
        bottom: 10px;
        right: 10px;
    }

    .modal-dialog-centered {
        min-height: auto;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: var(--white);
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: 10000;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .navbar,
    .floating-home-btn,
    .btn,
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: black;
        background: white;
    }

    .container {
        box-shadow: none;
        border: none;
    }
}

/* ========================================
   ENHANCED SEARCH STYLES
   ======================================== */
.search-results {
    max-height: 70vh;
    overflow-y: auto;
}

.search-result-count {
    font-size: var(--font-size-sm);
    border-radius: 0;
}

.search-category-header {
    position: sticky;
    top: 0;
    z-index: 10;
    font-weight: 600;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.search-category-header .badge {
    font-size: 10px;
    font-weight: 600;
}

.search-result-item {
    border-left: 3px solid transparent;
    transition: all var(--transition-fast);
    padding: 12px 16px;
}

.search-result-item:hover {
    border-left-color: var(--primary-color);
    background-color: var(--gray-50);
}

.search-result-item h6 {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.search-result-item .badge {
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.search-result-item p {
    line-height: 1.4;
}

/* Search Modal Improvements */
#searchModal .modal-content {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

#searchModal .modal-header {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

#searchModal .modal-body {
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}

#searchModal .input-group {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

#searchModal .input-group .form-control {
    border: none;
    padding: 12px 16px;
    font-size: var(--font-size-base);
}

#searchModal .input-group .form-control:focus {
    box-shadow: none;
}

#searchModal .input-group-text {
    background: transparent;
    border: none;
    padding: 12px 16px;
}

/* Keyboard shortcut hint */
.search-hint {
    font-size: 11px;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: auto;
}

/* Mobile search adjustments */
@media (max-width: 768px) {
    .search-results {
        max-height: 60vh;
    }

    .search-result-item {
        padding: 10px 12px;
    }

    .search-result-item h6 {
        font-size: 13px;
    }

    .search-category-header {
        font-size: 12px;
        padding: 8px 12px !important;
    }

    #searchModal .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }
}

/* ========================================
   SECTION PAGE STYLES
   ======================================== */

/* Section Block */
.section-block {
    padding: 24px 0 16px;
    /* Offset for fixed navbar + banner when scrolling to anchor */
    scroll-margin-top: 250px;
    transition: background-color 0.35s ease;
}

/* Persistent active section indicator — thin blue left bar, no background */
.section-block.section-active {
    background-color: transparent;
    border-left: 3px solid #0066FB;
    padding-left: 12px;
    border-radius: 0;
}

/* Marathi content sections — same left bar */
.section-block.section-active.has-marathi {
    background-color: transparent;
}

/* Section focus highlight — blue ring glow on navigation (flash on arrival) */
@keyframes sectionFocusFlash {
    0%   { box-shadow: 0 0 0 3px rgba(0, 102, 251, 0.85), 0 0 22px rgba(0, 102, 251, 0.25); border-radius: 8px; }
    60%  { box-shadow: 0 0 0 3px rgba(0, 102, 251, 0.85), 0 0 22px rgba(0, 102, 251, 0.25); border-radius: 8px; }
    100% { box-shadow: 0 0 0 0 rgba(0, 102, 251, 0),     0 0 0   rgba(0, 102, 251, 0);     border-radius: 8px; }
}
.section-block.section-highlight {
    animation: sectionFocusFlash 2.8s ease forwards;
}

/* Anchor scroll offset - applied to scrollable containers */
html {
    scroll-padding-top: 155px;
}

main.overflow-auto {
    scroll-padding-top: 155px;
}

/* Section Heading */
.section-heading {
    text-align: center;
    margin-bottom: 20px;
}

.section-number {
    display: inline-block;
    background: var(--primary-gradient);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.section-title {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-dark);
    line-height: 1.4;
    margin: 8px 0 12px;
    padding: 0 10px;
}

.section-orders-link {
    display: inline-block;
    font-size: 12px;
    color: var(--primary-color);
    background: var(--gray-50);
    padding: 4px 14px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.section-orders-link:hover {
    background: var(--primary-color);
    color: var(--white);
    text-decoration: none;
}

.section-orders-link i {
    margin-right: 4px;
}

/* Section Body */
.section-body {
    font-size: 16px;
    line-height: var(--line-height-reading);
    color: var(--text-reading);
    margin-bottom: 16px;
    font-weight: 420;
    word-spacing: 0.02em;
}

.section-body p {
    margin-bottom: 16px;
}

/* Sub Rules */
.sub-rules {
    padding-left: 16px;
    margin-top: 12px;
}

.sub-rule-item {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    padding: 8px 0;
}

.sub-rule-number {
    font-weight: 700;
    color: var(--primary-dark);
    min-width: 40px;
    flex-shrink: 0;
    font-size: 15px;
}

.sub-rule-text {
    flex: 1;
    font-size: 15px;
    line-height: var(--line-height-reading);
    color: var(--text-reading);
    font-weight: 420;
    word-spacing: 0.02em;
}

.sub-rule-text p {
    margin-bottom: 12px;
}

/* Section Divider */
.section-divider {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--primary-color), transparent);
    margin: 8px 0;
    opacity: 0.4;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .section-title {
        font-size: 17px;
        padding: 0 4px;
    }

    .section-number {
        font-size: 12px;
        padding: 3px 12px;
    }

    .section-body {
        font-size: 15px;
        line-height: 1.85;
        padding-left: 12px;   /* reading margin from left edge */
        padding-right: 12px;  /* reading margin from right edge */
    }

    .sub-rule-item {
        gap: 8px;
    }

    .sub-rule-number {
        min-width: 32px;
        font-size: 15px;
    }

    .sub-rule-text {
        font-size: 15px;
        line-height: 1.85;
    }

    .sub-rules {
        padding-left: 8px;
    }
}

@media (max-width: 576px) {
    .section-block {
        padding: 16px 14px 12px;  /* 14px left+right so text never touches screen edge */
        scroll-margin-top: 220px;
    }

    html {
        scroll-padding-top: 220px;
    }

    .section-title {
        font-size: 15px;
    }

    .section-body {
        font-size: 15px;
        line-height: 1.85;
        padding-left: 0;   /* section-block already provides 14px left/right */
        padding-right: 0;
    }

    .sub-rule-number {
        min-width: 28px;
        font-size: 15px;
    }

    .sub-rule-text {
        font-size: 15px;
        line-height: 1.85;
    }
}

/* ========================================
   NAVBAR & NAVIGATION COMPONENT STYLES
   ======================================== */

/* Main Navbar - Professional Layout */
.navbar-main {
    background: var(--primary-gradient);
    padding: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.navbar-main-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px;
    flex-wrap: nowrap;
}

.navbar-right-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .navbar-main-container {
        padding: 6px 10px;
        gap: 6px;
    }
}

/* Logo/Brand wrapper - Professional Design */
.navbar-brand-box-new {
    border-radius: 8px;
    background: white;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: all 0.3s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.navbar-brand-box-new:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

.navbar-brand-box-new .navbar-logo {
    border-radius: 6px;
    flex-shrink: 0;
}

.navbar-brand-box-new .navbar-brand-text {
    font-size: 17px;
    font-weight: 700;
    background: linear-gradient(135deg, #0052cc, #0066FB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    margin: 0;
    white-space: nowrap;
}

/* Responsive - Logo */
@media (max-width: 768px) {
    .navbar-brand-box-new {
        padding: 3px 8px 3px 3px;
        gap: 6px;
    }

    .navbar-brand-box-new .navbar-logo {
        height: 28px !important;
    }

    .navbar-brand-box-new .navbar-brand-text {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .navbar-brand-box-new .navbar-logo {
        height: 26px !important;
    }

    .navbar-brand-box-new .navbar-brand-text {
        font-size: 14px;
    }
}

/* Navbar Search Wrapper */
.navbar-search-wrapper {
    position: relative;
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .navbar-search-wrapper {
        flex: 0;
        max-width: none;
    }
}

/* Desktop Search Bar */
.search-btn-pill {
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    height: 36px;
    width: 100%;
}

.search-btn-pill:focus-within {
    box-shadow: 0 2px 12px rgba(0,102,251,0.25);
    border: 1px solid #0066FB;
}

/* Mobile Search Toggle Button */
.mobile-search-toggle {
    border-radius: 8px;
    background: white;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mobile-search-toggle:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* Mobile Search Expanded */
.mobile-search-expanded {
    background: var(--primary-gradient);
    border-top: 1px solid rgba(255,255,255,0.2);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navbar Icon Buttons (Bell, etc.) */
.navbar-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    transition: all 0.2s;
}

.navbar-icon-btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    color: white;
    transform: scale(1.05);
}

.navbar-search-input {
    border: none;
    outline: none;
    background: transparent;
    /* 2026-07-26 (UX audit Tier 1 #10): 16px min prevents iOS Safari
       from auto-zooming the viewport to 200% on input focus. */
    font-size: 16px;
    padding: 8px 8px 8px 8px;
    flex: 1;
    min-width: 0;
    color: #333;
}

.navbar-search-input::placeholder {
    color: #adb5bd;
}

.navbar-search-clear {
    background: none;
    border: none;
    font-size: 18px;
    color: #adb5bd;
    padding: 0 10px;
    cursor: pointer;
    line-height: 1;
}

.navbar-search-clear:hover {
    color: #333;
}

.navbar-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    margin-top: 6px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1060;
    padding: 8px;
}

.navbar-search-results:empty,
.navbar-search-results.d-none {
    display: none !important;
}

@media (max-width: 767px) {
    .mobile-search-expanded .navbar-search-results {
        position: relative;
        top: auto;
        left: 0;
        right: 0;
        margin: 0 12px 8px 12px;
        max-height: 60vh;
        border-radius: 12px;
        width: calc(100% - 24px);
    }
}

/* Collapsible Search Categories */
.search-cat-header {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    margin-top: 4px;
    user-select: none;
}

.search-cat-header:hover {
    opacity: 0.9;
}

.sc-arrow {
    transition: transform 0.2s ease;
    font-size: 10px;
}

.sc-arrow.sc-open {
    transform: rotate(90deg);
}

.search-result-item {
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 10px 12px !important;
}

.search-result-item:last-child {
    border-bottom: none !important;
}

.search-result-item:hover {
    background: #f8f9fa !important;
}

.search-popular-item {
    font-size: 14px;
    padding: 10px 16px !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.search-popular-item:hover {
    background: #f0f7ff !important;
}

/* Menu Toggle Button */
.menu-toggle-btn {
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 8px;
    padding: 8px 12px;
}

.menu-toggle-btn .navbar-toggler-icon {
    filter: brightness(10);
}

/* Offcanvas Menu */
.offcanvas-gradient-header {
    background: var(--primary-gradient);
    padding: 20px;
}

.offcanvas-gradient-header .offcanvas-brand {
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

/* Language Buttons */
.lang-btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lang-btn {
    font-weight: 500;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.lang-btn-hindi {
    background: #ffc107;
    color: #212529;
}

.lang-btn-english {
    background: white;
    color: var(--primary-color);
}

.lang-btn-marathi {
    background: var(--secondary-color);
    color: white;
}

/* Accordion in sidebar */
.sidebar-accordion .btn-link {
    text-decoration: none;
    color: var(--gray-800);
}

.sidebar-accordion .btn-link:hover {
    color: var(--primary-color);
}

/* Offcanvas accordion - full text display (no truncation) */
#ruleNumberOffCanvas .card-header .btn,
#ruleNumberOffCanvas .card-header .btn-link {
    white-space: normal;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    hyphens: auto;
}

#ruleNumberOffCanvas .card-header .h4 {
    font-size: 16px;
    line-height: 1.4;
    display: block;
}

#ruleNumberOffCanvas .dropdown-item {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    padding: 8px 16px;
}

#ruleNumberOffCanvas .card-body {
    padding: 8px 12px;
}

#ruleNumberOffCanvas .nav-item.border-bottom {
    padding: 8px 0;
}

/* Also fix main navigation offcanvas dropdown text */
#offcanvasDarkNavbar .dropdown-item {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* Float Action Button (Section NO / Rules NO) */
.fab-btn {
    padding: 0px 10px;
    height: 44px;
    font-size: 14px;
    background-color: var(--primary-color);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
    margin-bottom: 29px;
    transition: all 0.2s ease;
}

.fab-btn:hover {
    background-color: var(--primary-dark);
    color: #FFF;
}

.fab-btn .my-float {
    margin-top: 16px;
    letter-spacing: 2px;
}

/* Navbar offset - MINIMAL 30PX GAP */
.navbar-offset {
    padding-top: 30px;
}
body.has-sub-banner .navbar-offset {
    padding-top: 70px;
}

@media (max-width: 768px) {
    .navbar-offset {
        padding-top: 30px;
    }
    body.has-sub-banner .navbar-offset {
        padding-top: 70px;
    }
}

@media (max-width: 576px) {
    .navbar-offset {
        padding-top: 30px;
    }
    body.has-sub-banner .navbar-offset {
        padding-top: 70px;
    }
}

/* Banner image consistent styling */
.banner-img {
    height: 120px;
    width: 100%;
    object-fit: contain;
}

/* ========================================
   TOC (Table of Contents) FIXES
   ======================================== */

/* Fix chevron icon colors to match brand */
.toc-chevron {
    background-color: var(--primary-color);
    color: white;
    font-style: normal;
    font-weight: 400;
    padding: 2px 4px;
    border-radius: 3px;
}

/* TOC list items - use Inter font */
.toc-list-item {
    text-align: left;
    font-size: 15px;
    font-weight: 400;
    font-family: 'Inter', 'Segoe UI', -apple-system, sans-serif;
    border-bottom: 1px solid var(--gray-200);
    border-top: none;
    border-left: none;
    border-right: none;
    transition: all 0.2s ease;
}

.toc-list-item:hover {
    background-color: #e8f4fc;
    color: var(--primary-dark);
    padding-left: 25px;
    border-left: 4px solid var(--primary-color);
    font-weight: 500;
}

/* ========================================
   PHONE LOGIN PAGE FIXES
   ======================================== */

.btn-verify {
    background-color: var(--primary-color);
    color: white;
    margin-top: 28px;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 500;
    border: none;
    transition: all 0.2s ease;
}

.btn-verify:hover {
    background-color: var(--primary-dark);
    color: white;
}

/* ========================================
   LEGAL TEXT READABILITY IMPROVEMENTS
   ======================================== */

/* Rule/Section text - enhanced readability */
.section-body,
.sub-rule-text {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-reading);
    font-weight: 420;
    word-spacing: 0.03em;
    letter-spacing: 0.01em;
    text-align: justify;
    text-justify: inter-word;
    width: 100%;
    box-sizing: border-box;
}

.section-body p,
.sub-rule-text p {
    margin-bottom: 1.2em;
    text-align: justify;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Marathi text styling - slightly different for visual distinction */
.section-body p:lang(mr),
.sub-rule-text p:lang(mr),
.section-body p:last-child,
.sub-rule-text p:last-child {
    color: #1a365d; /* Slightly different shade for Marathi */
    font-weight: 430;
    line-height: 2.0; /* Extra line height for Devanagari script */
    margin-top: 0.8em;
    padding-top: 0.5em;
    border-top: 1px dashed var(--gray-300);
}

/* First paragraph (English) styling */
.section-body p:first-child,
.sub-rule-text p:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* Preamble text styling */
.container > p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-reading);
    margin-bottom: 1.2em;
    max-width: 100%;
    text-align: justify;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Prevent horizontal scroll - full width content */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
    width: 100%;
}

* {
    box-sizing: border-box;
}

.container {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Mobile specific - prevent all horizontal scroll */
@media (max-width: 768px) {
    html, body, main, .container, .section-block, .section-body, .sub-rule-text {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    img, table, pre, iframe {
        max-width: 100% !important;
        overflow-x: auto;
    }
}

/* Rule title improved spacing */
.section-title {
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Sub-rule improvements */
.sub-rule-item {
    margin-bottom: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

.sub-rule-item:last-child {
    border-bottom: none;
}

.sub-rule-number {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dark);
    min-width: 50px;
}

/* Lists within legal text */
.section-body ol,
.section-body ul,
.sub-rule-text ol,
.sub-rule-text ul {
    padding-left: 24px;
    margin-bottom: 1em;
}

.section-body li,
.sub-rule-text li {
    margin-bottom: 0.5em;
    line-height: 1.8;
}

/* Amendments list */
main ol {
    line-height: 1.8;
    margin-bottom: 1.5em;
}

main ol li {
    margin-bottom: 0.6em;
    padding-left: 8px;
}

/* Strikethrough text - deleted provisions */
.section-body s,
.sub-rule-text s {
    color: var(--gray-500);
    text-decoration: line-through;
    opacity: 0.7;
}

/* Amendment highlights */
.section-body span[style*="background"],
.sub-rule-text span[style*="background"] {
    padding: 2px 4px;
    border-radius: 3px;
}

/* Links in legal text */
.section-body a,
.sub-rule-text a {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.section-body a:hover,
.sub-rule-text a:hover {
    text-decoration-style: solid;
    color: var(--primary-dark);
}

/* Mobile readability adjustments */
@media (max-width: 768px) {
    .section-body,
    .sub-rule-text {
        font-size: 15px;
        line-height: 1.85;
        word-spacing: 0.02em;
    }

    .section-body p,
    .sub-rule-text p {
        margin-bottom: 1em;
        max-width: 100%;
    }

    .section-body p:last-child,
    .sub-rule-text p:last-child {
        line-height: 1.95;
    }

    .sub-rule-number {
        min-width: 40px;
        font-size: 14px;
    }

    .container > p {
        font-size: 15px;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .section-body,
    .sub-rule-text {
        font-size: 15px;
        line-height: 1.85;
    }

    .sub-rule-item {
        padding: 10px 0;
        margin-bottom: 12px;
    }
}

/* ========================================
   TABLE IMPROVEMENTS
   ======================================== */

/* Table row hover effects */
.dataTable tbody tr {
    transition: background-color 0.15s ease;
}

.dataTable tbody tr:hover {
    background-color: var(--gray-50) !important;
}

/* Table header styling */
.dataTable thead th {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--primary-dark);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Table cell padding */
.dataTable tbody td {
    padding: 10px 16px;
    vertical-align: middle;
    font-size: 14px;
}

/* Cursor pointer for clickable rows */
.dataTable tbody tr[onclick],
.dataTable tbody tr[style*="cursor"] {
    cursor: pointer;
}

/* ============================================================
   Styles moved from book.blade.php inline <style> block
   for better caching (loaded once, cached by browser)
   ============================================================ */

/* Typography - Using Inter font from modern-ui.css */
body{
    color: var(--text-reading, #1d2939);
    text-align: left;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
    background-color: var(--gray-50, #f8f9fa);
}

.container{
    padding-bottom: 24px;
    padding-top: 24px;
    background-color: #ffffff;
    border: 1px solid var(--gray-200, #e9ecef);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    line-height: 1.85;
}

/* Navbar Auth Buttons */
.navbar-auth-buttons {
    margin-right: 10px;
}
.navbar-auth-btn {
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.navbar-auth-btn:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Sign In Button - Blue */
.navbar-auth-btn.btn-outline-primary {
    background: #0066FB;
    color: white !important;
    border: none;
}
.navbar-auth-btn.btn-outline-primary:hover {
    background: #0052cc;
    color: white !important;
}
/* Register Button - Green */
.navbar-auth-btn.btn-primary {
    background: #28a745;
    color: white !important;
    border: none;
}
.navbar-auth-btn.btn-primary:hover {
    background: #20913d;
    color: white !important;
}
/* Logout Button - Red */
.navbar-auth-btn.btn-outline-danger {
    background: #dc3545;
    color: white !important;
    border: none;
}
.navbar-auth-btn.btn-outline-danger:hover {
    background: #c82333;
    color: white !important;
}
/* U1 (2026-06-04): paywall nag dedup on /book/*.
   Each <x-content-gate> inside the sub-rule loop was rendering its own
   full "Free Trial Ended — Subscribe" card (~20×/page on big rulesets).
   The audit asked to "gate it to render once" as a presentation-only
   change. Server-side: every gate still sends the full preview + Marathi
   extract + blur (entitlement logic untouched — that's Batch 3 / S2).
   CSS hides the full CTA inside .sub-rules and replaces it with a
   compact "🔒 Subscribe to view this sub-rule" line; the canonical
   single CTA is the one rendered for the chapter rule above the
   sub-rule loop (book_main.blade.php:256). */
.sub-rules .gate-message > * {
    display: none;
}
.sub-rules .gate-message::before {
    content: "🔒 Subscribe to view this sub-rule (see card above)";
    display: block;
    font-size: 13px;
    color: #1a365d;
    font-weight: 600;
    padding: 6px 0;
    text-align: center;
}
.sub-rules .content-blurred {
    max-height: 60px;
}
.sub-rules .content-gated {
    margin-top: -6px;
}

/* User Name Display in Navbar */
.navbar-user-name {
    background: #1a365d;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    /* 2026-06-04 (U4): server-side Str::limit(24) handles 95% of names;
       CSS clips at 200px if rendered width still overflows (e.g. wide
       Devanagari glyphs). white-space:nowrap stops wrap to two lines. */
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
}
.navbar-user-name i {
    color: #68d391;
    font-size: 16px;
}
.nav-auth-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}
.nav-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: linear-gradient(135deg, #e8f4fd, #d4edda);
    border-radius: 8px;
    margin-bottom: 10px;
    font-weight: 500;
    color: #1a365d;
}
.nav-user-info i {
    font-size: 24px;
    color: #0066FB;
}
.nav-logout-link {
    color: #dc3545 !important;
}
.nav-logout-link:hover {
    background-color: #fff5f5 !important;
}
@media (max-width: 576px) {
    .navbar-auth-buttons {
        margin-right: 5px;
    }
    .navbar-auth-btn {
        padding: 8px 12px;
        font-size: 12px;
        min-height: 44px;
    }
}
.modal.left .modal-dialog,
.modal.right .modal-dialog,
.modal.top .modal-dialog,
.modal.bottom .modal-dialog {
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}

/* Left & Right */

.modal.left .modal-dialog,
.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 500px;
max-width: 100%;
height: 100%;
}

.modal.left .modal-content,
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
padding: var(--spacing-lg, 1.5rem) var(--spacing-lg, 1.5rem) 80px;
}

.modal.left.fade .modal-dialog {
left: -500px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.show .modal-dialog {
left: 0;
}

.modal.right.fade .modal-dialog {
right: -500px;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog {
right: 0;
}

.modal.left .modal-content,
.modal.right .modal-content,
.modal.top .modal-content,
.modal.bottom .modal-content,
.modal.full .modal-content {
border-radius: 0;
border: none;
}

.modal.left .modal-dialog.modal-sm,
.modal.right .modal-dialog.modal-sm {
width: 300px;
}

.modal.left .modal-dialog.modal-lg,
.modal.right .modal-dialog.modal-lg {
width: 800px;
}

.modal.left .modal-dialog.modal-xl,
.modal.right .modal-dialog.modal-xl {
width: 1140px;
}

/* Top and Bottom */

.modal.top .modal-dialog,
.modal.bottom .modal-dialog {
position: fixed;
margin: auto;
width: 100%;
max-width: 100%;
height: auto;
}

.modal.top .modal-content,
.modal.bottom .modal-content {
height: auto;
overflow-y: auto;
}

.modal.top .modal-body,
.modal.bottom .modal-body {
padding: var(--spacing-lg, 1.5rem);
}

/* Top */

.modal.top.fade .modal-dialog {
top: -100%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.top.fade.show .modal-dialog {
top: 0;
}

/* Bottom */

.modal.bottom.fade .modal-dialog {
bottom: -100%;
-webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
-moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
-o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
transition: opacity 0.3s linear, bottom 0.3s ease-out;
}

.modal.bottom.fade.show .modal-dialog {
bottom: 0;
}

.modal.bottom.fade .modal-dialog {
bottom: -100%;
}

/* Full Screen */

.modal.full .modal-dialog {
position: fixed;
margin: auto;
width: 100%;
max-width: 100%;
height: 100%;
}

.modal.full .modal-content {
height: 100%;
overflow-y: auto;
}

.modal.full .close-modal {
position: fixed;
top: 0;
right: 3rem;
}

/* Footer */

.modal-footer-fixed {
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
border-radius: 0;
}

/* XS */

.modal.left.xs .modal-body,
.modal.right.xs .modal-body {
    padding: var(--spacing-lg, 1.5rem);
}

a.nav-link{
    color:black;
}



.pointer{
    cursor: pointer;
}

.float{
    padding: 0px 14px;
    height: 44px;
    bottom: max(18px, env(safe-area-inset-bottom));
    font-size: 13px;
    left: max(18px, env(safe-area-inset-left));
    background-color: var(--primary-color, #0066FB);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    margin-bottom: 29px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.float:hover {
    background-color: var(--primary-dark, #0052cc);
    color: #FFF;
    text-decoration: none;
}

.my-float{
    line-height: 1;
}

/* 2026-07-26 (UX audit Tier 1): touch-target floor for mobile.
   Apple + Google guidelines say interactive elements should be ≥44px in the
   primary tap dimension. Enforce this on the common patterns without changing
   visual size (uses padding + min-height so the icon stays small but the
   hit area expands). Scoped to ≤768px so desktop layouts stay compact. */
@media (max-width: 768px) {
    /* TOC list links (BPA / Manual landing pages) — visible text is small but
       tap area needs headroom. */
    .pa-sections li a,
    .pa-leaf li a,
    .pa-rules li a,
    .mx-menu-sublink,
    .toc-launcher-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    /* Chevron toggles + close buttons — expand hit area with padding while
       keeping the icon centered. */
    .mx-menu-chevron,
    .pa-chapter-chev,
    .mbn-item i {
        padding: 4px;
    }
    /* Bottom-nav slots — already 50px min-height per source, ensure it holds */
    .mbn-item { min-height: 48px; }
    /* Small icon buttons in the AI panel + input area */
    .ai-mic-btn,
    .ai-submit-btn,
    .ai-close-btn,
    .ai-history-btn,
    .ai-new-chat-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* 2026-07-23: on mobile with the bottom nav bar (.mbn-bar, ~64px + safe-area),
   lift the book-page FAB wrapper above the nav — otherwise "Go to Section" /
   "Go to Rule" buttons hide behind the nav. Follows the same pattern as
   .floating-home-btn (85px offset) so the FAB stack is visually consistent. */
@media (max-width: 768px) {
    .book-fab-container.fixed-bottom {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: 8px !important;
    }
}

/* Floating Home Button - positioned above Section/Rules NO button */
.floating-home-btn {
    position: fixed;
    bottom: calc(85px + env(safe-area-inset-bottom, 0px));
    left: max(26px, env(safe-area-inset-left));
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2196F3, #1976D2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease;
    text-decoration: none;
}

.floating-home-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 25px rgba(33, 150, 243, 0.6);
    background: linear-gradient(135deg, #1976D2, #0D47A1);
}

.floating-home-btn i {
    color: white;
    font-size: 24px;
}

.floating-home-btn:hover i {
    animation: homeIconPulse 0.5s ease;
}

@keyframes floatBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes homeIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Tooltip on hover - appears on right side */
.floating-home-btn::before {
    content: 'Home';
    position: absolute;
    left: 58px;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.floating-home-btn:hover::before {
    opacity: 1;
    visibility: visible;
}

.floating-home-btn::after {
    content: '';
    position: absolute;
    left: 52px;
    border: 6px solid transparent;
    border-right-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.floating-home-btn:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Share Button and Menu */
.share-container {
    position: fixed;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    right: 25px;
    z-index: 9999;
}

.share-main-btn {
    display: none; /* Hidden - FAB share button triggers the menu instead */
}

.share-menu {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.share-container.active .share-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.share-btn:hover {
    transform: scale(1.15);
}

.share-btn i {
    color: white;
    font-size: 18px;
}

.share-btn.whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); }
.share-btn.facebook { background: linear-gradient(135deg, #1877F2, #0D65D9); }
.share-btn.twitter { background: linear-gradient(135deg, #1DA1F2, #0C85D0); }
.share-btn.telegram { background: linear-gradient(135deg, #0088cc, #006699); }
.share-btn.linkedin { background: linear-gradient(135deg, #0077B5, #005582); }
.share-btn.copy { background: linear-gradient(135deg, #6c757d, #495057); }

.share-btn::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 54px;
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.share-btn:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Copy success toast */
.copy-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #28a745;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Install App Popup */
.install-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10002;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.install-popup-overlay.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.install-popup {
    background: white;
    border-radius: 20px;
    padding: 30px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.install-popup-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 102, 251, 0.3);
}

.install-popup h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1d2939;
    margin-bottom: 10px;
}

.install-popup p {
    font-size: 14px;
    color: #667085;
    margin-bottom: 8px;
    line-height: 1.5;
}

.install-popup .benefits {
    text-align: left;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
}

.install-popup .benefits li {
    font-size: 13px;
    color: #344054;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.install-popup .benefits li:last-child {
    margin-bottom: 0;
}

.install-popup .benefits li i {
    color: #28a745;
    font-size: 14px;
}

.install-popup .btn-install {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #0066FB, #0052cc);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.install-popup .btn-install:hover {
    background: linear-gradient(135deg, #0052cc, #003d99);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 251, 0.4);
}

.install-popup .btn-install i {
    font-size: 18px;
}

.install-popup .btn-later {
    background: none;
    border: none;
    color: #667085;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

.install-popup .btn-later:hover {
    color: #1d2939;
}

/* Login Required Popup (5-min timer) */
.login-required-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10005;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.login-required-overlay.show {
    display: flex;
    animation: fadeIn 0.4s ease;
}

.login-required-popup {
    background: white;
    border-radius: 24px;
    padding: 35px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.5s ease;
}

.login-required-popup .popup-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066FB, #0052cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.login-required-popup .popup-icon i {
    font-size: 36px;
    color: white;
}

.login-required-popup h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1d2939;
    margin-bottom: 12px;
}

.login-required-popup p {
    font-size: 15px;
    color: #667085;
    margin-bottom: 25px;
    line-height: 1.6;
}

.login-required-popup .btn-login-popup {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #0066FB, #0052cc);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
    text-decoration: none;
}

.login-required-popup .btn-login-popup:hover {
    background: linear-gradient(135deg, #0052cc, #003d99);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 251, 0.4);
    color: white;
}

.login-required-popup .btn-register-popup {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #28a745, #20913d);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    text-decoration: none;
}

.login-required-popup .btn-register-popup:hover {
    background: linear-gradient(135deg, #20913d, #1a7a33);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    color: white;
}

.login-required-popup .btn-later-popup {
    background: none;
    border: none;
    color: #667085;
    font-size: 14px;
    cursor: pointer;
    padding: 10px;
    transition: color 0.2s ease;
}

.login-required-popup .btn-later-popup:hover {
    color: #1d2939;
}

.login-required-popup .timer-info {
    font-size: 12px;
    color: #98a2b3;
    margin-top: 15px;
}

.copy-toast.show {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 480px) {
    .floating-whatsapp-btn {
        bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    }
}

/* Unified Floating Action Button (FAB) — Home / Top / Share quick actions */
.fab-wrapper {
    position: fixed;
    bottom: calc(25px + env(safe-area-inset-bottom, 0px));
    right: 25px;
    z-index: 9999;
}
/* Lift the FAB above the mobile bottom nav bar (≤768px) AND move it to the
   LEFT side so it doesn't share the right column with the AI FAB +/or the
   rightmost nav item. The nav is ~64px tall + safe-area; without this
   offset the FAB sat behind it and was unreachable on phones.
   2026-07-23: bumped bottom offset 88px → 132px so it stacks ABOVE the
   book-page "Go to Section / Rule" pill.
   2026-07-23 (rev2): 132px still left ~25% overlap on phones per
   founder's visual check. Actual pill top edge sits higher than my
   theoretical math because of the .mb-4 wrapper's margin. Bumped
   132px → 170px to give a clear ~15-20px gap above the pill. */
@media (max-width: 768px) {
    .fab-wrapper {
        bottom: calc(170px + env(safe-area-inset-bottom, 0px));
        right: auto;
        left: 16px;
    }
    /* When the FAB is on the left, the menu must open upward from the LEFT
       side (default desktop has it at right: 4px relative to wrapper). */
    .fab-menu {
        right: auto;
        left: 4px;
    }
    /* The tooltip label (data-label) sits to the LEFT of each fab-item by
       default; flip to the right so it doesn't render off-screen on the
       left edge. */
    .fab-item::before {
        right: auto;
        left: 54px;
    }
}
.fab-main {
    width: 52px;
    height: 52px;
    background: var(--primary-gradient, linear-gradient(135deg, #0066FB, #004ecb));
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 102, 251, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}
.fab-main:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 25px rgba(0, 102, 251, 0.5);
}
.fab-main i { color: white; font-size: 20px; transition: transform 0.3s ease; }
.fab-icon-close { display: none; }
.fab-wrapper.open .fab-icon-open { display: none; }
.fab-wrapper.open .fab-icon-close { display: inline; }
.fab-wrapper.open .fab-main { transform: rotate(0deg); background: linear-gradient(135deg, #dc3545, #c62828); }

.fab-menu {
    position: absolute;
    bottom: 62px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}
.fab-wrapper.open .fab-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.fab-item {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    background: white;
    position: relative;
}
.fab-item:nth-child(1) { background: #0066FB; } /* Home - blue */
.fab-item:nth-child(2) { background: #28a745; } /* Top - green */
.fab-item:nth-child(3) { background: #6f42c1; } /* Share - purple */
.fab-item i { color: white; font-size: 16px; }
.fab-item:hover { transform: scale(1.12); }
.fab-item::before {
    content: attr(data-label);
    position: absolute;
    right: 54px;
    background: #333;
    color: white;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.fab-item:hover::before { opacity: 1; }
@media (max-width: 576px) {
    /* bottom + right inherited from the 768px rule above (88px + safe-area). */
    .fab-main { width: 48px; height: 48px; }
    .fab-item { width: 40px; height: 40px; }
    .fab-item::before { display: none; }
}

/* Site Footer */
.site-footer {
    background: linear-gradient(135deg, #1a365d, #2c5282) !important;
    font-size: 13px;
}
.site-footer a {
    opacity: 0.85;
    transition: opacity 0.2s;
}
.site-footer a:hover {
    opacity: 1;
    text-decoration: underline !important;
}
@media (max-width: 768px) {
    .site-footer {
        font-size: 12px;
    }
    .site-footer a {
        display: inline-block;
        margin: 3px 6px;
    }
}

/* Respect user preference for reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    marquee {
        -moz-binding: none;
        animation: none;
    }
}

/* ========================================
   UI/UX IMPROVEMENTS — Reading Experience
   ======================================== */

/* 1. Reading Progress Bar */
#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #0066FB, #00c6ff);
    z-index: 10000;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* 2. Font Size Control Buttons */
.font-ctrl-group {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-right: 4px;
}
.font-ctrl-btn {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #6c757d;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 12px;
}
.font-ctrl-btn:hover {
    background: #f0f4ff;
    color: #0066FB;
    border-color: #0066FB;
}
/* Font size levels applied to reading area */
body.font-sm  main { font-size: 13px; }
body.font-md  main { font-size: 15px; }  /* default */
body.font-lg  main { font-size: 17px; }
body.font-xl  main { font-size: 19px; line-height: 1.9; }

/* 3. Copy Section Link Button */
.copy-link-btn {
    background: none;
    border: none;
    color: #ced4da;
    font-size: 12px;
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    vertical-align: middle;
    margin-left: 6px;
    flex-shrink: 0;
}
.copy-link-btn:hover { color: #0066FB; background: #e8f0fe; }
.copy-link-btn.copied { color: #28a745; }
#copy-toast {
    position: fixed;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%);
    background: #1d2939;
    color: white;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 13px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    white-space: nowrap;
}
#copy-toast.show { opacity: 1; }

/* 4. Breadcrumb */
.reading-breadcrumb {
    font-size: 12px;
    color: #9198a1;
    margin-bottom: 10px;
    padding: 2px 0;
}
.reading-breadcrumb a {
    color: #9198a1;
    text-decoration: none;
}
.reading-breadcrumb a:hover { color: #0066FB; text-decoration: underline; }
.reading-breadcrumb .bc-sep { margin: 0 5px; color: #c5cad0; }

/* 5. Section Counter Badge */
.section-counter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}
.section-counter {
    display: inline-block;
    font-size: 11px;
    color: #9198a1;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 2px 12px;
}
.print-btn {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #6c757d;
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.print-btn:hover { color: #0066FB; border-color: #0066FB; background: #f0f4ff; }
.print-btn i { margin-right: 4px; }

/* 6. Sub-rules Collapse Toggle */
.subrule-toggle-btn {
    background: none;
    border: 1px solid #e9ecef;
    color: #9198a1;
    font-size: 11px;
    padding: 1px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.subrule-toggle-btn:hover { background: #f0f4ff; color: #0066FB; border-color: #0066FB; }
.sub-rules.collapsed .sub-rule-item { display: none; }
.sub-rules.collapsed .sub-rule-item:first-child { display: flex; opacity: 0.5; }

/* 7. Keyboard shortcut hint (desktop only) */
@media (min-width: 992px) {
    .kbd-hint {
        display: inline;
        font-size: 10px;
        color: #adb5bd;
        background: #f5f5f5;
        border: 1px solid #dee2e6;
        border-bottom: 2px solid #c6cbd1;
        border-radius: 3px;
        padding: 0 5px;
        font-family: monospace;
    }
}
@media (max-width: 991px) { .kbd-hint { display: none; } }

/* 8. Print-Friendly Mode */
@media print {
    #reading-progress,
    .navbar-main,
    .offcanvas,
    .fab-wrapper,
    .float,
    .app-install-banner,
    #swUpdateBanner,
    .section-orders-link,
    .copy-link-btn,
    .subrule-toggle-btn,
    .section-counter-bar,
    .reading-breadcrumb,
    .content-gate-overlay,
    footer,
    #shareContainer,
    .font-ctrl-group,
    #copy-toast,
    .section-divider,
    .btn, .btn-sm { display: none !important; }

    .content-blurred { filter: none !important; -webkit-filter: none !important; }
    .content-gated { position: static !important; }

    body { font-size: 11pt; color: #000; background: white !important; }
    main { padding-top: 0 !important; overflow: visible !important; }
    .navbar-offset { margin-top: 0 !important; padding-top: 0 !important; }
    .section-block { page-break-inside: avoid; break-inside: avoid; background: none !important; padding: 8pt 0; }
    .section-number { font-weight: 700; color: #000; }
    h1, h2 { color: #000; }
    a { color: #000; text-decoration: none; }
    @page { margin: 1.5cm; }
    .simple-marathi-box { display: none !important; }
}

/* ========================================
   SIMPLE MARATHI MODE
   2026-08-24: legacy body.simple-marathi-mode toggle retired.
   Visibility is now driven by the per-ruleset green pill in
   book_main.blade.php via .mx-smr-visible on each .simple-marathi-box.
   The base display:none + reveal rule live in that template so both
   ends of the toggle stay together. Card styling below still applies. */
.simple-marathi-card {
    padding: 12px 16px;
    margin: 8px 0 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-left: 4px solid #f97316;
}

.simple-marathi-header {
    font-size: 12px;
    color: #9a3412;
    font-weight: 600;
    margin-bottom: 6px;
}

.simple-marathi-body {
    font-size: 14px;
    line-height: 1.8;
    color: #431407;
}

/* ── Search Autocomplete ── */
.search-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
    z-index: 1060;
    max-height: 340px;
    overflow-y: auto;
}
.search-ac-category {
    padding: 5px 14px;
    font-size: 10px;
    text-transform: uppercase;
    color: #6c757d;
    background: #f8f9fa;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #f0f0f0;
}
.search-ac-item {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f8f9fa;
}
.search-ac-item:hover, .search-ac-item.ac-active {
    background: #e9ecef;
}
.search-ac-item:last-child { border-bottom: none; }
.search-ac-item mark {
    background: #fff3cd;
    padding: 0;
    font-weight: 600;
    border-radius: 2px;
}

/* ── Bookmarks ── */
.bookmark-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 16px;
    color: #adb5bd;
    transition: color 0.15s;
}
.bookmark-btn:hover { color: #0066FB; }
.bookmark-btn.bookmarked { color: #0066FB; }

/* ── Chat History Panel ── */
.ai-history-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.8;
    border-radius: 4px;
}
.ai-history-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.ai-history-panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 100%;
    max-width: 320px;
    background: #fff;
    border-right: 1px solid #dee2e6;
    z-index: 10;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(0,0,0,0.08);
}
.ai-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}
.ai-history-header h6 { margin: 0; font-size: 14px; font-weight: 600; }
.ai-history-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ai-history-item:hover { background: #f8f9fa; }
.ai-history-item-body { flex: 1; min-width: 0; }
.ai-history-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-history-meta { font-size: 11px; color: #6c757d; margin-top: 2px; }
.ai-history-delete {
    background: none;
    border: none;
    color: #adb5bd;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
}
.ai-history-delete:hover { color: #dc3545; }
.ai-history-empty {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-size: 13px;
}