/* 
 * J-Price Sakura - Main Application Styles
 * Extracted from index.html for better maintainability
 * Last Updated: March 16, 2026
 */

:root { 
    --jp-pink: #FF8E9E; 
    --jp-sakura: #FFB7C5;
    --jp-gold: #D4AF37;
    --bg-soft: #FFF5F6;
}

body { 
    font-family: 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', sans-serif; 
    background: var(--bg-soft); 
    color: #5C4044; 
    margin: 0; 
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Allow text selection only in input fields, textareas, and contenteditable elements */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Prevent text selection on all other elements */
*, *::before, *::after {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Explicitly allow text selection for specific elements that need it */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Prevent text selection on buttons and interactive elements */
button, a, .btn-sakura, .radius-btn, .cat-panel, .sort-btn, .store-card,
.nav-home, .nav-profile, .profile-tab, .gender-btn, .lang-select,
#ward-selector, #search-input, #auth-email, #verification-code,
#register-nickname, #register-birthday, #product-notes {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Make map more touch-friendly */
#edit-map {
    touch-action: pan-x pan-y;
    -webkit-tap-highlight-color: transparent;
}

/* Custom pin marker styling */
.custom-pin-marker {
    cursor: pointer !important;
}

/* Improve touch targets for mobile */
@media (max-width: 768px) {
    .store-card {
        min-width: 180px !important;
    }
    
    button, .btn-sakura, .radius-btn, .cat-panel {
        min-height: 44px; /* Apple's recommended minimum touch target size */
    }
    
    input, textarea, select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }
}

/* Extra small screens (iPhone SE, older iPhones) */
@media (max-width: 375px) {
    #auth-overlay .p-8 {
        padding: 1.5rem;
    }
    
    #auth-overlay h1 {
        font-size: 1.5rem;
    }
    
    .input-field {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
        font-size: 0.875rem;
    }
    
    button.py-4 {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
    }
    
    #review-overlay .max-w-\[85\%\] {
        max-width: 95%;
    }
    
    #edit-overlay .px-4 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    #edit-overlay .py-4 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    
    #success-interstitial .w-48 {
        width: 8rem;
        height: 8rem;
    }
    
    #success-interstitial .text-3xl {
        font-size: 1.75rem;
    }
    
    #success-interstitial .text-lg {
        font-size: 1rem;
    }
    
    #scan-anim .px-12 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    #scan-anim .rounded-\[3rem\] {
        border-radius: 1.5rem;
    }
    
    .gender-btn {
        font-size: 0.75rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    /* Extra constraints for very small screens */
    #auth-overlay {
        max-height: 100vh;
    }
    
    #step-email, #step-code, #step-register {
        max-height: calc(100vh - 120px); /* Account for header */
    }
    
    .input-field {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 0.875rem;
    }
    
    button.py-4 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* Prevent text selection on text containers */
h1, h2, h3, h4, h5, h6, p, span, div, li, td, th, label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Prevent image dragging */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none; /* Also prevents right-click context menu on images */
}

/* Prevent context menu on entire page */
body, * {
    -webkit-context-menu: none;
    -moz-context-menu: none;
    -ms-context-menu: none;
    context-menu: none;
}

/* Prevent iOS text selection context menu */
* {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/* Allow text selection only where needed */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}

/* Improved scrolling for auth overlay on mobile */
#auth-overlay {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

#step-email, #step-code, #step-register {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* Prevent scroll chaining */
}

/* Validation error styling */
.input-field.error {
    border-color: #EF4444 !important;
    background-color: #FEF2F2 !important;
}

.input-field.error:focus {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.gender-btn.error {
    border-color: #EF4444 !important;
    background-color: #FEF2F2 !important;
    color: #DC2626 !important;
}

.checkbox-custom.error {
    border-color: #EF4444 !important;
}

.error-message {
    color: #EF4444;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.error-message::before {
    content: "⚠";
    font-size: 0.75rem;
}

.label-error {
    color: #EF4444 !important;
}

.app-shell { 
    max-width: 600px; 
    margin: 0 auto; 
    background: #fff; 
    min-height: 100vh; 
    position: relative; 
    box-shadow: 0 0 40px rgba(255, 142, 158, 0.1); 
}

.card-soft { 
    @apply bg-white rounded-[1.5rem] border border-pink-50 shadow-sm transition-all; 
}

.btn-sakura { 
    background: linear-gradient(135deg, #FFB7C5 0%, #FF8E9E 100%); 
    box-shadow: 0 8px 20px rgba(255, 142, 158, 0.3); 
}

.btn-disabled { 
    background: #E5E7EB !important; 
    color: #9CA3AF !important; 
    cursor: pointer !important; 
    box-shadow: none !important; 
}

.pulse-sakura { 
    animation: pulse-pink 2s infinite; 
    border-color: #FFB7C5 !important; 
}

@keyframes pulse-pink {
    0% { box-shadow: 0 0 0 0 rgba(255, 142, 158, 0.5); }
    70% { box-shadow: 0 0 0 15px rgba(255, 142, 158, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 142, 158, 0); }
}

.pulse-blue { 
    animation: pulse-blue 2s infinite; 
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.pulse-sparkle { 
    animation: pulse-sparkle 3s infinite; 
}

@keyframes pulse-sparkle {
    0% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); color: #FF4D6D; }
    100% { opacity: 0.7; transform: scale(1); }
}

.pulse-text { 
    animation: pulse-text 3s infinite; 
}

@keyframes pulse-text {
    0% { color: #4B5563; }
    50% { color: #FF4D6D; }
    100% { color: #4B5563; }
}

.countdown-bar {
    height: 4px;
    background: linear-gradient(90deg, #FF8E9E 0%, #FFB7C5 100%);
    transition: width 1s linear;
    border-radius: 2px;
}

.input-field {
    @apply w-full px-6 py-4 rounded-2xl border-2 border-pink-100 bg-pink-50/30 text-gray-700 text-base font-medium focus:outline-none focus:border-pink-300 transition-colors;
}

.checkbox-custom {
    @apply w-5 h-5 rounded border-2 border-pink-200 bg-white checked:bg-pink-500 checked:border-pink-500 focus:ring-pink-300 focus:ring-2 focus:ring-offset-2 transition-colors;
}

.radius-btn { 
    @apply flex flex-col items-center justify-center p-2 text-gray-400 text-[11px] font-black transition-all active:scale-95 flex-1 gap-1 border-2 border-transparent; 
}

.radius-btn i, .radius-btn svg { 
    @apply transition-colors mx-auto; 
    stroke-width: 2.5; 
    color: #cbd5e0; 
}

.radius-btn.active { 
    @apply border-[#FF4D6D] rounded-3xl text-[#FF4D6D] px-3 bg-pink-50/30; 
}

.radius-btn.active i, .radius-btn.active svg { 
    color: #FF4D6D !important; 
    stroke: #FF4D6D !important; 
}

.cat-panel { 
    @apply flex items-center justify-center py-2.5 px-2 cursor-pointer gap-2;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #FFE4E9;
    border-radius: 1rem;
    background: white;
    min-height: 48px;
}

.cat-panel:active { 
    transform: scale(0.95); 
    @apply shadow-inner; 
}

.cat-panel.active { 
    @apply border-pink-500 shadow-lg; 
    transform: scale(1.03);
    border-width: 1.5px;
    background: linear-gradient(135deg, #FFE4E9 0%, #FFD6DD 100%);
    box-shadow: 0 4px 15px rgba(255, 142, 158, 0.15);
    z-index: 10;
}

.cat-panel i { 
    @apply text-pink-500 transition-colors shrink-0 flex items-center justify-center;
    height: 18px; 
}

.cat-panel span { 
    @apply text-[11px] font-black text-gray-600 text-center;
    line-height: 1;
}

.cat-panel.active i { 
    @apply text-pink-700; 
}

.cat-panel.active span { 
    @apply text-pink-700; 
}

.sort-btn { 
    @apply px-2 py-1 rounded-lg text-[10px] font-black border border-pink-50 text-pink-200 transition-all flex items-center gap-1; 
}

.sort-btn.active { 
    @apply bg-pink-100 text-pink-500 border-pink-200 shadow-sm; 
}

.snap-item { 
    @apply flex-shrink-0 w-[185px] bg-white rounded-[2.5rem] p-6 shadow-[0_15px_35px_rgba(255,142,158,0.06)] border border-pink-50/50 relative active:scale-95 transition-all cursor-pointer text-left snap-center;
}

.rank-indicator { 
    @apply absolute top-4 left-6 flex items-center gap-1.5 z-10; 
}

.rank-num { 
    @apply text-lg font-black italic tracking-tighter leading-none; 
    font-family: 'Georgia', serif; 
}

.rank-1 { 
    color: #D4AF37; 
}

.rank-2 { 
    color: #A8A8A8; 
}

.rank-3 { 
    color: #B76E79; 
}

.rank-default { 
    color: #FFB7C5; 
}

.lang-select { 
    @apply bg-white border border-pink-100 text-pink-400 text-[10px] font-black rounded-full px-3 py-1.5 outline-none shadow-sm transition-all focus:border-pink-300;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23FFB7C5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

.distance-slider-container {
    @apply relative pt-2 pb-8 px-2;
}

.distance-track {
    @apply relative h-1 bg-pink-100 rounded-full;
}

.distance-marker {
    @apply absolute w-4 h-4 rounded-full bg-white border-2 border-pink-200 -translate-x-1/2 -translate-y-1/2 cursor-pointer transition-all;
    box-shadow: 0 2px 8px rgba(255, 142, 158, 0.2);
    z-index: 6;
}

.distance-marker.active {
    @apply border-pink-500 bg-pink-100;
    box-shadow: 0 4px 12px rgba(255, 142, 158, 0.4);
    transform: translateX(-50%) translateY(-50%) scale(1.15);
}

.distance-marker-label {
    @apply absolute top-5 left-1/2 -translate-x-1/2 text-[9px] font-black text-pink-400 whitespace-nowrap;
}

.distance-dragger {
    @apply absolute w-8 h-8 rounded-full bg-pink-500 border-4 border-white -translate-x-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing shadow-lg;
    z-index: 10;
}

.distance-dragger-line {
    @apply absolute h-1 bg-pink-300 -translate-y-1/2;
    z-index: 5;
}

/* OSM Preview */
#osm-preview {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.drawer { 
    transform: translateY(100%); 
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); 
    visibility: hidden; 
}

.drawer-open { 
    transform: translateY(0) !important; 
    visibility: visible !important; 
}

.time-stamp { 
    @apply text-pink-300 font-bold text-[8px] uppercase tracking-tighter; 
}

.hidden { 
    display: none !important; 
}

.edit-input { 
    @apply w-full bg-pink-50 border border-pink-100 rounded-2xl px-4 py-3 text-sm focus:bg-white outline-none text-gray-700; 
}

.product-img { 
    @apply w-full h-full object-contain rounded-2xl; 
}

/* Animation styles from end of index.html */
@keyframes scan { 
    0% { top: 0; } 
    100% { top: 100%; } 
}

.sakura-petal {
    position: absolute;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #FFB7C5, #FF8E9E);
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
    opacity: 0.7;
    animation: float-petal 4s ease-in-out infinite;
}

@keyframes float-petal {
    0% {
        transform: translateY(0) rotate(45deg) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-20px) rotate(45deg) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(0) rotate(45deg) scale(1);
        opacity: 0.7;
    }
}

@keyframes slide-up-fade {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#success-interstitial {
    animation: slide-up-fade 0.5s ease-out;
}

/* Rank badge styling */
.rank-1 {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #8B4513 !important;
    border-color: #FFD700 !important;
}

.rank-2 {
    background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%) !important;
    color: #696969 !important;
    border-color: #C0C0C0 !important;
}

.rank-3 {
    background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%) !important;
    color: #FFF8DC !important;
    border-color: #CD7F32 !important;
}

.rank-default {
    background: linear-gradient(135deg, #FFB7C5 0%, #FF8E9E 100%) !important;
    color: white !important;
    border-color: #FF8E9E !important;
}

/* Map container styles */
#edit-map {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative;
    min-height: 400px; /* Ensure map has minimum height */
}

#edit-map .leaflet-container {
    width: 100%;
    height: 100%;
    font-family: inherit;
    min-height: 400px; /* Ensure minimum height for map */
}

/* Ensure map controls are visible */
#edit-map .leaflet-control-container .leaflet-control {
    z-index: 1000;
}

/* Map marker styles */
.user-marker {
    background: transparent;
    border: none;
}

.store-marker-active, .store-marker-inactive {
    background: transparent;
    border: none;
}

/* Location grouping styles for contributions */
.location-group {
    transition: all 0.3s ease;
}

.location-group:hover {
    box-shadow: 0 4px 12px rgba(255, 142, 158, 0.15);
}

.location-header {
    transition: background-color 0.2s ease;
}

.location-header:hover {
    background-color: rgba(255, 183, 197, 0.1);
}

.location-items {
    max-height: 500px;
    overflow-y: auto;
    transition: max-height 0.3s ease;
}

.location-items.hidden {
    max-height: 0;
    overflow: hidden;
}

/* Custom scrollbar for location items */
.location-items::-webkit-scrollbar {
    width: 4px;
}

.location-items::-webkit-scrollbar-track {
    background: rgba(255, 183, 197, 0.1);
    border-radius: 2px;
}

.location-items::-webkit-scrollbar-thumb {
    background: rgba(255, 142, 158, 0.3);
    border-radius: 2px;
}

.location-items::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 142, 158, 0.5);
}

/* Product detail timestamp styles */
#detail-timestamp {
    transition: opacity 0.3s ease;
}

#detail-time-ago {
    letter-spacing: 0.05em;
}

#detail-exact-time {
    letter-spacing: 0.03em;
    opacity: 0.7;
}

/* Timestamp inside price box */
.bg-pink-50\/50 #detail-timestamp {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 183, 197, 0.3);
}

.bg-pink-50\/50 #detail-time-ago {
    color: #9ca3af;
    font-weight: 500;
}

.bg-pink-50\/50 #detail-exact-time {
    color: #d1d5db;
    font-weight: 400;
}

/* Product detail button styles */
#product-detail .flex.items-center.justify-between.gap-4 button:first-child {
    background: linear-gradient(to right, #f8fafc, #f1f5f9);
    border-color: #e2e8f0;
    color: #64748b;
    font-weight: 700;
}

#product-detail .flex.items-center.justify-between.gap-4 button:first-child:hover {
    background: linear-gradient(to right, #f1f5f9, #e2e8f0);
    border-color: #cbd5e1;
    color: #475569;
}

#product-detail .flex.items-center.justify-between.gap-4 button:last-child {
    background: linear-gradient(to right, #ff8e9e, #ff6b8b);
    border: none;
    font-weight: 700;
}

#product-detail .flex.items-center.justify-between.gap-4 button:last-child:hover {
    background: linear-gradient(to right, #ff6b8b, #ff477e);
    box-shadow: 0 4px 12px rgba(255, 107, 139, 0.3);
}

/* Safe area classes for iPhone notches and home indicator */
.safe-area-top {
    padding-top: env(safe-area-inset-top, 0px);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left, 0px);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right, 0px);
}

/* Responsive camera overlay improvements */
@media (max-height: 700px) {
    #camera-overlay .flex-1 {
        min-height: calc(100vh - 180px);
    }
    
    #camera-overlay .h-28 {
        height: 100px;
    }
    
    #camera-overlay button[onclick="takePhoto()"] {
        width: 60px;
        height: 60px;
    }
    
    /* Move camera shutter button up on small screens */
    #camera-overlay .absolute.bottom-8 {
        bottom: 4rem !important;
    }
    
    /* Move photo review buttons up */
    #review-overlay .p-4 {
        padding-bottom: 5rem !important;
    }
    
    /* Move confirm location buttons up */
    #edit-overlay .fixed.bottom-0 {
        bottom: 4rem !important;
    }
}

@media (max-height: 600px) {
    #camera-overlay .flex-1 {
        min-height: calc(100vh - 140px);
    }
    
    #camera-overlay .h-28 {
        height: 80px;
    }
    
    #camera-overlay button[onclick="takePhoto()"] {
        width: 50px;
        height: 50px;
        border-width: 2px;
    }
    
    #camera-overlay .absolute.inset-0.flex {
        padding: 2rem;
    }
    
    /* Move camera shutter button even higher on very small screens */
    #camera-overlay .absolute.bottom-8 {
        bottom: 3.5rem !important;
    }
    
    /* Move photo review buttons higher */
    #review-overlay .p-4 {
        padding-bottom: 4.5rem !important;
    }
    
    /* Move confirm location buttons higher */
    #edit-overlay .fixed.bottom-0 {
        bottom: 3.5rem !important;
    }
}

/* Additional responsive improvements for very small screens */
@media (max-height: 500px) {
    #camera-overlay .absolute.bottom-8 {
        bottom: 3rem !important;
    }
    
    #review-overlay .p-4 {
        padding-bottom: 4rem !important;
    }
    
    #edit-overlay .fixed.bottom-0 {
        bottom: 3rem !important;
    }
    
    /* Reduce padding in edit overlay */
    #edit-overlay .p-4 {
        padding: 1rem !important;
    }
    
    /* Reduce button sizes */
    #review-overlay button,
    #edit-overlay button {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        font-size: 0.875rem !important;
    }
}

/* Responsive improvements for small width screens */
@media (max-width: 375px) {
    /* Adjust camera shutter button position */
    #camera-overlay .absolute.bottom-4 {
        bottom: 3rem !important;
    }
    
    /* Adjust photo review button padding */
    #review-overlay .p-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 4.5rem !important;
    }
    
    /* Adjust confirm location button padding */
    #edit-overlay .fixed.bottom-0 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 4.5rem !important;
    }
    
    /* Reduce button font sizes */
    #review-overlay button,
    #edit-overlay button {
        font-size: 0.875rem !important;
    }
}

/* Extra small screens (iPhone SE, older iPhones) - height adjustments */
@media (max-height: 650px) and (max-width: 375px) {
    #camera-overlay .absolute.bottom-4 {
        bottom: 2.5rem !important;
    }
    
    #review-overlay .p-4 {
        padding-bottom: 4rem !important;
    }
    
    #edit-overlay .fixed.bottom-0 {
        padding-bottom: 4rem !important;
    }
    
    /* Reduce button heights */
    #review-overlay button,
    #edit-overlay button {
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
    }
}

/* Distance slider map preview layout fix */
.card-soft > .flex {
    flex-wrap: nowrap;
    min-width: 0;
}
.card-soft > .flex > div:first-child {
    flex: 0 0 75%;
    min-width: 0;
}
.card-soft > .flex > div:last-child {
    flex: 0 0 25%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
#map-view-btn {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#osm-preview {
    width: 100%;
    height: 60px;
}

/* Adjust for very small screens */
@media (max-width: 400px) {
    .card-soft > .flex > div:first-child {
        flex: 0 0 70%;
    }
    .card-soft > .flex > div:last-child {
        flex: 0 0 30%;
    }
    #osm-preview {
        height: 50px;
    }
}

/* Map view stacking context fix */
#results-map {
    position: relative;
    z-index: 1;
}
#view-map {
    position: relative;
    z-index: auto;
}

/* Safe area adjustments for iPhone home indicator */
#camera-overlay .h-32,
#review-overlay .p-4,
#edit-overlay .fixed.bottom-0 {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Ensure buttons are above safe area */
#camera-overlay .absolute.bottom-8,
#review-overlay .p-4,
#edit-overlay .fixed.bottom-0 {
    margin-bottom: env(safe-area-inset-bottom, 0px) !important;
}