/* Font Face Declarations */
@font-face {
    font-family: 'Inter';
    src: url('./Inter-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DynaPuff';
    src: url('./DynaPuff-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette */
    --primary-blue: #4A90E2;
    --secondary-blue: #357ABD;
    --accent-orange: #FF6B35;
    --accent-pink: #FF4081;
    --accent-purple: #9C27B0;
    --accent-green: #4CAF50;
    --accent-yellow: #FFC107;
    
    /* Neutral Colors */
    --white: #FFFFFF;
    --light-gray: #F8F9FA;
    --medium-gray: #6C757D;
    --dark-gray: #343A40;
    --black: #000000;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'DynaPuff', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;

    /* Mobile app shell */
    --tab-bar-h: 56px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --sheet-peek: 92px;
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-weight: 300;
    line-height: 1.6;
    color: var(--dark-gray);
    background: var(--white);
    overflow-x: hidden;
}

/* Heading Styles */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
}

h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
}

/* Animated Background */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(135deg, #fffacd, #f0e68c); /* Pale yellow base */
}

.gradient-layer {
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.6;
    animation: float 40s ease-in-out infinite;
}

.gradient-1 {
    background: linear-gradient(45deg, #ffd700, #ffc107); /* Saturated middle yellow gradient */
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.gradient-2 {
    background: linear-gradient(45deg, #00bfff, #0080ff); /* Bright blue gradient */
    top: 60%;
    right: -10%;
    animation-delay: -7s;
}

.gradient-3 {
    background: linear-gradient(45deg, #ff00ff, #ff1493); /* Bright magenta gradient */
    bottom: -10%;
    left: 20%;
    animation-delay: -14s;
}

.gradient-4 {
    background: linear-gradient(45deg, #8a2be2, #9370db); /* Bright purple gradient */
    top: 30%;
    right: 30%;
    animation-delay: -10s;
}

/* Extra blobs used only by the mobile splash */
.splash-blob {
    display: none;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: var(--transition-normal);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.logo {
    width: 200px;
    height: 200px;
    border-radius: 0;
    object-fit: contain;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
}

.nav-link {
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
    transition: var(--transition-fast);
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-link:hover {
    color: var(--accent-yellow);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-yellow);
    transition: var(--transition-fast);
}

.nav-link:hover::after {
    width: 100%;
}

/* Hero Section */
.hero {
    padding: 280px 0 var(--spacing-xxl);
    text-align: center;
    position: relative;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
    text-wrap: balance;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* No text-wrap: balance — with two paragraphs it balances each one
       independently, breaking their shared column width */
}

/* The last paragraph carries the gap before the buttons; matches the
   title's gap above the copy so spacing reads symmetric */
.hero-subtitle:last-of-type {
    margin-bottom: var(--spacing-md);
}

.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: var(--transition-normal);
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--white);
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-secondary:hover {
    background: var(--primary-blue);
    color: var(--white);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

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

.btn-outline.clear-search {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Section Styles */
.section-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-gray);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--medium-gray);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Map Section */
.map-section {
    padding: var(--spacing-xxl) 0;
    background: var(--light-gray);
}

.map-controls {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
    align-items: center;
}

.controls-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
}

.radius-control {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.radius-control label {
    font-weight: 500;
    color: var(--dark-gray);
    white-space: nowrap;
}

/* Unified search — one input for store names and locations, with a
   live suggestions listbox. Shared by desktop layout and mobile shell. */
.unified-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 300px;
}

.search-icon {
    position: absolute;
    left: var(--spacing-sm);
    z-index: 1; /* above the input's background */
    width: 20px;
    height: 20px;
    color: var(--medium-gray);
    pointer-events: none;
}

.search-input {
    flex: 1;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: calc(var(--spacing-sm) + 28px);
    border: 2px solid #E5E7EB;
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    list-style: none;
    margin: 0;
    padding: var(--spacing-xs) 0;
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
}

.search-suggestions[hidden] {
    display: none;
}

.suggestion {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-size: 1rem;
    color: var(--dark-gray);
}

.suggestion.active,
.suggestion:hover {
    background: var(--light-gray);
}

.suggestion-icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--medium-gray);
}

.suggestion-secondary {
    color: var(--medium-gray);
    font-size: 0.85rem;
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion--location {
    border-top: 1px solid #E5E7EB;
    color: var(--primary-blue);
    font-weight: 500;
}

.filter-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.filter-select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid #E5E7EB;
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--white);
    cursor: pointer;
    transition: var(--transition-fast);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.map-container {
    height: 500px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-lg);
    position: relative;
}

/* Google Maps Styles with Performance Optimizations */
.gm-style {
    border-radius: var(--radius-lg);
    /* Performance optimizations */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    /* Reduce repaints */
    will-change: auto;
}

/* Google Maps info window styles removed - using direct modal instead */

/* Store Distance */
.store-distance {
    color: var(--accent-orange);
    font-weight: 600;
    font-size: 1rem;
    margin: 2px 0;
}

/* Google Maps Controls */
.gm-control-active {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.gm-control-active button {
    background: transparent !important;
    border: none !important;
    color: var(--dark-gray) !important;
    transition: var(--transition-fast);
}

.gm-control-active button:hover {
    background: var(--light-gray) !important;
    color: var(--primary-blue) !important;
}

/* Store Search Section */
.store-search-section {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

/* Sheet chrome is mobile-shell-only; invisible in the desktop layout */
.sheet-header {
    display: none;
}

.store-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

#loadMoreBtn {
    display: block;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-xl);
}

.store-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.store-card[data-has-website] {
    cursor: pointer;
}

.store-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.store-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, #cc0000, #cc6600, #cccc00, #66cc00, #00cc00, #00cc66, #00cccc, #0066cc, #0000cc, #6600cc, #cc00cc, #cc0066);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.store-photo {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--light-gray);
}

.store-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-normal);
}

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

.store-content {
    padding: var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}


.store-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--dark-gray);
    margin-bottom: var(--spacing-xs);
    text-wrap: balance;
}

.store-address {
    color: var(--medium-gray);
    margin-bottom: var(--spacing-xs);
    font-size: 1rem;
    line-height: 1.3;
}

.store-address-line1 {
    color: var(--medium-gray);
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 2px;
}

.store-address-line2 {
    color: var(--medium-gray);
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: var(--spacing-xs);
}

.store-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--spacing-xs);
}

.store-phone,
.store-website,
.store-maps {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 2px 0;
    border-bottom: 1px solid var(--light-gray);
    transition: var(--transition-fast);
}

.store-phone:hover,
.store-website:hover,
.store-maps:hover {
    color: var(--secondary-blue);
    text-decoration: none;
    border-bottom-color: var(--primary-blue);
}

.store-maps {
    color: var(--accent-green);
}

.store-maps:hover {
    color: var(--accent-green);
    opacity: 0.8;
}

/* About Section */
.about-section {
    padding: var(--spacing-xxl) 0;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: var(--spacing-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.about-section .section-title {
    color: var(--dark-gray);
    margin-bottom: var(--spacing-xl);
}

.about-text p {
    font-size: 1.125rem;
    color: var(--dark-gray);
    margin-bottom: var(--spacing-lg);
    line-height: 1.7;
}

/* Expandable content styling */
.intro-paragraph {
    margin-bottom: var(--spacing-md);
}

.expandable-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    margin-bottom: var(--spacing-md);
}

.expandable-content.expanded {
    max-height: 1000px; /* Large enough to accommodate content */
    transition: max-height 0.3s ease-in;
}

.expand-button {
    background: var(--primary-blue);
    color: var(--white);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: all var(--transition-fast);
    margin: var(--spacing-sm) 0;
}

.expand-button:hover {
    background: var(--secondary-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.expand-icon {
    transition: transform var(--transition-fast);
    font-size: 0.8rem;
}

/* Submit Section */
.submit-section {
    padding: var(--spacing-xxl) 0;
    background: var(--light-gray);
}

.store-form {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

/* Requirements section styling */
.requirements-section {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.requirements-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--dark-gray);
    margin-bottom: var(--spacing-sm);
}

.requirements-subtitle {
    color: var(--dark-gray);
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: 8px;
    transition: background-color var(--transition-fast);
}

.checkbox-label:hover {
    background: rgba(255, 255, 255, 0.1);
}

.requirement-checkbox {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-blue);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkbox-text {
    color: var(--dark-gray);
    font-size: 0.95rem;
    line-height: 1.4;
    user-select: none;
}

/* Turnstile styling */
.cf-turnstile {
    margin: var(--spacing-md) 0;
    display: flex;
    justify-content: center;
}

.cf-turnstile iframe {
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    color: var(--dark-gray);
    margin-bottom: var(--spacing-xs);
}

.form-input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid #E5E7EB;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: var(--font-primary);
    transition: var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Footer */
.footer {
    background: var(--white);
    color: var(--dark-gray);
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.footer-logo img {
    width: 80px;
    height: 80px;
    border-radius: 0;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.footer-text {
    color: var(--dark-gray);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
}

.footer-text a {
    color: var(--dark-gray);
    font-weight: 600;
    text-decoration: underline;
    transition: var(--transition-fast);
}

.footer-text a:hover {
    color: var(--primary-blue);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
}

.footer-links a {
    color: var(--dark-gray);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition-fast);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 6px;
}

.footer-links a:hover {
    color: var(--primary-blue);
    background: rgba(0, 0, 0, 0.05);
}

/* Loading Spinner */
.loading-spinner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #E5E7EB;
    border-top: 4px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* In-place loaders shown while the map and store list initialize */
.map-loading,
.store-list-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 150px;
}

.store-list-message {
    text-align: center;
    color: var(--medium-gray);
    padding: var(--spacing-lg);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .unified-search {
        min-width: auto;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

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

    .store-list {
        grid-template-columns: 1fr;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .gradient-layer {
        animation: none;
    }
}

/* Focus styles for accessibility */
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}


/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-blue: #0066CC;
        --secondary-blue: #004499;
        --medium-gray: #333333;
        --dark-gray: #000000;
    }
}

/* Store Popup Styles */
.store-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* above the mobile tab bar (1000) */
    animation: fadeIn 0.3s ease;
}

.popup-content {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, #4A90E2, #357ABD);
    color: white;
    border-radius: 12px 12px 0 0;
}

.popup-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.popup-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.popup-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.popup-body {
    padding: 24px;
}

.popup-body > div {
    margin-bottom: 16px;
    line-height: 1.6;
}

.popup-body > div:last-child {
    margin-bottom: 0;
}

.store-image {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.store-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.store-address {
    font-size: 1.1rem;
    color: #333;
}


.store-phone a,
.store-website a,
.store-maps a {
    color: #4A90E2;
    text-decoration: none;
    font-weight: 500;
}

.store-phone a:hover,
.store-website a:hover,
.store-maps a:hover {
    text-decoration: underline;
}

.store-description {
    color: #666;
    font-style: italic;
}

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* App-shell elements that only exist on mobile */
.tab-bar,
.locate-btn,
.mobile-only {
    display: none;
}

/* =====================================================
   MOBILE APP SHELL (≤768px)
   Bottom tab bar + full-bleed map with overlay UI.
   Inactive views hide via visibility (never display:none)
   so the Google Map and Turnstile keep their layout.
   Desktop rules above are untouched.
   ===================================================== */
@media (max-width: 768px) {
    /* Desktop chrome that doesn't exist in the app shell */
    .header,
    .hero,
    .footer,
    .map-section .section-title {
        display: none;
    }

    /* The static views share the splash's saturated palette: rich base
       gradient instead of the pale-yellow default wherever blob coverage
       thins */
    .background-animation {
        background: linear-gradient(160deg, #ffc107 0%, #ff4081 45%, #9c27b0 100%);
    }

    /* Phone GPUs take seconds to rasterize blur(100px) across four
       viewport-sized layers at 3x DPR — it gated the entire first paint on
       iOS. Pre-softened radial gradients composite instantly and keep the
       same palette, positions, and float animation. Desktop keeps true blur. */
    .gradient-layer {
        filter: none;
        opacity: 0.85;
        /* Larger than the blurred originals: blur() bled each blob's color
           well past its box, so the gradient footprint compensates */
        width: 170%;
        height: 170%;
    }

    /* Blurring a solid disk keeps a fully saturated plateau in the middle
       and only fades at the rim — the gradients mimic that: solid color to
       50%, then falloff. Color pairs match the desktop blob gradients. */
    .gradient-1 {
        background: radial-gradient(circle closest-side,
            #ffd700 0%, #ffc107 55%, rgba(255, 193, 7, 0) 100%);
    }

    .gradient-2 {
        background: radial-gradient(circle closest-side,
            #00bfff 0%, #0080ff 55%, rgba(0, 128, 255, 0) 100%);
    }

    .gradient-3 {
        background: radial-gradient(circle closest-side,
            #ff00ff 0%, #ff1493 55%, rgba(255, 20, 147, 0) 100%);
    }

    .gradient-4 {
        background: radial-gradient(circle closest-side,
            #8a2be2 0%, #9370db 55%, rgba(147, 112, 219, 0) 100%);
    }

    .mobile-only {
        display: block;
    }

    /* ---- Views ---- */
    .app-view {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(var(--tab-bar-h) + var(--safe-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        visibility: hidden;
    }

    body:not([data-view]) #map,
    body[data-view="map"] #map,
    body[data-view="about"] #about,
    body[data-view="submit"] #submit {
        visibility: visible;
    }

    /* About & Submit scroll natively over the blob background */
    #about.app-view,
    #submit.app-view {
        background: transparent;
        padding-top: calc(var(--safe-top) + var(--spacing-lg));
        padding-bottom: var(--spacing-xl);
    }

    /* Text sitting directly on the saturated background goes white,
       matching the splash treatment */
    .about-footer {
        text-align: center;
        margin-top: var(--spacing-xl);
        color: var(--white);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .about-footer a {
        color: var(--white);
    }

    #submit.app-view .section-title,
    #submit.app-view .section-subtitle {
        color: var(--white);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .about-footer-logo {
        width: 80px;
        height: 80px;
        object-fit: contain;
        margin-bottom: var(--spacing-xs);
    }

    /* Comfortable touch targets on the form */
    .requirement-checkbox {
        width: 24px;
        height: 24px;
    }

    /* ---- Map view: full-bleed canvas, everything else overlaid ---- */
    #map.app-view {
        overflow: hidden;
        background: none;
        padding: 0;
    }

    #map.app-view .container {
        max-width: none;
        padding: 0;
        height: 100%;
    }

    #map.app-view .map-container {
        position: absolute;
        inset: 0;
        height: auto;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Floating search overlay */
    #map.app-view .map-controls {
        position: absolute;
        top: calc(var(--safe-top) + var(--spacing-sm));
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        z-index: 20;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-xs);
    }

    #map.app-view .search-input {
        border: none;
        border-radius: 24px;
        padding-top: 14px;
        padding-bottom: 14px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(20px);
        box-shadow: var(--shadow-lg);
    }

    #map.app-view .search-suggestions {
        border-radius: var(--radius-lg);
    }

    /* Radius + Clear appear as pills only while a search is active */
    #map.app-view .controls-row {
        display: none;
        justify-content: flex-start;
        gap: var(--spacing-xs);
    }

    #map.app-view .map-controls.map-controls--active .controls-row {
        display: flex;
    }

    #map.app-view .radius-control,
    #map.app-view .filter-controls {
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(20px);
        border-radius: 999px;
        padding: var(--spacing-xs) var(--spacing-sm);
        box-shadow: var(--shadow-md);
    }

    #map.app-view .radius-control label {
        font-size: 0.85rem;
    }

    #map.app-view .filter-select {
        border: none;
        background: transparent;
        padding: 0;
        font-size: 0.85rem;
        font-weight: 500;
    }

    #map.app-view .btn-outline.clear-search {
        border: none;
        padding: 0;
        background: transparent;
        color: var(--primary-blue);
    }

    /* Hide the Maps zoom control that sits directly behind the locate button */
    #map.app-view .gm-bundled-control {
        display: none !important;
    }

    /* Locate-me button — z below the sheet (10) so the rising sheet covers it */
    .locate-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: var(--spacing-sm);
        bottom: calc(var(--sheet-peek) + var(--spacing-md));
        z-index: 5;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 50%;
        background: var(--white);
        color: var(--primary-blue);
        box-shadow: var(--shadow-lg);
        cursor: pointer;
    }

    .locate-btn svg {
        width: 22px;
        height: 22px;
    }

    /* ---- Bottom sheet (peek / half / full) ---- */
    #map.app-view .store-search-section {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 100%;
        z-index: 10;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        background: var(--white);
        backdrop-filter: none;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
        transform: translateY(calc(100% - var(--sheet-peek)));
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }

    #map.app-view .store-search-section.sheet--half {
        transform: translateY(50%);
    }

    #map.app-view .store-search-section.sheet--full {
        transform: translateY(calc(var(--safe-top) + var(--spacing-xs)));
    }

    #map.app-view .store-search-section.sheet--dragging {
        transition: none;
    }

    .sheet-header {
        display: block;
        flex: none;
        padding: var(--spacing-xs) var(--spacing-md) var(--spacing-sm);
        text-align: center;
        touch-action: none;
        cursor: grab;
    }

    .sheet-handle {
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: #D1D5DB;
        margin: 0 auto var(--spacing-xs);
    }

    .sheet-title {
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--dark-gray);
    }

    .sheet-content {
        flex: 1;
        overflow: hidden;
        padding: 0 var(--spacing-sm) var(--spacing-lg);
    }

    /* Below full, the content pane can't scroll — claim its gestures for the
       sheet drag so the browser doesn't cancel our pointer events */
    #map.app-view .store-search-section:not(.sheet--full) .sheet-content {
        touch-action: none;
    }

    .sheet--full .sheet-content {
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    #map.app-view .store-list {
        grid-template-columns: 1fr;
    }

    /* ---- Tab bar ---- */
    .tab-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(var(--tab-bar-h) + var(--safe-bottom));
        padding-bottom: var(--safe-bottom);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        z-index: 1000;
    }

    .tab-btn {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: none;
        background: none;
        color: var(--medium-gray);
        font-family: var(--font-primary);
        font-size: 0.7rem;
        font-weight: 500;
        cursor: pointer;
        touch-action: manipulation;
    }

    /* While the map view (re)builds after a tab switch, the icon becomes a
       spinner so the tap visibly registered */
    .tab-btn--loading svg {
        visibility: hidden;
    }

    .tab-btn--loading::before {
        content: '';
        position: absolute;
        top: 10px;
        left: calc(50% - 10px);
        width: 20px;
        height: 20px;
        border: 2px solid rgba(74, 144, 226, 0.25);
        border-top-color: var(--primary-blue);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .tab-btn svg {
        width: 24px;
        height: 24px;
    }

    .tab-btn[aria-current="page"] {
        color: var(--primary-blue);
    }

    body.keyboard-open .tab-bar {
        display: none;
    }

    /* ---- First-visit splash (the hero, promoted to an overlay) ---- */
    html[data-splash] .hero {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 2500;
        padding: var(--spacing-md);
        /* Transparent: the real animated blob background is raised to sit
           directly beneath the splash (see .background-animation below) */
        background: transparent;
        overflow-y: auto;
        transition: opacity var(--transition-normal);
    }

    /* While the splash shows, the desktop blob animation rises above the map
       (normally z -1, hidden behind the opaque map pane) to back the splash */
    html[data-splash] .background-animation {
        z-index: 2400;
        transition: opacity var(--transition-normal);
    }

    /* Splash only: six three-quarter-viewport blobs (127.5% boxes → ~70vw
       saturated cores) spread across the screen, cycling the established
       four color pairs. Pink stays under the title and purple under the
       copy for readability. Offsets place each blob's center at the target
       viewport point (offset = target − 63.75%). */
    html[data-splash] .gradient-layer {
        width: 127.5%;
        height: 127.5%;
    }

    html[data-splash] .splash-blob {
        display: block;
    }

    html[data-splash] .gradient-1 {  /* gold, top-left */
        left: -51.75%;
        top: -58.75%;
    }

    html[data-splash] .gradient-2 {  /* blue, right edge */
        left: 31.25%;
        top: -28.75%;
    }

    html[data-splash] .gradient-3 {  /* magenta, under the title */
        left: -23.75%;
        bottom: auto;
        top: -38.75%;
    }

    html[data-splash] .gradient-4 {  /* purple, under the copy */
        left: -3.75%;
        right: auto;
        top: -5.75%;
    }

    html[data-splash] .gradient-5 {  /* magenta, lower-left */
        background: radial-gradient(circle closest-side,
            #ff00ff 0%, #ff1493 55%, rgba(255, 20, 147, 0) 100%);
        left: -53.75%;
        top: 11.25%;
        animation-delay: -20s;
    }

    html[data-splash] .gradient-6 {  /* gold, bottom-right */
        background: radial-gradient(circle closest-side,
            #ffd700 0%, #ffc107 55%, rgba(255, 193, 7, 0) 100%);
        left: 21.25%;
        top: 31.25%;
        animation-delay: -5s;
    }

    html[data-splash="hide"] .background-animation {
        opacity: 0;
    }

    html[data-splash="hide"] .hero {
        opacity: 0;
        pointer-events: none;
    }

    /* Splash layout: a poster column the width of the logo — logo on top,
       text justified flush to the logo's edges, full-width buttons.
       The 36vh term shrinks the whole column on short phones (e.g. SE)
       so the splash always fits without scrolling. */
    html[data-splash] .hero {
        --splash-w: min(280px, 78vw, 36vh);
    }

    html[data-splash] .hero .hero-content {
        width: var(--splash-w);
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    html[data-splash] .hero .hero-logo {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto var(--spacing-md);
    }

    html[data-splash] .hero .hero-title,
    html[data-splash] .hero .hero-subtitle {
        text-align: justify;
        text-wrap: initial;
    }

    /* Exactly two lines ("INDIE ART SHOPS" / "ARE MORE FUN."): the font
       scales with the column so the first line never wraps, and
       text-align-last stretches both lines flush to the logo's edges */
    html[data-splash] .hero .hero-title {
        font-size: calc(var(--splash-w) / 9);
        line-height: 1.2;
        margin-bottom: var(--spacing-sm);
        text-align-last: justify;
    }

    html[data-splash] .hero .hero-subtitle {
        line-height: 1.0;
        margin-bottom: var(--spacing-xs);
    }

    /* Tighter gap between the copy and the first button */
    html[data-splash] .hero .hero-subtitle:last-of-type {
        margin-bottom: var(--spacing-sm);
    }

    html[data-splash] .hero .hero-actions {
        width: 100%;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    html[data-splash] .hero .hero-actions .btn {
        width: 100%;
    }

    /* ---- Store popup becomes a slide-up sheet ---- */
    .store-popup {
        align-items: flex-end;
    }

    .popup-content {
        width: 100%;
        max-width: none;
        max-height: 85vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding-bottom: var(--safe-bottom);
        animation: slideUp 0.3s ease;
    }

    /* Keep the map visible under the modal spinner */
    .loading-spinner {
        background-color: rgba(255, 255, 255, 0.6);
    }
}

/* Marker popup styles removed - now using direct modal */