/* =========================================================
   WPPlanit Remote Events – HOST color skin
   Keeps the exact remote.css layout
   Applies when wrapper has .wpr-style-host
   ========================================================= */

   .wpr-style-host{
    /* Core palette overrides */
    --border: #e7e1d7;   /* warm beige lines */
    --text:   #2b2b2b;   /* dark ink */
    --muted:  #8a8a8a;   /* muted warm grey */
    --bg:     #ffffff;
    --soft:   #fbfaf8;   /* warm light background */
  }
  
  /* Card title color (host gold) */
  .wpr-style-host .wpr-title,
  .wpr-style-host .wpr-title a{
    color: #c7a36a;
  }
  
  /* Hover stays subtle (same behavior as remote) */
  .wpr-style-host .wpr-card:hover{
    border-color: #d8cfc2;
  }
  
  /* Divider line tone */
  .wpr-style-host .wpr-divider{
    background: var(--border);
  }
  
  /* Select arrow + focus ring use warm muted tone */
  .wpr-style-host .wpr-select{
    background-image:
      linear-gradient(45deg, transparent 50%, var(--muted) 50%),
      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  }
  
  .wpr-style-host .wpr-select:focus{
    border-color: #cbbba7;
    box-shadow: 0 0 0 3px rgba(203,187,167,.25);
  }
  
  /* Slightly warmer thumb placeholder (only when image missing) */
  .wpr-style-host .wpr-thumb{
    background: #f3efe9;
  }
  
  /* Badge fallback color adjusted to host palette */
  .wpr-style-host .wpr-badge{
    background-color: var(--badge-bg, #c7a36a);
  }

  /* ---------- Month separator ---------- */
  .wpr-style-host .wpr-month-separator{
  grid-column: 1 / -1;
  margin: 28px 0 12px;
  padding-bottom: 6px;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;

  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

/* ---------- Title dot (seminar type color) ---------- */
.wpplanit-remote-wrap .wpr-title a{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.wpplanit-remote-wrap .wpr-title-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:transparent; /* set via JS */
  flex:0 0 auto;
}