/* ================================
   MOBILE EXPLORE PANEL
================================ */

.mobile-explore-panel{position:fixed;top:60px;left:0;width:100vw;max-width:100%;max-height:80vh;overflow-y:auto;background:#f5f1e8;border-radius:0;box-shadow:0 6px 18px #00000040;z-index:11000;opacity:0;transform:scaleY(.98);transition:opacity .25s ease,transform .25s ease;pointer-events:none;padding-bottom:20px}
.mobile-explore-panel.show{opacity:1;transform:scaleY(1);pointer-events:auto}

.mobile-explore-backdrop{position:fixed;top:60px;left:0;width:100vw;height:100vh;background:#0006;z-index:10999;opacity:0;transition:opacity .25s ease;pointer-events:none}
.mobile-explore-backdrop.show{opacity:1;pointer-events:auto}


/* ================================
   HEADER
================================ */

.mobile-explore-header{position:sticky;top:0;display:flex;align-items:center;gap:8px;padding:10px 12px;background:#f5f1e8;border-bottom:1px solid #e0dcd2;z-index:10}
body.search-active .mobile-explore-header{background:#fff}

.close-explore{font-size:16px;background:#fff;border:1px solid #ddd;border-radius:6px;padding:4px 8px}


/* ================================
   INPUT
================================ */

.explore-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #d8cfc0;font-size:15px;background:#fff}
.explore-input:focus{border-color:#b89b72;box-shadow:0 0 0 2px #b89b7233;outline:none}


/* ================================
   RESULTS
================================ */

.explore-search-results{display:none;padding:10px 14px;opacity:0;transform:translateY(-6px);transition:all .25s ease;position:relative;z-index:9999}
.explore-search-results.has-results{display:block;opacity:1;transform:translateY(0)}

.explore-search-results:empty::before{content:"Start typing to explore Stockholm…";display:block;padding:20px;text-align:center;color:#8a7a64;font-style:italic}

.explore-search-results .search-result{display:flex;align-items:center;gap:12px;padding:10px;background:#fff;border-radius:10px;margin-bottom:8px;box-shadow:0 2px 6px #0000000d;text-decoration:none}
.explore-search-results .search-result img{width:80px;height:60px;border-radius:6px;object-fit:cover}
.explore-search-results .search-result span{font-size:15px;color:#2c2c2c}
.explore-search-results .search-result:active{transform:scale(.98)}

.explore-search-results .no-results{text-align:center;padding:20px;font-size:14px;color:#777}


/* ================================
   SECTIONS
================================ */

.explore-section{padding:10px 14px;transition:opacity .2s ease}

.explore-heading{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8a7a64;margin-bottom:8px}
.explore-heading::before{content:"— ";opacity:.4}


/* ================================
   POPULAR
================================ */

.explore-popular{padding:12px 14px;border-bottom:1px solid #e0dcd2}
.explore-popular-list a{display:block;padding:12px;margin-bottom:8px;background:#fff;border-radius:10px;text-decoration:none;color:#2c2c2c;box-shadow:0 2px 6px #0000000d}
.explore-popular-list a:hover{background:#f3eee6}


/* ================================
   MENU
================================ */

.mobile-explore-menu{padding:8px 0 16px;border-top:1px solid #e0dcd2}

.explore-nav{padding:0 12px;margin:0;list-style:none}
.explore-nav > li{margin-bottom:8px;border-bottom:1px solid #eee}

.menu-item-wrapper{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#fff;border-radius:10px;transition:.2s}
.menu-item-wrapper:hover{background:#f0ebe2}

.menu-link{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500;color:#2b2b2b;text-decoration:none}


/* Icons */
.explore-nav > li:nth-child(1) .menu-link::before{content:"🏠 "}
.explore-nav > li:nth-child(2) .menu-link::before{content:"🏛️ "}
.explore-nav > li:nth-child(3) .menu-link::before{content:"🌳 "}
.explore-nav > li:nth-child(4) .menu-link::before{content:"⛪ "}
.explore-nav > li:nth-child(5) .menu-link::before{content:"⭐ "}
.explore-nav > li:nth-child(6) .menu-link::before{content:"📖 "}


/* ================================
   SEARCH STATE
================================ */

body.search-active .explore-section{opacity:.15;pointer-events:none}
body.search-active .mobile-explore-menu{opacity:.2;pointer-events:none}
body.search-active .explore-popular{opacity:.2}
body.search-active .explore-search-results{opacity:1;pointer-events:auto}
body.search-active .close-explore{display:none}