/* ============================================================
   Prestatutto — Modern Skin (overlay, no destructive changes)
   Applied 2026-05-13. Targets existing classes from the
   CodeIgniter views and overrides the dated style.css.
============================================================ */

:root{
  --pt-brand: #FF6B35;
  --pt-brand-strong: #E65525;
  --pt-brand-soft: #FFF2EC;
  --pt-secondary: #393cc6;            /* legacy blue/violet kept as accent */
  --pt-secondary-soft: #ECEDFB;
  --pt-ink: #0F172A;
  --pt-ink-2: #334155;
  --pt-ink-3: #64748B;
  --pt-line: #E5E7EB;
  --pt-surface: #FFFFFF;
  --pt-surface-2: #FAFAF7;
  --pt-accent: #FFD23F;
  --pt-success: #10B981;
  --pt-radius-sm: 10px;
  --pt-radius: 16px;
  --pt-radius-lg: 24px;
  --pt-shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --pt-shadow-2: 0 10px 25px -5px rgba(15,23,42,.08), 0 4px 10px -3px rgba(15,23,42,.04);
  --pt-shadow-3: 0 25px 50px -12px rgba(15,23,42,.18);
  --pt-t-fast: 160ms cubic-bezier(.4,0,.2,1);
  --pt-t: 220ms cubic-bezier(.4,0,.2,1);
}

/* ============== BASE ============== */
html, body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", "Work Sans", sans-serif !important;
  color: var(--pt-ink);
  background: var(--pt-surface-2);
  -webkit-font-smoothing: antialiased;
}
body { font-size: 16px !important; line-height: 1.55; }

h1, h2, h3, h4, h5, h6,
.banner-head h2, .banner-head h3,
.title-set h2, .title-set h5 {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.015em;
  color: var(--pt-ink);
}

a { transition: color var(--pt-t-fast); }

/* ============== NAVBAR ============== */
.main-nav .header-nav,
header.header,
header,
.header.header-fixed,
.header.header-fixed .navbar,
.navbar.header-nav {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pt-line) !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1050 !important; /* above hero stacking context */
}
/* All navbar dropdowns must overlay any hero/section content */
.navbar.header-nav .dropdown-menu,
.header-navbar-rht .dropdown-menu,
.main-nav .dropdown-menu,
.user-menu .dropdown-menu,
.role-toggle-item .dropdown-menu,
.notify-blk,
.has-arrow .dropdown-menu {
  z-index: 1060 !important;
  box-shadow: 0 20px 40px -10px rgba(15,23,42,.18), 0 4px 10px -3px rgba(15,23,42,.06) !important;
  border: 1px solid var(--pt-line) !important;
  border-radius: var(--pt-radius) !important;
  padding: 8px !important;
  margin-top: 8px !important;
}
.navbar.header-nav .dropdown-menu .dropdown-item,
.header-navbar-rht .dropdown-menu .dropdown-item,
.user-menu .dropdown-menu .dropdown-item,
.main-nav .dropdown-menu .dropdown-item {
  border-radius: var(--pt-radius-sm) !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pt-ink-2) !important;
  display: flex; align-items: center; gap: 8px;
  transition: background var(--pt-t-fast), color var(--pt-t-fast);
}
.navbar.header-nav .dropdown-menu .dropdown-item:hover,
.header-navbar-rht .dropdown-menu .dropdown-item:hover,
.user-menu .dropdown-menu .dropdown-item:hover {
  background: var(--pt-surface-2) !important;
  color: var(--pt-ink) !important;
}
.user-menu .dropdown-menu .user-header {
  padding: 12px !important;
  border-radius: var(--pt-radius-sm) !important;
  background: var(--pt-surface-2);
  margin-bottom: 6px;
  display: flex; gap: 10px; align-items: center;
}
.user-menu .dropdown-menu .user-header h6 { margin: 0 !important; font-size: 14px; font-weight: 700; color: var(--pt-ink) !important; }
.user-menu .dropdown-menu .user-header .text-muted { font-size: 12px !important; color: var(--pt-ink-3) !important; }

/* Hero section sits BELOW the navbar layer */
.hero-section { z-index: 1; }

.main-nav > li > a,
.main-nav > li > a:hover,
.main-menu-wrapper .main-nav li a {
  font-weight: 500;
  color: var(--pt-ink-2) !important;
  transition: color var(--pt-t-fast);
}
.main-nav > li > a:hover { color: var(--pt-ink) !important; }

/* Header right side icons */
.header-navbar-rht .logged-item .nav-link {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
  color: var(--pt-ink-2);
  transition: background var(--pt-t-fast), color var(--pt-t-fast);
}
.header-navbar-rht .logged-item .nav-link:hover {
  background: var(--pt-surface-2);
  color: var(--pt-ink);
}
.header-navbar-rht .badge,
.header-navbar-rht .logged-item .badge,
.header-navbar-rht .badge-pill {
  background: var(--pt-brand) !important;
  font-weight: 600;
  font-size: 10px;
  min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(255,107,53,.35);
}
a.link-head i { font-size: 19px !important; }

/* User avatar (the round photo) */
.header-navbar-rht .user-menu .user-img img {
  width: 36px !important; height: 36px !important;
  border-radius: 50%;
  border: 2px solid var(--pt-line);
  transition: border-color var(--pt-t-fast);
}
.header-navbar-rht .user-menu .nav-link:hover .user-img img { border-color: var(--pt-brand); }

/* Pill primary CTA + ghost */
.btn.btn-signin,
.btn-primary,
.login-btn,
.btn-banner,
.btn-theme {
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0;
  padding: 10px 22px !important;
  border: 1px solid transparent !important;
  transition: transform var(--pt-t-fast), box-shadow var(--pt-t-fast), background var(--pt-t-fast), color var(--pt-t-fast) !important;
}

/* Login button = ghost dark */
.btn.btn-signin {
  background: var(--pt-ink) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.16) !important;
}
.btn.btn-signin:hover {
  background: #1E293B !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15,23,42,.22) !important;
}
/* Registra (first signin-class button) = brand orange */
.btn.btn-signin.me-2,
.header-navbar-rht .nav-item:first-child .btn.btn-signin {
  background: var(--pt-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255,107,53,.28) !important;
}
.btn.btn-signin.me-2:hover,
.header-navbar-rht .nav-item:first-child .btn.btn-signin:hover {
  background: var(--pt-brand-strong) !important;
  box-shadow: 0 8px 20px rgba(255,107,53,.36) !important;
}

/* Modal role-toggle dropdown menu styling */
.role-toggle-item .dropdown-menu {
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow-2);
  padding: 8px;
  min-width: 240px;
}
.role-toggle-item .dropdown-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--pt-ink-3);
  padding: 8px 10px 6px;
}
.role-toggle-item .dropdown-item {
  border-radius: var(--pt-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pt-ink-2);
  display: flex; align-items: center;
}
.role-toggle-item .dropdown-item:hover {
  background: var(--pt-surface-2);
  color: var(--pt-ink);
}
.role-toggle-item .dropdown-item.active {
  background: var(--pt-brand-soft);
  color: var(--pt-brand-strong);
  font-weight: 600;
}

/* ============== HERO ============== */
.hero-section,
section.hero-section {
  background-image: none !important;
  background: linear-gradient(180deg, var(--pt-brand-soft) 0%, var(--pt-surface-2) 100%) !important;
  padding: 80px 0 80px !important;
  position: relative;
  overflow: hidden;
  min-height: auto !important;
}
.hero-section::before {
  content: ""; position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,63,.28), transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero-section::after {
  content: ""; position: absolute;
  bottom: -200px; left: -150px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,53,.10), transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero-section .container,
.hero-section .container > .row { position: relative; z-index: 1; }

/* hide cartoon if any */
.hero-section img.hero-illustration,
.hero-section .hero-img,
.hero-section .x-mark { display: none !important; }

.banner-head h3 {
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700 !important;
  color: var(--pt-brand-strong) !important;
  margin-bottom: 12px !important;
}
.banner-head h2 {
  font-size: clamp(40px, 4.5vw, 60px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--pt-ink) !important;
  margin-bottom: 28px !important;
  max-width: 720px;
}

/* Search — unified pill (mockup-v1 style): two input fields + Cerca button inside the same card */
#search_service {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 640px;
  margin-bottom: 22px;
  background: #fff;
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow-2);
  padding: 4px;
}
.banner-input-set {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}
.banner-input-set > .row {
  flex: 1; margin: 0;
  display: flex !important;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
}
.banner-input-set > .row > [class^="col-"] { padding: 0; min-width: 0; flex: 1 1 0%; }
.banner-btn {
  display: flex !important;
  align-items: stretch !important;
  align-self: stretch !important;
  padding-left: 0 !important;
  flex: 0 0 auto;
  width: 30%;
  max-width: 200px;
  min-width: 140px;
  margin: 0 !important;
}
.btn.search_service.btn-banner,
.banner-btn .btn-banner {
  height: auto !important;
  width: 100% !important;
  align-self: stretch !important;
  flex: 1 1 auto;
}
.banner-input-set > .row {
  flex: 1; margin: 0;
  display: flex; align-items: stretch;
  flex-wrap: nowrap; width: 100%;
}
.banner-input-set > .row > [class^="col-"] {
  padding: 0;
}
.banner-input {
  position: relative;
  padding: 4px 14px 4px 36px !important;
  height: 100%;
  min-height: 0 !important;
  margin: 0 !important;
  display: flex; align-items: center;
  cursor: text;
  transition: background var(--pt-t-fast);
  border-radius: var(--pt-radius-sm);
}
.banner-input + .banner-input,
.banner-input-set .col-lg-4 .banner-input {
  border-left: 1px solid var(--pt-line);
}

/* Inline icon on the left of each field (mockup style) — subtle */
.banner-input::before {
  font-family: 'Feather' !important;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--pt-ink-3);
  pointer-events: none;
  line-height: 1;
  opacity: 0.7;
}
.banner-input-set .col-lg-8 .banner-input::before,
.banner-input-set [class*="col-"]:first-child .banner-input::before {
  content: "\e9c1"; /* Feather search */
}
.banner-input-set .col-lg-4 .banner-input::before,
.banner-input-set [class*="col-"]:last-child .banner-input::before {
  content: "\e98c"; /* Feather map-pin */
}
.banner-input::after { content: none !important; }
.banner-input > .feather-globe,
.banner-input > i.feather-globe,
.banner-input > i.feather-map-pin,
.banner-input > i:not(.fas):not(.far) {
  display: none !important; /* hide inline original icons */
}
.banner-input .current-loc-icon { display: none !important; } /* remove right-side location button to match mockup */
.banner-input input,
.banner-input input[type="text"],
.banner-input input[type="email"],
.banner-input .form-control,
.banner-input .global {
  font-size: 14px !important;
  line-height: 1.2 !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pt-ink) !important;
}
.banner-input-set #searchResult { display: none !important; }
.banner-input-set #searchResult:not(:empty) { display: block !important; }
.banner-input input,
.banner-input .form-control,
.banner-input .global {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 15px !important;
  background: transparent !important;
  font-family: inherit;
  color: var(--pt-ink);
  width: 100%;
  font-weight: 500;
}
.banner-input input::placeholder { color: var(--pt-ink-3); font-weight: 400; }
.banner-input .current-loc-icon {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--pt-brand-soft);
  color: var(--pt-brand) !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--pt-t-fast), transform var(--pt-t-fast);
}
.banner-input .current-loc-icon:hover {
  background: var(--pt-brand);
  color: #fff !important;
  transform: translateY(-50%) scale(1.05);
}
.banner-input .current-loc-icon i { font-size: 15px; }
.btn-banner,
.btn.search_service.btn-banner {
  background: var(--pt-brand) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 0 18px !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  align-self: stretch !important;
  box-shadow: 0 2px 8px rgba(255,107,53,.28);
  border: 0 !important;
  transition: transform var(--pt-t-fast), background var(--pt-t-fast), box-shadow var(--pt-t-fast);
  display: flex !important;
  align-items: center; justify-content: center; gap: 6px;
  letter-spacing: 0;
  margin: 0 !important;
}
.btn-banner::before,
.btn.search_service.btn-banner::before { content: none; }
.btn-banner:hover,
.btn.search_service.btn-banner:hover {
  background: var(--pt-brand-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255,107,53,.36);
}

/* Nominatim (OSM) suggestions dropdown — fallback for Google Maps */
.nominatim-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: -1px; right: -1px;
  background: #fff;
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  box-shadow: 0 16px 32px -8px rgba(15,23,42,.18);
  z-index: 1100;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}
.nominatim-suggestions .ns-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--pt-radius-sm);
  cursor: pointer;
  transition: background var(--pt-t-fast);
}
.nominatim-suggestions .ns-item:hover,
.nominatim-suggestions .ns-item:focus {
  background: var(--pt-surface-2);
}
.nominatim-suggestions .ns-item .feather-map-pin {
  color: var(--pt-brand);
  font-size: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
}
.nominatim-suggestions .ns-text { min-width: 0; flex: 1; }
.nominatim-suggestions .ns-primary {
  font-weight: 600;
  font-size: 14px;
  color: var(--pt-ink);
  line-height: 1.3;
}
.nominatim-suggestions .ns-secondary {
  font-size: 12px;
  color: var(--pt-ink-3);
  line-height: 1.3;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Popular chips */
.banner-list { margin-top: 4px; }
.banner-list .search-cat {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.banner-list .search-cat i.fa-circle {
  color: var(--pt-accent); font-size: 8px;
}
.banner-list .search-cat > span {
  color: var(--pt-ink-3);
  font-size: 14px; margin-right: 4px;
}
.banner-list .search-cat li {
  list-style: none;
}
.banner-list .search-cat li a {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--pt-line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--pt-ink-2);
  transition: all var(--pt-t-fast);
}
.banner-list .search-cat li a:hover {
  border-color: var(--pt-brand);
  color: var(--pt-brand);
  transform: translateY(-1px);
}

/* ============== HERO RIGHT-SIDE STACK ============== */
.hero-stack {
  position: relative;
  height: 460px;
  margin-top: 10px;
}
.hero-card {
  position: absolute;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--pt-shadow-3);
  background-size: cover;
  background-position: center;
  border: 4px solid #fff;
  transition: transform var(--pt-t), box-shadow var(--pt-t);
  text-decoration: none;
}
.hero-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}
.hero-card__overlay {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  color: #fff;
}
.hero-card__title {
  font-size: 14px; font-weight: 700; margin: 0 0 2px;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.hero-card__meta {
  font-size: 12px; font-weight: 500; margin: 0;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.hero-card:hover { transform: translateY(-6px) rotate(0deg) !important; box-shadow: 0 30px 60px -15px rgba(15,23,42,.25); z-index: 5; }
.hero-card--1 { width: 240px; height: 300px; top: 0; left: 30px; transform: rotate(-6deg); background-color: var(--pt-brand-soft); z-index: 2; }
.hero-card--2 { width: 300px; height: 220px; top: 60px; right: -10px; transform: rotate(4deg); background-color: var(--pt-accent); z-index: 3; }
.hero-card--3 { width: 220px; height: 260px; top: 230px; left: 90px; transform: rotate(-2deg); background-color: #C7D2FE; z-index: 1; }
.hero-badge {
  position: absolute;
  top: 20px; right: 30px;
  z-index: 6;
  background: var(--pt-ink);
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--pt-shadow-3);
}
.hero-badge i { color: var(--pt-accent); }

@media (max-width: 991px) {
  .hero-stack { display: none; }
}

/* ============== SECTION TITLES ============== */
.title-set {
  text-align: center;
  margin-bottom: 32px;
}
.title-set h2 {
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--pt-ink) !important;
  margin-bottom: 12px !important;
}
.title-set h5 {
  color: var(--pt-ink-3) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  max-width: 600px;
  margin: 0 auto !important;
}

/* ============== CATEGORY CARDS (2-row grid, no carousel) ============== */
section.category-section { padding: 64px 0; }
.category-section .slider-path,
.category-section .container > .slider-path { padding: 0 8px; }

#category-slider,
.category-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 16px;
  width: 100% !important;
  transform: none !important;
}
@media (max-width: 1199px) { #category-slider, .category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (max-width: 991px)  { #category-slider, .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 767px)  { #category-slider, .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 480px)  { #category-slider, .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; } }

/* Hide owl-carousel chrome when present */
#category-slider .owl-stage-outer,
#category-slider .owl-stage { display: contents !important; }
#category-slider .owl-stage-outer + .owl-dots,
.category-section .owl-dots,
.category-section .owl-nav { display: none !important; }
#category-slider > .owl-item,
#category-slider .owl-item {
  width: auto !important;
  margin: 0 !important;
}

.category-card,
.card.category-card,
a.pt-category-link.category-card {
  background: #fff !important;
  border: 1px solid var(--pt-line) !important;
  border-radius: var(--pt-radius) !important;
  box-shadow: none !important;
  text-align: center;
  padding: 24px 14px 22px !important;
  transition: transform var(--pt-t), box-shadow var(--pt-t), border-color var(--pt-t), background var(--pt-t) !important;
  cursor: pointer;
  height: 100%;
  margin: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
  position: relative;
  overflow: hidden;
}
.category-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,107,53,0) 0%, rgba(255,107,53,.04) 100%);
  opacity: 0;
  transition: opacity var(--pt-t);
  pointer-events: none;
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(15,23,42,.10), 0 4px 10px rgba(255,107,53,.08) !important;
  border-color: rgba(255,107,53,.30) !important;
}
.category-card:hover::before { opacity: 1; }
.category-card .card-body { padding: 0 !important; position: relative; z-index: 1; }
.category-card .cate-icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: var(--pt-brand-soft);
  display: grid; place-items: center;
  transition: transform var(--pt-t), background var(--pt-t), box-shadow var(--pt-t);
  border: 1px solid rgba(255,107,53,.10);
}
.category-card:hover .cate-icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(255,107,53,.32);
}
.category-card:hover .cate-icon img { /* filter removed: keep original logo colors */ }
.category-card .cate-icon img {
  width: 36px !important; height: 36px !important; object-fit: contain;
  transition: filter var(--pt-t);
}
.category-card .pt-category-name,
.category-card .cate-content a span,
.category-card .cate-content span {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--pt-ink);
  letter-spacing: -.005em;
  transition: color var(--pt-t);
}
.category-card:hover .pt-category-name {
  color: var(--pt-brand-strong);
}
.category-card .pt-category-count,
.category-card .cate-content p {
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  color: var(--pt-ink-3) !important;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.category-card .pt-category-count .pt-category-num {
  font-weight: 700;
  color: var(--pt-brand);
  font-size: 12.5px;
}
.category-card .pt-category-count small {
  font-size: 12px;
  color: var(--pt-ink-3);
}
/* Arrow indicator — fades in on hover, slides in from left */
.category-card .pt-category-arrow {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pt-brand-soft);
  color: var(--pt-brand);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--pt-t), transform var(--pt-t), background var(--pt-t), color var(--pt-t);
  pointer-events: none;
}
.category-card:hover .pt-category-arrow {
  opacity: 1;
  transform: translateX(0);
  background: var(--pt-brand);
  color: #fff;
}

/* ============== PRODUCT/SERVICE CARD ============== */
section.service-section,
section.feature-shop-section,
section.popular-bg {
  padding: 64px 0 !important;
  background: var(--pt-surface-2) !important;
}
section.popular-bg { background: #fff !important; }

.feature-shop {
  background: #fff !important;
  border: 1px solid var(--pt-line) !important;
  border-radius: var(--pt-radius) !important;
  overflow: hidden;
  transition: transform var(--pt-t), box-shadow var(--pt-t) !important;
  margin: 6px 0;
  display: flex; flex-direction: column;
}
.feature-shop:hover {
  transform: translateY(-6px);
  box-shadow: var(--pt-shadow-3) !important;
}

/* Image area (4:3 cover) */
.feature-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pt-brand-soft) 0%, #FFFAF5 100%);
}
.feature-img > a {
  display: block; width: 100%; height: 100%;
}
.feature-img > a > img.categorie-img,
.feature-img > a > img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform var(--pt-t) !important;
  border-radius: 0 !important;
}
.feature-shop:hover .feature-img > a > img { transform: scale(1.04); }

/* Offer tag (top-left) */
.feature-img .offer-tags {
  position: absolute; top: 12px; left: 12px; right: auto; z-index: 2;
}
.feature-img .offer-tags .bg-red,
.feature-img .offer-tags span {
  background: var(--pt-brand) !important;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(255,107,53,.3);
}

/* feature-bottom = owner avatar + category chip overlay on image */
.feature-shop .feature-img .feature-bottom {
  position: absolute; bottom: 12px; left: 12px; right: 12px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.feature-shop .feature-img .feature-bottom > a {
  display: inline-block;
  flex: 0 0 auto;
}
.feature-shop .feature-img .feature-bottom > a > img.rounded-circle {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.15);
  object-fit: cover;
}
.feature-shop .feature-img .feature-bottom > p {
  margin: 0 !important;
}
.feature-shop .feature-img .feature-bottom > p a {
  display: inline-block;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pt-ink) !important;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(15,23,42,.08);
}
.feature-shop .feature-img .feature-bottom > p a:hover {
  background: #fff;
}

/* featute-info (typo in original) = text content below image */
.feature-shop .featute-info {
  padding: 18px 18px 20px !important;
  display: flex; flex-direction: column; gap: 8px;
}
.feature-shop .featute-info h4 {
  margin: 0 !important;
}
.feature-shop .featute-info h4 a {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--pt-ink) !important;
  line-height: 1.3;
  text-decoration: none;
}
.feature-shop .featute-info h4 a:hover { color: var(--pt-brand) !important; }
.feature-shop .featute-info .star-rating {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px;
}
.feature-shop .featute-info .star-rating .fa-star { color: var(--pt-line); }
.feature-shop .featute-info .star-rating .fa-star.filled { color: var(--pt-accent) !important; }
.feature-shop .featute-info .star-rating .text-muted { color: var(--pt-ink-3) !important; font-size: 12px; }
.feature-shop .featute-info .product-by {
  font-size: 13px !important; color: var(--pt-ink-3) !important;
}
.feature-shop .featute-info .product-by a {
  color: var(--pt-ink-2) !important; font-weight: 600; text-decoration: none;
}
.feature-shop .featute-info .product-by a:hover { color: var(--pt-brand) !important; }
.feature-shop .featute-info h6 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--pt-ink) !important;
  margin: 4px 0 !important;
  letter-spacing: -0.01em;
}
.feature-shop .featute-info .service-location {
  font-size: 13px;
  color: var(--pt-ink-3) !important;
  display: inline-flex; align-items: center; gap: 6px;
}
.feature-shop .featute-info .service-location .fa-map-marker-alt {
  color: var(--pt-brand);
}

/* legacy fallback for cards that just use .feature-bottom + flat text */
.feature-shop > .feature-bottom {
  padding: 16px !important;
}
.feature-shop > .feature-bottom .product-by,
.feature-shop > .feature-bottom h5 a {
  font-weight: 700;
  font-size: 16px;
  color: var(--pt-ink) !important;
  line-height: 1.3;
}
.feature-shop .service-location,
.feature-shop .feature-bottom p {
  color: var(--pt-ink-3) !important;
  font-size: 13px;
}
.feature-shop .service-location .fa-map-marker-alt { color: var(--pt-brand); }
.feature-shop .price-tag,
.feature-shop .product-price,
.feature-shop h6.price {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--pt-ink) !important;
}
.feature-shop .rating-star,
.feature-shop .star-rating .fa-star {
  color: var(--pt-accent) !important;
}

/* ============== BUTTONS extras ============== */
.btn-viewall, .btnviewall a, .btn.btn-viewall {
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--pt-ink) !important;
  border: 1px solid var(--pt-line) !important;
  transition: all var(--pt-t-fast) !important;
}
.btn-viewall:hover { background: var(--pt-surface-2) !important; border-color: var(--pt-ink) !important; }

/* ============== FOOTER (mockup-v1 style) ============== */
.footer {
  background: var(--pt-ink) !important;
  color: rgba(255,255,255,.7) !important;
}
.footer-top {
  padding: 72px 0 32px !important;
  border-bottom: 0 !important;
}
/* Subtle divider line ABOVE the footer-bottom row */
.footer .footer-bottom {
  margin-top: 8px;
}
.footer .footer-bottom > .container {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-top .row { gap: 0; }
.footer-bottom {
  padding: 24px 0 !important;
  background: transparent !important;
}

/* Hide the original "footer-line" divider underline used by widget titles */
.footer-line, .footer .footer-line { display: none !important; }

/* Brand column */
.footer-brand-col { padding-right: 32px; }
.footer-brand-link { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-logo-img {
  max-height: 38px;
  max-width: 180px;
  /* filter removed: keep original logo colors */
  opacity: .95;
}
.footer-tagline {
  color: rgba(255,255,255,.55) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 0 18px !important;
  max-width: 280px;
}
.footer-social { display: flex; gap: 8px; }
.footer-social-link {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7) !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--pt-t-fast);
  text-decoration: none !important;
}
.footer-social-link:hover {
  background: var(--pt-brand);
  color: #fff !important;
  transform: translateY(-2px);
}
.footer-social-link i { font-size: 14px; }

/* Widget titles */
.footer h2, .footer h4, .footer-title, .footer h5 {
  color: rgba(255,255,255,.95) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Widget link lists */
.footer .footer-widget ul,
.footer-widget .contactdet ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer .footer-widget li,
.footer-widget .contactdet li { margin: 0; padding: 0; list-style: none; }
.footer a,
.footer-widget li a,
.footer .footer-menu li a {
  color: rgba(255,255,255,.65) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  transition: color var(--pt-t-fast);
  text-decoration: none !important;
}
.footer a:hover,
.footer-widget li a:hover { color: var(--pt-brand) !important; }
/* Hide the leading arrow icons in quick links */
.footer-widget li a > i.fa-angle-double-right,
.footer-widget li a > i.fas.fa-angle-double-right { display: none !important; }

/* Contact widget specifics */
.footer .footer-text { color: rgba(255,255,255,.65); }
.footer .footer-text span,
.footer .footer-text p {
  color: rgba(255,255,255,.65) !important;
  font-size: 14px !important;
  line-height: 1.6;
  display: block;
  margin-bottom: 6px;
}
.footer .footer-text i {
  color: var(--pt-brand);
  margin-right: 8px;
  width: 16px;
}
.footer .footer-text a { color: rgba(255,255,255,.85) !important; }

/* Bottom row */
.footer .footer-bottom .copyright,
.footer .copyright { border: 0 !important; padding: 0 !important; }
.footer .copyright .row { align-items: center; }
.footer .footer-bottom { padding: 0 0 24px !important; }
.footer .copyright,
.footer .copyright-text,
.footer-bottom p,
.footer-bottom .copyright p {
  color: rgba(255,255,255,.45) !important;
  font-size: 13px !important;
  margin: 0 !important;
}
.footer-bottom .copyright-menu {
  display: flex; justify-content: flex-end;
}
.footer-bottom .copyright-menu .policy-menu {
  display: flex; gap: 24px; list-style: none; margin: 0; padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.footer-bottom .copyright-menu li { padding: 0 !important; margin: 0 !important; }
.footer-bottom .copyright-menu li a {
  color: rgba(255,255,255,.65) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
.footer-bottom .copyright-menu li a:hover { color: var(--pt-brand) !important; }

@media (max-width: 767px) {
  .footer-top { padding: 48px 0 24px !important; }
  .footer-brand-col { padding-right: 0; margin-bottom: 16px; }
  .footer-bottom .copyright-menu { justify-content: flex-start; margin-top: 10px; }
}

/* ============== MODALS (signup/login) ============== */
.modal-content {
  border: 0 !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow-3) !important;
  overflow: hidden;
}
.modal .popheader h3,
.modal-body h3 {
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  color: var(--pt-ink) !important;
}
.modal .popheader h6 {
  color: var(--pt-ink-3) !important;
  font-weight: 400 !important;
}
.modal .form-group label { font-weight: 500; color: var(--pt-ink-2); font-size: 13px; }
.modal .form-control {
  border: 1px solid var(--pt-line) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  transition: border-color var(--pt-t-fast), box-shadow var(--pt-t-fast);
}
.modal .form-control:focus {
  border-color: var(--pt-brand) !important;
  box-shadow: 0 0 0 4px rgba(255,107,53,.12) !important;
  outline: none !important;
}
.modal .login-btn,
.modal .btn-login,
.modal .btn-primary {
  width: 100%;
  background: var(--pt-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  box-shadow: 0 4px 12px rgba(255,107,53,.28);
  transition: all var(--pt-t-fast);
}
.modal .login-btn:hover,
.modal .btn-login:hover,
.modal .btn-primary:hover {
  background: var(--pt-brand-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255,107,53,.36);
}
.modal .close, .modal .btn-close {
  background: var(--pt-brand) !important;
  color: #fff !important;
  width: 36px; height: 36px;
  border-radius: 50% !important;
  font-size: 18px !important;
  display: grid; place-items: center;
  opacity: 1 !important;
  position: absolute; top: 16px; right: 16px;
  border: 0 !important;
  cursor: pointer;
  z-index: 5;
}
.modal .close:hover, .modal .btn-close:hover { background: var(--pt-brand-strong) !important; }

/* ============== UTILITY OVERRIDES ============== */
::selection { background: var(--pt-brand); color: #fff; }

/* fix any leftover hard navy/blue heading color in hero etc. */
.banner-head h2, .banner-head h3 { color: inherit; }

/* Cards inside dashboards keep a soft modern look */
.panel-style,
.card,
.dash-widget {
  border: 1px solid var(--pt-line) !important;
  border-radius: var(--pt-radius) !important;
  box-shadow: var(--pt-shadow-1) !important;
}

/* Responsive guardrails */
@media (max-width: 991px) {
  .hero-section { padding: 48px 0 56px !important; }
  .banner-input-set { padding: 8px; max-width: 100%; }
  .banner-input-set > .row { flex-wrap: wrap; }
  .banner-input + .banner-input,
  .banner-input-set .col-lg-4 .banner-input { border-left: 0; border-top: 1px solid var(--pt-line); }
  .banner-btn { width: 100%; padding-left: 0; margin-top: 8px; }
  .btn.search_service.btn-banner { width: 100%; padding: 14px !important; }
}

/* ============== GOOGLE MAPS ERROR POPUP SUPPRESSION ============== */
/* When the Google Maps API key is invalid/unauthorized, Google injects a popup
   warning "Questa pagina non carica correttamente Google Maps". Our hybrid setup
   falls back to Nominatim, so this popup is noise — hide every variant of it
   UNCONDITIONALLY. These elements only ever appear for errors. */
.gm-err-container,
.gm-err-content,
.gm-err-title,
.gm-err-message,
.gm-err-autocomplete,
.dismissButton,
.gm-style-cc,
[class*="gm-err"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}
/* Hide pac-container whenever Nominatim is active OR Google has failed. */
body.pt-nominatim-active .pac-container,
body.pt-google-failed .pac-container { display: none !important; }
/* Modern browsers: hide any pac-container that contains a Google error block. */
.pac-container:has(.dismissButton),
.pac-container:has([class*="gm-err"]) { display: none !important; }

/* ============== CONTACT PAGE (modern) ============== */
/* Hero */
.pt-contact-hero {
  background: linear-gradient(135deg, #FFF5EE 0%, #FFFFFF 50%, #FFFAF5 100%);
  border-bottom: 1px solid var(--pt-line);
  padding: 56px 0 64px;
  text-align: center;
}
.pt-contact-breadcrumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--pt-ink-3); margin-bottom: 18px;
}
.pt-contact-breadcrumb a {
  color: var(--pt-ink-2); text-decoration: none; font-weight: 500;
  padding: 4px 10px; border-radius: 999px; background: rgba(255,107,53,.08);
  transition: all .15s ease;
}
.pt-contact-breadcrumb a:hover { background: rgba(255,107,53,.16); color: var(--pt-brand); }
.pt-contact-breadcrumb .sep { color: #9CA3AF; }
.pt-contact-breadcrumb [aria-current] { color: var(--pt-brand); font-weight: 600; }
.pt-contact-hero-title {
  font-size: 44px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 12px; color: var(--pt-ink);
}
.pt-contact-hero-sub {
  font-size: 17px; color: var(--pt-ink-2); max-width: 620px; margin: 0 auto; line-height: 1.5;
}

/* Hide the original breadcrumb-bar on this page (we use our hero instead) */
body.pt-contact-page .breadcrumb-bar,
.content:has(+ .pt-contact-form-section) > .container > .row:has(.title-set),
.pt-contact-hero ~ .breadcrumb-bar { display: none !important; }

/* 3 contact cards row */
.pt-contact-info {
  padding: 0;
  margin-top: -36px;
  position: relative;
  z-index: 2;
}
.pt-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pt-contact-card {
  display: flex; align-items: center; gap: 16px;
  background: #fff;
  border: 1px solid var(--pt-line);
  border-radius: 16px;
  padding: 22px 22px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pt-contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15,23,42,.09);
  border-color: rgba(255,107,53,.3);
}
.pt-contact-icon {
  width: 56px; height: 56px; min-width: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 14px rgba(255,107,53,.32);
}
.pt-contact-card-body { flex: 1; min-width: 0; }
.pt-contact-card-label {
  display: block;
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--pt-ink-3); font-weight: 600; margin-bottom: 4px;
}
.pt-contact-card-body p {
  margin: 0; font-size: 15px; color: var(--pt-ink); font-weight: 500; line-height: 1.45;
  word-break: break-word;
}
.pt-contact-card-body a { color: inherit; text-decoration: none; }
.pt-contact-card-body a:hover { color: var(--pt-brand); }

/* Form section */
.pt-contact-form-section {
  padding: 72px 0 96px;
  background: #FAFAFB;
}
.pt-contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}
.pt-contact-form-left h2 {
  font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  color: var(--pt-ink); margin: 0 0 14px;
}
.pt-contact-form-desc {
  font-size: 15.5px; color: var(--pt-ink-2); line-height: 1.6; margin: 0 0 28px;
}
.pt-contact-perks {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.pt-contact-perks li {
  display: flex; gap: 14px; align-items: flex-start;
}
.pt-perk-ico {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 10px;
  background: rgba(255,107,53,.10);
  color: var(--pt-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.pt-contact-perks li strong {
  display: block; font-size: 15px; color: var(--pt-ink); font-weight: 600; margin-bottom: 1px;
}
.pt-contact-perks li small {
  display: block; font-size: 13px; color: var(--pt-ink-3); line-height: 1.4;
}

/* Form card */
.pt-contact-form-card {
  background: #fff;
  border: 1px solid var(--pt-line);
  border-radius: 20px;
  padding: 36px 36px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.pt-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 4px;
}
.pt-form-group { margin-bottom: 20px; }
.pt-form-group label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--pt-ink-2); margin-bottom: 8px;
  letter-spacing: .01em;
}
.pt-form-control {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--pt-line);
  border-radius: 10px;
  font-size: 15px; color: var(--pt-ink);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
.pt-form-control:focus {
  outline: none;
  border-color: var(--pt-brand);
  box-shadow: 0 0 0 4px rgba(255,107,53,.12);
}
.pt-form-control::placeholder { color: #9CA3AF; }
.pt-form-textarea { resize: vertical; min-height: 140px; line-height: 1.5; }

.pt-form-status { min-height: 22px; margin: 4px 0; font-size: 13.5px; }
.pt-form-status:empty { display: none; }

.pt-form-submit { margin-top: 6px; }
.pt-btn-contact-submit {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong));
  color: #fff !important;
  border: 0;
  padding: 14px 28px;
  font-size: 15px; font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(255,107,53,.32);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.pt-btn-contact-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(255,107,53,.40);
  filter: brightness(1.02);
}
.pt-btn-contact-submit:active { transform: translateY(0); }

/* Hide the old breadcrumb-bar & title-set on contact page (we replaced them) */
.pt-contact-hero ~ .content > .container > .row .title-set,
.pt-contact-hero ~ .content > .container > .row:has(.contact-set-path) { display: none !important; }
/* If the contact page is wrapped in the old .content/.breadcrumb-bar, hide just the duplicates */

/* Responsive */
@media (max-width: 991px) {
  .pt-contact-cards { grid-template-columns: 1fr; gap: 12px; }
  .pt-contact-form-grid { grid-template-columns: 1fr; gap: 36px; }
  .pt-contact-hero-title { font-size: 32px; }
  .pt-contact-form-card { padding: 24px 22px; }
  .pt-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .pt-contact-hero { padding: 36px 0 48px; }
  .pt-contact-hero-title { font-size: 26px; }
  .pt-contact-hero-sub { font-size: 15px; }
}

/* ============== ABOUT PAGE (modern) ============== */
.pt-about-hero {
  background: linear-gradient(135deg, #FFF5EE 0%, #FFFFFF 50%, #FFFAF5 100%);
  border-bottom: 1px solid var(--pt-line);
  padding: 72px 0 80px;
  text-align: center;
}
.pt-about-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pt-brand);
  background: rgba(255,107,53,.10);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 22px;
}
.pt-about-hero-title {
  font-size: 52px; font-weight: 800; letter-spacing: -.025em;
  color: var(--pt-ink); margin: 0 0 16px; line-height: 1.08;
}
.pt-about-hero-sub {
  font-size: 18px; color: var(--pt-ink-2);
  max-width: 680px; margin: 0 auto; line-height: 1.55;
}

.pt-about-stats {
  margin-top: 44px;
  display: inline-flex; gap: 48px; flex-wrap: wrap; justify-content: center;
  padding: 22px 36px; border-radius: 18px;
  background: #fff; border: 1px solid var(--pt-line);
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
}
.pt-about-stat { display: flex; flex-direction: column; align-items: center; min-width: 100px; }
.pt-about-stat-num {
  font-size: 28px; font-weight: 800; color: var(--pt-brand); letter-spacing: -.02em; line-height: 1;
}
.pt-about-stat-label {
  font-size: 12px; color: var(--pt-ink-3); text-transform: uppercase;
  letter-spacing: .08em; font-weight: 600; margin-top: 6px;
}

/* Story section */
.pt-about-story { padding: 96px 0; background: #fff; }
.pt-about-story-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center;
}
.pt-about-story-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  background: linear-gradient(135deg, #FFF2EC 0%, #FFE4D4 100%);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pt-about-blob {
  position: absolute; border-radius: 50%;
  filter: blur(40px); opacity: .55;
}
.pt-about-blob-1 {
  width: 220px; height: 220px;
  background: var(--pt-brand); top: -40px; left: -40px;
}
.pt-about-blob-2 {
  width: 280px; height: 280px;
  background: var(--pt-accent); bottom: -60px; right: -60px;
  opacity: .35;
}
.pt-about-story-illustration {
  position: relative; z-index: 2;
  width: 140px; height: 140px; border-radius: 36px;
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong));
  display: flex; align-items: center; justify-content: center;
  font-size: 60px; color: #fff;
  box-shadow: 0 20px 50px rgba(255,107,53,.40);
}
.pt-about-story-title {
  font-size: 36px; font-weight: 800; letter-spacing: -.02em;
  color: var(--pt-ink); margin: 0 0 24px; line-height: 1.15;
}
.pt-about-content p {
  font-size: 16px; line-height: 1.75;
  color: var(--pt-ink-2); margin: 0 0 16px;
}
.pt-about-content p:last-child { margin-bottom: 0; }
.pt-about-content strong { color: var(--pt-ink); font-weight: 700; }
.pt-about-content em {
  display: inline-block; font-style: normal;
  margin-top: 8px; font-weight: 600; color: var(--pt-brand); font-size: 17px;
}

/* Values section */
.pt-about-values { padding: 96px 0; background: #FAFAFB; }
.pt-about-values-head { text-align: center; margin-bottom: 48px; }
.pt-about-values-head h2 {
  font-size: 34px; font-weight: 800; letter-spacing: -.02em;
  color: var(--pt-ink); margin: 0 0 12px;
}
.pt-about-values-head p {
  font-size: 16px; color: var(--pt-ink-2); margin: 0;
}
.pt-about-values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.pt-about-value-card {
  background: #fff; border: 1px solid var(--pt-line);
  border-radius: 20px; padding: 36px 28px;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pt-about-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15,23,42,.08);
  border-color: rgba(255,107,53,.3);
}
.pt-about-value-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 8px 20px rgba(255,107,53,.30);
  margin-bottom: 22px;
}
.pt-about-value-card h3 {
  font-size: 20px; font-weight: 700; color: var(--pt-ink);
  margin: 0 0 10px; letter-spacing: -.01em;
}
.pt-about-value-card p {
  font-size: 14.5px; color: var(--pt-ink-2);
  line-height: 1.6; margin: 0;
}

/* CTA section */
.pt-about-cta { padding: 0 0 96px; background: #FAFAFB; }
.pt-about-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong));
  border-radius: 28px;
  padding: 48px 56px;
  box-shadow: 0 20px 50px rgba(255,107,53,.30);
  color: #fff;
}
.pt-about-cta-text h2 {
  font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  color: #fff; margin: 0 0 8px;
}
.pt-about-cta-text p {
  font-size: 16px; color: rgba(255,255,255,.92); margin: 0; line-height: 1.5;
}
.pt-about-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pt-btn-cta-primary,
.pt-btn-cta-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 12px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  border: 0; cursor: pointer;
}
.pt-btn-cta-primary {
  background: #fff;
  color: var(--pt-brand) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.18);
}
.pt-btn-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15,23,42,.24);
  color: var(--pt-brand-strong) !important;
}
.pt-btn-cta-ghost {
  background: rgba(255,255,255,.12);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.32) !important;
}
.pt-btn-cta-ghost:hover {
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.50) !important;
  color: #fff !important;
}

/* Hide the original .breadcrumb-bar that the about view USED to include */
.pt-about-hero ~ .breadcrumb-bar { display: none !important; }

/* Responsive */
@media (max-width: 991px) {
  .pt-about-hero-title { font-size: 38px; }
  .pt-about-story-grid { grid-template-columns: 1fr; gap: 40px; }
  .pt-about-story-visual { max-width: 360px; margin: 0 auto; }
  .pt-about-story-title { font-size: 28px; }
  .pt-about-values-grid { grid-template-columns: 1fr; gap: 16px; }
  .pt-about-cta-inner { padding: 36px 28px; text-align: center; justify-content: center; }
  .pt-about-stats { gap: 28px; padding: 18px 24px; }
}
@media (max-width: 575px) {
  .pt-about-hero { padding: 48px 0 56px; }
  .pt-about-hero-title { font-size: 30px; }
  .pt-about-hero-sub { font-size: 15px; }
  .pt-about-story { padding: 56px 0; }
  .pt-about-values { padding: 56px 0; }
  .pt-about-stat-num { font-size: 22px; }
}

/* ============== USER CHAT PAGE (modern) ============== */
/* Hide the old generic breadcrumb-bar above the chat */
.pt-chat-header ~ .breadcrumb-bar,
.pt-chat-page ~ .breadcrumb-bar,
body:has(.pt-chat-page) .breadcrumb-bar { display: none !important; }

/* Page header */
.pt-chat-header {
  background: linear-gradient(135deg, #FFF5EE 0%, #FFFFFF 60%, #FFFAF5 100%);
  border-bottom: 1px solid var(--pt-line);
  padding: 32px 0 28px;
}
.pt-chat-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.pt-chat-header-left { display: flex; align-items: center; gap: 16px; }
.pt-chat-icon-pill {
  width: 56px; height: 56px; min-width: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong));
  color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(255,107,53,.28);
}
.pt-chat-page-title {
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  color: var(--pt-ink); margin: 0;
}
.pt-chat-page-sub {
  font-size: 14px; color: var(--pt-ink-3); margin: 2px 0 0;
}

/* Layout shell */
.pt-chat-page.chat-history-blk {
  padding: 28px 0 56px !important;
  background: transparent !important;
}
.pt-chat-shell {
  background: #fff;
  border: 1px solid var(--pt-line);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(15,23,42,.06);
  overflow: hidden;
  height: calc(100vh - 260px);
  min-height: 580px;
}
.pt-chat-shell > .row { height: 100%; }
.pt-chat-shell > .row > .chat {
  height: 100%;
  padding: 0 !important;
}

/* Contacts column */
.pt-contacts-card.card {
  border: 0 !important;
  border-right: 1px solid var(--pt-line) !important;
  border-radius: 0 !important;
  background: #FAFAFB !important;
  height: 100%;
  display: flex; flex-direction: column;
  box-shadow: none !important;
}
.pt-chat-search.card-header {
  background: transparent !important;
  border: 0 !important;
  padding: 18px 18px 12px !important;
}
.pt-chat-search .input-group {
  background: #fff;
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  padding: 6px 10px;
  align-items: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pt-chat-search .input-group:focus-within {
  border-color: var(--pt-brand);
  box-shadow: 0 0 0 4px rgba(255,107,53,.10);
}
.pt-chat-search .search_btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--pt-ink-3);
  padding: 4px 8px !important;
  font-size: 14px;
}
.pt-chat-search .form-control {
  border: 0 !important;
  background: transparent !important;
  font-size: 14px;
  padding: 6px 4px !important;
  height: auto !important;
  box-shadow: none !important;
}
.pt-chat-search .form-control::placeholder { color: var(--pt-ink-3); }

.pt-contacts-body.card-body {
  padding: 6px 10px 12px !important;
  overflow-y: auto;
  flex: 1;
}
.pt-contacts-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.pt-contact-item { background: transparent !important; padding: 0 !important; }
.pt-contact-item a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background .12s ease, transform .12s ease;
}
.pt-contact-item a:hover { background: rgba(255,107,53,.08); }
.pt-contact-item.active1 a,
.pt-contact-item.active1 { background: rgba(255,107,53,.14) !important; }
/* Contact row alignment — minimal fix.
   chat.js dynamically re-renders the contact list using the legacy class
   names (.d-flex, .img_cont, .user_info, .user-name). The <a> inside each <li>
   defaults to `display: inline` in Bootstrap reboot, which collapses the inner
   .d-flex div — causing avatar and name to render on different vertical lines.
   Force the link to be block-level so .d-flex can span full row width. */
.left_message > li > a,
.left_message .history_append_fun > a {
  display: block !important;
  text-decoration: none;
  color: inherit;
}
.pt-contact-row,
.left_message .d-flex {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px;
}
.left_message .img_cont {
  position: relative;
  flex: 0 0 44px;
}
.left_message .img_cont img.user_img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.left_message .user_info {
  /* OVERRIDE legacy style.css `.user_info { margin: auto auto auto 15px; width: 100% }`
     which positions user_info outside the flex row and breaks alignment.
     Force zero margin so the flex container can correctly place info next to avatar. */
  margin: 0 !important;
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: normal;  /* legacy had nowrap on container — allow children to wrap normally */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.left_message .user-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Search bar fix — Bootstrap's .input-group-prepend was getting overlapped by
   the input because the parent input-group flex layout wasn't enforced.
   Force input-group to be a row flex with the prepend showing first. */
.pt-chat-search .input-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap;
}
.pt-chat-search .input-group-prepend {
  display: inline-flex !important;
  align-items: center;
  position: static !important;
  margin-right: 4px;
  flex: 0 0 auto;
}
.pt-chat-search .form-control {
  flex: 1 1 auto;
  min-width: 0;
}
.pt-contact-avatar {
  position: relative;
  width: 44px; height: 44px; min-width: 44px;
}
.pt-contact-avatar img {
  width: 44px !important; height: 44px !important;
  border-radius: 50%; object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.10);
}
.pt-contact-badge {
  position: absolute !important;
  top: -4px !important; right: -4px !important;
  background: var(--pt-brand) !important;
  color: #fff !important;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  display: none !important;
  align-items: center; justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(255,107,53,.40);
}
.pt-contact-badge.has-count { display: inline-flex !important; }
.pt-contact-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pt-contact-name {
  font-size: 14.5px; font-weight: 600; color: var(--pt-ink);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pt-contact-preview {
  font-size: 12.5px !important; color: var(--pt-ink-3) !important;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  display: block;
}
.pt-contacts-footer { display: none !important; }

/* Chat empty state (right side, no conversation selected) */
/* Empty state card — same caveat as .pt-chat-window: do not force `display` so
   that chat.js can hide it via $('#home_page').hide() when a conversation opens. */
.pt-chat-empty.card {
  border: 0 !important;
  background: transparent !important;
  height: 100%;
  box-shadow: none !important;
}
.pt-chat-empty-state {
  text-align: center;
  color: var(--pt-ink-3);
  padding: 32px;
}
.pt-chat-empty-icon {
  width: 88px; height: 88px;
  border-radius: 28px;
  background: linear-gradient(135deg, #FFF2EC, #FFE4D4);
  color: var(--pt-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  margin: 0 auto 18px;
  box-shadow: 0 8px 24px rgba(255,107,53,.18);
}
.pt-chat-empty-state h3 {
  font-size: 18px; font-weight: 700; color: var(--pt-ink);
  margin: 0 0 6px;
}
.pt-chat-empty-state p {
  font-size: 14px; color: var(--pt-ink-3); margin: 0;
}

/* Chat window (active conversation) — NOTE: do NOT force `display` here. chat.js
   calls $('#history_page').hide() / .show() on document ready and on contact click.
   Forcing `display: flex !important` here would prevent jQuery's inline
   `style="display: none"` from hiding the panel, making the empty-state and the
   chat window overlap. Bootstrap's `.card` is already `display: flex` by default. */
.pt-chat-window.card {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  flex-direction: column;
  height: 100%;
  box-shadow: none !important;
}
.pt-chat-msg-head.card-header {
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pt-line) !important;
  padding: 16px 20px !important;
  flex: 0 0 auto;
}
.pt-chat-head-avatar {
  position: relative;
  width: 44px; height: 44px; min-width: 44px; margin-right: 12px;
}
.pt-chat-head-avatar img {
  width: 44px !important; height: 44px !important;
  border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15,23,42,.10);
}
.pt-online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 12px; height: 12px;
  background: var(--pt-success); border: 2px solid #fff;
  border-radius: 50%;
}
.pt-chat-head-info span strong {
  font-size: 15.5px; font-weight: 700; color: var(--pt-ink);
}
.pt-chat-head-info p {
  font-size: 12px; color: var(--pt-success);
  font-weight: 500;
}

.pt-chat-body.msg_card_body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 22px 24px !important;
  background: #FAFAFB !important;
}

/* Message bubbles */
.pt-chat-body .d-flex { margin-bottom: 14px !important; }
.pt-chat-body .msg_cotainer,
.pt-chat-body .msg_cotainer_send {
  max-width: 75%;
  padding: 10px 14px 8px;
  border-radius: 16px;
  font-size: 14.5px; line-height: 1.45;
  position: relative;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
  word-wrap: break-word;
}
.pt-chat-body .msg_cotainer {
  background: #fff !important;
  color: var(--pt-ink) !important;
  border-bottom-left-radius: 4px;
  margin-left: 0 !important; margin-right: auto;
  border: 1px solid var(--pt-line);
}
.pt-chat-body .msg_cotainer_send {
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong)) !important;
  color: #fff !important;
  border-bottom-right-radius: 4px;
  margin-left: auto;
}
/* Timestamps: small subtle text, on a new line below the message. */
.pt-chat-body .msg_time,
.pt-chat-body .msg_time_send {
  display: block;
  font-size: 10.5px;
  margin-top: 4px;
  opacity: .75;
}
.pt-chat-body .msg_time { color: var(--pt-ink-3); }
.pt-chat-body .msg_time_send { color: rgba(255,255,255,.85); }
.pt-chat-body .img_cont_msg { display: none !important; }

/* Composer / footer */
.pt-chat-footer.card-footer {
  background: #fff !important;
  border: 0 !important;
  border-top: 1px solid var(--pt-line) !important;
  padding: 14px 18px !important;
  flex: 0 0 auto;
}
.pt-chat-composer {
  background: #FAFAFB;
  border: 1px solid var(--pt-line);
  border-radius: 14px;
  padding: 6px 6px 6px 14px;
  display: flex; align-items: center; gap: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pt-chat-composer:focus-within {
  border-color: var(--pt-brand);
  box-shadow: 0 0 0 4px rgba(255,107,53,.10);
  background: #fff;
}
.pt-chat-input.form-control {
  border: 0 !important;
  background: transparent !important;
  padding: 8px 4px !important;
  font-size: 15px !important;
  height: auto !important;
  box-shadow: none !important;
}
.pt-chat-input::placeholder { color: var(--pt-ink-3); }
.pt-chat-send.btn,
.pt-chat-send.btn.btn-primary {
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong)) !important;
  border: 0 !important;
  width: 40px !important; height: 40px !important;
  border-radius: 12px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  color: #fff !important;
  font-size: 14px !important;
  padding: 0 !important;
  box-shadow: 0 6px 14px rgba(255,107,53,.30) !important;
  transition: transform .12s ease, box-shadow .15s ease;
}
.pt-chat-send.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(255,107,53,.40) !important;
}

/* Active contact override (the existing JS toggles .active1) */
.left_message li.active1,
.user_left_message li.active1 {
  background-color: transparent !important;
  padding: 0 !important;
}
.left_message li.active1 a,
.pt-contacts-list .pt-contact-item.active1 a {
  background: rgba(255,107,53,.14) !important;
  box-shadow: inset 3px 0 0 var(--pt-brand);
}

/* Responsive */
@media (max-width: 767px) {
  .pt-chat-shell { height: auto; min-height: 0; }
  .pt-chat-shell > .row > .chat { height: auto; }
  .pt-contacts-card { border-right: 0 !important; border-bottom: 1px solid var(--pt-line) !important; max-height: 280px; }
  .pt-chat-body { min-height: 420px; }
  .pt-chat-header { padding: 24px 0 20px; }
  .pt-chat-page-title { font-size: 22px; }
}

/* ============== ADD / EDIT SERVICE PAGES (modern) ============== */
/* Hide the original breadcrumb-bar on these pages (we use pt-service-hero) */
.pt-service-hero ~ .breadcrumb-bar,
body:has(.pt-service-form-page) .breadcrumb-bar { display: none !important; }

/* Hero */
.pt-service-hero {
  background: linear-gradient(135deg, #FFF5EE 0%, #FFFFFF 60%, #FFFAF5 100%);
  border-bottom: 1px solid var(--pt-line);
  padding: 32px 0 28px;
}
.pt-service-hero-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.pt-service-hero-left { display: flex; align-items: center; gap: 16px; }
.pt-service-hero-pill {
  width: 52px; height: 52px; min-width: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong));
  color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(255,107,53,.28);
}
.pt-service-hero-title {
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  color: var(--pt-ink); margin: 0;
}
.pt-service-hero-sub {
  font-size: 14px; color: var(--pt-ink-3); margin: 2px 0 0;
  max-width: 560px;
}
.pt-service-back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: #fff;
  color: var(--pt-ink-2) !important;
  text-decoration: none;
  border: 1px solid var(--pt-line);
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.pt-service-back-btn:hover {
  background: var(--pt-brand-soft);
  border-color: rgba(255,107,53,.30);
  color: var(--pt-brand-strong) !important;
  transform: translateX(-2px);
}

/* Form page body */
.pt-service-form-page.content {
  padding: 36px 0 80px !important;
  background: transparent !important;
}

/* Section card */
.pt-service-form-page .service-fields {
  background: #fff !important;
  border: 1px solid var(--pt-line) !important;
  border-radius: 18px !important;
  padding: 28px 30px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(15,23,42,.04);
}
/* Section title with brand left bar */
.pt-service-form-page .heading-2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--pt-ink) !important;
  margin: 0 0 22px !important;
  padding-left: 14px !important;
  position: relative;
  letter-spacing: -.01em;
  border: 0 !important;
}
.pt-service-form-page .heading-2::before {
  content: ""; position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 4px;
  background: linear-gradient(180deg, var(--pt-brand), var(--pt-brand-strong));
  border-radius: 999px;
}

/* Labels */
.pt-service-form-page label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pt-ink-2) !important;
  margin-bottom: 8px !important;
  display: block;
}
.pt-service-form-page label .text-danger {
  font-weight: 600;
  margin-left: 2px;
}
.pt-service-form-page label .badge-secondary,
.pt-service-form-page label .badge.badge-secondary {
  background: var(--pt-brand-soft) !important;
  color: var(--pt-brand-strong) !important;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 8px;
  display: inline-flex; align-items: center;
  text-decoration: none;
  border: 1px solid rgba(255,107,53,.20);
  transition: background .15s ease, border-color .15s ease;
}
.pt-service-form-page label .badge-secondary:hover {
  background: var(--pt-brand);
  color: #fff !important;
  border-color: var(--pt-brand);
}

/* Inputs */
.pt-service-form-page .form-control,
.pt-service-form-page select.form-control,
.pt-service-form-page input.form-control,
.pt-service-form-page textarea.form-control {
  border: 1px solid var(--pt-line) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14.5px !important;
  color: var(--pt-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  height: auto !important;
  min-height: 44px;
}
.pt-service-form-page .form-control:focus {
  border-color: var(--pt-brand) !important;
  box-shadow: 0 0 0 4px rgba(255,107,53,.12) !important;
  outline: none !important;
}
.pt-service-form-page textarea.form-control { min-height: 120px; resize: vertical; }
.pt-service-form-page .form-group { margin-bottom: 18px !important; }

/* Bootstrap-select widget (used for category/shop/staff) */
.pt-service-form-page .bootstrap-select > .dropdown-toggle,
.pt-service-form-page .bootstrap-select.form-control > .dropdown-toggle {
  border: 1px solid var(--pt-line) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14.5px !important;
  background: #fff !important;
  color: var(--pt-ink) !important;
  min-height: 44px;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pt-service-form-page .bootstrap-select > .dropdown-toggle:focus,
.pt-service-form-page .bootstrap-select.show > .dropdown-toggle {
  border-color: var(--pt-brand) !important;
  box-shadow: 0 0 0 4px rgba(255,107,53,.12) !important;
}
.pt-service-form-page .bootstrap-select .dropdown-menu {
  border: 1px solid var(--pt-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 40px rgba(15,23,42,.10) !important;
  padding: 6px !important;
  margin-top: 6px !important;
}
.pt-service-form-page .bootstrap-select .dropdown-menu .dropdown-item {
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
}
.pt-service-form-page .bootstrap-select .dropdown-menu .dropdown-item.active,
.pt-service-form-page .bootstrap-select .dropdown-menu .dropdown-item:hover {
  background: var(--pt-brand-soft) !important;
  color: var(--pt-brand-strong) !important;
}

/* Input groups with suffix (duration "min") */
.pt-service-form-page .input-group {
  border: 1px solid var(--pt-line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pt-service-form-page .input-group:focus-within {
  border-color: var(--pt-brand);
  box-shadow: 0 0 0 4px rgba(255,107,53,.12);
}
.pt-service-form-page .input-group > .form-control {
  border: 0 !important;
  background: transparent !important;
  min-height: 42px;
  border-radius: 0 !important;
}
.pt-service-form-page .input-group:focus-within > .form-control { box-shadow: none !important; }
.pt-service-form-page .input-group-text {
  background: #FAFAFB !important;
  border: 0 !important;
  border-left: 1px solid var(--pt-line) !important;
  color: var(--pt-ink-3) !important;
  font-size: 13px !important;
  font-weight: 600;
  padding: 0 16px !important;
  border-radius: 0 !important;
}

/* Image upload zone */
.pt-service-form-page .service-upload {
  border: 2px dashed rgba(255,107,53,.40) !important;
  background: linear-gradient(180deg, #FFFAF5, #FFFFFF) !important;
  border-radius: 16px !important;
  padding: 36px 20px !important;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
  cursor: pointer;
}
.pt-service-form-page .service-upload:hover {
  border-color: var(--pt-brand) !important;
  background: var(--pt-brand-soft) !important;
}
.pt-service-form-page .service-upload i {
  font-size: 36px !important;
  color: var(--pt-brand) !important;
  margin-bottom: 8px;
  display: block;
}
.pt-service-form-page .service-upload span {
  display: block;
  font-size: 14.5px !important;
  font-weight: 600;
  color: var(--pt-ink-2);
}

/* Uploaded images preview grid */
.pt-service-form-page .upload-wrap {
  list-style: none; padding: 0;
  margin: 16px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.pt-service-form-page .upload-wrap li { width: auto !important; margin: 0 !important; }
.pt-service-form-page .upload-images {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--pt-line);
  background: #fff;
  aspect-ratio: 1 / 1;
}
.pt-service-form-page .upload-images img {
  width: 100% !important; height: 100% !important;
  object-fit: cover;
  display: block;
}
.pt-service-form-page .upload-images .file_close1,
.pt-service-form-page .upload-images .btn.btn-danger {
  position: absolute !important;
  top: 6px !important; right: 6px !important;
  width: 26px; height: 26px;
  background: rgba(15,23,42,.75) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.20);
}
.pt-service-form-page .upload-images .file_close1:hover {
  background: var(--pt-brand) !important;
}

/* Additional services dynamic rows */
.pt-service-form-page .additional-info .row.form-row {
  background: #FAFAFB;
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  padding: 12px 12px 0;
  margin: 0 0 12px !important;
}
.pt-service-form-page .additional-info .additional-cont-label {
  background: transparent;
  border: 0;
  padding-bottom: 0;
}
.pt-service-form-page .add-more-additional a.add-additional {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--pt-brand-soft);
  color: var(--pt-brand-strong);
  border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  text-decoration: none;
  border: 1px dashed rgba(255,107,53,.40);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pt-service-form-page .add-more-additional a.add-additional:hover {
  background: var(--pt-brand);
  color: #fff;
  border-color: var(--pt-brand);
  border-style: solid;
}
.pt-service-form-page .add-more-additional a.add-additional i { font-size: 14px; }

/* Trash button on additional rows */
.pt-service-form-page .additional-cont .btn.btn-danger,
.pt-service-form-page .additional-cont .btn.trash,
.pt-service-form-page .additional-cont .btn.trash-alert {
  background: #fff !important;
  border: 1px solid #FECACA !important;
  color: #DC2626 !important;
  border-radius: 10px !important;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
  margin-top: 4px;
  transition: background .15s ease, color .15s ease;
}
.pt-service-form-page .additional-cont .btn.btn-danger:hover {
  background: #FEE2E2 !important;
}

/* Submit area */
.pt-service-form-page .submit-section {
  margin-top: 24px;
  text-align: right;
}
.pt-service-form-page .submit-section .btn.btn-primary,
.pt-service-form-page .submit-section .submit-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong)) !important;
  border: 0 !important;
  padding: 14px 34px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(255,107,53,.32) !important;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
  text-shadow: none !important;
}
.pt-service-form-page .submit-section .btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255,107,53,.40) !important;
  filter: brightness(1.02);
}

/* CKEditor frame */
.pt-service-form-page .cke {
  border: 1px solid var(--pt-line) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.pt-service-form-page .cke_top {
  background: #FAFAFB !important;
  border-bottom: 1px solid var(--pt-line) !important;
}

/* Responsive */
@media (max-width: 767px) {
  .pt-service-form-page .service-fields { padding: 20px 18px !important; }
  .pt-service-hero { padding: 24px 0 20px; }
  .pt-service-hero-title { font-size: 22px; }
  .pt-service-back-btn { width: 100%; justify-content: center; }
  .pt-service-form-page .submit-section { text-align: center; }
  .pt-service-form-page .submit-section .btn.btn-primary { width: 100%; justify-content: center; }
}

/* ============== SHOP CARD ACTIONS (modern) ============== */
/* New 2-button action stack inside the shop card */
.shop-widget .service-action.pt-shop-actions {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
}
.pt-btn-shop-edit {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  gap: 8px;
  background: var(--pt-brand-soft) !important;
  color: var(--pt-brand-strong) !important;
  border: 1px solid rgba(255,107,53,.28) !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  width: 100%;
  box-shadow: none !important;
}
.pt-btn-shop-edit:hover {
  background: var(--pt-brand) !important;
  color: #fff !important;
  border-color: var(--pt-brand) !important;
  transform: translateY(-1px);
}
.pt-btn-shop-edit i { font-size: 14px; }
.pt-btn-shop-products.btn.btn-primary {
  background: linear-gradient(135deg, var(--pt-brand), var(--pt-brand-strong)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  width: 100% !important;
  box-shadow: 0 6px 14px rgba(255,107,53,.28) !important;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.pt-btn-shop-products.btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(255,107,53,.36) !important;
  filter: brightness(1.02);
  color: #fff !important;
}

/* ============== SHOP EDIT — DANGER ZONE ============== */
.pt-shop-danger-zone {
  margin-top: 28px;
  background: #FFF7F7;
  border: 1px solid #FECACA;
  border-radius: 18px;
  padding: 24px 28px;
}
.pt-danger-header {
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 18px;
}
.pt-danger-icon {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 12px;
  background: rgba(220,38,38,.10);
  color: #DC2626;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.pt-danger-header h3 {
  margin: 0 0 4px;
  font-size: 16px; font-weight: 700;
  color: #991B1B;
}
.pt-danger-header p {
  margin: 0;
  font-size: 13.5px; line-height: 1.5;
  color: #7F1D1D;
  max-width: 640px;
}
.pt-btn-deactivate,
.pt-btn-deactivate-disabled {
  display: inline-flex !important;
  align-items: center; gap: 10px;
  padding: 10px 22px !important;
  font-size: 14px !important; font-weight: 600 !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  text-decoration: none !important;
}
.pt-btn-deactivate {
  background: #fff !important;
  color: #DC2626 !important;
  border-color: #FECACA !important;
}
.pt-btn-deactivate:hover {
  background: #DC2626 !important;
  color: #fff !important;
  border-color: #DC2626 !important;
  box-shadow: 0 6px 16px rgba(220,38,38,.25) !important;
  transform: translateY(-1px);
}
.pt-btn-deactivate-disabled {
  background: #FEE2E2 !important;
  color: #7F1D1D !important;
  border-color: #FECACA !important;
  cursor: not-allowed;
  opacity: .85;
}
.pt-danger-note {
  display: block;
  margin-top: 10px;
  font-size: 12.5px; color: #7F1D1D;
  line-height: 1.45;
}

/* Modals on edit_shop page get modern styling too */
.pt-service-form-page #deleteConfirmModal .modal-content,
.pt-service-form-page #deleteNotConfirmModal .modal-content,
#deleteConfirmModal .modal-content,
#deleteNotConfirmModal .modal-content {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15,23,42,.18);
  overflow: hidden;
}
#deleteConfirmModal .modal-header,
#deleteNotConfirmModal .modal-header {
  border-bottom: 1px solid var(--pt-line);
  padding: 16px 20px;
}
#deleteConfirmModal .modal-title,
#deleteNotConfirmModal .modal-title {
  font-size: 16px; font-weight: 700; color: var(--pt-ink);
}
#deleteConfirmModal .modal-body,
#deleteNotConfirmModal .modal-body {
  padding: 20px; font-size: 14.5px; color: var(--pt-ink-2);
}
#deleteConfirmModal .modal-footer,
#deleteNotConfirmModal .modal-footer {
  border-top: 1px solid var(--pt-line);
  padding: 14px 20px;
  gap: 10px;
}
#deleteConfirmModal .btn.btn-success.si_inactive_confirm {
  background: #DC2626 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 20px;
  font-weight: 600;
  color: #fff !important;
}
#deleteConfirmModal .btn.btn-success.si_inactive_confirm:hover {
  background: #B91C1C !important;
}
#deleteConfirmModal .btn.btn-danger.si_accept_cancel,
#deleteNotConfirmModal .btn.btn-danger {
  background: #fff !important;
  color: var(--pt-ink-2) !important;
  border: 1px solid var(--pt-line) !important;
  border-radius: 10px !important;
  padding: 10px 20px;
  font-weight: 600;
}
#deleteConfirmModal .btn.btn-danger.si_accept_cancel:hover {
  background: #FAFAFB !important;
}

/* ============================================================
   DARK THEME (2026)
   Applied via [data-theme="dark"] on <html>. Toggle button in
   navbar persists preference in localStorage key 'pt-theme'.
   ============================================================ */

html[data-theme="dark"] {
  --pt-ink: #F1F5F9;
  --pt-ink-2: #CBD5E1;
  --pt-ink-3: #94A3B8;
  --pt-line: #2A3548;
  --pt-surface: #1B2333;
  --pt-surface-2: #0F1626;
  --pt-brand-soft: rgba(255,107,53,.16);
  --pt-secondary-soft: rgba(57,60,198,.22);
  --pt-shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --pt-shadow-2: 0 10px 25px -5px rgba(0,0,0,.55), 0 4px 10px -3px rgba(0,0,0,.4);
  --pt-shadow-3: 0 25px 50px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* Smooth fade between themes */
html { transition: background-color 200ms ease, color 200ms ease; }
body, .header, .card, .modal-content, .dropdown-menu,
.form-control, .form-select, .table {
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease;
}

/* Page surfaces */
html[data-theme="dark"] body,
html[data-theme="dark"] .main-wrapper,
html[data-theme="dark"] .content,
html[data-theme="dark"] .page-wrapper {
  background: var(--pt-surface-2) !important;
  color: var(--pt-ink);
}

/* Top header / navbar */
html[data-theme="dark"] .header,
html[data-theme="dark"] .header-fixed .header,
html[data-theme="dark"] header,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .main-nav,
html[data-theme="dark"] .main-menu-wrapper {
  background: var(--pt-surface) !important;
  border-bottom: 1px solid var(--pt-line) !important;
}
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-link.link-head,
html[data-theme="dark"] .main-nav > li > a {
  color: var(--pt-ink) !important;
}
html[data-theme="dark"] .nav-link.link-head:hover { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .logo img { filter: brightness(1.05); }

/* Dropdowns */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-menu.show {
  background: var(--pt-surface) !important;
  border: 1px solid var(--pt-line) !important;
  box-shadow: var(--pt-shadow-2);
}
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .dropdown-menu a {
  color: var(--pt-ink-2) !important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background: rgba(255,255,255,.05) !important;
  color: var(--pt-ink) !important;
}
html[data-theme="dark"] .dropdown-divider { border-color: var(--pt-line); }
html[data-theme="dark"] .notifications,
html[data-theme="dark"] .notify-blk,
html[data-theme="dark"] .comments-blk {
  background: var(--pt-surface) !important;
}
html[data-theme="dark"] .notification-message a { color: var(--pt-ink-2) !important; }
html[data-theme="dark"] .topnav-dropdown-header,
html[data-theme="dark"] .topnav-dropdown-footer {
  background: var(--pt-surface-2) !important;
  border-color: var(--pt-line) !important;
}
html[data-theme="dark"] .topnav-dropdown-header .notification-title { color: var(--pt-ink) !important; }

/* Cards / panels */
html[data-theme="dark"] .card,
html[data-theme="dark"] .pt-card,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .service-widget,
html[data-theme="dark"] .provider-widget,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .shop-card,
html[data-theme="dark"] .pt-contact-card,
html[data-theme="dark"] .pt-value-card,
html[data-theme="dark"] .pt-stat-card,
html[data-theme="dark"] .pt-service-form-page,
html[data-theme="dark"] .booking-summary,
html[data-theme="dark"] .review-listing,
html[data-theme="dark"] .sidebar-content {
  background: var(--pt-surface) !important;
  border-color: var(--pt-line) !important;
  color: var(--pt-ink);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer {
  background: transparent !important;
  color: var(--pt-ink);
  border-color: var(--pt-line) !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .heading,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .breadcrumb-title h2 {
  color: var(--pt-ink) !important;
}
html[data-theme="dark"] p,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] label,
html[data-theme="dark"] li,
html[data-theme="dark"] td {
  color: var(--pt-ink-2);
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small.text-muted {
  color: var(--pt-ink-3) !important;
}

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #131B2B !important;
  color: var(--pt-ink) !important;
  border-color: var(--pt-line) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: #131B2B !important;
  border-color: var(--pt-brand) !important;
  box-shadow: 0 0 0 3px rgba(255,107,53,.15) !important;
  color: var(--pt-ink) !important;
}
html[data-theme="dark"] .input-group-text {
  background: #131B2B !important;
  color: var(--pt-ink-2) !important;
  border-color: var(--pt-line) !important;
}
html[data-theme="dark"] .form-control::placeholder { color: var(--pt-ink-3) !important; opacity: 1; }
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown {
  background: #131B2B !important;
  border-color: var(--pt-line) !important;
  color: var(--pt-ink) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection__rendered { color: var(--pt-ink) !important; }
html[data-theme="dark"] .select2-results__option { color: var(--pt-ink-2); }
html[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
  background: var(--pt-brand) !important;
  color: #fff !important;
}

/* Tables */
html[data-theme="dark"] .table { color: var(--pt-ink-2); background: var(--pt-surface); }
html[data-theme="dark"] .table thead th {
  background: var(--pt-surface-2) !important;
  color: var(--pt-ink) !important;
  border-color: var(--pt-line) !important;
}
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table tbody th { border-color: var(--pt-line) !important; }
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,.02);
}
html[data-theme="dark"] .table-hover tbody tr:hover { background: rgba(255,255,255,.04); }

/* Modals */
html[data-theme="dark"] .modal-content {
  background: var(--pt-surface) !important;
  color: var(--pt-ink);
  border: 1px solid var(--pt-line);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--pt-line) !important; }
html[data-theme="dark"] .modal-title { color: var(--pt-ink) !important; }
html[data-theme="dark"] .btn-close { filter: invert(.95); }

/* Generic borders/dividers */
html[data-theme="dark"] hr,
html[data-theme="dark"] .border,
html[data-theme="dark"] [class*="border-"] { border-color: var(--pt-line) !important; }

/* Buttons fallback */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary {
  background: var(--pt-surface) !important;
  color: var(--pt-ink) !important;
  border-color: var(--pt-line) !important;
}
html[data-theme="dark"] .btn-light:hover { background: rgba(255,255,255,.05) !important; }

/* Footer */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .footer-top,
html[data-theme="dark"] .footer-bottom {
  background: var(--pt-surface) !important;
  color: var(--pt-ink-2);
  border-color: var(--pt-line);
}
html[data-theme="dark"] .footer h5,
html[data-theme="dark"] .footer h6,
html[data-theme="dark"] .footer .footer-title { color: var(--pt-ink) !important; }
html[data-theme="dark"] .footer a { color: var(--pt-ink-2); }
html[data-theme="dark"] .footer a:hover { color: var(--pt-brand); }

/* Chat */
html[data-theme="dark"] .pt-chat-shell,
html[data-theme="dark"] .pt-contacts-list,
html[data-theme="dark"] .pt-chat-window,
html[data-theme="dark"] .msg_card_body,
html[data-theme="dark"] .left_message,
html[data-theme="dark"] .card-footer.chat-typing {
  background: var(--pt-surface) !important;
  border-color: var(--pt-line) !important;
}
html[data-theme="dark"] .msg_cotainer {
  background: #1F2A3D !important;
  color: var(--pt-ink) !important;
}
html[data-theme="dark"] .msg_cotainer_send {
  background: var(--pt-brand) !important;
  color: #fff !important;
}
html[data-theme="dark"] .pt-contact-item:hover { background: rgba(255,255,255,.04) !important; }

/* Breadcrumb / hero sections */
html[data-theme="dark"] .breadcrumb-bar,
html[data-theme="dark"] .pt-contact-hero,
html[data-theme="dark"] .pt-about-hero,
html[data-theme="dark"] .pt-service-hero {
  background: linear-gradient(135deg, #1B2333 0%, #0F1626 100%) !important;
  border-color: var(--pt-line) !important;
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.pt-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--pt-ink-2);
  cursor: pointer;
  transition: background var(--pt-t-fast), color var(--pt-t-fast), transform var(--pt-t-fast);
  position: relative;
  overflow: hidden;
}
.pt-theme-toggle:hover {
  background: var(--pt-surface-2);
  color: var(--pt-brand);
  transform: translateY(-1px);
}
.pt-theme-toggle i {
  font-size: 18px;
  transition: opacity 200ms ease, transform 300ms ease;
  position: absolute;
}
.pt-theme-toggle .feather-sun { opacity: 0; transform: rotate(-45deg) scale(.6); }
.pt-theme-toggle .feather-moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .pt-theme-toggle .feather-sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .pt-theme-toggle .feather-moon { opacity: 0; transform: rotate(45deg) scale(.6); }
html[data-theme="dark"] .pt-theme-toggle { color: var(--pt-ink); }
html[data-theme="dark"] .pt-theme-toggle:hover { background: rgba(255,255,255,.06); color: var(--pt-accent); }
.pt-theme-toggle-li .nav-link { padding: 0 !important; }

/* ============================================================
   LOGIN PAGES — dark mode + toggle button container
   ============================================================ */
html[data-theme="dark"] .login-page {
  background: var(--pt-surface-2) !important;
  color: var(--pt-ink);
}
html[data-theme="dark"] .account-header,
html[data-theme="dark"] .account-header .navbar {
  background: var(--pt-surface) !important;
  border-bottom: 1px solid var(--pt-line) !important;
}
html[data-theme="dark"] .account-header .navbar-brand img { filter: brightness(1.05); }
html[data-theme="dark"] .loginbox,
html[data-theme="dark"] .login-right-wrap {
  background: var(--pt-surface) !important;
  color: var(--pt-ink) !important;
  border: 1px solid var(--pt-line) !important;
  box-shadow: var(--pt-shadow-2);
}
html[data-theme="dark"] .login-header h3,
html[data-theme="dark"] .login-header h2,
html[data-theme="dark"] .login-header h1 {
  color: var(--pt-ink) !important;
}
html[data-theme="dark"] .login-header p,
html[data-theme="dark"] .login-header .text-muted {
  color: var(--pt-ink-3) !important;
}
html[data-theme="dark"] .login-right-wrap .form-group label,
html[data-theme="dark"] .login-right-wrap .control-label {
  color: var(--pt-ink-2) !important;
}
html[data-theme="dark"] .account-link,
html[data-theme="dark"] .account-link a {
  color: var(--pt-brand) !important;
}
html[data-theme="dark"] .account-link a:hover { color: var(--pt-accent) !important; }

/* Toggle button positioned in account-header */
.pt-theme-toggle.pt-toggle-floating {
  position: absolute;
  top: 14px;
  right: 20px;
  z-index: 1100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.05);
  color: var(--pt-ink-2);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--pt-t-fast), color var(--pt-t-fast), transform var(--pt-t-fast);
}
.pt-theme-toggle.pt-toggle-floating:hover {
  background: var(--pt-brand-soft);
  color: var(--pt-brand);
  transform: translateY(-1px);
}
html[data-theme="dark"] .pt-theme-toggle.pt-toggle-floating {
  background: rgba(255,255,255,.06);
  color: var(--pt-ink);
}
html[data-theme="dark"] .pt-theme-toggle.pt-toggle-floating:hover {
  background: rgba(255,255,255,.12);
  color: var(--pt-accent);
}
.pt-theme-toggle.pt-toggle-floating i {
  font-size: 16px;
  transition: opacity 200ms ease, transform 300ms ease;
  position: absolute;
}

/* ============================================================
   LANDING PAGE — dark mode coverage pass
   Banner search pill, popular-search chips, shop cards, section
   titles, "Visualizza tutto" outline button.
   ============================================================ */

/* Banner search wrapper (the white pill containing the inputs) */
html[data-theme="dark"] .banner-input-set,
html[data-theme="dark"] .banner-input-set .row {
  background: rgba(15,22,38,.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .banner-input,
html[data-theme="dark"] .banner-input .form-control,
html[data-theme="dark"] .banner-input input.global {
  background: transparent !important;
  color: var(--pt-ink) !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .banner-input input::placeholder,
html[data-theme="dark"] .banner-input input.global::placeholder {
  color: var(--pt-ink-3) !important;
  opacity: 1;
}
html[data-theme="dark"] .banner-input i.feather-globe,
html[data-theme="dark"] .banner-input .current-loc-icon i {
  color: var(--pt-ink-3) !important;
}

/* Banner headline */
html[data-theme="dark"] .banner-head h3 { color: var(--pt-brand) !important; }
html[data-theme="dark"] .banner-head h2 { color: var(--pt-ink) !important; }

/* Popular search tags (chips) */
html[data-theme="dark"] .search-cat span { color: var(--pt-ink-2) !important; }
html[data-theme="dark"] .search-cat i.fas.fa-circle { color: var(--pt-accent) !important; }
html[data-theme="dark"] .search-cat li,
html[data-theme="dark"] .search-cat li a {
  background: rgba(255,255,255,.06) !important;
  color: var(--pt-ink) !important;
  border-color: rgba(255,255,255,.1) !important;
}
html[data-theme="dark"] .search-cat li:hover,
html[data-theme="dark"] .search-cat li a:hover {
  background: var(--pt-brand-soft) !important;
  color: var(--pt-brand) !important;
}

/* Section titles ("Negozi più vicini...", "Negozi più popolari", ecc.) */
html[data-theme="dark"] .title-set h2,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .heading-set h2 {
  color: var(--pt-ink) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .title-set h5,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .heading-set p {
  color: var(--pt-ink-3) !important;
}

/* Section backgrounds */
html[data-theme="dark"] .popular-bg,
html[data-theme="dark"] .feature-shop-section,
html[data-theme="dark"] .pad-set,
html[data-theme="dark"] .category-section,
html[data-theme="dark"] .recent-bg,
html[data-theme="dark"] .home-banner,
html[data-theme="dark"] .banner-section {
  background: transparent !important;
}

/* Shop cards */
html[data-theme="dark"] .shop-widget,
html[data-theme="dark"] .shop-wrap,
html[data-theme="dark"] .feature-shop {
  background: var(--pt-surface) !important;
  border: 1px solid var(--pt-line) !important;
  color: var(--pt-ink) !important;
  box-shadow: var(--pt-shadow-1);
}
html[data-theme="dark"] .shop-widget:hover,
html[data-theme="dark"] .shop-wrap:hover { box-shadow: var(--pt-shadow-2); }
html[data-theme="dark"] .shop-det h3,
html[data-theme="dark"] .shop-det h3 a,
html[data-theme="dark"] .feature-shop h3,
html[data-theme="dark"] .feature-shop h3 a { color: var(--pt-ink) !important; }
html[data-theme="dark"] .shop-det h3 a:hover { color: var(--pt-brand) !important; }
html[data-theme="dark"] .shop-cate,
html[data-theme="dark"] .shop-location,
html[data-theme="dark"] .feature-shop .shop-location { color: var(--pt-ink-3) !important; }
html[data-theme="dark"] .shop-location i { color: var(--pt-brand) !important; }

/* "0 Servizi" / "0 Prodotti" pill tags inside shop card */
html[data-theme="dark"] .shop-info-det,
html[data-theme="dark"] .shop-info-det ul { background: transparent !important; }
html[data-theme="dark"] .shop-info-det ul li {
  background: rgba(255,255,255,.05) !important;
  color: var(--pt-ink-2) !important;
  border: 1px solid var(--pt-line) !important;
}

/* Round arrow "visit store" button at bottom of each card */
html[data-theme="dark"] .visit-store a {
  background: rgba(255,107,53,.12) !important;
  color: var(--pt-brand) !important;
  border: 1px solid rgba(255,107,53,.25) !important;
}
html[data-theme="dark"] .visit-store a:hover {
  background: var(--pt-brand) !important;
  color: #fff !important;
}

/* "Visualizza tutto" outline button below carousels */
html[data-theme="dark"] .view-all-set a,
html[data-theme="dark"] .view-all-set .btn,
html[data-theme="dark"] a.view-all,
html[data-theme="dark"] .btn.view-all,
html[data-theme="dark"] .visualizza-tutto {
  background: transparent !important;
  color: var(--pt-ink) !important;
  border: 1px solid var(--pt-line) !important;
}
html[data-theme="dark"] .view-all-set a:hover,
html[data-theme="dark"] .view-all-set .btn:hover,
html[data-theme="dark"] a.view-all:hover {
  background: var(--pt-brand) !important;
  color: #fff !important;
  border-color: var(--pt-brand) !important;
}

/* Owl carousel dots */
html[data-theme="dark"] .owl-theme .owl-dots .owl-dot span {
  background: rgba(255,255,255,.15) !important;
}
html[data-theme="dark"] .owl-theme .owl-dots .owl-dot.active span,
html[data-theme="dark"] .owl-theme .owl-dots .owl-dot:hover span {
  background: var(--pt-brand) !important;
}

/* Feature shop offer tags */
html[data-theme="dark"] .offer-tags .bg-red { background: var(--pt-brand) !important; color: #fff !important; }

/* No content placeholder */
html[data-theme="dark"] .no-content-col {
  background: var(--pt-surface) !important;
  color: var(--pt-ink-3) !important;
  border: 1px dashed var(--pt-line) !important;
  border-radius: var(--pt-radius);
  padding: 24px;
  text-align: center;
}

/* Category section icons / cards (already on home below) */
html[data-theme="dark"] .category-card,
html[data-theme="dark"] a.category-card {
  background: var(--pt-surface) !important;
  border: 1px solid var(--pt-line) !important;
  color: var(--pt-ink) !important;
}
html[data-theme="dark"] .category-card:hover { border-color: var(--pt-brand) !important; }
html[data-theme="dark"] .category-card .category-icon-wrap,
html[data-theme="dark"] .category-card .category-icon { background: rgba(255,107,53,.10) !important; }
html[data-theme="dark"] .category-card h6,
html[data-theme="dark"] .category-card h5,
html[data-theme="dark"] .category-card .category-name { color: var(--pt-ink) !important; }

/* Banner overlay if any */
html[data-theme="dark"] .home-banner::before,
html[data-theme="dark"] .home-banner::after { opacity: .35 !important; }

/* ============================================================
   ABOUT-US & CONTACT pages — dark mode coverage
   The original sections use hardcoded #fff / #FAFAFB / cream
   gradients that read as harsh white pills against the dark
   background. Map each surface to the dark palette and keep
   the brand orange CTA banner untouched (it works in both modes).
   ============================================================ */

/* ---------- ABOUT-US ---------- */

/* Stat pill ("100% / 0€ / 24h") below hero */
html[data-theme="dark"] .pt-about-stats {
  background: rgba(15,22,38,.55) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-theme="dark"] .pt-about-stat-label { color: var(--pt-ink-3) !important; }

/* Story section (white in light mode) */
html[data-theme="dark"] .pt-about-story {
  background: var(--pt-surface-2) !important;
}
html[data-theme="dark"] .pt-about-story-title { color: var(--pt-ink) !important; }
html[data-theme="dark"] .pt-about-content p { color: var(--pt-ink-2) !important; }
html[data-theme="dark"] .pt-about-content strong { color: var(--pt-ink) !important; }
html[data-theme="dark"] .pt-about-content em { color: var(--pt-brand) !important; }

/* Story illustration backdrop (cream gradient) — keep brand-warm but dimmed */
html[data-theme="dark"] .pt-about-story-visual {
  background: linear-gradient(135deg, rgba(255,107,53,.18) 0%, rgba(255,210,63,.10) 100%) !important;
}

/* Values section (light grey in light mode) */
html[data-theme="dark"] .pt-about-values {
  background: var(--pt-surface-2) !important;
  border-top: 1px solid var(--pt-line);
}
html[data-theme="dark"] .pt-about-values-head h2 { color: var(--pt-ink) !important; }
html[data-theme="dark"] .pt-about-values-head p { color: var(--pt-ink-3) !important; }
html[data-theme="dark"] .pt-about-value-card {
  background: var(--pt-surface) !important;
  border-color: var(--pt-line) !important;
  box-shadow: var(--pt-shadow-1);
}
html[data-theme="dark"] .pt-about-value-card:hover {
  border-color: rgba(255,107,53,.45) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.45) !important;
}
html[data-theme="dark"] .pt-about-value-card h3 { color: var(--pt-ink) !important; }
html[data-theme="dark"] .pt-about-value-card p { color: var(--pt-ink-2) !important; }

/* CTA banner section frame (background only — the orange card itself stays) */
html[data-theme="dark"] .pt-about-cta {
  background: var(--pt-surface-2) !important;
}

/* ---------- CONTACT ---------- */

/* Contact info cards (under the hero) */
html[data-theme="dark"] .pt-contact-card {
  background: var(--pt-surface) !important;
  border-color: var(--pt-line) !important;
  box-shadow: var(--pt-shadow-1);
}
html[data-theme="dark"] .pt-contact-card:hover {
  border-color: rgba(255,107,53,.45) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.45) !important;
}
html[data-theme="dark"] .pt-contact-card-label { color: var(--pt-ink-3) !important; }
html[data-theme="dark"] .pt-contact-card-body p,
html[data-theme="dark"] .pt-contact-card-body a { color: var(--pt-ink) !important; }
html[data-theme="dark"] .pt-contact-card-body a:hover { color: var(--pt-brand) !important; }

/* Form section background */
html[data-theme="dark"] .pt-contact-form-section {
  background: var(--pt-surface-2) !important;
  border-top: 1px solid var(--pt-line);
}
html[data-theme="dark"] .pt-contact-form-left h2 { color: var(--pt-ink) !important; }
html[data-theme="dark"] .pt-contact-form-desc { color: var(--pt-ink-2) !important; }
html[data-theme="dark"] .pt-contact-perks li strong { color: var(--pt-ink) !important; }
html[data-theme="dark"] .pt-contact-perks li small { color: var(--pt-ink-3) !important; }
html[data-theme="dark"] .pt-perk-ico {
  background: rgba(255,107,53,.18) !important;
  color: var(--pt-brand) !important;
}

/* Form card */
html[data-theme="dark"] .pt-contact-form-card {
  background: var(--pt-surface) !important;
  border-color: var(--pt-line) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
html[data-theme="dark"] .pt-form-group label { color: var(--pt-ink-2) !important; }
html[data-theme="dark"] .pt-form-control {
  background: #131B2B !important;
  color: var(--pt-ink) !important;
  border-color: var(--pt-line) !important;
}
html[data-theme="dark"] .pt-form-control:focus {
  border-color: var(--pt-brand) !important;
  box-shadow: 0 0 0 4px rgba(255,107,53,.18) !important;
}
html[data-theme="dark"] .pt-form-control::placeholder { color: var(--pt-ink-3) !important; }

/* ============================================================
   Top header — 50% transparency with backdrop blur
   Applies to both light and dark mode, user + admin sides.
   The blur prevents content underneath from looking ugly when
   the page scrolls.
   ============================================================ */

.header,
header.header,
.main-wrapper > .header,
header.account-header {
  background-color: rgba(255,255,255,.5) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}

html[data-theme="dark"] .header,
html[data-theme="dark"] header.header,
html[data-theme="dark"] .main-wrapper > .header,
html[data-theme="dark"] header.account-header {
  background-color: rgba(27,35,51,.5) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* The admin header-left (logo block) sits inside .header and inherits
   surface color via its own rule — make it transparent too so the
   blur is unbroken across the bar. */
.header .header-left,
.header > .header-left {
  background-color: transparent !important;
  border-right: 1px solid rgba(15,23,42,.06) !important;
}
html[data-theme="dark"] .header .header-left,
html[data-theme="dark"] .header > .header-left {
  border-right: 1px solid rgba(255,255,255,.06) !important;
}

/* Make the header behave as a sticky frosted layer (most layouts
   already pin it; ensure the stacking context is correct). */
.header { position: sticky; top: 0; z-index: 1000; }

/* Remove the hero bottom-line that runs through the 3 contact cards */
.pt-contact-hero { border-bottom: 0 !important; }

/* Remove the hero bottom-line that runs through the 3 contact cards */
.pt-contact-hero { border-bottom: 0 !important; }

/* Remove the form-section border-top that bleeds through the
   overlapping contact cards (cards use margin-top:-36px). Same for
   the about-us values-section. */
html[data-theme="dark"] .pt-contact-form-section,
html[data-theme="dark"] .pt-about-values {
  border-top: 0 !important;
}
.pt-contact-form-section,
.pt-about-values { border-top: 0 !important; }

/* Language toggle (flag-only, no dropdown) */
.pt-lang-toggle-li { list-style: none; }
.pt-lang-toggle {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  padding: 0 !important;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--pt-t-fast), transform var(--pt-t-fast);
  text-decoration: none;
}
.pt-lang-toggle:hover {
  background: var(--pt-surface-2);
  transform: translateY(-1px);
}
html[data-theme="dark"] .pt-lang-toggle:hover {
  background: rgba(255,255,255,.06);
}
.pt-lang-flag {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

/* Flag icons inside language toggle — circular crop */
.pt-lang-flag-icon.fi {
  width: 24px; height: 24px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  display: inline-block;
  line-height: 1;
}

/* Header bottom divider — use a box-shadow line instead of border, with
   higher opacity so it remains visible across the full viewport width
   even when colored gradients sit behind it. */
.header,
header.header,
.main-wrapper > .header,
header.account-header {
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 0 rgba(15,23,42,.18) !important;
}
html[data-theme="dark"] .header,
html[data-theme="dark"] header.header,
html[data-theme="dark"] .main-wrapper > .header,
html[data-theme="dark"] header.account-header {
  box-shadow: 0 1px 0 0 rgba(255,255,255,.14) !important;
}

/* ============================================================
   Login button in dark mode — the default style sets bg to
   var(--pt-ink) which in dark mode is near-white, producing
   an unreadable white button. Use a ghost-light style instead.
   ============================================================ */
html[data-theme="dark"] .btn.btn-signin {
  background: rgba(255,255,255,.08) !important;
  color: var(--pt-ink) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .btn.btn-signin:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: var(--pt-ink) !important;
}
/* The orange Registra button (first signin in the row) stays brand. */
html[data-theme="dark"] .btn.btn-signin.me-2,
html[data-theme="dark"] .header-navbar-rht .nav-item:first-child .btn.btn-signin {
  background: var(--pt-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ============================================================
   Landing-page hero bottom fade — soften the hard horizontal
   transition where the orange ambient gradient meets the body
   background.
   ============================================================ */
.hero-section {
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
          mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
}
/* Lift the bottom-left orange glow a bit higher so it does not
   meet the mask fade with a hard cut. */
.hero-section::after {
  bottom: auto !important;
  top: 40% !important;
  left: -200px !important;
  opacity: .7;
}

/* ============================================================
   FIX: square outlines around search pill + popular chips
   The earlier dark overrides applied bg/border to the rectangular
   wrappers (.banner-input-set .row, .search-cat li). Move them
   onto the actually-rounded elements only.
   ============================================================ */

/* Search pill — kill bg/border on the rectangular wrappers */
html[data-theme="dark"] .banner-input-set,
html[data-theme="dark"] .banner-input-set > .row,
html[data-theme="dark"] .banner-input-set .row {
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* …and put the dark pill background on the rounded form itself */
html[data-theme="dark"] #search_service {
  background: rgba(15,22,38,.55) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
}

/* Popular search chips — kill bg/border on the rectangular <li> */
html[data-theme="dark"] .search-cat li,
html[data-theme="dark"] .banner-list .search-cat li {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* …and apply pill bg/border only on the rounded <a> inside */
html[data-theme="dark"] .banner-list .search-cat li a,
html[data-theme="dark"] .search-cat li a {
  background: rgba(255,255,255,.06) !important;
  color: var(--pt-ink) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] .banner-list .search-cat li a:hover,
html[data-theme="dark"] .search-cat li a:hover {
  background: var(--pt-brand-soft) !important;
  border-color: var(--pt-brand) !important;
  color: var(--pt-brand) !important;
}

/* ============================================================
   CATEGORY 3D IMMERSIVE SCROLL (2026)
   Coverflow-style horizontal carousel with perspective. Cards
   rotate inward as they move off-center. Smooth, GPU-accelerated.
   ============================================================ */
.pt-cat3d-section {
  padding: 72px 0 88px;
  overflow: hidden;
}
.pt-cat3d-stage {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 60%;
}
.pt-cat3d-track {
  display: flex;
  gap: 32px;
  padding: 40px max(calc(50% - 130px), 72px) 56px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  transform-style: preserve-3d;
  scroll-behavior: smooth;
  outline: none;
  -webkit-overflow-scrolling: touch;
  margin-left: 56px;
  margin-right: 56px;
}
.pt-cat3d-track::-webkit-scrollbar { display: none; }

.pt-cat3d-card {
  flex: 0 0 260px;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 18px;
  padding: 36px 28px 32px;
  background: linear-gradient(160deg, var(--pt-surface) 0%, var(--pt-surface-2) 100%);
  border: 1px solid var(--pt-line);
  border-radius: 28px;
  box-shadow: 0 24px 48px -16px rgba(15,23,42,.18), 0 4px 12px -2px rgba(15,23,42,.08);
  color: var(--pt-ink);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transform-origin: 50% 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              opacity   .45s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease, border-color .35s ease;
  cursor: pointer;
}
.pt-cat3d-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 50% at 50% 0%, rgba(255,107,53,.10), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
}
.pt-cat3d-card.is-active::before { opacity: 1; }
.pt-cat3d-card.is-active {
  border-color: rgba(255,107,53,.55);
  box-shadow: 0 36px 64px -16px rgba(255,107,53,.30),
              0 12px 24px -8px rgba(15,23,42,.18);
}
html[data-theme="dark"] .pt-cat3d-card {
  background: linear-gradient(160deg, var(--pt-surface) 0%, #131B2B 100%);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.55), 0 4px 12px -2px rgba(0,0,0,.35);
}
html[data-theme="dark"] .pt-cat3d-card.is-active {
  box-shadow: 0 36px 64px -16px rgba(255,107,53,.45),
              0 12px 24px -8px rgba(0,0,0,.55);
}

/* Specular shine swept across card */
.pt-cat3d-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.10) 48%,
    rgba(255,255,255,.20) 50%,
    rgba(255,255,255,.10) 52%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform .9s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  border-radius: inherit;
}
.pt-cat3d-card.is-active .pt-cat3d-shine { transform: translateX(100%); }
html[data-theme="dark"] .pt-cat3d-shine {
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.04) 48%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 52%,
    transparent 70%);
}

/* Icon bubble */
.pt-cat3d-icon {
  width: 96px; height: 96px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255,107,53,.16), rgba(255,210,63,.10));
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px rgba(255,107,53,.12);
  transform: translateZ(40px);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.pt-cat3d-card.is-active .pt-cat3d-icon {
  transform: translateZ(64px) scale(1.05);
}
.pt-cat3d-icon img {
  width: 56px; height: 56px; object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
html[data-theme="dark"] .pt-cat3d-icon {
  background: linear-gradient(135deg, rgba(255,107,53,.22), rgba(255,210,63,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(255,107,53,.18);
}

/* Name */
.pt-cat3d-name {
  font-size: 20px; font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pt-ink);
  text-align: center;
  transform: translateZ(24px);
  margin-top: 4px;
}

/* Service count */
.pt-cat3d-count {
  display: flex; align-items: baseline; gap: 6px;
  transform: translateZ(20px);
}
.pt-cat3d-count strong {
  font-size: 28px; font-weight: 800;
  color: var(--pt-brand);
  letter-spacing: -.02em;
}
.pt-cat3d-count span {
  font-size: 13px; color: var(--pt-ink-3);
  font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Arrow chip (only on active) */
.pt-cat3d-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pt-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
  box-shadow: 0 8px 20px rgba(255,107,53,.40);
  transform: translateZ(40px) scale(0);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22,1.6,.36,1), opacity .35s ease;
}
.pt-cat3d-card.is-active .pt-cat3d-arrow {
  transform: translateZ(40px) scale(1);
  opacity: 1;
}

/* Nav buttons */
.pt-cat3d-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--pt-line);
  background: var(--pt-surface);
  color: var(--pt-ink);
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pt-cat3d-nav:hover {
  background: var(--pt-brand);
  color: #fff;
  border-color: var(--pt-brand);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 12px 26px rgba(255,107,53,.32);
}
.pt-cat3d-prev { left: 8px; }
.pt-cat3d-next { right: 8px; }
html[data-theme="dark"] .pt-cat3d-nav {
  background: var(--pt-surface);
  border-color: var(--pt-line);
  box-shadow: 0 8px 20px rgba(0,0,0,.40);
}

/* Pagination dots */
.pt-cat3d-pagination {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 8px;
}
.pt-cat3d-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--pt-line);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, width .25s ease;
}
.pt-cat3d-dot.is-active {
  background: var(--pt-brand);
  width: 22px;
  border-radius: 999px;
}
html[data-theme="dark"] .pt-cat3d-dot { background: rgba(255,255,255,.16); }
html[data-theme="dark"] .pt-cat3d-dot.is-active { background: var(--pt-brand); }

/* Responsive */
@media (max-width: 768px) {
  .pt-cat3d-section { padding: 48px 0 64px; }
  .pt-cat3d-card { flex: 0 0 220px; padding: 28px 22px 26px; }
  .pt-cat3d-icon { width: 80px; height: 80px; border-radius: 22px; }
  .pt-cat3d-icon img { width: 46px; height: 46px; }
  .pt-cat3d-name { font-size: 17px; }
  .pt-cat3d-nav { width: 40px; height: 40px; }
  .pt-cat3d-track { gap: 20px; padding: 32px max(calc(50% - 110px), 56px) 44px; }
}
@media (max-width: 480px) {
  .pt-cat3d-card { flex: 0 0 200px; }
  .pt-cat3d-nav { display: none; }
}

/* Respect prefers-reduced-motion: fall back to a plain row with scale focus only */
@media (prefers-reduced-motion: reduce) {
  .pt-cat3d-card,
  .pt-cat3d-icon,
  .pt-cat3d-shine,
  .pt-cat3d-arrow { transition: none !important; }
  .pt-cat3d-track { scroll-behavior: auto; }
}

/* ============================================================
   Logo — make it more compact in the top header
   ============================================================ */
.header .navbar-brand,
.header .navbar-header .logo {
  max-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
}
.header .navbar-brand img,
.header .navbar-header .logo img,
.main-nav .navbar-header img {
  max-height: 40px !important;
  height: 40px !important;
  width: auto !important;
  object-fit: contain;
}
@media (max-width: 768px) {
  .header .navbar-brand img,
  .header .navbar-header .logo img { max-height: 34px !important; height: 34px !important; }
}

/* ============================================================
   USER DASHBOARD — full dark mode coverage
   .panel-style sidebar card, sidemenu links, booking cards,
   page title bar, breadcrumb.
   ============================================================ */

/* Sidebar profile card */
html[data-theme="dark"] .panel-style {
  background: var(--pt-surface) !important;
  border: 1px solid var(--pt-line) !important;
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow-1);
}
html[data-theme="dark"] .sidebar-sets {
  background: transparent !important;
  border-bottom: 1px solid var(--pt-line);
  padding: 18px;
}
html[data-theme="dark"] .info-blk-style h6,
html[data-theme="dark"] .sidebar-sets h6 { color: var(--pt-ink) !important; }
html[data-theme="dark"] .info-blk-style .text-muted,
html[data-theme="dark"] .sidebar-sets .text-muted { color: var(--pt-ink-3) !important; }

/* Sidebar menu links */
html[data-theme="dark"] .widget.settings-menu,
html[data-theme="dark"] .settings-menu { background: transparent !important; padding: 8px !important; }
html[data-theme="dark"] .settings-menu ul { padding: 0; margin: 0; list-style: none; }
html[data-theme="dark"] .settings-menu ul li a,
html[data-theme="dark"] .sidebar-setlinks ul li a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px !important;
  color: var(--pt-ink-2) !important;
  border-radius: 12px !important;
  margin: 2px 4px !important;
  transition: background var(--pt-t-fast), color var(--pt-t-fast);
  background: transparent !important;
}
html[data-theme="dark"] .settings-menu ul li a:hover,
html[data-theme="dark"] .sidebar-setlinks ul li a:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--pt-ink) !important;
}
html[data-theme="dark"] .settings-menu ul li a.active,
html[data-theme="dark"] .sidebar-setlinks ul li a.active,
html[data-theme="dark"] .settings-menu ul li.current > a {
  background: linear-gradient(90deg, rgba(255,107,53,.24) 0%, rgba(255,107,53,.12) 100%) !important;
  color: #FFB088 !important;
  box-shadow: inset 3px 0 0 var(--pt-brand);
  font-weight: 600 !important;
}
html[data-theme="dark"] .settings-menu ul li a i,
html[data-theme="dark"] .sidebar-setlinks ul li a i { width: 18px; text-align: center; }
html[data-theme="dark"] .settings-menu ul li a.active i,
html[data-theme="dark"] .sidebar-setlinks ul li a.active i { color: var(--pt-brand) !important; }

/* Booking widget card */
html[data-theme="dark"] .booking-list,
html[data-theme="dark"] .booking-widget,
html[data-theme="dark"] .bookings .booking-list {
  background: var(--pt-surface) !important;
  border: 1px solid var(--pt-line) !important;
  border-radius: var(--pt-radius) !important;
  box-shadow: var(--pt-shadow-1);
  color: var(--pt-ink);
}
html[data-theme="dark"] .booking-det-info h3,
html[data-theme="dark"] .booking-det-info h3 a,
html[data-theme="dark"] .booking-widget h3,
html[data-theme="dark"] .booking-widget h3 a {
  color: var(--pt-ink) !important;
}
html[data-theme="dark"] .booking-det-info h3 a:hover { color: var(--pt-brand) !important; }
html[data-theme="dark"] .booking-details li,
html[data-theme="dark"] .booking-details li span,
html[data-theme="dark"] .booking-det-info p,
html[data-theme="dark"] .booking-det-info span,
html[data-theme="dark"] .booking-widget p,
html[data-theme="dark"] .booking-widget span {
  color: var(--pt-ink-2) !important;
}
html[data-theme="dark"] .booking-details li strong,
html[data-theme="dark"] .booking-details li b { color: var(--pt-ink) !important; }
html[data-theme="dark"] .booking-action { background: transparent !important; }
html[data-theme="dark"] .booking-action .btn,
html[data-theme="dark"] .booking-action a.btn {
  background: var(--pt-surface-2) !important;
  color: var(--pt-ink) !important;
  border: 1px solid var(--pt-line) !important;
}
html[data-theme="dark"] .booking-action .bg-success-light {
  background: rgba(16,185,129,.18) !important;
  color: #34D399 !important;
  border-color: rgba(16,185,129,.3) !important;
}
html[data-theme="dark"] .booking-action .bg-danger-light {
  background: rgba(239,68,68,.18) !important;
  color: #F87171 !important;
  border-color: rgba(239,68,68,.3) !important;
}

/* Status badges on bookings — Cancelled / Pending / etc. */
html[data-theme="dark"] .badge.bg-cancel,
html[data-theme="dark"] .badge.bg-danger,
html[data-theme="dark"] .booking-det-info .badge.bg-danger {
  background: rgba(239,68,68,.22) !important;
  color: #FCA5A5 !important;
}

/* Page title bar ("Le mie prenotazioni") + breadcrumb */
html[data-theme="dark"] .breadcrumb-bar,
html[data-theme="dark"] .breadcrumb-bar .breadcrumb-title,
html[data-theme="dark"] .breadcrumb-bar h2,
html[data-theme="dark"] .breadcrumb-bar h4 {
  background: transparent !important;
  color: var(--pt-ink) !important;
}
html[data-theme="dark"] .breadcrumb-bar .breadcrumb,
html[data-theme="dark"] .page-breadcrumb,
html[data-theme="dark"] .breadcrumb-set { background: transparent !important; }
html[data-theme="dark"] .breadcrumb .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-set li,
html[data-theme="dark"] .breadcrumb-set a,
html[data-theme="dark"] .breadcrumb-bar a { color: var(--pt-ink-3) !important; }
html[data-theme="dark"] .breadcrumb-bar a:hover { color: var(--pt-brand) !important; }
html[data-theme="dark"] .breadcrumb-bar .active,
html[data-theme="dark"] .breadcrumb-bar [aria-current] { color: var(--pt-ink) !important; }

/* Widget title */
html[data-theme="dark"] .widget-title,
html[data-theme="dark"] h4.widget-title { color: var(--pt-ink) !important; }

/* Filter dropdown ("Tutto") in booking list */
html[data-theme="dark"] .booking-filter select,
html[data-theme="dark"] .filter-dropdown select,
html[data-theme="dark"] .booking-search select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] select.form-select {
  background-color: #131B2B !important;
  color: var(--pt-ink) !important;
  border-color: var(--pt-line) !important;
}

/* Provider sidemenu too (same classes apply, but be safe) */
html[data-theme="dark"] .pannel,
html[data-theme="dark"] .pannel.profile-sidebar,
html[data-theme="dark"] .profile-sidebar {
  background: var(--pt-surface) !important;
  border-color: var(--pt-line) !important;
}

/* Empty state */
html[data-theme="dark"] .no-booking,
html[data-theme="dark"] .no-orders,
html[data-theme="dark"] .no-content-col {
  background: var(--pt-surface) !important;
  color: var(--pt-ink-3) !important;
  border: 1px dashed var(--pt-line) !important;
}

/* Reviews, payments, billing, password panels — they all share .panel-style or .card */
html[data-theme="dark"] .panel-style .nav-tabs,
html[data-theme="dark"] .panel-style .tab-content {
  background: transparent !important;
  border-color: var(--pt-line) !important;
}

/* Generic anchor visibility inside dark booking cards ("Clicca qui per aprire le indicazioni sulla mappa") */
html[data-theme="dark"] .booking-list a:not(.btn):not(.booking-img),
html[data-theme="dark"] .booking-widget a:not(.btn):not(.booking-img),
html[data-theme="dark"] .booking-det-info a:not(.btn) {
  color: var(--pt-brand) !important;
  text-decoration: underline;
}
html[data-theme="dark"] .booking-list a:not(.btn):not(.booking-img):hover,
html[data-theme="dark"] .booking-widget a:not(.btn):not(.booking-img):hover {
  color: #FFB088 !important;
}

/* Hero "3+ oggetti" badge — bg uses var(--pt-ink) which in dark mode
   resolves to a light color, making the pill near-white. Force a dark
   frosted-glass look in dark mode. */
html[data-theme="dark"] .hero-badge {
  background: rgba(15,22,38,.72) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
html[data-theme="dark"] .hero-badge i { color: var(--pt-accent) !important; }
html[data-theme="dark"] .hero-badge strong { color: #fff !important; }
html[data-theme="dark"] .hero-badge span { color: rgba(255,255,255,.85) !important; }

/* ============================================================
   TOP HEADER — 50% transparent + frosted blur (final override)
   Placed at end of file with high specificity so nothing else
   reverts it back to opaque. Applies to both light and dark.
   ============================================================ */
body .header,
body header.header,
body .main-wrapper > .header,
body header.account-header,
body .navbar.header-nav,
body .main-nav .header-nav {
  background: rgba(255,255,255,.5) !important;
  background-color: rgba(255,255,255,.5) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}
html[data-theme="dark"] body .header,
html[data-theme="dark"] body header.header,
html[data-theme="dark"] body .main-wrapper > .header,
html[data-theme="dark"] body header.account-header,
html[data-theme="dark"] body .navbar.header-nav,
html[data-theme="dark"] body .main-nav .header-nav {
  background: rgba(27,35,51,.5) !important;
  background-color: rgba(27,35,51,.5) !important;
}

/* Same for admin */

/* ============================================================
   Unify header transparency — make ALL inner sections of the
   header share the same translucent bg. The link nav and the
   right-side icons cluster had their own opaque backgrounds.
   ============================================================ */
body .header *,
body header.header * {
  /* Selective: only set transparent on direct structural children of header */
}
body .header > .navbar,
body .header .navbar-collapse,
body .header .main-nav,
body .header .main-nav-wrapper,
body .header .main-menu-wrapper,
body .header .header-navbar-rht,
body .header > ul.user-menu,
body .header .navbar-header,
body header.header > .navbar,
body header.header .navbar-collapse,
body header.header .main-nav,
body header.header .main-nav-wrapper,
body header.header .main-menu-wrapper,
body header.header .header-navbar-rht,
body header.header > ul.user-menu,
body header.header .navbar-header {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hide the small seal/favicon logo in the user navbar too */
body .header .navbar-brand.logo-small,
body header.header .navbar-brand.logo-small,
body .main-nav .navbar-brand.logo-small,
body .navbar-header .navbar-brand.logo-small {
  display: none !important;
}

/* ============================================================
   CATEGORY 3D — pinned scroll variant (v2)
   - Adds a section title
   - Section is tall (200vh); inner stage is sticky and stays
     pinned while the user scrolls the page vertically
   - Page scroll progress drives the track's horizontal scroll
   - Manual horizontal scroll, click-to-center, and prev/next
     buttons still work normally
   ============================================================ */

.pt-cat3d-pinned {
  height: 220vh;          /* outer tall container — drives the scroll mapping */
  padding: 0 !important;
  position: relative;
}
.pt-cat3d-pin-wrap {
  position: sticky;
  top: 64px;              /* below the fixed/sticky header */
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;       /* clip the off-screen cards cleanly */
}

/* Section title block */
.pt-cat3d-header {
  text-align: center;
  margin: 0 auto 24px;
  max-width: 720px;
  padding: 0 24px;
}
.pt-cat3d-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--pt-brand);
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,107,53,.12);
  margin-bottom: 14px;
}
.pt-cat3d-title {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--pt-ink);
  margin: 0 0 10px;
  line-height: 1.1;
}
.pt-cat3d-sub {
  font-size: 16px;
  color: var(--pt-ink-3);
  margin: 0;
  line-height: 1.5;
}
html[data-theme="dark"] .pt-cat3d-title { color: var(--pt-ink); }
html[data-theme="dark"] .pt-cat3d-eyebrow {
  color: var(--pt-brand);
  background: rgba(255,107,53,.18);
}

/* Override the .pt-cat3d-stage to take available height */
.pt-cat3d-pinned .pt-cat3d-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* When the section is tall, the track needs more breathing room
   for the perspective to feel immersive */
.pt-cat3d-pinned .pt-cat3d-track {
  scroll-snap-type: none; /* let JS drive the scroll position */
  padding-top: 60px;
  padding-bottom: 80px;
}

/* Horizontal progress bar at bottom of pinned area */
.pt-cat3d-progress {
  width: min(60%, 480px);
  height: 4px;
  margin: 14px auto 0;
  background: rgba(127,127,127,.18);
  border-radius: 999px;
  overflow: hidden;
}
.pt-cat3d-progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--pt-brand), var(--pt-accent));
  transform: scaleX(0);
  transform-origin: 0% 50%;
  transition: transform .12s linear;
  border-radius: inherit;
}
html[data-theme="dark"] .pt-cat3d-progress { background: rgba(255,255,255,.10); }

/* Nav buttons now anchored to the stage center so they line up with the cards */
.pt-cat3d-pinned .pt-cat3d-stage { position: relative; }

@media (max-width: 768px) {
  .pt-cat3d-pinned { height: auto; }
  .pt-cat3d-pin-wrap {
    position: relative;
    top: 0;
    height: auto;
    padding: 56px 0 64px;
  }
  .pt-cat3d-title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-cat3d-pinned { height: auto; }
  .pt-cat3d-pin-wrap { position: relative; top: 0; height: auto; padding: 56px 0; }
}

/* ============================================================
   CATEGORY 3D — scroll-jacking variant (v3)
   Replaces the pinned-sticky approach with a single-viewport
   section. Page scroll is captured via wheel/touch listeners
   (JS side) and redirected to horizontal track movement.
   ============================================================ */
.pt-cat3d-pinned {
  height: 100vh !important;     /* one viewport — no tall outer container */
  min-height: 600px;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
}
.pt-cat3d-pin-wrap {
  position: relative !important;
  top: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Buttons now anchored to a centered box, not the viewport edges */
.pt-cat3d-pinned .pt-cat3d-stage {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0 16px;
}
.pt-cat3d-pinned .pt-cat3d-prev,
.pt-cat3d-pinned .pt-cat3d-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}
.pt-cat3d-pinned .pt-cat3d-prev { left: 24px; }
.pt-cat3d-pinned .pt-cat3d-next { right: 24px; }
.pt-cat3d-pinned .pt-cat3d-prev:hover,
.pt-cat3d-pinned .pt-cat3d-next:hover {
  transform: translateY(-50%) scale(1.06);
}

/* The track still extends edge-to-edge below the boxed buttons so
   off-screen cards remain visible during the perspective transitions */
.pt-cat3d-pinned .pt-cat3d-track {
  scroll-snap-type: none;
  padding-top: 24px;
  padding-bottom: 32px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);  /* break out of the stages

/* ============================================================
   CATEGORY 3D — scroll-jacking variant (v3)
   Replaces the pinned-sticky approach with a single-viewport
   section. Page scroll is captured via wheel/touch listeners
   (JS side) and redirected to horizontal track movement.
   ============================================================ */
.pt-cat3d-pinned {
  height: 100vh !important;
  min-height: 600px;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}
.pt-cat3d-pin-wrap {
  position: relative !important;
  top: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Buttons now anchored to a centered box, not the viewport edges */
.pt-cat3d-pinned .pt-cat3d-stage {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0 16px;
}
.pt-cat3d-pinned .pt-cat3d-prev,
.pt-cat3d-pinned .pt-cat3d-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}
.pt-cat3d-pinned .pt-cat3d-prev { left: 24px; }
.pt-cat3d-pinned .pt-cat3d-next { right: 24px; }
.pt-cat3d-pinned .pt-cat3d-prev:hover,
.pt-cat3d-pinned .pt-cat3d-next:hover {
  transform: translateY(-50%) scale(1.06);
}

/* Track extends edge-to-edge so off-screen cards remain visible
   during perspective transitions, even though the buttons are boxed */
.pt-cat3d-pinned .pt-cat3d-track {
  scroll-snap-type: none;
  padding-top: 24px;
  padding-bottom: 32px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

@media (max-width: 768px) {
  .pt-cat3d-pinned {
    height: auto !important;
    min-height: 0;
    padding: 56px 0 64px !important;
  }
  .pt-cat3d-pinned .pt-cat3d-prev,
  .pt-cat3d-pinned .pt-cat3d-next {
    position: relative;
    left: auto;
    right: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-cat3d-pinned { height: auto !important; }
}

/* ============================================================
   Ad banner slot — neutral wrapper for admin-controlled content
   ============================================================ */
.pt-ad-slot {
  padding: 32px 0;
}
.pt-ad-slot-inner {
  border-radius: var(--pt-radius);
  overflow: hidden;
  text-align: center;
  background: var(--pt-surface);
  border: 1px solid var(--pt-line);
  box-shadow: var(--pt-shadow-1);
  padding: 4px;
  min-height: 40px;
}
.pt-ad-slot-inner > * { max-width: 100%; }
.pt-ad-slot-inner img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: calc(var(--pt-radius) - 6px); }
.pt-ad-slot-inner iframe { width: 100%; min-height: 90px; border: 0; }
html[data-theme="dark"] .pt-ad-slot-inner {
  background: var(--pt-surface);
  border-color: var(--pt-line);
}

/* ============================================================
   Categories 3D — progress bar relocated under the cards
   (between cards and pagination dots). Tight grouping with
   the categories content; big margin-bottom to keep distance
   from the ad banner that follows.
   ============================================================ */
.pt-cat3d-pinned .pt-cat3d-progress {
  width: min(50%, 360px);
  height: 4px;
  margin: 20px auto 6px;
}
.pt-cat3d-pinned .pt-cat3d-pagination {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* Chat icon next to user name in dashboard sidebar */
.pt-sidebar-chat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,107,53,.10);
  color: var(--pt-brand);
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease, color 140ms ease;
  flex-shrink: 0;
}
.pt-sidebar-chat-icon:hover {
  background: var(--pt-brand);
  color: #fff;
  transform: translateY(-1px);
}
.pt-sidebar-chat-icon i {
  font-size: 16px;
}
html[data-theme="dark"] .pt-sidebar-chat-icon {
  background: rgba(255,107,53,.18);
}
html[data-theme="dark"] .pt-sidebar-chat-icon:hover {
  background: var(--pt-brand);
  color: #fff;
}
/* Make sure the sidebar-sets row wraps nicely with the new icon */
.sidebar-sets { gap: 8px; flex-wrap: wrap; }

/* ============================================================
   Role-mode pill button.
   Replaces the old icon-only role-toggle dropdown. Shows the
   current mode prominently with a colored pill so the user
   instantly sees whether they're in "Cliente" or "Pro" mode.
   Clicking opens the same dropdown to switch.
   ============================================================ */
.pt-role-pill-item {
  display: inline-flex !important;
  align-items: center;
  margin: 0 6px;
}
.pt-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  letter-spacing: .1px;
  border: 1.5px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.pt-role-pill:focus { outline: none; }
.pt-role-pill::after { display: none !important; } /* kill Bootstrap caret */
.pt-role-pill:hover { transform: translateY(-1px); }

.pt-role-pill-icon { font-size: 14px; }
.pt-role-pill-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  gap: 1px;
}
.pt-role-pill-prefix {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;
  opacity: .72;
}
.pt-role-pill-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.pt-role-pill-caret {
  font-size: 10px;
  opacity: .55;
  margin-left: 2px;
  transition: transform .15s ease;
}
.pt-role-pill[aria-expanded="true"] .pt-role-pill-caret {
  transform: rotate(180deg);
}

/* CLIENTE = neutral surface, accent on hover */
.pt-role-pill--client {
  background: rgba(15, 23, 42, .06);
  color: var(--pt-ink, #0f172a);
  border-color: rgba(15, 23, 42, .10);
}
.pt-role-pill--client:hover,
.pt-role-pill--client[aria-expanded="true"] {
  background: rgba(15, 23, 42, .10);
  color: var(--pt-ink, #0f172a);
  border-color: rgba(15, 23, 42, .18);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

/* PROFESSIONISTA = brand orange (the work-mode signal) */
.pt-role-pill--pro {
  background: linear-gradient(135deg, var(--pt-brand, #FF6B35), #FF8A5C);
  color: #fff !important;
  border-color: rgba(255, 107, 53, .35);
  box-shadow: 0 4px 16px rgba(255, 107, 53, .35);
}
.pt-role-pill--pro:hover,
.pt-role-pill--pro[aria-expanded="true"] {
  background: linear-gradient(135deg, #FF5722, #FF6B35);
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(255, 107, 53, .45);
}
.pt-role-pill--pro .pt-role-pill-prefix { opacity: .85; }
.pt-role-pill--pro .pt-role-pill-caret { opacity: .85; }

/* Dark theme adjustments */
html[data-theme="dark"] .pt-role-pill--client {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .pt-role-pill--client:hover,
html[data-theme="dark"] .pt-role-pill--client[aria-expanded="true"] {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border-color: rgba(255, 255, 255, .20);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

/* Dropdown menu styling — keep consistent with other header dropdowns */
.pt-role-pill-menu {
  margin-top: 10px;
  min-width: 240px;
  border-radius: 14px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
}
html[data-theme="dark"] .pt-role-pill-menu {
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.pt-role-pill-menu .dropdown-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px 8px;
}
.pt-role-pill-menu .dropdown-item {
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
}
.pt-role-pill-menu .dropdown-item.active {
  background: rgba(255, 107, 53, .10);
  color: var(--pt-brand, #FF6B35);
}
html[data-theme="dark"] .pt-role-pill-menu .dropdown-item.active {
  background: rgba(255, 107, 53, .18);
}

/* Responsive: shrink on smaller screens — hide "Modalità" prefix first,
   then drop to icon-only at phone widths. */
@media (max-width: 991px) {
  .pt-role-pill-prefix { display: none; }
  .pt-role-pill-text { flex-direction: row; }
}
@media (max-width: 575px) {
  .pt-role-pill-label { display: none; }
  .pt-role-pill-caret { display: none; }
  .pt-role-pill { padding: 8px 10px; }
}

/* ============================================================
   Role pill — v2 refinements:
   - Remove leading icon
   - Remove dropdown caret arrow
   - Differentiate "Modalità" (muted) from the mode label (accent)
   ============================================================ */

/* Hide leading icon */
.pt-role-pill .pt-role-pill-icon { display: none !important; }

/* Hide dropdown caret arrow */
.pt-role-pill .pt-role-pill-caret { display: none !important; }

/* Layout: keep text inline, single row, even tighter pill */
.pt-role-pill .pt-role-pill-text {
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px;
}
.pt-role-pill { padding: 8px 16px !important; }

/* "Modalità" prefix — small, muted, no uppercase */
.pt-role-pill .pt-role-pill-prefix {
  display: inline !important;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: rgba(15, 23, 42, .55);
}

/* Mode label — colored, bold */
.pt-role-pill .pt-role-pill-label {
  display: inline !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* CLIENTE — neutral surface, orange brand label */
.pt-role-pill--client .pt-role-pill-label {
  color: var(--pt-brand, #FF6B35);
}

/* PROFESSIONISTA — orange pill stays, but make prefix a softer white
   so the label "Professionista" pops vs the muted "Modalità" word */
.pt-role-pill--pro .pt-role-pill-prefix {
  color: rgba(255, 255, 255, .70);
}
.pt-role-pill--pro .pt-role-pill-label {
  color: #fff;
}

/* Dark theme tweaks */
html[data-theme="dark"] .pt-role-pill--client .pt-role-pill-prefix {
  color: rgba(255, 255, 255, .55);
}
html[data-theme="dark"] .pt-role-pill--client .pt-role-pill-label {
  color: var(--pt-brand, #FF6B35);
}

/* Make sure prefix doesn't get hidden by old responsive rule */
@media (max-width: 991px) {
  .pt-role-pill .pt-role-pill-prefix { display: inline !important; }
}
@media (max-width: 575px) {
  .pt-role-pill .pt-role-pill-prefix { display: none !important; }
}

/* PT fix: frecce categorie non sovrapposte alle card */
#pt-cat3d-section .pt-cat3d-track{ margin-left:0 !important; margin-right:0 !important; padding-left:96px !important; padding-right:96px !important; }
#pt-cat3d-section .pt-cat3d-prev{ left:24px !important; }
#pt-cat3d-section .pt-cat3d-next{ right:24px !important; }

/* PT fix: badge categoria nelle card non deve toccare/sforare il bordo destro */
.feature-img .feature-bottom{ right:24px !important; }