/* ==========================================================================
WCM Partner HUB – Frontend Styles (v1.3.0)
Design: PrądwAbonamencie.pl – dark space / purple theme
Font: Montserrat (loaded below; remove if theme already provides it)
Responsive: końcowa sekcja @media (1024 / 900 / 600 / 480 / 360 / touch)
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
/* ── Design tokens (scoped, nie wpływają na resztę strony) ─── */
.wcm-ph-wrap {
/* Purpury */
--wcm-pu1: #411D76;
--wcm-pu2: #7236ba;
--wcm-pu3: #9152df;
--wcm-pu4: #c084fc;
/* Żółty akcent */
--wcm-ye: #ffca28;
--wcm-ye2: #ff9a00;
/* Tło / tekst */
--wcm-bk: #070710;
--wcm-text: #ffffff;
--wcm-muted: rgba(255,255,255,.55);
--wcm-dim: rgba(255,255,255,.3);
/* Karty */
--wcm-card: rgba(20,8,50,.75);
--wcm-card-hi: rgba(40,14,90,.8);
--wcm-border: rgba(138,72,220,.2);
--wcm-border-hi: rgba(138,72,220,.5);
--wcm-border-ye: rgba(255,202,40,.3);
/* Wejścia */
--wcm-input-bg: rgba(255,255,255,.05);
/* Misc */
--wcm-radius: 16px;
--wcm-radius-sm: 10px;
--wcm-font: 'Montserrat', system-ui, -apple-system, sans-serif;
--wcm-glow-pu: 0 0 30px rgba(114,54,186,.3);
--wcm-glow-ye: 0 0 24px rgba(255,202,40,.35);
font-family: var(--wcm-font);
color: var(--wcm-text);
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
/* Globalne ograniczenie szerokości wtyczki na frontendzie + wyśrodkowanie */
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.wcm-ph-wrap *,
.wcm-ph-wrap *::before,
.wcm-ph-wrap *::after { box-sizing: border-box; }
/* SVG helper */
.wcm-ph-wrap .wi {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
width: 14px;
height: 14px;
}
/* ── Controls ──────────────────────────────────────────────── */
.wcm-ph-controls {
margin-bottom: 12px;
}
.wcm-ph-controls-row {
display: flex;
gap: 10px;
align-items: stretch;
flex-wrap: wrap;
}
/* Search input wrapper */
.wcm-ph-search-inner {
flex: 1;
min-width: 200px;
display: flex;
align-items: center;
background: var(--wcm-input-bg);
border: 1px solid var(--wcm-border);
border-radius: var(--wcm-radius-sm);
backdrop-filter: blur(8px);
transition: border-color .2s, box-shadow .2s;
}
.wcm-ph-search-inner:focus-within {
border-color: var(--wcm-border-hi);
box-shadow: 0 0 0 3px rgba(114,54,186,.1);
}
/* Search icon button — toggle: lupka (idle) ⇄ X (gdy aktywne filtry).
W idle: niemożliwy do kliknięcia (pointer-events:none na buttonie).
W active: klikalny przycisk "wyczyść wszystkie filtry". */
.wcm-ph-search-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px;
width: 41px;
height: 100%;
background: transparent;
border: none;
color: var(--wcm-dim);
flex-shrink: 0;
cursor: default;
pointer-events: none; /* idle: nie reaguje na klik */
transition: color .2s;
}
.wcm-ph-search-icon-glass,
.wcm-ph-search-icon-x {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: opacity .2s, transform .25s cubic-bezier(.22, 1, .36, 1);
}
/* Idle: lupka widoczna, X niewidoczne */
.wcm-ph-search-icon-glass { opacity: 1; }
.wcm-ph-search-icon-x { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-90deg); }
/* Active: filtry uruchomione — X widoczne, klikalne */
.wcm-ph-search-icon--active {
pointer-events: auto;
cursor: pointer;
color: rgba(255, 202, 40, .85);
}
.wcm-ph-search-icon--active .wcm-ph-search-icon-glass {
opacity: 0;
transform: translate(-50%, -50%) scale(.6) rotate(90deg);
}
.wcm-ph-search-icon--active .wcm-ph-search-icon-x {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.wcm-ph-search-icon--active:hover {
color: var(--wcm-ye);
}
.wcm-ph-search-icon--active:focus-visible {
outline: 2px solid rgba(255, 202, 40, .5);
outline-offset: -2px;
border-radius: var(--wcm-radius-sm) 0 0 var(--wcm-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
.wcm-ph-search-icon-glass,
.wcm-ph-search-icon-x {
transition: opacity .15s;
transform: translate(-50%, -50%);
}
.wcm-ph-search-icon--active .wcm-ph-search-icon-glass,
.wcm-ph-search-icon-x { transform: translate(-50%, -50%); }
}
.wcm-ph-search-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--wcm-text);
font-family: var(--wcm-font);
font-size: 14px;
font-weight: 500;
padding: 13px 0;
min-width: 0;
}
.wcm-ph-search-input::placeholder { color: var(--wcm-dim); }
/* Locate button (pin icon) – prawy skraj pola wyszukiwania */
.wcm-ph-search-locate {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
background: rgba(255,255,255,.05);
border: 1px solid rgba(138,72,220,.22);
border-radius: 7px;
cursor: pointer;
color: var(--wcm-pu3);
transition: all .2s;
margin-right: 4px;
}
.wcm-ph-search-locate:hover {
background: rgba(114,54,186,.18);
border-color: rgba(114,54,186,.4);
color: var(--wcm-pu4);
}
.wcm-ph-search-locate--active {
background: rgba(255,202,40,.1) !important;
border-color: rgba(255,202,40,.4) !important;
color: var(--wcm-ye) !important;
box-shadow: 0 0 12px rgba(255,202,40,.3);
}
.wcm-ph-search-locate--active:hover {
box-shadow: 0 0 20px rgba(255,202,40,.5);
}
/* PENDING state — wykryty kod pocztowy w trakcie pisania, ale findNearest jeszcze
nie odpalony (czeka na koniec debounce delay 400/700 ms). User widzi że system
rozpoznał wzorzec i „za chwilę” wyszuka. Pulsująca animacja w stonowanym
pomarańczowym — wizualnie odróżnia się od --active (złoty po znalezieniu wyników). */
.wcm-ph-search-locate--pending {
background: rgba(255, 154, 0, .08) !important;
border-color: rgba(255, 154, 0, .35) !important;
color: var(--wcm-ye2) !important;
animation: wcm-postal-pulse 1.2s ease-in-out infinite;
}
.wcm-ph-search-locate--pending:hover {
background: rgba(255, 154, 0, .14) !important;
}
@keyframes wcm-postal-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(255, 154, 0, .35);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 6px rgba(255, 154, 0, 0);
transform: scale(1.06);
}
}
@media (prefers-reduced-motion: reduce) {
.wcm-ph-search-locate--pending {
animation: none !important;
}
}
/* Geo button (crosshair icon) — "Użyj mojej lokalizacji" */
.wcm-ph-search-geo {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
background: rgba(255,255,255,.05);
border: 1px solid rgba(138,72,220,.22);
border-radius: 7px;
cursor: pointer;
color: var(--wcm-pu3);
transition: all .2s;
margin-right: 4px;
}
.wcm-ph-search-geo:hover {
background: rgba(114,54,186,.18);
border-color: rgba(114,54,186,.4);
color: var(--wcm-pu4);
}
.wcm-ph-search-geo--loading {
background: rgba(192,132,252,.12) !important;
border-color: rgba(192,132,252,.45) !important;
color: var(--wcm-pu4) !important;
pointer-events: none;
cursor: progress;
animation: wcm-geo-pulse 1.4s ease-in-out infinite;
}
.wcm-ph-search-geo--loading svg {
animation: wcm-geo-spin 2s linear infinite;
}
.wcm-ph-search-geo--active {
background: rgba(255,202,40,.1) !important;
border-color: rgba(255,202,40,.4) !important;
color: var(--wcm-ye) !important;
box-shadow: 0 0 12px rgba(255,202,40,.3);
}
.wcm-ph-search-geo--active:hover {
box-shadow: 0 0 20px rgba(255,202,40,.5);
}
@keyframes wcm-geo-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(192,132,252,.45); }
50% { box-shadow: 0 0 0 8px rgba(192,132,252,0); }
}
@keyframes wcm-geo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.wcm-ph-search-geo--loading,
.wcm-ph-search-geo--loading svg {
animation: none !important;
}
}
/* Voivodeship select */
.wcm-ph-select {
background: var(--wcm-input-bg);
border: 1px solid var(--wcm-border);
border-radius: var(--wcm-radius-sm);
color: var(--wcm-text);
font-family: var(--wcm-font);
font-size: 13px;
font-weight: 600;
padding: 0 36px 0 14px;
min-height: 46px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
backdrop-filter: blur(8px);
transition: border-color .2s, box-shadow .2s;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.35)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
flex-shrink: 0;
}
.wcm-ph-select:focus {
outline: none;
border-color: var(--wcm-border-hi);
box-shadow: 0 0 0 3px rgba(114,54,186,.1);
}
.wcm-ph-select option {
background: #160a30;
color: #fff;
}
/* Result count */
.wcm-ph-count {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.8px;
color: var(--wcm-dim);
padding: 5px 2px 0;
}
/* ── Split layout ──────────────────────────────────────────── */
.wcm-ph-split {
display: flex;
height: clamp(580px, 78vh, 840px);
border-radius: var(--wcm-radius);
overflow: hidden;
border: 1px solid var(--wcm-border);
background: rgba(10,4,24,.85);
backdrop-filter: blur(16px);
box-shadow:
0 0 0 1px rgba(255,255,255,.03),
0 40px 100px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.04);
}
/* ── List panel (left) ─────────────────────────────────────── */
.wcm-ph-list-panel {
width: 300px;
flex-shrink: 0;
overflow-y: auto;
overflow-x: hidden;
border-right: 1px solid var(--wcm-border);
position: relative;
scrollbar-width: thin;
scrollbar-color: rgba(114,54,186,.45) transparent;
background: rgba(8,3,20,.3);
}
.wcm-ph-list-panel::-webkit-scrollbar { width: 3px; }
.wcm-ph-list-panel::-webkit-scrollbar-track { background: transparent; }
.wcm-ph-list-panel::-webkit-scrollbar-thumb {
background: rgba(114,54,186,.5);
border-radius: 4px;
}
/* ── Partner tiles (compact vertical list) ─────────────────── */
.wcm-ph-tiles {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
.wcm-ph-tile {
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
background: rgba(10, 8, 20, 0.4);
backdrop-filter: blur(12px);
transition: all .3s cubic-bezier(.22,1,.36,1);
position: relative;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
cursor: pointer; /* cały kafelek klikalny → podstrona partnera */
}
.wcm-ph-tile:hover {
background: rgba(16, 10, 28, 0.6);
border-color: rgba(114, 54, 186, 0.3);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 40px rgba(114, 54, 186, 0.15);
transform: translateY(-2px);
}
.wcm-ph-tile--highlight {
background: rgba(255, 202, 40, 0.08) !important;
border-color: var(--wcm-ye) !important;
box-shadow: 0 12px 32px rgba(255, 202, 40, 0.15), inset 0 0 20px rgba(255, 202, 40, 0.05) !important;
}
/* Główny wiersz kafelka (logo + treść) */
.wcm-ph-tile-main {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
cursor: pointer;
}
/* Przycisk „Szczegóły →" — inline link w prawym dolnym rogu kafelka (footer right) */
.wcm-ph-tile-more-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 0;
margin: 0;
background: transparent;
border: none;
cursor: pointer;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .8px;
color: rgba(255, 202, 40, .85);
font-family: var(--wcm-font);
transition: color .2s;
flex-shrink: 0;
white-space: nowrap;
}
.wcm-ph-tile-more-btn:hover {
color: var(--wcm-ye);
}
.wcm-ph-tile-more-btn:focus-visible {
outline: 2px solid rgba(255, 202, 40, .5);
outline-offset: 2px;
border-radius: 4px;
}
.wcm-ph-tile-more-arrow {
width: 13px !important;
height: 13px !important;
flex-shrink: 0;
transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.wcm-ph-tile-more-btn:hover .wcm-ph-tile-more-arrow {
transform: translateX(2px);
}
/* Logo */
.wcm-ph-tile-logo-wrap {
flex-shrink: 0;
width: 56px;
height: 56px;
margin-top: 1px;
}
.wcm-ph-tile-logo {
width: 56px;
height: 56px;
object-fit: contain;
border-radius: 14px !important;
background: #ffffff;
border: 1px solid #ECE7F1;
box-sizing: border-box;
display: block;
}
.wcm-ph-tile-logo-ph {
width: 56px;
height: 56px;
border-radius: 14px !important;
background: #ECE7F1;
border: 2px solid #ECE7F1;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 900;
color: var(--wcm-pu4);
letter-spacing: -1px;
}
/* Tile content */
.wcm-ph-tile-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.wcm-ph-tile-row1 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.wcm-ph-tile-name {
font-size: 12px;
font-weight: 800;
color: #ffca28;
line-height: 1.3;
flex: 1;
min-width: 0;
letter-spacing: -.1px;
/* Max 2 linie nazwy — długie nazwy „X Sp. z o.o. Oddział ..." łamią się czytelnie */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Compact icons (links + edit) */
.wcm-ph-tile-icons {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.wcm-ph-tile-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 23px;
height: 23px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,.07);
background: rgba(255,255,255,.04);
color: var(--wcm-dim);
text-decoration: none;
cursor: pointer;
transition: color .2s, background .2s, border-color .2s;
}
.wcm-ph-tile-icon:hover {
color: var(--wcm-pu4);
background: rgba(114,54,186,.15);
border-color: rgba(114,54,186,.3);
}
.wcm-ph-tile-icon .wi { width: 11px; height: 11px; }
/* Edit button variant */
.wcm-ph-tile-icon.wcm-ph-edit-btn {
border-color: rgba(255,202,40,.18);
background: rgba(255,202,40,.05);
color: rgba(255,202,40,.55);
}
.wcm-ph-tile-icon.wcm-ph-edit-btn:hover {
background: rgba(255,202,40,.14);
border-color: rgba(255,202,40,.38);
color: var(--wcm-ye);
}
/* Location row — 3-liniowy układ od v2.1.8:
[📍] Lublin ← 1. linia: białe bold 13px
woj. lubelskie ← 2. linia: szare 11px lowercase
12 km od Twojej lokal. ← 3. linia: żółte 11px (tylko w trybie nearest)
Ikona pinezki po lewej, kolumna z 3 liniami po prawej. */
.wcm-ph-tile-location {
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.35;
overflow: hidden;
color: rgba(255,255,255,.55);
}
.wcm-ph-tile-location-lines {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.wcm-ph-tile-location-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
margin-top: 2px;
}
.wcm-ph-tile-location .wi {
color: var(--wcm-pu3);
flex-shrink: 0;
width: 12px;
height: 12px;
}
.wcm-ph-tile-location-city {
font-size: 8px;
font-weight: 600;
color: rgba(255, 255, 255, 0.65);
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.wcm-ph-tile-location-voiv {
font-size: 8px;
font-weight: 600;
color: rgba(255,255,255,.5);
text-transform: lowercase;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Phone */
.wcm-ph-tile-phones {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.wcm-ph-tile-phone {
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,.4);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color .2s;
}
.wcm-ph-tile-phone .wi { width: 11px; height: 11px; }
.wcm-ph-tile-phone:hover { color: var(--wcm-pu4); }
/* ── Map panel (right) ─────────────────────────────────────── */
.wcm-ph-map-panel {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
position: relative; /* potrzebne dla absolutnie pozycjonowanego #wcm-ph-detail */
}
.wcm-ph-map {
flex: 1;
min-height: 0;
position: relative;
z-index: 1;
}
/* Placeholder shown while map loads */
.wcm-ph-map-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: #e9e7f2;
color: var(--wcm-dim);
font-size: 13px;
font-weight: 600;
font-family: var(--wcm-font);
z-index: 20;
pointer-events: none;
}
/* =======================================================================
Detail panel – slide-in nad mapą po hover/kliknięciu kafelka
======================================================================= */
.wcm-ph-detail {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 280px;
max-width: 90%;
z-index: 50;
background: rgba(8,3,18,.96);
backdrop-filter: blur(22px) saturate(1.5);
-webkit-backdrop-filter: blur(22px) saturate(1.5);
border-right: 1px solid rgba(138,72,220,.28);
overflow-y: auto;
overflow-x: hidden;
transform: translateX(-108%);
opacity: 0;
pointer-events: none;
transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .22s ease;
scrollbar-width: thin;
scrollbar-color: rgba(114,54,186,.4) transparent;
}
.wcm-ph-detail::-webkit-scrollbar { width: 3px; }
.wcm-ph-detail::-webkit-scrollbar-track { background: transparent; }
.wcm-ph-detail::-webkit-scrollbar-thumb {
background: rgba(114,54,186,.5);
border-radius: 3px;
}
.wcm-ph-detail--visible {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
/* Przycisk zamknięcia */
.wcm-ph-detail-close {
position: absolute;
top: 10px;
right: 10px;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.1);
border-radius: 6px;
cursor: pointer;
color: rgba(255,255,255,.45);
transition: all .2s;
z-index: 2;
flex-shrink: 0;
}
.wcm-ph-detail-close:hover {
background: rgba(114,54,186,.22);
border-color: rgba(114,54,186,.45);
color: var(--wcm-pu4);
}
/* Inner */
.wcm-ph-detail-inner {
padding: 14px 14px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Logo */
.wcm-ph-detail-logo-wrap {
display: flex;
justify-content: center;
padding-top: 6px;
}
.wcm-ph-detail-logo {
width: 72px;
height: 72px;
object-fit: contain;
border-radius: 12px;
border: 1px solid rgba(138,72,220,.22);
background: rgba(255,255,255,.05);
display: block;
}
.wcm-ph-detail-logo-ph {
width: 72px;
height: 72px;
border-radius: 12px;
border: 1px solid rgba(138,72,220,.25);
background: linear-gradient(135deg, rgba(114,54,186,.4), rgba(65,29,118,.55));
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 900;
color: var(--wcm-pu4);
font-family: var(--wcm-font);
}
/* Header: badge + nazwa + województwo */
.wcm-ph-detail-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
text-align: center;
}
.wcm-ph-detail-name {
margin: 0;
font-size: 15px;
font-weight: 900;
color: var(--wcm-text);
line-height: 1.25;
letter-spacing: -.3px;
font-family: var(--wcm-font);
text-align: center;
}
/* Pill województwa */
.wcm-ph-detail-voiv {
display: inline-block;
padding: 3px 10px;
background: rgba(114,54,186,.16);
border: 1px solid rgba(114,54,186,.28);
border-radius: 20px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--wcm-pu4);
font-family: var(--wcm-font);
}
/* Opis */
.wcm-ph-detail-desc {
font-size: 12px;
color: var(--wcm-muted);
line-height: 1.65;
margin: 0;
font-family: var(--wcm-font);
}
/* Rows lokalizacji */
.wcm-ph-detail-rows {
display: flex;
flex-direction: column;
gap: 5px;
}
.wcm-ph-detail-row {
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 11px;
font-weight: 600;
color: var(--wcm-dim);
line-height: 1.45;
font-family: var(--wcm-font);
}
.wcm-ph-detail-row .wi {
flex-shrink: 0;
margin-top: 1px;
color: var(--wcm-pu3);
width: 12px;
height: 12px;
}
/* Kontakty – spójne z kafelkami */
.wcm-ph-detail-contacts {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Telefony – kompaktowe linki jak w kafelkach */
.wcm-ph-detail-phones {
display: flex;
flex-direction: column;
gap: 3px;
}
.wcm-ph-detail-phone-link {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 700;
color: rgba(255,255,255,.75);
text-decoration: none;
transition: color .2s;
font-family: var(--wcm-font);
}
.wcm-ph-detail-phone-link .wi {
width: 13px;
height: 13px;
color: var(--wcm-pu3);
flex-shrink: 0;
}
.wcm-ph-detail-phone-link:hover { color: #fff; }
/* Strona WWW – tekst-link jak w kafelkach */
.wcm-ph-detail-website-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: rgba(192,132,252,.7);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
transition: color .2s;
font-family: var(--wcm-font);
}
.wcm-ph-detail-website-link .wi {
width: 12px;
height: 12px;
flex-shrink: 0;
color: var(--wcm-pu3);
}
.wcm-ph-detail-website-link:hover { color: var(--wcm-pu4); }
/* E-mail */
.wcm-ph-detail-email-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: var(--wcm-dim);
text-decoration: none;
transition: color .2s;
font-family: var(--wcm-font);
word-break: break-all;
}
.wcm-ph-detail-email-link .wi { color: var(--wcm-pu3); flex-shrink: 0; }
.wcm-ph-detail-email-link:hover { color: var(--wcm-pu4); }
/* Aktywny kafelek (kliknięty) */
.wcm-ph-tile--active {
background: rgba(255,202,40,.06) !important;
border-left-color: var(--wcm-ye) !important;
}
/* ── Leaflet overrides – patrz sekcja MAP THEMING niżej ────── */
/* ── Postal search bar ─────────────────────────────────────── */
.wcm-ph-postal-bar {
flex-shrink: 0;
padding: 10px 14px 12px;
border-top: 1px solid var(--wcm-border);
background: rgba(8,3,20,.7);
backdrop-filter: blur(12px);
}
.wcm-ph-postal-row {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
/* Postal input wrapper */
.wcm-ph-postal-field {
flex: 1;
min-width: 120px;
display: flex;
align-items: center;
gap: 9px;
background: var(--wcm-input-bg);
border: 1px solid var(--wcm-border);
border-radius: 8px;
padding: 0 12px;
transition: border-color .2s, box-shadow .2s;
}
.wcm-ph-postal-field:focus-within {
border-color: var(--wcm-border-hi);
box-shadow: 0 0 0 3px rgba(114,54,186,.1);
}
.wcm-ph-postal-field > svg {
color: var(--wcm-pu4);
flex-shrink: 0;
opacity: .75;
}
.wcm-ph-postal-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--wcm-text);
font-family: var(--wcm-font);
font-size: 13px;
font-weight: 600;
padding: 10px 0;
min-width: 80px;
}
.wcm-ph-postal-input::placeholder { color: var(--wcm-dim); }
/* CTA postal button – styl z PrądwAbonamencie */
.wcm-ph-btn-postal {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--wcm-ye);
color: var(--wcm-bk);
border: none;
padding: 10px 18px;
border-radius: 8px;
font-family: var(--wcm-font);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .7px;
cursor: pointer;
transition: transform .2s, box-shadow .2s;
box-shadow: 0 4px 18px rgba(255,202,40,.32);
white-space: nowrap;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.wcm-ph-btn-postal::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.25), transparent);
transform: translateX(-100%) skewX(-15deg);
transition: transform .45s;
}
.wcm-ph-btn-postal:hover::before { transform: translateX(200%) skewX(-15deg); }
.wcm-ph-btn-postal:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(255,202,40,.48);
}
.wcm-ph-btn-postal:active { transform: translateY(0); }
/* ── Nearest partner info ───────────────────────────────────── */
/* ── Loading / empty states ────────────────────────────────── */
.wcm-ph-loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 56px 20px;
gap: 14px;
color: var(--wcm-dim);
font-size: 12px;
font-weight: 600;
text-align: center;
font-family: var(--wcm-font);
}
.wcm-ph-no-results {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 44px 20px;
gap: 12px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--wcm-dim);
font-family: var(--wcm-font);
margin: 0;
line-height: 1.55;
}
.wcm-ph-no-results svg { opacity: .4; }
/* Wariant błędu — czerwone akcenty (geolokalizacja, kod pocztowy, brak GPS).
Klasa dołączana przez `showSearchError()` w frontend.js, zdejmowana przy
następnym wywołaniu `renderTiles()`. */
.wcm-ph-no-results--error {
color: rgba(248, 113, 113, .9);
}
.wcm-ph-no-results--error svg {
color: rgba(248, 113, 113, .75);
opacity: .85;
}
/* ── Spinner ────────────────────────────────────────────────── */
.wcm-ph-spinner {
width: 26px;
height: 26px;
border: 2.5px solid rgba(114,54,186,.2);
border-top-color: var(--wcm-pu3);
border-radius: 50%;
animation: wcm-ph-spin .75s linear infinite;
flex-shrink: 0;
}
.wcm-ph-spinner-sm {
width: 16px;
height: 16px;
border-width: 2px;
}
@keyframes wcm-ph-spin { to { transform: rotate(360deg); } }
/* =======================================================================
SKELETON LOADING CARDS
======================================================================= */
@keyframes wcm-ph-skel-wave {
0% { background-position: -300% center; }
100% { background-position: 300% center; }
}
.wcm-ph-skeleton {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 16px 9px;
border-bottom: 1px solid rgba(255,255,255,.04);
border-left: 3px solid transparent;
animation: wcm-ph-tile-in .4s cubic-bezier(.22,1,.36,1) both;
}
.wcm-ph-skeleton:last-child { border-bottom: none; }
.wcm-ph-skel-main {
display: flex;
align-items: center;
gap: 13px;
}
.wcm-ph-skel-logo {
width: 46px; height: 46px;
border-radius: 9px;
flex-shrink: 0;
background: linear-gradient(90deg,
rgba(114,54,186,.06) 25%, rgba(145,82,223,.14) 50%, rgba(114,54,186,.06) 75%);
background-size: 600% 100%;
animation: wcm-ph-skel-wave 1.6s ease-in-out infinite;
}
.wcm-ph-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.wcm-ph-skel-line {
height: 8px;
border-radius: 4px;
background: linear-gradient(90deg,
rgba(114,54,186,.06) 25%, rgba(145,82,223,.14) 50%, rgba(114,54,186,.06) 75%);
background-size: 600% 100%;
animation: wcm-ph-skel-wave 1.6s ease-in-out infinite;
}
.wcm-ph-skel-foot {
height: 6px; width: 44px;
border-radius: 3px;
background: linear-gradient(90deg,
rgba(255,202,40,.04) 25%, rgba(255,202,40,.1) 50%, rgba(255,202,40,.04) 75%);
background-size: 600% 100%;
animation: wcm-ph-skel-wave 1.6s ease-in-out infinite;
}
/* =======================================================================
CLICK RIPPLE
======================================================================= */
@keyframes wcm-ph-ripple-expand {
to { transform: translate(-50%,-50%) scale(35); opacity: 0; }
}
.wcm-ph-tile { overflow: hidden; }
.wcm-ph-ripple {
position: absolute;
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,202,40,.22);
transform: translate(-50%,-50%) scale(0);
pointer-events: none;
animation: wcm-ph-ripple-expand .65s ease-out forwards;
z-index: 10;
}
/* =======================================================================
DUAL-RING SPINNER
======================================================================= */
.wcm-ph-spinner {
position: relative;
border: none !important;
background: transparent !important;
animation: none !important;
}
.wcm-ph-spinner::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2.5px solid transparent;
border-top-color: var(--wcm-pu3);
border-right-color: rgba(145,82,223,.3);
animation: wcm-ph-spin .75s cubic-bezier(.36,.07,.19,.97) infinite;
}
.wcm-ph-spinner::after {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
border: 2px solid transparent;
border-bottom-color: rgba(255,202,40,.65);
border-left-color: rgba(255,202,40,.2);
animation: wcm-ph-spin .5s linear infinite reverse;
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
.wcm-ph-list-panel { width: 320px; }
}
@media (max-width: 840px) {
.wcm-ph-list-panel { width: 280px; }
}
@media (max-width: 700px) {
.wcm-ph-split {
flex-direction: column;
height: auto;
}
.wcm-ph-list-panel {
width: 100%;
max-height: 340px;
border-right: none;
border-bottom: 1px solid var(--wcm-border);
}
.wcm-ph-map {
min-height: 280px;
}
.wcm-ph-map-panel {
flex: none;
}
}
@media (max-width: 480px) {
.wcm-ph-controls-row { flex-direction: column; }
.wcm-ph-select { width: 100%; }
.wcm-ph-postal-row { flex-wrap: wrap; }
.wcm-ph-postal-field { min-width: 100%; }
.wcm-ph-btn-postal { width: 100%; justify-content: center; }
}
/* =======================================================================
ANIMATIONS & VISUAL EFFECTS
Inspired by PrądwAbonamencie.pl – dark space / cosmic theme
======================================================================= */
/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes wcm-ph-fade-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes wcm-ph-scale-in {
from { opacity: 0; transform: scale(.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes wcm-ph-tile-in {
from { opacity: 0; transform: translateX(-18px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes wcm-ph-slide-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes wcm-ph-pulse-ring {
0% { transform: scale(1); opacity: .75; }
100% { transform: scale(2.2); opacity: 0; }
}
@keyframes wcm-ph-border-scan {
0% { transform: translateX(-100%); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}
@keyframes wcm-ph-gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes wcm-ph-glow-breathe {
0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 40px 100px rgba(0,0,0,.6), 0 0 30px rgba(114,54,186,.06), inset 0 1px 0 rgba(255,255,255,.04); }
50% { box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 40px 100px rgba(0,0,0,.6), 0 0 70px rgba(114,54,186,.18), inset 0 1px 0 rgba(255,255,255,.07); }
}
@keyframes wcm-ph-detail-item-in {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes wcm-ph-marker-pulse {
0% { transform: translate(-50%,-50%) scale(1); opacity: .8; }
100% { transform: translate(-50%,-50%) scale(3.5); opacity: 0; }
}
@keyframes wcm-ph-count-in {
from { opacity: 0; transform: translateY(5px) scale(.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── Entry animations ─────────────────────────────────────── */
.wcm-ph-controls {
animation: wcm-ph-fade-up .65s .06s cubic-bezier(.22,1,.36,1) both;
}
.wcm-ph-split {
animation: wcm-ph-scale-in .8s .14s cubic-bezier(.22,1,.36,1) both,
wcm-ph-glow-breathe 7s 2s ease-in-out infinite;
}
/* Scanning border line at top of split container */
.wcm-ph-split::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--wcm-pu3) 30%, var(--wcm-ye) 60%, transparent);
animation: wcm-ph-border-scan 5s 1.8s ease-in-out infinite;
z-index: 100;
pointer-events: none;
border-radius: var(--wcm-radius) 0 0 0;
}
/* ── Tile entrance (staggered via --i CSS var) ──────────────── */
.wcm-ph-tile {
will-change: transform, opacity;
animation: wcm-ph-tile-in .5s calc(var(--i, 0) * 45ms) cubic-bezier(.22,1,.36,1) both;
}
/* Content slides a bit on hover — usunięte w redesign v2:
z footerem na dole slide tylko .wcm-ph-tile-main tworzyłby asymetrię.
Hover ma teraz tylko zmianę tła/ramki/glow — wystarczający feedback. */
.wcm-ph-tile-main {
transition: transform .25s cubic-bezier(.22,1,.36,1);
}
/* Tile active state ripple line */
.wcm-ph-tile--active .wcm-ph-tile-main::before {
content: '';
position: absolute;
left: -3px;
top: 15%;
bottom: 15%;
width: 3px;
background: var(--wcm-ye);
border-radius: 2px;
box-shadow: 0 0 10px rgba(255,202,40,.8);
}
/* ── Logo placeholder animated gradient ─────────────────────── */
.wcm-ph-tile-logo-ph {
background: linear-gradient(135deg, rgba(114,54,186,.4), rgba(145,82,223,.5), rgba(65,29,118,.45), rgba(114,54,186,.4));
background-size: 300% 300%;
animation: wcm-ph-gradient-shift 5s ease-in-out infinite;
}
/* ── Tile icon shimmer on hover ─────────────────────────────── */
.wcm-ph-tile-icon {
position: relative;
overflow: hidden;
}
.wcm-ph-tile-icon::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.2), transparent);
transform: translateX(-100%) skewX(-12deg);
transition: transform .4s ease;
}
.wcm-ph-tile-icon:hover::after {
transform: translateX(200%) skewX(-12deg);
}
/* ── Logo wrap perspective on hover ─────────────────────────── */
.wcm-ph-tile-logo-wrap {
transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.wcm-ph-tile:hover .wcm-ph-tile-logo-wrap {
transform: scale(1.06);
}
/* ── Detail panel: top accent line + item stagger ───────────── */
.wcm-ph-detail::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--wcm-pu3) 30%, var(--wcm-ye) 70%, transparent);
opacity: 0;
transition: opacity .4s ease;
pointer-events: none;
z-index: 3;
}
.wcm-ph-detail--visible::before {
opacity: 1;
}
/* Sequential reveal of detail panel items */
.wcm-ph-detail--visible .wcm-ph-detail-logo-wrap { animation: wcm-ph-detail-item-in .35s .05s cubic-bezier(.22,1,.36,1) both; }
.wcm-ph-detail--visible .wcm-ph-detail-header { animation: wcm-ph-detail-item-in .35s .10s cubic-bezier(.22,1,.36,1) both; }
.wcm-ph-detail--visible .wcm-ph-detail-desc { animation: wcm-ph-detail-item-in .35s .15s cubic-bezier(.22,1,.36,1) both; }
.wcm-ph-detail--visible .wcm-ph-detail-sep { animation: wcm-ph-detail-item-in .35s .18s cubic-bezier(.22,1,.36,1) both; }
.wcm-ph-detail--visible .wcm-ph-detail-rows { animation: wcm-ph-detail-item-in .35s .22s cubic-bezier(.22,1,.36,1) both; }
.wcm-ph-detail--visible .wcm-ph-detail-phones { animation: wcm-ph-detail-item-in .35s .26s cubic-bezier(.22,1,.36,1) both; }
.wcm-ph-detail--visible .wcm-ph-detail-email { animation: wcm-ph-detail-item-in .35s .28s cubic-bezier(.22,1,.36,1) both; }
.wcm-ph-detail--visible .wcm-ph-detail-links { animation: wcm-ph-detail-item-in .35s .32s cubic-bezier(.22,1,.36,1) both; }
/* ── Postal button pulse ring (via ::after) ─────────────────── */
.wcm-ph-btn-postal {
isolation: isolate;
}
.wcm-ph-btn-postal::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 10px;
border: 1.5px solid rgba(255,202,40,.5);
animation: wcm-ph-pulse-ring 2.2s 1s ease-out infinite;
pointer-events: none;
}
/* ── Result count animation ─────────────────────────────────── */
.wcm-ph-count--anim {
animation: wcm-ph-count-in .3s cubic-bezier(.22,1,.36,1) both;
}
/* ── List panel ambient light ───────────────────────────────── */
.wcm-ph-list-panel {
background:
rgba(8,3,20,.3),
radial-gradient(ellipse at 20% 10%, rgba(114,54,186,.07) 0%, transparent 55%),
radial-gradient(ellipse at 80% 90%, rgba(255,202,40,.03) 0%, transparent 45%);
}
/* ── Cursor glow element ────────────────────────────────────── */
#wcm-ph-cursor-glow {
position: absolute;
width: 560px;
height: 560px;
border-radius: 50%;
background: radial-gradient(circle, rgba(114,54,186,.08) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
top: 0;
left: 0;
transform: translate(calc(var(--cx, -9999px) - 280px), calc(var(--cy, -9999px) - 280px));
transition: transform .12s linear;
will-change: transform;
}
/* ── Custom Leaflet marker ──────────────────────────────────── */
.wcm-ph-map-marker {
position: relative;
width: 22px;
height: 22px;
overflow: visible;
background: transparent;
border: none;
}
.wcm-ph-map-marker-dot {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--wcm-ye);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
box-shadow: var(--wcm-glow-ye);
z-index: 2;
}
.wcm-ph-map-marker-ring {
position: absolute;
width: 22px; height: 22px;
border-radius: 50%;
border: 1.5px solid var(--wcm-ye2);
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(1);
animation: wcm-ph-marker-pulse 2.2s ease-out infinite;
z-index: 1;
}
.wcm-ph-map-marker-ring:nth-child(3) {
animation-delay: .85s;
}
/* Map placeholder – ciemny, fioletowy gradient */
.wcm-ph-map-placeholder {
background: linear-gradient(135deg, #0d0520, #160a30, #0a0318);
background-size: 300% 300%;
animation: wcm-ph-gradient-shift 6s ease-in-out infinite;
color: rgba(192, 132, 252, .35);
}
/* ── Split split hover subtle glow ──────────────────────────── */
.wcm-ph-split:hover {
border-color: rgba(138,72,220,.32);
}
/* Search bar scan line on focus */
.wcm-ph-search-inner::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1.5px;
background: linear-gradient(90deg, var(--wcm-pu3), var(--wcm-ye));
transition: width .4s cubic-bezier(.22,1,.36,1);
border-radius: 0 0 var(--wcm-radius-sm) var(--wcm-radius-sm);
}
.wcm-ph-search-inner:focus-within::after {
width: 100%;
}
/* search-inner needs position: relative for ::after */
.wcm-ph-search-inner { position: relative; }
/* ── Reduce motion overrides ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.wcm-ph-controls,
.wcm-ph-split,
.wcm-ph-tile,
.wcm-ph-tile-main,
.wcm-ph-tile-logo-wrap,
.wcm-ph-tile-logo-ph,
.wcm-ph-map-marker-ring,
.wcm-ph-map-placeholder,
.wcm-ph-btn-postal::after,
.wcm-ph-detail--visible > * {
animation: none !important;
transition: none !important;
}
}
/* =======================================================================
GOOGLE BUSINESS BUTTON – dedykowany przycisk na kafelku
======================================================================= */
.wcm-ph-tile-google-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 11px 6px 8px;
margin-top: 6px;
border-radius: 8px;
border: 1px solid rgba(66,133,244,.25);
background: rgba(66,133,244,.07);
color: rgba(255,255,255,.8);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .9px;
text-decoration: none;
transition: background .2s, border-color .2s, color .2s, transform .18s, box-shadow .2s;
font-family: var(--wcm-font);
position: relative;
overflow: hidden;
white-space: nowrap;
align-self: flex-start;
}
.wcm-ph-tile-google-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);
transform: translateX(-100%) skewX(-12deg);
transition: transform .4s ease;
}
.wcm-ph-tile-google-btn:hover::before { transform: translateX(200%) skewX(-12deg); }
.wcm-ph-tile-google-btn:hover {
background: rgba(66,133,244,.16);
border-color: rgba(66,133,244,.45);
color: #fff;
transform: translateX(3px);
box-shadow: 0 0 16px rgba(66,133,244,.25);
}
.wcm-ph-google-icon {
width: 14px !important;
height: 14px !important;
flex-shrink: 0;
}
/* =======================================================================
TAG FILTER BAR – zwijany/rozwijany pasek filtrów w panelu controls
======================================================================= */
.wcm-ph-tag-filter {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 10px 12px;
overflow: hidden;
max-height: 50px; /* ~1 wiersz tagów (zwinięty) */
transition: max-height .4s cubic-bezier(.22,1,.36,1);
border: 1px solid var(--wcm-border);
border-radius: var(--wcm-radius-sm);
background: rgba(6,2,15,.55);
flex-shrink: 0;
position: relative;
margin-top: 12px;
}
/* Gdy jest przycisk toggle – ramka dolna przenosi się na niego */
.wcm-ph-tag-filter--has-toggle {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Stan rozwinięty */
.wcm-ph-tag-filter--expanded {
max-height: 240px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(114,54,186,.45) transparent;
}
.wcm-ph-tag-filter--expanded::-webkit-scrollbar { width: 3px; }
.wcm-ph-tag-filter--expanded::-webkit-scrollbar-track { background: transparent; }
.wcm-ph-tag-filter--expanded::-webkit-scrollbar-thumb {
background: rgba(114,54,186,.5);
border-radius: 4px;
}
/* Przycisk rozwijania / zwijania */
.wcm-ph-tag-filter-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
padding: 5px 12px 8px;
background: rgba(6,2,15,.55);
border: 1px solid var(--wcm-border);
border-top: none;
border-bottom-left-radius: var(--wcm-radius-sm);
border-bottom-right-radius: var(--wcm-radius-sm);
cursor: pointer;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: rgba(192,132,252,.5);
font-family: var(--wcm-font);
transition: color .2s, background .2s;
flex-shrink: 0;
}
.wcm-ph-tag-filter-toggle:hover {
color: var(--wcm-pu4);
background: rgba(114,54,186,.06);
}
.wcm-ph-tag-filter-toggle--expanded {
color: var(--wcm-ye) !important;
}
.wcm-ph-tag-filter-toggle--expanded .wcm-ph-tfToggle-chevron {
transform: rotate(180deg);
}
.wcm-ph-tfToggle-chevron {
width: 11px !important;
height: 11px !important;
flex-shrink: 0;
transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.wcm-ph-tag-filter-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid rgba(138,72,220,.2);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.45);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .8px;
cursor: pointer;
white-space: nowrap;
transition: all .2s;
font-family: var(--wcm-font);
flex-shrink: 0;
}
.wcm-ph-tag-filter-btn:hover {
background: rgba(114,54,186,.15);
border-color: rgba(114,54,186,.4);
color: var(--wcm-pu4);
}
.wcm-ph-tag-filter-btn--active {
background: rgba(255,202,40,.12) !important;
border-color: rgba(255,202,40,.4) !important;
color: var(--wcm-ye) !important;
}
.wcm-ph-tag-filter-count {
opacity: .6;
font-weight: 500;
font-size: 9px;
}
/* =======================================================================
TAG BADGES – pills na kafelkach partnerów
======================================================================= */
/* Pasek tagów pod lokalizacją — spacing kontroluje gap rodzica .wcm-ph-tile-content */
.wcm-ph-tile-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.wcm-ph-tile-tag {
display: inline-flex;
align-items: center;
padding: 2px 5px;
border-radius: 12px;
border: 1px solid rgba(114,54,186,.3);
background: rgba(114,54,186,.1);
color: var(--wcm-pu4);
font-size: 8px;
font-weight: 500;
text-transform: lowercase;
letter-spacing: .6px;
cursor: pointer;
transition: background .18s, border-color .18s, color .18s, transform .15s;
font-family: var(--wcm-font);
white-space: nowrap;
user-select: none;
}
.wcm-ph-tile-tag:hover {
background: rgba(114,54,186,.22);
border-color: rgba(114,54,186,.55);
transform: translateY(-1px);
}
.wcm-ph-tile-tag--active {
background: rgba(255,202,40,.15) !important;
border-color: rgba(255,202,40,.45) !important;
color: var(--wcm-ye) !important;
}
/* Link w nazwie kafelka (do podstrony partnera) */
.wcm-ph-tile-name-link {
color: inherit;
text-decoration: none;
transition: color .2s;
}
.wcm-ph-tile-name-link:hover {
color: var(--wcm-ye);
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 3px;
}
/* =======================================================================
CONTACT STRIP – pasek ikon kontaktowych na kafelku
======================================================================= */
.wcm-ph-tile-contact-strip {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 6px;
}
/* Kolory ikon wg platformy */
.wcm-ph-tile-icon--fb:hover {
color: #4267B2 !important;
border-color: rgba(66, 103, 178, .4) !important;
background: rgba(66, 103, 178, .1) !important;
}
.wcm-ph-tile-icon--ggl:hover {
border-color: rgba(234, 67, 53, .35) !important;
background: rgba(234, 67, 53, .08) !important;
}
.wcm-ph-tile-icon--ig:hover {
color: #e1306c !important;
border-color: rgba(225, 48, 108, .4) !important;
background: rgba(225, 48, 108, .1) !important;
}
.wcm-ph-tile-icon--tt:hover {
color: #69c9d0 !important;
border-color: rgba(105, 201, 208, .4) !important;
background: rgba(0, 0, 0, .35) !important;
}
/* Telefony – oba numery obok siebie, kompaktowe */
.wcm-ph-tile-phones {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
margin-top: 3px;
}
.wcm-ph-tile-phone {
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, .5);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color .2s;
white-space: nowrap;
}
.wcm-ph-tile-phone .wi { width: 10px; height: 10px; color: var(--wcm-pu3); }
.wcm-ph-tile-phone:hover { color: rgba(255, 255, 255, .85); }
/* Adres strony WWW – tekst-link w footerze kafelka (margin-top: 0 — footer ma własny separator) */
.wcm-ph-tile-website {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 500;
color: rgba(192, 132, 252, .65);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
transition: color .2s;
}
.wcm-ph-tile-website .wi {
width: 11px;
height: 11px;
flex-shrink: 0;
color: var(--wcm-pu3);
}
.wcm-ph-tile-website:hover { color: var(--wcm-pu4); }
/* =======================================================================
GAMIFICATION - TIERS & BADGES
======================================================================= */
.wcm-ph-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 6px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .8px;
margin-bottom: 2px;
width: fit-content;
font-family: var(--wcm-font);
}
.wcm-ph-badge svg { flex-shrink: 0; }
/* Mniejszy wariant badge’a używany w kafelkach (tier) */
.wcm-ph-badge--sm {
font-size: 8px;
padding: 2px 7px;
gap: 4px;
margin-bottom: 3px;
border-radius: 5px;
letter-spacing: .6px;
}
.wcm-ph-badge--gold {
background: linear-gradient(135deg, rgba(255,202,40,.12), rgba(255,154,0,.22));
border: 1px solid rgba(255,202,40,.35);
color: var(--wcm-ye);
box-shadow: 0 0 12px rgba(255,202,40,.12);
}
.wcm-ph-badge--premium {
background: linear-gradient(135deg, rgba(114,54,186,.15), rgba(65,29,118,.25));
border: 1px solid rgba(138,72,220,.4);
color: var(--wcm-pu4);
box-shadow: 0 0 12px rgba(138,72,220,.12);
}
.wcm-ph-badge--auth {
background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(21,128,61,.22));
border: 1px solid rgba(34,197,94,.35);
color: #4ade80;
box-shadow: 0 0 12px rgba(34,197,94,.12);
}
/* Kafelki — tier visual treatment (redesign v2: pełna ramka tinted + subtelny gradient tła) */
.wcm-ph-tile--tier-gold {
background: linear-gradient(135deg, rgba(255,202,40,.05), rgba(10,8,20,.4) 60%) !important;
border-color: rgba(255,202,40,.22) !important;
}
.wcm-ph-tile--tier-gold:hover {
border-color: rgba(255,202,40,.5) !important;
box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 30px rgba(255,202,40,.18) !important;
}
.wcm-ph-tile--tier-premium {
background: linear-gradient(135deg, rgba(114,54,186,.07), rgba(10,8,20,.4) 60%) !important;
border-color: rgba(138,72,220,.28) !important;
}
.wcm-ph-tile--tier-premium:hover {
border-color: rgba(138,72,220,.5) !important;
box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 30px rgba(114,54,186,.18) !important;
}
.wcm-ph-tile--tier-authorized {
background: linear-gradient(135deg, rgba(34,197,94,.045), rgba(10,8,20,.4) 60%) !important;
border-color: rgba(34,197,94,.2) !important;
}
.wcm-ph-tile--tier-authorized:hover {
border-color: rgba(34,197,94,.4) !important;
box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 26px rgba(34,197,94,.15) !important;
}
/* =======================================================================
MAP THEMING – ciemna mapa CartoDB dopasowana do motywu dark-space
Warstwa bazowa : dark_nolabels → sepia+hue-rotate przebarwia gr. ku fioletom
Warstwa etykiet: dark_only_labels → białe napisy na przeźroczystym tle
======================================================================= */
/*
* dark_nolabels daje ciemnoszarą bazę (~#1a1a2e).
* sepia(0.3) → wprowadza odrobinę barwy (konieczne przed hue-rotate na szarościach)
* hue-rotate(220deg) → przesuwa zółto-brązowy odcień sepiowy do 250-260° (fiolet/indygo)
* saturate(2.2) → wzmacnia przesunięty fiolet do intensywności motywu
* brightness(0.78) → przyciemnia do poziomu zbliżonego do --wcm-bk (#070710)
* contrast(0.90) → miękczy krawędzie — drogi widoczne ale nie agresywne
*/
.wcm-ph-map .leaflet-tile-pane .wcm-map-base {
filter: sepia(0.3) hue-rotate(220deg) saturate(2.2) brightness(0.78) contrast(0.90);
}
/* ── Warstwa etykiet: białe nazwy miejscowości ───────────────────────── */
/* dark_only_labels = przezroczyste tło + białe/jasne etykiety */
.wcm-ph-map .leaflet-tile-pane .wcm-map-labels {
filter: brightness(0.92) contrast(1.12) opacity(0.88);
}
/* ── Subtelna atmosfera na panelu mapy (nie zasłania kafelków) ─────────── */
.wcm-ph-map-panel::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 8% 12%, rgba(114, 54, 186, .14) 0%, transparent 40%),
radial-gradient(ellipse at 92% 88%, rgba(65, 29, 118, .10) 0%, transparent 36%),
radial-gradient(ellipse at 50% 0%, rgba(255,202, 40, .04) 0%, transparent 28%);
pointer-events: none;
z-index: 2;
}
/* ── Zoom controls – jasne tło + fioletowy/złoty hover ────────────────── */
.wcm-ph-map .leaflet-control-zoom {
border: 1px solid rgba(114, 54, 186, .3) !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, .55) !important;
}
.wcm-ph-map .leaflet-control-zoom a {
background: rgba(7, 3, 18, .88) !important;
color: rgba(192, 132, 252, .75) !important;
border-color: rgba(114, 54, 186, .2) !important;
font-weight: 700 !important;
transition: background .2s, color .2s, box-shadow .2s !important;
}
.wcm-ph-map .leaflet-control-zoom a:hover {
background: rgba(114, 54, 186, .22) !important;
color: #c084fc !important;
border-color: rgba(114, 54, 186, .45) !important;
box-shadow: 0 0 14px rgba(114, 54, 186, .3) !important;
}
/* ── Attribution – jasne, subtelne ───────────────────────────────────── */
.wcm-ph-map .leaflet-control-attribution {
background: rgba(6, 2, 15, .82) !important;
color: rgba(192, 132, 252, .38) !important;
font-size: 9px !important;
letter-spacing: .3px !important;
padding: 3px 8px !important;
backdrop-filter: blur(6px) !important;
border-top: 1px solid rgba(114, 54, 186, .15) !important;
border-left: 1px solid rgba(114, 54, 186, .15) !important;
border-radius: 6px 0 0 0 !important;
}
.wcm-ph-map .leaflet-control-attribution a {
color: rgba(192, 132, 252, .55) !important;
text-decoration: none !important;
transition: color .2s !important;
}
.wcm-ph-map .leaflet-control-attribution a:hover {
color: #c084fc !important;
}
/* ── Popup – ciemny dark-glass na jasnym tle mapy ─────────────────────── */
/* Kontener popupu */
.wcm-ph-map .leaflet-popup-content-wrapper {
background: rgba(7,4,18,.97) !important;
border: 1px solid rgba(114,54,186,.38) !important;
border-radius: 14px !important;
box-shadow:
0 8px 32px rgba(0,0,0,.65),
0 0 30px rgba(114,54,186,.18),
inset 0 1px 0 rgba(255,255,255,.05) !important;
backdrop-filter: blur(16px) !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Linia akcentująca u góry popupu (purple→gold gradient) */
.wcm-ph-map .leaflet-popup-content-wrapper::before {
content: '';
display: block;
height: 2px;
background: linear-gradient(90deg, transparent, #7236ba 30%, #ffca28 70%, transparent);
}
/* Treść */
.wcm-ph-map .leaflet-popup-content {
color: rgba(255,255,255,.9) !important;
font-family: 'Montserrat', system-ui, sans-serif !important;
font-size: 13px !important;
margin: 14px 18px 16px !important;
line-height: 1.6 !important;
}
/* Przycisk zamknięcia */
.wcm-ph-map .leaflet-popup-close-button {
color: rgba(255,255,255,.30) !important;
font-size: 20px !important;
padding: 6px 10px !important;
top: 4px !important;
right: 4px !important;
transition: color .2s !important;
}
.wcm-ph-map .leaflet-popup-close-button:hover {
color: #ffca28 !important;
background: transparent !important;
}
/* Ogon popupu */
.wcm-ph-map .leaflet-popup-tip-container .leaflet-popup-tip {
background: rgba(7,4,18,.97) !important;
box-shadow: none !important;
}
/* ── Google Maps overrides – dark theme ────────────────────────── */
.wcm-ph-map .gm-style .gm-style-iw-c,
.wcm-pp-map .gm-style .gm-style-iw-c {
background: linear-gradient(135deg, rgba(13,13,26,.95), rgba(18,18,42,.98)) !important;
border: 1px solid var(--wcm-pu2) !important;
border-radius: 12px !important;
box-shadow: 0 8px 32px #ffaa008c, #ffaa00 !important;
backdrop-filter: blur(12px) !important;
color: var(--wcm-text) !important;
font-family: var(--wcm-font) !important;
padding: 0 !important;
}
.wcm-ph-map .gm-style .gm-style-iw-t::after,
.wcm-pp-map .gm-style .gm-style-iw-t::after {
background: #0d0d1a !important;
box-shadow: -2px 2px 2px rgba(0,0,0,.3) !important;
border-left: 1px solid var(--wcm-pu3) !important;
border-bottom: 1px solid var(--wcm-pu3) !important;
}
.wcm-ph-map .gm-style .gm-style-iw-tc::after,
.wcm-pp-map .gm-style .gm-style-iw-tc::after {
background: #0d0d1a !important;
}
.wcm-ph-map .gm-style .gm-ui-hover-effect,
.wcm-pp-map .gm-style .gm-ui-hover-effect {
filter: invert(1) brightness(1.5) !important;
opacity: 0.6 !important;
top: 5px !important;
right: 5px !important;
}
.wcm-ph-map .gm-style .gm-ui-hover-effect:hover,
.wcm-pp-map .gm-style .gm-ui-hover-effect:hover {
opacity: 1 !important;
filter: invert(0.6) sepia(1) saturate(3) hue-rotate(240deg) !important;
}
.wcm-ph-map .gm-style .gm-style-iw-d,
.wcm-pp-map .gm-style .gm-style-iw-d {
overflow: hidden !important;
padding: 12px 14px !important;
}
/* ── CSS klasy popupu (używane przez buildPopupHTML w frontend.js) ────── */
.wcm-ph-popup {
display: flex;
flex-direction: column;
gap: 7px;
max-width: 250px;
}
/* Nazwa partnera */
.wcm-ph-popup-name {
display: block;
font-size: 12px;
font-weight: 800;
color: var(--wcm-ye));
line-height: 1.3;
letter-spacing: -.2px;
}
/* Zduplikowane style popup-location zostały przeniesione do map-OpenStreetMap-Leaflet.css */
/* Przycisk telefonu – złoty styl CTA */
.wcm-ph-popup-phone {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 800;
color: var(--wcm-text);
text-decoration: none;
padding: 8px 12px;
background: rgba(255,202,40,.07);
border: 1px solid rgba(255,202,40,.22);
border-radius: 8px;
transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
letter-spacing: .2px;
}
.wcm-ph-popup-phone::before {
content: '📞';
font-size: 12px;
filter: grayscale(1) brightness(2);
}
.wcm-ph-popup-phone:hover {
background: rgba(255,202,40,.14);
border-color: rgba(255,202,40,.42);
color: var(--wcm-ye);
box-shadow: 0 0 14px rgba(255,202,40,.18);
}
/* Link do strony WWW */
.wcm-ph-popup-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 7px;
font-weight: 600;
color: var(--wcm-pu3);
text-decoration: none;
letter-spacing: .4px;
text-transform: uppercase;
transition: color .2s;
}
.wcm-ph-popup-link::after {
content: '→';
font-size: 13px;
line-height: 1;
}
.wcm-ph-popup-link:hover {
color: var(--wcm-ye);
}
/* ── Reduce motion – uproszczony filtr ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.wcm-ph-map .leaflet-tile-pane .wcm-map-base {
filter: sepia(0.2) hue-rotate(220deg) saturate(1.8) brightness(0.80);
}
}
/* =======================================================================
BLOKADA ZBĘDNYCH KONTROLEK I POI – Google Maps & Leaflet
Aktywne wyłącznie nasze pinezki (.wcm-ph-map-marker).
======================================================================= */
/* ── Google Maps: przycisk pełnoekranowy ─────────────────────────────── */
/* Backup CSS – API może wyrenderować przycisk mimo ustawienia opcji */
.wcm-ph-map .gm-fullscreen-control,
.wcm-ph-map button[title="Włącz widok pełnoekranowy"],
.wcm-ph-map button[title="Wyłącz widok pełnoekranowy"],
.wcm-ph-map button[title="Toggle fullscreen view"],
.wcm-ph-map button[aria-label="Toggle fullscreen view"] {
display: none !important;
}
/* ── Google Maps: sterowanie kamerą / obrót 3D / tilt / Street View ──── */
.wcm-ph-map .gm-tilt,
.wcm-ph-map .gm-compass,
.wcm-ph-map .gm-svpc,
.wcm-ph-map button[title="Obróć mapę"],
.wcm-ph-map button[title="Rotate map"],
.wcm-ph-map button[title="Sterowanie kamerą na mapie"],
.wcm-ph-map button[aria-label="Sterowanie kamerą na mapie"] {
display: none !important;
}
/* ── Leaflet: fullscreen plugin ──────────────────────────────────────── */
.wcm-ph-map .leaflet-control-fullscreen {
display: none !important;
}
/* ── Leaflet: kursor domyślny na kafelkach (poza markerami) ─────────── */
.wcm-ph-map .leaflet-tile-pane {
cursor: default !important;
}
/* =======================================================================
AUTOCOMPLETE DROPDOWN
Dropdown wywoływany przez #wcm-ph-search, appendowany do
i pozycjonowany fixed przez frontend.js.
======================================================================= */
@keyframes wcm-ac-drop-in {
from { opacity: 0; transform: translateY(-6px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
#wcm-ph-ac-dropdown {
display: none;
width: 100%;
margin-top: 6px;
overflow-x: hidden;
overflow-y: auto;
max-height: 320px;
background: rgba(6, 2, 18, .97);
border: 1px solid rgba(114, 54, 186, .38);
border-radius: 14px;
backdrop-filter: blur(22px) saturate(1.5);
-webkit-backdrop-filter: blur(22px) saturate(1.5);
box-shadow:
0 8px 32px rgba(0, 0, 0, .55),
0 0 24px rgba(114, 54, 186, .1),
inset 0 1px 0 rgba(255, 255, 255, .05);
font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
animation: wcm-ac-drop-in .18s cubic-bezier(.22, 1, .36, 1) both;
scrollbar-width: thin;
scrollbar-color: rgba(114, 54, 186, .4) transparent;
}
#wcm-ph-ac-dropdown::-webkit-scrollbar { width: 3px; }
#wcm-ph-ac-dropdown::-webkit-scrollbar-track { background: transparent; }
#wcm-ph-ac-dropdown::-webkit-scrollbar-thumb {
background: rgba(114, 54, 186, .5);
border-radius: 4px;
}
#wcm-ph-ac-dropdown::before {
content: '';
display: block;
height: 2px;
flex-shrink: 0;
background: linear-gradient(90deg, transparent, #7236ba 30%, #ffca28 70%, transparent);
border-radius: 14px 14px 0 0;
}
.wcm-ph-ac-group-label {
padding: 8px 14px 4px;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(192, 132, 252, .5);
border-top: 1px solid rgba(255, 255, 255, .04);
pointer-events: none;
user-select: none;
}
#wcm-ph-ac-dropdown .wcm-ph-ac-group-label:first-of-type {
border-top: none;
}
.wcm-ph-ac-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 14px;
cursor: pointer;
border-left: 2.5px solid transparent;
transition: background .13s, border-left-color .13s;
min-width: 0;
-webkit-tap-highlight-color: transparent;
}
.wcm-ph-ac-item:hover,
.wcm-ph-ac-item--active {
background: rgba(114, 54, 186, .13);
border-left-color: rgba(255, 202, 40, .75);
}
.wcm-ph-ac-item-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: baseline;
gap: 6px;
overflow: hidden;
}
.wcm-ph-ac-item-label {
flex: 1 1 auto;
min-width: 0;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, .9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.wcm-ph-ac-mark {
background: rgba(255, 202, 40, .22);
color: #ffca28;
border-radius: 3px;
padding: 0 2px;
font-style: normal;
font-weight: 800;
}
.wcm-ph-ac-type-badge {
flex-shrink: 0;
padding: 2px 7px;
border-radius: 10px;
font-size: 8px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .8px;
white-space: nowrap;
line-height: 1.4;
}
.wcm-ph-ac-type-name {
background: rgba(114, 54, 186, .16);
border: 1px solid rgba(114, 54, 186, .32);
color: #c084fc;
}
.wcm-ph-ac-type-voivodeship {
background: rgba(255, 202, 40, .08);
border: 1px solid rgba(255, 202, 40, .25);
color: rgba(255, 202, 40, .85);
}
.wcm-ph-ac-type-tag {
background: rgba(34, 197, 94, .08);
border: 1px solid rgba(34, 197, 94, .25);
color: rgba(74, 222, 128, .9);
}
/* === Miasto (city) — cyjanowy badge, by odróżnić od Firma/Województwo/Usługa */
.wcm-ph-ac-type-city {
background: rgba(34, 211, 238, .08);
border: 1px solid rgba(34, 211, 238, .28);
color: rgba(103, 232, 249, .92);
}
/* === Kod pocztowy obok nazwy miasta w pozycji autocomplete ============
Siostra .wcm-ph-ac-item-label (NIE w środku) — dzięki temu nigdy nie
zostaje obcięty ellipsisem nazwy miasta.
flex-shrink: 0 → zachowuje pełną szerokość, label kurczy się zamiast niego.
Mono font + cyjanowy border = wygląd „metadata”, nie konkurencja
wizualna z nazwą miasta. */
.wcm-ph-ac-item-postal {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .3px;
color: rgba(165, 243, 252, .9);
background: rgba(34, 211, 238, .1);
border: 1px solid rgba(34, 211, 238, .28);
border-radius: 5px;
white-space: nowrap;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Liczba kodów pocztowych miasta gdy >1 (v2.1.8): "20-001…20-958 (588)" — mniejszy szary licznik */
.wcm-ph-ac-item-postal-count {
font-size: 9px;
font-weight: 600;
color: rgba(165, 243, 252, .65);
letter-spacing: 0;
}
/* === Multi-line layout dla pozycji "Miasto" (v2.1.7) =====================
Układ inspirowany Google Places autocomplete:
[Nazwa miasta] [00-002]
[pow. X · Województwo] [Miasto]
Lewa kolumna (.wcm-ph-ac-item-text) staje się column-flexem;
prawa kolumna (.wcm-ph-ac-item-right) trzyma postal nad badge'em.
Dla pozostałych typów (Firma/Województwo/Tag) zostaje stary single-line.
====================================================================== */
.wcm-ph-ac-item--multi {
align-items: flex-start; /* badge’e w prawej kolumnie wyrównane do top */
padding-top: 10px;
padding-bottom: 10px;
}
.wcm-ph-ac-item--multi .wcm-ph-ac-item-text {
flex-direction: column; /* label nad meta */
align-items: flex-start;
gap: 3px;
}
.wcm-ph-ac-item-meta {
display: block;
font-size: 11px;
font-weight: 500;
color: rgba(192, 132, 252, .65); /* przytłumiony fiolet — mniej kontrastowy niż label */
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.wcm-ph-ac-item-right {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
min-width: 0;
}
/* Mobile (<480px): zmniejszamy padding i font meta, żeby zmieścić wszystko */
@media (max-width: 480px) {
.wcm-ph-ac-item--multi {
padding: 8px 12px;
}
.wcm-ph-ac-item-meta {
font-size: 10px;
}
.wcm-ph-ac-item-postal {
font-size: 10px;
padding: 1px 5px;
}
.wcm-ph-ac-item-right {
gap: 3px;
}
}
@media (prefers-reduced-motion: reduce) {
#wcm-ph-ac-dropdown { animation: none; }
}
/* ============================================================
LIMITED LINKING — link tylko na sam tekst (URL/email)
Kontener (wcm-ph-tile-website / wcm-ph-detail-website-link /
wcm-ph-detail-email-link) jest divem; wewnętrzny klikalny.
Ikona oraz spacja są poza linkiem — nie aktywują click.
============================================================ */
.wcm-ph-tile-website-url,
.wcm-ph-detail-website-url,
.wcm-ph-detail-email-address {
color: inherit;
text-decoration: none;
transition: color 160ms ease;
}
.wcm-ph-tile-website-url:hover,
.wcm-ph-detail-website-url:hover,
.wcm-ph-detail-email-address:hover {
color: #ffca28;
text-decoration: underline;
}
/* Kontenery w detail panelu — wyłącz cursor pointer (klikalny tylko inner ).
Kafelki tile mają cursor: pointer na całości (klik = podstrona partnera). */
.wcm-ph-detail-website-link,
.wcm-ph-detail-email-link {
cursor: default;
}
/* =======================================================================
TILE REDESIGN v2 — nowe komponenty kafelka partnera
(strip na górze, header z tier badge w prawym górnym, footer + dystans).
Logo, nazwa i tier-tile borders zaktualizowane in-place wyżej.
======================================================================= */
/* Tier strip — 3px gradient na górze kafelka, kolor zgodny z tier.
Pozycja absolute względem .wcm-ph-tile (który ma overflow:hidden + border-radius)
sprawia że strip jest naturalnie clipowany przez zaokrąglone rogi. */
.wcm-ph-tile-strip {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
pointer-events: none;
z-index: 1;
}
.wcm-ph-tile-strip--gold {
background: linear-gradient(90deg, transparent, var(--wcm-ye2) 18%, var(--wcm-ye) 50%, var(--wcm-ye2) 82%, transparent);
box-shadow: 0 0 12px rgba(255,202,40,.4);
}
.wcm-ph-tile-strip--auth {
background: linear-gradient(90deg, transparent, #22c55e 30%, #4ade80 50%, #22c55e 70%, transparent);
}
.wcm-ph-tile-strip--premium {
background: linear-gradient(90deg, transparent, var(--wcm-pu3) 30%, var(--wcm-pu4) 50%, var(--wcm-pu3) 70%, transparent);
}
/* Header kafelka — nazwa po lewej (line-clamp 2), tier badge po prawej (flex-shrink:0) */
.wcm-ph-tile-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
/* Tier badge w prawym górnym rogu — czytelny kolor + ikona */
.wcm-ph-tile-tier {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
border-radius: 7px;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .8px;
flex-shrink: 0;
white-space: nowrap;
font-family: var(--wcm-font);
line-height: 1.2;
margin-top: 1px; /* drobny align z 1. linią nazwy */
}
.wcm-ph-tile-tier svg { flex-shrink: 0; }
.wcm-ph-tile-tier--gold {
background: linear-gradient(135deg, rgba(255,202,40,.18), rgba(255,154,0,.28));
border: 1px solid rgba(255,202,40,.5);
color: var(--wcm-ye);
box-shadow: 0 0 14px rgba(255,202,40,.2);
}
.wcm-ph-tile-tier--auth {
background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(21,128,61,.26));
border: 1px solid rgba(34,197,94,.45);
color: #4ade80;
}
.wcm-ph-tile-tier--premium {
background: linear-gradient(135deg, rgba(114,54,186,.18), rgba(65,29,118,.28));
border: 1px solid rgba(138,72,220,.45);
color: var(--wcm-pu4);
}
/* Dystans w trybie nearest (v2.1.8) — 3. linia w łańcuchu lokalizacji.
Renderowany przez frontend.js gdy p._distance jest dostępne.
Żółty kolor (akcent theme), nieco mniejszy niż miasto by zachować hierarchię.
Tekst typu "12 km od Twojej lokalizacji" może się zawinąć na małych ekranach. */
.wcm-ph-tile-distance {
font-size: 9px;
color: var(--wcm-ye);
font-weight: 700;
letter-spacing: .1px;
line-height: 1.3;
}
/* Tag „+N więcej" — neutralna pigułka (gdy partner ma >3 tagów) */
.wcm-ph-tile-tag-more {
display: inline-flex;
align-items: center;
padding: 2px 5px;
border-radius: 12px;
font-size: 6px;
font-weight: 500;
color: rgba(255,255,255,.4);
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
letter-spacing: .4px;
user-select: none;
font-family: var(--wcm-font);
}
/* Footer kafelka — separator, www po lewej, „Szczegóły →" po prawej */
.wcm-ph-tile-footer {
display: flex;
align-items: center;
justify-content: flex-end; /* gdy brak www — „Szczegóły" zostaje po prawej */
gap: 8px;
margin: 4px 16px 0;
padding: 10px 0 14px;
border-top: 1px solid rgba(255,255,255,.05);
}
.wcm-ph-tile-footer .wcm-ph-tile-website {
flex: 1;
min-width: 0;
}
/* =======================================================================
END TILE REDESIGN v2
======================================================================= */
/* =======================================================================
============================================================
RESPONSIVE — MOBILE OPTIMIZATIONS (v1.3.0)
============================================================
Breakpointy:
≤ 1024px : Tablet landscape — zwęź listę do 320px
≤ 900px : Stack vertical — lista NAD mapą zamiast obok
≤ 600px : Phone — modal full-screen, kompresja UI, większe tap targets
≤ 480px : Średnie phone — krótszy placeholder, zwiększone fonty inputów
≤ 360px : Galaxy Fold/małe — minimum padding, najmniejsze logo
(hover: none) + (pointer: coarse) : Touch devices — usuń sticky :hover
======================================================================= */
/* --- TABLET LANDSCAPE (≤ 1024px) ------------------------------------- */
@media (max-width: 1024px) {
.wcm-ph-list-panel { width: 320px; }
}
/* --- TABLET PORTRAIT + LARGE PHONE (≤ 900px) ─ MAP-ONLY MODE --------
v2.1.1: Lista wykonawców KOMPLETNIE UKRYTA na mobile — interakcja
bazuje wyłącznie na mapie:
- klik pinezki → popup z logo, nazwą, lokalizacją, CTA „Szczegóły"
- wyszukiwarka (autocomplete + kod pocztowy + geolokalizacja) filtruje
markery na mapie przez mapSyncMarkers() — już istniejący flow
- filtr tagów + licznik wyników widoczne nad mapą
- tryb „najbliżsi" działa (mapFitNearest dopasowuje widok do top 5)
Korzyści:
1. Brak konfliktów scroll'a między listą a mapą (typowy mobile pain point —
próba scroll'a strony łapie scroll listy, próba scroll'a mapy łapie pan)
2. Mapa pełnoekranowa → większe pinezki w stosunku do palca → łatwiej trafić
3. Popup pinezki ma już wszystko czego user potrzebuje (po redesign v2.1.0)
— logo, nazwa, miasto · województwo, link do podstrony
*/
@media (max-width: 900px) {
.wcm-ph-list-panel {
display: none !important;
}
.wcm-ph-split {
flex-direction: column;
height: auto;
}
.wcm-ph-map-panel {
flex: 1;
width: 100%;
height: 65vh;
min-height: 460px;
}
}
/* --- LARGE PHONES (≤ 600px) ------------------------------------------ */
@media (max-width: 600px) {
/* Container — mniejsze marginesy */
.wcm-ph-controls { margin-bottom: 10px; }
.wcm-ph-controls-row { gap: 8px; }
/* Layout: list-panel ukryty od ≤900px (display:none).
Sizing map-panel kaskaduje z bloku ≤900px (65vh / min 460px) —
celowo bez override tutaj, by mapa pozostała pełnowymiarowa na phone'ach. */
/* Search input — font-size 16px ZAPOBIEGA zoom-in na iOS Safari */
.wcm-ph-search-input {
font-size: 16px;
padding: 11px 0;
}
.wcm-ph-search-icon { padding: 0 10px; }
.wcm-ph-search-clear { padding: 0 10px; }
.wcm-ph-search-locate {
width: 44px;
height: 44px;
margin-right: 5px;
}
/* Tag filter — kompaktowo */
.wcm-ph-tag-filter {
max-height: 42px;
padding: 8px 10px;
gap: 4px;
}
.wcm-ph-tag-filter--expanded {
max-height: 220px;
}
.wcm-ph-tag-filter-btn {
padding: 6px 12px;
font-size: 11px;
}
.wcm-ph-tag-filter-toggle {
padding: 7px 12px 9px;
font-size: 10px;
}
/* Tile — kompresja, większe tap targets */
.wcm-ph-tile-main {
padding: 13px 13px 8px;
gap: 12px;
}
.wcm-ph-tile-logo-wrap,
.wcm-ph-tile-logo,
.wcm-ph-tile-logo-ph {
width: 48px;
height: 48px;
}
.wcm-ph-tile-logo-ph { font-size: 18px; }
.wcm-ph-tile-name {
font-size: 14px;
line-height: 1.3;
}
/* Location row — mobile: lekkie zmniejszenie miasta i województwa */
.wcm-ph-tile-location-city {
font-size: 12px;
}
.wcm-ph-tile-location-voiv {
font-size: 10px;
}
.wcm-ph-tile-distance {
font-size: 8px;
}
/* Tile icons (admin edit) — większe tap targets */
.wcm-ph-tile-icon {
width: 36px;
height: 36px;
}
.wcm-ph-tile-icon .wi { width: 14px; height: 14px; }
/* Phone numbers — czytelne, lepsze tap targets */
.wcm-ph-tile-phone {
font-size: 13px;
padding: 4px 0;
}
.wcm-ph-tile-phone .wi { width: 13px; height: 13px; }
/* Website link — kompaktowy */
.wcm-ph-tile-website {
font-size: 12px;
}
/* Footer kafelka — dostosowany padding na mobile */
.wcm-ph-tile-footer {
margin: 4px 13px 0;
padding: 9px 0 13px;
}
.wcm-ph-tile-more-btn {
font-size: 9px;
padding: 5px 0;
}
/* Detail modal — FULL-SCREEN TAKEOVER (slide z dołu zamiast z lewej) */
.wcm-ph-detail {
position: fixed;
inset: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100%;
height: 100vh;
height: 100dvh; /* dynamic viewport height — uwzględnia mobile chrome */
z-index: 99999;
border-right: none;
border-radius: 0;
transform: translateY(100%); /* slide z dołu */
}
.wcm-ph-detail--visible {
transform: translateY(0);
}
.wcm-ph-detail-inner {
padding: 24px 18px 32px;
max-width: 480px;
margin: 0 auto; /* wyśrodkuj na szerszych phone'ach */
}
.wcm-ph-detail-close {
width: 40px;
height: 40px;
top: 14px;
right: 14px;
background: rgba(114,54,186,.18);
border-color: rgba(114,54,186,.4);
color: var(--wcm-pu4);
}
/* Detail logo — większy na full-screen */
.wcm-ph-detail-logo,
.wcm-ph-detail-logo-ph {
width: 84px;
height: 84px;
}
.wcm-ph-detail-logo-ph { font-size: 30px; }
.wcm-ph-detail-name {
font-size: 17px;
}
.wcm-ph-detail-desc {
font-size: 13px;
}
/* Result count — kompaktowo */
.wcm-ph-count {
padding: 4px 2px 0;
}
}
/* --- MEDIUM PHONES (≤ 480px) ----------------------------------------- */
@media (max-width: 480px) {
/* Skróć placeholder — JS robi to dynamicznie, tutaj fallback */
.wcm-ph-search-input::placeholder {
font-size: 13px;
}
/* Layout: list-panel ukryty od ≤900px — sizing kaskaduje */
/* Tile — jeszcze ciaśniej */
.wcm-ph-tile-name { font-size: 13.5px; }
/* Detail modal — pełna szerokość bez ograniczenia */
.wcm-ph-detail-inner {
padding: 22px 14px 28px;
max-width: 100%;
}
}
/* --- VERY SMALL PHONES (≤ 360px — Galaxy Fold etc.) ------------------ */
@media (max-width: 360px) {
.wcm-ph-tile-main {
padding: 11px 11px 6px;
gap: 10px;
}
.wcm-ph-tile-logo-wrap,
.wcm-ph-tile-logo,
.wcm-ph-tile-logo-ph {
width: 44px;
height: 44px;
}
.wcm-ph-tile-logo-ph { font-size: 16px; }
.wcm-ph-tile-name { font-size: 13px; }
.wcm-ph-tile-icon {
width: 32px;
height: 32px;
}
.wcm-ph-tile-footer {
margin: 4px 11px 0;
padding: 8px 0 12px;
}
.wcm-ph-tag-filter {
padding: 6px 8px;
}
.wcm-ph-tag-filter-btn {
padding: 5px 10px;
font-size: 10px;
}
}
/* --- TOUCH DEVICES: USUŃ STICKY :hover ------------------------------- */
/*
* Na touchscreenach pierwszy tap aktywuje :hover (sticky), drugi tap
* aktywuje click. Bez tego patcha każdy element wymaga 2 tapów.
* Override: zerujemy wszystkie :hover żeby zachowywały się jak default.
*/
@media (hover: none) and (pointer: coarse) {
/* Tile hover — bez zmiany tła */
.wcm-ph-tile:hover {
background: transparent;
border-left-color: transparent;
}
.wcm-ph-tile--tier-gold:hover {
background: linear-gradient(135deg, rgba(255,202,40,.05), rgba(10,8,20,.4) 60%);
border-color: rgba(255,202,40,.22);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.wcm-ph-tile--tier-premium:hover {
background: linear-gradient(135deg, rgba(114,54,186,.07), rgba(10,8,20,.4) 60%);
border-color: rgba(138,72,220,.28);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.wcm-ph-tile--tier-authorized:hover {
background: linear-gradient(135deg, rgba(34,197,94,.045), rgba(10,8,20,.4) 60%);
border-color: rgba(34,197,94,.2);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
/* Icons — bez zmiany styli na hover */
.wcm-ph-tile-icon:hover {
color: var(--wcm-dim);
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.07);
}
.wcm-ph-tile-icon.wcm-ph-edit-btn:hover {
background: rgba(255,202,40,.05);
border-color: rgba(255,202,40,.18);
color: rgba(255,202,40,.55);
}
/* Tagi — bez transform translateY (skacze na touch) */
.wcm-ph-tile-tag:hover {
background: rgba(114,54,186,.1);
border-color: rgba(114,54,186,.3);
color: var(--wcm-pu4);
transform: none;
}
.wcm-ph-tag-filter-btn:hover {
background: rgba(255,255,255,.04);
border-color: rgba(138,72,220,.2);
color: rgba(255,255,255,.45);
}
/* "Szczegóły" link — bez aktywnego stanu hover na touch */
.wcm-ph-tile-more-btn:hover {
color: rgba(255, 202, 40, .85);
}
.wcm-ph-tile-more-btn:hover .wcm-ph-tile-more-arrow {
transform: none;
}
.wcm-ph-tag-filter-toggle:hover {
color: rgba(192,132,252,.5);
background: rgba(6,2,15,.55);
}
/* Phone link */
.wcm-ph-tile-phone:hover {
color: rgba(255,255,255,.4);
}
/* Limited linking — text URL/email */
.wcm-ph-tile-website-url:hover,
.wcm-ph-detail-website-url:hover,
.wcm-ph-detail-email-address:hover {
color: inherit;
text-decoration: none;
}
/* Search controls */
.wcm-ph-search-clear:hover { color: var(--wcm-dim); }
.wcm-ph-search-locate:hover {
background: rgba(255,255,255,.05);
border-color: rgba(138,72,220,.22);
color: var(--wcm-pu3);
}
/* Detail close button — zachowaj nieco kontrastu */
.wcm-ph-detail-close:hover {
background: rgba(114,54,186,.18);
border-color: rgba(114,54,186,.4);
color: var(--wcm-pu4);
}
/* Locate active state — zachowaj */
.wcm-ph-search-locate--active:hover {
box-shadow: 0 0 12px rgba(255,202,40,.3);
}
}