/**
 * RPL Website — typography, navigation & flat-color overrides
 * Loaded last so it wins over layout + page-specific styles.
 */

:root {
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --fs-xs: 0.6875rem;
    --fs-sm: 0.75rem;
    --fs-base: 0.8125rem;
    --fs-md: 0.875rem;
    --fs-lg: 0.9375rem;
    --fs-xl: 1rem;
    --fs-2xl: 1.125rem;
    --fs-3xl: 1.25rem;
    --fs-4xl: 1.5rem;

    --drawer-width: 272px;

    --gradient-primary: var(--primary);
    --gradient-hero: var(--bg-primary);
    --gradient-secondary: var(--primary);
    --gradient-teal: var(--primary);
    --gradient-mint: var(--primary);
    --gradient-deep: var(--accent);
}

/* --- Compact layout: remove top gaps --- */
.site-main,
main {
    margin-top: 58px !important;
}

@media (max-width: 991.98px) {
    .site-main,
    main {
        margin-top: 52px !important;
    }
}

.hero-section {
    min-height: auto !important;
    padding: 1.25rem 0 1.75rem !important;
    background: var(--bg-primary) !important;
}

.hero-content {
    padding: 1.25rem !important;
    margin-left: 0.75rem !important;
}

.hero-split {
    min-height: min(680px, 88vh) !important;
    padding: 0.5rem 0 1.25rem !important;
    overflow: visible !important;
}

.hero-right {
    min-height: 520px !important;
    overflow: visible !important;
}

.hero-center-image {
    top: 52% !important;
    transform: translate(-50%, -49%) !important;
}

.booking-widget {
    overflow: visible !important;
}

.booking-btn {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--primary) !important;
    color: #ffffff !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.8125rem !important;
    margin-top: 0.5rem !important;
}

.hero-left {
    padding: 1.5rem 1.75rem !important;
}

.section,
.gallery-section,
.packages-section,
.package-detail-section {
    padding: 2.5rem 0 !important;
    min-height: auto !important;
}

.login-hero,
.register-hero,
.auth-page {
    min-height: auto !important;
    padding: 1.5rem 0 !important;
}

footer {
    margin-top: 2.5rem !important;
}

/* --- Flat icon backgrounds (no gradients) --- */
.icon-wrapper,
.feature-card .icon-wrapper,
.feature-card:nth-child(n) .icon-wrapper,
.login-icon,
.register-icon,
.chat-toggle-btn,
.chat-header,
.date-badge,
.slot-card .date-badge,
.feature-card::before,
.package-card::before {
    background: var(--primary) !important;
}

.online-chat-toggle-btn {
    background: #3B82F6 !important;
}

.online-chat-header {
    background: #2563EB !important;
}

.stats-number {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--primary) !important;
    background-clip: unset !important;
    color: var(--primary) !important;
}

.cta-section,
[class*="cta-section"] {
    background: var(--primary) !important;
}

.hero-title-large,
.hero-left h1,
.login-left h1,
.register-left h1 {
    background: none !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .hero-title-large,
[data-theme="dark"] .login-left h1,
[data-theme="dark"] .register-left h1 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.gallery-overlay,
.image-caption-overlay {
    background: rgba(0, 0, 0, 0.65) !important;
}

.package-card.featured,
.package-detail-pricing {
    background: var(--bg-secondary) !important;
}

.hero-left,
.hero-right,
.hero-split .hero-left,
.hero-split .hero-right,
.login-hero,
.register-hero {
    background: var(--bg-primary) !important;
}

.hero-left::before {
    display: none !important;
}

/* --- Global typography --- */
body {
    font-family: var(--font-body) !important;
    font-size: var(--fs-base) !important;
    line-height: 1.55 !important;
    letter-spacing: -0.011em;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: var(--font-heading) !important;
    letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-4xl) !important; font-weight: 700 !important; }
h2 { font-size: var(--fs-3xl) !important; font-weight: 700 !important; }
h3 { font-size: var(--fs-2xl) !important; font-weight: 600 !important; }
h4 { font-size: var(--fs-xl) !important; font-weight: 600 !important; }
h5 { font-size: var(--fs-lg) !important; font-weight: 600 !important; }
h6 { font-size: var(--fs-md) !important; font-weight: 600 !important; }

p, .lead, .card-text, .form-label, label, li, td, th {
    font-size: var(--fs-base);
}

small, .small, .form-text {
    font-size: var(--fs-sm) !important;
}

.btn, .btn-primary-custom, .btn-outline-custom {
    font-size: var(--fs-sm) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    padding: 0.45rem 1rem !important;
}

.btn-lg {
    font-size: var(--fs-md) !important;
}

/* Navbar & dropdown / submenu */
.navbar-brand {
    font-size: var(--fs-lg) !important;
    font-weight: 700 !important;
    font-family: var(--font-heading) !important;
}

.navbar-brand img {
    height: 36px !important;
    width: auto !important;
    margin-right: 8px !important;
}

.navbar-brand i {
    font-size: 1.5rem !important;
}

.nav-link {
    font-size: var(--fs-sm) !important;
    font-weight: 500 !important;
    padding: 0.35rem 0.6rem !important;
}

.dropdown-menu {
    font-size: var(--fs-sm) !important;
    padding: 4px 0 !important;
    min-width: 180px !important;
}

.dropdown-item {
    font-size: var(--fs-sm) !important;
    padding: 0.4rem 0.875rem !important;
    font-weight: 500 !important;
}

.dropdown-item i {
    font-size: 0.8rem !important;
}

.dropdown-toggle::after {
    font-size: 0.65rem !important;
}

.accordion-button,
.accordion-body,
.list-group-item,
.nav-tabs .nav-link,
.modal-title,
.modal-body,
.alert,
.breadcrumb,
.pagination .page-link {
    font-size: var(--fs-sm) !important;
}

.accordion-button {
    font-weight: 600 !important;
    padding: 0.625rem 0.875rem !important;
}

/* Hero */
.hero-section {
    background: var(--bg-primary) !important;
}

.hero-title {
    font-size: clamp(1.25rem, 2.8vw, 1.625rem) !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.2 !important;
}

.hero-content h1,
.hero-title {
    font-size: clamp(1.25rem, 2.8vw, 1.625rem) !important;
}

.hero-subtitle {
    font-size: var(--fs-sm) !important;
    margin-bottom: 0.75rem !important;
}

.hero-description {
    font-size: var(--fs-sm) !important;
    margin-bottom: 1rem !important;
    line-height: 1.5 !important;
}

.hero-content p,
.hero-subtitle,
.hero-description {
    font-size: var(--fs-sm) !important;
}

.hero-cta-button {
    font-size: var(--fs-xs) !important;
    padding: 0.45rem 1rem !important;
    letter-spacing: 0.05em !important;
}

.hero-social-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
}

/* Home hero */
.hero-split .hero-left,
.hero-split .hero-right,
.hero-left,
.hero-right {
    background: var(--bg-primary) !important;
}

.hero-left::before,
.hero-image-container::after {
    background: transparent !important;
    display: none !important;
    content: none !important;
}

.hero-main-title,
.hero-left h1,
.hero-split h1 {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
    font-size: clamp(1.375rem, 3vw, 1.75rem) !important;
}

.hero-tagline,
.hero-left .lead,
.hero-split .hero-tagline {
    font-size: var(--fs-sm) !important;
}

.booking-widget h3 {
    font-size: var(--fs-md) !important;
}

.booking-widget p,
.booking-widget label,
.booking-widget small {
    font-size: var(--fs-xs) !important;
}

/* Sections */
.section-title,
.section-heading {
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    font-weight: 700 !important;
}

.section-subtitle {
    font-size: var(--fs-sm) !important;
    margin-bottom: 2rem !important;
}

.feature-card h3,
.service-card h3,
.package-card h3,
.premium-card h2,
.premium-card h3,
.premium-card h4,
.premium-card h5 {
    font-size: var(--fs-md) !important;
}

.feature-card p,
.service-card p,
.premium-card p {
    font-size: var(--fs-sm) !important;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-size: clamp(1.125rem, 2.2vw, 1.5rem) !important;
}

.stats-number,
.stats-card .stats-number {
    font-size: 1.375rem !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--primary) !important;
    background-clip: unset !important;
    color: var(--primary) !important;
}

.stats-card p,
.stats-label {
    font-size: var(--fs-sm) !important;
}

.icon-wrapper i {
    font-size: 1.125rem !important;
}

.icon-container {
    font-size: 1rem !important;
    width: 44px !important;
    height: 44px !important;
}

input, select, textarea, .form-control, .form-select {
    font-size: var(--fs-sm) !important;
}

.badge, .date-badge {
    font-size: 0.625rem !important;
    font-weight: 600 !important;
}

.slot-card h5,
.slot-card .card-title {
    font-size: var(--fs-md) !important;
}

/* Auth pages */
.login-hero,
.register-hero {
    background: var(--bg-primary) !important;
}

.login-hero::after,
.register-hero::after {
    background: var(--bg-secondary) !important;
    opacity: 0.5;
}

.login-title,
.register-title,
.auth-hero-title {
    font-size: clamp(1.25rem, 3vw, 1.625rem) !important;
    background: none !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

.login-card h2,
.register-card h2 {
    font-size: var(--fs-lg) !important;
}

.login-card,
.register-card {
    font-size: var(--fs-sm) !important;
}

/* Footer */
footer, footer p, footer a, footer li {
    font-size: var(--fs-sm) !important;
}

footer h5, footer h6 {
    font-size: var(--fs-md) !important;
}

/* Cards & tables */
.card-title {
    font-size: var(--fs-md) !important;
}

.table {
    font-size: var(--fs-sm) !important;
}

/* CTA & flat backgrounds (no gradients) */
.cta-section,
[class*="cta-section"] {
    background: var(--primary) !important;
}

.feature-card::before {
    background: var(--primary) !important;
}

.icon-wrapper,
.feature-card .icon-wrapper,
.feature-card:nth-child(n) .icon-wrapper {
    background: var(--primary) !important;
}

.date-badge,
.slot-card .date-badge,
.slot-card:nth-child(odd) .date-badge,
.slot-card:nth-child(even) .date-badge {
    background: var(--primary) !important;
}

.mobile-menu-toggle {
    background: var(--primary) !important;
    box-shadow: none !important;
}

.mobile-drawer-header {
    background: var(--bg-secondary) !important;
}

@media (max-width: 991.98px) {
    .navbar-collapse,
    [data-theme="light"] .navbar-collapse,
    [data-theme="dark"] .navbar-collapse {
        background: transparent !important;
    }

    .mobile-nav-drawer,
    [data-theme="light"] .mobile-nav-drawer,
    [data-theme="dark"] .mobile-nav-drawer {
        background: var(--card-bg) !important;
    }
}

.mobile-drawer-brand span {
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    font-family: var(--font-heading) !important;
}

/* Navbar compact */
.navbar {
    height: 58px !important;
}

.navbar.scrolled {
    height: 54px !important;
}

.theme-toggle {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
}

.theme-toggle i {
    font-size: 14px !important;
}

.navbar-cricket-ball {
    width: 34px !important;
    height: 34px !important;
}

/* Mobile menu button */
.mobile-menu-toggle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

.mobile-menu-toggle:hover {
    background: rgba(var(--primary-rgb), 0.08) !important;
    border-color: rgba(var(--primary-rgb), 0.35) !important;
    transform: none !important;
    box-shadow: none !important;
}

.mobile-menu-bar {
    height: 2px !important;
    background: var(--text-primary) !important;
}

.mobile-menu-toggle-box {
    width: 18px !important;
    height: 14px !important;
}

.mobile-menu-bar:nth-child(2) { top: 6px !important; }
.mobile-menu-bar:nth-child(3) { top: 12px !important; }

body.mobile-nav-open .mobile-menu-bar:nth-child(1) { top: 6px !important; }
body.mobile-nav-open .mobile-menu-bar:nth-child(3) { top: 6px !important; }

/* --- Mobile side drawer --- */
@media (max-width: 991.98px) {
    .navbar {
        height: 52px !important;
    }

    .navbar.scrolled {
        height: 50px !important;
    }

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

    .navbar-brand {
        font-size: var(--fs-md) !important;
    }

    .nav-link {
        font-size: var(--fs-sm) !important;
        padding: 0.5rem 0.75rem !important;
    }

    .dropdown-item {
        font-size: var(--fs-sm) !important;
        padding: 0.45rem 0.75rem 0.45rem 1rem !important;
    }

    .mobile-nav-overlay {
        background: rgba(15, 23, 42, 0.45) !important;
        z-index: 1050 !important;
    }

    .mobile-nav-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(var(--drawer-width, 320px), 84vw) !important;
        border-radius: 0 16px 16px 0 !important;
        background: var(--card-bg) !important;
        border-right: 1px solid var(--border-color) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
        z-index: 1055 !important;
    }

    [data-theme="dark"] .mobile-nav-drawer {
        background: #151c28 !important;
        border-right-color: rgba(255, 255, 255, 0.06) !important;
    }

    .mobile-drawer-header {
        padding: 0.875rem 1rem !important;
        background: var(--bg-secondary) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .mobile-drawer-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.625rem;
    }

    .mobile-drawer-brand {
        margin-bottom: 0 !important;
        gap: 0.5rem !important;
    }

    .mobile-drawer-brand img {
        height: 28px !important;
    }

    .mobile-drawer-brand span {
        font-size: var(--fs-sm) !important;
        font-weight: 600 !important;
        line-height: 1.3;
        color: var(--text-primary) !important;
        max-width: 160px;
    }

    .mobile-drawer-close {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--card-bg);
        color: var(--text-secondary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 13px;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .mobile-drawer-close:hover {
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary);
    }

    .mobile-drawer-user {
        padding: 0.5rem 0.625rem !important;
        border-radius: 10px !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color);
    }

    .mobile-drawer-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: var(--fs-sm) !important;
    }

    .mobile-drawer-user-name {
        font-size: var(--fs-sm) !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
    }

    .mobile-drawer-user-email {
        font-size: var(--fs-xs) !important;
        color: var(--text-muted) !important;
    }

    .mobile-drawer-scroll {
        padding: 0.5rem 0.75rem 0.75rem !important;
    }

    .mobile-nav-label {
        margin: 0.75rem 0 0.35rem;
        padding: 0 0.5rem;
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .mobile-nav-label:first-child {
        margin-top: 0.25rem;
    }

    .mobile-side-menu {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-nav-item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.5rem 0.625rem;
        border-radius: 8px;
        font-size: var(--fs-sm);
        font-weight: 500;
        color: var(--text-primary);
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .mobile-nav-item i {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary);
        flex-shrink: 0;
    }

    .mobile-nav-item:hover,
    .mobile-nav-item:focus {
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary);
    }

    .mobile-nav-item.active {
        background: rgba(var(--primary-rgb), 0.12);
        color: var(--primary);
        font-weight: 600;
    }

    .mobile-nav-item.active i {
        background: var(--primary);
        color: #fff;
    }

    .mobile-nav-item--danger {
        color: #dc2626;
    }

    .mobile-nav-item--danger i {
        background: rgba(239, 68, 68, 0.12);
        color: #dc2626;
    }

    .mobile-nav-item--cta {
        margin-top: 0.35rem;
        justify-content: center;
        background: var(--primary);
        color: #fff !important;
        font-weight: 600;
    }

    .mobile-nav-item--cta i {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .mobile-nav-item--cta:hover {
        background: #059669;
        color: #fff !important;
    }

    .mobile-side-menu form button.mobile-nav-item {
        width: 100%;
    }

    .mobile-nav-divider {
        height: 1px;
        background: var(--border-color);
        margin: 0.5rem 0.25rem;
    }

    .mobile-drawer-footer {
        padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid var(--border-color) !important;
    }

    .mobile-drawer-footer-label {
        font-size: var(--fs-xs);
        color: var(--text-muted);
    }
}

@media (min-width: 992px) {
    .mobile-side-menu {
        display: none !important;
    }

    .navbar > .container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .navbar-collapse {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-grow: 1 !important;
        position: static !important;
        width: auto !important;
        transform: none !important;
        visibility: visible !important;
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .mobile-drawer-scroll {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        justify-content: flex-end;
        overflow: visible !important;
        padding: 0 !important;
        width: auto !important;
    }

    .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: auto !important;
    }

    .navbar-nav .nav-item {
        width: auto !important;
    }

    .navbar-nav .nav-link {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap;
        width: auto !important;
    }

    .navbar-nav .nav-link.btn {
        margin-top: 0 !important;
    }

    .navbar-nav .nav-item.dropdown {
        position: relative;
    }

    .navbar-nav .dropdown-menu {
        position: absolute !important;
    }
}

/* Gallery overlay — solid fade instead of gradient */
.gallery-overlay {
    background: rgba(0, 0, 0, 0.65) !important;
}

/* Packages */
.package-card::before {
    background: var(--primary) !important;
}

.package-card.featured {
    background: var(--bg-secondary) !important;
}

.packages-title,
.package-detail-name {
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
}

.packages-subtitle,
.package-detail-description {
    font-size: var(--fs-sm) !important;
}

.package-detail-price-discounted,
.package-price {
    font-size: 1.375rem !important;
}

.package-detail-price-original,
.package-detail-discount,
.package-type,
.package-detail-type {
    font-size: var(--fs-sm) !important;
}

.package-detail-pricing {
    background: rgba(var(--primary-rgb), 0.08) !important;
}

.package-detail-features h3,
.package-features-title {
    font-size: var(--fs-md) !important;
}

.package-detail-features li,
.package-features li {
    font-size: var(--fs-sm) !important;
}

/* Image caption overlays — solid, not gradient */
.image-caption-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
}

.image-caption-overlay h4 {
    font-size: var(--fs-md) !important;
}

/* Chat widget */
.online-chat-toggle-btn {
    background: #3B82F6 !important;
}

.empty-gallery-title {
    font-size: var(--fs-lg) !important;
}

.empty-gallery-text {
    font-size: var(--fs-sm) !important;
}

.preloader-text {
    font-size: var(--fs-sm) !important;
}