/* ══ Appointment page — Moe's Cuts design ══ */
    .appt-page {
      min-height: 100vh;
      background:
        linear-gradient(135deg, rgba(8,8,8,.88) 0%, rgba(26,10,10,.82) 100%),
        url('admin/uploads/reg.jpg') center center / cover no-repeat fixed;
      padding-top: 80px;
      padding-bottom: 80px;
    }
    .appt-container { width:100%; max-width:860px; margin:0 auto; padding:40px 16px; }
    .appt-title {
      font-family:var(--font-serif); font-size:clamp(1.6rem,4vw,2.2rem);
      font-weight:800; color:#fff; text-align:center;
      margin:0 0 6px; letter-spacing:-.02em;
    }
    .appt-subtitle {
      font-family:var(--font-sans); font-size:.8rem; color:rgba(255,255,255,.55);
      text-align:center; margin:0 0 28px; letter-spacing:.06em; text-transform:uppercase;
    }
    /* Steps */
    .appt-steps { display:flex; justify-content:space-between; margin-bottom:32px; position:relative; padding:0 4px; }
    .appt-steps::before { content:''; position:absolute; top:18px; left:10%; right:10%; height:2px; background:rgba(255,255,255,.08); z-index:0; }
    .appt-step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; z-index:1; }
    .appt-step-num {
      width:36px; height:36px; border-radius:50%;
      background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.15);
      display:flex; align-items:center; justify-content:center;
      font-family:var(--font-sans); font-weight:800; font-size:13px; color:var(--muted2);
      margin-bottom:7px; transition:all .3s;
    }
    .appt-step.active .appt-step-num { background:linear-gradient(135deg,var(--crimson),var(--crimson2)); border-color:var(--crimson); color:#fff; box-shadow:0 4px 16px rgba(192,57,43,.4); }
    .appt-step.completed .appt-step-num { background:#16a34a; border-color:#16a34a; color:#fff; }
    .appt-step-label { font-family:var(--font-sans); font-size:.68rem; color:rgba(255,255,255,.45); text-align:center; letter-spacing:.06em; text-transform:uppercase; }
    .appt-step.active .appt-step-label { color:#fff; }
    /* Alerts */
    .appt-alert { padding:13px 16px; border-radius:var(--radius); font-family:var(--font-sans); font-size:.85rem; font-weight:600; margin-bottom:18px; display:none; align-items:center; gap:10px; animation:fadeSlide .25s ease; }
    .appt-alert.show { display:flex; }
    .appt-alert.error { background:rgba(192,57,43,.15); border:1px solid rgba(192,57,43,.4); color:var(--crimson3); }
    .appt-alert.success { background:rgba(16,163,74,.12); border:1px solid rgba(16,163,74,.35); color:#6ee7b7; }
    @keyframes fadeSlide { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
    /* Glass cards */
    .appt-card { background:rgba(0,0,0,.15); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-xl); padding:28px 28px 24px; margin-bottom:18px; position:relative; overflow:hidden; }
    .appt-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--crimson),var(--gold),var(--crimson)); }
    .appt-card-title { font-family:var(--font-sans); font-size:clamp(14px,2.5vw,18px); font-weight:800; color:#fff; margin:0 0 20px; display:flex; align-items:center; gap:10px; letter-spacing:.02em; text-transform:uppercase; }
    .appt-card-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--crimson),var(--crimson2)); display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; flex-shrink:0; }
    /* Grid */
    .appt-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
    /* Select items */
    .appt-select-item { background:rgba(255,255,255,.03); border:2px solid rgba(255,255,255,.09); border-radius:var(--radius); padding:14px 16px; cursor:pointer; transition:all .2s; display:flex; align-items:center; font-family:var(--font-sans); }
    .appt-select-item:hover { border-color:rgba(192,57,43,.4); background:rgba(192,57,43,.06); }
    .appt-select-item.selected { border-color:var(--crimson); background:rgba(192,57,43,.15); box-shadow:0 0 0 1px var(--crimson); }
    .appt-provider-card { flex-direction:row; text-align:left; gap:14px; align-items:center; }
    .appt-provider-img { width:72px; height:72px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
    .appt-provider-img img { width:100%; height:100%; object-fit:cover; }
    .appt-provider-name { font-weight:800; font-size:clamp(11px,1.8vw,13px); color:#fff; }
    .appt-provider-meta { font-size:11px; color:rgba(255,255,255,.55); margin-top:4px; }
    .appt-service-card { flex-direction:row; text-align:left; gap:14px; justify-content:flex-start; align-items:center; }
    .appt-service-icon { width:72px; height:72px; border-radius:10px; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
    .appt-service-icon img { width:100%; height:100%; object-fit:cover; }
    .appt-service-info { flex:1; min-width:0; }
    .appt-service-name { font-weight:800; font-size:clamp(11px,1.8vw,13px); color:#fff; margin-bottom:4px; line-height:1.3; }
    .appt-service-meta { font-size:clamp(10px,1.5vw,12px); color:rgba(255,255,255,.65); }
    /* Calendar */
    .appt-cal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
    .appt-cal-title { font-family:var(--font-serif); font-size:1rem; font-weight:700; color:#fff; }
    .appt-cal-nav { display:flex; gap:8px; }
    .appt-cal-nav button { width:34px; height:34px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--offwhite); cursor:pointer; transition:all .2s; }
    .appt-cal-nav button:hover { background:rgba(255,255,255,.1); }
    .appt-cal-nav button:disabled { opacity:.3; cursor:not-allowed; }
    .appt-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
    .appt-day-name { text-align:center; font-size:10px; color:rgba(255,255,255,.5); font-weight:700; padding:6px 0; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.06em; }
    .appt-day { aspect-ratio:1; border-radius:var(--radius); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:700; font-size:12px; color:#fff; font-family:var(--font-sans); transition:all .2s; }
    .appt-day:hover { border-color:rgba(192,57,43,.4); background:rgba(192,57,43,.08); }
    .appt-day.disabled { opacity:.3; cursor:not-allowed; pointer-events:none; }
    .appt-day.selected { background:linear-gradient(135deg,var(--crimson),var(--crimson2)); border-color:var(--crimson); box-shadow:0 4px 12px rgba(192,57,43,.35); }
    /* Times */
    .appt-times { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-top:18px; }
    .appt-times.hidden { display:none!important; }
    .appt-time { padding:13px 8px; border-radius:var(--radius); background:rgba(255,255,255,.03); border:2px solid rgba(255,255,255,.09); cursor:pointer; text-align:center; font-family:var(--font-sans); transition:all .2s; }
    .appt-time:hover { border-color:rgba(192,57,43,.4); background:rgba(192,57,43,.08); }
    .appt-time.selected { border-color:var(--crimson); background:rgba(192,57,43,.15); }
    .appt-time-text { font-weight:800; font-size:13px; color:#fff; }
    .appt-time-label { font-size:10px; color:rgba(255,255,255,.6); margin-top:2px; }
    /* Confirm fields */
    .appt-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
    .appt-field label { font-family:var(--font-sans); font-size:.72rem; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:.1em; text-transform:uppercase; }
    .appt-field-inner { position:relative; display:flex; align-items:center; }
    .appt-field-inner i { position:absolute; left:14px; color:var(--muted); font-size:.9rem; pointer-events:none; z-index:1; }
    .appt-field-inner input { width:100%; padding:13px 14px 13px 40px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); color:var(--offwhite); font-family:var(--font-sans); font-size:.9rem; outline:none; transition:all .22s; -webkit-appearance:none; }
    .appt-field-inner input::placeholder { color:rgba(255,255,255,.22); }
    .appt-field-inner input:focus { border-color:var(--crimson); background:rgba(0,0,0,.45); box-shadow:0 0 0 3px rgba(192,57,43,.15); }
    .appt-field-inner input[readonly] { opacity:.65; cursor:not-allowed; }
    /* Buttons */
    .appt-actions { display:flex; gap:12px; margin-top:8px; }
    .appt-btn { flex:1; padding:14px 20px; border-radius:var(--radius); font-family:var(--font-sans); font-size:.85rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border:none; transition:all .25s; display:flex; align-items:center; justify-content:center; gap:7px; }
    .appt-btn-primary { background:linear-gradient(135deg,var(--crimson),var(--crimson2)); color:#fff; box-shadow:0 6px 20px rgba(192,57,43,.35); }
    .appt-btn-primary:hover { background:linear-gradient(135deg,var(--crimson2),var(--crimson)); transform:translateY(-2px); box-shadow:0 10px 28px rgba(192,57,43,.45); }
    .appt-btn-primary:active { transform:translateY(0); }
    .appt-btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
    .appt-btn-outline { background:transparent; color:var(--crimson3); border:2px solid var(--crimson); }
    .appt-btn-outline:hover { background:rgba(192,57,43,.1); transform:translateY(-1px); }
    /* Sections */
    .appt-section { display:none; }
    .appt-section.active { display:block; }
    .hidden { display:none!important; }
    @media(max-width:768px){
      .appt-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
    }
    @media(max-width:600px){
      .appt-container{padding:24px 12px;}
      .appt-card{padding:18px 14px;}
      .appt-steps::before{display:none;}
      .appt-grid{grid-template-columns:1fr;}
      .appt-service-icon{width:60px;height:60px;}
      .appt-times{grid-template-columns:repeat(3,1fr);}
      .appt-actions{flex-direction:column;}
    }
    @media(max-width:380px){
      .appt-times{grid-template-columns:repeat(2,1fr);}
    }