:root{
  --ap-primary:#2f6fed;
  --ap-accent-orange: #ffb91e; /* CHANGED: Your correct brand color */
  --ap-bg:#f8fafc;
  --ap-card:#ffffff;
  --ap-muted:#6b7280;
  --ap-radius:14px;
}
.apptpro-widget{max-width:980px;margin:24px auto;padding:24px;background:var(--ap-card);border-radius:var(--ap-radius);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.apptpro-stepper{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.apptpro-step{height:6px;background:#e5e7eb;flex:1;border-radius:999px;position:relative}
.apptpro-step.is-active::after{content:'';position:absolute;inset:0;background:var(--ap-primary);border-radius:999px;transform:scaleX(.5);transform-origin:left}
.apptpro-title{font-size:22px;font-weight:700;margin:10px 0 18px}
.apptpro-services{display:grid;gap:12px}
.apptpro-card{border:1px solid #e5e7eb;border-radius:12px;padding:14px;display:flex;gap:12px;align-items:flex-start;background:#fff}
.apptpro-card input{margin-top:4px}
.apptpro-card h4{margin:0;font-size:16px}
.apptpro-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.apptpro-btn{background:#111827;color:#fff;padding:10px 14px;border-radius:10px;border:none;cursor:pointer}
.apptpro-btn.primary{background:var(--ap-primary)}
.apptpro-calendar{display:grid;gap:12px}
.apptpro-times{display:flex;flex-wrap:wrap;gap:8px}
.apptpro-pill{border:1px solid #e5e7eb;border-radius:999px;padding:8px 12px;background:#fff;cursor:pointer; transition: all 0.2s ease;}
.apptpro-form{display:grid;gap:10px}
.apptpro-row{display:grid;gap:6px}
.apptpro-input{padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px}
.apptpro-success{border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#f0f9ff}
@media (min-width:720px){
  .apptpro-two{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
}

/* === FINAL STYLES WITH CORRECT COLOR === */

/* This rule handles BOTH hover and selected states for date AND time. */
.apptpro-widget .apptpro-pill.is-selected,
.apptpro-widget .apptpro-pill:hover {
  background-color: var(--ap-accent-orange) !important;
  color: #ffffff !important;
  border-color: var(--ap-accent-orange) !important;
  box-shadow: none !important;
}

/* Style for the calendar navigation arrows to be circular */
.apptpro-calendar .apptpro-btn {
    border-radius: 50%;
    font-weight: bold;
    width: 36px;
    height: 36px;
    padding: 0;
}