/* Reset and base styles */
* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    height: 100dvh; /* Use dynamic viewport height for better mobile support */
    background-color: #f3f4f6; /* A light gray background matching Tailwind's gray-100 */
}

/* The main header styling for the top stripe */
#main-header {
    background-color: #fff; /* White background for the header */
    color: #334155; /* A dark slate color for text */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* A subtle shadow for depth */
    z-index: 1000;
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
    padding-top: calc(10px + env(safe-area-inset-top));
    display: flex;
    justify-content: center; /* Center the main title group */
    align-items: center;
}

#header-title-group {
    text-align: center; /* Ensure text inside is centered */
}

/* Title styling */
#main-header h1 {
    font-family: 'Helevetica Neue', Arial, sans-serif;
    margin: 0;
    font-size: 1.5rem; /* Smaller font for a cleaner look */
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

/* Subtitle styling */
#main-header p {
    margin: 0;
    font-size: 0.875rem; /* Smaller subtitle font */
    color: #64748b;
}


/* NEW: Language Switcher Styles */
#lang-switcher-container {
    position: absolute; /* Position it independently */
    right: 1rem; /* Anchor to the right */
}

#lang-switcher-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.75rem; /* Larger flag icon */
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

#lang-switcher-button:hover {
    background-color: #f3f4f6;
}

#lang-list {
    display: none; /* Hidden by default */
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    list-style: none;
    padding: 0.5rem;
    margin: 0;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1100;
    width: max-content;
}

#lang-list.visible {
    display: block;
}

.lang-option {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-option:hover {
    background-color: #f3f4f6;
}

/* END NEW STYLES */

/* App container */
#app {
    position: relative; /* Needed to position child elements */
    flex-grow: 1; /* Allow the app container to fill remaining space */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent content from spilling out */
    min-height: 0; /* Allow flex item to shrink */
    max-height: 100%; /* Ensure it doesn't exceed the viewport height */
}

/* Status message container */
#status-message-container {
    /* Position it in the top right corner */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0.2rem;
    width: 80%;
    max-width: 250px;
    z-index: 500;
    text-align: center;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
}

#status-message {
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Legend container */
#legend-container {
    position: absolute;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: calc(1rem + env(safe-area-inset-left));
    z-index: 500;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    max-width: calc(100vw - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right));
}

.legend-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

/* Map */
#map {
    width: 100%;
    height: 100%; /* Fill the remaining height of the parent (#app) */
    z-index: 10;
}

/* The MapLibre popup style. Adjust as needed. */
.maplibregl-popup-content {
    border-radius: 0.5rem;
    padding: 0.75rem;
}

/* Custom marker styles */
.toilet-marker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.2s;
}

.toilet-marker:hover {
    transform: scale(1.1);
}

.toilet-marker.free {
    background-color: #10b981; /* green-500 */
}

.toilet-marker.paid {
    background-color: #ef4444; /* red-500 */
}

.toilet-marker.unknown {
    background-color: #6b7280; /* gray-500 */
}

/* Fee badge styles */
.fee-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.fee-badge.free {
    background-color: #d1fae5;
    color: #065f46;
}

.fee-badge.paid {
    background-color: #fee2e2;
    color: #991b1b;
}

.fee-badge.unknown {
    background-color: #f3f4f6;
    color: #374151;
}

/* Popup styles */
.popup-content {
    font-size: 0.875rem;
    color: #374151;
}

.popup-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.popup-title {
    font-weight: 700;
    color: #1f2937;
}

.popup-address {
    margin-bottom: 0.75rem;
    line-height: 1.4;
    font-size: 0.75rem;
}

.popup-info {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}

.popup-info-item {
    font-size: 0.75rem;
    color: #4b5563;
    margin-bottom: 0.25rem;
}

.popup-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.popup-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s;
}

.popup-button.google {
    border-color: #3b82f6;
    color: #1d4ed8;
    background-color: #dbeafe;
}

.popup-button.google:hover {
    background-color: #bfdbfe;
}

.popup-button.mapy {
    border-color: #10b981;
    color: #047857;
    background-color: #d1fae5;
}

.popup-button.mapy:hover {
    background-color: #a7f3d0;
}

#logo-link {
    /* this is the header, it should be a link but not underlined or anything */
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit color from parent */
}