/* ═══════════════════════════════════════════════════════════════
   Chiaia Client Portal – Frontend CSS
   Typography: IBM Plex Sans + Bebas Neue | Style: Editorial B/W
   ═══════════════════════════════════════════════════════════════ */

/* Google Fonts loaded via wp_enqueue_style (faster than @import) */

/* Color tokens are defined in theme-tokens.css (loaded first via enqueue
   dependency). Here we only declare the font tokens local to portal.css. */
:root {
  --ccp-font:    'IBM Plex Sans', Arial, sans-serif;
  --ccp-sans:    'IBM Plex Sans', Arial, sans-serif;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PORTAL PAGE — BODY OVERRIDES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Hide the hello-elementor theme page title on portal pages */
body.ccp-portal-active .page-header { display: none !important; }

/* Dark page body for portal pages (sidebar + bottom) */
body.ccp-portal-active { background: var(--ccp-bg-base) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE RESET
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-dashboard *,
.ccp-login-wrap * {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  box-sizing: border-box;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGIN PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Honeypot – visually off-screen (NOT display:none — bots ignore that) */
.ccp-hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.ccp-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ccp-bg-base);
  padding: 40px 16px;
}
.ccp-login-box {
  background: var(--ccp-bg-surface);
  width: 100%;
  max-width: 400px;
  padding: 56px 48px;
}
.ccp-login-logo {
  text-align: center;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--ccp-gray-2);
  padding-bottom: 32px;
}
.ccp-login-logo-img {
  display: block;
  margin: 0 auto 16px;
  height: 48px;
  width: auto;
  object-fit: contain;
}
.ccp-login-subtitle {
  margin: 6px 0 0;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 12px;
  color: var(--ccp-gray-3);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 1px;
}
.ccp-login-error {
  background: var(--ccp-danger-soft);
  color: var(--ccp-danger);
  padding: 12px 16px;
  border-left: 3px solid var(--ccp-danger);
  font-size: 13px;
  margin-bottom: 24px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
}
.ccp-login-field { margin-bottom: 20px; }
.ccp-login-field label {
  display: block;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ccp-gray-3);
  margin-bottom: 8px;
}
.ccp-login-field input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--ccp-gray-2);
  border-radius: 0;
  font-size: 14px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-weight: 400;
  color: var(--ccp-black);
  background: var(--ccp-bg-surface);
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.ccp-login-field input:focus {
  border-color: var(--ccp-black);
  outline: none;
}
/* Password toggle eye */
.ccp-pass-wrap {
  position: relative;
}
.ccp-pass-wrap input {
  padding-right: 48px;
}
.ccp-pass-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: opacity 0.2s;
}
.ccp-pass-toggle:hover,
.ccp-pass-toggle:focus,
.ccp-pass-toggle:active {
  opacity: 0.9;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.ccp-login-btn {
  width: 100% !important;
  padding: 16px !important;
  background: var(--ccp-bg-base) !important;
  color: var(--ccp-text-primary) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Bebas Neue', cursive !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  margin-top: 8px !important;
  box-shadow: none !important;
}
.ccp-login-btn:hover { background: var(--ccp-bg-hover) !important; }
.ccp-register-toggle-btn {
  width: 100% !important;
  padding: 14px 16px !important;
  background: transparent !important;
  color: var(--ccp-text-primary) !important;
  border: 1.5px solid var(--ccp-bg-base) !important;
  border-radius: 0 !important;
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
  margin-top: 8px !important;
  display: block !important;
  text-align: center !important;
  box-shadow: none !important;
}
.ccp-register-toggle-btn:hover {
  background: var(--ccp-bg-base) !important;
  color: var(--ccp-text-primary) !important;
}
.ccp-login-help {
  text-align: center;
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--ccp-gray-3);
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-weight: 300;
}
.ccp-login-help a { color: var(--ccp-black); font-weight: 500; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORGOT PASSWORD
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-forgot-link {
  text-align: right;
  margin: -12px 0 16px;
}
.ccp-forgot-link a {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--ccp-gray-3);
  text-decoration: none;
  transition: color 0.2s;
}
.ccp-forgot-link a:hover {
  color: var(--ccp-black);
}
.ccp-forgot-desc {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--ccp-gray-3);
  line-height: 1.6;
  margin: 0 0 24px;
}
.ccp-forgot-success {
  background: var(--ccp-green-soft);
  color: var(--ccp-green);
  padding: 12px 16px;
  border-left: 3px solid var(--ccp-green);
  border-radius: 4px;
  font-size: 13px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  margin: 16px 0 0;
  line-height: 1.5;
}
.ccp-forgot-back {
  text-align: center;
  margin: 16px 0 0;
}
.ccp-forgot-back a {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--ccp-gray-3);
  text-decoration: none;
  transition: color 0.2s;
}
.ccp-forgot-back a:hover {
  color: var(--ccp-black);
}
.ccp-login-success {
  background: var(--ccp-green-soft);
  color: var(--ccp-green);
  padding: 12px 16px;
  border-left: 3px solid var(--ccp-green);
  border-radius: 4px;
  font-size: 13px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  margin-bottom: 24px;
  line-height: 1.5;
}
.ccp-reset-heading {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ccp-black);
  margin: 0 0 24px;
  text-align: center;
}
.ccp-pwd-hint {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 11px;
  color: var(--ccp-gray-3);
  font-weight: 300;
  margin: -12px 0 20px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REGISTER FORM WRAP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#ccp-register-form-wrap {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ccp-gray-2);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REGISTRATION FORM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-register-form { display: none; }
.ccp-login-field-row {
  display: flex;
  gap: 12px;
}
.ccp-login-field-row .ccp-login-field { flex: 1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GOOGLE BUTTON
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: var(--ccp-gray-3);
  letter-spacing: 1px;
  text-transform: lowercase;
}
.ccp-login-divider::before,
.ccp-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ccp-gray-2);
}
.ccp-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  background: var(--ccp-bg-surface);
  border: 1px solid var(--ccp-gray-2);
  border-radius: 0;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ccp-black);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 4px;
}
.ccp-google-btn:hover {
  border-color: var(--ccp-black);
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  color: var(--ccp-black);
  text-decoration: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DASHBOARD – Sidebar Layout
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-dashboard {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  color: var(--ccp-black);
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  background: var(--ccp-bg-base);
}
.ccp-content-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--ccp-bg-base);
}

/* ── Sidebar ── */
.ccp-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--ccp-bg-base);
  color: var(--ccp-text-primary);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
}
.ccp-sidebar-brand {
  padding: 22px 20px 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ccp-sidebar-logo-img {
  max-width: 110px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* Logout – top of sidebar */
.ccp-sidebar-logout-top {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25) !important;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
  padding: 4px 0;
  background: transparent !important;
  border: none !important;
}
.ccp-sidebar-logout-top:hover { color: rgba(255,255,255,0.65) !important; text-decoration: none !important; }
.ccp-sidebar-couple {
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ccp-sidebar-couple-name {
  font-family: 'Bebas Neue', cursive;
  font-size: 18px;
  color: var(--ccp-text-primary);
  letter-spacing: 2px;
  line-height: 1.2;
}
.ccp-sidebar-couple-meta {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-weight: 300;
  margin-top: 5px;
  letter-spacing: 0.3px;
}
.ccp-sidebar-nav {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.ccp-sidebar-nav li { margin: 0; padding: 0; }
.ccp-sidebar-link {
  display: block;
  padding: 10px 24px;
  font-family: 'Bebas Neue', cursive !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-decoration: none !important;
  border-left: 3px solid transparent;
  transition: color 0.2s, background 0.2s, border-left-color 0.2s, transform 0.15s ease;
}
.ccp-sidebar-link:hover {
  color: var(--ccp-gold) !important;
  border-left-color: var(--ccp-gold) !important;
  background: rgba(201,169,110,0.10) !important;
  text-decoration: none !important;
  transform: translateX(3px) !important;
}
.ccp-sidebar-link.active {
  color: var(--ccp-gold) !important;
  border-left-color: var(--ccp-gold) !important;
  background: rgba(196,162,88,0.12);
  text-decoration: none !important;
}
/* Account utility link in sidebar */
.ccp-sidebar-account { margin: 12px 0 0; }
.ccp-sidebar-link--account {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  color: rgba(255,255,255,0.3) !important;
  padding: 8px 24px !important;
}
.ccp-sidebar-link--account:hover { color: rgba(255,255,255,0.7) !important; }

/* ── Client tab bar ── */
.ccp-cl-tabbar {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--ccp-border-soft);
  background: var(--ccp-bg-base);
  position: sticky;
  top: 44px;
  z-index: 50;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
}
.ccp-cl-tabbar::-webkit-scrollbar { display: none; }
.ccp-cl-tabbar-link {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  height: 46px;
  font-family: 'Bebas Neue', cursive;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.ccp-cl-tabbar-link:hover { color: var(--ccp-text-primary); }
.ccp-cl-tabbar-link.active {
  color: var(--ccp-gold);
  border-bottom-color: var(--ccp-gold);
}

/* CTA buttons area */
.ccp-sidebar-cta {
  padding: 14px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 6px;
}

/* WhatsApp button */
.ccp-sidebar-whatsapp {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: 100%;
  background: var(--ccp-wa-green) !important;
  color: var(--ccp-text-primary) !important;
  text-decoration: none !important;
  padding: 10px 13px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.15s;
  line-height: 1.2;
  border: none !important;
  box-sizing: border-box;
}
.ccp-sidebar-whatsapp svg { flex-shrink: 0; }
.ccp-sidebar-whatsapp:hover {
  background: var(--ccp-wa-green-hover) !important;
  color: var(--ccp-text-primary) !important;
  text-decoration: none !important;
  transform: translateX(3px);
}

/* Book a Call button */
.ccp-sidebar-bookcall {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  width: 100%;
  border: 1px solid rgba(196,162,88,0.45) !important;
  color: var(--ccp-gold) !important;
  text-decoration: none !important;
  padding: 10px 13px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  line-height: 1.2;
  background: transparent !important;
  box-sizing: border-box;
}
.ccp-sidebar-bookcall svg { flex-shrink: 0; stroke: var(--ccp-gold); transition: stroke 0.2s; }
.ccp-sidebar-bookcall:hover {
  background: var(--ccp-gold) !important;
  border-color: var(--ccp-gold) !important;
  color: var(--ccp-text-primary) !important;
  text-decoration: none !important;
  transform: translateX(3px);
}
.ccp-sidebar-bookcall:hover svg { stroke: var(--ccp-text-primary); }

/* Logout link in CTA section */
.ccp-sidebar-logout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.55) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  text-decoration: none !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 13px;
  border-radius: 7px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  box-sizing: border-box;
}
.ccp-sidebar-logout:hover {
  background: rgba(255,255,255,0.10) !important;
  color: var(--ccp-text-primary) !important;
  border-color: rgba(255,255,255,0.35) !important;
  text-decoration: none !important;
}

/* ── Mobile toggle ── */
/* ═══ MOBILE TOGGLE BAR ═══
   Editorial top bar on mobile: section title centered, hamburger icon on the right.
   The label dynamically reflects the currently active section (synced via JS).
   The hamburger morphs into an X when the menu is open. No pulsing animations —
   intentionally calm/professional.
   Visible only at <= 768px (set via @media further down). */
.ccp-sidebar-toggle {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  width: 100%;
  height: 56px;
  padding: 0 20px !important;
  margin: 0 !important;
  background: var(--ccp-bg-raised) !important;
  border: none !important;
  border-bottom: 1px solid var(--ccp-border-soft) !important;
  outline: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 6px 18px -10px rgba(0,0,0,.35) !important;
  cursor: pointer;
  flex-direction: row;
  justify-content: center;       /* label sits dead center */
  align-items: center;
  gap: 12px;
  -webkit-tap-highlight-color: transparent;
}
/* The hamburger is absolutely positioned on the right so the label can be perfectly
   centered without being shifted by the icon's width. */
.ccp-sidebar-toggle .ccp-toggle-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.ccp-toggle-label {
  display: inline-block;
  max-width: calc(100% - 88px);  /* leave room for hamburger + padding */
  font-family: 'Bebas Neue', cursive !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 3.5px !important;
  color: var(--ccp-text-primary) !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-decoration: none !important;
  animation: none !important;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The .ccp-toggle-arrow span is repurposed as a minimalist 2-line hamburger icon
   that morphs into an X when the menu is open. The original "▼" unicode character
   inside the span is hidden via font-size:0. Two lines drawn as ::before / ::after. */
.ccp-toggle-arrow {
  display: inline-block;
  width: 22px;
  height: 14px;
  position: relative;
  font-size: 0 !important;
  color: var(--ccp-text-primary) !important;
  background: none !important;
  animation: none !important;
  transition: color .2s ease;
}
.ccp-toggle-arrow::before,
.ccp-toggle-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1);
}
.ccp-toggle-arrow::before { top: 4px; }
.ccp-toggle-arrow::after  { top: 10px; }
/* Hamburger → X morph when open */
.ccp-sidebar-toggle.ccp-toggle-active .ccp-toggle-arrow::before {
  top: 6px;
  transform: rotate(45deg);
}
.ccp-sidebar-toggle.ccp-toggle-active .ccp-toggle-arrow::after {
  top: 6px;
  transform: rotate(-45deg);
}
.ccp-sidebar-toggle:hover .ccp-toggle-arrow,
.ccp-sidebar-toggle:focus-visible .ccp-toggle-arrow {
  color: var(--ccp-gold) !important;
}
.ccp-sidebar-toggle:focus-visible {
  outline: 2px solid var(--ccp-gold) !important;
  outline-offset: -2px;
}

/* Backdrop with subtle blur when sidebar is open */
.ccp-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 290;
  animation: ccp-backdrop-fade .25s ease;
}
.ccp-sidebar-backdrop.active { display: block; }
@keyframes ccp-backdrop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Main ── */
.ccp-dash-main {
  flex: 1;
  min-width: 0;
  max-width: none;
  padding: 0 36px 80px;
  background: var(--ccp-bg-base);
}

/* ── Profile form ── */
.ccp-profile-group-title {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ccp-gray-3);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ccp-gray-2);
}
.ccp-form-field-full { grid-column: 1 / -1; }
.ccp-profile-section select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--ccp-gray-2);
  background: var(--ccp-bg-surface);
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 14px;
  color: var(--ccp-black);
  -webkit-appearance: none;
  appearance: none;
}
/* Single-column form layout for profile */
.ccp-form-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}
/* Radio group */
.ccp-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}
.ccp-radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 14px;
  color: var(--ccp-black);
  cursor: pointer;
}
.ccp-radio-label input[type="radio"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--ccp-gray-3) !important;
  border-radius: 50% !important;
  background: var(--ccp-bg-surface) !important;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ccp-radio-label input[type="radio"]:checked {
  border-color: var(--ccp-text-primary) !important;
  background: var(--ccp-text-primary) !important;
  box-shadow: inset 0 0 0 4px var(--ccp-bg-surface) !important;
}
/* Inline radio group (language selector) */
.ccp-radio-group-inline {
  flex-direction: row;
  gap: 28px;
}

/* Custom phone prefix picker */
.ccp-prefix-picker {
  position: relative;
  flex-shrink: 0;
}
.ccp-prefix-trigger {
  height: 100%;
  min-height: 44px;
  padding: 0 12px;
  background: var(--ccp-gray-1);
  border: 1px solid var(--ccp-gray-2);
  border-right: none;
  border-radius: 0;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ccp-black);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.ccp-prefix-trigger:hover { background: var(--ccp-gray-2); }
.ccp-prefix-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 300;
  background: var(--ccp-bg-surface);
  border: 1px solid var(--ccp-gray-2);
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.ccp-prefix-option {
  padding: 9px 14px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 13px;
  color: var(--ccp-black);
  cursor: pointer;
  transition: background 0.1s;
}
.ccp-prefix-option:hover,
.ccp-prefix-option.selected {
  background: var(--ccp-gray-1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FULL-WIDTH OVERRIDE ON PORTAL PAGES
   Strip all theme container constraints so .ccp-dashboard
   can stretch edge-to-edge.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.ccp-portal-active #page,
body.ccp-portal-active #content,
body.ccp-portal-active #primary,
body.ccp-portal-active main,
body.ccp-portal-active article,
body.ccp-portal-active .site-content,
body.ccp-portal-active .entry-content,
body.ccp-portal-active .entry-content > *,
body.ccp-portal-active .wp-block-group,
body.ccp-portal-active .wp-block-group__inner-container,
body.ccp-portal-active .container,
body.ccp-portal-active .container-fluid,
body.ccp-portal-active .elementor-section-boxed > .elementor-container,
body.ccp-portal-active .e-con-inner,
body.ccp-portal-active .wp-site-blocks,
body.ccp-portal-active footer,
body.ccp-portal-active .site-footer {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Kill any Elementor section/container padding that creates white space */
body.ccp-portal-active .elementor-section,
body.ccp-portal-active .elementor-element,
body.ccp-portal-active .e-con,
body.ccp-portal-active .e-con-inner,
body.ccp-portal-active .elementor-widget-wrap,
body.ccp-portal-active .elementor-widget {
  padding: 0 !important;
  margin: 0 !important;
}
body.ccp-portal-active footer,
body.ccp-portal-active .site-footer {
  display: none !important;
}
.ccp-dashboard {
  width: 100%;
  margin-top: 0 !important;
}
/* Nuclear: any element between body and .ccp-dashboard gets zero spacing */
body.ccp-portal-active > *:not(script):not(style):not(link) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HIDE THEME HEADER ON PORTAL PAGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.ccp-portal-active header,
body.ccp-portal-active .site-header,
body.ccp-portal-active #masthead,
body.ccp-portal-active #header,
body.ccp-portal-active .main-navigation,
body.ccp-portal-active nav.navbar,
body.ccp-portal-active .navbar,
body.ccp-portal-active .top-bar,
body.ccp-portal-active #top-bar,
body.ccp-portal-active .header-wrapper,
body.ccp-portal-active .header-container {
  display: none !important;
}
/* Remove ALL spacing from body, html, theme, admin bar */
body.ccp-portal-active.logged-in #wpadminbar { display: none !important; }
html body.ccp-portal-active {
  padding: 0 !important;
  margin: 0 !important;
}
/* Kill ALL top spacing from any ancestor of .ccp-dashboard */
body.ccp-portal-active #page,
body.ccp-portal-active #content,
body.ccp-portal-active #primary,
body.ccp-portal-active main,
body.ccp-portal-active article,
body.ccp-portal-active .site-main,
body.ccp-portal-active .page-content,
body.ccp-portal-active .hentry,
body.ccp-portal-active .type-page,
body.ccp-portal-active .elementor-page,
body.ccp-portal-active [data-elementor-type],
body.ccp-portal-active .elementor-location-single,
body.ccp-portal-active .elementor > .elementor-inner,
body.ccp-portal-active .elementor > .elementor-inner > .elementor-section-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Vendor cards (client portal) ── */
.ccp-vendors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ccp-vendor-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(201,169,110,.15); border-radius: 8px; }
.ccp-vendor-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ccp-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Bebas Neue', cursive; font-size: 18px; color: var(--ccp-text-primary); font-weight: 700; }
.ccp-vendor-info { min-width: 0; }
.ccp-vendor-name { display: block; font-size: 14px; color: var(--ccp-text-primary); font-weight: 600; }
.ccp-vendor-cat { display: block; font-size: 11px; color: var(--ccp-gold); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .ccp-dashboard, .ccp-wp-dashboard { display: block; }
  .ccp-content-wrap { display: block; }
  /* Mobile sidebar: full-width drawer that slides down from below the toggle bar.
     Uses max-height + opacity for smooth perceived motion. The 56px top reserves
     space for the toggle bar so the drawer sits flush below it. */
  .ccp-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
    z-index: 300;
    padding-top: 0;
    box-shadow: 0 12px 24px -8px rgba(0,0,0,.4);
  }
  .ccp-sidebar.ccp-sidebar-open {
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    opacity: 1;
  }
  .ccp-sidebar-brand { display: none; } /* hide logo in mobile drawer */
  .ccp-sidebar-couple { padding: 14px 24px 10px; }
  .ccp-sidebar-toggle { display: flex; justify-content: flex-start; padding-left: 18px !important; }
  /* Mobile: slim header with hamburger LEFT, bell + lang switch overlaid RIGHT via .ccp-topbar.
     The "MENU" centered label is hidden — the drawer itself is the menu. */
  .ccp-toggle-label { display: none !important; }
  .ccp-sidebar-toggle .ccp-toggle-arrow { position: relative; right: auto; top: auto; transform: none; }
  .ccp-dash-main { padding: 72px 20px 60px; } /* top padding clears the 56px toggle bar */
  .ccp-section { padding: 0 12px 20px; }
  .ccp-banner-area { margin: 0 -32px; padding: 12px 32px 0; }
  .ccp-section-title { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; }
  .ccp-moodboard-body { margin: 0 -32px !important; padding-left: 32px !important; padding-right: 32px !important; }
  /* Lock body scroll when the drawer is open to prevent background bleed-through */
  body:has(.ccp-sidebar.ccp-sidebar-open) { overflow: hidden; }
}

/* ── Header ── */
.ccp-dash-header {
  background: var(--ccp-bg-raised);
  color: var(--ccp-text-primary);
  padding: 56px 48px;
  margin: 0 -20px 56px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
}
.ccp-dash-logo-img {
  display: block;
  height: 36px;
  width: auto;
  object-fit: contain;
  margin-bottom: 16px;
  opacity: 0.85;
}
.ccp-dash-couple {
  margin: 0 0 8px;
  font-family: 'Bebas Neue', 'Arial Black', sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  color: var(--ccp-text-primary);
  letter-spacing: -1px;
}
.ccp-dash-wedding-info {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1px;
  font-style: italic;
}
.ccp-logout {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 16px;
  transition: all 0.2s;
  white-space: nowrap;
}
.ccp-logout:hover { color: var(--ccp-text-primary); border-color: rgba(255,255,255,0.5); }

/* ── Sections ──
   Desktop: dash-main has 36px padding, section adds 16px → title/banner compensate with 52px
   Tablet ≤1024px: dash-main 20px + section 12px → 32px
   Mobile ≤480px: dash-main 16px + section 0px → 16px (no change)
*/
.ccp-section { margin-bottom: 56px; background: var(--ccp-bg-surface); padding: 0 16px 24px; }
.ccp-section.ccp-accordion { margin-bottom: 2px !important; padding-bottom: 0 !important; }
.ccp-section.ccp-accordion > .ccp-section-title { margin-bottom: 0 !important; }
.ccp-section-title {
  font-family: 'Bebas Neue', 'Arial Black', sans-serif !important;
  font-size: 28px;
  font-weight: 700;
  font-style: normal !important;
  letter-spacing: 0.5px;
  color: var(--ccp-text-primary);
  background: var(--ccp-bg-base);
  margin: 0 -52px 28px;
  padding: 16px 52px;
  border-bottom: none;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ccp-section-title > * {
  font-family: inherit !important;
  font-style: normal !important;
}
h2.ccp-section-title {
  font-family: 'Bebas Neue', 'Arial Black', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
/* Unread messages badge */
.ccp-unread-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 4px 12px;
  background: var(--ccp-danger);
  color: var(--ccp-text-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 3px;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  animation: ccp-pulse 2s ease-in-out infinite;
  white-space: nowrap;
}
.ccp-unread-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: var(--ccp-bg-surface);
}
.ccp-unread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(255,255,255,0.25);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
}
@keyframes ccp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@media (max-width: 600px) {
  .ccp-unread-badge {
    font-size: 9px;
    padding: 3px 8px;
    letter-spacing: 1px;
  }
}
/* ── Notification Bell (sidebar) ── */
/* ── Top Bar (notification bell) ── */
.ccp-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--ccp-bg-base);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px;
}
.ccp-notif-bell {
  position: relative;
}
.ccp-notif-bell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--ccp-gold) !important;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: color 0.2s;
  position: relative;
}
.ccp-notif-bell-btn:hover {
  color: var(--ccp-gold-hover) !important;
}
.ccp-notif-bell-btn svg {
  display: block;
  flex-shrink: 0;
  stroke: var(--ccp-gold) !important;
  fill: none !important;
  width: 22px;
  height: 22px;
}
.ccp-notif-bell-btn:hover svg {
  stroke: var(--ccp-gold-hover) !important;
}
.ccp-notif-bell-badge {
  position: absolute;
  top: -1px;
  right: -4px;
  background: var(--ccp-danger);
  color: #fff; /* always white on dark-red: correct in both dark and light themes */
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
  border: 2px solid var(--ccp-bg); /* adapts: dark ring in dark mode, light ring in light mode */
}
/* ── Notification Dropdown (dark theme) ── */
.ccp-notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 360px;
  max-height: 440px;
  background: var(--ccp-bg-surface);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 9999;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid rgba(201,169,110,0.15);
}
.ccp-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ccp-notif-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ccp-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Bebas Neue', 'IBM Plex Sans', sans-serif;
  font-size: 16px;
}
.ccp-notif-mark-all {
  background: none;
  border: none;
  color: var(--ccp-gold);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
  white-space: nowrap;
}
.ccp-notif-mark-all:hover {
  color: var(--ccp-gold-hover);
  text-decoration: underline;
}
.ccp-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 370px;
  overflow-y: auto;
}
.ccp-notif-list::-webkit-scrollbar { width: 4px; }
.ccp-notif-list::-webkit-scrollbar-track { background: transparent; }
.ccp-notif-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.ccp-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.15s;
}
.ccp-notif-item:last-child { border-bottom: none; }
.ccp-notif-item:hover {
  background: rgba(255,255,255,0.05);
}
.ccp-notif-item--unread {
  background: rgba(201,169,110,0.06);
  border-left: 3px solid var(--ccp-gold);
}
.ccp-notif-item--read {
  opacity: 0.55;
}
.ccp-notif-dot {
  display: block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--ccp-gold);
  margin-top: 7px;
  flex-shrink: 0;
}
.ccp-notif-body {
  flex: 1;
  min-width: 0;
}
.ccp-notif-text {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.45;
  word-break: break-word;
}
.ccp-notif-text strong {
  color: var(--ccp-text-primary);
  font-weight: 600;
}
.ccp-notif-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-top: 4px;
}
.ccp-notif-empty {
  padding: 40px 18px;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
}
.ccp-notif-loading {
  padding: 30px 18px;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
}
@media (max-width: 768px) {
  .ccp-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: auto;
    height: 48px;
    z-index: 450;
    background: transparent;
    padding: 0 14px;
    margin: 0;
  }
  .ccp-notif-dropdown {
    position: fixed;
    top: 52px;
    left: 12px;
    right: 12px;
    min-width: auto;
    max-height: 65vh;
    margin-top: 0;
  }
}
.ccp-section-title::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: var(--ccp-gold, var(--ccp-gold));
}

/* ── Section info tooltip ── */
.ccp-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,169,110,0.5);
  background: transparent;
  color: rgba(255,255,255,0.9);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  margin-left: 4px;
  flex-shrink: 0;
}
.ccp-info-btn:hover {
  border-color: var(--ccp-gold, var(--ccp-gold));
  background: rgba(201,169,110,0.15);
  color: var(--ccp-text-primary);
}
.ccp-info-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--ccp-bg-surface);
  border: 1px solid rgba(201,169,110,0.3);
  border-radius: 6px;
  padding: 10px 14px;
  min-width: 220px;
  max-width: 300px;
  font-family: 'IBM Plex Sans', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255,255,255,0.92);
  white-space: normal;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  pointer-events: none;
}
.ccp-info-tooltip::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 10px;
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--ccp-bg-surface);
  border-left: 1px solid rgba(201,169,110,0.3);
  border-top: 1px solid rgba(201,169,110,0.3);
}
/* Desktop: hover */
@media (hover: hover) {
  .ccp-info-btn:hover .ccp-info-tooltip { display: block; }
}
/* Mobile: toggle via .ccp-info-open */
.ccp-info-btn.ccp-info-open .ccp-info-tooltip { display: block; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   YOUR JOURNEY – Checkbox Style
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Horizontal Timeline ── */
.ccp-timeline {
  display: flex;
  flex-wrap: wrap;          /* allow 2+ rows */
  position: relative;
  overflow-x: initial;      /* no longer needs horizontal scroll */
  padding-bottom: 0;
  gap: 32px 0;              /* vertical gap between rows */
  background-image: none;   /* line removed — doesn't work with wrapping */
}
.ccp-step {
  flex: 0 0 auto;
  width: 20%;               /* 5 items/row → 2 rows for 6-9 steps */
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 0 4px;
}
.ccp-step-label {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ccp-gray-3);
  line-height: 1.35;
  text-align: center;
  min-height: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 12px;
}
.ccp-step-done .ccp-step-label {
  color: var(--ccp-black);
  font-weight: 700;
}
/* Node circle */
.ccp-step-node {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--ccp-gray-2);
  background: var(--ccp-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s;
  color: var(--ccp-text-secondary);
}
.ccp-step-done .ccp-step-node {
  background: var(--ccp-green);
  border-color: var(--ccp-green);
  color: var(--ccp-text-primary);
}
.ccp-step-pending .ccp-step-node svg {
  stroke: var(--ccp-text-muted);
}
.ccp-step-done .ccp-step-node svg {
  stroke: #fff;
}

/* ── Timeline connecting line ──
   ::before draws the horizontal track behind each step node.
   top = label min-height(36) + margin-bottom(12) + half node(26) = 74px
   The node circle has a background that covers the line naturally.
   ─────────────────────────────── */
.ccp-step::before {
  content: '';
  position: absolute;
  top: 74px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ccp-gray-2);
  z-index: -1;  /* behind node circle and label */
}
/* 5 items per row (desktop 20% width):
   - first in each row: no incoming line from left   */
.ccp-step:nth-child(5n+1)::before { left: 50%; }
/* - last in each row: no outgoing line to right     */
.ccp-step:nth-child(5n)::before   { right: 50%; }
/* - very last item: always cut right side           */
.ccp-step:last-child::before      { right: 50%; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LINKS / DELIVERIES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--ccp-bg-hover);
  border: none;
  border-radius: 8px;
  overflow: hidden;
}
.ccp-link-card {
  background: var(--ccp-bg-surface);
  padding: 36px 24px;
  text-align: center;
  transition: background 0.2s;
}
.ccp-link-card:hover { background: var(--ccp-bg-hover); }
.ccp-link-available { }
.ccp-link-waiting   { }
.ccp-link-icon  { font-size: 22px; margin-bottom: 12px; opacity: 1; color: var(--ccp-gold, var(--ccp-gold)); }
.ccp-link-icon svg { stroke: var(--ccp-gold, var(--ccp-gold)) !important; }
.ccp-link-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ccp-text-primary);
  margin-bottom: 18px;
}
.ccp-dashboard .ccp-link-btn,
.ccp-link-btn {
  display: inline-block !important;
  padding: 10px 24px !important;
  background: var(--ccp-gold, var(--ccp-gold)) !important;
  color: var(--ccp-text-primary) !important;
  text-decoration: none !important;
  font-family: 'Bebas Neue', 'IBM Plex Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  transition: background 0.2s !important;
}
.ccp-dashboard .ccp-link-btn:hover,
.ccp-link-btn:hover {
  background: var(--ccp-bg-base) !important;
  color: var(--ccp-gold, var(--ccp-gold)) !important;
  outline: 2px solid var(--ccp-gold, var(--ccp-gold)) !important;
  outline-offset: -2px;
}
/* ── COPY LINK button ─────────────────────────────────────────── */
.ccp-link-share-label {
  display: block;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-top: 14px;
  margin-bottom: 6px;
}
.ccp-copy-link-btn {
  display: inline-block !important;
  padding: 8px 22px !important;
  background: transparent !important;
  color: var(--ccp-gold) !important;
  border: 2px solid var(--ccp-gold) !important;
  border-radius: 3px !important;
  font-family: 'Bebas Neue', 'IBM Plex Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
  box-shadow: none !important;
  outline: none !important;
}
.ccp-copy-link-btn:hover {
  background: var(--ccp-gold) !important;
  color: var(--ccp-text-primary) !important;
}
.ccp-copy-link-btn--copied {
  background: var(--ccp-green-hover) !important;
  border-color: var(--ccp-green-hover) !important;
  color: var(--ccp-text-primary) !important;
}
/* ── Delivery "soon" / "in progress" text ── */
.ccp-link-soon {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}
/* ──────────────────────────────────────────────────────────────── */

.ccp-link-soon {
  font-size: 11px;
  color: var(--ccp-gray-3);
  font-style: italic;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-weight: 300;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAYMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-payments { display: flex; gap: 1px; flex-wrap: wrap; background: var(--ccp-gray-2); border: 1px solid var(--ccp-gray-2); }
.ccp-payment-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  background: var(--ccp-bg-surface);
  flex: 1;
  min-width: 180px;
}
.ccp-paid   { }
.ccp-unpaid { opacity: 0.5; }
.ccp-payment-icon { font-size: 20px; line-height: 1; }
.ccp-payment-label  { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ccp-black); margin-bottom: 4px; }
.ccp-payment-status { font-size: 12px; color: var(--ccp-gray-3); font-weight: 300; }
.ccp-payment-status a { color: var(--ccp-black); text-decoration: underline; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WEDDING INFO FORM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.ccp-form-field label {
  display: block;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ccp-black);
  margin-bottom: 8px;
}
.ccp-form-field input,
.ccp-form-field select,
.ccp-form-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--ccp-gray-2);
  border-radius: 0;
  font-size: 14px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-weight: 400;
  color: var(--ccp-black);
  background: var(--ccp-bg-surface);
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
/* Phone group in frontend forms */
.ccp-phone-group { display: flex; gap: 6px; align-items: stretch; }
.ccp-phone-group .ccp-phone-prefix { flex: 0 0 auto; width: auto; max-width: 190px; padding: 11px 8px; border: 1px solid var(--ccp-gray-2); border-right: none; background: var(--ccp-gray-1); font-family: 'IBM Plex Sans', Arial, sans-serif; font-size: 14px; -webkit-appearance: none; appearance: none; }
.ccp-phone-group input[type="tel"] { flex: 1; min-width: 0; width: auto; }

.ccp-form-field input:focus,
.ccp-form-field select:focus,
.ccp-form-field textarea:focus {
  border-color: var(--ccp-black);
  outline: none;
}
.ccp-dashboard .ccp-submit-btn,
.ccp-submit-btn {
  display: inline-block !important;
  padding: 13px 32px !important;
  background: var(--ccp-bg-base) !important;
  color: var(--ccp-text-primary) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: normal !important;
}
.ccp-dashboard .ccp-submit-btn:hover,
.ccp-submit-btn:hover {
  background: var(--ccp-bg-hover) !important;
  color: var(--ccp-text-primary) !important;
  border: none !important;
}
/* ── WP dashboard buttons — override any theme purple ── */
.ccp-btn,
.ccp-btn:visited,
.ccp-btn:focus,
.ccp-btn:active {
  display: inline-block !important;
  padding: 10px 24px !important;
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
  box-shadow: none !important;
  background: var(--ccp-bg-surface) !important;
  color: var(--ccp-text-primary) !important;
  border: 2px solid var(--ccp-bg-surface) !important;
}
.ccp-btn:hover {
  background: var(--ccp-bg-hover) !important;
  border-color: var(--ccp-text-primary) !important;
  color: var(--ccp-text-primary) !important;
}
.ccp-btn-primary,
.ccp-btn-primary:visited,
.ccp-btn-primary:focus,
.ccp-btn-primary:active {
  background: var(--ccp-gold, var(--ccp-gold)) !important;
  color: var(--ccp-text-primary) !important;
  border: 2px solid var(--ccp-gold, var(--ccp-gold)) !important;
  box-shadow: none !important;
  outline: none !important;
}
.ccp-btn-primary:hover {
  background: var(--ccp-gold-deep) !important;
  border-color: var(--ccp-gold-deep) !important;
  color: var(--ccp-text-primary) !important;
}

.ccp-save-msg {
  margin-left: 14px;
  color: var(--ccp-green);
  font-size: 13px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-weight: 500;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COUNTDOWN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-countdown {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ccp-gray-2, #ede8e2);
}
.ccp-countdown-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 96px;
  line-height: 1;
  color: var(--ccp-gold-deep);
  letter-spacing: 2px;
}
.ccp-countdown-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  line-height: 1;
  color: var(--ccp-text-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DAY DETAILS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-day-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--ccp-gray-2);
  border: 1px solid var(--ccp-gray-2);
}
.ccp-day-detail-item {
  background: var(--ccp-bg-surface);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ccp-day-detail-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ccp-text-muted);
}
.ccp-day-detail-value {
  font-size: 17px;
  color: var(--ccp-text-primary);
  font-weight: 500;
  line-height: 1.5;
}
.ccp-day-detail-value small {
  font-size: 13px;
  font-weight: 600;
  color: var(--ccp-gold-deep) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EXTRA DAYS LIST
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-extra-days-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ccp-extra-day-card {
  border: 1px solid var(--ccp-gray-2);
  border-radius: 8px;
  overflow: hidden;
}
.ccp-extra-day-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--ccp-bg-raised);
}
.ccp-extra-day-header:hover .ccp-day-toggle-txt {
  color: var(--ccp-green-hover) !important;
}
.ccp-extra-day-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ccp-gold);
}
.ccp-extra-day-date {
  font-size: 13px;
  color: rgba(255,255,255,.75);
}
.ccp-extra-day-card .ccp-day-details-grid {
  border: none;
  background: var(--ccp-bg-surface);
}
.ccp-wp-day-form {
  padding: 16px 20px 0;
  background: var(--ccp-bg-surface);
}
.ccp-wp-day-form label.ccp-form-label {
  display: block;
  margin-bottom: 4px;
}
.ccp-wp-day-form input.ccp-form-input {
  width: 100%;
}
.ccp-wp-day-team {
  padding: 10px 20px 16px;
  background: var(--ccp-bg-raised);
}
.ccp-btn-sm {
  padding: 6px 14px !important;
  font-size: 12px !important;
  margin-bottom: 16px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCORDION (Moodboard)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-accordion-section { padding: 0 !important; overflow: hidden; }

/* Reset completo stili tema WordPress sul button */
.ccp-accordion-trigger,
.ccp-accordion-trigger:visited,
.ccp-accordion-trigger:focus,
.ccp-accordion-trigger:active {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 24px 32px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  text-align: left !important;
  gap: 12px !important;
  color: var(--ccp-black, #1a1a1a) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: background 0.2s !important;
}
.ccp-accordion-trigger:hover {
  background: rgba(201,169,110,.06) !important;
}
.ccp-accordion-trigger .ccp-section-title {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--ccp-black, #1a1a1a) !important;
}
.ccp-accordion-trigger .ccp-section-title::before {
  display: none !important;
}
.ccp-accordion-arrow {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--ccp-gold, var(--ccp-gold)) !important;
  stroke: var(--ccp-gold, var(--ccp-gold)) !important;
}
.ccp-accordion-trigger[aria-expanded="true"] .ccp-accordion-arrow {
  transform: rotate(180deg);
}
.ccp-accordion-body {
  padding: 0 32px 32px;
}
.ccp-accordion-body[hidden] { display: none; }

/* Testo descrittivo moodboard */
.ccp-accordion-body .ccp-section-intro {
  font-size: 14px !important;
  color: var(--ccp-text-muted) !important;
  opacity: 1 !important;
  margin-bottom: 20px !important;
}

/* Moodboard full-width dentro l'accordion */
.ccp-accordion-body > * { max-width: 100% !important; }

/* ── Moodboard block: title + body seamless ── */
.ccp-moodboard-block .ccp-section-title {
  margin-bottom: 0 !important;
}
.ccp-moodboard-body {
  background: var(--ccp-bg-base);
}
.ccp-moodboard-body > * { max-width: 100% !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MESSAGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-notes-list {
  max-height: 520px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
  padding-right: 4px;
}
.ccp-msg {
  padding: 18px 22px;
  max-width: 82%;
  background: var(--ccp-bg-surface);
}
.ccp-msg-from-studio {
  background: var(--ccp-gray-1);
  border-left: 3px solid var(--ccp-black);
  align-self: flex-start;
}
.ccp-msg-from-client {
  background: var(--ccp-bg-surface);
  border: 1px solid var(--ccp-gray-2);
  border-right: 3px solid var(--ccp-black);
  align-self: flex-end;
}
.ccp-msg-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: var(--ccp-gray-3);
  margin-bottom: 8px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ccp-msg-meta strong {
  color: var(--ccp-black);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
.ccp-msg-content {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ccp-gray-4);
  font-weight: 300;
}
.ccp-no-msg {
  color: var(--ccp-gray-3);
  font-style: italic;
  text-align: center;
  padding: 40px 20px;
  font-size: 14px;
  font-weight: 300;
  border: 1px dashed var(--ccp-gray-2);
}

.ccp-note-reply { display: flex; flex-direction: column; gap: 14px; }
.ccp-note-reply textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ccp-gray-2);
  border-radius: 0;
  font-size: 14px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-weight: 300;
  resize: vertical;
  color: var(--ccp-black);
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.ccp-note-reply textarea:focus { border-color: var(--ccp-black); outline: none; }
.ccp-note-reply-actions { display: flex; align-items: center; gap: 14px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OUTLINE BUTTON (phase2)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-outline-btn {
  padding: 12px 28px;
  background: transparent;
  color: var(--ccp-black);
  border: 2px solid var(--ccp-black);
  border-radius: 0;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.ccp-outline-btn:hover { background: var(--ccp-text-primary); color: var(--ccp-bg-base); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px) {
  .ccp-dash-header { padding: 36px 24px; }
  .ccp-dash-couple { font-size: 36px; }
  .ccp-links-grid  { grid-template-columns: repeat(2, 1fr); }
  .ccp-msg { max-width: 95%; }
  .ccp-login-box { padding: 40px 28px; }
  .ccp-section-title { font-size: 22px; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; font-family: 'Bebas Neue', 'Arial Black', sans-serif !important; font-style: normal !important; }
  .ccp-step { width: 33.33%; min-width: 0; }  /* 3/row on small screens */
  .ccp-step-node { width: 40px; height: 40px; }
  .ccp-step-label { font-size: 8px; min-height: 32px; margin-bottom: 10px; }
  /* Timeline line: smaller node → top = 32+10+20 = 62px; 3-per-row rules */
  .ccp-step::before                { top: 62px; }
  .ccp-step:nth-child(5n+1)::before{ left: 0; }   /* reset desktop rule */
  .ccp-step:nth-child(5n)::before  { right: 0; }  /* reset desktop rule */
  .ccp-step:nth-child(3n+1)::before{ left: 50%; } /* first in 3-item row */
  .ccp-step:nth-child(3n)::before  { right: 50%; }/* last in 3-item row  */
  /* Extra day header: wrap label + date on narrow screens */
  .ccp-extra-day-header {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WEDDING PEOPLE CARD (profilo)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-wedding-people-card {
  margin: 0 0 28px;
  padding: 20px 24px;
  background: var(--ccp-gray-1);
  border: 1px solid var(--ccp-gray-2);
  border-left: 4px solid var(--ccp-black);
}
.ccp-people-title {
  margin: 0 0 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--ccp-black);
}
.ccp-people-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ccp-person-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  background: var(--ccp-white);
  border: 1px solid var(--ccp-gray-2);
  min-width: 140px;
}
.ccp-person-chip.ccp-person-me {
  border-color: var(--ccp-black);
  border-left: 3px solid var(--ccp-black);
}
.ccp-person-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ccp-black);
}
.ccp-person-name em {
  font-weight: 400;
  font-style: italic;
  color: var(--ccp-gray-4);
  font-size: 12px;
}
.ccp-person-role {
  font-size: 11px;
  color: var(--ccp-gray-4);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ═══════════════════════════════════════════════════════════════
   Wedding Planner Dashboard
   ═══════════════════════════════════════════════════════════════ */

/* Wedding list cards */
/* ── v5.50.0 WP Cards — Precision Manifest ─────────────────────────── */
.ccp-wp-weddings-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.ccp-wp-card {
  display: grid;
  grid-template-columns: 36px 1fr 92px 44px;
  align-items: center;
  gap: 20px;
  padding: 20px 12px 20px 4px;
  text-decoration: none !important;
  color: var(--ccp-text-primary);
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  transition: padding-left .35s cubic-bezier(.23,1,.32,1);
  border: none;
  background: none;
  box-shadow: none;
}
.ccp-wp-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ccp-gold-soft), rgba(201,169,110,.03) 55%, transparent);
  opacity: 0; transition: opacity .4s; pointer-events: none; border-radius: 10px;
}
.ccp-wp-card:hover { padding-left: 14px; text-decoration: none !important; box-shadow: none; border: none; }
.ccp-wp-card:hover::before { opacity: 1; }
.ccp-wp-card *, .ccp-wp-card *:hover { text-decoration: none !important; }
.ccp-wp-card--past { opacity: .48; }
.ccp-wp-card--past:hover { opacity: .78; }
.ccp-wp-card--past::before { background: linear-gradient(90deg, rgba(45,106,79,.15), transparent 60%); }

/* Separator */
.ccp-wp-card-sep { height: 1px; background: var(--ccp-border-soft); margin: 2px 0; }

/* Sprint 6.5 — Quick action: open Guest Portal in pro mode (sotto la card matrimonio) */
.ccp-wp-card-gp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 10px 38px;
  padding: 5px 11px 5px 9px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ccp-gold);
  text-decoration: none !important;
  background: transparent;
  border: 1px solid rgba(201,169,110,.28);
  border-radius: 50px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ccp-wp-card-gp:hover {
  background: rgba(201,169,110,.1);
  border-color: rgba(201,169,110,.55);
  color: var(--ccp-gold);
}
.ccp-wp-card-gp-ico { opacity: .85; }
.ccp-wp-card-gp-arrow { font-size: 13px; opacity: .7; margin-left: 2px; }

/* Index */
.ccp-wp-card-idx {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 300;
  color: var(--ccp-text-muted); text-align: right; letter-spacing: .04em;
  padding-right: 4px; transition: color .3s;
}
.ccp-wp-card:hover .ccp-wp-card-idx { color: var(--ccp-gold); }
.ccp-wp-card--past .ccp-wp-card-idx { color: var(--ccp-green-hover); opacity: .7; }
.ccp-wp-card--past:hover .ccp-wp-card-idx { opacity: 1; }

/* Main */
.ccp-wp-card-main { min-width: 0; }
.ccp-wp-card-couple {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px; letter-spacing: .035em; line-height: 1;
  color: var(--ccp-text-primary); margin-bottom: 7px;
  transition: color .25s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccp-wp-card:hover .ccp-wp-card-couple { color: var(--ccp-gold); }
.ccp-wp-card--past .ccp-wp-card-couple { color: var(--ccp-text-secondary); }
.ccp-wp-card--past:hover .ccp-wp-card-couple { color: var(--ccp-green-hover); }

/* Date — prominent */
.ccp-wp-card-date {
  font-family: 'Inter', sans-serif;
  font-size: 14px !important; font-weight: 600;
  color: var(--ccp-text-secondary) !important;
  letter-spacing: .01em; margin-bottom: 5px;
  transition: color .25s;
}
.ccp-wp-card:hover .ccp-wp-card-date { color: var(--ccp-text-primary) !important; }
.ccp-wp-card--past .ccp-wp-card-date { color: var(--ccp-text-muted) !important; }

/* Duration line */
.ccp-wp-card-dur { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.ccp-wp-card-dur-bar {
  width: 14px; height: 1px; background: var(--ccp-border-medium); flex-shrink: 0;
  transition: background .3s, width .3s cubic-bezier(.23,1,.32,1);
}
.ccp-wp-card:hover .ccp-wp-card-dur-bar { background: var(--ccp-gold); width: 20px; }
.ccp-wp-card--past .ccp-wp-card-dur-bar { background: rgba(45,106,79,.3); }
.ccp-wp-card--past:hover .ccp-wp-card-dur-bar { background: var(--ccp-green-hover); width: 18px; }
.ccp-wp-card-dur-text {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ccp-text-muted); transition: color .3s; line-height: 1;
}
.ccp-wp-card-dur-text.multi { color: var(--ccp-gold); opacity: .7; }
.ccp-wp-card:hover .ccp-wp-card-dur-text { color: var(--ccp-text-secondary); }
.ccp-wp-card:hover .ccp-wp-card-dur-text.multi { color: var(--ccp-gold); opacity: 1; }
.ccp-wp-card--past .ccp-wp-card-dur-text { opacity: .6; }

/* Location row */
.ccp-wp-card-loc { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ccp-wp-card-loc-text {
  font-family: 'IBM Plex Sans', sans-serif; font-style: italic;
  font-size: 12px; color: var(--ccp-text-muted); transition: color .25s;
}
.ccp-wp-card:hover .ccp-wp-card-loc-text { color: var(--ccp-text-secondary); }

/* Badges */
.ccp-wp-card-badge {
  font-size: 8px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; border: 1px solid; line-height: 1.5;
}
.ccp-wp-card-badge--type { color: var(--ccp-ice); background: var(--ccp-ice-soft); border-color: rgba(168,197,221,.16); }
.ccp-wp-card-badge--demo { color: var(--ccp-gold); background: var(--ccp-gold-soft); border-color: rgba(201,169,110,.2); }
.ccp-wp-card-badge--past { color: var(--ccp-green-hover); background: var(--ccp-green-soft); border-color: rgba(61,138,101,.25); }

/* Ring */
.ccp-wp-card-ring { display: flex; align-items: center; justify-content: center; }
.ccp-wp-ring-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.ccp-wp-ring-svg  { transform: rotate(-90deg); display: block; } /* only SVG rotates, not ring-inner */
.ccp-wp-ring-track { fill: none; stroke: var(--ccp-border-medium); stroke-width: 2.5; transition: stroke .3s; }
.ccp-wp-ring-fill  { fill: none; stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset .7s cubic-bezier(.23,1,.32,1), stroke .35s; }
.ccp-wp-ring-bg    { fill: rgba(45,106,79,.15); stroke: none; transition: fill .3s; }
.ccp-wp-ring-fill--gold   { stroke: var(--ccp-gold); }
.ccp-wp-ring-fill--copper { stroke: var(--ccp-copper, #c47f6a); }
.ccp-wp-ring-fill--green  { stroke: var(--ccp-green-hover); stroke-dashoffset: 0 !important; }
.ccp-wp-ring-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.ccp-wp-ring-num  { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: -.02em; transition: color .3s; }
.ccp-wp-ring-unit { font-size: 7px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ccp-text-muted); margin-top: 1px; }
.ccp-wp-ring-check { color: var(--ccp-green-hover); display: block; }
.ccp-wp-ring-num--gold   { color: var(--ccp-gold); }
.ccp-wp-ring-num--copper { color: var(--ccp-copper, #c47f6a); }
.ccp-wp-card:hover .ccp-wp-ring-track { stroke: var(--ccp-gold-soft); }
.ccp-wp-card:hover .ccp-wp-ring-num   { color: var(--ccp-gold-hover, #d4bc8a) !important; }
.ccp-wp-card--past:hover .ccp-wp-ring-track { stroke: rgba(45,106,79,.3); }
.ccp-wp-card--past:hover .ccp-wp-ring-num   { color: var(--ccp-green-hover) !important; }
.ccp-wp-card--past:hover .ccp-wp-ring-bg    { fill: rgba(74,170,122,.22); }

/* Arrow */
.ccp-wp-card-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--ccp-border-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--ccp-text-muted);
  transition: all .3s cubic-bezier(.23,1,.32,1);
  justify-self: end; flex-shrink: 0;
}
.ccp-wp-card:hover      .ccp-wp-card-arrow { border-color: var(--ccp-gold); background: var(--ccp-gold); color: var(--ccp-text-primary); transform: rotate(45deg) scale(1.08); }
.ccp-wp-card--past:hover .ccp-wp-card-arrow { border-color: var(--ccp-green-hover); background: var(--ccp-green-hover); color: #fff; transform: none; }
/* ── end v5.50.0 WP Cards ────────────────────────────────────────────── */

/* Editable data form */
.ccp-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
/* WP: nomi sposi 4 colonne → 2 → 1 */
/* WP: nomi sposi — 2 colonne × 2 righe, larghezza contenuta */
.ccp-wp-couple-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 520px;
}
/* WP: chiesa + orario affiancati */
.ccp-wp-chiesa-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  max-width: 520px;
}
.ccp-wp-form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
}
.ccp-form-group { display: flex; flex-direction: column; gap: 4px; }

/* ── Wedding Info form (client dashboard) ─────────────────────── */
.ccp-wf-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
}
.ccp-wf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* ──────────────────────────────────────────────────────────────── */
.ccp-form-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--ccp-gray-4); }
.ccp-form-input {
  font-family: inherit;
  font-size: 14px;
  color: var(--ccp-text-primary);
  border: 1px solid var(--ccp-border);
  padding: 8px 10px;
  background: var(--ccp-bg-raised);
  outline: none;
  transition: border-color .15s;
}
.ccp-form-input:focus { border-color: var(--ccp-gold); background: var(--ccp-bg-surface); }

/* File rows */
.ccp-wp-file-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--ccp-border);
  gap: 0;
  flex-wrap: wrap;
  font-size: 14px;
}
.ccp-wp-file-row:last-child { border-bottom: none; }
.ccp-wp-file-name { flex: 1; }

/* Note bubbles */
.ccp-notes-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 2px;
}
.ccp-note-bubble {
  max-width: 100%;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ccp-border);
  font-size: 14px;
  line-height: 1.5;
}
.ccp-note-left  { align-self: flex-start; border-left: 3px solid var(--ccp-gold); }
.ccp-note-right { align-self: flex-end;   border-right: 3px solid var(--ccp-black); }
.ccp-note-meta  { font-size: 11px; color: var(--ccp-gray-4); margin-bottom: 4px; font-weight: 600; }
.ccp-note-text  { white-space: pre-wrap; color: var(--ccp-black); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE IMPROVEMENTS — max-width: 640px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px) {

  /* Timeline: step label leggibile */
  .ccp-step-label { font-size: 9px; }

  /* Note bubble: full width su mobile */
  .ccp-note-bubble { max-width: 100%; }

  /* Form input: target touch adeguato */
  .ccp-form-input { padding: 11px 12px; font-size: 15px; }

  /* WP card list: layout compatto su mobile */
  .ccp-wp-card { grid-template-columns: 28px 1fr 72px 36px; gap: 12px; padding: 16px 8px 16px 2px; }
  .ccp-wp-card-couple { font-size: 24px; }
  .ccp-wp-ring-svg { width: 64px !important; height: 64px !important; viewBox: 0 0 64 64; }

  /* Form grid: colonna singola su telefono */
  .ccp-form-grid { grid-template-columns: 1fr; }

  /* WP nomi sposi: 2 colonne su tablet/piccolo */
  .ccp-wp-couple-grid { grid-template-columns: 1fr 1fr; }

  /* Chiesa + Orario: impilati su telefono */
  .ccp-wp-chiesa-grid { grid-template-columns: 1fr; }

  /* Sidebar CTA buttons: più alti per touch */
  .ccp-sidebar-whatsapp,
  .ccp-sidebar-bookcall { padding: 13px 16px; }

  /* Countdown block */
  .ccp-countdown-number { font-size: 40px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE IMPROVEMENTS — max-width: 480px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 480px) {

  /* Header: titolo coppia più piccolo */
  .ccp-dash-couple { font-size: 28px; }
  .ccp-dash-header { padding: 28px 18px; margin: 0 -18px 40px; }

  /* Section title */
  .ccp-section-title { font-size: 19px; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; gap: 8px; font-family: 'Bebas Neue', 'Arial Black', sans-serif !important; font-style: normal !important; }
  .ccp-section-title::before { width: 8px; height: 8px; min-width: 8px; }

  /* Main padding ridotto */
  .ccp-dash-main { padding: 48px 16px 48px; }
  .ccp-section { padding: 0 0 16px; }
  .ccp-banner-area { margin: 0 -16px; padding: 10px 16px 0; }
  .ccp-section-title { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .ccp-moodboard-body { margin: 0 -16px !important; padding-left: 16px !important; padding-right: 16px !important; }

  /* Wedding info form: nome+cognome impilati su schermi molto piccoli */
  .ccp-wf-row { grid-template-columns: 1fr; }

  /* WP nomi sposi: colonna singola su piccolo */
  .ccp-wp-couple-grid { grid-template-columns: 1fr; }
  .ccp-wp-chiesa-grid { grid-template-columns: 1fr; }

  /* Delivery cards: colonna singola */
  .ccp-links-grid { grid-template-columns: 1fr; }

  /* Timeline: 3 per riga su mobile piccolo */
  .ccp-step-label { font-size: 8px; }
  .ccp-step { width: 33.33%; min-width: 0; }

  /* Bottoni gold: padding touch minimo */
  .ccp-btn,
  .ccp-btn-primary,
  .ccp-submit-btn,
  .ccp-link-btn { padding: 12px 20px !important; font-size: 13px !important; }

  /* Copy link button */
  .ccp-copy-link-btn { padding: 10px 18px !important; font-size: 13px !important; }

  /* Note bubble: full width */
  .ccp-note-bubble { max-width: 100%; }

  /* Form input: font 16px evita zoom automatico iOS */
  .ccp-form-input { font-size: 16px; padding: 12px; }

  /* WP stack form: larghezza piena */
  .ccp-wf-stack { max-width: 100%; }

  /* Card WP: padding ridotto */
  .ccp-wp-card { padding: 18px 16px; }

  /* Login box */
  .ccp-login-box { padding: 32px 18px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   THEME PURPLE OVERRIDE — forza dorato su tutti gli elementi CCP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ccp-dashboard a,
.ccp-wp-dashboard a {
  color: inherit !important;
}
.ccp-dashboard button:not(.ccp-sidebar-toggle):not(.ccp-btn-primary):not(.ccp-link-btn):not(.ccp-submit-btn):not(.ccp-copy-link-btn):not(.ccp-btn):not(.ccp-tl-modal-save):not(.ccp-staff-sec-bar):not(.ccp-toggle-btn):not(.button-primary):not(.ccp-cl-cardx-cta--primary):not(.ccp-cl-fab):not(.ccp-cl-fab-action):not(.ccp-cl-chat-open-btn):not(.ccp-cl-avatar-trigger):not(.ccp-pf-btn):not(.ccp-pf-pill-radio):not(.ccp-prefix-trigger):not(.ccp-theme-toggle__option):not(.ccp-ed-compose-send):not(.ccp-gp-btn-primary):not(.ccp-gp-btn-secondary):not(.ccp-gp-feature-settings-btn):not(.ccp-gp-settings-back):not(.ccp-gp-add-custom-btn):not(.ccp-gp-icon-pick):not(.ccp-gp-pr-add-opt),
.ccp-wp-dashboard button:not(.ccp-sidebar-toggle):not(.ccp-btn-primary):not(.ccp-link-btn):not(.ccp-submit-btn):not(.ccp-copy-link-btn):not(.ccp-btn):not(.ccp-tl-modal-save):not(.ccp-staff-sec-bar):not(.ccp-toggle-btn):not(.button-primary):not(.ccp-cl-cardx-cta--primary):not(.ccp-cl-fab):not(.ccp-cl-fab-action):not(.ccp-cl-chat-open-btn):not(.ccp-cl-avatar-trigger):not(.ccp-pf-btn):not(.ccp-pf-pill-radio):not(.ccp-prefix-trigger):not(.ccp-theme-toggle__option):not(.ccp-ed-compose-send):not(.ccp-gp-btn-primary):not(.ccp-gp-btn-secondary):not(.ccp-gp-feature-settings-btn):not(.ccp-gp-settings-back):not(.ccp-gp-add-custom-btn):not(.ccp-gp-icon-pick):not(.ccp-gp-pr-add-opt) {
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Sidebar toggle: always black full-width bar */
.ccp-sidebar-toggle,
.ccp-sidebar-toggle:hover,
.ccp-sidebar-toggle:focus,
.ccp-sidebar-toggle:active,
.ccp-sidebar-toggle:visited {
  background: var(--ccp-bg-base) !important;
  color: var(--ccp-text-primary) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
  outline: none !important;
  border-radius: 0 !important;
}
/* Sidebar links: mai viola */
.ccp-sidebar-link,
.ccp-sidebar-link:visited,
.ccp-sidebar-link:hover,
.ccp-sidebar-link:focus {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.ccp-sidebar-link.active,
.ccp-sidebar-link:hover {
  color: var(--ccp-gold) !important;
}
/* Logout sidebar */
.ccp-sidebar-logout,
.ccp-sidebar-logout:visited,
.ccp-sidebar-logout:hover,
.ccp-sidebar-logout:focus {
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FINANZE — Admin section + WP commission + Staff earnings
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Card wrapper ── */
.ccp-fin-card { background: var(--ccp-bg-surface); border: 1px solid var(--ccp-border-soft); border-radius: 4px; padding: 24px; }

/* ── Sezioni interne ── */
.ccp-fin-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ccp-bg-raised); }
.ccp-fin-section:last-of-type { border-bottom: none; margin-bottom: 0; }
.ccp-fin-subtitle { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ccp-text-muted); margin: 0 0 14px; }

/* ── Grid incassi / WP ── */
.ccp-fin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; }
.ccp-fin-field label { display: block; font-size: 12px; font-weight: 600; color: var(--ccp-text-muted); margin-bottom: 5px; }
.ccp-fin-input { width: 100%; max-width: 180px; }
.ccp-fin-big-val { font-size: 18px; font-weight: 700; color: var(--ccp-gold, var(--ccp-gold-deep)); }

/* ── Tabella pagamenti ── */
.ccp-fin-payouts-table { margin-top: 8px; }
.ccp-fin-payouts-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ccp-text-muted); }
.ccp-fin-payouts-table td { vertical-align: middle; padding: 7px 10px; }
.ccp-fin-add-row { margin-top: 10px; }

/* ── Riepilogo ── */
.ccp-fin-summary {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--ccp-border-soft); border-radius: 4px; overflow: hidden;
  margin-top: 20px;
}

/* ── KPI card (usata anche nella pagina globale) ── */
.ccp-fin-kpi {
  flex: 1; min-width: 140px;
  padding: 16px 20px;
  border-right: 1px solid var(--ccp-border-soft);
  background: var(--ccp-bg-raised);
}
.ccp-fin-kpi:last-child { border-right: none; }
.ccp-fin-kpi-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ccp-text-muted); margin-bottom: 6px; }
.ccp-fin-kpi-val { display: block; font-size: 20px; font-weight: 700; color: var(--ccp-text-primary); }
.ccp-fin-kpi-profit { background: var(--ccp-bg-base); }
.ccp-fin-kpi-profit .ccp-fin-kpi-label { color: rgba(255,255,255,.6); }
.ccp-fin-kpi-profit .ccp-fin-kpi-val { color: var(--ccp-gold, var(--ccp-gold-deep)); }
.ccp-fin-kpi-deposit .ccp-fin-kpi-val { color: var(--ccp-green-hover); }
.ccp-fin-kpi-tocollect .ccp-fin-kpi-val { color: var(--ccp-gold-deep); }
.ccp-fin-kpi-cost .ccp-fin-kpi-label { color: var(--ccp-danger); }
.ccp-fin-kpi-cost .ccp-fin-kpi-val { color: var(--ccp-danger); }
.ccp-fin-kpi-final { background: var(--ccp-bg-surface); border-color: var(--ccp-text-primary); }
.ccp-fin-kpi-final .ccp-fin-kpi-label { color: rgba(255,255,255,.6); }
.ccp-fin-kpi-final .ccp-fin-kpi-val { color: var(--ccp-text-primary); font-size: 22px; }

/* ── KPI row (pagina globale + WP global) ── */
.ccp-fin-kpi-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ccp-fin-kpi-row .ccp-fin-kpi { border: 1px solid var(--ccp-border-soft); border-radius: 4px; min-width: 160px; }
.ccp-fin-kpi-row .ccp-fin-kpi:last-child { border-right: 1px solid var(--ccp-border-soft); }

/* ── Badge stato pagamento ── */
.ccp-fin-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .4px; }
.ccp-fin-badge-paid    { background: var(--ccp-green-soft); color: var(--ccp-green-hover); }
.ccp-fin-badge-pending { background: var(--ccp-warning-soft); color: var(--ccp-gold-deep); }

/* ── Tabella globale ── */
.ccp-fin-global-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ccp-fin-global-table th { text-align: left; padding: 8px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ccp-text-muted); border-bottom: 1px solid var(--ccp-border-soft); }
.ccp-fin-global-table td { padding: 10px 12px; border-bottom: 1px solid var(--ccp-bg-raised); }
.ccp-fin-global-table tr:last-child td { border-bottom: none; }

/* ── Sezione commissione nel WP frontend ── */
.ccp-fin-wp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 16px;
}
.ccp-fin-wp-item {
  padding: 16px; background: var(--ccp-bg-raised);
  border: 1px solid var(--ccp-border-soft); border-radius: 4px;
}
.ccp-fin-wp-highlight { background: var(--ccp-bg-base); border-color: var(--ccp-text-primary); }
.ccp-fin-wp-highlight .ccp-fin-wp-label { color: rgba(255,255,255,.6); }
.ccp-fin-wp-highlight .ccp-fin-wp-val   { color: var(--ccp-gold, var(--ccp-gold-deep)); }
.ccp-fin-wp-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ccp-text-muted); margin-bottom: 6px; }
.ccp-fin-wp-val   { display: block; font-size: 16px; font-weight: 700; color: var(--ccp-text-primary); }
.ccp-fin-wp-big   { font-size: 22px; }

/* ── Global wrapper ── */
.ccp-fin-global { margin-top: 16px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FINANCE – Input layout (v2 rewrite)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 2-col grid for price inputs */
.ccp-fin-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  max-width: 600px;
  margin-bottom: 4px;
}

/* Field label (class-based, complements ccp-fin-field label) */
.ccp-fin-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ccp-text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* € prefix input wrapper */
.ccp-fin-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--ccp-border-medium);
  border-radius: 3px;
  overflow: hidden;
  max-width: 180px;
  background: var(--ccp-bg-surface);
}
.ccp-fin-input-wrap:focus-within {
  border-color: var(--ccp-gold);
  box-shadow: 0 0 0 1px var(--ccp-gold);
}
.ccp-fin-currency {
  padding: 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ccp-text-muted);
  background: var(--ccp-bg-sunken);
  border-right: 1px solid var(--ccp-border-medium);
  line-height: 30px;
  user-select: none;
}
.ccp-fin-number {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 8px;
  height: 30px;
  width: 100%;
  font-size: 14px;
  background: transparent;
}

/* Section header: title + button on same row */
.ccp-fin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

/* WP section: horizontal flex row */
.ccp-fin-wp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: flex-end;
}

/* Role badge in payouts table */
.ccp-fin-role-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  background: var(--ccp-bg-raised);
  color: var(--ccp-text-muted);
  white-space: nowrap;
}

/* Styled select for payment method */
.ccp-fin-select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--ccp-border-medium);
  border-radius: 3px;
  font-size: 13px;
  color: var(--ccp-text-primary);
  background: var(--ccp-bg-surface);
  min-width: 200px;
}
.ccp-fin-select:focus {
  border-color: var(--ccp-gold);
  outline: none;
}

/* ━━ Responsive ━━ */
@media (max-width: 900px) {
  .ccp-fin-grid         { grid-template-columns: 1fr 1fr; }
  .ccp-fin-inputs-grid  { grid-template-columns: 1fr 1fr; }
  .ccp-fin-wp-grid      { grid-template-columns: 1fr 1fr; }
  .ccp-fin-summary      { flex-direction: column; }
  .ccp-fin-kpi          { border-right: none; border-bottom: 1px solid var(--ccp-border-soft); }
  .ccp-fin-kpi:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
  .ccp-fin-grid         { grid-template-columns: 1fr; }
  .ccp-fin-inputs-grid  { grid-template-columns: 1fr; max-width: 100%; }
  .ccp-fin-wp-grid      { grid-template-columns: 1fr; }
  .ccp-fin-wp-row       { flex-direction: column; }
  .ccp-fin-kpi-row      { flex-direction: column; }
  .ccp-fin-global-table th:nth-child(3),
  .ccp-fin-global-table td:nth-child(3) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   First-Login Onboarding Screen
   ═══════════════════════════════════════════════════════════════ */

.ccp-onboarding {
  position: fixed;
  inset: 0;
  background: var(--ccp-bg-base);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Bebas Neue', sans-serif;
}
.ccp-onboarding-inner {
  max-width: 560px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.ccp-onboarding-logo {
  width: clamp(180px, 40vw, 320px);
  margin-bottom: 40px;
  object-fit: contain;
}
.ccp-ob-step {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.ccp-ob-title {
  color: var(--ccp-text-primary);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 7vw, 56px);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  line-height: 1;
}
.ccp-ob-subtitle {
  color: rgba(255,255,255,0.65);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 32px;
  font-weight: 300;
  letter-spacing: normal;
}
.ccp-ob-field-wrap {
  width: 100%;
  max-width: 280px;
  margin: 0 auto 20px;
}
.ccp-ob-date-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--ccp-text-primary);
  font-size: 16px;
  text-align: center;
  outline: none;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.ccp-ob-date-input:focus { border-color: var(--ccp-gold); }
.ccp-ob-date-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
.ccp-ob-btn-primary {
  padding: 14px 40px;
  background: var(--ccp-gold);
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-bottom: 16px;
  width: 100%;
  max-width: 280px;
}
.ccp-ob-btn-primary:hover { opacity: 0.85; }
.ccp-ob-btn-secondary {
  padding: 10px 24px;
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 12px;
}
.ccp-ob-btn-secondary:hover { color: var(--ccp-text-primary); border-color: rgba(255,255,255,0.5); }
.ccp-ob-btn-skip {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.3);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
  transition: color 0.2s;
  padding: 8px;
}
.ccp-ob-btn-skip:hover { color: rgba(255,255,255,0.6); }
.ccp-ob-error {
  color: var(--ccp-danger);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  margin-bottom: 12px;
}
.ccp-ob-candidates {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.ccp-ob-candidate-btn {
  width: 100%;
  padding: 16px 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--ccp-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s, border-color 0.2s;
  font-family: 'Inter', sans-serif;
}
.ccp-ob-candidate-btn:hover { background: rgba(255,255,255,0.1); border-color: var(--ccp-gold); }
.ccp-ob-cand-name { font-size: 16px; font-weight: 500; }
.ccp-ob-cand-loc { font-size: 12px; color: rgba(255,255,255,0.5); display: block; margin-top: 2px; }
.ccp-ob-cand-confirm { font-size: 13px; color: var(--ccp-gold); letter-spacing: 0.04em; flex-shrink: 0; }
.ccp-ob-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ccp-gold);
  color: #000;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-family: sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   Admin Partner Card (Dati Matrimonio section)
   ═══════════════════════════════════════════════════════════════ */
.ccp-partner-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ccp-gray-2);
  color: var(--ccp-gray-5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ccp-partner-email {
  font-size: 12px;
  color: var(--ccp-gray-4);
}

/* ── Incomplete-data banners ── */
/* Dark banner area between topbar and first section */
.ccp-banner-area {
  background: var(--ccp-bg-base);
  margin: 0 -52px;
  padding: 12px 52px 0;
}
.ccp-banner-area:empty {
  padding: 0;
}
.ccp-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 0;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
}
.ccp-banner:last-child { margin-bottom: 0; }
.ccp-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.ccp-banner strong {
  font-weight: 700;
}

/* Error banner — dark theme */
.ccp-banner-error {
  background: rgba(192,57,43,0.12);
  border: none;
  border-left: 3px solid var(--ccp-danger);
  color: rgba(255,255,255,0.75);
}
.ccp-banner-error svg {
  stroke: var(--ccp-danger);
}
.ccp-banner-error a {
  color: var(--ccp-danger) !important;
  font-weight: 700;
  text-decoration: underline;
}
.ccp-banner-error a:hover {
  color: var(--ccp-danger) !important;
}

/* Copper banner — staff incomplete profile */
.ccp-banner-copper {
  background: var(--ccp-copper-soft);
  border: none;
  border-left: 3px solid var(--ccp-copper);
  color: rgba(255,255,255,0.75);
}
.ccp-banner-copper svg { stroke: var(--ccp-copper); }
.ccp-banner-copper a { color: var(--ccp-copper) !important; font-weight: 700; text-decoration: underline; }

/* Warning banner — dark theme */
.ccp-banner-warning {
  background: rgba(201,169,110,0.1);
  border: none;
  border-left: 3px solid var(--ccp-gold);
  color: rgba(255,255,255,0.7);
}
.ccp-banner-warning svg {
  stroke: var(--ccp-gold);
}
.ccp-banner-warning a {
  color: var(--ccp-gold) !important;
  font-weight: 700;
  text-decoration: underline;
}
.ccp-banner-warning a:hover {
  color: var(--ccp-gold-hover) !important;
}

/* Warning banner — light theme (WP dashboard) */
.ccp-wp-dashboard .ccp-banner-warning {
  background: #fdf6e3;
  border-left: 3px solid var(--ccp-gold);
  color: #5a4a2a;
}
.ccp-wp-dashboard .ccp-banner-warning a {
  color: #8b6914 !important;
}
.ccp-wp-dashboard .ccp-banner-warning a:hover {
  color: #a67c00 !important;
}

/* ══════════════════════════════════════════════════════════════
   Feature Request — Sidebar button
   ══════════════════════════════════════════════════════════════ */
.ccp-sidebar-feature-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;            /* stretch to match other CTA buttons */
  margin: 0 !important;              /* gap in .ccp-sidebar-cta handles spacing */
  padding: 10px 13px !important;     /* same as logout/bookcall */
  background: transparent !important;
  border: 1px solid rgba(201,169,110,0.45) !important;
  border-radius: 7px !important;
  color: var(--ccp-gold) !important;
  font-family: 'Bebas Neue', 'IBM Plex Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 1.2px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.ccp-sidebar-feature-btn:hover {
  background: rgba(201,169,110,0.12) !important;
  border-color: var(--ccp-gold) !important;
  color: var(--ccp-text-primary) !important;
}
.ccp-sidebar-feature-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
  stroke: currentColor;
}
.ccp-sidebar-feature-btn:hover svg {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   Feature Request — Modal overlay
   ══════════════════════════════════════════════════════════════ */
.ccp-fr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.55);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ccp-fr-overlay.ccp-fr-open {
  opacity: 1;
  pointer-events: auto;
}
.ccp-fr-modal {
  background: var(--ccp-bg-surface);
  border-radius: 4px;
  padding: 44px 40px 40px;
  max-width: 540px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  transform: translateY(20px);
  transition: transform 0.28s ease;
}
.ccp-fr-overlay.ccp-fr-open .ccp-fr-modal {
  transform: translateY(0);
}
.ccp-fr-close-x {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 22px;
  line-height: 1;
  color: var(--ccp-text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}
.ccp-fr-close-x:hover { color: var(--ccp-text-primary) !important; }
.ccp-fr-icon {
  color: var(--ccp-gold);
  margin-bottom: 14px;
  line-height: 1;
}
.ccp-fr-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ccp-black) !important;
  margin: 0 0 14px !important;
  letter-spacing: 0.3px;
}
.ccp-fr-intro {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--ccp-text-muted) !important;
  margin: 0 0 26px !important;
}
.ccp-fr-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ccp-gray-2, #e4e4e4);
  border-radius: 3px;
  padding: 12px 14px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ccp-black);
  resize: vertical;
  min-height: 130px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.ccp-fr-textarea:focus {
  border-color: var(--ccp-gold);
  outline: none;
  box-shadow: 0 0 0 1px var(--ccp-gold);
}
.ccp-fr-submit-btn {
  width: 100% !important;
  text-align: center !important;
}
.ccp-fr-error {
  color: var(--ccp-danger);
  font-size: 13px;
  margin: -8px 0 12px;
}
.ccp-fr-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 16px 0 8px;
}
.ccp-fr-success svg {
  stroke: var(--ccp-green);
  flex-shrink: 0;
}
.ccp-fr-success p {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--ccp-text-muted) !important;
  margin: 0 !important;
  max-width: 380px;
}
@media (max-width: 600px) {
  .ccp-fr-modal { padding: 36px 22px 28px; }
}

/* Vendor rows — linked vendors list */
.ccp-vendor-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--ccp-bg-surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  margin-bottom: 6px;
  transition: background 0.15s;
}
.ccp-vendor-row:hover {
  background: var(--ccp-bg-hover);
}
.ccp-vendor-row .ccp-vd-unlink:hover {
  background: rgba(201,169,110,.15);
}

/* Vendor Invite modal — buttons */
.ccp-vi-btn-send,
.ccp-vi-btn-link {
  display: block;
  width: 100%;
  height: 44px;
  border: 2px solid var(--ccp-bg-base);
  border-radius: 4px;
  font-family: 'Bebas Neue', cursive;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  box-sizing: border-box;
}
.ccp-vi-btn-send {
  background: var(--ccp-bg-base);
  color: var(--ccp-gold);
}
.ccp-vi-btn-send:hover {
  background: var(--ccp-bg-hover);
  border-color: var(--ccp-bg-raised);
}
.ccp-vi-btn-link {
  background: var(--ccp-bg-surface);
  color: var(--ccp-text-primary);
  flex: 0 0 100%;
  margin-top: 4px;
}
.ccp-vi-btn-link:hover {
  background: var(--ccp-bg-base);
  color: var(--ccp-gold);
  border-color: var(--ccp-text-primary);
}

/* ══════════════════════════════════════════════════════════════
   FIX — Mobile: WP day form — stack fields vertically
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .ccp-wp-day-form > div[style*="display:flex"],
  .ccp-wp-day-form > div[style*="display: flex"] {
    flex-direction: column !important;
  }
  .ccp-wp-day-form > div[style*="display:flex"] > div,
  .ccp-wp-day-form > div[style*="display: flex"] > div {
    min-width: 0 !important;
    width: 100% !important;
  }
  .ccp-day-details-grid {
    grid-template-columns: 1fr !important;
  }
  /* Date and time inputs: prevent overflow on narrow screens */
  input[type="date"],
  input[type="time"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Day detail value: allow text to wrap */
  .ccp-day-detail-value {
    font-size: 15px;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ══════════════════════════════════════════════════════════════
   FIX — WP dashboard detail: notes/files always stacked
   ══════════════════════════════════════════════════════════════ */
#ccp-wp-sec-notes,
#ccp-wp-sec-files,
#ccp-wp-sec-moodboard,
#ccp-wp-sec-deliveries {
  display: block !important;
  width: 100% !important;
  float: none !important;
}

@media (max-width: 640px) {
  .ccp-wp-note-types {
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FIX — Hide privacy policy and all theme footer remnants
   ══════════════════════════════════════════════════════════════ */
body.ccp-portal-active #colophon,
body.ccp-portal-active #footer,
body.ccp-portal-active .footer-widget-area,
body.ccp-portal-active .footer-copyright,
body.ccp-portal-active .footer-bottom,
body.ccp-portal-active .site-info,
body.ccp-portal-active .copyright,
body.ccp-portal-active .privacy-policy-link,
body.ccp-portal-active .wp-privacy-policy-link,
body.ccp-portal-active [class~="ast-footer-copyright"],
body.ccp-portal-active a[href*="privacy-policy"]:not(.ccp-sidebar-link):not(.ccp-sidebar-logout) {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   ONBOARDING — Path B & Split Choice
   ══════════════════════════════════════════════════════════════ */

/* Split mode: widen the inner container, no top padding */
.ccp-ob-mode-split {
  align-items: stretch;
  padding: 0;
}
.ccp-ob-mode-split .ccp-onboarding-inner {
  max-width: 100%;
  width: 100%;
  height: 100%;
  padding: 0;
  justify-content: stretch;
  gap: 0;
}

/* Split step: two halves side-by-side */
.ccp-ob-split {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  gap: 0;
}
@media (max-width: 640px) {
  .ccp-ob-split { flex-direction: column; }
}

/* Each half */
.ccp-ob-split-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 48px 40px;
  transition: background 0.4s;
  text-align: center;
}
.ccp-ob-split-option:hover {
  background: rgba(201,169,110,0.07);
}
.ccp-ob-split-option:hover .ccp-ob-split-title {
  color: var(--ccp-gold);
}
.ccp-ob-split-option:hover .ccp-ob-split-diamond {
  opacity: 1;
  transform: scale(1.2);
}

/* Diamond icon */
.ccp-ob-split-diamond {
  color: var(--ccp-gold);
  font-size: 20px;
  opacity: 0.5;
  display: block;
  transition: opacity 0.3s, transform 0.3s;
}

/* Big title */
.ccp-ob-split-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 4vw, 52px);
  color: var(--ccp-text-primary);
  letter-spacing: 2px;
  line-height: 1.1;
  transition: color 0.3s;
  display: block;
}

/* Small subtitle */
.ccp-ob-split-sub {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
  display: block;
  transition: color 0.3s;
}
.ccp-ob-split-option:hover .ccp-ob-split-sub {
  color: rgba(255,255,255,0.7);
}

/* Vertical divider between the two halves */
.ccp-ob-split-divider {
  width: 1px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
  align-self: stretch;
}
@media (max-width: 640px) {
  .ccp-ob-split-divider {
    width: 60%;
    height: 1px;
    align-self: center;
  }
}

/* ── Event type buttons (Path B Step 1) ── */
.ccp-ob-event-types {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 20px 0 24px;
  width: 100%;
}
.ccp-ob-event-btn {
  background: none !important;
  border: none;
  cursor: pointer;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(30px, 5vw, 52px);
  color: var(--ccp-text-primary);
  letter-spacing: 3px;
  padding: 6px 20px;
  line-height: 1.1;
  transition: transform 0.28s cubic-bezier(.22,.68,0,1.15), opacity 0.28s, color 0.2s;
  transform-origin: center center;
  display: block;
  width: 100%;
  text-align: center;
}
.ccp-ob-event-btn:hover,
.ccp-ob-event-btn:focus,
.ccp-ob-event-btn:active {
  background: none !important;
  outline: none;
  box-shadow: none;
}
.ccp-ob-event-btn.ccp-ob-ev-dim {
  transform: scale(0.8);
  opacity: 0.28;
}
.ccp-ob-event-btn.ccp-ob-ev-focus {
  transform: scale(1.18);
  opacity: 1;
  color: var(--ccp-text-primary);
  background: none !important;
}

/* ── Lead form (Path B Step 2) ── */
.ccp-ob-lead-form {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ccp-ob-name-row {
  display: flex;
  gap: 12px;
  width: 100%;
}
.ccp-ob-name-row .ccp-ob-lead-input { flex: 1; min-width: 0; }
.ccp-ob-lead-input,
.ccp-ob-lead-textarea {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  color: var(--ccp-text-primary);
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0.6px;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.ccp-ob-lead-input::placeholder,
.ccp-ob-lead-textarea::placeholder {
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.6px;
}
.ccp-ob-lead-input:focus,
.ccp-ob-lead-textarea:focus {
  outline: none;
  border-color: var(--ccp-gold);
}
.ccp-ob-lead-textarea {
  resize: vertical;
  min-height: 110px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}
.ccp-ob-lead-textarea::placeholder {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  letter-spacing: 0;
  font-size: 13px;
}
@media (max-width: 480px) {
  .ccp-ob-name-row { flex-direction: column; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════
 * WP Dashboard — sfondo bianco + container sezioni neri rounded
 * ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   SEZIONI CONDIVISE (WP + Client + Vendor portal — Staff escluso)
   v5.48.0: refactor da .ccp-wp-dashboard a .ccp-dashboard:not(.ccp-staff-dashboard)
   per centralizzare lo stile sezioni e garantire coerenza tra portali.
   .ccp-dashboard è la classe base condivisa da tutti i portali frontend.
   :not(.ccp-staff-dashboard) esclude lo staff portal che ha layout proprio.
   ═══════════════════════════════════════════════════════════════════════ */
.ccp-dashboard:not(.ccp-staff-dashboard) .ccp-dash-main {
  background: var(--ccp-bg-surface) !important;
  padding-top: 24px;
}
.ccp-dashboard:not(.ccp-staff-dashboard) .ccp-section {
  background: transparent;
  margin-bottom: 12px !important;
  padding: 0 !important;
}
.ccp-dashboard:not(.ccp-staff-dashboard) .ccp-section.ccp-accordion {
  background: var(--ccp-bg-base) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}
.ccp-dashboard:not(.ccp-staff-dashboard) .ccp-section.ccp-accordion > .ccp-section-title,
.ccp-dashboard:not(.ccp-staff-dashboard) .ccp-section.ccp-accordion > .ccp-moodboard-block > .ccp-section-title {
  margin: 0 !important;
  padding: 16px 28px !important;
  border-radius: 10px 10px 0 0;
}
/* Moodboard ha un wrapper in più: azzera il wrapper stesso */
.ccp-dashboard:not(.ccp-staff-dashboard) .ccp-section.ccp-accordion > .ccp-moodboard-block {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* Sezioni non-accordion: wrap in black rounded card
   Padding sul container (non sui figli — gli inline style baterbbero margin sui figli) */
.ccp-dashboard:not(.ccp-staff-dashboard) .ccp-section:not(.ccp-accordion) {
  background: var(--ccp-bg-base) !important;
  border-radius: 10px !important;
  overflow: hidden;
  padding: 0 28px 28px !important;
  margin-bottom: 12px !important;
}
.ccp-dashboard:not(.ccp-staff-dashboard) .ccp-section:not(.ccp-accordion) > .ccp-section-title {
  margin: 0 -28px 20px !important;
  padding: 16px 28px !important;
  border-radius: 10px 10px 0 0;
}
/* Fix testo nero su sfondo nero nei contenuti non-accordion (dark mode) */
.ccp-dashboard:not(.ccp-staff-dashboard) .ccp-section:not(.ccp-accordion) > *:not(.ccp-section-title) {
  color: rgba(255,255,255,0.85);
}
.ccp-dashboard:not(.ccp-staff-dashboard) .ccp-section:not(.ccp-accordion) label,
.ccp-dashboard:not(.ccp-staff-dashboard) .ccp-section:not(.ccp-accordion) .ccp-hint {
  color: rgba(255,255,255,0.5) !important;
}
/* Fix ig-handles body: pattern margin:-36px era per full-bleed legacy, ora il container gestisce il dark bg.
   Mantengo .ccp-wp-dashboard perché la sezione IG Handles è esclusiva del WP/Vendor portal. */
.ccp-wp-dashboard #ccp-ig-body {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   THEME TOGGLE in sidebar (cliente / WP / vendor / staff portals)
   ═══════════════════════════════════════════════════════════════════════ */
.ccp-sidebar-theme-toggle {
    margin: 14px 0 6px;
    padding-top: 14px;
    border-top: 1px solid var(--ccp-border-soft);
}
.ccp-sidebar-theme-toggle .ccp-theme-toggle-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--ccp-text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
}
.ccp-sidebar-theme-toggle .ccp-theme-toggle-hint {
    font-size: 10px;
    color: var(--ccp-text-muted);
    margin-bottom: 8px;
}
.ccp-sidebar-theme-toggle .ccp-theme-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0;
}
.ccp-sidebar-theme-toggle .ccp-theme-toggle__option {
    cursor: pointer;
    padding: 8px 6px;
    border: 1px solid var(--ccp-border-soft);
    border-radius: 6px;
    background: var(--ccp-bg-surface);
    color: var(--ccp-text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all .2s ease;
    text-align: center;
    font-size: 10px;
    position: relative;
}
.ccp-sidebar-theme-toggle .ccp-theme-toggle__option:hover {
    border-color: var(--ccp-gold);
}
.ccp-sidebar-theme-toggle .ccp-theme-toggle__option.is-active {
    border-color: var(--ccp-gold);
    background: var(--ccp-gold-soft);
    color: var(--ccp-text-primary);
}
.ccp-sidebar-theme-toggle .ccp-theme-toggle__option svg {
    width: 18px;
    height: 18px;
    color: var(--ccp-gold);
}
.ccp-sidebar-theme-toggle .ccp-theme-toggle__label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ccp-sidebar-theme-toggle .ccp-theme-toggle__hint {
    display: none; /* hide hint inside compact sidebar variant */
}
.ccp-sidebar-theme-toggle .ccp-theme-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   v5.49.0 — SIDEBAR REDESIGN · "ICE ACCENT" (Variant A)
   Override block: loads after the legacy sidebar rules above and wins by order.
   Rules:
   - Hover  → gold soft gradient + 2px gold left bar (no transform)
   - Active → ICE soft gradient + 2px ice-deep left bar (preserves "you are here")
   - WhatsApp → forest green (--ccp-wa-green), readable in both themes
   - Feature btn (Idea) → animated "SHARE ▼" flag above to invite contributions
   ────────────────────────────────────────────────────────────────────────── */

/* — Nav links — */
.ccp-sidebar-link {
  position: relative;
  border-left: none !important;          /* old 3px border replaced by box-shadow */
  transition: background 0.2s, color 0.2s, box-shadow 0.18s, transform 0.15s ease;
}
.ccp-sidebar-link:hover {
  color: var(--ccp-text-primary) !important;
  background: linear-gradient(90deg, rgba(196, 162, 88, 0.18), transparent 80%) !important;
  box-shadow: inset 2px 0 0 var(--ccp-gold) !important;
  transform: translateX(2px) !important;
  text-decoration: none !important;
}
.ccp-sidebar-link.active {
  color: var(--ccp-text-primary) !important;
  background: linear-gradient(90deg, var(--ccp-ice-soft), transparent 80%) !important;
  box-shadow: inset 2px 0 0 var(--ccp-ice-deep) !important;
  transform: none !important;
}
.ccp-sidebar-link.active:hover {
  /* keep ice on active, don't flip to gold */
  background: linear-gradient(90deg, var(--ccp-ice-soft), transparent 80%) !important;
  box-shadow: inset 2px 0 0 var(--ccp-ice-deep) !important;
  transform: none !important;
}

/* — Sidebar count badge (used by WP "Matrimoni (N)" + Staff "I Miei Servizi") — */
.ccp-sidebar-count {
  /* keep gold for primary count badges — they belong to the "work" zone */
  background: rgba(196, 162, 88, 0.16) !important;
  color: var(--ccp-gold) !important;
  border: none !important;
}

/* — WhatsApp — forest green (replaces the bright var(--ccp-wa-green)) — */
.ccp-sidebar-whatsapp {
  background: var(--ccp-wa-green) !important;
  color: #ffffff !important;
}
.ccp-sidebar-whatsapp:hover {
  background: var(--ccp-wa-green-hover) !important;
  color: #ffffff !important;
  transform: translateX(2px);
}

/* — Feature Request button (Idea) — animated "SHARE" flag — */
.ccp-sidebar-feature-btn {
  position: relative;
  overflow: visible !important;
  margin-top: 14px !important;            /* room for the flag above */
}
.ccp-sidebar-feature-btn::before,
.ccp-sidebar-feature-btn::after {
  position: absolute;
  left: 50%;
  pointer-events: none;
  animation: ccpIdeaBounce 1.6s ease-in-out infinite;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}
.ccp-sidebar-feature-btn::before {
  content: "SHARE";
  top: -22px;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--ccp-gold);
  background: rgba(196, 162, 88, 0.14);
  border: 1px solid rgba(196, 162, 88, 0.4);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(196, 162, 88, 0.4);
}
.ccp-sidebar-feature-btn::after {
  content: "▼";
  top: -8px;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--ccp-gold);
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(196, 162, 88, 0.5));
}
@keyframes ccpIdeaBounce {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50%      { transform: translateX(-50%) translateY(-3px) scale(1.08); }
}
/* Pause animation when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ccp-sidebar-feature-btn::before,
  .ccp-sidebar-feature-btn::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v5.49.1 — SIDEBAR FLOATING SHELL (Proposta A — identica al mockup)
   Desktop-only floating sidebar: rounded corners, shadow, Inter font,
   avatar circle, THE PORTAL logo. Mobile slide-down unchanged.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Desktop only: floating shell ── */
@media (min-width: 769px) {
  .ccp-sidebar {
    width: 260px !important;
    align-self: flex-start !important;    /* float at top, don't stretch full height */
    background: #111318 !important;       /* mock dark surface */
    border: 1px solid var(--ccp-border-soft) !important; /* subtle edge */
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
    height: calc(100vh - 32px) !important;
    top: 16px !important;
    margin: 16px 0 16px 16px !important;  /* float 16px from page edges */
    overflow: hidden !important;           /* clip to border-radius */
  }
  /* Nav scrolls internally; sidebar shell does not scroll */
  .ccp-sidebar-nav {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px 12px 12px !important;
    margin: 0 !important;
  }
}

/* ── Borders matching new sidebar bg ── */
.ccp-sidebar-brand {
  border-bottom-color: var(--ccp-border-soft) !important;
}
.ccp-sidebar-cta {
  border-top-color: var(--ccp-border-soft) !important;
}

/* ── THE PORTAL logo — compact ── */
.ccp-sidebar-logo-img {
  max-width: 80px !important;
}

/* ── Profile row: avatar + info side-by-side ── */
.ccp-sidebar-couple {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--ccp-border-soft) !important;
}

/* ── Circular avatar with initials ── */
.ccp-sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ccp-gold-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Info column wrapper ── */
.ccp-sidebar-couple-info {
  flex: 1;
  min-width: 0;
}

/* ── Name: Inter 13px semibold (was Bebas Neue 18px) ── */
.ccp-sidebar-couple-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Meta: date / role ── */
.ccp-sidebar-couple-meta {
  font-size: 11px !important;
  color: var(--ccp-text-muted) !important;
  margin-top: 2px !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Nav links: Inter, sentence-case, 13px, pill hover shape, flex for icons ── */
.ccp-sidebar-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 7px !important;
  padding: 9px 10px !important;
  margin: 1px 4px !important;
  color: var(--ccp-text-secondary) !important;
  border-left: none !important;
}
/* Count badge pushed to the right */
.ccp-sidebar-link .ccp-sidebar-count {
  margin-left: auto;
}

/* ── Nav icon wrapper ── */
.ccp-sidebar-nav-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ccp-sidebar-link:hover .ccp-sidebar-nav-icon,
.ccp-sidebar-link.active .ccp-sidebar-nav-icon {
  opacity: 1;
}

/* ── Section labels in nav ── */
/* Use .ccp-sidebar-nav .ccp-sidebar-nav-label (spec 0,2,0) > .ccp-sidebar-nav li (spec 0,1,1) */
.ccp-sidebar-nav .ccp-sidebar-nav-label {
  list-style: none;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ccp-ice);
  padding: 14px 14px 6px;
  margin: 0;
}
.ccp-sidebar-nav .ccp-sidebar-nav-label:first-child { padding-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   v5.49.1 — CTA CARD COMPACT (Proposta A identica)
   Sostituisce i pulsanti full-width con una card compatta 3-colonne.
   ────────────────────────────────────────────────────────────────────────── */

/* CTA area: remove old padding — card handles it */
.ccp-sidebar-cta {
  padding: 12px !important;
  gap: 8px !important;
  border-top-color: var(--ccp-border-soft) !important;
}

/* The card container */
.ccp-sidebar-cta-card {
  width: 100%;
  background: radial-gradient(circle at top right, rgba(168,197,221,0.08), transparent 60%), #15181f;
  border: 1px solid var(--ccp-ice-border);
  border-radius: 10px;
  padding: 14px;
  box-sizing: border-box;
}

/* Card title */
.ccp-sidebar-cta-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ccp-text-muted);
  margin-bottom: 10px;
}

/* 3-col grid */
.ccp-sidebar-cta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  overflow: visible;
}

/* Compact buttons in 3-col grid */
.ccp-sidebar-cta-row .ccp-sidebar-bookcall,
.ccp-sidebar-cta-row .ccp-sidebar-whatsapp,
.ccp-sidebar-cta-row .ccp-sidebar-feature-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 7px 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  background: var(--ccp-bg-base) !important;
  border: 1px solid var(--ccp-border-soft) !important;
  border-radius: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--ccp-text-secondary) !important;
}
.ccp-sidebar-cta-row .ccp-sidebar-bookcall svg,
.ccp-sidebar-cta-row .ccp-sidebar-feature-btn svg {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0;
}
.ccp-sidebar-cta-row .ccp-sidebar-whatsapp svg {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0;
}
.ccp-sidebar-cta-row .ccp-sidebar-bookcall:hover,
.ccp-sidebar-cta-row .ccp-sidebar-feature-btn:hover {
  border-color: var(--ccp-ice-border) !important;
  color: var(--ccp-ice) !important;
  background: var(--ccp-bg-base) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* WA — stays green */
.ccp-sidebar-cta-row .ccp-sidebar-whatsapp {
  background: var(--ccp-wa-green) !important;
  border-color: var(--ccp-wa-green) !important;
  color: #ffffff !important;
}
.ccp-sidebar-cta-row .ccp-sidebar-whatsapp:hover {
  background: var(--ccp-wa-green-hover) !important;
  border-color: var(--ccp-wa-green-hover) !important;
  color: #ffffff !important;
  transform: none !important;
}
/* Feature btn: SHARE flag needs overflow + margin-top */
.ccp-sidebar-cta-row .ccp-sidebar-feature-btn {
  overflow: visible !important;
  margin-top: 14px !important;
}
/* Theme toggle inside card: tighten top */
.ccp-sidebar-cta-card .ccp-sidebar-theme-toggle {
  margin-top: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════
 * DELIVERY EDITOR  (v7.13.0)
 * ══════════════════════════════════════════════════════════════════ */

.ccp-del-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

/* ── Row ── */
.ccp-del-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: opacity .2s, border-color .2s;
}
.ccp-del-row--inactive { opacity: .55; }
.ccp-del-row--active   { opacity: 1; border-color: rgba(201,169,110,.25); }
.ccp-del-row--custom   { border-style: dashed; }
.ccp-del-dragging      { opacity: .35; cursor: grabbing; }
.ccp-del-drop-over     { border-color: var(--ccp-gold) !important; background: rgba(201,169,110,.06) !important; }

/* ── Left: drag + toggle ── */
.ccp-del-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
  flex-shrink: 0;
}
.ccp-del-drag {
  cursor: grab;
  color: rgba(255,255,255,.25);
  font-size: 16px;
  line-height: 1;
  user-select: none;
}
.ccp-del-drag:active { cursor: grabbing; }

/* Toggle switch */
.ccp-del-toggle {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.ccp-del-toggle--on {
  background: rgba(201,169,110,.35);
  border-color: var(--ccp-gold);
}
.ccp-del-toggle-dot {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.40);
  transition: transform .2s, background .2s;
}
.ccp-del-toggle--on .ccp-del-toggle-dot {
  transform: translateX(14px);
  background: var(--ccp-gold);
}

/* ── Fields ── */
.ccp-del-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ccp-del-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ccp-del-field-row--title {
  align-items: center;
}
.ccp-del-label-fixed {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ccp-text-primary);
  flex: 1;
}
.ccp-del-input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  color: var(--ccp-text-primary);
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  transition: border-color .18s;
}
.ccp-del-input:focus { border-color: rgba(201,169,110,.55); }
.ccp-del-title-it,
.ccp-del-title-en { flex: 1; min-width: 100px; }
.ccp-del-url      { flex: 2; min-width: 160px; }
.ccp-del-date     { width: 130px; flex-shrink: 0; }

/* Type badge */
.ccp-del-type-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .16em;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ccp-del-type-badge--photo  { background: rgba(201,169,110,.15); color: var(--ccp-gold); }
.ccp-del-type-badge--cinema { background: rgba(150,180,201,.12); color: #96b4c9; }

/* Image preview */
.ccp-del-img-preview {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.12);
}
.ccp-del-field-row--img { align-items: center; gap: 8px; }

/* ── Actions ── */
.ccp-del-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}
.ccp-del-status {
  font-size: 11px;
  display: none;
  font-family: 'IBM Plex Mono', monospace;
}

/* ── Add row ── */
.ccp-del-add-row {
  display: flex;
  gap: 8px;
  padding: 4px 0 2px;
}

/* ── Utility button sizes ── */
.ccp-btn-xs {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  transition: background .18s, color .18s, border-color .18s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.ccp-btn-xs:hover { background: rgba(255,255,255,.08); color: #fff; }
.ccp-btn-gold {
  border-color: rgba(201,169,110,.45);
  color: var(--ccp-gold);
}
.ccp-btn-gold:hover { background: rgba(201,169,110,.12); color: var(--ccp-gold); }
.ccp-btn-outline {
  border-color: rgba(255,255,255,.20);
}
.ccp-btn-danger {
  border-color: rgba(200,80,80,.35);
  color: rgba(200,100,100,.80);
}
.ccp-btn-danger:hover { background: rgba(200,80,80,.10); color: #c85050; border-color: #c85050; }

/* ── Light theme overrides ── */
body.ccp-theme-light .ccp-del-row {
  background: rgba(0,0,0,.025);
  border-color: rgba(0,0,0,.10);
}
body.ccp-theme-light .ccp-del-row--active {
  border-color: rgba(150,110,50,.30);
}
body.ccp-theme-light .ccp-del-drag { color: rgba(0,0,0,.25); }
body.ccp-theme-light .ccp-del-toggle { border-color: rgba(0,0,0,.18); background: rgba(0,0,0,.06); }
body.ccp-theme-light .ccp-del-input {
  background: #fff;
  border-color: rgba(0,0,0,.14);
  color: var(--ccp-text-primary);
}
body.ccp-theme-light .ccp-del-input:focus { border-color: rgba(150,110,50,.55); }
body.ccp-theme-light .ccp-del-label-fixed { color: var(--ccp-text-primary); }
body.ccp-theme-light .ccp-btn-xs { color: rgba(0,0,0,.55); border-color: rgba(0,0,0,.18); }
body.ccp-theme-light .ccp-btn-xs:hover { background: rgba(0,0,0,.06); color: #000; }
body.ccp-theme-light .ccp-btn-gold { color: var(--ccp-gold-deep); border-color: rgba(150,110,50,.45); }
body.ccp-theme-light .ccp-btn-gold:hover { background: rgba(150,110,50,.08); }

/* ══════════════════════════════════════════════════════════════════
   FASE 3 (v5.65.0) — Editorial section headers + Bento foundations
══════════════════════════════════════════════════════════════════ */

/* Event-type badge (sidebar couple header) */
.ccp-event-type-badge {
  display: inline-block;
  background: var(--ccp-bg-surface);
  color: var(--ccp-gold);
  padding: 3px 12px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--ccp-font-sans);
  margin-top: 6px;
}

/* Editorial header: UPPERCASE • muted • gold dot */
.ccp-section-title-editorial {
  font-family: var(--ccp-font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ccp-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
}
.ccp-section-title-editorial::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ccp-gold);
  flex-shrink: 0;
}

/* Client bento home grid */
.ccp-cl-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.ccp-cl-bento-card {
  background: var(--ccp-bg-surface);
  border: 1px solid var(--ccp-border-soft);
  border-radius: var(--ccp-radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s var(--ccp-easing);
}
.ccp-cl-bento-card:hover { border-color: var(--ccp-border-medium); }
a.ccp-cl-bento-card { text-decoration: none; cursor: pointer; }
.ccp-cl-bento-card--span2 { grid-column: span 2; }
.ccp-cl-bento-card--span4 { grid-column: span 4; }
.ccp-cl-bento-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ccp-text-muted);
}
.ccp-cl-bento-value {
  font-family: var(--ccp-font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--ccp-text-primary);
  letter-spacing: 1px;
}
.ccp-cl-bento-sub {
  font-size: 12px;
  color: var(--ccp-text-muted);
  margin-top: 2px;
}
.ccp-cl-bento-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 4px;
  align-self: flex-start;
}
.ccp-cl-bento-tag--gold    { background: var(--ccp-gold-soft); color: var(--ccp-gold); }
.ccp-cl-bento-tag--green   { background: var(--ccp-green-soft); color: var(--ccp-green-hover); }
.ccp-cl-bento-tag--muted   { background: var(--ccp-bg-hover); color: var(--ccp-text-muted); }
.ccp-cl-bento-link {
  font-size: 12px;
  color: var(--ccp-gold);
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
  transition: color 0.15s;
}
.ccp-cl-bento-link:hover { color: var(--ccp-gold-hover); }
/* Progress bar */
.ccp-cl-progress-bar {
  width: 100%;
  height: 3px;
  background: var(--ccp-border-soft);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.ccp-cl-progress-fill {
  height: 100%;
  background: var(--ccp-gold);
  border-radius: 2px;
  transition: width 0.6s var(--ccp-easing);
}
/* Message preview inside card */
.ccp-cl-msg-preview {
  font-size: 12px;
  color: var(--ccp-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
}
/* Moodboard 4-grid inside card */
.ccp-cl-moodboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
  border-radius: 4px;
  overflow: hidden;
}
.ccp-cl-moodboard-thumb {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
}
/* Responsive */
@media (max-width: 900px) {
  .ccp-cl-bento { grid-template-columns: repeat(2, 1fr); }
  .ccp-cl-bento-card--span4 { grid-column: span 2; }
}
@media (max-width: 500px) {
  .ccp-cl-bento { grid-template-columns: 1fr; gap: 10px; }
  .ccp-cl-bento-card--span2,
  .ccp-cl-bento-card--span4 { grid-column: span 1; }
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT THEME — Client + Staff Dashboard (v5.70.0)
══════════════════════════════════════════════════════════════════ */

/* Section title */
body.ccp-theme-light .ccp-section-title { color: var(--ccp-text-primary); }

/* Sidebar couple area */
body.ccp-theme-light .ccp-sidebar-couple { border-color: var(--ccp-border-soft); }
body.ccp-theme-light .ccp-sidebar-couple-meta { color: var(--ccp-text-muted) !important; }

/* Sidebar logout button */
body.ccp-theme-light .ccp-sidebar-logout-top { color: var(--ccp-text-muted) !important; }
body.ccp-theme-light .ccp-sidebar-logout-top:hover { color: var(--ccp-text-primary) !important; }

/* Wedding info italic meta */
body.ccp-theme-light .ccp-dash-wedding-info { color: var(--ccp-text-muted); }

/* Logout link */
body.ccp-theme-light .ccp-logout { color: var(--ccp-text-muted); border-color: var(--ccp-border-soft); }
body.ccp-theme-light .ccp-logout:hover { color: var(--ccp-text-primary); border-color: var(--ccp-border-medium); }

/* Generic buttons */
body.ccp-theme-light .ccp-btn { border-color: var(--ccp-border-medium) !important; }
body.ccp-theme-light .ccp-btn:hover { background: var(--ccp-bg-hover) !important; }
body.ccp-theme-light .ccp-submit-btn:hover { background: var(--ccp-bg-hover) !important; }
body.ccp-theme-light .ccp-login-btn:hover { background: var(--ccp-bg-hover) !important; }
body.ccp-theme-light .ccp-register-toggle-btn { border-color: var(--ccp-border-medium) !important; }

/* Link cards (deliveries) */
body.ccp-theme-light .ccp-link-card:hover { background: var(--ccp-bg-hover); }

/* Finance inputs */
body.ccp-theme-light .ccp-fin-input-wrap { border-color: var(--ccp-border-medium); }
body.ccp-theme-light .ccp-fin-input-wrap:focus-within { border-color: var(--ccp-gold); box-shadow: 0 0 0 1px var(--ccp-gold); }
body.ccp-theme-light .ccp-fin-currency { background: var(--ccp-bg-sunken); border-color: var(--ccp-border-medium); }
body.ccp-theme-light .ccp-fin-select { border-color: var(--ccp-border-medium); }
body.ccp-theme-light .ccp-fin-select:focus { border-color: var(--ccp-gold); }

/* Vendor invite modal */
body.ccp-theme-light .ccp-vi-btn-send,
body.ccp-theme-light .ccp-vi-btn-link { border-color: var(--ccp-border-medium); }
body.ccp-theme-light .ccp-vi-btn-send:hover { border-color: var(--ccp-border-strong); background: var(--ccp-bg-hover); }

/* Vendor rows */
body.ccp-theme-light .ccp-vendor-row:hover { background: var(--ccp-bg-hover); }

/* Sidebar CTA buttons */
body.ccp-theme-light .ccp-sidebar-cta-row .ccp-sidebar-bookcall,
body.ccp-theme-light .ccp-sidebar-cta-row .ccp-sidebar-feature-btn {
  background: var(--ccp-bg-surface) !important;
  border-color: var(--ccp-border-soft) !important;
  color: var(--ccp-text-secondary) !important;
}
body.ccp-theme-light .ccp-sidebar-cta-row .ccp-sidebar-bookcall:hover,
body.ccp-theme-light .ccp-sidebar-cta-row .ccp-sidebar-feature-btn:hover {
  background: var(--ccp-bg-hover) !important;
  border-color: var(--ccp-gold) !important;
}

/* Copper banner (staff profile) */
body.ccp-theme-light .ccp-banner-copper { color: var(--ccp-text-primary); }

/* Event-type badge */
body.ccp-theme-light .ccp-event-type-badge {
  background: var(--ccp-bg-hover) !important;
  color: var(--ccp-gold) !important;
}

/* ── Profile photo (v5.75.0) ── */
.ccp-profile-photo-section {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ccp-profile-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ccp-profile-photo-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--ccp-gold-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s;
  flex-shrink: 0;
}
.ccp-profile-photo-circle:hover { transform: scale(1.04); }
.ccp-profile-photo-initials { pointer-events: none; }
.ccp-profile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.ccp-profile-photo-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.48);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
  color: #fff;
  pointer-events: none;
}
.ccp-profile-photo-circle:hover .ccp-profile-photo-overlay { opacity: 1; }
.ccp-profile-photo-hint {
  font-size: 11px;
  color: var(--ccp-text-muted);
  margin: 0;
  letter-spacing: .02em;
}
/* Sidebar avatar with photo */
.ccp-sidebar-avatar.ccp-avatar-has-photo {
  padding: 0;
  overflow: hidden;
  background: transparent;
}
.ccp-sidebar-avatar.ccp-avatar-has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* Cropper modal */
.ccp-cropper-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ccp-cropper-inner {
  background: var(--ccp-bg-raised);
  border-radius: 8px;
  padding: 24px;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ccp-cropper-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ccp-text-primary);
  margin: 0;
  text-align: center;
}
.ccp-cropper-img-wrap {
  width: 100%;
  max-height: 360px;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
}
.ccp-cropper-img-wrap img { max-width: 100%; display: block; }
.ccp-cropper-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
/* Cropper circle mask hint */
.cropper-view-box,
.cropper-face { border-radius: 50%; }

/* ── Cropper zoom slider (v5.75.1) ── */
.ccp-cropper-zoom-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}
.ccp-cropper-zoom-wrap svg {
  flex-shrink: 0;
  color: var(--ccp-text-muted);
}
#ccp-zoom-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 2px;
  background: var(--ccp-border-medium);
  outline: none;
  cursor: pointer;
}
#ccp-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ccp-gold-deep);
  cursor: pointer;
  transition: transform .1s;
}
#ccp-zoom-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
#ccp-zoom-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ccp-gold-deep);
  cursor: pointer;
  border: none;
}

/* ── Vendor card photo avatar (v5.75.2) ── */
.ccp-vendor-avatar.ccp-avatar-has-photo {
  padding: 0;
  overflow: hidden;
  background: transparent;
}
.ccp-vendor-avatar.ccp-avatar-has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}