/* Base Variables */
:root {
    --primary-red: #d32f2f;
    --secondary-red: #f44336;
    --light-red: #ffcdd2;
    --primary-yellow: #ffc107;
    --secondary-yellow: #ffeb3b;
    --white: #ffffff;
    --off-white: #f9f9f9;
    --text-dark: #333333;
    --text-light: #757575;
    --gray-light: #eeeeee;
    --transition: all 0.3s ease;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --header-height: 60px;
    --animation-duration: 0.3s;
    --tab-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--off-white);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Header and Navigation */
header {
    background-image: url('assets/images/bar.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: var(--shadow);
    height: var(--header-height);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    gap: 0.5rem;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--white);
    min-width: fit-content;
    flex-shrink: 0;
}

.logo-icon {
    background-color: transparent;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    overflow: hidden;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    min-height: 44px;
    min-width: 44px;
}

/* Search Bar */
.search-container {
    flex: 1;
    margin: 0 0.5rem;
    max-width: 600px;
    min-width: 0;
}

.search-bar {
    width: 100%;
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    transition: var(--transition);
}

.search-bar:focus {
    outline: none;
    background-color: var(--white);
    box-shadow: 0 0 0 2px var(--primary-yellow);
}

/* Main Content */
.main-content {
    margin-top: calc(var(--header-height) + 1rem);
    padding: 1rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    position: relative; /* For absolute positioning of tab content */
    overflow: hidden; /* Prevent scrolling during animations */
    min-height: 500px; /* Ensure consistent height during transitions */
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    overflow-x: auto;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    padding: 0.4rem 0.6rem;
    scroll-padding: 0.8rem;
    scroll-snap-type: x mandatory;
    gap: 0.75rem; /* Standard gap between tab items */
    position: relative; /* Required for positioning the animated underline */
    will-change: scroll-position;
}

.tab-navigation::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Webkit browsers */
}

.tab-button {
    padding: 0.75rem 0.7rem;
    white-space: nowrap;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--text-dark);
    font-weight: 500;
    position: relative;
    transition: var(--transition);
    min-height: 44px;
    min-width: auto;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    scroll-snap-align: start;
    flex-shrink: 0; /* Prevent tab buttons from shrinking */
    overflow: visible;
    border-radius: 6px;
}

.tab-button i {
    font-size: 1.2rem;
    flex-shrink: 0; /* Prevent icon from shrinking */
    margin-right: 0.25rem; /* Reduced margin for better fit */
}

.tab-button:hover {
    color: var(--primary-red);
}

.tab-button.active {
    color: var(--primary-red);
}

/* Tab underline - this replaces the tab-button.active::after */
.tab-underline {
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 70%;
    background-color: var(--primary-red);
    transition: transform var(--animation-duration) var(--tab-ease), width var(--animation-duration) var(--tab-ease);
    pointer-events: none;
    will-change: transform, width;
}

/* Tab Content */
.tab-content {
    display: none; /* Hide by default */
    position: absolute;
    top: 83px; /* Height of tab navigation + margin */
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transform: translateX(0);
    transition: transform var(--animation-duration) var(--tab-ease),
                opacity var(--animation-duration) var(--tab-ease);
    will-change: transform, opacity;
    contain: layout style paint;
}

.tab-content.active {
    display: block; /* Show when active */
    position: relative;
    top: 0;
    opacity: 1;
    transform: translateX(0);
}

/* 
Note: The slide transformations are now handled directly in JS
with pixel values based on container width instead of percentages,
and direction is determined by the physical position of the tabs.

Key benefits of this implementation:
1. Animations properly adapt to different screen sizes
2. Direction determined by actual tab positions, not just indices
3. Smooth animation for both tab content and the underline indicator
4. Intuitive user experience with content sliding in the visually correct direction
5. Consistent behavior across different browser and device types
*/

/* Section Title */
.section-title {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--primary-red);
    display: flex;
    align-items: center;
}

.section-title i {
    margin-right: 0.5rem;
}

/* Equipment Cards */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.equipment-card {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
    will-change: transform;
    content-visibility: auto;
}

.equipment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.equipment-image {
    height: 180px;
    background-color: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    overflow: hidden;
}

.equipment-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

.equipment-image i {
    font-size: 3rem;
    color: var(--text-light);
}

.equipment-details {
    padding: 1.2rem;
}

.equipment-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.equipment-category {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.compatible-lenses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.lens-tag {
    background-color: var(--secondary-yellow);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.8rem;
    transition: var(--transition);
}

.lens-tag:hover {
    background-color: var(--primary-yellow);
    transform: translateY(-2px);
}

/* Resource Card Styles */
.resource-card {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
}

.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.resource-card .resource-image {
    height: 180px;
    background-color: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    overflow: hidden;
}

.resource-card .resource-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

.resource-card .resource-details {
    padding: 1.2rem;
}

.resource-card .resource-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.resource-card .resource-description {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.resource-card .resource-type {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--primary-red);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.resource-card .resource-link-container {
    margin-top: 1rem;
    text-align: center;
}

.resource-card .resource-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--primary-red);
    color: var(--white);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: var(--transition);
}

.resource-card .resource-link:hover {
    background-color: var(--secondary-red);
    transform: translateY(-2px);
}

/* Sidebar type styling */
.sidebar-type {
    margin-bottom: 1.5rem;
}

.sidebar-type p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 90%;
    max-width: 400px;
    height: 100%;
    background-color: var(--white);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    padding: 1.5rem;
    overflow-y: auto;
    transition: right 0.3s ease;
}

.sidebar.active {
    right: 0;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--gray-light);
}

.sidebar-title {
    font-size: 1.5rem;
    color: var(--primary-red);
}

.close-sidebar {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-dark);
    transition: var(--transition);
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-sidebar:hover {
    color: var(--primary-red);
}

.sidebar-content {
    margin-bottom: 2rem;
}

.sidebar-image {
    width: 100%;
    height: 250px;
    background-color: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    padding: 15px;
    overflow: hidden;
}

.sidebar-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.sidebar-image i {
    font-size: 4rem;
    color: var(--text-light);
}

.sidebar-description {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.sidebar-specs {
    margin-bottom: 1.5rem;
}

.specs-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primary-red);
}

.specs-list {
    list-style: none;
}

.specs-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-light);
}

.specs-list li:last-child {
    border-bottom: none;
}

.sidebar-lenses {
    margin-top: 1.5rem;
}

.lenses-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Reservation Form */
.reservation-form {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.form-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--primary-red);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group {
    flex: 1;
    min-width: 250px;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--gray-light);
    border-radius: 4px;
    font-size: 1rem;
    min-height: 44px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-yellow);
}

.submit-btn {
    background-color: var(--primary-red);
    color: var(--white);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--transition);
    min-height: 44px;
    min-width: 120px;
}

.submit-btn:hover {
    background-color: var(--secondary-red);
}

/* Meeting Scheduler */
.meeting-container {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.meetings-list {
    margin-top: 1.5rem;
}

.meeting-card {
    display: flex;
    background-color: var(--off-white);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 4px solid var(--primary-yellow);
}

/* Maps Grid and Cards */
.maps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.map-card {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
}

.map-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.map-preview {
    height: 180px;
    background-color: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.map-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.map-details {
    padding: 1.2rem;
}

.map-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.map-description {
    color: var(--text-light);
    font-size: 0.9rem;
}

.meeting-date {
    min-width: 80px;
    text-align: center;
    margin-right: 1rem;
}

.meeting-day {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-red);
}

.meeting-month {
    font-size: 0.9rem;
    color: var(--text-light);
}

.meeting-details {
    flex: 1;
}

.meeting-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.meeting-info {
    font-size: 0.9rem;
    color: var(--text-light);
}

.meeting-info i {
    margin-right: 0.5rem;
}

.meeting-info p {
    margin-bottom: 0.3rem;
}

/* Map Viewer Panel */
.map-viewer-panel {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 90%;
    background-color: var(--white);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    transition: bottom 0.4s ease;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.map-viewer-panel.active {
    bottom: 0;
}

.map-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.5rem;
    border-bottom: 1px solid var(--gray-light);
    flex-shrink: 0;
}

.map-viewer-title {
    font-size: 1.5rem;
    color: var(--primary-red);
    font-weight: 600;
}

.close-map-viewer {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-dark);
    transition: var(--transition);
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-map-viewer:hover {
    color: var(--primary-red);
}

.map-viewer-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0; /* Removed all padding for maximum space */
}

.map-viewer-container {
    flex: 1;
    background: none;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* No padding */
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    border: none;
}

.map-viewer-container img {
    max-width: 100%; /* Maximized width */
    max-height: 100%; /* Maximized height */
    object-fit: contain;
    transform-origin: center;
    transition: transform 0.1s ease-out;
    border-radius: 0;
    box-shadow: none;
    -webkit-user-select: none; /* Prevent selection on touch devices */
    user-select: none;
    touch-action: manipulation; /* Improve touch gestures */
}

.map-viewer-controls {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 1002;
    background-color: var(--white);
    padding: 6px 10px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--gray-light);
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    transform: translateY(0);
}

.map-viewer-controls:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.map-control-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--white);
    border: 1px solid var(--gray-light);
    color: var(--text-dark);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    touch-action: manipulation; /* Better touch behavior */
}

.map-control-btn:hover {
    background-color: var(--primary-red);
    color: var(--white);
}

.map-control-btn:active {
    transform: scale(0.92);
    background-color: var(--gray-light);
}

.drag-indicator {
    width: 50px;
    height: 5px;
    background-color: var(--gray-light);
    border-radius: 10px;
    margin: 10px auto 5px;
    flex-shrink: 0;
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Responsive Design - Large screens */
@media (min-width: 1200px) {
    .equipment-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Responsive Design - Medium screens */
@media (max-width: 1024px) {
    .equipment-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive Design - Tablets */
@media (max-width: 768px) {
    .header-container {
        justify-content: space-between;
        padding: 0 0.8rem;
    }
    
    .logo-text {
        font-size: 1.2rem;
    }

    .search-container {
        margin: 0 0.4rem;
    }
    
    .tab-navigation {
        padding: 0.5rem 0.7rem;
        gap: 0.6rem; /* Reduced gap for tablets */
        margin-bottom: 1.2rem;
    }
    
    .tab-button {
        padding: 0.6rem 0.5rem;
        font-size: 0.95rem;
        min-width: auto;
    }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .equipment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row {
        flex-direction: column;
    }

    .form-group {
        min-width: 100%;
    }

    .reservation-form,
    .meeting-container {
        padding: 1.5rem;
    }

    .meeting-card {
        flex-direction: column;
    }

    .meeting-date {
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .meeting-day {
        margin-right: 0.5rem;
    }
}

/* Responsive Design - Mobile */
@media (max-width: 480px) {
    .header-container {
        padding: 0 0.6rem;
    }

    .logo-icon {
        width: 32px;
        height: 32px;
        margin-right: 6px;
    }
    
    .equipment-image {
        height: 128px;
        padding: 8px;
    }
    
    .map-preview {
        height: 140px;
    }
    
    .map-viewer-panel {
        height: 92%;
    }
    
    .map-viewer-container {
        padding: 0; /* No padding */
        margin: 0;
    }
    
    .map-viewer-controls {
        top: 15px;
        right: 15px;
        padding: 6px;
        gap: 8px;
    }
    
    .map-control-btn {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
    
    .sidebar-image {
        height: 200px;
        padding: 10px;
    }

    .logo-text {
        font-size: 0.95rem;
    }

    .search-container {
        max-width: 160px;
        margin: 0 0.3rem;
    }

    .search-bar {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }

    .main-content {
        padding: 0.8rem;
        margin-top: calc(var(--header-height) + 0.5rem);
    }

    .tab-navigation {
        margin-bottom: 1rem;
        gap: 0.5rem; /* Reduced gap for mobile */
        padding: 0.5rem;
    }

    .tab-button {
        padding: 0.5rem 0.4rem;
        font-size: 0.85rem;
        min-width: auto;
        width: auto;
    }

    .tab-button i {
        font-size: 0.9rem;
        margin-right: 0.15rem; /* Further reduced icon margin on mobile */
    }

    .section-title {
        font-size: 1.5rem;
    }

    .equipment-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .reservation-form,
    .meeting-container {
        padding: 1rem;
    }

    .form-title {
        font-size: 1.3rem;
    }

    .sidebar {
        width: 100%;
        max-width: none;
    }

    .sidebar-title {
        font-size: 1.3rem;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    .logo-icon {
        width: 28px;
        height: 28px;
    }

    .equipment-image {
        height: 112px;
        padding: 6px;
    }
    
    .map-preview {
        height: 120px;
    }
    
    .map-viewer-panel {
        height: 94%;
    }
    
    .map-viewer-container {
        padding: 0; /* No padding */
        margin: 0;
    }
    
    .map-viewer-controls {
        top: 10px;
        right: 10px;
        padding: 5px;
        gap: 6px;
    }
    
    .map-control-btn {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }
    
    .sidebar-image {
        height: 180px;
        padding: 8px;
    }
    
    .logo-text {
        font-size: 0.85rem;
    }
    
    .search-container {
        max-width: 120px;
    }
    
    .search-bar {
        padding: 0.5rem 0.7rem;
    }
    
    .tab-navigation {
        gap: 0.4rem; /* Reduced gap for very small screens */
        padding: 0.5rem;
    }
    
    .tab-button {
        padding: 0.5rem 0.3rem;
        font-size: 0.75rem;
        margin: 0;
        flex-shrink: 0;
        width: auto;
    }
    
    .mobile-menu-toggle {
        font-size: 1.2rem;
        min-width: 36px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) {
    .equipment-card:hover {
        transform: none;
        box-shadow: var(--shadow);
    }
    
    /* Additional improvements for touch navigation */
    .tab-navigation {
        padding: 0.6rem;
        gap: 0.45rem; /* Reduced gap for touch devices */
    }
    
    .tab-button {
        background-color: rgba(255, 255, 255, 0.8); /* Better visibility */
        padding: 0.5rem 0.4rem;
        margin: 0; /* Remove margin to prevent overlapping */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for separation */
        min-width: auto;
        width: auto;
    }
    
    .tab-button.active {
        background-color: rgba(255, 193, 7, 0.2); /* More visible highlight for active tab */
        border: 1px solid rgba(255, 193, 7, 0.4); /* Border for active tab */
    }

    .tab-button:hover {
        color: var(--text-dark);
    }

    .lens-tag:hover {
        transform: none;
        background-color: var(--secondary-yellow);
    }

    .submit-btn:active,
    .close-sidebar:active,
    .tab-button:active,
    .map-control-btn:active {
        opacity: 0.8;
    }
    
    /* Additional touch optimizations for map viewer */
    .map-viewer-controls {
        opacity: 0.9; /* More visible on touch devices */
    }
    
    .map-control-btn {
        min-width: 44px; /* Ensure touch target size */
        min-height: 44px;
    }
}