/* static/css/style.css */

/* Basic Reset & Body */
body, html { margin: 0; padding: 0; height: 100%; font-family: 'Arial', sans-serif; overflow: hidden; background-color: #3a312a; -webkit-overflow-scrolling: touch; }
* { box-sizing: border-box; }

/* Custom Font */
@font-face { 
    font-family: 'BrokenStoned'; 
    src: url('/static/fonts/BrokeNStonedRegular.woff2') format('woff2'); 
    font-weight: normal; 
    font-style: normal; 
    font-display: swap;
}


/* Loader Styles */
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/static/images/loader-bg.jpg'); background-color: #000; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items: flex-end; padding: 0 5% 20px 5%; box-sizing: border-box; opacity: 1; transition: opacity 0.5s ease-out; z-index: 9999; }
#loader-progress { width: 80%; max-width: 450px; height: 15px; background-color: black; border-radius: 10px; overflow: hidden; border: 1px solid black; position: absolute; bottom: 15px; }
#loader-progress-bar { height: 100%; width: 0%;  background: linear-gradient(to bottom, #FFBC31, #BF8E24); border-radius: 10px; animation: fillProgress 3s ease-out forwards; }
@keyframes fillProgress { from { width: 0%; } to { width: 100%; } }



/* Main Content */
#main-content { height: 100%; width: 100%; position: relative; }
body.loaded { overflow: auto; }
body.modal-open { overflow: hidden; }

/* Map */
#map-overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
#map-container { position: relative; width: 100%; height: 100%; }
#map { height: 100%; width: 100%; background-color: #eee; z-index: 1; }

/* Overlays & Triggers on Map */
.bottom-paw { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; width: 100px; height: 100px; cursor: pointer; z-index: 1; object-fit: contain; display: block; -webkit-tap-highlight-color: transparent; transition: transform 0.2s ease-in-out; }
.bottom-paw:hover { transform: translateX(-50%) translateY(0) scale(1.05); }

/* --- MODIFIED & COMMONIZED MENU CONTROL STYLES --- */

/* Controls Containers Base Properties */
#top-right-controls,
.hamburger-close-container,
.content-close-container {
    width: auto; /* Fit content */
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Common top position */
    top: 15px;
}

/* Specific Positioning for Anchors */
#top-right-controls { /* Animated Trigger Container */
    position: fixed;
    right: -30px;   /* Consistent right alignment, branch shifts inside */
    z-index: 1;
    transform: translateX(100%); /* Start off-screen (X), Y will be from 'top: 15px' */
    animation: slideInMenuUnified 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
    pointer-events: none; /* Container itself, icon will be auto */
}

.hamburger-close-container, 
.content-close-container { /* Static Close Button Containers */
    position: absolute; /* Relative to their parent modal/panel */
    right: -30px;   /* Consistent right alignment, branch shifts inside */
}
.hamburger-close-container { z-index: 1; }
.content-close-container { z-index: 1; }


/* Common Branch Icon Styling */
#menu-branch-icon, /* Trigger's branch */
.hamburger-branch-icon, /* Hamburger close branch */
.content-branch-icon { /* Content modal close branch */
    display: block;
    width: auto;
    max-width: 200px;
    height: auto;
    pointer-events: none;
    position: relative; 
    z-index: 1; /* Sits below the icon */
    left: -10px; /* Consistent shift as requested */
    margin-bottom: 0; 
}

/* Common Icon Styling (for div#menu-trigger and img close buttons) */
#menu-trigger, /* Trigger icon (div) */
#hamburger-close-button, /* Hamburger close icon (img) */
.content-close-button-img { /* Content modal close icon (img) */
    position: absolute;
    left: 5rem;
    top: 2.5rem;
    width: 55px;
    height: 55px;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease-in-out;
    z-index: 2;
    padding: 0;
    box-sizing: border-box;
}

#menu-trigger:hover,
#hamburger-close-button:hover,
.content-close-button-img:hover {
    transform: scale(1.05); /* Common hover effect */
}

/* Specifics for div#menu-trigger (Icon for map trigger) */
#menu-trigger {
    background-image: url('/static/images/burger-menu.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: 50% 0%;
    animation: swingIcon 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s;
}

/* Specifics for img close icons */
#hamburger-close-button,
.content-close-button-img {
    object-fit: contain;
    background: none;
}

/* MODIFIED Animation for #top-right-controls */
@keyframes slideInMenuUnified { /* Renamed and modified */
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%); /* End flush with the right edge */
    }
}

/* Original swingIcon animation for the icon itself - UNCHANGED */
@keyframes swingIcon {
    0% { transform: rotate(0deg); } 15% { transform: rotate(15deg); } 30% { transform: rotate(-12deg); }
    50% { transform: rotate(8deg); } 65% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); }
    90% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); }
}
/* --- END OF MODIFIED & COMMONIZED MENU CONTROL STYLES --- */


/* General Modal Base Styles */
.modal { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); }
.modal-content { background-color: #3e352b; border-radius: 15px; padding: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); color: #eee; position: relative; max-width: 90%; max-height: 90%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; }
.close-button { position: absolute; top: 10px; right: 10px; font-size: 28px; color: #ffffff; cursor: pointer; line-height: 1; padding: 5px; background: none; border: none; -webkit-tap-highlight-color: transparent; z-index: 10; }
.close-button:hover { color: #ccc; }

/* Share Modal */
#share-modal { left: 50%; bottom: 20px; top: auto; transform: translateX(-50%) translateY(0) scale(1); width: 90%; max-width: 420px; z-index: 1000; background-color: #3e352b; border-radius: 20px; padding: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); color: #eee; display: block; height: auto; }
#share-modal:not(.hidden) { opacity: 1; pointer-events: auto; }
#share-modal .modal-content { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; max-width: 100%; max-height: none; overflow-y: visible; padding: 0; background-color: transparent; box-shadow: none; border-radius: 0; }
#share-modal h2 { font-family: 'BrokenStoned', 'Arial Black', 'Helvetica Bold', sans-serif; font-size: 1.6em; margin: 10px 0; color: #FFE19B; font-weight: normal; text-align: center; text-transform: uppercase; letter-spacing: normal; }
#share-modal .close-button { position: absolute; top: -5px; right: -5px; font-size: 28px; color: #ffffff; cursor: pointer; line-height: 1; padding: 5px; -webkit-tap-highlight-color: transparent; background: none; border: none; }
#share-modal .close-button:hover { color: #ccc; }

/* Share Modal Close Button */
.share-modal-close-btn { 
    position: absolute; 
    top: 16px; 
    right: 16px; 
    width: 28px; 
    height: 28px; 
    border: 2px solid white; 
    border-radius: 50%; 
    box-sizing: border-box; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 18px; 
    font-weight: normal; 
    color: white; 
    background-color: rgba(0, 0, 0, 0.3); 
    cursor: pointer; 
    z-index: 1310; 
    -webkit-tap-highlight-color: transparent; 
    transition: background-color 0.2s ease, transform 0.2s ease; 
}
.share-modal-close-btn:hover { 
    background-color: rgba(0, 0, 0, 0.6); 
    transform: scale(1.1); 
}

/* File Upload Section */
.file-upload-section {
    width: 100%;
    margin-bottom: 15px;
}

.upload-area {
    width: 100%;
    background-color: #232323;
    border: 2px dashed #666;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-bottom: 15px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Inline upload area for compact layout */
.upload-area.inline {
    width: 100%;
    aspect-ratio: 1;
    max-height: 87px;
    padding: 10px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}



.upload-area:hover {
    border-color: #888;
    background-color: #2a2a2a;
}

.upload-area.dragover {
    border-color: #FFBC31;
    background-color: #2a2a2a;
}

.upload-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #ccc;
}

.upload-button:hover {
    color: #fff;
}

.upload-button svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
}

.upload-button span {
    font-size: 14px;
    font-weight: 500;
}

/* Compact upload button for inline layout */
.upload-button.compact svg {
    width: 24px;
    height: 24px;
}

.upload-button.compact span {
    font-size: 11px;
    margin-top: 4px;
}

/* Upload text styling for empty state */
.upload-button.compact .upload-text {
    font-size: 0.9375em;
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
    word-wrap: break-word;
    margin-top: 6px;
}

/* Inline upload layout (icon + text on same line) */
.upload-button.upload-inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.upload-button.upload-inline .upload-text {
    margin-top: 0;
    text-align: left;
    font-size: 0.9375em;
}

.upload-button.upload-inline svg {
    width: 32px;
    height: 32px;
}

.upload-info {
    font-size: 0.75em;
    color: #888;
    margin-top: 8px;
}

/* Compact upload info for inline layout */
.upload-info.compact {
    font-size: 0.75em;
    margin-top: 4px;
}

/* File Previews */
.file-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

/* Compact layout with inline upload */
.file-previews.compact {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* Dynamic upload area sizing based on file count */
.file-previews.compact.no-files .upload-area.inline {
    grid-column: span 4;
}

.file-previews.compact.one-file .upload-area.inline {
    grid-column: span 3;
}

.file-previews.compact.two-files .upload-area.inline {
    grid-column: span 2;
}

.file-previews.compact.three-files .upload-area.inline {
    grid-column: span 1;
}



.file-preview {
    position: relative;
    width: 100%;
    height: 86px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #1a1a1a;
    border: 1px solid #333;
    cursor: grab;
    transition: all 0.2s ease;
}

.file-preview:active {
    cursor: grabbing;
}

.file-preview.dragging {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10;
    opacity: 0.8;
    cursor: grabbing;
}

.file-preview.drag-over {
    border-color: #FFBC31;
    background-color: #2a2a2a;
    transform: scale(1.02);
    transition: all 0.2s ease;
}

.file-preview img,
.file-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.file-preview .file-type-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 5;
    pointer-events: none;
}

/* Ensure file type indicators are only visible within file previews */
.file-type-indicator {
    display: none !important;
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    font-size: 10px !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

.file-preview .file-type-indicator {
    display: block !important;
}

/* Comprehensive safety: hide file type indicators everywhere except file previews */
*:not(.file-preview) .file-type-indicator,
.file-type-indicator:not(.file-preview .file-type-indicator),
#description .file-type-indicator,
.char-counter .file-type-indicator,
.validation-message .file-type-indicator,
#share-modal .file-type-indicator:not(.file-preview .file-type-indicator),
.hamburger-menu .file-type-indicator,
.generic-modal .file-type-indicator,
.sighting-detail-modal .file-type-indicator,
.notification-modal .file-type-indicator,
h1 .file-type-indicator,
h2 .file-type-indicator,
h3 .file-type-indicator,
h4 .file-type-indicator,
h5 .file-type-indicator,
h6 .file-type-indicator,
p .file-type-indicator,
span .file-type-indicator,
div .file-type-indicator:not(.file-preview .file-type-indicator),
button .file-type-indicator,
a .file-type-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.file-preview .remove-file {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.file-preview:hover .remove-file {
    opacity: 1;
}

.file-preview .remove-file:hover {
    background-color: rgba(255, 0, 0, 1);
    transform: scale(1.1);
}

/* Progress Bar */
.progress-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.progress-text {
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Upload Error State */
.file-preview.error {
    border-color: #ff4444;
}

.file-preview.error .error-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff4444;
    font-size: 10px;
    text-align: center;
    padding: 4px;
}

/* Description Area */
.description-wrapper { width: 100%; position: relative; margin-bottom: 15px; }
#description { width: 100%; height: 80px; background-color: #000000; border: 1px solid #666; border-radius: 8px; padding: 10px 10px 25px 10px; color: #eee; font-size: 0.9375em; font-family: 'Arial', sans-serif; resize: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; }
#description::placeholder { color: rgb(113, 113, 113); font-family: 'Arial', sans-serif; font-style: normal; font-size: 0.9em; }
.char-counter { position: absolute; bottom: 8px; right: 10px; font-size: 0.75em; color: #888; pointer-events: none; }

/* Share Button */
#share-pin-button { background: linear-gradient(to bottom, #916E5C, #674A42); color: #FFE19B; border: none; border-radius: 10px; font-family: 'BrokenStoned', 'Arial Black', 'Helvetica Bold', sans-serif; font-size: 1.6em; font-weight: normal; cursor: pointer; width: 100%; height: 50px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; text-transform: uppercase; letter-spacing: 1px; -webkit-tap-highlight-color: transparent; margin-top: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); text-shadow: 0px 1px 0px #000000; padding: 0; }
#share-pin-button:hover:not(:disabled) { background: linear-gradient(to bottom, #8A6755, #5F443C); }
.claw-image { width: 50px; height: auto; vertical-align: middle; filter: brightness(0.9) contrast(1.1); margin-right: 5px; justify-self: end; }
.claw-spacer { width: 50px; height: auto; justify-self: start; }
#share-pin-button .button-text { justify-self: center; align-self: center; transform: translateY(-3px); }
#share-pin-button:disabled { background: linear-gradient(to bottom, #7A5A4A, #5A3F38); color: #B8A08C; cursor: not-allowed; opacity: 0.6; }
#share-pin-button:disabled:hover { background: linear-gradient(to bottom, #7A5A4A, #5A3F38); }
#share-pin-button:disabled .button-text { opacity: 0.7; }

/* Validation Message */
.validation-message { color: #ffdddd; font-size: 0.8em; margin-top: 8px; text-align: center; width: 100%; display: block; opacity: 1; height: auto; }

/* Hamburger Menu Panel */
.hamburger-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #3a312a; z-index: 1; display: flex; flex-direction: column; padding-top: 15vh; align-items: center; opacity: 0; pointer-events: none; transition: none !important; overflow: hidden; }
.hamburger-menu:not(.hidden) { opacity: 1; pointer-events: auto; z-index: 1000; }
.hamburger-menu nav { margin-top: 30px; }
.hamburger-menu nav ul { list-style: none; padding: 0; margin: 0; text-align: center; }
.hamburger-menu nav ul li { margin-bottom: 25px; }
.hamburger-menu nav ul li a { font-family: 'BrokenStoned', 'Arial Black', 'Helvetica Bold', sans-serif; font-size: 2.2em; color: #FFE19B; text-decoration: none; text-transform: uppercase; letter-spacing: normal; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.hamburger-menu nav ul li a:hover { color: #ffffff; }
.menu-claws { position: absolute; bottom: 3vh; left: 45%; transform: translateX(-50%); width:200px; opacity: 1; z-index: 1; }
.menu-claws img { width: 100%; height: auto; display: block; filter: brightness(0.9) contrast(1.1); }

/* Generic Content Modal */
.generic-modal { z-index: 1; background-color: #3a312a; padding: 0; align-items: stretch; justify-content: flex-start; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: none !important; display: flex; flex-direction: column; overflow: hidden; }
.generic-modal .modal-content { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; padding: 80px 0 40px 0; overflow: hidden; background-color: transparent; box-shadow: none; justify-content: flex-start; }
.generic-modal h2 { font-family: 'BrokenStoned', 'Arial Black', 'Helvetica Bold', sans-serif; font-size: 2.8em; font-weight: normal; text-align: center; text-transform: uppercase; margin-bottom: 20px; letter-spacing: normal; color: #FFE19B; }
#content-modal-body { width: 100%; max-width: none; margin: 0; overflow-y: auto; padding: 0 20px; flex-grow: 1; font-size: 1em; line-height: 1.6; color: #e0e0e0; text-align: left; display: flex; flex-direction: column; align-items: center; }
#content-modal-body::-webkit-scrollbar { width: 8px; }
#content-modal-body::-webkit-scrollbar-thumb { background-color: rgba(242, 194, 121, 0.5); border-radius: 4px; }
#content-modal-body p { margin-bottom: 1em; align-self: flex-start; width: 100%; }
#content-modal-body > div { width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.joke-quote-image { display: block; width: 50px; height: auto; margin: 20px auto 30px auto; opacity: 0.8; }
.joke-text { font-family: 'BrokenStoned', 'Arial Black', 'Helvetica Bold', sans-serif; color: #FFE19B; text-align: center; text-transform: uppercase; line-height: 1.4; padding: 0 0 20px 0; width: 100%; text-shadow: 0px 1px 0px #000000; max-width: 90vw; margin: 0 auto 20px auto; font-size: 1.3em; word-break: break-word; }
@media (max-width: 480px) {
  .joke-text {
    font-size: 1.7em;
    max-width: 95vw;
    padding: 0 4vw 24px 4vw;
  }
}

/* Transition Overlay */
.transition-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #3a312a; z-index: 1050; opacity: 0; visibility: hidden; pointer-events: none; transition: none !important; }

/* Leaflet Marker / Timer Styles */
@keyframes wiggle { 0% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(5deg); } 100% { transform: rotate(0deg); } }
.wiggle-animation .leaflet-marker-icon { animation: wiggle 0.5s ease; transform-origin: 50% 100%; }
.custom-timer-icon { background: none !important; border: none !important; }
.timer-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.timer-badge { left: 25px; background-color: #F65751; color: white; font-size: 12px; font-weight: bold; border-radius: 20px; width: 36px; height: 22px; line-height: 22px; text-align: center; padding: 0; white-space: nowrap; position: absolute; z-index: 1001; display: flex; align-items: center; justify-content: center; }
.leaflet-marker-icon { cursor: pointer; }
.leaflet-div-icon { cursor: pointer; background: none; border: none; position: relative; }
.custom-timer-icon .timer-badge { position: absolute; top: -5px; right: -40px; }

/* SIGHTING DETAIL MODAL STYLES */
.sighting-detail-modal { top: 0; left: 0; width: 100%; height: 100%; max-height: 100vh; border-radius: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0; transition: opacity 0.4s ease-out; position: fixed; overflow: hidden; pointer-events: none; }
.sighting-detail-modal:not(.hidden) { opacity: 1; pointer-events: auto; }
.sighting-card { position: relative; width: 320px; height: 580px; max-height: 90vh; border-radius: 25px; overflow: hidden; background-color: #2D2D2D; color: white; display: flex; flex-direction: column; }
.sighting-detail-close-btn { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border: 2px solid white; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: normal; color: white; background-color: rgba(0, 0, 0, 0.3); cursor: pointer; z-index: 1310; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, transform 0.2s ease; }
.sighting-detail-close-btn:hover { background-color: rgba(0, 0, 0, 0.6); transform: scale(1.1); }
.sighting-detail-swiper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1301; background-color: #2D2D2D; }
.sighting-detail-swiper .swiper-wrapper { align-items: center; }
.sighting-detail-swiper .swiper-slide { display: flex; justify-content: center; align-items: center; background: #2D2D2D; overflow: hidden; height: 100%; }
.sighting-detail-swiper .swiper-slide img, .sighting-detail-swiper .swiper-slide video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; max-width: 100%; max-height: 100%; }
.sighting-detail-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(45, 45, 45, 1) 0%, rgba(45, 45, 45, 0.9) 30%, rgba(45, 45, 45, 0.6) 50%, rgba(45, 45, 45, 0) 100%); padding: 20px; padding-bottom: 30px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; box-sizing: border-box; z-index: 1305; pointer-events: none; }
.sighting-detail-overlay > * { pointer-events: auto; }
.sighting-detail-overlay .swiper-pagination { position: relative; bottom: auto; margin-bottom: 15px; width: auto !important; left: auto !important; display: flex; justify-content: center; }
.sighting-detail-overlay .swiper-pagination-bullet { width: 25px; height: 4px; border-radius: 2px; background-color: rgba(255, 255, 255, 0.5); opacity: 1; margin: 0 3px !important; transition: background-color 0.2s ease; flex-shrink: 0; cursor: pointer; }
.sighting-detail-overlay .swiper-pagination-bullet-active { background-color: white; }
.sighting-title { font-size: 24px; font-weight: normal; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-family: 'BrokenStoned', 'Arial Black', 'Helvetica Bold', sans-serif; color: #FFE19B; text-transform: uppercase; letter-spacing: normal; }
.sighting-badge { background-color: #F65751; color: white; border-radius: 50px; padding: 2px 10px; font-size: 12px; margin-left: 8px; font-family: 'Arial', sans-serif; font-weight: normal; line-height: 1.5; display: inline-block; white-space: nowrap; }
.sighting-detail-timer-top { position: absolute; top: 20px; left: 20px; z-index: 1320; font-size: 14px; padding: 3px 12px; font-weight: bold; }
#sighting-detail-timer:empty { display: none; }
.sighting-location { font-size: 13px; line-height: 1.3; margin-bottom: 12px; color: #ddd; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sighting-location .location-pin-icon { width: 14px; height: 18px; display: block; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5)); }
.sighting-description { font-size: 13px; color: #ddd; padding: 0 10px; line-height: 1.3; text-align: center; max-height: 4.0em; overflow: hidden; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; font-family: 'Arial', sans-serif; font-style: normal; }
.sighting-detail-swiper.description-only-background { background-image: url('/static/images/Only_Description.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
.sighting-detail-swiper.description-only-background #sighting-detail-media-placeholder { display: none !important; }

/* NOTIFICATION MODAL STYLES */
.notification-modal { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    max-height: 100vh; 
    border-radius: 0; 
    background-color: rgba(0, 0, 0, 0.3); 
    z-index: 1300; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0; 
    opacity: 0; 
    transition: opacity 0.4s ease-out; 
    position: fixed; 
    overflow: hidden; 
    pointer-events: none; 
}
.notification-modal:not(.hidden) { opacity: 1; pointer-events: auto; }
.notification-card { 
    position: relative; 
    width: 90vw;
    max-width: 350px;
    height: 600px;
    border-radius: 25px; 
    overflow: hidden; 
    background-color: #ffffff; 
    color: #333; 
    display: flex; 
    flex-direction: column; 
    box-sizing: border-box;
}
.notification-close-btn { 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    width: 32px; 
    height: 32px; 
    border: 2px solid #333; 
    border-radius: 50%; 
    box-sizing: border-box; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 22px; 
    font-weight: normal; 
    color: #333; 
    background-color: transparent; 
    cursor: pointer; 
    z-index: 1310; 
    -webkit-tap-highlight-color: transparent; 
    transition: background-color 0.2s ease, transform 0.2s ease; 
}
.notification-close-btn:hover { background-color: rgba(0, 0, 0, 0.1); transform: scale(1.1); }
.notification-content {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 24px 66px 24px; /* 16px + 50px extra at bottom */
    box-sizing: border-box;
    text-align: center;
}
.notification-title { 
    font-family: 'BrokenStoned', sans-serif; 
    font-size: 1.8em; 
    color: #542c17; 
    font-weight: normal; 
    text-align: center; 
    text-transform: uppercase; 
    letter-spacing: normal; 
    margin: 20px 30px 10px 30px; 
    line-height: 1.3; 
}
.notification-description { 
    font-family: 'Arial', sans-serif; 
    font-size: 1em; 
    color: #666; 
    font-weight: normal; 
    text-align: center; 
    text-transform: none; 
    letter-spacing: normal; 
    margin: 0 30px 25px 30px; 
    line-height: 1.4; 
    max-width: 280px; 
}
.telegram-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
    background-color: #0088cc;
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    border: none;
    font-family: 'Arial', sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.3);
    margin: 0 auto 15px auto;
    width: fit-content;
    min-width: 200px;
    box-sizing: border-box;
}
.telegram-section:hover {
    transform: scale(1.05);
    background-color: #0077b3;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
}
.line-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
    background-color: #00B900;
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    border: none;
    font-family: 'Arial', sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 2px 8px rgba(0, 185, 0, 0.3);
    margin: 0 auto 30px auto;
    width: fit-content;
    min-width: 200px;
    box-sizing: border-box;
}
.line-section:hover {
    transform: scale(1.05);
    background-color: #009900;
    box-shadow: 0 4px 12px rgba(0, 185, 0, 0.4);
}

.notification-alert-icon {
    width: 100%;
    height: 250px;
    object-fit: contain;
    margin: 0;
    filter: brightness(1.1);
    display: block;
}

.notification-alert-video {
    width: 100%;
    display: block;
    border-radius: 18px;
    margin-bottom: 8px;
    object-fit: contain;
    height: 180px;
    background: #FBF5E9;
}
@media (max-width: 768px) {
    .notification-alert-video {
        height: 150px;
    }
}
@media (max-width: 480px) {
    .notification-alert-video {
        height: 120px;
    }
}


/* Utility class */
.hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; position: absolute !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important; }

/* Explicitly restore display/styles for elements when NOT hidden */
.validation-message.hidden { display: none !important; } 
#share-modal:not(.hidden), .sighting-detail-modal:not(.hidden), .notification-modal:not(.hidden) { position: fixed !important; width: auto !important; height: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

#share-modal:not(.hidden) { width: 90% !important; height: auto !important; position: fixed !important; } 
.sighting-detail-modal:not(.hidden){ width: 100% !important; height: 100% !important; position: fixed !important; }
.notification-modal:not(.hidden){ width: 100% !important; height: 100% !important; position: fixed !important; }
.hamburger-menu:not(.hidden), .generic-modal:not(.hidden), .transition-overlay:not(.hidden) { display: flex !important; position: fixed !important; width: 100% !important; height: 100% !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 1000 !important; }


/* Location Permission Screen */
.location-permission-screen { display: none; flex-direction: column; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #3a312a; z-index: 10000; text-align: center; padding: 20px; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
.location-permission-screen.hidden { display: none !important; }
.location-permission-content { background-color: #ffffff; padding: 40px 30px; border-radius: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); max-width: 360px; width: 90%; display: flex; flex-direction: column; align-items: center; animation: fadeInScaleUp 0.5s ease-out forwards; }
@keyframes fadeInScaleUp { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
#location-permission-icon { width: 70px; height: auto; margin-bottom: 30px; }
.location-permission-screen h2#location-title { font-family: 'BrokenStoned', 'Arial Black', 'Helvetica Bold', sans-serif; font-size: 1.8em; color: #542c17; text-transform: uppercase; margin-top: 0; margin-bottom: 20px; font-weight: normal; letter-spacing: normal; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05); }
.location-permission-screen p#location-off-message { font-family: 'Montserrat', sans-serif; font-size: 0.9em; color: #000000; margin-bottom: 30px; max-width: 100%; line-height: 1.6; padding: 0 10px; }
.location-permission-screen button#allow-access-button { display: inline-block; padding: 12px 35px; font-family: 'Arial Black', 'Helvetica Bold', sans-serif; font-weight: normal; font-size: 1.1em; color: #000000; background-color: #e2bd68; border: none; border-radius: 30px; cursor: pointer; margin-top: 10px; text-transform: uppercase; letter-spacing: 1px; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 3px 8px rgba(0,0,0, 0.1); }
.location-permission-screen button#allow-access-button:hover { background-color: #b58e3c; transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0, 0.15); }
.location-permission-screen button#allow-access-button:active { transform: translateY(0px); background-color: #fbcd70; box-shadow: 0 2px 5px rgba(0,0,0, 0.1); }
.location-access-button { padding: 12px 30px; font-size: 1.1em; font-weight: 500; color: #3a312a; background-color: #f2c279; border: none; border-radius: 30px; cursor: pointer; margin-top: 20px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(242, 194, 121, 0.4); transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; }
.location-access-button:hover { background-color: #eeb765; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(242, 194, 121, 0.5); }



/* Recenter Map Button Styles */
#recenter-map-button, #trash-button {
    position: absolute;
    bottom: 25px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #bbb;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 24px;
    color: #333;
    line-height: 42px;
}
#recenter-map-button {
    right: 15px;
    bottom: 25px;
    background-image: url('/static/images/scope.png');
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}
#trash-button {
    left: 15px;
    bottom: 25px;
    background-image: url('/static/images/trash-can.png');
    background-size: 45%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Ensure map zoom controls are above overlay */
.leaflet-control-zoom {
    z-index: 10 !important;
}
.leaflet-control-zoom a {
    z-index: 10 !important;
}

/* Bell Button Styles */
#bell-button { 
    position: absolute; 
    bottom: 80px; 
    right: 15px; 
    z-index: 1; 
    background-color: rgba(255, 255, 255, 0.9); 
    border: 1px solid #bbb; 
    border-radius: 50%; 
    width: 44px; 
    height: 44px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); 
    -webkit-tap-highlight-color: transparent; 
    padding: 0; 
    transition: background-color 0.2s ease, box-shadow 0.2s ease; 
    font-size: 20px; 
    color: #333; 
    line-height: 42px; 
    background-image: url('/static/images/bell.gif');
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}
#bell-button:hover { background-color: #f0f0f0; color: #000; filter: brightness(0.8) contrast(1.2); background-blend-mode: multiply; }
#bell-button:active { background-color: #e0e0e0; box-shadow: 0 1px 3px rgba(0,0,0,0.15); filter: brightness(0.7) contrast(1.3); background-blend-mode: multiply; }

/* About Button Styles */
#about-button { 
    position: absolute; 
    bottom: 135px; 
    right: 15px; 
    z-index: 1; 
    background-color: rgba(255, 255, 255, 0.9); 
    border: 1px solid #bbb; 
    border-radius: 50%; 
    width: 44px; 
    height: 44px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); 
    -webkit-tap-highlight-color: transparent; 
    padding: 0; 
    transition: background-color 0.2s ease, box-shadow 0.2s ease; 
    background-image: url('/static/images/question-mark.png');
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}
#about-button:hover { background-color: #f0f0f0; color: #000; filter: brightness(0.8) contrast(1.2); background-blend-mode: multiply; }
#about-button:active { background-color: #e0e0e0; box-shadow: 0 1px 3px rgba(0,0,0,0.15); filter: brightness(0.7) contrast(1.3); background-blend-mode: multiply; }

#trash-button {
    position: absolute;
    bottom: 25px;
    left: 15px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #bbb;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    background-image: url('/static/images/trash-can.png');
    background-size: 45%;
    background-position: center;
    background-repeat: no-repeat;
}
#trash-button:hover { background-color: #f0f0f0; color: #000; filter: brightness(0.8) contrast(1.2); background-blend-mode: multiply; }
#trash-button:active { background-color: #e0e0e0; box-shadow: 0 1px 3px rgba(0,0,0,0.15); filter: brightness(0.7) contrast(1.3); background-blend-mode: multiply; }
/* Cooldown Toast Styles */
.cooldown-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    font-family: 'BrokenStoned', sans-serif;
    font-size: 16px;
    text-align: center;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cooldown-toast.show {
    opacity: 1;
}

/* DELETE CONFIRMATION MODAL STYLES */
.delete-confirmation-modal { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    max-height: 100vh; 
    border-radius: 0; 
    background-color: rgba(0, 0, 0, 0.3); 
    z-index: 1300; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0; 
    opacity: 0; 
    transition: opacity 0.4s ease-out; 
    position: fixed; 
    overflow: hidden; 
    pointer-events: none; 
}
.delete-confirmation-modal:not(.hidden) { opacity: 1; pointer-events: auto; }
.delete-confirmation-card { 
    position: relative; 
    width: 320px; 
    height: 240px; /* was 200px, increase for more space */
    max-height: 90vh; 
    border-radius: 25px; 
    overflow: hidden; 
    background-color: #ffffff; 
    color: #333; 
    display: flex; 
    flex-direction: column; 
    padding-bottom: 24px; /* add extra bottom padding */
}
.delete-confirmation-close-btn { 
    position: absolute; 
    top: 8px; /* move higher up, was 20px */
    right: 20px;
    width: 32px; 
    height: 32px; 
    border: 2px solid #333; 
    border-radius: 50%; 
    box-sizing: border-box; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 22px; 
    font-weight: normal; 
    color: #333; 
    background-color: transparent; 
    cursor: pointer; 
    z-index: 1310; 
    -webkit-tap-highlight-color: transparent; 
    transition: background-color 0.2s ease, transform 0.2s ease; 
}
.delete-confirmation-close-btn:hover { background-color: rgba(0, 0, 0, 0.1); transform: scale(1.1); }
.delete-confirmation-content { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding-top: 24px; /* add more top padding to offset close button overlap */
    box-sizing: border-box; 
    text-align: center; 
}
.delete-confirmation-title { 
    font-family: 'BrokenStoned', sans-serif; 
    font-size: 1.8em; 
    color: #542c17; 
    font-weight: normal; 
    text-align: center; 
    text-transform: uppercase; 
    letter-spacing: normal; 
    margin: 0 0 20px 0; 
    line-height: 1.3; 
}
.delete-confirmation-description { 
    font-family: 'Arial', sans-serif; 
    font-size: 1em; 
    color: #666; 
    font-weight: normal; 
    text-align: center; 
    text-transform: none; 
    letter-spacing: normal; 
    margin: 0 0 30px 0; 
    line-height: 1.4; 
    max-width: 280px; 
}
.delete-confirmation-buttons { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: center;
    gap: 20px; 
    width: 100%;
}
.confirm-delete-btn { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    transition: transform 0.2s ease; 
    background-color: #dc3545;
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    border: none;
    font-family: 'Arial', sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    min-width: 100px;
    box-sizing: border-box;
}
.confirm-delete-btn:hover { 
    transform: scale(1.05); 
    background-color: #c82333;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}
.cancel-delete-link { 
    font-family: 'Arial', sans-serif; 
    font-size: 1em; 
    color: #666; 
    font-weight: 500; 
    text-transform: none; 
    letter-spacing: normal; 
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}
.cancel-delete-link:hover { 
    color: #333;
}

@media (max-width: 768px) {
    #loader-wrapper { background-size: cover; }

    /* Menu controls maintain consistent size and position */
    /* Removed menu-control-branch scaling to keep consistent size */

    .menu-claws {  width: 100px; left: 20%;  bottom: -10px;}
    .menu-claws img { width: 160%; height: auto; filter: brightness(0.9) contrast(1.1);  bottom: -10px; }
    #share-modal { max-width: 400px; }
    
    /* File upload responsive */
    .upload-area { padding: 15px; }
    .upload-button svg { width: 28px; height: 28px; }
    .upload-button span { font-size: 13px; }
    .upload-button.compact .upload-text { font-size: 0.9em; }
    .upload-button.upload-inline .upload-text { font-size: 0.9em; }
    .upload-info { font-size: 0.75em; }
    .file-previews { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
    .file-preview .remove-file { width: 18px; height: 18px; font-size: 11px; }
    .file-preview .file-type-indicator { font-size: 9px; padding: 1px 3px; }
    
    #description { height: 70px; font-size: 0.9em; }
    #share-pin-button { height: 45px; font-size: 1.4em; }
    .claw-image { width: 45px; }
    .claw-spacer { width: 45px; }
    .sighting-card { width: 100%; height: 75vh; max-height: 75vh; margin: 20px 10px 0px 10px; overflow: hidden; }
    .sighting-title { font-size: 20px; }
    .sighting-detail-timer-top { top: 15px; left: 15px; font-size: 16px; padding: 4px 12px; font-weight: bold; }
    .sighting-location { font-size: 14px; }
    .sighting-description { font-size: 14px; max-height: 4.0em; }
    .sighting-detail-close-btn { top: 15px; width: 30px; height: 30px; font-size: 20px;}
    .share-modal-close-btn { top: 16px; right: 16px; width: 26px; height: 26px; font-size: 16px; }

    .notification-card { width: 100%; height: 350px; max-height: 350px; margin: 20px 10px 0px 10px; overflow: hidden; }
    .notification-title { font-size: 1.6em; margin-bottom: 30px; }
    .notification-description { font-size: 1em; margin-bottom: 30px; }
    .telegram-icon { width: 70px; height: 70px; }
    .telegram-text { font-size: 1.2em; }
    .notification-close-btn { top: 15px; width: 30px; height: 30px; font-size: 20px; }

    #recenter-map-button {
        right: 10px;
        bottom: 20px;
        width: 40px;
        height: 40px;
        font-size: 20px;
        line-height: 38px;
    }

    #bell-button {
        width: 40px;
        height: 40px;
        bottom: 75px; /* 20px + 40px + 15px gap */
        right: 10px;
        font-size: 18px;
        line-height: 38px;
    }

    #about-button {
        width: 40px;
        height: 40px;
        bottom: 130px; /* 75px + 40px + 15px gap */
        right: 10px;
        font-size: 18px;
        line-height: 38px;
    }

    #trash-button {
        left: 10px;
        bottom: 20px;
        width: 40px;
        height: 40px;
        font-size: 18px;
        line-height: 38px;
    }

    /* Cooldown toast responsive */
    .cooldown-toast {
        font-size: 14px;
        padding: 10px 20px;
        white-space: normal;
        max-width: 280px;
        width: auto;
    }
}

@media (max-width: 480px) {
    /* Menu controls maintain consistent size and position */
    /* Removed menu-control-branch scaling to keep consistent size */

    #share-modal { width: 95%; max-width: none; padding: 15px; bottom: 15px; }
    #share-modal h2 { font-size: 1.4em; margin-bottom: 15;}
    
    /* File upload responsive */
    .upload-area { padding: 12px; }
    .upload-button svg { width: 24px; height: 24px; }
    .upload-button span { font-size: 12px; }
    .upload-button.compact .upload-text { font-size: 0.85em; }
    .upload-button.upload-inline .upload-text { font-size: 0.85em; }
    .upload-info { font-size: 0.75em; }
    .file-previews { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; }
    .file-preview .remove-file { width: 16px; height: 16px; font-size: 10px; }
    .file-preview .file-type-indicator { font-size: 8px; padding: 1px 2px; }
    
    #description { height: 70px; font-size: 0.9em; }
    #share-pin-button { height: 45px; font-size: 1.4em; }
    .claw-image { width: 45px; }
    .claw-spacer { width: 45px; }
    .hamburger-menu nav ul li a { font-size: 2em; }
    .menu-claws { width: 150px; bottom: 3vh; }
    .sighting-card { width: 100%; height: 70vh; max-height: 70vh; margin: 15px 10px 0px 10px; overflow: hidden; border-radius: 20px; }
    .sighting-detail-overlay { height: 45%; padding: 15px 15px 20px 15px; padding-bottom: 20px; }
    .sighting-title { font-size: 18px; margin-bottom: 10px;}
    .sighting-detail-timer-top { top: 12px; left: 12px; font-size: 18px; padding: 4px 10px; font-weight: bold; }
    .sighting-badge { font-size: 11px; padding: 1px 8px; margin-left: 6px;}
    .sighting-location { font-size: 14px; gap: 4px; }
    .sighting-location .location-pin-icon { width: 12px; height: 16px; }
    .sighting-description { font-size: 14px; max-height: 4.0em; }
    .sighting-detail-overlay .swiper-pagination-bullet { width: 20px; height: 3px;}
    .sighting-detail-close-btn { top: 15px; width: 28px; height: 28px; font-size: 18px;}
    .share-modal-close-btn { top: 16px; right: 16px; width: 24px; height: 24px; font-size: 14px; }

    .notification-card {
        width: 100% !important;
        height: 70vh !important;
        max-height: 70vh !important;
        margin: 15px 10px 0px 10px !important;
        overflow: hidden !important;
        border-radius: 20px !important;
    }
    .notification-title { font-size: 1.4em; margin-bottom: 25px; }
    .notification-description { font-size: 0.9em; margin-bottom: 25px; }
    .telegram-icon { width: 60px; height: 60px; }
    .telegram-text { font-size: 1.1em; }
    .notification-close-btn { top: 15px; width: 28px; height: 28px; font-size: 18px; }

    #recenter-map-button {
        right: 10px;
        bottom: 15px;
        width: 38px;
        height: 38px;
        font-size: 18px;
        line-height: 36px;
    }

    #bell-button { bottom: 68px; right: 10px; width: 38px; height: 38px; font-size: 16px; line-height: 36px; }

    #about-button { bottom: 121px; right: 10px; width: 38px; height: 38px; font-size: 16px; line-height: 36px; }
    #trash-button { bottom: 15px; left: 10px; width: 38px; height: 38px; font-size: 16px; line-height: 36px; }

    /* Cooldown toast responsive for small screens */
    .cooldown-toast {
        font-size: 13px;
        padding: 8px 16px;
        max-width: 240px;
    }
}

/* Move Leaflet attribution from bottom right to bottom left */
.leaflet-control-attribution,
.leaflet-control-attribution.leaflet-control,
.leaflet-control.leaflet-control-attribution {
    right: auto !important;
    left: 0 !important;
    position: absolute !important;
}

/* Also target any attribution elements that might have different class names */
[class*="attribution"],
[class*="Attribution"] {
    right: auto !important;
    left: 0 !important;
    position: absolute !important;
}

.notification-modal {
    background-color: rgba(0, 0, 0, 0.3);
}
.notification-card {
    background: #FBF5E9 !important;
    padding: 12px 12px 8px 12px !important;
    max-height: 480px;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.notification-content {
    padding: 0 !important;
}
.telegram-section, .line-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    font-family: 'BrokenStoned', 'Arial Black', 'Helvetica Bold', sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    margin: 0 0 12px 0;
    height: 45px;
    padding: 0 18px;
    transition: background 0.2s, box-shadow 0.2s;
    width: max-content;
    min-width: 180px;
    max-width: 100%;
}
.telegram-section {
    background: linear-gradient(to bottom, #0088cc, #006fa1);
    color: #fff;
}
.line-section {
    background: linear-gradient(to bottom, #00B900, #008f00);
    color: #fff;
}
.telegram-icon, .line-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
    margin-right: 10px;
}
.telegram-text, .line-text {
    font-family: 'BrokenStoned', 'Arial Black', 'Helvetica Bold', sans-serif;
    font-size: 1.1em;
    color: #fff;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    text-align: left;
    line-height: 1.2;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.about-section {
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}
.about-section:last-child {
  border-bottom: none;
}
.about-section h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.2em;
  color: #3c372a;
}
.about-section-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 12px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.about-contact-form {
  margin-top: 24px;
  padding: 16px 0 0 0;
  border-top: 1px solid #e0e0e0;
}
.about-contact-form h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.1em;
  color: #3c372a;
}
.about-contact-form label {
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}
.about-contact-form select,
.about-contact-form textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px;
  margin-bottom: 8px;
  font-size: 1em;
  background: #faf9f6;
}
.about-contact-form button[type="submit"] {
  background: #3c372a;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 18px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}
.about-contact-form button[type="submit"]:hover {
  background: #5a4e36;
}