/* ============================================================
   nasabytca.sk – mapa-sluzieb.css
   ============================================================ */

   @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css");

:root{
     --brand:#155e75;
     --accent:#10b981;
     --bg:#f8fafc;
     --text:#0f172a;
   }
   
   *{ box-sizing:border-box; }
   
   html{
     scrollbar-width: thin;
     scrollbar-color: rgba(21,94,117,.45) rgba(15,23,42,.06);
   }
   
   body{
     margin:0;
     background:var(--bg);
     color:var(--text);
     font-family:"Montserrat",sans-serif;
   }
   
   /* vnútri iframe – jemný scrollbar (Chrome/Edge) */
   body::-webkit-scrollbar{ width:10px; }
   body::-webkit-scrollbar-track{ background:rgba(15,23,42,.06); }
   body::-webkit-scrollbar-thumb{
     background:rgba(21,94,117,.45);
     border-radius:999px;
     border:2px solid var(--bg);
   }
   
   button,
   .leaflet-popup-content{
     font-family:"Montserrat",sans-serif;
   }
   
   .container-map.section-title{ padding:16px 16px 0; }
   .container-map.section-title h2{ margin:0 0 4px; }
   .container-map.section-title p{ margin:0 0 8px; }
   
   /* ===== Desktop / Tablet layout ===== */
   .wrap{
     max-width:1200px;
     margin:0 auto 16px;
   
     display:grid;
     grid-template-columns:minmax(0,1.4fr) minmax(0,0.9fr);
     gap:16px;
     padding:0 16px 16px;
   }
   
   #sidebar-map{
     background:#fff;
     border:1px solid #e5e7eb;
     border-radius:14px;
     padding:12px;
   }

   /* ===== Overené údaje – info box nad mapou ===== */
   .nb-verify-info{
     margin:0 0 12px;
     padding:12px;
     border:1px solid #e5e7eb;
     border-radius:14px;
     background:#f8fafc;
     color:#0f172a;
     font-size:.92rem;
     line-height:1.35;
   }
   .nb-verify-title{
     display:flex;
     align-items:center;
     gap:8px;
     font-weight:800;
     margin-bottom:6px;
   }
   .nb-verify-title i{
     font-size:1.05rem;
     color:var(--brand);
   }
   .nb-verify-text strong{ font-weight:800; }


   
   /* map shell (pre overlay) */
   .map-shell{ position:relative; }
   
   #map{
     height:70vh;
     min-height:420px;
     border:1px solid #e5e7eb;
     border-radius:14px;
     background:#e5e7eb;
   }
   
   /* ===== Pills / buttons ===== */
   .btn{
     display:inline-block;
     padding:10px 12px;
     border-radius:10px;
     border:1px solid #e5e7eb;
     background:radial-gradient(#000000e3, #7e6969c2);
     cursor:pointer;
     color:#fff;
     font-size:.9rem;
   }
   
   .btn-primary{
     background:var(--brand);
     color:#fff;
     border-color:var(--brand);
   }
   
   .pill{
     display:inline-block;
     padding:8px 12px;
     border-radius:999px;
     border:1px solid #e5e7eb;
     margin:4px 6px 0 0;
     cursor:pointer;
     font-size:.9rem;
     background:#fff;
     touch-action:manipulation;
   }
   
   .pill.active{
     background:#fb6000;
     color:#fff;
     border-color:#fb6000;
   }
   
   
   /* ===== Legend ===== */
   .legend{
     font-size:.85rem;
     color:#334155;
     padding:12px 0; /* menšie, aby sa iframe zbytočne nenafukoval */
   }
   
   /* pôvodné štvorčeky nech môžu ostať v HTML, ale nech sa nezobrazujú */
   .legend .legend-color{ display:none !important; }
   
   .legend .legend-premium-icon{
     display:inline-block;
     width:18px;
     text-align:center;
     margin-right:6px;
     vertical-align:middle;
     font-size:1rem;
     color:#facc15;
   }

   .leaflet-container a {
    color: #fb6000;
    text-decoration: none;
    border: 1px solid  rgba(148,163,184,.35);
    padding: 8px;
    border-radius: 10px;
}
   
   /* ===== Obec filter (ak používaš v HTML) ===== */
   .obec-filter{ margin-top:8px; }
   .field-label{
     display:block;
     font-size:.85rem;
     font-weight:700;
     margin:12px 0;
   }
   
   .sidebar-info__list  {
     background:#e5e4e4;
     padding:30px;
     font-size:.85rem;
     margin:10px 0;
   }
   
   .sidebar-info__list li{ margin:10px 0; }
   
   .select-wrap{ position:relative; }
   .select-wrap::after{
     content:"▾";
     position:absolute;
     right:12px;
     top:50%;
     transform:translateY(-50%);
     pointer-events:none;
     color:#e2e8f0;
     font-size:1rem;
   }
   
   .select-obec{
     width:100%;
     appearance:none;
     -webkit-appearance:none;
     -moz-appearance:none;
     font-family:"Montserrat",sans-serif;
     background:#435d62;
     color:#fff;
     border:1px solid rgba(148,163,184,.35);
     border-radius:12px;
   
     padding:10px 38px 10px 12px;
     font-size:.95rem;
     outline:none;
   
     transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
   }
   
   .select-obec:hover{ border-color:#0b6f4e; }
   .select-obec:focus{
     border-color:rgba(59,130,246,.75);
     box-shadow:0 0 0 3px rgba(59,130,246,.18);
   }
   
   .select-obec option{
    background:#435d62;
    
  
   }
   
   .obec-badge{
     display:none;
     margin-top:8px;
     align-items:center;
     gap:8px;
     background:#0f172a;
     color:#fff;
     border-radius:999px;
     padding:6px 10px;
     font-size:.85rem;
     width:max-content;
   }
   
   /* ===== Kontakt filtre (ak ich máš v HTML) ===== */
   .contact-filters{ margin-top:12px; }
   
   .checks{
     display:flex;
     flex-wrap:wrap;
     gap:8px;
     margin-top:6px;
   }
   
   .check{
     display:inline-flex;
     align-items:center;
     gap:8px;
     border:1px solid #e5e7eb;
     font-weight:700;
     border-radius:999px;
     padding:6px 10px;
     background:linear-gradient(135deg, rgba(0,131,116,.18), rgba(0,131,116,.05));
     cursor:pointer;
     user-select:none;
     font-size:.85rem;
     margin: 5px;
   }
   
   .check input{
     width:16px;
     height:16px;
     accent-color:#10b981;
   }
   
   .check.is-checked{
     border-color:#10b981;
     box-shadow:0 0 0 3px rgba(16,185,129,.15);
   }
   
   /* ===== Search ===== */
   .search-wrap{ margin-top:10px; }
   .search{
     width:100%;
     border-radius:12px;
     border:1px solid #e5e7eb;
     padding:10px 12px;
     font-family:"Montserrat",sans-serif;
     font-size:.95rem;
     outline:none;
   }
   .search:focus{
     border-color:rgba(59,130,246,.75);
     box-shadow:0 0 0 3px rgba(59,130,246,.18);
   }
   
   .hint{
     font-size:.95rem;
     margin-block-start:10px;
   }
   
   /* ===== Search (poistka) ===== */
   #sidebar-map #filter-search,
   #filter-search,
   .search-wrap input[type="text"],
   .search-wrap input[type="search"]{
     width:100%;
     border-radius:12px;
     border:1px solid #e5e7eb;
     padding:10px 12px;
     font-family:"Montserrat",sans-serif;
     font-size:.95rem;
     outline:none;
     background:#fff;
   }
   
   #sidebar-map #filter-search:focus,
   #filter-search:focus{
     border-color:rgba(59,130,246,.75);
     box-shadow:0 0 0 3px rgba(59,130,246,.18);
   }
   
   .search-wrap p,
   .search-wrap small{
     margin:6px 0 0;
     font-size:.85rem;
     color:#64748b;
   }
   
   /* ===== Leaflet popup FIX ===== */
   .leaflet-popup-content-wrapper{ border-radius:14px; }
   .leaflet-popup-content{
     margin:12px 12px;
     max-height:64vh;
     overflow:auto;
   }
   
   .nb-popup .leaflet-popup-content{
     max-height:min(68vh, 520px);
     overflow:auto;
     -webkit-overflow-scrolling:touch;
   }
   
   /* ===== ZDIEĽANIE v popupe ===== */
   .service-share-field{
     margin-top:14px;
     padding-top:10px;
     border-top:1px dashed rgba(148,163,184,.45);
   }
   
   .service-share-title{
     font-size:.85rem;
     font-weight:600;
     color:#64748b;
     margin-bottom:6px;
   }
   
   .service-share-buttons{
     display:grid;
     grid-template-columns:repeat(2, minmax(0, 1fr));
     gap:8px;
     align-items:stretch;
   }

   /* 2-2-1 layout: posledné tlačidlo (Kopírovať odkaz) vystrediť */
   .service-share-buttons .share-btn{ width:100%; }
   .service-share-buttons .share-copy{
    grid-column:1 / -1;
    justify-self:center;
    width:min(100%, 320px);
    justify-content: center;
  }
   
   .share-btn{
     display:inline-flex;
     align-items:center;
     gap:6px;
     padding:7px 12px;
     border-radius:999px;
     border:none;
     font-size:.75rem;
     font-weight:600;
     color:#fff;
     cursor:pointer;
     transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
     text-decoration:none;
   }
   
   .share-btn .share-icon{
     width:24px;
     height:24px;
     border-radius:999px;
     background:rgba(255,255,255,.15);
     display:inline-flex;
     align-items:center;
     justify-content:center;
   }
   
   .share-btn .share-icon i{
     font-size:16px;
     line-height:1;
   }
   
   .share-label{ white-space:nowrap; }
   
   .share-fb{ background:#1877f2; }
   .share-messenger{ background:#0084ff; }
   .share-whatsapp{ background:#25d366; }
   .share-instagram{ background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }
   .share-copy{ background:#4b5563; }
   
   .share-btn:hover{
     transform:translateY(-1px);
     box-shadow:0 8px 18px rgba(15,23,42,.12);
   }
   
   .share-instagram:hover{ filter:brightness(.95); }
   .share-copy:hover{ background:#374151; }
   
   @media (max-width:576px){
     .share-btn{
       justify-content:center;
       padding:7px 8px;
     }
     .share-label{ font-size:12px; }

     /* nech je aj na mobile 'Kopírovať odkaz' v strede */
     .service-share-buttons .share-copy{
       width:calc((100% - 8px)/2);
     }
   }
   
   /* Mobile lock behavior */
   .map-soft-locked{ touch-action:pan-y pinch-zoom; }
   
   /* ===== Zoom +/- center on mobile ===== */
   .leaflet-control-zoom{
     border:none !important;
     box-shadow:0 8px 18px rgba(15,23,42,.16) !important;
     border-radius:14px !important;
     overflow:hidden;
   }
   
   .leaflet-control-zoom a{
     width:42px !important;
     height:42px !important;
     line-height:42px !important;
     font-size:22px !important;
     display:flex !important;
     align-items:center !important;
     justify-content:center !important;
   }
   
   .leaflet-control-zoom a:hover{
     background:#0f172a !important;
     color:#fff !important;
   }
   
   @media (max-width:768px){
     .wrap{
       grid-template-columns:1fr;
       padding:0 12px 16px;
       gap:12px;
     }
   
     #map{
       height:62vh;
       min-height:360px;
       border-radius:16px;
     }
   
     #sidebar-map{ border-radius:16px; }
   
     /* zoom (ľavá strana) */
     .leaflet-top.leaflet-left{
       top:50% !important;
       transform:translateY(-50%) !important;
     }
     .leaflet-top.leaflet-left .leaflet-control{
       margin-top:0 !important;
     }
   
     /* lock (pravá strana) – tiež do stredu */
     .leaflet-top.leaflet-right{
       top:50% !important;
       transform:translateY(-50%) !important;
     }
     .leaflet-top.leaflet-right .leaflet-control{
       margin-top:0 !important;
     }
   }
   
   /* ============================================================
      Marker (kruh + ikona + premium ring + pulz)
      ============================================================ */
   
   .leaflet-marker-icon.map-marker{
     background:transparent !important;
     border:0 !important;
   }
   
   .ns-marker{
     width:25px;
     height:25px;
     border-radius:999px;
     display:grid;
     place-items:center;
     position:relative;
   
     border:2px solid rgba(255,255,255,.92);
     box-shadow:0 8px 18px rgba(15,23,42,.22);
   }
   
   .ns-marker i{
     font-size:15px;
     line-height:1;
     color:#fff;
     display:block;
   }

.ns-marker.is-premium::after{
     content:"";
     position:absolute;
     inset:-4px;
     border-radius:999px;
     border:3px solid #facc15;
     pointer-events:none;
   
     box-shadow:0 8px 22px rgba(250, 204, 21, .28);
     animation: nbPremiumPulse 1.8s ease-in-out infinite;
     transform-origin:center;
   }
   
   @keyframes nbPremiumPulse{
     0%{
       transform: scale(1);
       box-shadow:
         0 0 0 0 rgba(250, 204, 21, .35),
         0 8px 22px rgba(250, 204, 21, .22);
       opacity:.95;
     }
     55%{
       transform: scale(1.06);
       box-shadow:
         0 0 0 10px rgba(250, 204, 21, .00),
         0 10px 26px rgba(250, 204, 21, .28);
       opacity:1;
     }
     100%{
       transform: scale(1);
       box-shadow:
         0 0 0 0 rgba(250, 204, 21, .00),
         0 8px 22px rgba(250, 204, 21, .22);
       opacity:.95;
     }
   }
   
   @media (prefers-reduced-motion: reduce){
     .ns-marker.is-premium::after{ animation:none !important; }
   }
   
   /* ============================================================
      Map lock button (Leaflet control)
      ============================================================ */
   
   .leaflet-control.map-lock-control{
     border:none !important;
     background:transparent !important;
     box-shadow:none !important;
     margin-top:10px !important;
   }
   
   /* odsadenie od okraja (pravý stĺpec) */
   .leaflet-top.leaflet-right .leaflet-control.map-lock-control{
     margin-right:5px !important;
   }
   
   .map-lock-wrap{
     position:relative;
     display:inline-block;
   }
   
   .map-lock-btn{
     border:none;
     border-radius:999px;
     background:#0f172a;
     color:#fff;
     font-weight:800;
     font-size:.9rem;
     cursor:pointer;
     box-shadow:0 8px 18px rgba(15,23,42,.18);
   
     width:42px;
     height:42px;
     display:flex;
     align-items:center;
     justify-content:center;
   }
   
   .map-lock-btn.is-unlocked{ background:#10b981; }
   .map-lock-btn i{ font-size:18px; line-height:1; }

   .sr-only{
     position:absolute !important;
     width:1px !important;
     height:1px !important;
     padding:0 !important;
     margin:-1px !important;
     overflow:hidden !important;
     clip:rect(0,0,0,0) !important;
     white-space:nowrap !important;
     border:0 !important;
   }

   .map-lock-btn span{ display:none; }
   
   .map-lock-btn:not(.is-unlocked){
     animation: nbLockPulse 2.2s ease-in-out infinite;
   }
   
   @keyframes nbLockPulse{
     0%{
       transform: scale(1);
       box-shadow:
         0 0 0 0 rgba(15,23,42,.35),
         0 8px 18px rgba(15,23,42,.18);
     }
     55%{
       transform: scale(1.06);
       box-shadow:
         0 0 0 10px rgba(15,23,42,.00),
         0 10px 22px rgba(15,23,42,.25);
     }
     100%{
       transform: scale(1);
       box-shadow:
         0 0 0 0 rgba(15,23,42,.00),
         0 8px 18px rgba(15,23,42,.18);
     }
   }
   
   .map-lock-tooltip{
     position:absolute;
     left:54px;
     top:50%;
     transform:translateY(-50%);
     background:rgba(255,255,255,.96);
     color:#0f172a;
     border:1px solid rgba(148,163,184,.45);
     border-radius:12px;
     padding:8px 10px;
     font-size:.85rem;
     line-height:1.2;
     white-space:nowrap;
     box-shadow:0 10px 26px rgba(15,23,42,.14);
     opacity:0;
     pointer-events:none;
     transition:opacity .18s ease, transform .18s ease;
   }
   
   .map-lock-tooltip::before{
     content:"";
     position:absolute;
     left:-6px;
     top:50%;
     width:10px;
     height:10px;
     background:rgba(255,255,255,.96);
     border-left:1px solid rgba(148,163,184,.45);
     border-bottom:1px solid rgba(148,163,184,.45);
     transform:translateY(-50%) rotate(45deg);
   }
   
   .map-lock-tooltip.is-visible{ opacity:1; }
   
   .leaflet-top.leaflet-right .map-lock-tooltip{
     left:auto;
     right:54px;
   }
   
   .leaflet-top.leaflet-right .map-lock-tooltip::before{
     left:auto;
     right:-6px;
     border-left:none;
     border-bottom:none;
     border-right:1px solid rgba(148,163,184,.45);
     border-top:1px solid rgba(148,163,184,.45);
     transform:translateY(-50%) rotate(45deg);
   }
   
   .nb-tip-nudge{ color:#008374; }
   
   @media (prefers-reduced-motion: reduce){
     .map-lock-btn{ animation:none !important; }
   }
   
   /* ============================================================
      ✅ LEGENDA – finálny layout bez kolízií
      (JS pridáva triedu .legend-item na každý riadok)
      ============================================================ */
   
   .legend .legend-item{
     display:flex !important;
     align-items:center !important;
     gap:10px !important;
     margin:0 0 8px 0 !important;
   }
   
   .legend .legend-marker{
     width:26px !important;
     height:26px !important;
     border-radius:999px !important;
     display:inline-flex !important;
     align-items:center !important;
     justify-content:center !important;
     flex:0 0 26px !important;
     border:2px solid rgba(255,255,255,.9);
     box-shadow:0 4px 10px rgba(15,23,42,.18);
     color:#fff;
   }
   
   .legend .legend-marker i{
     font-size:14px !important;
     line-height:1 !important;
     color:currentColor !important;
   }

.legend .legend-text{
     display:block !important;
     line-height:1.25 !important;
   }


/* ============================================================
   Marker clustering (Leaflet.markercluster) – vizuálny štýl
   ============================================================ */
.nb-markercluster{ background: transparent !important; border: 0 !important; }
.nb-markercluster .nb-cluster{
  width:44px; height:44px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: #435d62;
  color:#fff;
  font-weight:800;
  border:2px solid rgba(255,255,255,.35);
  box-shadow:0 10px 18px rgba(0,0,0,.22);
  user-select:none;
}
.nb-markercluster .nb-cluster.size-m{ width:52px; height:52px; }
.nb-markercluster .nb-cluster.size-l{ width:60px; height:60px; }
.nb-markercluster .nb-cluster span{ font-size:14px; line-height:1;  font-family:"Montserrat",sans-serif;}
.nb-markercluster .nb-cluster.size-m span{ font-size:15px; }
.nb-markercluster .nb-cluster.size-l span{ font-size:16px; }

/* cluster obsahuje aspoň 1 prémiový marker */
.nb-markercluster .nb-cluster.has-premium{
  border-color:#facc15;
  box-shadow:0 0 0 5px rgba(250,204,21,.22), 0 10px 18px rgba(0,0,0,.22);
}

/* ============================================================
   WOW: Uprataný popup (čistý card layout, bez inline štýlov)
   ============================================================ */

.nb-popup-card{
  min-width:240px;
}

.nb-popup-title{
  margin:.1rem 0 0;
  font-size:1.05rem;
  line-height:1.15;
  color:#0f172a;
}

.nb-popup-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}

.nb-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  border:1px solid rgba(148,163,184,.45);
  background:#fff;
  color:#0f172a;
}

.nb-pill i{ font-size:13px; line-height:1; }

.nb-pill--basic{
  background:#f1f5f9;
  color:#334155;
}

.nb-pill--premium{
  background:#fffbeb;
  border-color:rgba(245,158,11,.45);
  color:#7c2d12;
}

.nb-pill--partner{
  background:#ecfeff;
  border-color:rgba(6,182,212,.35);
  color:#0f172a;
}

.nb-pill--boost{
  background:#fff7ed;
  border-color:rgba(251,146,60,.45);
  color:#7c2d12;
}

.nb-pill--subtype{
  background:#eef2ff;
  border-color:rgba(99,102,241,.25);
  color:#1e1b4b;
}

.nb-popup-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:8px;
  color:#475569;
  font-size:.87rem;
}

.nb-meta-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.nb-meta-item i{ opacity:.9; }


   .nb-verified{
     display:inline-flex;
     align-items:center;
     justify-content:center;
     padding:2px 8px;
     border-radius:999px;
     border:1px solid rgba(148,163,184,.45);
     font-size:.75rem;
     font-weight:800;
     line-height:1.2;
     white-space:nowrap;
   }
   .nb-verified--yes{
     background:rgba(16,185,129,.12);
     color:#065f46;
     border-color:rgba(16,185,129,.25);
   }
   .nb-verified--no{
     background:rgba(245,158,11,.12);
     color:#92400e;
     border-color:rgba(245,158,11,.25);
   }


.nb-popup-services{
  margin-top:8px;
  font-size:.92rem;
  color:#334155;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.nb-popup-photo{
  margin-top:10px;
}

.nb-popup-photo img{
  width:100%;
  max-height:190px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.35);
  display:block;
}

.nb-popup-actions{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.nb-action{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background:#fff;
  color:#394258;
  font-size:.85rem;
  font-weight:800;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.nb-action:hover{
  transform: translateY(-1px);
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}

.nb-action--primary{
  background:#101216;
  color:#fff;
  border-color:#0f172a;
}

.nb-action--primary:hover{
  background:#141922;
}

.nb-action i{ font-size:14px; line-height:1; }

/* Zdieľanie ako "rozbaľovačka" (ušetri výšku popupu) */
details.nb-share{
  margin-top:12px;
}

details.nb-share > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;

  display:flex;
  align-items:center;
  gap:8px;

  padding:8px 10px;
  border-radius:12px;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(148,163,184,.35);
  font-weight:800;
  color:#0f172a;
}

details.nb-share[open] > summary{
  background: rgba(15,23,42,.06);
}

details.nb-share > summary::-webkit-details-marker{ display:none; }

details.nb-share .service-share-field{
  margin-top:10px;
  padding-top:0;
  border-top:none;
}


/* ===== VIDEO (popup) ===== */
.nb-pill--video{
  background:#f0fdf4;
  border-color:rgba(34,197,94,.35);
  color:#14532d;
}

.nb-popup-media{ margin-top:10px; }

.nb-video-preview{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:12px;
  overflow:hidden;
}

.nb-video-preview img{
  width:100%;
  display:block;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.35);
}

.nb-video-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:150px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.04);
  font-weight:900;
}

.nb-video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:46px;
  height:46px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}

.nb-video-play i{ font-size:22px; line-height:1; }

.nb-media-hint{
  margin-top:8px;
  font-size:.9rem;
}

.nb-link-video{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  text-decoration:none;
}

.nb-link-video:hover{ text-decoration:underline; }

/* ===== VIDEO MODAL ===== */
#nb-video-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}

#nb-video-modal.is-open{ display:block; }

.nb-video-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.65);
}

.nb-video-modal__dialog{
  position:relative;
  width:min(920px, calc(100% - 24px));
  margin:12vh auto 0;
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:0 18px 50px rgba(2,6,23,.35);
}

.nb-video-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:#fff;
  cursor:pointer;
}

.nb-video-modal__title{
  font-weight:900;
  margin:4px 44px 10px 4px;
}

.nb-video-frame{
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.35);
  background:#000;
}

.nb-video-frame iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

.nb-video-player{
  width:100%;
  display:block;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.35);
  background:#000;
}

/* ===== Práve otvorené (disabled checkbox) ===== */
.check.is-disabled{
  opacity: .55;
  cursor: not-allowed;
}
.check.is-disabled input{
  pointer-events: none;
}

/* =========================
   NBY – Mikro-štítok + nenápadné CTA v popupe
   ========================= */
.nb-micro-tier{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.70);
  vertical-align: middle;
  white-space: nowrap;
}

.nb-micro-tier--verified{
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.75);
}

.nb-claim-cta{
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  text-decoration: none;
}

.nb-claim-note{
  margin-top: 4px;
  font-size: 12px;
  opacity: .75;
}