/**
 * PetDirectory Theme – Main CSS
 * assets/css/main.css
 * Mobile-first, CSS Custom Properties, modern design
 */

/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Brand Colors */
  --color-primary:      #1a6b4a;   /* Verde bosco */
  --color-primary-light:#2d9c6a;
  --color-primary-dark: #0f4530;
  --color-secondary:    #f4a035;   /* Arancio caldo */
  --color-accent:       #7bc5ae;   /* Verde acqua soft */

  /* Neutrals */
  --color-bg:           #f9f6f0;   /* Beige caldo */
  --color-bg-card:      #ffffff;
  --color-bg-dark:      #1e2d25;
  --color-text:         #2c3e35;
  --color-text-light:   #6b7c74;
  --color-text-muted:   #9eb3a9;
  --color-border:       #e2ede8;

  /* Feedback */
  --color-star:         #f4a035;
  --color-success:      #27ae60;
  --color-danger:       #e74c3c;
  --color-premium:      #d4af37;

  /* Spacing */
  --space-xs:  0.375rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Nunito', system-ui, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.14);
  --shadow-card:0 2px 12px rgba(26,107,74,.08);

  /* Transitions */
  --ease:       cubic-bezier(.4,0,.2,1);
  --duration:   220ms;
}

/* ══════════════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family:    var(--font-body);
  font-size:      var(--text-base);
  line-height:    1.65;
  color:          var(--color-text);
  background:     var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

/* ══════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section { padding: var(--space-xl) 0; }
.section--large { padding: var(--space-2xl) 0; }

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
.display-title {
  font-family:  var(--font-display);
  font-size:    clamp(var(--text-2xl), 4vw, var(--text-4xl));
  line-height:  1.15;
  color:        var(--color-text);
}

.section-title {
  font-family: var(--font-display);
  font-size:   clamp(var(--text-xl), 3vw, var(--text-3xl));
  line-height: 1.2;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-xs);
  padding:          0.75em 1.5em;
  border:           2px solid transparent;
  border-radius:    var(--radius-full);
  font-family:      var(--font-body);
  font-weight:      700;
  font-size:        var(--text-sm);
  cursor:           pointer;
  transition:       all var(--duration) var(--ease);
  white-space:      nowrap;
  text-decoration:  none;
}

.btn-primary {
  background:  var(--color-primary);
  color:       #fff;
  border-color:var(--color-primary);
}
.btn-primary:hover {
  background:  var(--color-primary-dark);
  border-color:var(--color-primary-dark);
  color:       #fff;
  transform:   translateY(-1px);
  box-shadow:  var(--shadow-md);
}

.btn-secondary {
  background:  var(--color-secondary);
  color:       #fff;
  border-color:var(--color-secondary);
}
.btn-secondary:hover {
  filter: brightness(.92);
  transform: translateY(-1px);
}

.btn-outline {
  background:  transparent;
  color:       var(--color-primary);
  border-color:var(--color-primary);
}
.btn-outline:hover {
  background:  var(--color-primary);
  color:       #fff;
}

.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}

.btn-lg { padding: 1em 2em; font-size: var(--text-base); }
.btn-sm { padding: .5em 1em; font-size: var(--text-xs); }

/* ══════════════════════════════════════════════════════════════
   HERO SEARCH
   ══════════════════════════════════════════════════════════════ */
.petdir-hero {
  position:   relative;
  min-height: 540px;
  display:    flex;
  align-items:center;
  overflow:   hidden;
  background: var(--color-primary-dark);
}

.petdir-hero__bg {
  position:   absolute;
  inset:      0;
  object-fit: cover;
  width:      100%;
  height:     100%;
  opacity:    .45;
}

.petdir-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(15,69,48,.82) 0%, rgba(26,107,74,.65) 100%);
}

.petdir-hero__content {
  position:  relative;
  z-index:   2;
  text-align:center;
  padding:   var(--space-2xl) var(--space-md);
  width:     100%;
}

.petdir-hero__eyebrow {
  display:       inline-flex;
  align-items:   center;
  gap:           .5em;
  background:    rgba(255,255,255,.12);
  border:        1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-full);
  color:         rgba(255,255,255,.9);
  font-size:     var(--text-sm);
  font-weight:   600;
  padding:       .35em 1em;
  margin-bottom: var(--space-md);
  backdrop-filter: blur(4px);
}

.petdir-hero__title {
  font-family: var(--font-display);
  font-size:   clamp(var(--text-2xl), 5vw, var(--text-4xl));
  color:       #fff;
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}

.petdir-hero__subtitle {
  color:       rgba(255,255,255,.8);
  font-size:   var(--text-lg);
  margin-bottom: var(--space-lg);
}

/* Search Box */
.search-box {
  background:    #fff;
  border-radius: var(--radius-xl);
  padding:       var(--space-sm);
  display:       flex;
  gap:           var(--space-sm);
  max-width:     820px;
  margin:        0 auto var(--space-lg);
  box-shadow:    var(--shadow-lg);
  flex-wrap:     wrap;
}

.search-box__field {
  flex:         1;
  min-width:    180px;
  display:      flex;
  align-items:  center;
  gap:          .5em;
  padding:      0 var(--space-sm);
  border-right: 1px solid var(--color-border);
}
.search-box__field:last-of-type { border-right: none; }

.search-box__field svg {
  color:  var(--color-text-light);
  flex-shrink: 0;
}

.search-box__input {
  border:      none;
  outline:     none;
  font-family: var(--font-body);
  font-size:   var(--text-base);
  color:       var(--color-text);
  width:       100%;
  background:  transparent;
}
.search-box__input::placeholder { color: var(--color-text-muted); }

.search-box__btn {
  flex-shrink: 0;
}

/* Quick categories */
.quick-cats {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--space-xs);
  justify-content: center;
}

.quick-cat {
  display:       inline-flex;
  align-items:   center;
  gap:           .4em;
  background:    rgba(255,255,255,.15);
  border:        1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-full);
  color:         #fff;
  font-size:     var(--text-sm);
  font-weight:   600;
  padding:       .4em 1em;
  cursor:        pointer;
  transition:    all var(--duration) var(--ease);
  backdrop-filter: blur(4px);
}
.quick-cat:hover {
  background:    rgba(255,255,255,.28);
  transform:     translateY(-2px);
  color:         #fff;
}

/* ══════════════════════════════════════════════════════════════
   STATS BAR
   ══════════════════════════════════════════════════════════════ */
.petdir-statsbar {
  background: var(--color-primary);
  padding:    var(--space-md) 0;
  color:      #fff;
}

.petdir-statsbar__inner {
  display:         flex;
  justify-content: center;
  gap:             var(--space-xl);
  flex-wrap:       wrap;
}

.statbar-item { text-align: center; }
.statbar-item__num {
  font-size:   var(--text-2xl);
  font-weight: 800;
  line-height: 1;
}
.statbar-item__label {
  font-size:   var(--text-xs);
  opacity:     .8;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ══════════════════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════════════════ */
.filter-bar {
  background:  var(--color-bg-card);
  border:      1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:     var(--space-md);
  display:     flex;
  gap:         var(--space-sm);
  flex-wrap:   wrap;
  align-items: center;
  margin-bottom: var(--space-lg);
  box-shadow:  var(--shadow-sm);
}

.filter-bar__label {
  font-weight: 700;
  font-size:   var(--text-sm);
  color:       var(--color-text-light);
  white-space: nowrap;
}

.filter-bar select,
.filter-bar input[type="text"] {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       .55em 1em;
  font-family:   var(--font-body);
  font-size:     var(--text-sm);
  color:         var(--color-text);
  background:    var(--color-bg);
  outline:       none;
  transition:    border-color var(--duration) var(--ease);
}
.filter-bar select:focus,
.filter-bar input:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px rgba(26,107,74,.12);
}

.filter-radius {
  display:     flex;
  align-items: center;
  gap:         .5em;
  font-size:   var(--text-sm);
}

.filter-radius input[type="range"] {
  accent-color: var(--color-primary);
  cursor:       pointer;
}

/* ══════════════════════════════════════════════════════════════
   PROFESSIONAL CARD
   ══════════════════════════════════════════════════════════════ */
.prof-card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  transition:    transform var(--duration) var(--ease),
                 box-shadow var(--duration) var(--ease);
  position:      relative;
  display:       flex;
  flex-direction:column;
}

.prof-card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Premium badge */
.prof-card--premium {
  border-color: var(--color-premium);
}

.badge-premium {
  position:      absolute;
  top:           var(--space-sm);
  right:         var(--space-sm);
  background:    var(--color-premium);
  color:         #fff;
  font-size:     var(--text-xs);
  font-weight:   700;
  padding:       .25em .75em;
  border-radius: var(--radius-full);
  z-index:       2;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.badge-verified {
  display:       inline-flex;
  align-items:   center;
  gap:           .3em;
  background:    rgba(26,107,74,.1);
  color:         var(--color-primary);
  font-size:     var(--text-xs);
  font-weight:   700;
  padding:       .2em .6em;
  border-radius: var(--radius-full);
}

/* Card Image */
.prof-card__image-wrap {
  position:    relative;
  height:      200px;
  overflow:    hidden;
  background:  #e8f5e9;   /* verde chiaro neutro, non copre il testo */
}

.prof-card__image {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
  display:    block;
}
.prof-card:hover .prof-card__image { transform: scale(1.04); }

.prof-card__wishlist {
  position:      absolute;
  top:           var(--space-sm);
  left:          var(--space-sm);
  background:    rgba(255,255,255,.9);
  border:        none;
  border-radius: var(--radius-full);
  width:         36px;
  height:        36px;
  display:       flex;
  align-items:   center;
  justify-content:center;
  cursor:        pointer;
  color:         var(--color-text-light);
  transition:    all var(--duration) var(--ease);
  backdrop-filter: blur(4px);
}
.prof-card__wishlist.active,
.prof-card__wishlist:hover { color: #e74c3c; }

/* Card Body */
.prof-card__body {
  padding:       var(--space-md);
  display:       flex;
  flex-direction:column;
  gap:           var(--space-xs);
  flex:          1;
}

.prof-card__header {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-sm);
}

.prof-card__logo {
  width:         52px;
  height:        52px;
  border-radius: var(--radius-md);
  object-fit:    cover;
  border:        2px solid var(--color-border);
  flex-shrink:   0;
}

.prof-card__category {
  display:       inline-flex;
  align-items:   center;
  gap:           .3em;
  color:         var(--color-primary);
  font-size:     var(--text-xs);
  font-weight:   700;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom: .25em;
}

.prof-card__name {
  font-family: var(--font-display);
  font-size:   var(--text-lg);
  line-height: 1.2;
  color:       var(--color-text);
  font-weight: 700;
}
.prof-card__name a { color: inherit; }
.prof-card__name a:hover { color: var(--color-primary); }

/* Rating */
.star-rating {
  display:     flex;
  align-items: center;
  gap:         .3em;
  font-size:   var(--text-sm);
}

.star-rating__stars { color: var(--color-star); letter-spacing: .05em; }
.star-rating__score { font-weight: 700; }
.star-rating__count { color: var(--color-text-muted); }

/* Location */
.prof-card__location {
  display:     flex;
  align-items: center;
  gap:         .4em;
  color:       var(--color-text-light);
  font-size:   var(--text-sm);
}

.prof-card__distance {
  display:       inline-flex;
  align-items:   center;
  gap:           .3em;
  background:    rgba(26,107,74,.08);
  color:         var(--color-primary);
  border-radius: var(--radius-full);
  padding:       .2em .7em;
  font-size:     var(--text-xs);
  font-weight:   700;
}

/* Tags */
.tag-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       .4em;
}

.tag {
  background:    rgba(26,107,74,.07);
  color:         var(--color-primary-dark);
  border:        1px solid rgba(26,107,74,.15);
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   600;
  padding:       .25em .7em;
  cursor:        pointer;
  transition:    all var(--duration) var(--ease);
}
.tag:hover {
  background: var(--color-primary);
  color:      #fff;
  border-color: var(--color-primary);
}

/* Card footer CTA */
.prof-card__footer {
  padding:     0 var(--space-md) var(--space-md);
  display:     flex;
  gap:         var(--space-xs);
  margin-top:  auto;
}

.prof-card__footer .btn { flex: 1; justify-content: center; }

/* ══════════════════════════════════════════════════════════════
   DIRECTORY LAYOUT
   ══════════════════════════════════════════════════════════════ */
.directory-wrap {
  display: grid;
  gap:     var(--space-lg);
}

.directory-wrap--grid-map {
  grid-template-columns: 1fr 420px;
}

.directory-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   var(--space-md);
}

/* Map panel */
.directory-map-panel {
  position: sticky;
  top:      90px;
  height:   calc(100vh - 110px);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  border:        1px solid var(--color-border);
  box-shadow:    var(--shadow-md);
}

#petdir-map {
  width:  100%;
  height: 100%;
}

/* Leaflet popup */
.petdir-popup { font-family: var(--font-body); min-width: 220px; }
.petdir-popup__img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: .5em; }
.petdir-popup__name { font-weight: 700; font-size: var(--text-sm); color: var(--color-text); }
.petdir-popup__cat  { font-size: var(--text-xs); color: var(--color-primary); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   CATEGORIES GRID
   ══════════════════════════════════════════════════════════════ */
.cat-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   var(--space-md);
}

.cat-card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-lg) var(--space-md);
  text-align:    center;
  cursor:        pointer;
  transition:    all var(--duration) var(--ease);
  text-decoration: none;
  color:         var(--color-text);
}
.cat-card:hover {
  background:   var(--color-primary);
  border-color: var(--color-primary);
  color:        #fff;
  transform:    translateY(-4px);
  box-shadow:   var(--shadow-md);
}

.cat-card__icon {
  font-size:     2.5rem;
  line-height:   1;
  margin-bottom: var(--space-sm);
}

.cat-card__name {
  font-weight: 700;
  font-size:   var(--text-sm);
  line-height: 1.3;
}

.cat-card__count {
  font-size:  var(--text-xs);
  color:      var(--color-text-muted);
  margin-top: .25em;
}
.cat-card:hover .cat-card__count { color: rgba(255,255,255,.75); }

/* ══════════════════════════════════════════════════════════════
   SINGLE PROFESSIONAL PAGE
   ══════════════════════════════════════════════════════════════ */
.prof-hero {
  background:    var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  padding:       var(--space-xl) 0 0;
}

.prof-hero__inner {
  display:     flex;
  gap:         var(--space-lg);
  align-items: flex-start;
  flex-wrap:   wrap;
}

.prof-hero__logo {
  width:         120px;
  height:        120px;
  border-radius: var(--radius-lg);
  object-fit:    cover;
  border:        3px solid var(--color-border);
  box-shadow:    var(--shadow-md);
  flex-shrink:   0;
}

.prof-hero__info { flex: 1; min-width: 260px; }

.prof-hero__category {
  font-size:     var(--text-sm);
  font-weight:   700;
  color:         var(--color-primary);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom: .35em;
}

.prof-hero__name {
  font-family:   var(--font-display);
  font-size:     clamp(var(--text-2xl), 4vw, var(--text-3xl));
  line-height:   1.1;
  margin-bottom: var(--space-sm);
}

.prof-hero__meta {
  display:   flex;
  gap:       var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.prof-hero__actions {
  display:   flex;
  gap:       var(--space-sm);
  flex-wrap: wrap;
  padding:   var(--space-md) 0;
}

/* Sticky CTA bar */
.prof-sticky-cta {
  position:   sticky;
  bottom:     0;
  z-index:    100;
  background: var(--color-bg-card);
  border-top: 2px solid var(--color-primary);
  padding:    var(--space-sm) var(--space-md);
  display:    flex;
  align-items:center;
  gap:        var(--space-md);
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
  display:    none; /* shown on scroll via JS */
}

/* Contact quick bar */
.contact-quick {
  display:       flex;
  gap:           var(--space-sm);
  flex-wrap:     wrap;
  background:    var(--color-bg);
  border-radius: var(--radius-lg);
  padding:       var(--space-md);
}

.contact-item {
  display:     flex;
  align-items: center;
  gap:         .5em;
  color:       var(--color-text);
  font-size:   var(--text-sm);
}
.contact-item a { color: var(--color-primary); font-weight: 700; }
.contact-item a:hover { text-decoration: underline; }

/* Opening hours */
.opening-hours { font-size: var(--text-sm); }
.opening-hours__row {
  display:         flex;
  justify-content: space-between;
  gap:             var(--space-md);
  padding:         .5em 0;
  border-bottom:   1px solid var(--color-border);
}
.opening-hours__row:last-child { border: none; }
.opening-hours__day  { font-weight: 700; }
.opening-hours__time { color: var(--color-text-light); }
.opening-hours__closed { color: var(--color-danger); }

/* Map section */
.prof-map { height: 320px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }

/* ══════════════════════════════════════════════════════════════
   REVIEWS
   ══════════════════════════════════════════════════════════════ */
.review-card {
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-md);
  margin-bottom: var(--space-sm);
}

.review-card__header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-sm);
  margin-bottom: var(--space-sm);
}

.review-card__avatar {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  object-fit:    cover;
  background:    var(--color-accent);
}

.review-card__name { font-weight: 700; font-size: var(--text-sm); }
.review-card__date { font-size: var(--text-xs); color: var(--color-text-muted); }
.review-card__body { color: var(--color-text-light); font-size: var(--text-sm); line-height: 1.6; }

/* Star input */
.star-input { display: flex; flex-direction: row-reverse; gap: .2em; }
.star-input input { display: none; }
.star-input label {
  font-size:  2rem;
  color:      var(--color-text-muted);
  cursor:     pointer;
  transition: color var(--duration) var(--ease);
}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label { color: var(--color-star); }

/* ══════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════ */
.petdir-form { display: grid; gap: var(--space-md); }

.form-group { display: grid; gap: .4em; }

.form-group label {
  font-weight: 700;
  font-size:   var(--text-sm);
  color:       var(--color-text);
}

.form-control {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       .75em 1em;
  font-family:   var(--font-body);
  font-size:     var(--text-base);
  color:         var(--color-text);
  background:    var(--color-bg-card);
  outline:       none;
  width:         100%;
  transition:    border-color var(--duration) var(--ease),
                 box-shadow var(--duration) var(--ease);
}
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px rgba(26,107,74,.12);
}

textarea.form-control { resize: vertical; min-height: 120px; }

/* ══════════════════════════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════════════════════════ */
.cta-banner {
  background:    var(--color-primary);
  border-radius: var(--radius-xl);
  padding:       var(--space-xl) var(--space-lg);
  text-align:    center;
  color:         #fff;
  position:      relative;
  overflow:      hidden;
}

.cta-banner::before {
  content: '🐾';
  position: absolute;
  font-size: 8rem;
  opacity: .06;
  top: -1rem;
  right: 2rem;
  transform: rotate(-15deg);
  pointer-events: none;
}

.cta-banner__title {
  font-family:   var(--font-display);
  font-size:     clamp(var(--text-xl), 3vw, var(--text-3xl));
  margin-bottom: var(--space-sm);
}

.cta-banner__text {
  font-size:     var(--text-lg);
  opacity:       .85;
  margin-bottom: var(--space-lg);
  max-width:     560px;
  margin-left:   auto;
  margin-right:  auto;
}

/* ══════════════════════════════════════════════════════════════
   HEADER / NAV  →  stili completi nella sezione "HEADER & TOPBAR"
   ══════════════════════════════════════════════════════════════ */

.site-logo {
  font-family: var(--font-display);
  font-size:   var(--text-xl);
  color:       var(--color-primary);
  font-weight: 700;
  display:     flex;
  align-items: center;
  gap:         .4em;
}

.site-nav {
  display: flex;
  gap:     var(--space-lg);
  list-style: none;
}

.site-nav a {
  font-size:   var(--text-sm);
  font-weight: 600;
  color:       var(--color-text);
  transition:  color var(--duration) var(--ease);
}
.site-nav a:hover { color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════ */
.petdir-pagination {
  display:         flex;
  justify-content: center;
  gap:             .5em;
  padding:         var(--space-lg) 0;
}

.petdir-pagination a,
.petdir-pagination span {
  display:       flex;
  align-items:   center;
  justify-content:center;
  width:         40px;
  height:        40px;
  border-radius: var(--radius-md);
  font-weight:   700;
  font-size:     var(--text-sm);
  border:        1px solid var(--color-border);
  color:         var(--color-text);
  transition:    all var(--duration) var(--ease);
}

.petdir-pagination a:hover,
.petdir-pagination .current {
  background:   var(--color-primary);
  border-color: var(--color-primary);
  color:        #fff;
}

/* ══════════════════════════════════════════════════════════════
   LOADING / SKELETON
   ══════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--color-border) 25%, #eee 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.4s infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .directory-wrap--grid-map { grid-template-columns: 1fr; }
  .directory-map-panel { height: 400px; position: relative; top: auto; }
}

@media (max-width: 768px) {
  .search-box {
    border-radius: var(--radius-lg);
    flex-direction: column;
  }
  .search-box__field { border-right: none; border-bottom: 1px solid var(--color-border); }
  .search-box__field:last-of-type { border-bottom: none; }

  .prof-hero__inner { flex-direction: column; }
  .prof-hero__logo  { width: 80px; height: 80px; }

  .directory-grid { grid-template-columns: 1fr; }

  .site-nav { display: none; } /* mobile menu handled by JS */

  .prof-sticky-cta { display: flex; }
}

@media (max-width: 480px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .petdir-hero { min-height: 420px; }
}

/* ═══════════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════════ */
.topbar {
  background: var(--color-primary-dark); color: #fff; font-size: .8rem;
  padding: 6px 0; position: relative; z-index: 1001;
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.topbar-item { display: flex; align-items: center; gap: 6px; opacity: .9; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar-link { color: #fff; text-decoration: none; opacity: .85; transition: opacity .2s; white-space: nowrap; }
.topbar-link:hover { opacity: 1; }
.topbar-link--cta { background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 20px; }
.topbar-link--pro { background: var(--color-secondary); color: #fff !important; padding: 4px 12px; border-radius: 20px; font-weight: 700; opacity: 1 !important; }

/* ═══════════════════════════════════════════════════════════
   SITE HEADER
═══════════════════════════════════════════════════════════ */
#page { position: relative; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #fff; border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .3s var(--ease), background .3s, box-shadow .3s, border-color .3s;
}
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.header--hidden { transform: translateY(-110%); }

/* Homepage trasparente: rimane STICKY ma con sfondo trasparente.
   La hero section sale con margin-top negativo per stare dietro l'header. */
.site-header--transparent {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* Diventa solido dopo scroll (JS aggiunge .site-header--solid) */
.site-header--transparent.site-header--solid {
  background: rgba(255,255,255,.97) !important;
  border-bottom-color: var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }

/* Logo */
.site-logo-link { text-decoration: none; flex-shrink: 0; }
.site-logo-text { display: flex; align-items: center; gap: 8px; }
.logo-icon { font-size: 1.6rem; line-height: 1; }
.logo-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.site-header--transparent .logo-name,
.site-header--transparent .logo-icon { color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.25)); }
.site-header--transparent.site-header--solid .logo-name,
.site-header--transparent.site-header--solid .logo-icon { color: var(--color-primary); filter: none; }

/* Nav */
.main-navigation { flex: 1; }
.main-navigation .nav-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.main-navigation .nav-menu > li > a { display: block; padding: 8px 14px; text-decoration: none; color: var(--color-text); font-weight: 600; border-radius: 8px; font-size: .9rem; transition: background .2s, color .2s; white-space: nowrap; }
.main-navigation .nav-menu > li > a:hover,
.main-navigation .nav-menu > li.current-menu-item > a { background: rgba(26,107,74,.08); color: var(--color-primary); }
.site-header--transparent .nav-menu > li > a { color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.2); }
.site-header--transparent .nav-menu > li > a:hover { background: rgba(255,255,255,.15); color: #fff; text-shadow: none; }
.site-header--transparent.site-header--solid .nav-menu > li > a { color: var(--color-text); text-shadow: none; }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.header-search-toggle, .header-wishlist {
  background: none; border: none; cursor: pointer; color: var(--color-text);
  padding: 8px; border-radius: 8px; transition: background .2s; position: relative; display: flex; align-items: center;
}
.header-search-toggle:hover, .header-wishlist:hover { background: rgba(0,0,0,.06); }
.site-header--transparent .header-search-toggle,
.site-header--transparent .header-wishlist { color: #fff; }
.site-header--transparent .header-search-toggle:hover,
.site-header--transparent .header-wishlist:hover { background: rgba(255,255,255,.15); }
.site-header--transparent.site-header--solid .header-search-toggle,
.site-header--transparent.site-header--solid .header-wishlist { color: var(--color-text); }
.wishlist-count {
  position: absolute; top: 2px; right: 2px; background: var(--color-secondary);
  color: #fff; font-size: .6rem; width: 16px; height: 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700;
}

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: all .3s; }
.site-header--transparent .hamburger span { background: #fff; }
.site-header--transparent.site-header--solid .hamburger span { background: var(--color-text); }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Search overlay */
.header-search-overlay {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 2px solid var(--color-primary);
  padding: 16px 0; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 200;
}
.header-search-overlay.open { display: block; animation: slideDown .2s ease; }
.header-search-form { display: flex; gap: 8px; }
.header-search-form input[type="search"] { flex: 1; padding: 10px 16px; border: 2px solid var(--color-border); border-radius: 8px; font-size: 1rem; outline: none; }
.header-search-form input[type="search"]:focus { border-color: var(--color-primary); }
.header-search-form button[type="submit"] { background: var(--color-primary); color: #fff; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; }
.search-overlay-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #666; padding: 8px; }

/* Overlay + mobile menu */
.mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 190; opacity: 0; transition: opacity .25s; }
.mobile-menu-overlay.visible { opacity: 1; }
body.menu-open { overflow: hidden; }
.mobile-menu {
  display: none; position: fixed; top: 0; right: 0;
  width: min(340px, 100vw); height: 100vh; background: #fff;
  z-index: 201; box-shadow: -4px 0 24px rgba(0,0,0,.15);
  flex-direction: column; overflow-y: auto;
}
.mobile-menu.open { display: flex; animation: slideInRight .25s ease; }
.mobile-menu-inner { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.mobile-menu .mobile-nav-menu { list-style: none; margin: 0; padding: 0; }
.mobile-menu .mobile-nav-menu li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--color-border); font-size: 1rem; font-weight: 600; color: var(--color-text); text-decoration: none; transition: color .2s; }
.mobile-menu .mobile-nav-menu li a:hover { color: var(--color-primary); }
.mobile-menu-footer { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.btn-block { width: 100%; text-align: center; }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.footer-newsletter { background: var(--color-primary); padding: 40px 0; color: #fff; }
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.newsletter-text h3 { margin: 0 0 6px; font-size: 1.3rem; }
.newsletter-text p { margin: 0; opacity: .85; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input { padding: 12px 18px; border: none; border-radius: 8px; min-width: 260px; font-size: .95rem; }
.footer-main { background: var(--color-primary-dark); color: rgba(255,255,255,.85); padding: 60px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; }
.footer-logo { display: flex; align-items: center; gap: 10px; color: #fff; }
.footer-logo .logo-name { color: #fff; }
.footer-tagline { margin: 16px 0; font-size: .9rem; opacity: .75; line-height: 1.6; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.social-icon { background: rgba(255,255,255,.1); color: #fff; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.social-icon:hover { background: var(--color-accent); }
.footer-heading { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .05em; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: rgba(255,255,255,.7); text-decoration: none; font-size: .9rem; transition: color .2s; }
.footer-links a:hover { color: var(--color-accent); }
.footer-contacts { list-style: none; padding: 0; margin: 0; }
.footer-contacts li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; color: rgba(255,255,255,.7); font-size: .9rem; }
.footer-contacts a { color: rgba(255,255,255,.7); text-decoration: none; }
.footer-contacts a:hover { color: #fff; }
.app-badges { margin-top: 20px; }
.app-badges-label { font-size: .8rem; opacity: .7; margin-bottom: 8px; }
.app-badges-grid { display: flex; gap: 8px; }
.app-badge { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); color: #fff; padding: 8px 12px; border-radius: 8px; font-size: .8rem; text-decoration: none; transition: background .2s; }
.app-badge:hover { background: rgba(255,255,255,.2); }
.footer-bottom { background: rgba(0,0,0,.2); padding: 16px 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.copyright { margin: 0; color: rgba(255,255,255,.5); font-size: .85rem; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: rgba(255,255,255,.5); text-decoration: none; font-size: .85rem; }
.footer-legal a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════
   HOMEPAGE
═══════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  margin-top: -68px;           /* sale sopra l'header sticky (68px = altezza header) */
  padding: 148px 0 0;          /* 68px header + 80px per il contenuto */
  min-height: 600px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 50%, #388e3c 100%);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,.05) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,.08) 0%, transparent 50%); }
.hero-bg-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.15)); }
.hero-content { position: relative; z-index: 1; text-align: center; color: #fff; padding-bottom: 0; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); padding: 8px 18px; border-radius: 24px; font-size: .85rem; margin-bottom: 20px; backdrop-filter: blur(10px); }
.hero-title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 16px; line-height: 1.2; }
.hero-title-highlight { color: var(--color-accent-light, #a5d6a7); display: block; }
.hero-subtitle { font-size: clamp(.95rem, 2vw, 1.15rem); opacity: .9; max-width: 600px; margin: 0 auto 36px; line-height: 1.6; }

/* Hero search box */
.hero-search-box { background: #fff; border-radius: 16px; padding: 20px; max-width: 860px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.hero-search-form { display: flex; gap: 8px; flex-wrap: wrap; }
.search-field { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; border: 2px solid #eee; border-radius: 10px; padding: 0 12px; transition: border-color .2s; }
.search-field:focus-within { border-color: var(--color-primary); }
.search-field label { flex-shrink: 0; color: #999; }
.search-field input, .search-field select { border: none; outline: none; width: 100%; font-size: .95rem; background: none; padding: 12px 0; color: var(--color-text); }
.search-field--location { position: relative; }
.geo-btn { background: none; border: none; cursor: pointer; color: var(--color-primary); padding: 4px; border-radius: 6px; transition: background .2s; flex-shrink: 0; }
.geo-btn:hover { background: var(--color-bg-light); }
.hero-search-btn { padding: 12px 24px; font-size: 1rem; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.hero-quick-cats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.quick-cats-label { font-size: .85rem; color: #666; }
.quick-cat-pill { background: var(--color-bg-light); border: 1px solid #e0e0e0; padding: 5px 12px; border-radius: 20px; font-size: .82rem; text-decoration: none; color: var(--color-text); transition: all .2s; font-weight: 600; }
.quick-cat-pill:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Hero stats */
.hero-stats-bar { background: rgba(255,255,255,.1); backdrop-filter: blur(10px); margin-top: 40px; padding: 20px 0; }
.hero-stats-grid { display: flex; justify-content: center; gap: 60px; }
.hero-stat { text-align: center; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.stat-icon { font-size: 1.4rem; }
.stat-value { font-size: 1.6rem; font-weight: 800; }
.stat-label { font-size: .8rem; opacity: .8; }

/* Categories section */
.categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.category-card { background: var(--cat-bg, #f0f0f0); color: var(--cat-text, #333); border-radius: 14px; padding: 24px 20px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden; }
.category-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.category-card-icon { font-size: 2rem; }
.category-card-name { font-size: 1rem; font-weight: 700; margin: 0; color: inherit; }
.category-card-count { font-size: .82rem; opacity: .75; }
.category-card-arrow { position: absolute; right: 16px; bottom: 16px; font-size: 1.2rem; transition: transform .2s; }
.category-card:hover .category-card-arrow { transform: translateX(4px); }

/* Steps */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step-card { background: #fff; border-radius: 16px; padding: 32px 24px; text-align: center; box-shadow: 0 2px 16px rgba(0,0,0,.06); position: relative; }
.step-num { font-family: var(--font-heading); font-size: 3rem; font-weight: 800; color: var(--color-primary); opacity: .15; position: absolute; top: 12px; right: 20px; line-height: 1; }
.step-icon { font-size: 2.5rem; margin-bottom: 12px; }
.step-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; }
.step-desc { font-size: .9rem; color: #666; line-height: 1.6; margin: 0; }

/* Map preview */
.bg-dark { background: #1b2a20; }
.map-preview-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.section-title--light { color: #fff; }
.section-subtitle--light { color: rgba(255,255,255,.75); }
.section-badge--light { background: rgba(255,255,255,.1); color: #fff; }
.map-features-list { list-style: none; padding: 0; margin: 16px 0 28px; }
.map-features-list li { padding: 6px 0; color: rgba(255,255,255,.85); font-size: .95rem; }
.map-preview-map { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4); height: 380px; }
.homepage-map-container { width: 100%; height: 100%; }
.map-preview-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 24px; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.4)); }
.map-overlay-btn { background: #fff; color: var(--color-primary); font-weight: 700; padding: 12px 24px; border-radius: 24px; text-decoration: none; font-size: .9rem; transition: transform .2s, box-shadow .2s; }
.map-overlay-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.2); }

/* Reviews section */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card { background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.review-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.review-text { margin: 0 0 12px; color: #555; font-size: .9rem; line-height: 1.6; }
.review-pro-link { font-size: .8rem; color: var(--color-primary); font-weight: 600; text-decoration: none; }

/* Pro CTA section */
.pro-cta-card { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); border-radius: 24px; padding: 60px; display: flex; gap: 40px; align-items: center; position: relative; overflow: hidden; color: #fff; }
.pro-cta-bg { position: absolute; inset: 0; background-image: radial-gradient(circle at 90% 10%, rgba(255,255,255,.1), transparent 60%); }
.pro-cta-content { flex: 1; position: relative; }
.pro-cta-icon { font-size: 3rem; margin-bottom: 16px; }
.pro-cta-content h2 { font-size: 2rem; margin: 0 0 12px; }
.pro-cta-content p { opacity: .9; line-height: 1.6; margin-bottom: 20px; }
.pro-cta-benefits { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; font-size: .9rem; opacity: .9; }
.pro-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pro-cta-visual { display: flex; flex-direction: column; gap: 12px; position: relative; flex-shrink: 0; }
.pro-cta-stat-card { background: rgba(255,255,255,.15); backdrop-filter: blur(10px); border-radius: 12px; padding: 20px 28px; text-align: center; }
.pro-cta-stat-card .stat-num { display: block; font-size: 1.8rem; font-weight: 800; }
.pro-cta-stat-card span:last-child { font-size: .8rem; opacity: .8; }

/* ═══════════════════════════════════════════════════
   DIRECTORY ARCHIVE
═══════════════════════════════════════════════════ */
.directory-hero { background: var(--color-primary); color: #fff; padding: 40px 0; }
.directory-hero-inner { max-width: 700px; }
.directory-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 8px; }
.directory-subtitle { opacity: .85; margin: 0; }
.directory-container { padding-top: 32px; padding-bottom: 60px; }
.directory-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.directory-sidebar { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 2px 16px rgba(0,0,0,.06); position: sticky; top: 90px; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sidebar-header h2 { font-size: 1.1rem; margin: 0; }
.clear-filters-btn { background: none; border: none; cursor: pointer; color: var(--color-primary); font-size: .85rem; font-weight: 600; }
.filter-group { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0; }
.filter-group:last-child { border-bottom: none; margin-bottom: 0; }
.filter-label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; margin-bottom: 10px; }
.filter-input, .filter-select { width: 100%; padding: 9px 12px; border: 2px solid #eee; border-radius: 8px; font-size: .9rem; outline: none; transition: border-color .2s; }
.filter-input:focus, .filter-select:focus { border-color: var(--color-primary); }
.location-input-wrap { position: relative; display: flex; align-items: center; }
.sidebar-geo-btn { position: absolute; right: 8px; }
.range-slider { width: 100%; accent-color: var(--color-primary); }
.range-labels { display: flex; justify-content: space-between; font-size: .75rem; color: #999; margin-top: 4px; }
.checkbox-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.checkbox-item { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 8px; border-radius: 8px; font-size: .9rem; transition: background .15s; }
.checkbox-item:hover { background: var(--color-bg-light); }
.checkbox-item input { accent-color: var(--color-primary); width: 16px; height: 16px; }
.checkbox-count { margin-left: auto; font-size: .8rem; color: #999; }
.star-filter-row { display: flex; gap: 4px; }
.star-filter-btn { background: none; border: none; cursor: pointer; font-size: 1.5rem; color: #ddd; transition: color .15s; line-height: 1; padding: 2px; }
.star-filter-btn.active, .star-filter-btn:hover { color: #F59E0B; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill { background: #f5f5f5; padding: 4px 10px; border-radius: 20px; font-size: .8rem; text-decoration: none; color: #555; transition: all .15s; }
.tag-pill:hover, .tag-pill--active { background: var(--color-primary); color: #fff; }
.filter-submit-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Results toolbar */
.results-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.results-count { font-size: .95rem; color: #666; }
.results-count strong { color: var(--color-text); }
.results-controls { display: flex; align-items: center; gap: 10px; }
.sort-select { padding: 8px 12px; border: 2px solid #eee; border-radius: 8px; font-size: .85rem; outline: none; }
.view-toggle { display: flex; gap: 4px; background: #f5f5f5; border-radius: 8px; padding: 4px; }
.view-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; color: #666; text-decoration: none; transition: all .15s; }
.view-btn.active, .view-btn:hover { background: #fff; color: var(--color-primary); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* Directory map */
.directory-map-view { display: grid; grid-template-columns: 1fr 340px; gap: 20px; height: 70vh; }
.directory-map { border-radius: 12px; overflow: hidden; height: 100%; min-height: 400px; }
.map-sidebar-results { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

/* Griglia risultati professionisti */
.professionals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* Vista lista: card orizzontale (immagine a sx, contenuto a dx) */
.professionals-grid--list {
  grid-template-columns: 1fr;
}
.professionals-grid--list .prof-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "image body"
    "image footer";
}
.professionals-grid--list .prof-card__image-wrap {
  grid-area: image;
  height: 100%;
  min-height: 200px;
}
.professionals-grid--list .prof-card__body {
  grid-area: body;
  padding-bottom: 8px;
}
.professionals-grid--list .prof-card__footer {
  grid-area: footer;
  border-top: none;
  padding-top: 0;
  justify-content: flex-start;
}
.professionals-grid--list .prof-card__footer .btn {
  flex: 0 0 auto;
  min-width: 140px;
}

/* Responsive griglia */
@media (max-width: 1100px) {
  .professionals-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 700px) {
  .professionals-grid { grid-template-columns: 1fr; }
  .professionals-grid--list .prof-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "image" "body" "footer";
  }
  .professionals-grid--list .prof-card__image-wrap { min-height: 200px; }
  .professionals-grid--list .prof-card__footer { justify-content: stretch; }
  .professionals-grid--list .prof-card__footer .btn { flex: 1; }
}

/* No results */
.no-results { grid-column: 1/-1; text-align: center; padding: 60px 20px; }
.no-results-icon { font-size: 4rem; margin-bottom: 16px; }
.no-results h3 { font-size: 1.3rem; margin: 0 0 10px; }
.no-results p { color: #666; margin: 0 0 24px; }

/* Pagination */
.petdir-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.petdir-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: .9rem; background: #fff; border: 2px solid #eee; color: var(--color-text); transition: all .2s; }
.petdir-pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.petdir-pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.petdir-pagination .prev, .petdir-pagination .next { width: auto; padding: 0 16px; }
.mobile-filter-toggle { display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: #fff; border: none; padding: 14px 28px; border-radius: 24px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 50; gap: 8px; align-items: center; }
.filter-active-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); display: inline-block; }

/* ═══════════════════════════════════════════════════
   SECTION UTILITIES
═══════════════════════════════════════════════════ */
.section-padded { padding: 80px 0; }
.bg-light { background: #fafafa; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-badge { display: inline-block; background: var(--color-bg-light); color: var(--color-primary); padding: 6px 16px; border-radius: 20px; font-size: .85rem; font-weight: 600; margin-bottom: 12px; }
.section-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 12px; }
.section-subtitle { color: #666; font-size: 1.05rem; margin: 0; }
.section-cta-center { text-align: center; margin-top: 40px; }

/* ═══════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════ */
.petdir-dashboard { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
.dashboard-header { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.dashboard-welcome { display: flex; align-items: center; gap: 16px; }
.dashboard-welcome h2 { margin: 0 0 4px; font-size: 1.4rem; }
.dashboard-role { margin: 0; color: #666; font-size: .9rem; }
.dashboard-avatar { border-radius: 50%; }
.dashboard-nav { display: flex; gap: 4px; background: #fff; border-radius: 12px; padding: 6px; margin-bottom: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.06); overflow-x: auto; }
.dashboard-nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; text-decoration: none; color: #666; font-weight: 600; font-size: .9rem; white-space: nowrap; transition: all .2s; }
.dashboard-nav-item:hover { background: var(--color-bg-light); color: var(--color-primary); }
.dashboard-nav-item.active { background: var(--color-primary); color: #fff; }
.dashboard-content { background: #fff; border-radius: 16px; padding: 32px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 32px; }
.stat-card { border-radius: 12px; padding: 20px 16px; text-align: center; background: rgba(var(--stat-color), .05); border: 2px solid var(--stat-color, #eee); }
.stat-card-icon { font-size: 1.6rem; margin-bottom: 8px; }
.stat-card-value { font-size: 1.5rem; font-weight: 800; color: var(--stat-color); }
.stat-card-label { font-size: .8rem; color: #666; margin-top: 4px; }
.listing-preview-card { display: flex; gap: 20px; background: var(--color-bg-light); border-radius: 12px; padding: 20px; }
.listing-preview-img { width: 100px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.listing-preview-img img { width: 100%; height: 100%; object-fit: cover; }
.listing-preview-actions { display: flex; gap: 10px; margin-top: 12px; }
.listing-status { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: .8rem; font-weight: 600; }
.listing-status--publish { background: #e8f5e9; color: #2e7d32; }
.listing-status--pending { background: #fff3e0; color: #e65100; }
.listing-status--draft { background: #f5f5f5; color: #616161; }
.dashboard-no-listing { text-align: center; padding: 48px 20px; }
.no-listing-icon { font-size: 4rem; margin-bottom: 16px; }
.form-section { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid #f0f0f0; }
.form-section:last-child { border-bottom: none; margin-bottom: 0; }
.form-section-title { font-size: 1.1rem; margin: 0 0 20px; color: var(--color-primary); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group--full { grid-column: 1/-1; }
.form-group--half { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; border: 2px solid #eee; border-radius: 8px; font-size: .95rem; outline: none; transition: border-color .2s; font-family: inherit; box-sizing: border-box; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-primary); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-char-count { display: block; text-align: right; font-size: .8rem; color: #999; margin-top: 4px; }
.form-actions { display: flex; gap: 12px; margin-top: 24px; }
.mt-1 { margin-top: 8px; }

/* ═══════════════════════════════════════════════════
   REVIEWS
═══════════════════════════════════════════════════ */
.rating-summary { display: flex; gap: 40px; background: var(--color-bg-light); border-radius: 14px; padding: 24px; margin-bottom: 32px; }
.rating-summary-avg { text-align: center; flex-shrink: 0; }
.rating-big-num { font-size: 3.5rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.rating-stars-big { margin: 8px 0; }
.rating-total-count { font-size: .85rem; color: #666; }
.rating-distribution { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.rating-bar-row { display: flex; align-items: center; gap: 10px; }
.rating-bar-label { width: 30px; text-align: right; font-size: .85rem; font-weight: 600; }
.rating-bar-track { flex: 1; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; }
.rating-bar-fill { height: 100%; background: #F59E0B; border-radius: 4px; transition: width .5s ease; }
.rating-bar-pct { width: 36px; font-size: .8rem; color: #666; }
.review-item { border-bottom: 1px solid #f0f0f0; padding: 20px 0; }
.review-item:first-child { padding-top: 0; }
.review-item-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.review-avatar-img { border-radius: 50%; }
.review-author { font-size: 1rem; }
.review-stars-row { display: flex; align-items: center; gap: 6px; }
.review-rating-num { font-size: .8rem; color: #666; }
.review-date { display: block; font-size: .8rem; color: #999; }
.review-item-title { font-size: .95rem; font-weight: 700; margin: 0 0 8px; }
.review-item-text { margin: 0 0 12px; color: #555; line-height: 1.6; font-size: .9rem; }
.review-pros-cons { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.review-pros, .review-cons { display: flex; align-items: flex-start; gap: 6px; font-size: .85rem; }
.review-pros { color: #2e7d32; }
.review-cons { color: #c62828; }
.review-helpful { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: #666; }
.helpful-btn { background: none; border: 1px solid #ddd; cursor: pointer; padding: 4px 10px; border-radius: 20px; font-size: .85rem; transition: all .2s; }
.helpful-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.reviews-load-more { text-align: center; padding: 20px 0 0; }
.star-picker { display: flex; align-items: center; gap: 4px; }
.star-pick-btn { background: none; border: none; cursor: pointer; font-size: 2rem; color: #ddd; transition: color .15s, transform .15s; line-height: 1; padding: 2px; }
.star-pick-btn.active { color: #F59E0B; }
.star-picker:hover .star-pick-btn { color: #F59E0B; }
.star-picker:hover .star-pick-btn:hover ~ .star-pick-btn { color: #ddd; }
.star-pick-btn:hover { transform: scale(1.15); }
.star-pick-label { font-size: .9rem; color: #666; margin-left: 8px; font-weight: 600; }
.review-auth-notice, .review-duplicate-notice { background: var(--color-bg-light); border-radius: 12px; padding: 20px; text-align: center; }
.review-auth-notice p, .review-duplicate-notice p { margin: 0; }
.review-form-container { margin-top: 32px; }
.review-form-title { margin: 0 0 24px; font-size: 1.2rem; }

/* ═══════════════════════════════════════════════════
   WISHLIST
═══════════════════════════════════════════════════ */
.wishlist-empty { text-align: center; padding: 60px 20px; }
.wishlist-empty-icon { font-size: 4rem; margin-bottom: 16px; }
.wishlist-empty h3 { font-size: 1.3rem; margin: 0 0 10px; }
.wishlist-empty p { color: #666; margin: 0 0 24px; }
.wishlist-auth-notice { text-align: center; padding: 40px 20px; }
.wishlist-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.wishlist-header h2 { margin: 0; }

/* ═══════════════════════════════════════════════════
   TAXONOMY PAGE
═══════════════════════════════════════════════════ */
.taxonomy-hero { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); padding: 40px 0; color: #fff; }
.taxonomy-hero-inner { display: flex; align-items: center; gap: 24px; }
.taxonomy-icon { font-size: 4rem; }
.taxonomy-breadcrumb { font-size: .85rem; opacity: .75; margin-bottom: 8px; }
.taxonomy-breadcrumb a { color: #fff; text-decoration: none; }
.taxonomy-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 8px; }
.taxonomy-description { margin: 0 0 10px; opacity: .85; }
.taxonomy-count { background: rgba(255,255,255,.15); padding: 5px 14px; border-radius: 20px; font-size: .85rem; }
.taxonomy-content { padding: 40px 0 60px; }

/* ═══════════════════════════════════════════════════
   COOKIE BANNER
═══════════════════════════════════════════════════ */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-text); color: #fff; z-index: 999; padding: 16px 0; animation: slideUp .3s ease; }
.cookie-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cookie-banner p { margin: 0; font-size: .9rem; }
.cookie-banner a { color: #a5d6a7; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .directory-layout { grid-template-columns: 1fr; }
    .directory-sidebar { position: relative; top: 0; display: none; }
    .directory-sidebar.open { display: block; }
    .mobile-filter-toggle { display: flex; }
    .map-preview-layout { grid-template-columns: 1fr; }
    .map-preview-map { height: 280px; }
    .pro-cta-card { flex-direction: column; }
    .hero-stats-grid { gap: 32px; flex-wrap: wrap; }
    .newsletter-inner { flex-direction: column; }
    .main-navigation { display: none; }
    .hamburger { display: flex; }
}

@media (max-width: 700px) {
    .topbar-left { display: none; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .reviews-grid { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: 1fr; }
    .hero-search-form { flex-direction: column; }
    .search-field { min-width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
    .directory-map-view { grid-template-columns: 1fr; grid-template-rows: 400px 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .form-group--half { grid-template-columns: 1fr; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form input { min-width: 100%; }
    .dashboard-nav { gap: 2px; }
    .dashboard-nav-item { padding: 8px 12px; font-size: .82rem; }
    .dashboard-nav-item .nav-icon { display: none; }
}

@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════════
   SUBMISSION FRONTEND — Form inserimento professionista
   ══════════════════════════════════════════════════════════════ */

/* Auth box (non loggato + guest=no) */
.petdir-submit-auth {
  text-align:center; padding:var(--space-2xl) var(--space-lg);
  background:var(--color-bg-card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); max-width:480px; margin:0 auto;
}
.submit-auth-icon { font-size:3rem; margin-bottom:var(--space-md); }
.submit-auth-btns { display:flex; gap:var(--space-md); justify-content:center; margin-top:var(--space-lg); flex-wrap:wrap; }

/* Wrapper principale */
.petdir-submit-wrap {
  max-width: 740px;
  margin: 0 auto;
}

/* ── Progress steps ───────────────────────────────────────── */
.submit-progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  margin-bottom: var(--space-xl);
  padding: var(--space-md) 0 var(--space-lg);
}
.submit-progress-line {
  position: absolute;
  top: 26px; left: 12%; right: 12%;
  height: 2px;
  background: var(--color-border);
  border-radius: 2px;
  z-index: 0;
}
.submit-progress-fill {
  height: 100%; width: 0%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width .4s ease;
}
.submit-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  flex: 1;
}
.step-bubble {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700;
  color: var(--color-text-muted);
  transition: all .25s ease;
}
.step-num  { display: block; }
.step-icon { display: none; font-size: 1rem; }
.step-label {
  font-size: .7rem; font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
}
/* Stato attivo */
.submit-step-indicator.active .step-bubble {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(26,107,74,.15);
}
.submit-step-indicator.active .step-label { color: var(--color-primary); }
/* Stato completato */
.submit-step-indicator.done .step-bubble {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}
.submit-step-indicator.done .step-num  { display: none; }
.submit-step-indicator.done .step-icon { display: block; }
.submit-step-indicator.done .step-label { color: var(--color-success); }

/* ── Pannello step ─────────────────────────────────────────── */
.submit-panel {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.submit-panel-header {
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(to right, rgba(26,107,74,.04), transparent);
}
.submit-panel-header h2 {
  font-size: var(--text-xl);
  color: var(--color-text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.submit-panel-header p {
  color: var(--color-text-light);
  font-size: var(--text-sm);
  margin: 0;
}

/* Sezioni interne al panel */
.submit-section {
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}
.submit-section:last-of-type { border-bottom: none; }
.submit-section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

/* ── Form grid ──────────────────────────────────────────────── */
.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-md); }
.form-group  { display: flex; flex-direction: column; gap: 5px; }
.form-group--full  { grid-column: 1 / -1; }
.form-group--third { grid-column: span 1; }
.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.required { color: var(--color-danger); margin-left: 2px; }
.form-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.form-input, .form-select, .form-textarea {
  padding: .55rem .9rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg-card);
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26,107,74,.1);
}
.form-input.input-error { border-color: var(--color-danger); }
.form-input--sm { padding: .35rem .6rem; font-size: var(--text-sm); }
.char-counter { font-size: var(--text-xs); color: var(--color-text-muted); text-align: right; }

/* ── Upload foto ─────────────────────────────────────────────── */
.file-upload-area {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
  min-height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.file-upload-area:hover, .file-upload-area.drag-over {
  border-color: var(--color-primary);
  background: rgba(26,107,74,.03);
}
.file-input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.file-placeholder {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  pointer-events: none;
  color: var(--color-text-light);
}
.upload-icon { font-size: 2rem; }
.cover-preview-img { max-height: 140px; border-radius: var(--radius-sm); object-fit: cover; }
.cover-change-btn {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,.55); color: #fff;
  padding: 3px 10px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); cursor: pointer;
}
.gallery-upload-area {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-sm);
}
.gallery-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.gallery-thumb img { width: 100%; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
.gallery-add-btn {
  height: 72px; border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; font-size: var(--text-xs);
  color: var(--color-text-muted); gap: 3px;
}

/* ── Pill picker (tag, animali, lingue) ─────────────────────── */
.pill-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-label  { cursor: pointer; }
.pill-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-label span {
  display: inline-block;
  padding: .3rem .8rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  transition: all .15s;
  cursor: pointer;
}
.pill-label input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

/* ── Mappa step 3 ────────────────────────────────────────────── */
.submit-map-preview {
  height: 260px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  overflow: hidden; background: #eee;
}
.address-search-wrap { display: flex; gap: var(--space-sm); }
.address-search-wrap .form-input { flex: 1; }

/* ── Toggle switch ───────────────────────────────────────────── */
.toggle-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-slider {
  flex-shrink: 0;
  width: 42px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  position: relative;
  transition: background .2s;
}
.toggle-slider::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.toggle-switch input:checked ~ .toggle-slider { background: var(--color-primary); }
.toggle-switch input:checked ~ .toggle-slider::after { transform: translateX(20px); }
.toggle-switch--sm .toggle-slider { width: 34px; height: 18px; }
.toggle-switch--sm .toggle-slider::after { width: 14px; height: 14px; }
.toggle-switch--sm input:checked ~ .toggle-slider::after { transform: translateX(16px); }

/* ── Orari ──────────────────────────────────────────────────── */
.hours-grid { display: flex; flex-direction: column; gap: 2px; }
.hours-row {
  display: grid;
  grid-template-columns: 90px 50px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.hours-row:hover { background: var(--color-bg); }
.hours-day { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.hours-times { display: flex; align-items: center; gap: 8px; }
.hours-times .form-input { width: 90px; }
.hours-closed-label { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }

/* ── Servizi ─────────────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.service-check {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); cursor: pointer;
  padding: 5px 8px; border-radius: var(--radius-sm);
  transition: background .15s;
}
.service-check:hover { background: var(--color-bg); }
.service-check input { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; }

/* ── Fascia prezzo ───────────────────────────────────────────── */
.price-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.price-pill { cursor: pointer; }
.price-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.price-pill span {
  display: inline-block; padding: .4rem 1.1rem;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--text-sm); transition: all .15s; cursor: pointer;
}
.price-pill input:checked + span {
  background: var(--color-secondary); border-color: var(--color-secondary);
  color: #fff; font-weight: 700;
}

/* ── Box guest ─────────────────────────────────────────────────── */
.guest-info-box {
  display: flex; gap: var(--space-sm);
  background: rgba(244,160,53,.07);
  border: 1px solid rgba(244,160,53,.3);
  border-radius: var(--radius-md); padding: var(--space-md);
}
.guest-info-icon { font-size: 1.4rem; flex-shrink: 0; }
.guest-info-box strong { display: block; margin-bottom: 3px; font-size: var(--text-sm); }
.guest-info-box p { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }

/* ── Terms ───────────────────────────────────────────────────── */
.submit-terms-box {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  font-size: var(--text-sm); color: var(--color-text-light);
  background: var(--color-bg);
  border-radius: var(--radius-md); padding: var(--space-md);
}
.submit-terms-box a { color: var(--color-primary); }

/* ── Riepilogo ───────────────────────────────────────────────── */
.submit-recap {
  background: rgba(26,107,74,.05);
  border: 1px solid rgba(26,107,74,.2);
  border-radius: var(--radius-md); padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.submit-recap h4 { margin: 0 0 var(--space-sm); font-size: var(--text-sm); }
.recap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recap-item { font-size: var(--text-sm); }

/* ── Azioni panel ────────────────────────────────────────────── */
.submit-panel-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  gap: var(--space-md);
}
.submit-disclaimer {
  text-align: center; font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-sm) var(--space-xl) var(--space-md);
}

/* ── Notifiche ───────────────────────────────────────────────── */
.petdir-notice {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md); margin-bottom: var(--space-lg);
  font-weight: 600; font-size: var(--text-sm);
}
.petdir-notice--success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.petdir-notice--error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .submit-panel-header, .submit-section { padding: var(--space-md); }
  .submit-panel-actions { flex-direction: column; padding: var(--space-md); }
  .submit-panel-actions .btn { width: 100%; text-align: center; justify-content: center; }
  .recap-grid { grid-template-columns: 1fr; }
  .step-label { display: none; }
  .hours-row { grid-template-columns: 70px 44px 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   BANNER PUBBLICITARI
   ══════════════════════════════════════════════════════════════ */

.petdir-banner {
  position:relative; text-align:center;
  margin:var(--space-lg) 0;
}
.petdir-banner--top    { margin:0 0 var(--space-lg); }
.petdir-banner--footer { margin:var(--space-lg) 0 0; }
.petdir-banner--sidebar { margin:var(--space-md) 0; }

.banner-link { display:block; line-height:0; }

.banner-img { max-width:100%; height:auto; border-radius:var(--radius-sm); }
.banner-img--mobile  { display:none; }
.banner-img--desktop { display:block; }

/* Su mobile mostra versione mobile se disponibile */
@media (max-width:640px) {
  .banner-img--desktop { display:none; }
  .banner-img--mobile  { display:block; }
  /* Se non c'è versione mobile, mostra desktop */
  .petdir-banner:not(:has(.banner-img--mobile)) .banner-img--desktop { display:block; }
}

.banner-label {
  position:absolute; top:4px; right:6px;
  font-size:9px; color:rgba(0,0,0,.4);
  background:rgba(255,255,255,.7); padding:1px 5px;
  border-radius:var(--radius-sm); pointer-events:none;
  letter-spacing:.05em; text-transform:uppercase;
}

/* Banner inline tra i risultati */
.petdir-banner--inline {
  grid-column:1/-1; /* occupa tutta la riga nella griglia */
  background:var(--color-bg); border-radius:var(--radius-md);
  padding:var(--space-sm);
}

/* Banner sidebar */
.petdir-banner--sidebar { width:100%; }

/* Popup banner */
.petdir-banner--popup {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.7); display:flex;
  align-items:center; justify-content:center;
  animation:fadeIn .3s;
}
.petdir-banner--popup .banner-link { position:relative; max-width:600px; }
.popup-close {
  position:absolute; top:-16px; right:-16px;
  width:32px; height:32px; border-radius:50%;
  background:#fff; border:none; cursor:pointer;
  font-size:1rem; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); z-index:1;
}

/* Guest info box */
.guest-info-box {
  display:flex; align-items:flex-start; gap:var(--space-md);
  background:rgba(244,160,53,.08); border:1px solid rgba(244,160,53,.3);
  border-radius:var(--radius-md); padding:var(--space-md);
}
.guest-info-icon { font-size:1.5rem; flex-shrink:0; }
.guest-info-box strong { display:block; margin-bottom:4px; }
.guest-info-box p { font-size:var(--text-sm); color:var(--color-text-light); margin:0; }

/* ══════════════════════════════════════════════════════════════
   PAGE.PHP — Pagine standard WordPress
   ══════════════════════════════════════════════════════════════ */
.page-content-wrap {
  padding: var(--space-xl) 0 var(--space-2xl);
  min-height: 60vh;
  background: var(--color-bg);
}
.page-article { max-width: 860px; margin: 0 auto; }
.page-header { margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-border); }
.page-title { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-text); margin: 0; }
.page-body { background: var(--color-bg-card); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.page-body--fullscreen { background: transparent; border-radius: 0; padding: 0; box-shadow: none; max-width: 100%; }
.page-body--fullscreen .page-content-wrap { padding-top: 0; }

/* Riduce padding quando il form fullscreen è nella pagina */
.page-content-wrap:has(.petdir-submit-wrap),
.page-content-wrap:has(.petdir-dashboard),
.page-content-wrap:has([class*="petdir-wishlist"]) {
  padding-top: var(--space-lg);
}

/* Stili contenuto pagina (wp_editor output) */
.page-body h2 { font-size: var(--text-2xl); margin: var(--space-lg) 0 var(--space-sm); color: var(--color-text); }
.page-body h3 { font-size: var(--text-xl); margin: var(--space-md) 0 var(--space-sm); }
.page-body p { margin-bottom: var(--space-md); line-height: 1.75; color: var(--color-text); }
.page-body ul, .page-body ol { margin: 0 0 var(--space-md) var(--space-lg); line-height: 1.75; }
.page-body a { color: var(--color-primary); text-decoration: underline; }
.page-body img { max-width: 100%; border-radius: var(--radius-md); }

/* ── SINGLE POST ── */
.single-post-layout { max-width: 860px; margin: 0 auto; padding: var(--space-xl) 0 var(--space-2xl); }
.single-post-header { margin-bottom: var(--space-lg); }
.single-post-meta { display: flex; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.post-category a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.single-post-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; margin: 0 0 var(--space-md); }
.single-post-byline { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--color-text-light); }
.post-author-avatar { border-radius: 50%; }
.single-post-thumbnail { margin: 0 0 var(--space-xl); border-radius: var(--radius-lg); overflow: hidden; }
.post-featured-img { width: 100%; height: auto; display: block; }
.single-post-content { font-size: 1.05rem; line-height: 1.8; color: var(--color-text); }
.single-post-content p { margin-bottom: var(--space-md); }
.single-post-content h2 { font-size: var(--text-2xl); margin: var(--space-xl) 0 var(--space-sm); }
.single-post-content h3 { font-size: var(--text-xl); margin: var(--space-lg) 0 var(--space-sm); }
.single-post-content img { max-width: 100%; border-radius: var(--radius-md); margin: var(--space-md) 0; }
.single-post-content a { color: var(--color-primary); }
.single-post-footer { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.post-tags a { display: inline-block; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 4px 12px; font-size: var(--text-sm); color: var(--color-text-light); text-decoration: none; margin: 4px; transition: all .2s; }
.post-tags a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.post-navigation { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--color-bg-card); border-radius: var(--radius-md); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: var(--space-md); }
.post-navigation a { color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: var(--text-sm); }