/**
 * Mobile View Styles - CSS Variables Approach
 * Perfect, reliable mobile view implementation
 */

/* ============================================
   CSS VARIABLES FOR MOBILE VIEW
   ============================================ */

:root {
    /* Desktop/Default Values */
    --mv-base-font: 16px;
    --mv-h1-size: 2.5rem;
    --mv-h2-size: 2rem;
    --mv-h3-size: 1.75rem;
    --mv-h4-size: 1.5rem;
    --mv-h5-size: 1.25rem;
    --mv-h6-size: 1rem;
    --mv-p-size: 1rem;
    --mv-container-padding: 15px;
    --mv-card-padding: 1.5rem;
    --mv-btn-padding: 0.75rem 1.875rem;
    --mv-btn-font: 0.9rem;
    --mv-btn-height: auto;
    --mv-form-padding: 0.875rem 1.25rem;
    --mv-form-font: 1rem;
    --mv-form-height: auto;
    --mv-image-height: auto;
    --mv-logo-height: 60px;
    --mv-nav-font: 1.5rem;
    --mv-nav-link-font: 0.9rem;
    --mv-nav-link-padding: 0.75rem 1.125rem;
    --mv-spacing-multiplier: 1;
    --mv-hero-padding: 4rem 0;
    --mv-hero-h1: 3.5rem;
    --mv-gap: 1rem;
}

/* Mobile View Variables - Improved sizing for better readability */
body.mobile-view,
html body.mobile-view {
    --mv-base-font: 16px;
    --mv-h1-size: 2rem;
    --mv-h2-size: 1.75rem;
    --mv-h3-size: 1.5rem;
    --mv-h4-size: 1.25rem;
    --mv-h5-size: 1.125rem;
    --mv-h6-size: 1rem;
    --mv-p-size: 1rem;
    --mv-container-padding: 1rem;
    --mv-card-padding: 1.25rem;
    --mv-btn-padding: 0.75rem 1.5rem;
    --mv-btn-font: 0.9375rem;
    --mv-btn-height: 44px;
    --mv-form-padding: 0.75rem 1rem;
    --mv-form-font: 1rem;
    --mv-form-height: 44px;
    --mv-image-height: auto;
    --mv-logo-height: 50px;
    --mv-nav-font: 1.25rem;
    --mv-nav-link-font: 0.9375rem;
    --mv-nav-link-padding: 0.6rem 0.9rem;
    --mv-spacing-multiplier: 0.9;
    --mv-hero-padding: 2.5rem 0;
    --mv-hero-h1: 2rem;
    --mv-gap: 1rem;
}

/* ============================================
   APPLY VARIABLES TO ELEMENTS
   ============================================ */

/* Base Typography */
body.mobile-view,
html body.mobile-view {
    font-size: var(--mv-base-font) !important;
    line-height: 1.5 !important;
}

body.mobile-view h1,
html body.mobile-view h1 {
    font-size: var(--mv-h1-size) !important;
    line-height: 1.3 !important;
    margin-bottom: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view h2,
html body.mobile-view h2 {
    font-size: var(--mv-h2-size) !important;
    line-height: 1.3 !important;
    margin-bottom: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view h3,
html body.mobile-view h3 {
    font-size: var(--mv-h3-size) !important;
    line-height: 1.3 !important;
    margin-bottom: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view h4,
html body.mobile-view h4 {
    font-size: var(--mv-h4-size) !important;
    line-height: 1.3 !important;
    margin-bottom: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view h5,
html body.mobile-view h5 {
    font-size: var(--mv-h5-size) !important;
    line-height: 1.3 !important;
    margin-bottom: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view h6,
html body.mobile-view h6 {
    font-size: var(--mv-h6-size) !important;
    line-height: 1.3 !important;
    margin-bottom: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view p,
body.mobile-view .lead,
html body.mobile-view p,
html body.mobile-view .lead {
    font-size: var(--mv-p-size) !important;
    line-height: 1.5 !important;
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .display-4,
html body.mobile-view .display-4 {
    font-size: 1.75rem !important;
}

/* Container */
body.mobile-view .container,
body.mobile-view .container-fluid,
html body.mobile-view .container,
html body.mobile-view .container-fluid {
    max-width: 100% !important;
    padding-left: var(--mv-container-padding) !important;
    padding-right: var(--mv-container-padding) !important;
}

/* Navigation - Clean Mobile App Header */
body.mobile-view .navbar-brand,
body.mobile-view .brand-logo,
html body.mobile-view .navbar-brand,
html body.mobile-view .brand-logo {
    font-size: 1.5rem !important;
    margin: 0 auto !important; /* Center the logo */
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.mobile-view .header-logo-img,
html body.mobile-view .header-logo-img {
    height: 40px !important; /* Compact logo */
    max-width: 120px !important;
    object-fit: contain !important;
}

body.mobile-view .brand-logo-image,
html body.mobile-view .brand-logo-image {
    height: 40px !important;
}

body.mobile-view .nav-link,
body.mobile-view .nav-link-custom,
html body.mobile-view .nav-link,
html body.mobile-view .nav-link-custom {
    display: none !important; /* Hide individual links if they somehow show */
}

/* Hide Hamburger Menu and Collapsed Links */
body.mobile-view .navbar-toggler,
html body.mobile-view .navbar-toggler {
    display: none !important;
}

body.mobile-view .navbar-collapse,
html body.mobile-view .navbar-collapse {
    display: none !important;
}

/* Top Nav Container - Minimalist white bar */
body.mobile-view .top-nav,
html body.mobile-view .top-nav {
    padding: 0.75rem 0 !important;
    min-height: 60px !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Center content in container */
body.mobile-view .top-nav .container,
html body.mobile-view .top-nav .container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Hero Section */
body.mobile-view .hero-section,
html body.mobile-view .hero-section {
    padding: var(--mv-hero-padding) !important;
}

body.mobile-view .hero-title,
body.mobile-view .hero-section h1,
html body.mobile-view .hero-title,
html body.mobile-view .hero-section h1 {
    font-size: var(--mv-hero-h1) !important;
    margin-bottom: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .hero-subtitle,
body.mobile-view .hero-section p,
html body.mobile-view .hero-subtitle,
html body.mobile-view .hero-section p {
    font-size: var(--mv-p-size) !important;
    margin-bottom: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .cta-section,
html body.mobile-view .cta-section {
    padding: 2rem 0 !important;
}

body.mobile-view .cta-title,
html body.mobile-view .cta-title {
    font-size: var(--mv-h1-size) !important;
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .cta-text,
html body.mobile-view .cta-text {
    font-size: var(--mv-p-size) !important;
    margin-bottom: 1rem !important;
}

/* Cards */
body.mobile-view .card,
html body.mobile-view .card {
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .card-body,
html body.mobile-view .card-body {
    padding: var(--mv-card-padding) !important;
}

body.mobile-view .card-header,
html body.mobile-view .card-header {
    padding: calc(0.625rem * var(--mv-spacing-multiplier)) calc(0.75rem * var(--mv-spacing-multiplier)) !important;
    font-size: var(--mv-p-size) !important;
}

body.mobile-view .dashboard-card,
html body.mobile-view .dashboard-card {
    padding: var(--mv-card-padding) !important;
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .dashboard-stat,
html body.mobile-view .dashboard-stat {
    font-size: 1.25rem !important;
}

/* Photographer Cards - 2 columns in mobile view */
body.mobile-view .photographer-gallery .row,
html body.mobile-view .photographer-gallery .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    margin-left: calc(-0.375rem * var(--mv-spacing-multiplier)) !important;
    margin-right: calc(-0.375rem * var(--mv-spacing-multiplier)) !important;
    gap: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .photographer-gallery .col-md-6,
body.mobile-view .photographer-gallery .col-lg-4,
body.mobile-view .photographer-gallery .col-xl-3,
html body.mobile-view .photographer-gallery .col-md-6,
html body.mobile-view .photographer-gallery .col-lg-4,
html body.mobile-view .photographer-gallery .col-xl-3 {
    width: calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
    flex: 0 0 calc(50% - 0.25rem) !important;
    padding-left: calc(0.375rem * var(--mv-spacing-multiplier)) !important;
    padding-right: calc(0.375rem * var(--mv-spacing-multiplier)) !important;
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .photographer-item,
html body.mobile-view .photographer-item {
    width: 100% !important;
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .photographer-card,
html body.mobile-view .photographer-card {
    width: 100% !important;
}

/* Square images for mobile view - clean and compact */
body.mobile-view .gallery-grid .photographer-image-section,
body.mobile-view .photographer-image-section,
html body.mobile-view .gallery-grid .photographer-image-section,
html body.mobile-view .photographer-image-section {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    height: 0 !important;
    padding-bottom: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    background: var(--light-gray) !important;
    flex-shrink: 0 !important;
}

body.mobile-view .gallery-grid .photographer-main-image,
body.mobile-view .photographer-main-image,
html body.mobile-view .gallery-grid .photographer-main-image,
html body.mobile-view .photographer-main-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

body.mobile-view .gallery-grid .photographer-placeholder,
body.mobile-view .photographer-placeholder,
html body.mobile-view .gallery-grid .photographer-placeholder,
html body.mobile-view .photographer-placeholder {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================
   MOBILE GALLERY - CLEAN COMPACT CARDS
   Instagram-like grid layout
   ============================================ */

/* Gallery Grid - Responsive 1 column layout for mobile */
body.mobile-view .gallery-grid,
html body.mobile-view .gallery-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    margin: 1rem 0 !important;
    width: 100% !important;
}

/* Card Container - Full width, comfortable design */
body.mobile-view .gallery-grid .photographer-card,
html body.mobile-view .gallery-grid .photographer-card {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: none !important; /* Allow auto height */
    border: 1px solid #e9ecef !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Photo Preview - Larger, 16:9 ratio */
body.mobile-view .gallery-grid .photographer-image-section,
html body.mobile-view .gallery-grid .photographer-image-section {
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    aspect-ratio: 16/9 !important;
    position: relative !important;
    overflow: hidden !important;
    background: #f5f5f5 !important;
    flex-shrink: 0 !important;
    padding-bottom: 0 !important;
}

/* Restore availability badge size */
body.mobile-view .gallery-grid .photographer-card .availability-badge,
html body.mobile-view .gallery-grid .photographer-card .availability-badge {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    font-size: 0.75rem !important;
    padding: 0.4rem 0.8rem !important;
    line-height: normal !important;
    z-index: 10 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* Card Body - Comfortable padding */
body.mobile-view .gallery-grid .photographer-card .card-body,
html body.mobile-view .gallery-grid .photographer-card .card-body {
    padding: 1.25rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
}

/* Photographer Name - Larger, readable */
body.mobile-view .gallery-grid .photographer-card .photographer-name,
html body.mobile-view .gallery-grid .photographer-card .photographer-name {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 0.5rem !important;
    white-space: normal !important; /* Allow wrapping */
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Price Display - Restore regular stats grid */
body.mobile-view .gallery-grid .photographer-card .stats-grid,
html body.mobile-view .gallery-grid .photographer-card .stats-grid {
    display: flex !important;
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 0.75rem 0 !important;
    margin: 0.75rem 0 !important;
    background: transparent !important;
}

/* Show all stat items again */
body.mobile-view .gallery-grid .photographer-card .stats-grid .stat-item,
body.mobile-view .gallery-grid .photographer-card .stats-grid .stat-item:not(:last-child),
html body.mobile-view .gallery-grid .photographer-card .stats-grid .stat-item,
html body.mobile-view .gallery-grid .photographer-card .stats-grid .stat-item:not(:last-child) {
    display: block !important;
    flex: 1 !important;
    text-align: center !important;
    border: none !important;
}

/* Add divider lines between stats */
body.mobile-view .gallery-grid .photographer-card .stats-grid .stat-item:not(:last-child):after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 10% !important;
    height: 80% !important;
    width: 1px !important;
    background: #e0e0e0 !important;
}

body.mobile-view .gallery-grid .photographer-card .stats-grid .stat-value,
html body.mobile-view .gallery-grid .photographer-card .stats-grid .stat-value {
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.2rem !important;
}

body.mobile-view .gallery-grid .photographer-card .stats-grid .stat-label,
html body.mobile-view .gallery-grid .photographer-card .stats-grid .stat-label {
    display: block !important;
    font-size: 0.65rem !important;
    color: #888 !important;
}

/* View Profile Button - Full width, substantial */
body.mobile-view .gallery-grid .photographer-card .btn-view-profile,
html body.mobile-view .gallery-grid .photographer-card .btn-view-profile {
    padding: 0.8rem 1rem !important;
    font-size: 0.9rem !important;
    margin-top: 0.5rem !important;
    width: 100% !important;
    border-radius: 8px !important;
    background-color: #000 !important;
    color: #fff !important;
    text-align: center !important;
    display: block !important;
}

body.mobile-view .photographer-name,
html body.mobile-view .photographer-name {
    font-size: 1.0625rem !important;
    margin-bottom: calc(0.375rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .photographer-price,
html body.mobile-view .photographer-price {
    font-size: 1.0625rem !important;
}

body.mobile-view .photographer-avatar-small,
html body.mobile-view .photographer-avatar-small {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.25rem !important;
}

body.mobile-view .stat-value,
html body.mobile-view .stat-value {
    font-size: 1.375rem !important;
}

body.mobile-view .stat-label,
html body.mobile-view .stat-label {
    font-size: 0.75rem !important;
}

body.mobile-view .rating-stars,
html body.mobile-view .rating-stars {
    font-size: 0.8125rem !important;
}

body.mobile-view .stats-grid,
html body.mobile-view .stats-grid {
    padding: calc(0.625rem * var(--mv-spacing-multiplier)) 0 !important;
    margin: calc(0.625rem * var(--mv-spacing-multiplier)) 0 !important;
}

/* Buttons */
body.mobile-view .btn,
html body.mobile-view .btn {
    padding: var(--mv-btn-padding) !important;
    font-size: var(--mv-btn-font) !important;
    min-height: var(--mv-btn-height) !important;
    line-height: 1.3 !important;
}

body.mobile-view .btn-lg,
html body.mobile-view .btn-lg {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
    min-height: 44px !important;
}

body.mobile-view .btn-view-profile,
html body.mobile-view .btn-view-profile {
    padding: 0.625rem 1rem !important;
    font-size: 0.75rem !important;
    min-height: 38px !important;
}

body.mobile-view .btn-cta-primary,
body.mobile-view .btn-cta-secondary,
html body.mobile-view .btn-cta-primary,
html body.mobile-view .btn-cta-secondary {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.8rem !important;
    min-height: 40px !important;
}

/* Forms */
body.mobile-view .form-control,
body.mobile-view .form-select,
html body.mobile-view .form-control,
html body.mobile-view .form-select {
    padding: var(--mv-form-padding) !important;
    font-size: var(--mv-form-font) !important;
    min-height: var(--mv-form-height) !important;
    line-height: 1.5 !important;
}

body.mobile-view .form-control-lg,
html body.mobile-view .form-control-lg {
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    min-height: 44px !important;
}

body.mobile-view .form-label,
html body.mobile-view .form-label {
    font-size: var(--mv-p-size) !important;
    margin-bottom: calc(0.375rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .student-id-input,
html body.mobile-view .student-id-input {
    font-size: 0.9375rem !important;
    padding: 0.625rem !important;
}

/* Search Filters */
body.mobile-view .search-filters,
body.mobile-view .search-card,
html body.mobile-view .search-filters,
html body.mobile-view .search-card {
    padding: var(--mv-card-padding) !important;
    margin-top: -25px !important;
}

body.mobile-view .filter-group,
html body.mobile-view .filter-group {
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .filter-label,
html body.mobile-view .filter-label {
    font-size: 0.75rem !important;
    margin-bottom: calc(0.375rem * var(--mv-spacing-multiplier)) !important;
}

/* Tables */
body.mobile-view .table-responsive,
html body.mobile-view .table-responsive {
    font-size: var(--mv-p-size) !important;
}

body.mobile-view .table,
html body.mobile-view .table {
    font-size: var(--mv-p-size) !important;
}

body.mobile-view .table thead th,
html body.mobile-view .table thead th {
    font-size: 0.7rem !important;
    padding: calc(0.4rem * var(--mv-spacing-multiplier)) calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .table td,
html body.mobile-view .table td {
    font-size: var(--mv-p-size) !important;
    padding: calc(0.4rem * var(--mv-spacing-multiplier)) calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

/* Modals */
body.mobile-view .modal-body,
html body.mobile-view .modal-body {
    padding: var(--mv-card-padding) !important;
    font-size: var(--mv-p-size) !important;
}

body.mobile-view .modal-header,
html body.mobile-view .modal-header {
    padding: calc(0.625rem * var(--mv-spacing-multiplier)) calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .modal-title,
html body.mobile-view .modal-title {
    font-size: 0.9375rem !important;
}

body.mobile-view .modal-footer,
html body.mobile-view .modal-footer {
    padding: calc(0.625rem * var(--mv-spacing-multiplier)) calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

/* Badges */
body.mobile-view .badge,
html body.mobile-view .badge {
    font-size: 0.65rem !important;
    padding: calc(0.3rem * var(--mv-spacing-multiplier)) calc(0.625rem * var(--mv-spacing-multiplier)) !important;
}

/* Alerts */
body.mobile-view .alert,
html body.mobile-view .alert {
    padding: calc(0.625rem * var(--mv-spacing-multiplier)) calc(0.75rem * var(--mv-spacing-multiplier)) !important;
    font-size: var(--mv-p-size) !important;
    margin-bottom: calc(0.625rem * var(--mv-spacing-multiplier)) !important;
}

/* Spacing Utilities */
body.mobile-view .mb-5,
html body.mobile-view .mb-5 {
    margin-bottom: calc(1.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .mt-5,
html body.mobile-view .mt-5 {
    margin-top: calc(1.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .p-5,
html body.mobile-view .p-5 {
    padding: calc(1.25rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .my-5,
html body.mobile-view .my-5 {
    margin-top: calc(1.5rem * var(--mv-spacing-multiplier)) !important;
    margin-bottom: calc(1.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .py-5,
html body.mobile-view .py-5 {
    padding-top: calc(1.5rem * var(--mv-spacing-multiplier)) !important;
    padding-bottom: calc(1.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .mb-4,
html body.mobile-view .mb-4 {
    margin-bottom: calc(1rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .mt-4,
html body.mobile-view .mt-4 {
    margin-top: calc(1rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .p-4,
html body.mobile-view .p-4 {
    padding: calc(1rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .mb-3,
html body.mobile-view .mb-3 {
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .mt-3,
html body.mobile-view .mt-3 {
    margin-top: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .p-3,
html body.mobile-view .p-3 {
    padding: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .mb-2,
html body.mobile-view .mb-2 {
    margin-bottom: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .mt-2,
html body.mobile-view .mt-2 {
    margin-top: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .p-2,
html body.mobile-view .p-2 {
    padding: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view main.container,
html body.mobile-view main.container {
    margin-top: calc(1rem * var(--mv-spacing-multiplier)) !important;
    margin-bottom: calc(1rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view main.container.my-5,
html body.mobile-view main.container.my-5 {
    margin-top: calc(1.5rem * var(--mv-spacing-multiplier)) !important;
    margin-bottom: calc(1.5rem * var(--mv-spacing-multiplier)) !important;
}

/* Portfolio Cards - Keep single column for portfolio gallery */
body.mobile-view .portfolio-card,
html body.mobile-view .portfolio-card {
    width: 100% !important;
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .portfolio-image,
html body.mobile-view .portfolio-image {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4/3 !important;
}

/* Results Header */
body.mobile-view .results-header,
html body.mobile-view .results-header {
    padding: calc(0.75rem * var(--mv-spacing-multiplier)) 0 !important;
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .results-title,
html body.mobile-view .results-title {
    font-size: 1.125rem !important;
}

/* No Results */
body.mobile-view .no-results,
html body.mobile-view .no-results {
    padding: calc(1.5rem * var(--mv-spacing-multiplier)) calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .no-results-icon,
html body.mobile-view .no-results-icon {
    font-size: 2.5rem !important;
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .no-results-title,
html body.mobile-view .no-results-title {
    font-size: 1.25rem !important;
}

body.mobile-view .no-results-text,
html body.mobile-view .no-results-text {
    font-size: var(--mv-p-size) !important;
}

/* View Selector Box */
body.mobile-view .view-selector-box,
html body.mobile-view .view-selector-box {
    padding: var(--mv-card-padding) !important;
}

body.mobile-view .view-icon,
html body.mobile-view .view-icon {
    font-size: 2rem !important;
}

/* Account Type Cards */
body.mobile-view .account-type-card,
html body.mobile-view .account-type-card {
    padding: var(--mv-card-padding) !important;
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

/* Login/Registration Containers */
body.mobile-view .login-container,
body.mobile-view .registration-container,
body.mobile-view .forgot-password-container,
body.mobile-view .reset-password-container,
html body.mobile-view .login-container,
html body.mobile-view .registration-container,
html body.mobile-view .forgot-password-container,
html body.mobile-view .reset-password-container {
    max-width: 100% !important;
    padding: var(--mv-card-padding) !important;
}

/* Luxury Divider */
body.mobile-view .luxury-divider,
html body.mobile-view .luxury-divider {
    width: 40px !important;
    margin: calc(1rem * var(--mv-spacing-multiplier)) auto !important;
}

/* Footer */
body.mobile-view footer,
html body.mobile-view footer {
    padding: calc(1.25rem * var(--mv-spacing-multiplier)) 0 !important;
    font-size: var(--mv-p-size) !important;
}

body.mobile-view footer h5,
body.mobile-view footer h6,
html body.mobile-view footer h5,
html body.mobile-view footer h6 {
    font-size: 0.9375rem !important;
    margin-bottom: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view footer p,
html body.mobile-view footer p {
    font-size: 0.75rem !important;
    margin-bottom: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

/* Bootstrap Grid - Force single column */
body.mobile-view .row,
html body.mobile-view .row {
    margin-left: calc(-0.5rem * var(--mv-spacing-multiplier)) !important;
    margin-right: calc(-0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .row > [class*="col-"],
html body.mobile-view .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
    padding-left: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
    padding-right: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .col-md-6,
body.mobile-view .col-md-4,
body.mobile-view .col-md-3,
body.mobile-view .col-lg-4,
body.mobile-view .col-lg-3,
body.mobile-view .col-xl-3,
body.mobile-view .col-xl-4,
html body.mobile-view .col-md-6,
html body.mobile-view .col-md-4,
html body.mobile-view .col-md-3,
html body.mobile-view .col-lg-4,
html body.mobile-view .col-lg-3,
html body.mobile-view .col-xl-3,
html body.mobile-view .col-xl-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Additional Spacing */
body.mobile-view .d-flex,
html body.mobile-view .d-flex {
    gap: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .gap-3,
html body.mobile-view .gap-3 {
    gap: calc(0.75rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .gap-2,
html body.mobile-view .gap-2 {
    gap: calc(0.5rem * var(--mv-spacing-multiplier)) !important;
}

body.mobile-view .gap-1,
html body.mobile-view .gap-1 {
    gap: calc(0.375rem * var(--mv-spacing-multiplier)) !important;
}

/* Images */
body.mobile-view img,
html body.mobile-view img {
    max-width: 100% !important;
    height: auto !important;
}

/* Icons */
body.mobile-view .fas,
body.mobile-view .far,
body.mobile-view .fab,
body.mobile-view .fa,
body.mobile-view i,
html body.mobile-view .fas,
html body.mobile-view .far,
html body.mobile-view .fab,
html body.mobile-view .fa,
html body.mobile-view i {
    font-size: 0.9em !important;
}

/* Ensure mobile view has proper overflow */
body.mobile-view,
html body.mobile-view {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ============================================
   BOTTOM NAVIGATION BAR
   ============================================ */
.bottom-nav-bar {
    display: none; /* Hidden by default on desktop */
}

/* Only show in mobile view */
body.mobile-view .bottom-nav-bar,
html body.mobile-view .bottom-nav-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 65px !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e5e5 !important;
    z-index: 99999 !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
}

/* Push content up so it is not hidden behind the bar */
body.mobile-view,
html body.mobile-view {
    padding-bottom: 70px !important;
}

body.mobile-view .bottom-nav-bar .nav-item,
html body.mobile-view .bottom-nav-bar .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #999999 !important;
    font-size: 10px !important;
    flex: 1 !important;
    height: 100% !important;
    transition: all 0.2s ease !important;
}

body.mobile-view .bottom-nav-bar .nav-item i,
html body.mobile-view .bottom-nav-bar .nav-item i {
    font-size: 20px !important;
    margin-bottom: 4px !important;
    transition: all 0.2s ease !important;
}

body.mobile-view .bottom-nav-bar .nav-item.active,
html body.mobile-view .bottom-nav-bar .nav-item.active {
    color: #000000 !important;
    font-weight: 600 !important;
    background: #fdfdfd !important;
}

body.mobile-view .bottom-nav-bar .nav-item.active i,
html body.mobile-view .bottom-nav-bar .nav-item.active i {
    transform: translateY(-2px) !important;
}

body.mobile-view .bottom-nav-bar .nav-item:active,
html body.mobile-view .bottom-nav-bar .nav-item:active {
    background: #f5f5f5 !important;
    transform: scale(0.95) !important;
}