:root { --primary:#0f766e; --danger:#dc2626; --muted:#64748b; --bg:#f8fafc;}
*{box-sizing:border-box} body{font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:var(--bg); margin:0; color:#0f172a}
a{color:var(--primary); text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.card{background:#fff;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.06);padding:1rem;margin:1rem 0}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:12px;border:0;cursor:pointer;background:var(--primary);color:#fff}
.btn.secondary{background:#334155}
.btn.danger{background:var(--danger)}


/* Pay Now button (Stripe-style) */
.btn-pay{
  display:inline-block;
  background:#635bff;
  color:#ffffff;
  padding:0.45rem 1.1rem;
  border-radius:999px;
  font-size:0.9rem;
  font-weight:600;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn-pay:hover{
  background:#4a3dd9;
  box-shadow:0 3px 8px rgba(0,0,0,0.18);
}
.btn-pay:active{
  transform:translateY(1px) scale(0.98);
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.form-group{margin-bottom:1rem}
label{display:block;margin-bottom:.4rem;color:#334155}
input,select,textarea{width:100%;padding:.6rem .7rem;border:1px solid #e2e8f0;border-radius:10px}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.header{background:#fff;padding:1rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}
.nav a{margin-right:1rem}
.tag{padding:.2rem .5rem;border-radius:8px;background:#e2e8f0;display:inline-block;font-size:.8rem}
.slot{padding:.5rem .7rem;border-radius:10px;border:1px solid #e2e8f0;display:inline-block;margin:.25rem .25rem}
.slot.selected {
    background: #fff !important;          /* pure white */
    border: 3px solid #000 !important;    /* thick black border */
    color: #000 !important;
    font-weight: 700 !important;
    box-shadow: none !important;          /* remove glow */
    filter: none !important;              /* remove green tint */
    transform: scale(1.1);                /* make it POP */
    transition: transform 0.1s ease-out;
    border-radius: 10px !important;
}

.slot.unavailable{background:#fee2e2;border-color:#fecaca;color:#991b1b}
.slot.available{background:#dcfce7;border-color:#bbf7d0;color:#14532d;cursor:pointer}
.badge{background:#e2e8f0;padding:.2rem .5rem;border-radius:8px}
hr{border:0;border-top:1px solid #e2e8f0;margin:1rem 0}
.small{color:var(--muted);font-size:.9rem}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.6rem;border-bottom:1px solid #e2e8f0;text-align:left}
.alert{padding:.8rem 1rem;border-radius:10px;margin:.5rem 0}
.alert.error{background:#fee2e2;color:#991b1b}
.alert.success{background:#dcfce7;color:#14532d}
footer{padding:2rem 0;color:#64748b;text-align:center}


/* ---- Outlook-style week calendar ---- */
.calendar-week{
  margin-top:1.25rem;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#f9fafb;
  overflow:hidden;
  font-size:.78rem;
}

.calendar-week-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem .9rem;
  background:#e5e7eb;
}

.calendar-week-header .cal-title{
  font-weight:600;
  color:#0f172a;
}

.cal-nav{
  color:var(--primary);
  font-size:.85rem;
}

.calendar-week-body{
  display:grid;
  grid-template-columns:72px repeat(7,1fr);
  border-top:1px solid #e2e8f0;
  /* no max-height, no vertical scroll */
}

/* time column */
.oc-time-col{
  background:#f9fafb;
  border-right:1px solid #e2e8f0;
}
.oc-corner-cell{
  border-bottom:1px solid #e2e8f0;
}
.oc-time-cell{
  height:32px;
  padding:0 .5rem;
  border-bottom:1px solid #e2e8f0;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  font-size:.7rem;
  color:#64748b;
}

/* day columns */
.oc-day-col{
  border-right:1px solid #e2e8f0;
  background:#ffffff;
}

.oc-day-header{
  height:32px;
  padding:.2rem .4rem;
  border-bottom:1px solid #e2e8f0;
  text-align:center;
  font-weight:600;
  font-size:.8rem;
  background:#eef0f4;
}

/* each 30-minute background slot */
.oc-slot{
  position:relative;
  height:32px;
  border-bottom:1px solid #eef2f7;
}

/* event bubble */
.oc-event{
  position:absolute;
  inset:2px 4px 2px 4px;   /* top/right/bottom/left */
  border-radius:6px;
  background:#e0ecff;
  border-left:3px solid var(--primary);
  padding:1px 6px;
  box-shadow:0 1px 2px rgba(15,23,42,0.12);
  display:flex;
  flex-direction:column;
  justify-content:center;
  font-size:.7rem;
  line-height:1.15;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* status colours */
.oc-event-pending{
  background:#fef3c7;
  border-left-color:#d97706;
}
.oc-event-paid{
  background:#dcfce7;
  border-left-color:#16a34a;
}

.oc-event-title{
  font-weight:600;
}

.oc-event-line{
  color:#374151;
}

.oc-event-company{
  color:#6b7280;
  font-size:.68rem;
}