<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <title>InkRadar — Find Tattoo Artists, Studios & Flash Near You</title>
  <meta name="description" content="Discover tattoo studios, artists, and available flash designs near you. Browse portfolios, compare styles, and find your next tattoo with InkRadar.">
  <meta name="keywords" content="tattoo, tattoo artist, tattoo studio, tattoo shop, flash tattoo, tattoo portfolio, find tattoo artist, tattoo near me, tatoueur, tatoeage, tattoo Belgium, tattoo France, tattoo Netherlands, realism tattoo, blackwork, fine line tattoo, traditional tattoo, neo traditional, Japanese tattoo, watercolor tattoo, geometric tattoo, dotwork, trash polka, InkRadar">
  <meta name="author" content="InkRadar">
  <meta name="theme-color" content="#0d0d0d">
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
  <meta name="msvalidate.01" content="41A258EC859D1472ED43B43D792EBA37">
  <link rel="canonical" href="https://inkradar.com/">
  <link rel="alternate" hreflang="en" href="https://inkradar.com/">
  <link rel="alternate" hreflang="fr" href="https://inkradar.com/?lang=fr">
  <link rel="alternate" hreflang="nl" href="https://inkradar.com/?lang=nl">
  <link rel="alternate" hreflang="x-default" href="https://inkradar.com/">

  <!-- Favicon & PWA -->
  <link rel="icon" type="image/png" sizes="32x32" href="/img/Inkradar_Logo.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
  <link rel="manifest" href="/manifest.json">

  <!-- Open Graph (Facebook, WhatsApp, LinkedIn) -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="InkRadar — Europe's Tattoo Community, in One Place">
  <meta property="og:description" content="Discover tattoo studios, artists, and available flash designs near you. Browse portfolios, compare styles, and find your next tattoo with InkRadar.">
  <meta property="og:image" content="https://inkradar.com/img/Inkradar_Logo.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="InkRadar — Europe's tattoo community, in one place">
  <meta property="og:url" content="https://inkradar.com">
  <meta property="og:site_name" content="InkRadar">
  <meta property="og:locale" content="en_US">
  <meta property="og:locale:alternate" content="fr_FR">
  <meta property="og:locale:alternate" content="nl_NL">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="InkRadar — Europe's Tattoo Community, in One Place">
  <meta name="twitter:description" content="Discover tattoo studios, artists, and available flash designs near you. Browse portfolios, compare styles, and find your next tattoo with InkRadar.">
  <meta name="twitter:image" content="https://inkradar.com/img/Inkradar_Logo.png">
  <meta name="twitter:image:alt" content="InkRadar — Europe's tattoo community, in one place">

  <!-- Structured Data: WebSite + SearchAction -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebSite",
        "@id": "https://inkradar.com/#website",
        "url": "https://inkradar.eu",
        "name": "InkRadar",
        "description": "Discover tattoo studios, artists, and available flash designs near you. Browse portfolios, compare styles, and find your next tattoo.",
        "inLanguage": ["en", "fr", "nl"],
        "potentialAction": {
          "@type": "SearchAction",
          "target": {
            "@type": "EntryPoint",
            "urlTemplate": "https://inkradar.com/?q={search_term_string}"
          },
          "query-input": "required name=search_term_string"
        }
      },
      {
        "@type": "Organization",
        "@id": "https://inkradar.com/#organization",
        "name": "InkRadar",
        "url": "https://inkradar.eu",
        "logo": {
          "@type": "ImageObject",
          "url": "https://inkradar.com/img/Inkradar_Logo.png",
          "width": 512,
          "height": 512
        },
        "description": "InkRadar is a tattoo discovery platform connecting people with tattoo artists, studios, and flash designs across Europe.",
        "sameAs": []
      },
      {
        "@type": "WebApplication",
        "@id": "https://inkradar.com/#app",
        "name": "InkRadar",
        "url": "https://inkradar.eu",
        "applicationCategory": "BusinessApplication",
        "operatingSystem": "All",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "EUR"
        },
        "description": "Find tattoo artists, browse portfolios, discover flash designs, and connect with tattoo studios near you."
      }
    ]
  }
  </script>

  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
  <link rel="stylesheet" href="/styles.css?v=50" />
  <style>
    /* INKRADAR DARK & GOLD THEME — inline to survive Vite build */
    html,body,button,input,select,textarea,h1,h2,h3,h4,h5,h6,p,label,span,a{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important}
    html,body,#root{background:#0d0d0d!important;color:#f0e8d8!important}
    .topbar{background:rgba(13,13,13,0.95)!important;border-bottom:none!important;backdrop-filter:blur(12px)!important}
    .topbar button,.menu-toggle-btn,#accountToggleBtn{color:#f0e8d8!important;background:transparent!important;border:none!important}
    .menu-toggle-btn:hover,#accountToggleBtn:hover{background:rgba(201,168,76,0.15)!important;border-color:#c9a84c!important}
    .language-switcher select{background:#161616!important;color:#f0e8d8!important;border-color:rgba(201,168,76,0.3)!important}
    .nav-menu-list{background:#161616!important;border:1px solid rgba(201,168,76,0.12)!important}
    .nav-menu-list button{color:#f0e8d8!important;background:#161616!important;border:1px solid rgba(201,168,76,0.25)!important;border-radius:2px!important}
    .nav-menu-list button:hover{background:rgba(201,168,76,0.15)!important;color:#d4b965!important}
    .brand-stage{background:transparent!important;border:none!important;box-shadow:none!important}
    #brandName{color:#c9a84c!important;text-shadow:0 2px 12px rgba(201,168,76,0.3)!important}
    .brand-tagline{color:#8a7e6a!important;letter-spacing:0.12em!important;text-transform:uppercase!important;font-size:0.72rem!important}
    .brand-divider{background:linear-gradient(90deg,transparent,#c9a84c,transparent)!important}
    #topbarBrandMini,#topbarBrandText{color:#c9a84c!important}
    .search-box,#searchBox{background:#161616!important;border:1px solid rgba(201,168,76,0.12)!important;box-shadow:0 20px 60px rgba(0,0,0,0.5)!important;color:#f0e8d8!important}
    .home-search-intro-text{color:#d4b965!important;font-weight:600!important}
    .home-search-intro-subtext,.home-range-label,.form-help-text,#homeShopSearchLabel,#homeShopNameSearchHelp{color:#8a7e6a!important}
    input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="url"],select,textarea{background:#111111!important;color:#f0e8d8!important;border:1px solid rgba(201,168,76,0.3)!important;caret-color:#c9a84c!important}
    input::placeholder,textarea::placeholder{color:#8a7e6a!important}
    input:focus,select:focus,textarea:focus{border-color:#c9a84c!important;box-shadow:0 0 0 2px rgba(201,168,76,0.15)!important}
    button.secondary-btn,#forgotPasswordBtn,#studioRegistrationBtn,.style-actions button,#loadMoreBtn,.social-auth-btn,.thread-back-btn,#backToSearchBtn,#backToResultsBtn,#authCloseBtn,#registerCancelBtn,#editCancelBtn,#resetCancelBtn{background:#161616!important;color:#f0e8d8!important;border:1px solid rgba(201,168,76,0.3)!important}
    button.secondary-btn:hover{background:rgba(201,168,76,0.15)!important;border-color:#c9a84c!important;color:#d4b965!important}
    #searchStudiosBtn,.home-premium-btn-accent,.profile-actions button:not(.secondary-btn):not(.small-delete-btn){background:linear-gradient(135deg,#c9a84c,#a8893a)!important;color:#0d0d0d!important;border:none!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:0.06em!important;box-shadow:0 4px 20px rgba(201,168,76,0.3)!important}
    #searchStudiosBtn:hover,.home-premium-btn-accent:hover{background:linear-gradient(135deg,#d4b965,#c9a84c)!important;box-shadow:0 6px 28px rgba(201,168,76,0.45)!important}
    .home-range-btn{background:#111111!important;color:#8a7e6a!important;border:1px solid rgba(201,168,76,0.3)!important}
    .home-range-btn.active,.home-range-btn[aria-pressed="true"]{background-color:rgba(201,168,76,0.15)!important;background-image:none!important;color:#d4b965!important;border-color:#c9a84c!important;font-weight:700!important}
    #searchHeroBanner{border-bottom:2px solid rgba(201,168,76,0.12)!important}
    #searchHeroTitle{color:#c9a84c!important;text-shadow:0 4px 20px rgba(0,0,0,0.7)!important;font-size:2rem!important;text-transform:uppercase!important;letter-spacing:0.08em!important}
    .home-discovery-count{color:#8a7e6a!important}
    .home-community-proof{background:#161616!important;border:1px solid rgba(201,168,76,0.3)!important;color:#f0e8d8!important}
    .home-community-proof .home-explainer-eyebrow{color:#c9a84c!important}
    .home-community-proof strong{color:#f0e8d8!important}
    .home-spotlight-actions .secondary-btn{background:#111111!important;border-color:rgba(201,168,76,0.3)!important;color:#f0e8d8!important}
    .home-spotlight-actions .secondary-btn.active{background:rgba(201,168,76,0.15)!important;border-color:#c9a84c!important;color:#d4b965!important}
    #homeLatestTitle{color:#d4b965!important}
    .home-latest-card{border:1px solid rgba(201,168,76,0.3)!important;border-radius:12px!important;overflow:hidden!important}
    .home-cta-section{background:#161616!important;border:1px solid rgba(201,168,76,0.3)!important;box-shadow:0 16px 44px rgba(0,0,0,0.4)!important}
    .home-cta-section h3{color:#c9a84c!important}
    .home-cta-section article{background:#111111!important;border-color:rgba(201,168,76,0.3)!important}
    .home-cta-section strong{color:#d4b965!important}
    .home-cta-section p{color:#8a7e6a!important}
    .app-feed-tabs{background:rgba(13,13,13,0.96)!important;border-top:1px solid rgba(201,168,76,0.12)!important;backdrop-filter:blur(12px)!important}
    .app-feed-tab{color:#8a7e6a!important;background:transparent!important}
    .app-feed-tab.active{color:#c9a84c!important}
    .app-feed-tab:hover{color:#d4b965!important}
    #appBackShell{background:transparent!important}
    #appBackBtn{color:#c9a84c!important;background:transparent!important;border:none!important}
    .inkradar-verified-badge{background:rgba(201,168,76,0.12)!important;border-color:rgba(201,168,76,0.25)!important;color:#c9a84c!important}
    .flash-want-btn{background:linear-gradient(135deg,#c9a84c,#a8893a)!important;color:#0d0d0d!important;border:none!important}
    .flash-want-btn.sent{background:#161616!important;color:#c9a84c!important;border:1px solid rgba(201,168,76,0.3)!important}
    .home-counter-number{color:#c9a84c!important}
    .profile-box,#profileBox,#registerBox,#editBox,#adminClaimsBox,#feedBox,#discoverBox,#flashBox,#favoritesBox,#collectionBox,#messagesBox,#notificationsBox,#resetPasswordBox{background:#0d0d0d!important;color:#f0e8d8!important}
    /* Messages dark/gold theme */
    .messages-layout{gap:16px!important}
    .thread-list-column,.thread-view-column{background:#0d0d0d!important;border-color:rgba(201,168,76,0.12)!important;box-shadow:none!important;backdrop-filter:none!important;border-radius:0!important}
    .thread-list-heading{color:#c9a84c!important;font-size:0.75rem!important;letter-spacing:0.12em!important}
    .thread-card{background:#161616!important;border:1px solid rgba(201,168,76,0.18)!important;border-radius:0!important;color:#f0e8d8!important}
    .thread-card:hover{background:rgba(201,168,76,0.08)!important;border-color:rgba(201,168,76,0.35)!important}
    .thread-card.active{background:rgba(201,168,76,0.12)!important;border-color:#c9a84c!important;color:#f0e8d8!important}
    .thread-title-badge{background:rgba(201,168,76,0.12)!important;color:#c9a84c!important;border-radius:0!important}
    .thread-card-meta,.thread-card-preview,.thread-header-meta,.message-card-meta,.message-empty-state{color:#8a7e6a!important}
    .thread-badge{background:#c9a84c!important;color:#0d0d0d!important;border-radius:0!important;font-weight:700!important}
    .thread-seen-mark{background:rgba(201,168,76,0.18)!important;color:#c9a84c!important}
    .thread-header{border-bottom:1px solid rgba(201,168,76,0.12)!important}
    .thread-back-btn{color:#c9a84c!important;background:transparent!important;border:1px solid rgba(201,168,76,0.25)!important;border-radius:0!important}
    .thread-back-btn:hover{background:rgba(201,168,76,0.1)!important}
    .thread-message{border-radius:0!important}
    .thread-message.mine{background:#1a1508!important;border:1px solid rgba(201,168,76,0.2)!important;color:#f0e8d8!important}
    .thread-message.theirs{background:#161616!important;border:1px solid rgba(201,168,76,0.1)!important;color:#e8dcc8!important}
    .thread-message-meta{color:#8a7e6a!important}
    .thread-message-body{color:#f0e8d8!important}
    .message-composer-card{background:#161616!important;border:1px solid rgba(201,168,76,0.2)!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}
    .message-composer-card h3{color:#c9a84c!important}
    .message-composer-card textarea{background:#111!important;color:#f0e8d8!important;border:1px solid rgba(201,168,76,0.2)!important;border-radius:0!important}
    .message-composer-card button{background:linear-gradient(135deg,#c9a84c,#a8893a)!important;color:#0d0d0d!important;border:none!important;border-radius:0!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:0.06em!important}
    .composer-attach-row{color:#8a7e6a!important}
    .paperclip-btn{color:#c9a84c!important;background:#161616!important;border:1px solid rgba(201,168,76,0.25)!important;border-radius:0!important}
    .file-chip{color:#8a7e6a!important}
    .messages-intro{color:#8a7e6a!important}
    .shop-client-hero-card,.artist-client-hero-card{background:#161616!important;border:1px solid rgba(201,168,76,0.12)!important;border-radius:16px!important}
    .shop-client-hero-copy h2,.artist-client-hero-copy h2{color:#c9a84c!important}
    .shop-client-style-line,.artist-client-style-line{color:#8a7e6a!important}
    .artist-local-tabs{background:#161616!important;border:none!important;border-bottom:1px solid rgba(201,168,76,0.15)!important}
    .artist-local-tab{color:#8a7e6a!important;background:transparent!important;border:none!important;border-bottom:3px solid transparent!important}
    .artist-local-tab.active{background:transparent!important;color:#c9a84c!important;border-bottom:3px solid #c9a84c!important}
    .artist-local-tab:hover{color:#d4b965!important}
    .artist-local-tab-text{color:inherit!important}
    .shop-client-tabs .artist-local-tab-text,.shop-owner-tabs .artist-local-tab-text,.guest-shop-tabs .artist-local-tab-text,.artist-client-tabs .artist-local-tab-text,.artist-dashboard-tabs .artist-local-tab-text{color:inherit!important}
    .feed-post,.flash-post{background:#161616!important;border:1px solid rgba(201,168,76,0.12)!important;color:#f0e8d8!important}
    .artist-flash-card{background:#161616!important;border:1px solid rgba(201,168,76,0.15)!important;border-radius:2px!important;color:#f0e8d8!important}
    .artist-flash-card-copy p{color:#c8baa8!important}
    .artist-flash-price-badge{background:rgba(201,168,76,0.15)!important;color:#d4b965!important;border:1px solid rgba(201,168,76,0.3)!important;border-radius:2px!important}
    .artist-flash-card-image-wrap{border-radius:2px!important}
    .feed-post-shop-name,.feed-post-shop-name-overlay{color:#c9a84c!important}
    .results-box,#resultsBox{background:#0d0d0d!important;color:#f0e8d8!important}
    .tattoo-card,.search-result-card{background:#161616!important;border:1px solid rgba(201,168,76,0.12)!important;color:#f0e8d8!important}
    .tattoo-card:hover,.search-result-card:hover{border-color:rgba(201,168,76,0.3)!important;box-shadow:0 4px 20px rgba(201,168,76,0.1)!important}
    .search-result-body h2{color:#d4b965!important}
    .search-result-primary,.search-result-styles{color:#8a7e6a!important}
    .auth-box,#authBox{background:#161616!important;border:1px solid rgba(201,168,76,0.3)!important;color:#f0e8d8!important}
    .auth-mode-btn.active{background-color:rgba(201,168,76,0.15)!important;background-image:none!important;color:#d4b965!important;border-color:#c9a84c!important}
    .auth-role-btn.active{background:rgba(201,168,76,0.15)!important;border-color:#c9a84c!important;color:#d4b965!important}
    .app-toast{background:#161616!important;border:1px solid rgba(201,168,76,0.3)!important;color:#f0e8d8!important}
    #messageModal{background:rgba(0,0,0,0.85)!important;border:none!important;color:#f0e8d8!important}
    #messageModal .modal-box{background:#161616!important;border:1px solid rgba(201,168,76,0.3)!important}
    .skeleton-card{background:#161616!important}
    .skeleton-image,.skeleton-text,.skeleton-avatar{background:linear-gradient(90deg,#1a1a1a 25%,#252525 50%,#1a1a1a 75%)!important;background-size:800px 100%!important}
    .admin-action-card{background:#161616!important;border:1px solid rgba(201,168,76,0.12)!important;color:#f0e8d8!important}
    .admin-action-card h4{color:#d4b965!important}
    .panel-empty,.panel-status,.search-empty-state{background:#161616!important;color:#f0e8d8!important;border:1px solid rgba(201,168,76,0.12)!important}
    .search-empty-title{color:#d4b965!important}
    .search-empty-copy{color:#8a7e6a!important}
    .app-footer{background:#0d0d0d!important;border-top:1px solid rgba(201,168,76,0.12)!important;color:#8a7e6a!important}
    .app-footer a{color:#c9a84c!important}
    #map{border:1px solid rgba(201,168,76,0.3)!important;border-radius:12px!important}
    a{color:#c9a84c!important}a:hover{color:#d4b965!important}
    ::selection{background:#c9a84c!important;color:#0d0d0d!important}
    /* Fame badge */
    .fame-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:0!important;background:#161616!important;border:1px solid rgba(201,168,76,0.25)!important;color:#c9a84c!important;font-size:0.82rem;font-weight:600;margin:8px 0}
    .fame-badge-compact{padding:3px 8px;font-size:0.75rem;margin:0;vertical-align:middle}
    .fame-count{font-weight:700;color:#d4b965!important}
    .fame-label{color:#8a7e6a!important;font-weight:400;text-transform:lowercase}
    .fame-tier{padding:2px 8px;margin-left:4px;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;border-radius:0!important}
    .fame-rising .fame-tier{background:rgba(201,168,76,0.1)!important;color:#c9a84c!important}
    .fame-popular .fame-tier{background:rgba(201,168,76,0.18)!important;color:#d4b965!important}
    .fame-famous .fame-tier{background:rgba(201,168,76,0.25)!important;color:#e8c84c!important}
    .fame-legendary .fame-tier{background:linear-gradient(135deg,rgba(201,168,76,0.3),rgba(232,200,76,0.2))!important;color:#f0d860!important;text-shadow:0 0 8px rgba(201,168,76,0.4)}
    /* Share buttons */
    .share-buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
    .share-buttons-label{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.1em;color:#8a7e6a!important;font-weight:600;width:100%;margin-bottom:2px}
    .share-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:0!important;border:1px solid rgba(201,168,76,0.25)!important;background:#161616!important;color:#c9a84c!important;text-decoration:none;cursor:pointer;transition:background 0.15s,border-color 0.15s}
    .share-btn:hover{background:rgba(201,168,76,0.12)!important;border-color:#c9a84c!important;color:#d4b965!important}
    .share-btn-whatsapp:hover{color:#25d366!important;border-color:#25d366!important}
    .share-btn-facebook:hover{color:#1877f2!important;border-color:#1877f2!important}
    .share-btn-twitter:hover{color:#f0e8d8!important;border-color:#f0e8d8!important}
    .share-btn-linkedin:hover{color:#0a66c2!important;border-color:#0a66c2!important}
    .share-btn-copy:hover{color:#d4b965!important;border-color:#c9a84c!important}
    /* Keyboard focus outline for accessibility */
    *:focus-visible{outline:2px solid #c9a84c!important;outline-offset:2px!important}
    .app-feed-tab:focus-visible,.artist-local-tab:focus-visible{outline-offset:-2px!important}
    .legal-content,.faq-content{background:#111111!important;color:#f0e8d8!important}
    .legal-content h2,.legal-content h3,.legal-content h4,.panel-empty strong,.panel-status strong{color:#d4b965!important}
    .legal-section,.legal-hero{background:#111111!important;border-color:rgba(201,168,76,0.12)!important;color:#c8baa8!important}
    .legal-section h4,.legal-hero h2,.legal-hero h3,.legal-eyebrow{color:#d4b965!important}
    .legal-meta{color:#8a7e6a!important}
    #faqModalContent .legal-section,#faqModalContent .legal-hero,
    #legalModalContent .legal-section,#legalModalContent .legal-hero{background:#111111!important;border-radius:0!important}
    .style-info-modal{background:#161616!important;color:#f0e8d8!important;border:1px solid rgba(201,168,76,0.3)!important}
    .shop-client-topbar,.artist-client-topbar{background:rgba(13,13,13,0.95)!important;border-bottom:1px solid rgba(201,168,76,0.12)!important}
    .shop-client-topbar button,.artist-client-topbar button,.artist-client-icon-btn{color:#c9a84c!important;background:transparent!important;border:none!important}
    .shop-contact-box,.artist-client-about-card{background:#161616!important;border:1px solid rgba(201,168,76,0.12)!important;color:#f0e8d8!important}
    .shop-contact-box strong,.artist-client-about-card strong{color:#d4b965!important}
    .home-premium-btn{background:#161616!important;color:#f0e8d8!important;border:1px solid rgba(201,168,76,0.3)!important}
    .home-premium-btn:hover{background:rgba(201,168,76,0.15)!important;color:#d4b965!important;border-color:#c9a84c!important}
    ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#0d0d0d}::-webkit-scrollbar-thumb{background:rgba(201,168,76,0.3);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#c9a84c}
    .profile-dropdown-toggle{background:#161616!important;color:#d4b965!important;border:1px solid rgba(201,168,76,0.12)!important}
    .profile-dropdown-body{background:#111111!important;color:#f0e8d8!important}
    .feed-like-btn,.feed-save-btn{color:#8a7e6a!important}
    .feed-like-btn.liked{color:#c9a84c!important}
    .feed-save-btn.active{color:#c9a84c!important}
    .artist-client-follow-btn{background:rgba(201,168,76,0.15)!important;color:#c9a84c!important;border:1px solid rgba(201,168,76,0.3)!important}
    .image-style-tag{background:rgba(201,168,76,0.12)!important;color:#d4b965!important;border:1px solid rgba(201,168,76,0.2)!important}
    /* Shop hero inline elements */
    .shop-client-contact-card,.shop-person-card,.shop-team-preview-card{background:#161616!important;border-color:rgba(201,168,76,0.12)!important;border-radius:0!important}
    .shop-client-inline-icon,.artist-client-inline-icon{background:#161616!important;border:1px solid rgba(201,168,76,0.3)!important;border-radius:0!important;color:#c9a84c!important}
    .artist-dashboard-stat{background:transparent!important;color:#f0e8d8!important}
    .shop-client-avatar,.shop-client-hero-media,.artist-client-avatar,.artist-client-hero-media{background:#161616!important}
    /* Feed overlay */
    .feed-post-actions,.feed-post-actions-overlay{background:rgba(13,13,13,0.85)!important}
    /* Nav menu */
    .nav-menu-list button,.nav-menu-list a{background:#161616!important;color:#f0e8d8!important;border:1px solid rgba(201,168,76,0.25)!important;border-radius:2px!important}
    /* Auth internals */
    .auth-mode-selector{background:#111111!important;border:1px solid rgba(201,168,76,0.2)!important;border-radius:0!important}
    .password-toggle-btn{background:rgba(30,30,30,0.85)!important;border:1px solid rgba(201,168,76,0.3)!important;cursor:pointer!important}.password-toggle-eye{border-color:#c9a84c!important}.password-toggle-eye::before{background:#c9a84c!important}
    /* Misc */
    .modal-close-btn{background:transparent!important;border:none!important;color:#c9a84c!important}
    .footer-link-btn{background:transparent!important;border:none!important;color:#8a7e6a!important}
    .footer-link-btn:hover{color:#d4b965!important}
    .feed-style-filter-row select{background:#111111!important;color:#f0e8d8!important;border:1px solid rgba(201,168,76,0.3)!important}
    .feed-style-filter-row label{color:#8a7e6a!important}
    .auth-divider{color:#8a7e6a!important}
    .auth-divider span{background:#161616!important}
    h1,h2,h3,h4{color:#f0e8d8!important}
    /* ── Warm-white text upgrades ── */
    label,p,.panel-intro,.form-help-text{color:#c8baa8!important}
    .home-search-intro-subtext,.home-range-label,#homeShopNameSearchHelp,.home-discovery-count{color:#b8aa94!important}
    .search-result-primary,.search-result-styles,.search-result-distance,.search-result-secondary{color:#c0b09a!important}
    .feed-post-shop-name,.feed-post-shop-name-overlay{color:#d4b965!important}
    .shop-client-style-line,.artist-client-style-line,.shop-contact-box p,.artist-client-about-card p{color:#c8baa8!important}
    .auth-divider,.auth-divider span{color:#b0a090!important}
    .home-community-proof p,.home-community-proof strong{color:#f0e8d8!important}
    .app-footer{color:#b0a090!important}
    .admin-action-card p,.notification-card p,.message-thread p{color:#c8baa8!important}
    .home-cta-section p{color:#c8baa8!important}
    .home-search-hero-media-real+div h2{color:#c9a84c!important}
    .admin-user-filters input,.admin-user-filters select{background:#111111!important;color:#f0e8d8!important;border:1px solid rgba(201,168,76,0.3)!important}
    .notification-card{background:#161616!important;border:1px solid rgba(201,168,76,0.12)!important;color:#f0e8d8!important}
    /* Notification preferences */
    .notif-prefs-gear-btn{background:none!important;border:none!important;color:#8a7e6a!important;font-size:1.3rem!important;cursor:pointer!important;padding:4px!important;line-height:1!important;transition:color 0.15s}
    .notif-prefs-gear-btn:hover,.notif-prefs-gear-btn.active{color:#c9a84c!important}
    .notif-prefs-panel{background:#161616!important;border:1px solid rgba(201,168,76,0.18)!important;padding:16px 18px!important;margin-bottom:16px!important}
    .notif-prefs-panel h3{color:#c9a84c!important;font-size:0.9rem!important;margin:0 0 12px 0!important;text-transform:uppercase!important;letter-spacing:0.08em}
    .notif-pref-row{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 0!important;cursor:pointer!important;color:#f0e8d8!important;font-size:0.88rem}
    .notif-pref-row span{flex:1}
    .notif-pref-checkbox{width:18px!important;height:18px!important;accent-color:#c9a84c!important;cursor:pointer!important}
    .notif-prefs-divider{height:1px!important;background:rgba(201,168,76,0.15)!important;margin:6px 0!important}
    .message-thread,.message-bubble{background:#161616!important;color:#f0e8d8!important;border:1px solid rgba(201,168,76,0.12)!important}
    .thread-message-row{border-bottom:1px solid rgba(201,168,76,0.08)!important}
    .search-box,#searchBox{border-radius:0!important;margin:0!important;max-width:100vw!important;width:100%!important;border:none!important;box-shadow:none!important;padding:0!important;background:#0d0d0d!important;overflow-x:hidden!important;box-sizing:border-box!important}
    #searchHeroBanner,.home-search-hero,.home-search-hero-real{border-radius:0!important;margin:0!important;padding:0!important;max-height:280px!important;aspect-ratio:21/9!important}
    .topbar,.topbar *{border-radius:0!important}
    .topbar{margin:0!important;position:sticky!important;top:0!important;z-index:100!important;padding:0 16px!important;height:44px!important;min-height:44px!important;max-height:44px!important;background:#111111!important;border-bottom:none!important;box-shadow:none!important;display:flex!important;align-items:center!important}
    .topbar button,.menu-toggle-btn,#accountToggleBtn{border-radius:0!important;background:none!important;box-shadow:none!important}
    .menu-toggle-icon{display:inline-block!important;width:18px!important;height:12px!important}
    .language-switcher select{border-radius:0!important;background:transparent!important;border:none!important}
    button,input,select,textarea,.secondary-btn,.home-intent-btn,.home-range-btn,.auth-mode-btn,.auth-role-btn,.app-feed-tab,.artist-local-tab,.home-premium-btn,.social-auth-btn,.feed-like-btn,.feed-save-btn,.artist-client-follow-btn,.search-result-card,.tattoo-card,.home-latest-card,.home-community-proof,.home-cta-section,.home-cta-section article,.profile-dropdown-toggle,.image-style-tag,.app-toast,#messageModal,.panel-empty,.panel-status,.search-empty-state,.admin-action-card,.notification-card,.message-thread,.message-bubble,.shop-contact-box,.artist-client-about-card,.nav-menu-list{border-radius:2px!important}
    .search-box,#searchBox,.home-search-hero,.home-search-hero-real,#searchHeroBanner,.profile-box,#profileBox,.results-box,#resultsBox,.auth-box,#authBox,#registerBox,#editBox,#adminClaimsBox,#feedBox,#discoverBox,#flashBox,#favoritesBox,#collectionBox,#messagesBox,#notificationsBox{border-radius:0!important}
    .shop-client-hero-card,.artist-client-hero-card{border-radius:2px!important}
    .shop-client-hero-media,.artist-client-hero-media{border-radius:2px!important}
    .artist-local-tabs{border-radius:0!important}
    .artist-local-tabs-wrap{position:sticky!important;top:44px!important;z-index:50!important}
    #map{border-radius:2px!important}
    .skeleton-card{border-radius:2px!important}
    .feed-post,.flash-post{border-radius:2px!important}
    .search-box{border-radius:0!important;overflow:visible!important}
    .topbar+.app-back-shell,.topbar+.brand-stage,.brand-stage{margin-top:0!important}
    body>*:first-child+*+*+*+.search-box,body .search-box{margin-top:0!important}
    .home-search-hero::before,.home-search-hero-real::before{display:none!important}
    .home-search-hero-media-real{filter:brightness(0.85)!important;opacity:1!important}
    #searchHeroTitle{display:none!important}
    .home-search-shell{background:#0d0d0d!important;padding:24px 20px 20px!important;overflow:hidden!important;box-sizing:border-box!important;display:block!important;gap:0!important}
    body,html{background:#0d0d0d!important}
    /* Distance slider styling moved to overrides.css — no duplicate rules here */

    /* ── High-specificity ID overrides — beat Vite's injected class rules ── */
    #authBox button,#registerBox button,#editBox button,#resultsBox button,
    #profileBox button,#feedBox button,#discoverBox button,#flashBox button,
    #adminClaimsBox button,#messagesBox button,#notificationsBox button,
    #favoritesBox button,#resetPasswordBox button{border-radius:0!important}
    #authBox input,#registerBox input,#editBox input,#resultsBox input,
    #profileBox input,#feedBox input,#discoverBox input,#flashBox input,
    #adminClaimsBox input,#messagesBox input,#notificationsBox input,
    #favoritesBox input,#resetPasswordBox input{border-radius:0!important}
    #authBox select,#registerBox select,#editBox select,#resultsBox select,
    #profileBox select,#feedBox select,#discoverBox select,#flashBox select,
    #adminClaimsBox select,#messagesBox select,#notificationsBox select,
    #favoritesBox select,#resetPasswordBox select{border-radius:0!important}
    #authBox textarea,#registerBox textarea,#editBox textarea,#messagesBox textarea{border-radius:0!important}
    /* Auth box card */
    .auth-welcome-card{border-radius:0!important;background:#111111!important}
    #authBox .auth-mode-btn{border-radius:0!important;background:#161616!important;color:#8a7e6a!important;border:1px solid rgba(201,168,76,0.25)!important;font-size:0.78rem!important;text-transform:uppercase!important;letter-spacing:0.08em!important}
    #authBox .auth-mode-btn.active{background-color:rgba(201,168,76,0.15)!important;background-image:none!important;color:#d4b965!important;border-color:#c9a84c!important}
    #authBox .auth-role-btn{border-radius:0!important;background:#161616!important;color:#8a7e6a!important;border:1px solid rgba(201,168,76,0.25)!important;font-size:0.75rem!important;text-transform:uppercase!important;letter-spacing:0.07em!important}
    #authBox .auth-role-btn.active{background:rgba(201,168,76,0.15)!important;color:#d4b965!important;border-color:#c9a84c!important}
    #loginBtn,#createAccountBtn{background:linear-gradient(135deg,#c9a84c,#a8893a)!important;color:#0d0d0d!important;border:none!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:0.06em!important;border-radius:0!important}
    #authBox .social-auth-btn{background:#161616!important;color:#f0e8d8!important;border:1px solid rgba(201,168,76,0.25)!important;border-radius:0!important}
    #authBox .auth-welcome-eyebrow,#authWelcomeEyebrow{color:#c9a84c!important;text-transform:uppercase!important;letter-spacing:0.12em!important;font-size:0.72rem!important}
    #authHeading{color:#f0e8d8!important;letter-spacing:0.06em!important}
    /* Result cards */
    .tattoo-card,.search-result-card{border-radius:0!important;background:#161616!important;border:1px solid rgba(201,168,76,0.12)!important}
    /* Notifications */
    #notificationsBox button.active{background-color:rgba(201,168,76,0.15)!important;background-image:none!important;color:#d4b965!important;border-color:#c9a84c!important}
    /* Feed/flash posts */
    .feed-post,.flash-post,.home-latest-card{border-radius:0!important}
    /* Profile cards */
    .shop-client-hero-card,.artist-client-hero-card,.shop-contact-box,.artist-client-about-card{border-radius:0!important}
    /* Artist tabs */
    .artist-local-tab,.app-feed-tab{border-radius:0!important}
    /* Misc modals/panels */
    .app-toast,#messageModal,.style-info-modal,.panel-empty,.panel-status,.nav-menu-list,.nav-menu{border-radius:0!important}
    /* Save/submit primary buttons in forms */
    #saveShopBtn,#saveEditedShopBtn,#notificationsCloseBtn,#resetPasswordBtn{background:linear-gradient(135deg,#c9a84c,#a8893a)!important;color:#0d0d0d!important;border:none!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:0.06em!important;border-radius:0!important}

    /* ── Search module – rectangular dark/gold ── */
    .home-search-intro-text{font-size:0.75rem!important;text-transform:uppercase!important;letter-spacing:0.14em!important;margin:0 0 14px!important;color:#e8dcc8!important;font-weight:600!important}
    .home-search-intro-subtext,.home-range-label{font-size:0.72rem!important;text-transform:uppercase!important;letter-spacing:0.1em!important;color:#b8aa94!important;margin:10px 0 6px!important}
    .home-search-intent-row{margin-bottom:16px!important}
    .home-search-intent-actions{display:flex!important;gap:0!important}
    .home-intent-btn{background:#161616!important;color:#8a7e6a!important;border:1px solid rgba(201,168,76,0.25)!important;padding:10px 24px!important;font-size:0.78rem!important;letter-spacing:0.1em!important;text-transform:uppercase!important;font-weight:600!important;flex:1!important;border-radius:0!important}
    .home-intent-btn+.home-intent-btn{border-left:none!important}
    .home-intent-btn.active{background-color:rgba(201,168,76,0.15)!important;background-image:none!important;color:#d4b965!important;border-color:#c9a84c!important}
    .home-location-row{display:flex!important;gap:0!important;margin-bottom:8px!important}
    .home-location-input-wrap{flex:1!important}
    .home-location-input-wrap input{width:100%!important;box-sizing:border-box!important;border-radius:0!important;padding:11px 12px!important;font-size:0.88rem!important}
    .home-location-btn{background:#161616!important;border:1px solid rgba(201,168,76,0.25)!important;border-left:none!important;color:#c9a84c!important;padding:0 14px!important;min-width:44px!important;border-radius:0!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important}
    .home-location-btn:hover{background:rgba(201,168,76,0.12)!important;border-color:#c9a84c!important}
    .home-range-row{display:flex!important;gap:0!important;margin-bottom:12px!important}
    .home-range-btn{flex:1!important;padding:10px 4px!important;font-size:0.78rem!important;letter-spacing:0.06em!important;text-transform:uppercase!important;font-weight:600!important;border-radius:0!important;border-right:none!important}
    .home-range-btn:last-child{border-right:1px solid rgba(201,168,76,0.3)!important}
    .home-range-btn.active,.home-range-btn[aria-pressed="true"]{border-right:none!important}
    .home-range-btn.active+.home-range-btn,.home-range-btn[aria-pressed="true"]+.home-range-btn{border-left:1px solid rgba(201,168,76,0.3)!important}
    .home-style-row{margin-bottom:14px!important}
    #styleLabel{color:#8a7e6a!important;font-size:0.72rem!important;text-transform:uppercase!important;letter-spacing:0.1em!important;display:block!important;margin-bottom:6px!important}
    .style-select-row-home{display:flex!important;gap:0!important}
    .style-select-row-home select{flex:1!important;border-radius:0!important;padding:10px 12px!important;font-size:0.88rem!important}
    .info-btn{background:#161616!important;color:#c9a84c!important;border:1px solid rgba(201,168,76,0.25)!important;border-left:none!important;min-width:36px!important;font-style:italic!important;border-radius:0!important;cursor:pointer!important}
    .home-search-actions{margin:16px 0 20px!important}
    #searchStudiosBtn{width:100%!important;padding:14px!important;font-size:0.85rem!important;display:block!important}
    .home-spotlight-actions{display:flex!important;gap:0!important;margin:14px 0!important}
    .home-spotlight-actions .home-premium-btn{flex:1!important;border-right:none!important;border-radius:0!important;font-size:0.72rem!important;letter-spacing:0.07em!important;text-transform:uppercase!important;padding:10px 4px!important}
    .home-spotlight-actions .home-premium-btn:last-child{border-right:1px solid rgba(201,168,76,0.3)!important}
    /* Distance slider — gold fill gradient (must use !important to beat generic input rules) */
    #distanceSlider{background:linear-gradient(90deg,#c9a84c 21.05%,#2a2a2a 21.05%)!important;-webkit-appearance:none!important;appearance:none!important;height:6px!important;border:none!important;border-radius:3px!important;outline:none!important;cursor:pointer!important}
  </style>
  <link rel="stylesheet" href="/overrides.css?v=50" />
  <script src="/overrides-fix.js?v=2"></script>
</head>
<body style="background:#0d0d0d!important;margin:0!important;padding:0!important;">

  <!-- SEO: crawlable content for search engines (hidden when JS runs) -->
  <noscript>
    <header style="max-width:800px;margin:0 auto;padding:40px 20px;color:#f0e8d8;font-family:Helvetica,Arial,sans-serif;">
      <h1>InkRadar — Find Tattoo Artists, Studios & Flash Near You</h1>
      <p>InkRadar is a tattoo discovery platform that connects you with tattoo artists, studios, and flash designs across Europe. Browse portfolios, compare styles, and book your next tattoo.</p>
      <h2>What You Can Do on InkRadar</h2>
      <ul>
        <li><strong>Search Tattoo Studios</strong> — Find tattoo shops near your location by city, distance, or tattoo style.</li>
        <li><strong>Discover Tattoo Artists</strong> — Browse artist portfolios featuring realism, blackwork, fine line, Japanese, traditional, neo-traditional, watercolor, geometric, dotwork, trash polka, and more.</li>
        <li><strong>Flash Tattoo Designs</strong> — Explore available flash tattoo designs ready to be inked, with pricing and style tags.</li>
        <li><strong>Artwork Portfolio</strong> — See original artwork and illustrations from tattoo artists.</li>
        <li><strong>Artist Profiles</strong> — View artist bios, styles, awards, affiliations, and availability calendars.</li>
        <li><strong>Shop Profiles</strong> — See studio photos, opening hours, team members, and contact info.</li>
      </ul>
      <h2>Tattoo Styles</h2>
      <p>Find artists specializing in: Traditional / Old School, Neo-Traditional, Realism / Photorealism, Japanese (Irezumi), Blackwork, Fine Line / Micro, Watercolor, Geometric / Dotwork / Mandalas, Illustrative, Trash Polka, Tribal, Cyber Sigilism, Lettering / Script, Biomechanical / Bio-organic, Embroidery tattoo styles.</p>
      <h2>For Tattoo Artists & Studios</h2>
      <p>Claim your studio, build your portfolio, publish flash designs, and connect with clients. InkRadar helps tattoo professionals grow their visibility and reach new customers.</p>
      <p>Available in English, French, and Dutch.</p>
      <p><a href="https://inkradar.com/" style="color:#c9a84c;">Visit InkRadar</a></p>
    </header>
  </noscript>

  <nav class="topbar" role="navigation" aria-label="Main navigation" style="background:#111111!important;border-bottom:none!important;border-radius:0!important;margin:0!important;padding:0 16px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;height:44px!important;min-height:44px!important;max-height:44px!important;box-shadow:none!important;flex-wrap:nowrap!important;overflow:visible!important;">
    <div class="menu-shell" style="display:flex;align-items:center;gap:0;">
      <button id="menuToggleBtn" type="button" class="menu-toggle-btn" aria-expanded="false" aria-controls="navMenu" style="color:#c9a84c!important;background:none!important;border:none!important;box-shadow:none!important;padding:8px 14px!important;font-size:1.05rem!important;letter-spacing:0.05em!important;text-transform:uppercase!important;font-weight:600!important;border-radius:0!important;">
        <span id="menuToggleText">Menu</span>
        <span id="menuNotificationBadge" class="menu-notification-badge" aria-live="polite" style="display:none;">0</span>
      </button>

      <div id="navMenu" class="nav-menu" style="display:none;background:#111111!important;border:1px solid rgba(201,168,76,0.1)!important;border-radius:0!important;">
        <div id="navMenuLabel" class="nav-menu-label" style="color:#c9a84c!important;text-transform:uppercase!important;letter-spacing:0.1em!important;font-size:0.75rem!important;">Navigation</div>
        <div id="navMenuList" class="nav-menu-list" style="background:#111111!important;"></div>
      </div>
    </div>

    <button id="topbarBrandMini" class="topbar-brand-mini" style="display:none;color:#c9a84c!important;background:none!important;border:none!important;font-size:0.85rem!important;letter-spacing:0.08em!important;text-transform:uppercase!important;font-weight:700!important;align-items:center!important;gap:6px!important;" type="button" onclick="goHomePage()">
      <div class="topbar-brand-mark-real" aria-hidden="true" style="width:28px;height:28px;flex-shrink:0;">
        <img src="/img/Inkradar_Logo.png" onerror="this.onerror=null;this.style.display='none'" alt="" style="width:28px;height:28px;object-fit:contain;display:block;filter:none;opacity:1;">
      </div>
      <span id="topbarBrandText" style="color:#c9a84c!important;">INKRADAR</span>
    </button>

    <div class="topbar-actions" style="display:flex!important;align-items:center!important;gap:8px!important;flex-shrink:0!important;">
      <button id="topbarBellBtn" type="button" onclick="window.showMessagesPage && showMessagesPage()" class="topbar-bell-btn" style="display:none;background:none!important;border:none!important;padding:4px 6px!important;cursor:pointer!important;position:relative!important;" aria-label="Messages">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#c9a84c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
        <span id="topbarBellBadge" class="topbar-bell-badge" style="display:none;">0</span>
      </button>
      <div class="language-switcher">
        <label for="languageSwitcher" class="sr-only" id="languageSwitcherLabel">Language</label>
        <select id="languageSwitcher" aria-label="Language selector" style="background:transparent!important;color:#8a7e6a!important;border:none!important;font-size:0.8rem!important;letter-spacing:0.08em!important;padding:4px!important;border-radius:0!important;cursor:pointer!important;">
          <option value="en">EN</option>
          <option value="fr">FR</option>
          <option value="nl">NL</option>
          <option value="es">ES</option>
        </select>
      </div>

      <div style="position:relative;">
        <button id="accountToggleBtn" type="button" onclick="toggleProfileDropdown()" style="background:none!important;border:none!important;padding:5px 10px!important;border-radius:0!important;cursor:pointer!important;display:flex!important;align-items:center!important;" aria-label="Account"><img src="/img/profile.png" alt="Account" style="width:24px;height:24px;object-fit:contain;"></button>
        <div id="profileDropdown" class="account-dropdown" style="display:none;"></div>
      </div>
    </div>
  </nav>

  <div id="appBackShell" class="app-back-shell" style="display:none;">
    <button id="appBackBtn" type="button" class="app-back-btn" aria-label="Go back" onclick="appChromeBack()">
      <span class="app-back-btn-icon" aria-hidden="true">&#8592;</span>
      <span id="appBackBtnText">Back</span>
    </button>
  </div>

  <!-- Bottom nav popup menus -->
  <div id="bnCreateMenu" class="bn-popup-menu" style="display:none;">
    <button id="bnAddTattooBtn" type="button" class="bn-popup-item" onclick="bnAction('addTattoo')"><span id="bnAddTattooText">Add Tattoo</span></button>
    <button id="bnAddFlashBtn" type="button" class="bn-popup-item" onclick="bnAction('addFlash')"><span id="bnAddFlashText">Add Flash</span></button>
    <button id="bnAddArtBtn" type="button" class="bn-popup-item" onclick="bnAction('addArt')"><span id="bnAddArtText">Add Art</span></button>
    <button id="bnAddGuestBtn" type="button" class="bn-popup-item" onclick="bnAction('addGuest')"><span id="bnAddGuestText">Add Guest</span></button>
    <button id="bnAddShopTattooBtn" type="button" class="bn-popup-item" onclick="bnAction('addShopTattooPortfolio')"><span id="bnAddShopTattooText">Add Tattoo Portfolio</span></button>
    <button id="bnAddShopFlashBtn" type="button" class="bn-popup-item" onclick="bnAction('addShopFlashPortfolio')"><span id="bnAddShopFlashText">Add Flash Portfolio</span></button>
    <button id="bnAddShopArtBtn" type="button" class="bn-popup-item" onclick="bnAction('addShopArtPortfolio')"><span id="bnAddShopArtText">Add Art Portfolio</span></button>
    <button id="bnAddShopEventBtn" type="button" class="bn-popup-item" onclick="bnAction('addShopEvent')"><span id="bnAddShopEventText">Add Event</span></button>
  </div>
  <div id="bnPortfolioMenu" class="bn-popup-menu" style="display:none;">
    <button type="button" class="bn-popup-item" onclick="bnAction('tattooPortfolio')"><span id="bnTattooPortfolioText">Tattoo Portfolio</span></button>
    <button type="button" class="bn-popup-item" onclick="bnAction('flashPortfolio')"><span id="bnFlashPortfolioText">Flash Portfolio</span></button>
    <button type="button" class="bn-popup-item" onclick="bnAction('artPortfolio')"><span id="bnArtPortfolioText">Art Portfolio</span></button>
  </div>
  <div id="bnMenuOverlay" class="bn-menu-overlay" style="display:none;" onclick="closeBnMenus()"></div>

  <nav id="appFeedTabs" class="app-feed-tabs" role="tablist" style="display:none;position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;width:100% !important;z-index:999 !important;" aria-label="Main sections">
    <!-- Shared: Search (Guest + Client + Shop Owner) -->
    <button id="searchTabBtn" type="button" class="app-feed-tab" role="tab" onclick="goHomePage()">
      <img src="/img/search.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="searchTabText">Search</span>
    </button>
    <!-- Shared: Flash (Guest + Client) — dedicated flash tab -->
    <button id="flashFeedTabBtn" type="button" class="app-feed-tab" role="tab" onclick="openFlashFromMenu()">
      <img src="/img/flashfeed.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="flashFeedTabText">Flash</span>
    </button>
    <!-- Shared: Parcours / Mon Parcours Tattoo (Guest + Client) -->
    <button id="parcoursTabBtn" type="button" class="app-feed-tab" role="tab" onclick="openCollectionFromMenu()">
      <img src="/img/calendar.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="parcoursTabText">Parcours</span>
    </button>
    <!-- Shared: Discover — unified feed with filter chips (all roles) -->
    <button id="discoverTabBtn" type="button" class="app-feed-tab" role="tab" onclick="openDiscoverFromMenu()">
      <img src="/img/discover.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="discoverTabText">Discover</span>
    </button>
    <!-- Shared: Profile (Guest + Client — account, messages, favorites, settings) -->
    <button id="profileTabBtn" type="button" class="app-feed-tab" role="tab" onclick="openAccountFromMenu()">
      <img src="/img/profile.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="profileTabText">Profile</span>
      <span class="nav-badge" id="profileBadge" aria-live="polite" style="display:none;">0</span>
    </button>
    <!-- Artist + Shop Owner: Create -->
    <button id="createTabBtn" type="button" class="app-feed-tab app-feed-tab-create" role="tab" style="display:none;" onclick="toggleBnCreateMenu()" aria-label="Create">
      <span class="app-feed-tab-icon-create" aria-hidden="true"><img src="/img/plus.png" alt="+" style="width:24px;height:24px;object-fit:contain;"></span>
    </button>
    <!-- Artist: My Portfolio / Gallery -->
    <button id="myPortfolioTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="toggleBnPortfolioMenu()">
      <img src="/img/tattooportfolio.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="myPortfolioTabText">Gallery</span>
    </button>
    <!-- Artist + Shop Owner: Messages -->
    <button id="messagesTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="openMessagesFromMenu()">
      <img src="/img/messages.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="messagesTabText">Messages</span>
      <span class="nav-badge" id="messagesBadge" aria-live="polite" style="display:none;">0</span>
    </button>
    <!-- Artist: My Profile -->
    <button id="myProfileTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="openMyArtistProfileFromMenu()">
      <img src="/img/profile.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="myProfileTabText">My Profile</span>
      <span class="nav-badge" id="myProfileBadge" aria-live="polite" style="display:none;">0</span>
    </button>
    <!-- Shop Owner: My Shop -->
    <button id="myShopTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="openMyShopFromMenu()">
      <img src="/img/search.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="myShopTabText">My Shop</span>
      <span class="nav-badge" id="myShopBadge" aria-live="polite" style="display:none;">0</span>
    </button>
    <!-- Artist: Accueil (Dashboard home) -->
    <button id="accueilTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="openMyArtistProfileFromMenu()">
      <img src="/img/discover.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="accueilTabText">Accueil</span>
    </button>
    <!-- Artist: Flash Management -->
    <button id="flashMgmtTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="openArtistFlashTab()">
      <img src="/img/flashfeed.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="flashMgmtTabText">Flash</span>
    </button>
    <!-- Artist & Shop Owner: + Publier (Upload) -->
    <button id="publierTabBtn" type="button" class="app-feed-tab app-feed-tab-create" role="tab" style="display:none;" onclick="toggleBnCreateMenu()" aria-label="Publier">
      <span class="app-feed-tab-icon-create" aria-hidden="true"><img src="/img/plus.png" alt="+" style="width:24px;height:24px;object-fit:contain;"></span>
      <span id="publierTabText">Publier</span>
    </button>
    <!-- Shop Owner: Mon Salon (public profile) -->
    <button id="monSalonTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="openMyShopFromMenu()">
      <img src="/img/search.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="monSalonTabText">Mon Salon</span>
    </button>
    <!-- Shop Owner: Plus (menu) -->
    <button id="plusMenuTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="toggleNavMenu()">
      <img src="/img/profile.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="plusMenuTabText">Plus</span>
    </button>
    <!-- Organiser: Dashboard -->
    <button id="orgDashboardTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="window.__showOrganiserDashboard()">
      <img src="/img/discover.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="orgDashboardTabText">Dashboard</span>
    </button>
    <!-- Organiser: Mes Events -->
    <button id="orgEventsTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="window.__openEventsPage()">
      <img src="/img/calendar.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="orgEventsTabText">Mes Events</span>
    </button>
    <!-- Organiser: + Créer -->
    <button id="orgCreateTabBtn" type="button" class="app-feed-tab app-feed-tab-create" role="tab" style="display:none;" onclick="window.__goCreateEvent()" aria-label="Créer">
      <span class="app-feed-tab-icon-create" aria-hidden="true"><img src="/img/plus.png" alt="+" style="width:24px;height:24px;object-fit:contain;"></span>
      <span id="orgCreateTabText">Créer</span>
    </button>
    <!-- Organiser: Messages -->
    <button id="orgMessagesTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="openMessagesFromMenu()">
      <img src="/img/messages.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="orgMessagesTabText">Messages</span>
      <span class="nav-badge" id="orgMessagesBadge" aria-live="polite" style="display:none;">0</span>
    </button>
    <!-- Organiser: Profil -->
    <button id="orgProfileTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="openAccountFromMenu()">
      <img src="/img/profile.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="orgProfileTabText">Profil</span>
    </button>
    <!-- Client: Events tab -->
    <button id="clientEventsTabBtn" type="button" class="app-feed-tab" role="tab" style="display:none;" onclick="window.__openEventsPage()">
      <img src="/img/calendar.png" alt="" class="app-feed-tab-icon" style="width:28px;height:28px;object-fit:contain;" aria-hidden="true">
      <span id="clientEventsTabText">Events</span>
    </button>
  </nav>

  <section class="brand-stage" onclick="goHomePage()" style="cursor:pointer;display:none!important;">
    <div class="brand-lockup">
      <div class="brand-emblem" aria-hidden="true" style="background:none;border:0;box-shadow:none;">
        <img class="brand-emblem-image" loading="lazy" src="/img/Inkradar_Logo.png" onerror="this.onerror=null;this.style.display='none'" alt="InkRadar" style="display:block;width:88px;height:88px;object-fit:contain;opacity:1;filter:none;">
        <div class="brand-emblem-core"></div>
      </div>
      <div class="brand-wordmark">
        <h1 id="brandName">InkRadar</h1>
        <div class="brand-divider" aria-hidden="true"></div>
        <p id="brandTagline" class="brand-tagline">Find the artist built for your skin.</p>
      </div>
    </div>
  </section>

  <p id="shopCounter" style="display:none;margin-bottom:25px;font-size:18px;color:#ddd;"></p>
  <p id="userCounter" style="display:none;"></p>

  <div class="profile-box auth-welcome-shell" id="authBox" style="display:none; text-align:left;">
    <p id="authWelcomeEyebrow" class="auth-welcome-eyebrow">Welcome to InkRadar</p>
    <div class="auth-welcome-card">
      <h2 id="authHeading" style="text-align:center;">Account</h2>

      <div id="authLoggedOutView">
        <div class="auth-mode-selector" id="authModeSelector">
          <button type="button" id="authModeExistingBtn" class="auth-mode-btn active" onclick="setAuthMode('existing')">Existing user</button>
          <button type="button" id="authModeNewBtn" class="auth-mode-btn" onclick="setAuthMode('new')">New user</button>
        </div>

        <div id="authRegistrationFields" style="display:none;">
          <label id="authRegisterAsLabel">Create account as</label>
          <div class="auth-role-selector" id="authRoleSelector">
            <button type="button" id="authRoleClientBtn" class="auth-role-btn active" onclick="setAuthAccountType('client')">Client</button>
            <button type="button" id="authRoleArtistBtn" class="auth-role-btn" onclick="setAuthAccountType('artist')">Artist</button>
            <button type="button" id="authRoleShopOwnerBtn" class="auth-role-btn" onclick="setAuthAccountType('shop_owner')">Shop owner</button>
            <button type="button" id="authRoleOrganiserBtn" class="auth-role-btn" onclick="setAuthAccountType('organiser')">Organiser</button>
          </div>
          <input type="hidden" id="authAccountType" value="client">

          <label id="authDisplayNameLabel" for="authDisplayName">Display name</label>
          <input type="text" id="authDisplayName">

          <div class="upload-section-card upload-section-logo">
            <div class="upload-section-header">
              <span class="upload-section-icon">👤</span>
              <div>
                <label id="authAvatarLabel" for="authAvatar">Avatar image</label>
                <p id="authAvatarHelp" class="form-help-text">Your profile photo. Recommended: square image, at least 400 x 400 px.</p>
              </div>
            </div>
            <input type="file" id="authAvatar" accept="image/*">
            <img id="authAvatarPreview" class="auth-avatar-preview" alt="Avatar preview" style="display:none;">
          </div>

          <div id="authVatWrap" style="display:none;">
            <label id="authVatLabel" for="authVatNumber">VAT number</label>
            <div class="vat-row">
              <select id="authVatCountry">
                <option value="BE">BE</option>
                <option value="FR">FR</option>
                <option value="NL">NL</option>
                <option value="DE">DE</option>
                <option value="LU">LU</option>
                <option value="OTHER">Other</option>
              </select>
              <input type="text" id="authVatNumber" placeholder="0123.456.789">
            </div>
          </div>

          <div id="authDiplomaWrap" style="display:none;">
            <div class="upload-section-card upload-section-diploma">
              <div class="upload-section-header">
                <span class="upload-section-icon">📋</span>
                <div>
                  <label id="authHygieneDiplomaLabel" for="authHygieneDiploma">Hygiene diploma</label>
                  <p id="authHygieneDiplomaHelp" class="form-help-text">Required for tattoo artist accounts.</p>
                </div>
              </div>
              <input type="file" id="authHygieneDiploma" accept=".pdf,image/*">
            </div>
          </div>

          <div id="authOrganiserWrap" style="display:none;">
            <label for="authOrgName">Organisation name</label>
            <input type="text" id="authOrgName" placeholder="e.g. Brussels Ink Events">

            <label for="authOrgDescription">Description</label>
            <textarea id="authOrgDescription" rows="3" placeholder="Brief description of your organisation..." style="width:100%;resize:vertical;"></textarea>

            <label for="authOrgWebsite">Website (optional)</label>
            <input type="url" id="authOrgWebsite" placeholder="https://...">

            <label for="authOrgPhone">Phone (optional)</label>
            <input type="tel" id="authOrgPhone" placeholder="+32 ...">

            <label for="authOrgCountry">Country</label>
            <select id="authOrgCountry">
              <option value="BE">Belgium</option>
              <option value="FR">France</option>
              <option value="NL">Netherlands</option>
              <option value="DE">Germany</option>
              <option value="LU">Luxembourg</option>
              <option value="OTHER">Other</option>
            </select>
          </div>
        </div>

        <label id="authEmailLabel" for="authEmail">Email</label>
        <input type="email" id="authEmail">

        <label id="authPasswordLabel" for="authPassword">Password</label>
        <div class="password-field">
          <input type="password" id="authPassword" oninput="updatePasswordStrength()">
          <button
            type="button"
            id="authPasswordToggle"
            class="password-toggle-btn"
            onclick="togglePasswordVisibility('authPassword', 'authPasswordToggle')"
            aria-label="Show password"
            aria-pressed="false"
          >
            <span class="password-toggle-eye" aria-hidden="true"></span>
          </button>
        </div>
        <div id="passwordStrengthWrap" style="display:none;margin:6px 0 2px;">
          <div style="display:flex;gap:4px;height:4px;">
            <div id="pwStr1" style="flex:1;background:#2a2a2a;border-radius:2px;transition:background 0.2s;"></div>
            <div id="pwStr2" style="flex:1;background:#2a2a2a;border-radius:2px;transition:background 0.2s;"></div>
            <div id="pwStr3" style="flex:1;background:#2a2a2a;border-radius:2px;transition:background 0.2s;"></div>
            <div id="pwStr4" style="flex:1;background:#2a2a2a;border-radius:2px;transition:background 0.2s;"></div>
          </div>
          <p id="passwordStrengthText" style="font-size:0.72rem;margin:4px 0 0;color:#8a7e6a;"></p>
        </div>

        <div id="authConfirmPasswordWrap" style="display:none;">
          <label id="authConfirmPasswordLabel" for="authConfirmPassword">Confirm password</label>
          <div class="password-field">
            <input type="password" id="authConfirmPassword">
            <button
              type="button"
              id="authConfirmPasswordToggle"
              class="password-toggle-btn"
              onclick="togglePasswordVisibility('authConfirmPassword', 'authConfirmPasswordToggle')"
              aria-label="Show password"
              aria-pressed="false"
            >
              <span class="password-toggle-eye" aria-hidden="true"></span>
            </button>
          </div>
        </div>

        <div id="authTermsWrap" style="display:none;margin:10px 0 4px;">
          <label class="auth-terms-label" style="display:flex;align-items:flex-start;gap:8px;cursor:pointer;font-size:0.82rem;color:#b8b0a0;">
            <input type="checkbox" id="authTermsCheckbox" style="margin-top:3px;accent-color:#c9a84c;">
            <span id="authTermsText">I agree to the <button type="button" class="footer-link-btn" style="font-size:0.82rem;display:inline;padding:0;" onclick="event.stopPropagation();window.open('terms.html','_blank')">Terms of Use</button> and <button type="button" class="footer-link-btn" style="font-size:0.82rem;display:inline;padding:0;" onclick="event.stopPropagation();window.open('privacy.html','_blank')">Privacy Policy</button></span>
          </label>
        </div>

        <p id="authFeedback" style="display:none; margin:12px 0 4px; color:#dcc49b;"></p>

        <div class="account-actions-column">
          <button id="loginBtn" type="button" onclick="signIn()">Login</button>
          <button id="createAccountBtn" type="button" onclick="signUp()" style="display:none;">Create account</button>
          <button type="button" id="forgotPasswordBtn" onclick="forgotPassword()" class="secondary-btn">Forgot password?</button>
        </div>

        <div class="auth-divider">
          <span id="authDividerText">Or continue with</span>
        </div>

        <div class="account-actions-column auth-social-column">
          <button id="googleLoginBtn" type="button" class="secondary-btn social-auth-btn" onclick="signInWithProvider('google')">Continue with Google</button>
        </div>
      </div>

      <div id="authLoggedInView" style="display:none;">
        <p id="authStatus" style="margin-bottom:15px;">Connected</p>

        <div class="account-actions-column">
          <button id="adminClaimsBtn" onclick="showAdminClaims()" style="display:none;">Admin claims <span id="adminClaimsBadge" class="admin-claims-badge" style="display:none;"></span></button>
          <button id="logoutBtn" onclick="signOutUser()">Logout</button>
        </div>
      </div>

      <button id="authCloseBtn" type="button" onclick="toggleAuthBox()" class="secondary-btn">Close</button>
    </div>
  </div>

  <main id="mainContent" role="main">
  <div class="search-box" id="searchBox" role="search" aria-label="Find tattoo studios and artists" style="padding:0;background:#0d0d0d!important;border:none!important;border-radius:0!important;box-shadow:none!important;margin:0!important;max-width:100%!important;width:100%!important;">

    <!-- ═══ SECTION 1: Hero banner (compact) ═══ -->
    <div class="home-search-hero home-search-hero-real" id="searchHeroBanner" style="position:relative;overflow:hidden;max-height:280px;aspect-ratio:21/9;border-radius:0!important;background:#0d0d0d;width:100%;margin:0!important;border:none!important;">
        <img class="home-search-hero-media-real" src="/img/banner_Hero.png" onerror="this.onerror=null;this.src='img/banner_Radar.png'" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;filter:brightness(0.85)!important;opacity:1!important;">
        <h2 id="searchHeroTitle" style="display:none!important;">Find your next tattoo</h2>
        <!-- Gradient overlay — only bottom fade for text legibility -->
        <div aria-hidden="true" style="position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,13,0.85) 0%,rgba(13,13,13,0.2) 40%,transparent 70%);z-index:1;"></div>
        <!-- Discovery count + tagline inside banner -->
        <div style="position:absolute;bottom:0;left:0;right:0;z-index:2;text-align:center;padding:20px 20px 18px;">
          <p id="homeDiscoveryCount" class="home-discovery-count" style="color:#c9a84c;font-size:0.78rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;margin:0;"></p>
        </div>
    </div>

    <!-- Feature strip hidden — kept for i18n compatibility -->
    <div id="bannerFeatureStrip" style="display:none;">
      <div><p id="bannerFeature1Title"></p><p id="bannerFeature1Sub"></p></div>
      <div><p id="bannerFeature2Title"></p><p id="bannerFeature2Sub"></p></div>
      <div><p id="bannerFeature3Title"></p><p id="bannerFeature3Sub"></p></div>
      <div><p id="bannerFeature4Title"></p><p id="bannerFeature4Sub"></p></div>
    </div>

    <!-- ═══ SECTION 2: Search panel ═══ -->
    <div class="home-search-shell" style="padding:24px 20px 20px;background:#0d0d0d;">

      <p id="homeSearchIntroText" class="home-search-intro-text" style="display:none;"></p>

      <!-- Intent toggle (flash vs shop) -->
      <div class="home-search-intent-row" style="margin-bottom:16px;">
        <div class="home-search-intent-actions" style="display:flex;">
          <button id="homeSearchIntentFlashBtn" type="button" class="secondary-btn home-intent-btn" onclick="setHomeSearchIntent('flash')"
            style="flex:1;padding:11px 16px;font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;border-radius:0;border:1px solid rgba(201,168,76,0.25);border-right:none;cursor:pointer;background:#161616;color:#f0e8d8;">Flash tattoo</button>
          <button id="homeSearchIntentShopBtn" type="button" class="secondary-btn home-intent-btn active" onclick="setHomeSearchIntent('shop')"
            style="flex:1;padding:11px 16px;font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;border-radius:0;border:1px solid rgba(201,168,76,0.25);cursor:pointer;background:rgba(201,168,76,0.15);color:#d4b965;">A shop</button>
        </div>
      </div>

      <p id="homeSearchLocationHelp" class="home-search-intro-subtext" style="display:none;"></p>

      <!-- Location input -->
      <div class="home-location-row" style="display:flex;margin-bottom:12px;align-items:stretch;">
        <div class="home-location-input-wrap" style="flex:1;min-width:0;">
          <label id="searchLocationLabel" class="sr-only" for="searchLocation">Location</label>
          <input type="text" id="searchLocation" placeholder="Search by location" autocomplete="street-address"
            style="width:100%;box-sizing:border-box;display:block;border-radius:0;background:#1a1a1a;color:#f0e8d8;border:1px solid rgba(201,168,76,0.45);padding:13px 14px;font-size:0.9rem;box-shadow:inset 0 1px 4px rgba(0,0,0,0.3);">
        </div>
        <button id="useLocationBtn" type="button" class="home-location-btn" onclick="useCurrentLocationForSearch()" aria-label="Use my location"
          style="background:#1a1a1a;border:1px solid rgba(201,168,76,0.45);border-left:none;border-radius:0;padding:0 12px;width:48px;min-width:48px;max-width:48px;height:auto;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#c9a84c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>
        </button>
      </div>

      <!-- Distance slider -->
      <div style="margin-bottom:14px;">
        <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;">
          <p id="homeDistanceLabel" class="home-range-label" style="font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:#8a7e6a;margin:0;">Distance</p>
          <span id="distanceSliderValue" style="font-size:0.82rem;color:#c9a84c;font-weight:700;letter-spacing:0.04em;">25 km</span>
        </div>
        <input type="range" id="distanceSlider" min="5" max="100" step="5" value="25"
          oninput="document.getElementById('distanceSliderValue').textContent=this.value+' km';document.getElementById('distance').value=this.value;var p=((this.value-this.min)/(this.max-this.min))*100;this.style.setProperty('background','linear-gradient(90deg,#c9a84c '+p+'%,#2a2a2a '+p+'%)','important');"
          style="width:100%;height:6px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,#c9a84c 21.05%,#2a2a2a 21.05%);border-radius:3px;outline:none;cursor:pointer;">
        <div style="display:flex;justify-content:space-between;margin-top:4px;position:relative;">
          <span style="font-size:0.6rem;color:#8a7e6a;text-align:left;">5 km</span>
          <span style="font-size:0.6rem;color:#8a7e6a;position:absolute;left:21%;transform:translateX(-50%);">25 km</span>
          <span style="font-size:0.6rem;color:#8a7e6a;position:absolute;left:47.4%;transform:translateX(-50%);">50 km</span>
          <span style="font-size:0.6rem;color:#8a7e6a;text-align:right;">100 km</span>
        </div>
      </div>

      <!-- Style -->
      <div style="margin-bottom:16px;">
        <label id="styleLabel" for="style" style="display:block;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:#8a7e6a;margin:0 0 6px;">Style</label>
        <div style="display:flex;flex-direction:row;flex-wrap:nowrap;gap:0;">
          <select id="style" style="flex:1 1 auto;min-width:0;border-radius:0;background:#1a1a1a;color:#f0e8d8;border:1px solid rgba(201,168,76,0.45);border-right:none;padding:11px 12px;font-size:0.88rem;box-shadow:inset 0 1px 4px rgba(0,0,0,0.3);">
            <option>Allround</option>
            <option>Traditional / Old School</option>
            <option>Neo-Traditional</option>
            <option>Realism / Photorealism</option>
            <option>Japanese (Irezumi)</option>
            <option>Blackwork</option>
            <option>Fine Line / Micro</option>
            <option>Watercolor</option>
            <option>Geometric / Dotwork / Mandalas</option>
            <option>Illustrative</option>
            <option>Trash Polka</option>
            <option>Tribal</option>
            <option>Cyber Sigilism</option>
            <option>Lettering / Script</option>
            <option>Biomechanical / Bio-organic</option>
            <option>Embroidery</option>
          </select>
          <button type="button" class="info-btn" onclick="showStyleInfo('style')" aria-label="Style information"
            style="flex:0 0 42px;background:#1a1a1a;color:#c9a84c;border:1px solid rgba(201,168,76,0.45);border-radius:0;font-style:italic;cursor:pointer;font-size:0.9rem;">i</button>
        </div>
      </div>

      <input type="hidden" id="distance" value="25">
      <input type="hidden" id="searchScope" value="all">
      <input type="hidden" id="experience" value="0">
      <input type="hidden" id="searchIntent" value="shop">

      <!-- Primary CTA -->
      <div class="home-search-actions" style="margin:0 0 12px;">
        <button id="searchStudiosBtn" type="button" onclick="startSearch()"
          style="width:100%;padding:15px;font-size:0.88rem;background:linear-gradient(135deg,#c9a84c,#a8893a);color:#0d0d0d;border:none;border-radius:0;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;cursor:pointer;display:block;box-shadow:0 4px 20px rgba(201,168,76,0.3);">Find tattoo studios</button>
        <button id="nearMeQuickBtn" type="button" onclick="quickSearchNearMe()"
          style="width:100%;padding:10px;font-size:0.75rem;background:transparent;color:#c9a84c;border:1px solid rgba(201,168,76,0.3);border-radius:0;text-transform:uppercase;letter-spacing:0.1em;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#c9a84c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>
          <span id="nearMeQuickBtnLabel">Studios near me</span>
        </button>
      </div>

      <!-- Search by name -->
      <p id="homeShopSearchLabel" class="home-search-intro-subtext" style="display:none;"></p>
      <div id="homeShopNameSearchWrap" style="margin-bottom:6px;">
        <div class="home-location-input-wrap" style="margin-bottom:3px;">
          <label id="homeShopNameSearchLabel" class="sr-only" for="homeShopNameSearch">Shop name</label>
          <input type="text" id="homeShopNameSearch" list="homeShopNameSearchList" placeholder="Type a shop name" autocomplete="organization"
            style="width:100%;box-sizing:border-box;display:block;border-radius:0;background:#1a1a1a;color:#f0e8d8;border:1px solid rgba(201,168,76,0.35);padding:11px 14px;font-size:0.85rem;box-shadow:inset 0 1px 4px rgba(0,0,0,0.3);">
          <datalist id="homeShopNameSearchList"></datalist>
        </div>
        <p id="homeShopNameSearchHelp" class="form-help-text" style="font-size:0.65rem;color:#8a7e6a;margin:0;">Start typing to jump straight to a studio page.</p>
      </div>

      <!-- ═══ How it works ═══ -->
      <div style="margin:28px 0 24px;padding:20px 0;">
        <p id="howItWorksTitle" style="margin:0 0 16px;text-align:center;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.18em;color:#8a7e6a;font-weight:600;">How it works</p>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center;">
          <div style="padding:14px 6px;">
            <div style="font-size:1.5rem;margin-bottom:8px;line-height:1;">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#c9a84c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            </div>
            <p id="howStep1Title" style="margin:0 0 4px;font-size:0.72rem;font-weight:700;color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;">Search</p>
            <p id="howStep1Desc" style="margin:0;font-size:0.65rem;color:#8a7e6a;line-height:1.4;">Find studios and artists near you</p>
          </div>
          <div style="padding:14px 6px;border-left:1px solid rgba(201,168,76,0.1);border-right:1px solid rgba(201,168,76,0.1);">
            <div style="font-size:1.5rem;margin-bottom:8px;line-height:1;">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#c9a84c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
            </div>
            <p id="howStep2Title" style="margin:0 0 4px;font-size:0.72rem;font-weight:700;color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;">Browse</p>
            <p id="howStep2Desc" style="margin:0;font-size:0.65rem;color:#8a7e6a;line-height:1.4;">Compare portfolios and flash designs</p>
          </div>
          <div style="padding:14px 6px;">
            <div style="font-size:1.5rem;margin-bottom:8px;line-height:1;">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#c9a84c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            </div>
            <p id="howStep3Title" style="margin:0 0 4px;font-size:0.72rem;font-weight:700;color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;">Connect</p>
            <p id="howStep3Desc" style="margin:0;font-size:0.65rem;color:#8a7e6a;line-height:1.4;">Message artists and book directly</p>
          </div>
        </div>
      </div>

      <!-- ═══ Flash nearby preview ═══ -->
      <div id="homeFlashPreview" style="margin:0 0 24px;padding:0;">
        <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;">
          <p id="homeFlashPreviewTitle" style="margin:0;font-size:0.72rem;font-weight:700;color:#c9a84c;text-transform:uppercase;letter-spacing:0.1em;">&#9889; Flash available near you</p>
          <button type="button" onclick="openFlashFromMenu()" style="background:transparent;border:none;color:#c9a84c;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.06em;cursor:pointer;padding:0;">See all &rarr;</button>
        </div>
        <div id="homeFlashPreviewGrid" style="display:grid;grid-template-columns:repeat(3, 1fr);gap:6px;">
          <!-- 9 placeholder cards -->
          <div class="home-flash-preview-card" style="background:#161616;border:1px solid rgba(201,168,76,0.15);border-radius:4px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;"><p style="margin:0;font-size:0.55rem;color:#5a5347;">...</p></div>
          <div class="home-flash-preview-card" style="background:#161616;border:1px solid rgba(201,168,76,0.15);border-radius:4px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;"><p style="margin:0;font-size:0.55rem;color:#5a5347;">...</p></div>
          <div class="home-flash-preview-card" style="background:#161616;border:1px solid rgba(201,168,76,0.15);border-radius:4px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;"><p style="margin:0;font-size:0.55rem;color:#5a5347;">...</p></div>
          <div class="home-flash-preview-card" style="background:#161616;border:1px solid rgba(201,168,76,0.15);border-radius:4px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;"><p style="margin:0;font-size:0.55rem;color:#5a5347;">...</p></div>
          <div class="home-flash-preview-card" style="background:#161616;border:1px solid rgba(201,168,76,0.15);border-radius:4px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;"><p style="margin:0;font-size:0.55rem;color:#5a5347;">...</p></div>
          <div class="home-flash-preview-card" style="background:#161616;border:1px solid rgba(201,168,76,0.15);border-radius:4px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;"><p style="margin:0;font-size:0.55rem;color:#5a5347;">...</p></div>
          <div class="home-flash-preview-card" style="background:#161616;border:1px solid rgba(201,168,76,0.15);border-radius:4px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;"><p style="margin:0;font-size:0.55rem;color:#5a5347;">...</p></div>
          <div class="home-flash-preview-card" style="background:#161616;border:1px solid rgba(201,168,76,0.15);border-radius:4px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;"><p style="margin:0;font-size:0.55rem;color:#5a5347;">...</p></div>
          <div class="home-flash-preview-card" style="background:#161616;border:1px solid rgba(201,168,76,0.15);border-radius:4px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;"><p style="margin:0;font-size:0.55rem;color:#5a5347;">...</p></div>
        </div>
      </div>

      <!-- ═══ Mon Parcours Tattoo teaser ═══ -->
      <div id="homeParcoursTeaser" style="margin:0 0 24px;padding:20px;background:linear-gradient(135deg,#1a1710,#161616);border:1px solid rgba(201,168,76,0.2);border-radius:4px;">
        <p id="homeParcoursTeaserTitle" style="margin:0 0 6px;font-size:0.72rem;font-weight:700;color:#c9a84c;text-transform:uppercase;letter-spacing:0.1em;">&#128204; Plan your tattoo</p>
        <p id="homeParcoursTeaserDesc" style="margin:0 0 14px;font-size:0.72rem;color:#8a7e6a;line-height:1.5;">Organize your project from A to Z</p>
        <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 14px;">
          <span style="background:#c9a84c;color:#0d0d0d;padding:5px 12px;border-radius:14px;font-size:0.65rem;font-weight:600;">&#128161; Idea</span>
          <span style="color:rgba(201,168,76,0.3);font-size:0.8rem;">&rarr;</span>
          <span style="background:rgba(201,168,76,0.12);color:#c9a84c;padding:5px 12px;border-radius:14px;font-size:0.65rem;">&#128197; Booked</span>
          <span style="color:rgba(201,168,76,0.3);font-size:0.8rem;">&rarr;</span>
          <span style="background:rgba(201,168,76,0.12);color:#c9a84c;padding:5px 12px;border-radius:14px;font-size:0.65rem;">&#10003; Done</span>
        </div>
        <button type="button" onclick="openCollectionFromMenu()" id="homeParcoursTeaserBtn"
          style="display:block;width:100%;background:linear-gradient(135deg,#c9a84c,#a8893a);color:#0d0d0d;text-align:center;padding:11px;border:none;border-radius:4px;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;cursor:pointer;">Start my journey</button>
      </div>

      <!-- ═══ Live social-proof counters ═══ -->
      <div class="home-live-counters" id="homeLiveCounters" style="display:none;margin:0 0 24px;padding:16px 0;">
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;">
          <div class="home-counter-card" style="padding:14px 6px;">
            <p id="liveCountVisitors" class="home-counter-number" style="margin:0 0 2px;font-size:1.4rem;font-weight:800;color:#c9a84c;letter-spacing:0.02em;line-height:1;">—</p>
            <p id="liveCountVisitorsLabel" style="margin:0;font-size:0.6rem;color:#8a7e6a;text-transform:uppercase;letter-spacing:0.12em;font-weight:600;">Visitors</p>
          </div>
          <div class="home-counter-card" style="padding:14px 6px;border-left:1px solid rgba(201,168,76,0.1);border-right:1px solid rgba(201,168,76,0.1);">
            <p id="liveCountArtists" class="home-counter-number" style="margin:0 0 2px;font-size:1.4rem;font-weight:800;color:#c9a84c;letter-spacing:0.02em;line-height:1;">—</p>
            <p id="liveCountArtistsLabel" style="margin:0;font-size:0.6rem;color:#8a7e6a;text-transform:uppercase;letter-spacing:0.12em;font-weight:600;">Artists</p>
          </div>
          <div class="home-counter-card" style="padding:14px 6px;">
            <p id="liveCountStudios" class="home-counter-number" style="margin:0 0 2px;font-size:1.4rem;font-weight:800;color:#c9a84c;letter-spacing:0.02em;line-height:1;">—</p>
            <p id="liveCountStudiosLabel" style="margin:0;font-size:0.6rem;color:#8a7e6a;text-transform:uppercase;letter-spacing:0.12em;font-weight:600;">Studios</p>
          </div>
        </div>
      </div>

      <!-- ═══ UPCOMING EVENTS ═══ -->
      <div id="upcomingEventsSection" class="upcoming-events-section" style="display:none;margin:0 0 24px;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;">
          <h3 id="upcomingEventsTitle" style="margin:0;font-size:0.9rem;color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;">Events à venir</h3>
          <button type="button" id="upcomingEventsSeeAll" onclick="window.__openEventsPage && window.__openEventsPage()"
            style="background:none;border:none;color:#c9a84c;font-size:0.72rem;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:0.06em;">Voir tous →</button>
        </div>
        <div id="upcomingEventsScroll" class="upcoming-events-scroll"></div>
      </div>

      <!-- ═══ TRENDING THIS WEEK ═══ -->
      <div id="trendingSection" class="trending-section" style="display:none;">
        <h3 id="trendingSectionTitle" style="margin:0 0 4px;font-size:0.9rem;color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;">Trending This Week</h3>
        <p id="trendingSectionSubtitle" style="margin:0 0 10px;font-size:0.78rem;color:#8a7e6a;">The most loved uploads from our community</p>
        <div id="trendingGrid" class="trending-grid"></div>
      </div>

      <!-- ═══ SECTION 3: Discover — portfolio showcase ═══ -->
      <div class="home-spotlight-actions" style="display:flex;margin:0 0 14px;">
        <button id="homeNewStudiosBtn" type="button" class="secondary-btn home-premium-btn" onclick="setHomePreviewMode('portfolio')"
          style="flex:1;border-radius:0;background:#161616;color:#8a7e6a;border:1px solid rgba(201,168,76,0.25);border-right:none;font-size:0.72rem;letter-spacing:0.07em;text-transform:uppercase;padding:10px 4px;cursor:pointer;">Tattoo portfolio</button>
        <button id="homeFlashNowBtn" type="button" class="secondary-btn home-premium-btn" onclick="setHomePreviewMode('flash')"
          style="flex:1;border-radius:0;background:#161616;color:#8a7e6a;border:1px solid rgba(201,168,76,0.25);border-right:none;font-size:0.72rem;letter-spacing:0.07em;text-transform:uppercase;padding:10px 4px;cursor:pointer;">Available flash</button>
        <button id="homeNewArtistsBtn" type="button" class="secondary-btn home-premium-btn" onclick="setHomePreviewMode('artwork')"
          style="flex:1;border-radius:0;background:#161616;color:#8a7e6a;border:1px solid rgba(201,168,76,0.25);border-right:none;font-size:0.72rem;letter-spacing:0.07em;text-transform:uppercase;padding:10px 4px;cursor:pointer;">Artwork portfolio</button>
        <button id="homeSurpriseMeBtn" type="button" class="secondary-btn home-premium-btn" onclick="surpriseMeShuffle()"
          style="flex:1;border-radius:0;background:linear-gradient(135deg,#c9a84c,#a8893a);color:#0d0d0d;border:1px solid rgba(201,168,76,0.25);font-size:0.72rem;letter-spacing:0.07em;text-transform:uppercase;padding:10px 4px;cursor:pointer;font-weight:700;">&#10024; <span id="homeSurpriseMeBtnLabel">Surprise me</span></button>
      </div>

      <div class="home-latest-section">
        <div class="home-latest-header" style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;">
          <h3 id="homeLatestTitle" style="margin:0;font-size:0.9rem;color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;">Latest uploads</h3>
          <button id="homeLatestMoreBtn" type="button" class="secondary-btn home-premium-btn" onclick="openHomePreviewFeedPage()"
            style="background:transparent;border:none;color:#c9a84c;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;cursor:pointer;padding:4px 0;">See more &rarr;</button>
        </div>
        <div id="homeLatestUploads" class="home-latest-grid"></div>
      </div>

      <!-- Community proof — minimal -->
      <div class="home-community-proof" style="display:none;gap:8px;padding:18px;border-radius:0;background:#161616;border:1px solid rgba(201,168,76,0.15);box-shadow:none;text-align:center;">
        <p class="home-explainer-eyebrow" style="margin:0;color:#c9a84c;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.12em;">Browse real studios</p>
        <strong id="homeMemberCount" style="font-size:1rem;color:#f0e8d8;">Explore studios, portfolios, and flash designs near you.</strong>
      </div>

      <!-- ═══ Divider ═══ -->
      <div style="height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.2),transparent);margin:22px 0;"></div>

      <!-- ═══ SEO Guides Section ═══ -->
      <section class="home-guides-section" style="margin:0 0 24px;">
        <p id="guidesSectionTitle" style="margin:0 0 14px;text-align:center;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.18em;color:#8a7e6a;font-weight:600;">Guides &amp; Resources</p>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
          <button type="button" class="home-guide-card" onclick="window.showGuide('fine-line')" style="text-align:left;padding:16px 14px;background:#161616;border:1px solid rgba(201,168,76,0.12);border-radius:4px;cursor:pointer;">
            <p id="guideCardFineLineTitle" style="margin:0 0 4px;font-size:0.72rem;font-weight:700;color:#f0e8d8;">What is Fine Line?</p>
            <p id="guideCardFineLineDesc" style="margin:0;font-size:0.6rem;color:#8a7e6a;line-height:1.4;">Delicate single-needle tattoos explained</p>
          </button>
          <button type="button" class="home-guide-card" onclick="window.showGuide('aftercare')" style="text-align:left;padding:16px 14px;background:#161616;border:1px solid rgba(201,168,76,0.12);border-radius:4px;cursor:pointer;">
            <p id="guideCardAftercareTitle" style="margin:0 0 4px;font-size:0.72rem;font-weight:700;color:#f0e8d8;">Tattoo Aftercare</p>
            <p id="guideCardAftercareDesc" style="margin:0;font-size:0.6rem;color:#8a7e6a;line-height:1.4;">How to heal your new tattoo properly</p>
          </button>
          <button type="button" class="home-guide-card" onclick="window.showGuide('styles')" style="text-align:left;padding:16px 14px;background:#161616;border:1px solid rgba(201,168,76,0.12);border-radius:4px;cursor:pointer;">
            <p id="guideCardStylesTitle" style="margin:0 0 4px;font-size:0.72rem;font-weight:700;color:#f0e8d8;">Tattoo Styles Guide</p>
            <p id="guideCardStylesDesc" style="margin:0;font-size:0.6rem;color:#8a7e6a;line-height:1.4;">From traditional to watercolor — all styles</p>
          </button>
          <button type="button" class="home-guide-card" onclick="window.showGuide('first-tattoo')" style="text-align:left;padding:16px 14px;background:#161616;border:1px solid rgba(201,168,76,0.12);border-radius:4px;cursor:pointer;">
            <p id="guideCardFirstTattooTitle" style="margin:0 0 4px;font-size:0.72rem;font-weight:700;color:#f0e8d8;">Your First Tattoo</p>
            <p id="guideCardFirstTattooDesc" style="margin:0;font-size:0.6rem;color:#8a7e6a;line-height:1.4;">What to expect and how to prepare</p>
          </button>
        </div>
      </section>

      <!-- ═══ Pricing / Plans (moved below guides — content before commerce) ═══ -->
      <div id="homePricingSection" style="margin:0 0 28px;padding:24px 0;border-top:1px solid rgba(201,168,76,0.1);">
        <p id="pricingSectionTitle" style="margin:0 0 6px;text-align:center;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.18em;color:#8a7e6a;font-weight:600;">Plans</p>
        <p id="pricingSectionSubtitle" style="margin:0 0 18px;text-align:center;font-size:0.78rem;color:#f0e8d8;">Artists &amp; clients always free. Premium for studios &amp; artists who want more.</p>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:480px;margin:0 auto;">
          <!-- Free plan -->
          <div style="padding:18px 14px;background:#161616;border:1px solid rgba(201,168,76,0.15);border-radius:4px;">
            <p style="margin:0 0 4px;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:#8a7e6a;font-weight:600;">Free</p>
            <p style="margin:0 0 12px;font-size:1.4rem;font-weight:800;color:#f0e8d8;line-height:1;">0 EUR</p>
            <ul style="list-style:none;padding:0;margin:0;font-size:0.68rem;color:#a89e8c;line-height:1.8;">
              <li>&#10003; Profile &amp; map listing</li>
              <li>&#10003; 3 tattoo portfolio images</li>
              <li>&#10003; 3 flash designs</li>
              <li>&#10003; Messaging &amp; bookings</li>
              <li>&#10003; Artist affiliations</li>
              <li style="color:#5a5347;">&#10007; No art portfolio</li>
              <li style="color:#5a5347;">&#10007; No stats</li>
            </ul>
          </div>
          <!-- Premium plan -->
          <div style="padding:18px 14px;background:#1a1710;border:1.5px solid rgba(201,168,76,0.4);border-radius:4px;position:relative;">
            <span style="position:absolute;top:-9px;right:12px;background:#c9a84c;color:#0d0d0d;font-size:0.55rem;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.06em;">Popular</span>
            <p style="margin:0 0 4px;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:#c9a84c;font-weight:600;">Premium</p>
            <p style="margin:0 0 2px;font-size:1.4rem;font-weight:800;color:#f0e8d8;line-height:1;">4.99 EUR<span style="font-size:0.6rem;font-weight:400;color:#8a7e6a;">/mo</span></p>
            <ul style="list-style:none;padding:0;margin:0;font-size:0.68rem;color:#a89e8c;line-height:1.8;margin-top:12px;">
              <li style="color:#f0e8d8;">&#10003; 100 tattoo portfolio images</li>
              <li style="color:#f0e8d8;">&#10003; 100 flash designs</li>
              <li style="color:#f0e8d8;">&#10003; 100 art portfolio images</li>
              <li style="color:#f0e8d8;">&#10003; Stats &amp; insights</li>
              <li style="color:#f0e8d8;">&#10003; Team &amp; guest management</li>
              <li style="color:#f0e8d8;">&#10003; Availability calendar</li>
            </ul>
          </div>
        </div>
        <p style="margin:12px 0 0;text-align:center;font-size:0.6rem;color:#5a5347;">Clients always use InkRadar for free.</p>
      </div>

      <!-- ═══ SECTION 4: CTA — simplified single card ═══ -->
      <section class="home-cta-section" style="padding:24px 20px;border-radius:0;background:#111111;border:1px solid rgba(201,168,76,0.15);box-shadow:none;text-align:center;">
        <h3 id="ctaTitleText" style="font-size:0.9rem;font-weight:700;color:#c9a84c;margin:0 0 8px;text-transform:uppercase;letter-spacing:0.1em;">Ready to get started?</h3>
        <p id="ctaClientsDescText" style="font-size:0.78rem;color:#b8aa94;margin:0 0 16px;line-height:1.5;">Save favorites, message studios, and manage your portfolio.</p>
        <div style="display:flex;gap:10px;">
          <button id="ctaClientsBtn" type="button" class="secondary-btn home-premium-btn" onclick="toggleAuthBox()"
            style="flex:1;border-radius:0;background:#161616;color:#f0e8d8;border:1px solid rgba(201,168,76,0.3);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.07em;padding:11px 8px;cursor:pointer;">
            <span id="ctaClientsTitleText">Create account</span></button>
          <button id="ctaShopsBtn" type="button" class="secondary-btn home-premium-btn home-premium-btn-accent" onclick="showRegisterForm()"
            style="flex:1;border-radius:0;background:linear-gradient(135deg,#c9a84c,#a8893a);color:#0d0d0d;border:none;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.07em;font-weight:700;padding:11px 8px;cursor:pointer;">
            <span id="ctaShopsTitleText">Register studio</span></button>
        </div>
        <p id="ctaShopsDescText" style="font-size:0.65rem;color:#8a7e6a;margin:8px 0 0;">Studio owners: claim your page and attract local clients.</p>
      </section>

    </div>
  </div>

  <div class="results-box" id="resultsBox" role="region" aria-label="Search results" style="display:none;">
    <p id="resultsCount"></p>
    <div id="map"></div>
    <div id="resultsList"></div>
  </div>

  <div class="profile-box" id="profileBox" role="region" aria-label="Studio profile" style="display:none;">
    <div id="profileContent"></div>
    <button id="backToResultsBtn" onclick="backToResults()">Back to results</button>
  </div>
  <div class="profile-box" id="registerBox" style="display:none;">
    <h2 id="registerHeading" style="text-align:center;">Tattoo Artist Registration</h2>

    <label id="shopNameLabel" for="shopName">Shop name</label>
    <input type="hidden" id="shopExistingId" value="">
    <input type="text" id="shopName" list="shopNameList" autocomplete="organization">
    <datalist id="shopNameList"></datalist>
    <p id="shopNameHelp" class="form-help-text">Start typing to find an existing shop, or keep typing to create a new one.</p>

    <label id="shopAddressLabel" for="shopAddress">Address</label>
    <input type="text" id="shopAddress">

    <label id="shopPhoneLabel" for="shopPhone">Phone</label>
    <input type="text" id="shopPhone">

    <label id="shopEmailLabel" for="shopEmail">Email</label>
    <input type="text" id="shopEmail">

    <label id="shopVatLabel" for="shopVatNumber">VAT number</label>
    <div class="vat-row">
      <select id="shopVatCountry">
        <option value="BE">BE</option>
        <option value="FR">FR</option>
        <option value="NL">NL</option>
        <option value="DE">DE</option>
        <option value="LU">LU</option>
        <option value="OTHER">Other</option>
      </select>
      <input type="text" id="shopVatNumber" placeholder="0123.456.789">
    </div>

    <label id="shopInstagramLabel" for="shopInstagram">Instagram</label>
    <input type="text" id="shopInstagram">

    <label id="shopExperienceLabel" for="shopExperience">Experience (years)</label>
    <input type="number" id="shopExperience">

    <label id="shopBioLabel" for="shopBio">Shop bio</label>
    <textarea id="shopBio" rows="4" placeholder="Tell clients about your studio, atmosphere, and specialties"></textarea>

    <label id="shopOpeningHoursLabel">Opening hours</label>
    <div id="shopHoursEditor" class="hours-editor"></div>

    <label id="shopStartingPriceLabel" for="shopStartingPrice">Starting price (EUR)</label>
    <input type="text" id="shopStartingPrice" placeholder="From 80 EUR · Hourly rate available">

    <h3 class="upload-section-title" id="imagesSectionTitle">Images &amp; Media</h3>

    <div class="upload-section-card upload-section-logo">
      <div class="upload-section-header">
        <span class="upload-section-icon">🖼️</span>
        <div>
          <label id="shopLogoLabel" for="shopLogo">Shop logo</label>
          <p id="shopLogoHelp" class="form-help-text">Small square logo for the profile header. Recommended size: 600 x 600 px.</p>
        </div>
      </div>
      <input type="file" id="shopLogo" accept="image/*">
    </div>

    <div class="upload-section-card upload-section-banner">
      <div class="upload-section-header">
        <span class="upload-section-icon">🏞️</span>
        <div>
          <label id="shopBannerLabel" for="shopBanner">Shop banner image</label>
          <p id="shopBannerHelp" class="form-help-text">This image appears at the top of your shop profile. Recommended size: 1600 x 720 px. Upload exactly one image.</p>
        </div>
      </div>
      <div class="upload-section-visual banner-visual-hint" id="shopBannerPreview">
        <span class="visual-hint-text" id="shopBannerHintText">No banner selected</span>
      </div>
      <input type="file" id="shopBanner" accept="image/*">
    </div>

    <div class="upload-section-card upload-section-portfolio">
      <div class="upload-section-header">
        <span class="upload-section-icon">📸</span>
        <div>
          <label id="shopPortfolioLabel" for="shopPortfolio">Portfolio images</label>
          <p id="shopPortfolioHelp" class="form-help-text">Upload your tattoo work. You can add more later from your shop dashboard.</p>
        </div>
      </div>
      <div class="upload-section-visual portfolio-visual-hint" id="shopPortfolioPreview">
        <span class="visual-hint-text" id="shopPortfolioHintText">No images selected</span>
      </div>
      <input type="file" id="shopPortfolio" multiple accept="image/*">
    </div>

    <div class="account-actions-column">
      <button id="saveShopBtn" onclick="saveShop()">Save shop</button>
      <button id="registerCancelBtn" onclick="hideRegisterForm()" class="secondary-btn">Cancel</button>
    </div>
  </div>

  <div class="profile-box" id="editBox" style="display:none;">
    <h2 id="editHeading" style="text-align:center;">Edit Tattoo Shop</h2>
    <input type="hidden" id="editShopId">

    <div class="shop-edit-tabs">
      <button type="button" class="shop-edit-tab active" data-edit-tab="general" onclick="switchShopEditTab('general')" id="shopEditTabGeneral">General</button>
      <button type="button" class="shop-edit-tab" data-edit-tab="medias" onclick="switchShopEditTab('medias')" id="shopEditTabMedias">Media</button>
      <button type="button" class="shop-edit-tab" data-edit-tab="horaires" onclick="switchShopEditTab('horaires')" id="shopEditTabHoraires">Hours</button>
      <button type="button" class="shop-edit-tab" data-edit-tab="business" onclick="switchShopEditTab('business')" id="shopEditTabBusiness">Business</button>
    </div>

    <!-- Tab 1: General -->
    <div class="shop-edit-panel" data-edit-panel="general">
      <label id="editShopNameLabel" for="editShopName">Shop name</label>
      <input type="text" id="editShopName">
      <label id="editShopAddressLabel" for="editShopAddress">Address</label>
      <input type="text" id="editShopAddress">
      <label id="editShopPhoneLabel" for="editShopPhone">Phone</label>
      <input type="text" id="editShopPhone">
      <label id="editShopEmailLabel" for="editShopEmail">Email</label>
      <input type="text" id="editShopEmail">
      <label id="editShopBioLabel" for="editShopBio">Shop bio</label>
      <textarea id="editShopBio" rows="4" placeholder="Tell clients about your studio, atmosphere, and specialties"></textarea>
      <button type="button" class="shop-edit-save-btn" onclick="saveEditedShop()" id="saveEditedShopBtnGeneral">Save</button>
    </div>

    <!-- Tab 2: Medias -->
    <div class="shop-edit-panel" data-edit-panel="medias" style="display:none;">
      <div class="upload-section-card upload-section-logo">
        <div class="upload-section-header">
          <span class="upload-section-icon">🖼️</span>
          <div>
            <label id="editShopLogoLabel" for="editShopLogo">Shop logo</label>
            <p id="editShopLogoHelp" class="form-help-text">Small square logo for the profile header. Recommended size: 600 x 600 px.</p>
          </div>
        </div>
        <div class="upload-section-current-preview" id="editCurrentLogoPreview"></div>
        <input type="file" id="editShopLogo" accept="image/*">
      </div>
      <div class="upload-section-card upload-section-banner">
        <div class="upload-section-header">
          <span class="upload-section-icon">🏞️</span>
          <div>
            <label id="editShopBannerLabel" for="editShopBanner">Change banner image</label>
            <p id="editShopBannerHelp" class="form-help-text">Replace your shop banner. Recommended size: 1600 x 720 px.</p>
          </div>
        </div>
        <div class="upload-section-current-preview banner-current-preview" id="editCurrentBannerPreview"></div>
        <input type="file" id="editShopBanner" accept="image/*">
      </div>
      <div class="upload-section-card upload-section-portfolio">
        <div class="upload-section-header">
          <span class="upload-section-icon">📸</span>
          <div>
            <label id="editShopPortfolioLabel" for="editShopPortfolio">Add new portfolio images</label>
            <p id="editShopPortfolioHelp" class="form-help-text">Upload additional portfolio images.</p>
          </div>
        </div>
        <input type="file" id="editShopPortfolio" multiple accept="image/*">
        <div style="margin-top:10px;">
          <label id="editPortfolioCaptionLabel" for="editPortfolioCaption" style="font-size:0.78rem;color:#8a7e6a;">Caption (optional)</label>
          <input type="text" id="editPortfolioCaption" placeholder="Add a caption for this image..." style="width:100%;box-sizing:border-box;background:#0d0d0d;border:1px solid rgba(201,168,76,0.2);color:#f0e8d8;padding:8px 10px;font-size:0.82rem;border-radius:0;margin-top:4px;">
        </div>
        <div style="margin-top:10px;">
          <label id="editPortfolioCategoryLabel" style="font-size:0.78rem;color:#8a7e6a;">Category</label>
          <div class="portfolio-cat-chips" id="editPortfolioCatChips" style="margin-top:6px;">
            <button type="button" class="portfolio-cat-chip active" data-cat="studio" onclick="togglePortfolioCat(this)">Studio</button>
            <button type="button" class="portfolio-cat-chip" data-cat="ambiance" onclick="togglePortfolioCat(this)">Ambiance</button>
            <button type="button" class="portfolio-cat-chip" data-cat="events" onclick="togglePortfolioCat(this)">Events</button>
            <button type="button" class="portfolio-cat-chip" data-cat="work" onclick="togglePortfolioCat(this)">Work</button>
          </div>
        </div>
        <div id="editPortfolioPreview"></div>
      </div>
      <button type="button" class="shop-edit-save-btn" onclick="saveEditedShop()" id="saveEditedShopBtnMedias">Save</button>
    </div>

    <!-- Tab 3: Horaires -->
    <div class="shop-edit-panel" data-edit-panel="horaires" style="display:none;">
      <label id="editShopOpeningHoursLabel">Opening hours</label>
      <div id="editShopHoursEditor" class="hours-editor"></div>
      <button type="button" class="shop-edit-save-btn" onclick="saveEditedShop()" id="saveEditedShopBtnHoraires">Save</button>
    </div>

    <!-- Tab 4: Business -->
    <div class="shop-edit-panel" data-edit-panel="business" style="display:none;">
      <label id="editShopVatLabel" for="editShopVatNumber">VAT number</label>
      <div class="vat-row">
        <select id="editShopVatCountry">
          <option value="BE">BE</option>
          <option value="FR">FR</option>
          <option value="NL">NL</option>
          <option value="DE">DE</option>
          <option value="LU">LU</option>
          <option value="OTHER">Other</option>
        </select>
        <input type="text" id="editShopVatNumber" placeholder="0123.456.789">
      </div>
      <label id="editShopStartingPriceLabel" for="editShopStartingPrice">Starting price (EUR)</label>
      <input type="text" id="editShopStartingPrice" placeholder="From 80 EUR · Hourly rate available">
      <label id="editShopExperienceLabel" for="editShopExperience">Experience (years)</label>
      <input type="number" id="editShopExperience">
      <label id="editShopInstagramLabel" for="editShopInstagram">Instagram</label>
      <input type="text" id="editShopInstagram">
      <button type="button" class="shop-edit-save-btn" onclick="saveEditedShop()" id="saveEditedShopBtnBusiness">Save</button>
    </div>

    <div class="account-actions-column" style="margin-top:16px;">
      <button id="editCancelBtn" onclick="hideEditForm()" class="secondary-btn">Cancel</button>
    </div>
  </div>
  <div id="adminClaimsBox" style="display:none;"><div id="adminClaimsList"></div></div>
  <div id="feedBox" style="display:none;"><div id="feedList"></div></div>
  <div id="discoverBox" style="display:none;"><div id="discoverList"></div></div>
  <div id="flashBox" style="display:none;"><div id="flashList"></div></div>
  <div id="favoritesBox" style="display:none;"><div id="favoritesList"></div></div>
  <div id="collectionBox" style="display:none;"><div id="collectionList"></div></div>
  <div id="messagesBox" style="display:none;"><div id="messagesList"></div></div>
  <div id="eventsBox" class="profile-box" style="display:none;"></div>
  <div id="billingBox" class="profile-box" style="display:none;"></div>
  <div id="guideBox" class="profile-box" style="display:none;"><div id="guideContent"></div></div>
  <div class="profile-box" id="notificationsBox" style="display:none;">
    <div style="display:flex;align-items:center;justify-content:center;gap:10px;position:relative;">
      <h2 id="notificationsHeading" style="text-align:center;margin:0;">Notifications</h2>
      <button id="notifPrefsGearBtn" type="button" class="notif-prefs-gear-btn" aria-label="Notification settings" aria-expanded="false" onclick="toggleNotificationPrefsPanel()" title="Settings">&#9881;</button>
    </div>
    <p id="notificationsIntro" class="panel-intro">Stay on top of messages, affiliation updates, and actions waiting for you.</p>
    <div id="notificationsFilterBar" class="notifications-filter-bar">
      <button id="notificationsFilterUnreadBtn" type="button" class="secondary-btn active" onclick="setNotificationsFilter('unread')">Unread</button>
      <button id="notificationsFilterAllBtn" type="button" class="secondary-btn" onclick="setNotificationsFilter('all')">All</button>
    </div>
    <div id="notificationsUndoBar" class="notifications-undo-bar" style="display:none;"></div>
    <div id="notificationsList"></div>
    <button id="notificationsCloseBtn" onclick="hideNotificationsPage()">Close</button>
  </div>
  <div class="profile-box" id="resetPasswordBox" style="display:none; text-align:left;">
    <h2 id="resetHeading" style="text-align:center;">Set new password</h2>

    <label id="newPasswordLabel" for="newPassword">New password</label>
    <div class="password-field">
      <input type="password" id="newPassword">
      <button
        type="button"
        id="newPasswordToggle"
        class="password-toggle-btn"
        onclick="togglePasswordVisibility('newPassword', 'newPasswordToggle')"
        aria-label="Show password"
        aria-pressed="false"
      >
        <span class="password-toggle-eye" aria-hidden="true"></span>
      </button>
    </div>

    <label id="confirmNewPasswordLabel" for="confirmNewPassword">Confirm new password</label>
    <div class="password-field">
      <input type="password" id="confirmNewPassword">
      <button
        type="button"
        id="confirmNewPasswordToggle"
        class="password-toggle-btn"
        onclick="togglePasswordVisibility('confirmNewPassword', 'confirmNewPasswordToggle')"
        aria-label="Show password"
        aria-pressed="false"
      >
        <span class="password-toggle-eye" aria-hidden="true"></span>
      </button>
    </div>

    <div class="account-actions-column">
      <button id="saveNewPasswordBtn" onclick="updatePassword()">Save new password</button>
      <button id="resetCancelBtn" type="button" onclick="hideResetPasswordBox()" class="secondary-btn">Cancel</button>
    </div>

    <p id="resetPasswordStatus"></p>
  </div>
  </main>

  <div id="appToastRegion" class="app-toast-region" aria-live="polite" aria-atomic="true"></div>

  <!-- Style info modal -->
  <div id="styleInfoModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="styleInfoTitle" style="display:none;background:rgba(0,0,0,0.85);">
    <div class="modal-box" style="background:#111111;border:1px solid rgba(201,168,76,0.25);border-radius:0;color:#f0e8d8;max-width:560px;width:92%;">
      <div class="modal-header" style="border-bottom:1px solid rgba(201,168,76,0.15);padding-bottom:12px;display:flex;align-items:center;justify-content:space-between;">
        <h3 id="styleInfoTitle" style="color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;font-size:0.9rem;margin:0;">Style info</h3>
        <button type="button" class="modal-close-btn" onclick="closeStyleInfoModal()" aria-label="Close" style="background:transparent;border:none;color:#c9a84c;font-size:1.2rem;cursor:pointer;">&times;</button>
      </div>
      <p id="styleInfoText" style="color:#c8baa8;line-height:1.7;margin:14px 0;"></p>
      <div class="modal-actions" style="border-top:1px solid rgba(201,168,76,0.15);padding-top:12px;">
        <button type="button" onclick="closeStyleInfoModal()" style="background:#161616;color:#f0e8d8;border:1px solid rgba(201,168,76,0.3);border-radius:0;padding:9px 20px;cursor:pointer;text-transform:uppercase;letter-spacing:0.07em;font-size:0.78rem;">Close</button>
      </div>
    </div>
  </div>

  <!-- Message / confirmation modal -->
  <div id="bookingModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="bookingModalTitle" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.85);align-items:center;justify-content:center;">
    <div class="modal-box" style="background:#111111;border:1px solid rgba(201,168,76,0.25);border-radius:0;color:#f0e8d8;max-width:500px;width:92%;max-height:90vh;overflow-y:auto;">
      <div class="modal-header" style="border-bottom:1px solid rgba(201,168,76,0.15);padding-bottom:12px;display:flex;align-items:center;justify-content:space-between;">
        <h3 id="bookingModalTitle" style="color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;font-size:0.9rem;margin:0;">Request a Tattoo</h3>
        <button type="button" onclick="closeBookingModal()" style="background:none;border:none;color:#8a7e6a;font-size:1.4rem;cursor:pointer;padding:0 4px;" aria-label="Close">&times;</button>
      </div>
      <form id="bookingForm" onsubmit="event.preventDefault(); submitBookingForm();" style="margin-top:14px;">
        <input type="hidden" id="bookingShopId">
        <input type="hidden" id="bookingArtistUserId">
        <div id="bookingProjectSection" style="margin-bottom:12px;display:none;">
          <label id="bookingProjectLabel" style="display:block;font-size:0.78rem;color:#c9a84c;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em;">Link a project</label>
          <select id="bookingProjectSelect" class="booking-project-select" onchange="onBookingProjectSelected()">
            <option value="">-- No project --</option>
          </select>
          <div id="bookingProjectPreview" class="booking-project-preview" style="display:none;"></div>
        </div>
        <div style="margin-bottom:12px;">
          <label for="bookingDescription" id="bookingDescLabel" style="display:block;font-size:0.78rem;color:#c9a84c;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em;">Describe your tattoo</label>
          <textarea id="bookingDescription" rows="3" required style="width:100%;background:#0d0d0d;border:1px solid rgba(201,168,76,0.2);color:#f0e8d8;padding:10px;border-radius:0;font-size:0.85rem;resize:vertical;" placeholder="What do you have in mind?"></textarea>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
          <div>
            <label for="bookingSize" id="bookingSizeLabel" style="display:block;font-size:0.78rem;color:#c9a84c;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em;">Size</label>
            <select id="bookingSize" style="width:100%;background:#0d0d0d;border:1px solid rgba(201,168,76,0.2);color:#f0e8d8;padding:10px;border-radius:0;font-size:0.85rem;">
              <option value="small" id="bookingSizeSmall">Small (2-5 cm)</option>
              <option value="medium" id="bookingSizeMedium">Medium (5-15 cm)</option>
              <option value="large" id="bookingSizeLarge">Large (15-30 cm)</option>
              <option value="xlarge" id="bookingSizeXLarge">Extra large (30+ cm)</option>
              <option value="sleeve" id="bookingSizeSleeve">Sleeve / full piece</option>
            </select>
          </div>
          <div>
            <label for="bookingPlacement" id="bookingPlacementLabel" style="display:block;font-size:0.78rem;color:#c9a84c;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em;">Placement</label>
            <select id="bookingPlacement" style="width:100%;background:#0d0d0d;border:1px solid rgba(201,168,76,0.2);color:#f0e8d8;padding:10px;border-radius:0;font-size:0.85rem;">
              <option value="arm" id="bookingPlaceArm">Arm</option>
              <option value="forearm" id="bookingPlaceForearm">Forearm</option>
              <option value="leg" id="bookingPlaceLeg">Leg</option>
              <option value="back" id="bookingPlaceBack">Back</option>
              <option value="chest" id="bookingPlaceChest">Chest</option>
              <option value="ribs" id="bookingPlaceRibs">Ribs</option>
              <option value="shoulder" id="bookingPlaceShoulder">Shoulder</option>
              <option value="neck" id="bookingPlaceNeck">Neck</option>
              <option value="hand" id="bookingPlaceHand">Hand / Fingers</option>
              <option value="foot" id="bookingPlaceFoot">Foot / Ankle</option>
              <option value="other" id="bookingPlaceOther">Other</option>
            </select>
          </div>
        </div>
        <div style="margin-bottom:12px;">
          <label for="bookingStyle" id="bookingStyleLabel" style="display:block;font-size:0.78rem;color:#8a7e6a;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em;">Style (optional)</label>
          <input type="text" id="bookingStyle" style="width:100%;background:#0d0d0d;border:1px solid rgba(201,168,76,0.2);color:#f0e8d8;padding:10px;border-radius:0;font-size:0.85rem;" placeholder="e.g. Fine line, Traditional, Realism...">
        </div>
        <div style="margin-bottom:14px;">
          <label for="bookingRefPhotos" id="bookingRefLabel" style="display:block;font-size:0.78rem;color:#8a7e6a;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em;">Reference photos (optional)</label>
          <input type="file" id="bookingRefPhotos" accept="image/*" multiple style="width:100%;background:#0d0d0d;border:1px solid rgba(201,168,76,0.2);color:#f0e8d8;padding:8px;border-radius:0;font-size:0.8rem;">
        </div>
        <button type="submit" id="bookingSubmitBtn" style="width:100%;background:linear-gradient(135deg,#c9a84c,#a8893a);color:#0d0d0d;border:none;padding:12px;font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;cursor:pointer;">Send Request</button>
      </form>
    </div>
  </div>

  <div id="messageModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="messageModalTitle" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.85);align-items:center;justify-content:center;">
    <div class="modal-box" style="background:#111111;border:1px solid rgba(201,168,76,0.25);border-radius:0;color:#f0e8d8;max-width:480px;width:92%;">
      <div class="modal-header" style="border-bottom:1px solid rgba(201,168,76,0.15);padding-bottom:12px;display:flex;align-items:center;justify-content:space-between;">
        <h3 id="messageModalTitle" style="color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;font-size:0.9rem;margin:0;">Message</h3>
        <button type="button" class="modal-close-btn" onclick="closeMessageModal()" aria-label="Close" style="background:transparent;border:none;color:#c9a84c;font-size:1.2rem;cursor:pointer;">&times;</button>
      </div>
      <p id="messageModalText" style="color:#c8baa8;line-height:1.7;margin:14px 0;"></p>
      <div class="modal-actions" style="border-top:1px solid rgba(201,168,76,0.15);padding-top:12px;">
        <button type="button" id="messageModalCloseBtn" onclick="closeMessageModal()" style="background:#161616;color:#f0e8d8;border:1px solid rgba(201,168,76,0.3);border-radius:0;padding:9px 20px;cursor:pointer;text-transform:uppercase;letter-spacing:0.07em;font-size:0.78rem;">Close</button>
      </div>
    </div>
  </div>

  <!-- Post / portfolio image detail modal -->
  <div id="postDetailModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="postModalTitle" style="display:none;background:rgba(0,0,0,0.88);">
    <div class="modal-box" style="background:#111111;border:1px solid rgba(201,168,76,0.25);border-radius:0;color:#f0e8d8;max-width:700px;width:94%;">
      <div class="modal-header" style="border-bottom:1px solid rgba(201,168,76,0.15);padding-bottom:12px;display:flex;align-items:center;justify-content:space-between;">
        <h3 id="postModalTitle" style="color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;font-size:0.9rem;margin:0;">Post</h3>
        <button type="button" class="modal-close-btn" onclick="closePostDetailModal()" aria-label="Close" style="background:transparent;border:none;color:#c9a84c;font-size:1.2rem;cursor:pointer;">&times;</button>
      </div>
      <div id="postDetailContent" style="background:#111111;color:#c8baa8;"></div>
      <div class="modal-actions" id="postDetailActions" style="border-top:1px solid rgba(201,168,76,0.15);padding-top:12px;display:flex;flex-wrap:wrap;gap:8px;">
        <button type="button" onclick="closePostDetailModal()" style="background:#161616;color:#f0e8d8;border:1px solid rgba(201,168,76,0.3);border-radius:0;padding:9px 20px;cursor:pointer;text-transform:uppercase;letter-spacing:0.07em;font-size:0.78rem;">Close</button>
      </div>
    </div>
  </div>

  <div id="legalModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="legalModalTitle" style="display:none;background:rgba(0,0,0,0.85);">
    <div class="modal-box legal-modal-box" style="background:#111111;border:1px solid rgba(201,168,76,0.25);border-radius:0;color:#f0e8d8;max-width:680px;width:92%;">
      <div class="modal-header" style="border-bottom:1px solid rgba(201,168,76,0.15);padding-bottom:12px;">
        <h3 id="legalModalTitle" style="color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;font-size:0.9rem;">Legal</h3>
        <button type="button" class="modal-close-btn" onclick="closeLegalModal()" aria-label="Close" style="background:transparent;border:none;color:#c9a84c;font-size:1.2rem;cursor:pointer;">&times;</button>
      </div>
      <div id="legalModalContent" class="legal-content" style="background:#111111;color:#c8baa8;line-height:1.7;"></div>
      <div class="modal-actions" style="border-top:1px solid rgba(201,168,76,0.15);padding-top:12px;">
        <button id="legalCloseBtn" type="button" onclick="closeLegalModal()" style="background:#161616;color:#f0e8d8;border:1px solid rgba(201,168,76,0.3);border-radius:0;padding:9px 20px;cursor:pointer;text-transform:uppercase;letter-spacing:0.07em;font-size:0.78rem;">Close</button>
      </div>
    </div>
  </div>

  <div id="faqModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="faqModalTitle" style="display:none;background:rgba(0,0,0,0.85);">
    <div class="modal-box legal-modal-box" style="background:#111111;border:1px solid rgba(201,168,76,0.25);border-radius:0;color:#f0e8d8;max-width:680px;width:92%;">
      <div class="modal-header" style="border-bottom:1px solid rgba(201,168,76,0.15);padding-bottom:12px;">
        <h3 id="faqModalTitle" style="color:#f0e8d8;text-transform:uppercase;letter-spacing:0.08em;font-size:0.9rem;">FAQ</h3>
        <button type="button" class="modal-close-btn" onclick="closeFaqModal()" aria-label="Close" style="background:transparent;border:none;color:#c9a84c;font-size:1.2rem;cursor:pointer;">&times;</button>
      </div>
      <div id="faqModalContent" class="legal-content" style="background:#111111;color:#c8baa8;line-height:1.7;"></div>
      <div class="modal-actions" style="border-top:1px solid rgba(201,168,76,0.15);padding-top:12px;">
        <button id="faqCloseBtn" type="button" onclick="closeFaqModal()" style="background:#161616;color:#f0e8d8;border:1px solid rgba(201,168,76,0.3);border-radius:0;padding:9px 20px;cursor:pointer;text-transform:uppercase;letter-spacing:0.07em;font-size:0.78rem;">Close</button>
      </div>
    </div>
  </div>

  <footer id="appFooter" class="app-footer" role="contentinfo" aria-label="Site footer" style="margin:40px auto 80px; max-width:720px; text-align:center; color:#8a7e6a; font-size:13px; line-height:1.7;">
    <p id="footerSummary" style="margin:0 0 10px 0;">InkRadar helps people discover tattoo shops across cities and countries.</p>
    <p style="margin:0 0 10px;">
      <button id="faqBtn" type="button" class="footer-link-btn" onclick="openFaqModal()">FAQ</button>
      <span style="opacity:0.5;">|</span>
      <button id="privacyBtn" type="button" class="footer-link-btn" onclick="window.open('privacy.html','_blank')">Privacy Policy</button>
      <span style="opacity:0.5;">|</span>
      <button id="termsBtn" type="button" class="footer-link-btn" onclick="window.open('terms.html','_blank')">Terms of Use</button>
      <span style="opacity:0.5;">|</span>
      <button id="cookiesBtn" type="button" class="footer-link-btn" onclick="window.open('cookies.html','_blank')">Cookie Notice</button>
      <span style="opacity:0.5;">|</span>
      <button type="button" class="footer-link-btn" onclick="window.location.href='mailto:info@inkradar.eu'">Contact</button>
    </p>
    <div class="footer-social" style="display:flex;justify-content:center;gap:16px;margin:6px 0 0;">
      <a href="https://www.instagram.com/inkradar.eu" target="_blank" rel="noopener noreferrer" aria-label="InkRadar Instagram" style="color:#8a7e6a;text-decoration:none;display:inline-flex;align-items:center;gap:4px;font-size:0.78rem;">
        <img src="/img/instagram.png" alt="" style="width:16px;height:16px;object-fit:contain;opacity:0.6;"> Instagram
      </a>
    </div>
  </footer>

  <template id="privacyLegalTemplate">
    <div class="legal-hero">
      <span class="legal-eyebrow">InkRadar Legal</span>
      <h2>Privacy Policy</h2>
      <p class="legal-meta">Last updated: April 7, 2026</p>
      <p>EU / GDPR Compliant</p>
    </div>
    <section class="legal-section">
      <h4>1. Data Controller</h4>
      <p>InkRadar is operated by <strong>Nick Marien</strong> (trading as MrMurido), Rue Piquet 12, 7500 Tournai, Belgium. VAT: BE0886.227.632. Email: <strong>info@inkradar.eu</strong></p>
    </section>
    <section class="legal-section">
      <h4>2. Scope</h4>
      <p>This Privacy Policy explains how InkRadar collects, uses, stores, and protects personal data when users access or use the platform at inkradar.eu.</p>
    </section>
    <section class="legal-section">
      <h4>3. Personal Data We Collect</h4>
      <ul>
        <li>Account data: email address, authentication data (including OAuth via Google)</li>
        <li>Profile data: display name, profile image, preferences; for artists/shops: portfolio images, styles, business details</li>
        <li>User content: posts, images, messages, comments, interactions</li>
        <li>Technical data: IP address, browser type, device information, log data</li>
        <li>Location data: approximate or precise (only with user consent)</li>
        <li>Billing data: email and transaction metadata via Stripe (payment details never stored by InkRadar)</li>
        <li>Analytics data: aggregated and anonymized via Plausible Analytics</li>
      </ul>
    </section>
    <section class="legal-section">
      <h4>4. Legal Basis (GDPR)</h4>
      <ul>
        <li><strong>Contractual necessity</strong> (Art. 6(1)(b)) &mdash; account creation and service delivery</li>
        <li><strong>Legitimate interests</strong> (Art. 6(1)(f)) &mdash; security, improvement, fraud prevention</li>
        <li><strong>Consent</strong> (Art. 6(1)(a)) &mdash; optional features such as geolocation</li>
        <li><strong>Legal obligation</strong> (Art. 6(1)(c)) &mdash; compliance with Belgian and EU law</li>
      </ul>
    </section>
    <section class="legal-section">
      <h4>5. Data Sharing</h4>
      <p>We do not sell personal data. Data is shared only with trusted processors: Supabase (hosting), Stripe (payments), Plausible (analytics), Google (OAuth), OpenStreetMap/Leaflet (maps).</p>
    </section>
    <section class="legal-section">
      <h4>6. Your Rights</h4>
      <p>You have the right to access, rectify, erase, restrict, port, and object to processing of your data. Contact: <strong>info@inkradar.eu</strong>. You may also lodge a complaint with the Autorit&eacute; de protection des donn&eacute;es (Belgium).</p>
    </section>
    <section class="legal-section">
      <h4>7. Children</h4>
      <p>The platform is strictly limited to users aged 18 or older.</p>
    </section>
  </template>

  <template id="termsLegalTemplate">
    <div class="legal-hero">
      <span class="legal-eyebrow">InkRadar Legal</span>
      <h2>Terms of Use</h2>
      <p class="legal-meta">Last updated: April 7, 2026</p>
      <p>EU Compliant</p>
    </div>
    <section class="legal-section">
      <h4>1. Operator</h4>
      <p>InkRadar is operated by <strong>Nick Marien</strong> (trading as MrMurido), Rue Piquet 12, 7500 Tournai, Belgium. VAT: BE0886.227.632. Email: <strong>info@inkradar.eu</strong></p>
    </section>
    <section class="legal-section">
      <h4>2. The Service</h4>
      <p>InkRadar helps users discover tattoo studios and artists, view portfolios, follow shops, send messages, and interact with content. It is a marketplace and discovery tool, not a tattoo service provider.</p>
    </section>
    <section class="legal-section">
      <h4>3. Eligibility</h4>
      <p>Users must be 18 years of age or older.</p>
    </section>
    <section class="legal-section">
      <h4>4. User Content</h4>
      <p>You retain ownership of content you upload. By posting, you grant InkRadar a non-exclusive, worldwide, royalty-free, revocable license to host, display, and distribute content for platform operation.</p>
    </section>
    <section class="legal-section">
      <h4>5. Prohibited Conduct</h4>
      <p>No unlawful, defamatory, hateful content; no false claims; no hacking, scraping, or spam; no circumventing security controls.</p>
    </section>
    <section class="legal-section">
      <h4>6. Limitation of Liability</h4>
      <p>Service provided "as is". Liability capped at &euro;100 or amount paid in last 12 months, whichever is greater. Nothing excludes liability that cannot legally be excluded under Belgian/EU law.</p>
    </section>
    <section class="legal-section">
      <h4>7. Governing Law</h4>
      <p>Belgian law applies. EU consumers may use the ODR platform at <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noopener">ec.europa.eu/consumers/odr</a>.</p>
    </section>
  </template>

  <template id="cookiesLegalTemplate">
    <div class="legal-hero">
      <span class="legal-eyebrow">InkRadar Legal</span>
      <h2>Cookie Notice</h2>
      <p class="legal-meta">Last updated: March 26, 2026</p>
      <p>This Cookie Notice explains how InkRadar may use cookies and similar technologies on its website and application.</p>
    </div>
    <section class="legal-section">
      <h4>1. Why Cookies Are Used</h4>
      <p>Cookies may be used for login sessions, user preferences, security, and essential product functionality.</p>
    </section>
    <section class="legal-section">
      <h4>2. Managing Cookies</h4>
      <p>Users can manage cookies through browser settings. Disabling some cookies may affect login and core features.</p>
    </section>
    <section class="legal-section">
      <h4>3. Contact</h4>
      <p>Questions about this notice can be sent to <strong>info@inkradar.eu</strong>.</p>
    </section>
    <p class="legal-note">If you later add non-essential analytics or advertising tools, update this notice and consent flow before enabling them.</p>
  </template>

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
  <script>
    window.setSearchDistance = function (distanceValue) {
      const distanceEl = document.getElementById("distance");
      if (distanceEl) {
        distanceEl.value = String(distanceValue);
      }

      document.querySelectorAll(".home-range-btn").forEach(function (button) {
        button.classList.toggle("active", button.dataset.distanceValue === String(distanceValue));
      });
    };

    window.useCurrentLocationForSearch = async function () {
      const searchLocationEl = document.getElementById("searchLocation");
      const locationBtn = document.getElementById("useLocationBtn");

      if (!navigator.geolocation) {
        return;
      }

      navigator.geolocation.getCurrentPosition(async function (position) {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;

        if (locationBtn) {
          locationBtn.classList.add("active");
        }

        try {
          const url =
            "https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=" +
            encodeURIComponent(String(lat)) +
            "&lon=" +
            encodeURIComponent(String(lng));

          const response = await fetch(url, {
            headers: { Accept: "application/json" }
          });

          if (!response.ok) {
            return;
          }

          const data = await response.json();
          const address = data && data.address ? data.address : {};
          const city =
            address.city ||
            address.town ||
            address.village ||
            address.municipality ||
            address.county ||
            "";
          const country = address.country || "";
          const label = [city, country].filter(Boolean).join(", ") || (data && data.display_name) || "";

          if (searchLocationEl) {
            searchLocationEl.value = label;
          }
        } catch (error) {
          console.error("Inline location reverse geocode error:", error);
        }
      });
    };
  </script>
  <script type="module" src="/js/main.js?v=50"></script>
  <script>
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
        navigator.serviceWorker.register("/sw.js").catch(function () {});
      });
    }
    // PWA Install Prompt
    (function () {
      var deferredPrompt = null;
      var dismissedKey = "inkfinder_pwa_install_dismissed";
      window.addEventListener("beforeinstallprompt", function (e) {
        e.preventDefault();
        deferredPrompt = e;
        if (localStorage.getItem(dismissedKey)) return;
        setTimeout(function () { showPwaInstallBanner(); }, 8000);
      });
      function showPwaInstallBanner() {
        if (!deferredPrompt) return;
        var existing = document.getElementById("pwaInstallBanner");
        if (existing) return;
        var banner = document.createElement("div");
        banner.id = "pwaInstallBanner";
        banner.className = "pwa-install-banner";
        banner.innerHTML =
          '<div class="pwa-install-inner">' +
            '<img src="/img/Inkradar_Logo.png" alt="" style="width:32px;height:32px;object-fit:contain;">' +
            '<div class="pwa-install-text"><strong>Install InkRadar</strong><span>Add to your home screen for quick access</span></div>' +
            '<button type="button" id="pwaInstallBtn" class="pwa-install-btn">Install</button>' +
            '<button type="button" id="pwaInstallDismiss" class="pwa-install-dismiss" aria-label="Dismiss">&times;</button>' +
          '</div>';
        document.body.appendChild(banner);
        document.getElementById("pwaInstallBtn").addEventListener("click", function () {
          deferredPrompt.prompt();
          deferredPrompt.userChoice.then(function () { deferredPrompt = null; banner.remove(); });
        });
        document.getElementById("pwaInstallDismiss").addEventListener("click", function () {
          localStorage.setItem(dismissedKey, "1");
          banner.remove();
        });
      }
      window.addEventListener("appinstalled", function () {
        var b = document.getElementById("pwaInstallBanner");
        if (b) b.remove();
        deferredPrompt = null;
      });
    })();
  </script>
</body>
</html>
