/* ════════════════════════════════════════════════════════════
   PharmBook — Public Stylesheet
   Headings : Trajan Bold (licensed) → falls back to Cinzel
   Body/UI  : Inter
   ════════════════════════════════════════════════════════════ */
@import url('https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/2.44.0/iconfont/tabler-icons.min.css');

@font-face {
  font-family: 'Trajan Bold';
  src: url('../../assets/fonts/TrajanPro-Bold.woff2') format('woff2'),
       url('../../assets/fonts/TrajanPro-Bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --pb-navy:        #1a2b5e;
  --pb-navy-deep:    #0f1c40;
  --pb-navy-light:   #2d4a8a;
  --pb-gold:         #b8924a;
  --pb-ink:          #1c1e26;
  --pb-muted:        #6b7280;
  --pb-line:         #e3e6f0;
  --pb-surface:      #fafbfd;
  --pb-success-bg:   #e8f5e9;
  --pb-success-text: #1b5e20;
  --pb-warn-bg:      #fff4e0;
  --pb-warn-text:    #8a5a00;
  --pb-danger-bg:    #fdecea;
  --pb-danger-text:  #a31515;
  --pb-radius-sm:    6px;
  --pb-radius-md:    10px;
  --pb-radius-lg:    16px;
  --pb-shadow-sm:    0 1px 2px rgba(15, 28, 64, 0.06);
  --pb-shadow-md:    0 6px 20px rgba(15, 28, 64, 0.08);
  --pb-shadow-lg:    0 16px 40px rgba(15, 28, 64, 0.12);
  --pb-font-heading: 'Trajan Bold', 'Cinzel', 'Times New Roman', serif;
  --pb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
.pb-services-wrap, .pb-booking-app { font-family: var(--pb-font-body); color: var(--pb-ink); }

/* ─── SERVICE CARDS ───────────────────────────────────────── */
.pb-services-wrap{width:100%}

.pb-cat-filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.pb-cat-pill{background:#fff;border:1.5px solid var(--pb-line);border-radius:24px;padding:9px 20px;font-size:13px;font-weight:500;color:var(--pb-muted);cursor:pointer;font-family:var(--pb-font-body);transition:all .2s ease;letter-spacing:.01em}
.pb-cat-pill:hover{border-color:var(--pb-navy);color:var(--pb-navy)}
.pb-cat-pill.active{background:var(--pb-navy);border-color:var(--pb-navy);color:#fff;box-shadow:var(--pb-shadow-sm)}
.pb-no-services{color:var(--pb-muted);padding:24px 0;text-align:center;font-size:14px}

.pb-services-grid{display:grid;gap:26px}
.pb-cols-1{grid-template-columns:1fr}
.pb-cols-2{grid-template-columns:repeat(2,1fr)}
.pb-cols-3{grid-template-columns:repeat(3,1fr)}
.pb-cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.pb-cols-3,.pb-cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.pb-cols-2,.pb-cols-3,.pb-cols-4{grid-template-columns:1fr}}

.pb-svc-card{
  position:relative;background:#fff;border:1.5px solid var(--pb-line);border-radius:var(--pb-radius-lg);
  padding:30px 26px 24px;transition:all .28s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;box-shadow:var(--pb-shadow-sm);
}
.pb-svc-card:hover{
  background:var(--pb-navy);border-color:var(--pb-navy);
  transform:translateY(-4px);box-shadow:var(--pb-shadow-lg);
}
.pb-svc-card:hover .pb-svc-title,
.pb-svc-card:hover .pb-svc-subtitle,
.pb-svc-card:hover .pb-svc-price,
.pb-svc-card:hover .pb-price-unit{color:#fff!important}
.pb-svc-card:hover .pb-svc-divider{border-color:rgba(255,255,255,.25)}
.pb-svc-card:hover .pb-btn-book{background:#fff;color:var(--pb-navy);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.pb-svc-card:hover .pb-featured-badge{background:rgba(255,255,255,.16);color:#fff}

.pb-featured{background:var(--pb-navy);border-color:var(--pb-navy);box-shadow:var(--pb-shadow-md)}
.pb-featured .pb-svc-title{color:#fff!important}
.pb-featured .pb-svc-subtitle{color:rgba(255,255,255,.78)!important}
.pb-featured .pb-svc-price{color:#fff!important}
.pb-featured .pb-price-unit{color:rgba(255,255,255,.7)!important}
.pb-featured .pb-svc-divider{border-color:rgba(255,255,255,.25)}
.pb-featured .pb-btn-book{background:#fff;color:var(--pb-navy)}
.pb-featured:hover .pb-btn-book{background:rgba(255,255,255,.92)}

.pb-featured-badge{position:absolute;top:18px;right:18px;background:rgba(184,146,74,.14);color:var(--pb-gold);font-size:10.5px;font-weight:700;padding:4px 11px;border-radius:20px;letter-spacing:.07em;text-transform:uppercase}
.pb-svc-cat-tag{display:inline-block;background:rgba(26,43,94,.07);color:var(--pb-navy);font-size:11px;font-weight:600;padding:4px 11px;border-radius:20px;letter-spacing:.03em;margin-bottom:14px;width:max-content}
.pb-svc-card:hover .pb-svc-cat-tag{background:rgba(255,255,255,.16);color:#fff}
.pb-featured .pb-svc-cat-tag{background:rgba(255,255,255,.14);color:#fff}

.pb-svc-title{
  font-family:var(--pb-font-heading);font-size:18px;font-weight:700;color:var(--pb-navy);
  letter-spacing:.025em;margin:0 0 14px;line-height:1.35;text-transform:uppercase;
}
.pb-svc-subtitle{font-size:14px;color:var(--pb-muted);line-height:1.65;margin:0 0 18px;flex:1}
.pb-svc-price{font-size:22px;font-weight:700;color:var(--pb-navy);margin:0 0 16px;font-family:var(--pb-font-body)}
.pb-price-amount{font-size:29px;letter-spacing:-.01em}
.pb-price-unit{font-size:13px;font-weight:500;color:var(--pb-muted)}
.pb-svc-divider{border:none;border-top:1.5px solid var(--pb-line);margin:0 0 18px}
.pb-btn-book{
  display:inline-block;background:var(--pb-navy);color:#fff;text-decoration:none;text-align:center;
  padding:13px 26px;border-radius:8px;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  transition:all .2s ease;border:2px solid transparent;font-family:var(--pb-font-body);
}
.pb-btn-book:hover{opacity:.92;text-decoration:none;color:#fff}

/* ─── BOOKING FORM ────────────────────────────────────────── */
.pb-booking-app{max-width:880px;margin:0 auto;position:relative}

.pb-progress{display:flex;align-items:center;margin-bottom:42px}
.pb-progress-step{display:flex;align-items:center;gap:10px;flex-shrink:0}
.pb-step-circle{width:34px;height:34px;border-radius:50%;background:#eef0f7;color:#9aa0b4;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .25s ease;font-family:var(--pb-font-body)}
.pb-progress-step.active .pb-step-circle{background:var(--pb-navy);color:#fff;box-shadow:0 0 0 5px rgba(26,43,94,.12)}
.pb-progress-step.done .pb-step-circle{background:var(--pb-success-text);color:#fff}
.pb-progress-step span{font-size:13px;color:#9aa0b4;font-weight:600;letter-spacing:.01em}
.pb-progress-step.active span{color:var(--pb-navy)}
.pb-progress-step.done span{color:var(--pb-success-text)}
.pb-progress-line{flex:1;height:2px;background:var(--pb-line);margin:0 14px}
.pb-progress-line.filled{background:var(--pb-success-text)}

.pb-step-panel{animation:pb-fadein .3s ease}
@keyframes pb-fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.pb-step-title{
  font-family:var(--pb-font-heading);font-size:23px;font-weight:700;color:var(--pb-navy);
  margin:0 0 28px;letter-spacing:.02em;text-transform:uppercase;
}

.pb-selected-svc{margin-bottom:24px}
.pb-svc-pill{display:inline-flex;align-items:center;gap:8px;background:#eef1fa;color:var(--pb-navy);border-radius:9px;padding:11px 16px;font-size:14px;font-weight:600;border:1px solid #dde2f3}

.pb-date-time-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:24px}
@media(max-width:600px){.pb-date-time-grid{grid-template-columns:1fr}}
.pb-label{display:block;font-size:13px;font-weight:600;color:#3a3f4c;margin-bottom:9px;letter-spacing:.01em}
.pb-hint{font-size:12px;color:var(--pb-muted);margin-top:10px;display:flex;align-items:center;gap:6px}

.pb-date-input{
  width:100%;border:1.5px solid var(--pb-line);border-radius:9px;padding:12px 14px;font-size:14px;
  color:var(--pb-ink);background:var(--pb-surface);font-family:var(--pb-font-body);cursor:pointer;
  transition:border .15s ease;
}
.pb-date-input:focus{border-color:var(--pb-navy);outline:none;background:#fff}

/* Slots */
.pb-slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media(max-width:400px){.pb-slots-grid{grid-template-columns:repeat(2,1fr)}}
.pb-slot{
  border:1.5px solid var(--pb-line);border-radius:9px;padding:11px 7px;font-size:13px;text-align:center;
  cursor:pointer;color:#3a3f4c;background:#fff;transition:all .15s ease;font-family:var(--pb-font-body);font-weight:500;
}
.pb-slot:hover:not(.pb-slot-taken){border-color:var(--pb-navy);background:#f0f4ff;color:var(--pb-navy)}
.pb-slot.selected{border-color:var(--pb-navy);background:var(--pb-navy);color:#fff;font-weight:700;box-shadow:var(--pb-shadow-sm)}
.pb-slot-taken{opacity:.4;cursor:not-allowed;text-decoration:line-through}

/* Alerts */
.pb-alert{display:flex;align-items:flex-start;gap:10px;border-radius:9px;padding:14px 16px;font-size:13.5px;line-height:1.5}
.pb-alert-warn{background:var(--pb-warn-bg);color:var(--pb-warn-text)}

/* Form fields */
.pb-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.pb-full{grid-column:span 2}
@media(max-width:560px){.pb-form-grid{grid-template-columns:1fr}.pb-full{grid-column:1}}
.pb-field label{display:block;font-size:13px;font-weight:600;color:#3a3f4c;margin-bottom:7px;letter-spacing:.01em}
.pb-field input[type=text],.pb-field input[type=email],.pb-field input[type=tel],.pb-field input[type=date],.pb-field select,.pb-field textarea,.pb-booking-app select{
  width:100%;border:1.5px solid var(--pb-line);border-radius:9px;padding:11px 14px;font-size:14px;color:var(--pb-ink);
  background:var(--pb-surface);font-family:var(--pb-font-body);transition:border .15s ease;
}
.pb-field input:focus,.pb-field textarea:focus,.pb-field select:focus{border-color:var(--pb-navy);outline:none;background:#fff}
.pb-field textarea{resize:vertical}
.pb-field{margin-bottom:0}

/* Order summary */
.pb-order-summary{background:linear-gradient(135deg,#f3f5fb,#eef1fa);border-radius:12px;padding:20px 22px;margin-bottom:24px;border:1px solid #e3e7f5}
.pb-summary-row{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;color:#3a3f4c}
.pb-summary-row strong{color:var(--pb-navy);font-weight:600}
.pb-summary-total{border-top:1.5px solid #d8deef;margin-top:10px;padding-top:12px}
.pb-summary-total strong{font-size:19px;color:var(--pb-navy);font-weight:700}

/* Payment tiles */
.pb-pay-method-group{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
@media(max-width:480px){.pb-pay-method-group{grid-template-columns:1fr}}
.pb-pay-tile{border:1.5px solid var(--pb-line);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .18s ease;background:#fff}
.pb-pay-tile:hover{border-color:var(--pb-navy);background:#f8f9ff}
.pb-pay-tile.active{border-color:var(--pb-navy);background:#f0f4ff;box-shadow:var(--pb-shadow-sm)}
.pb-pay-tile-icon{width:40px;height:40px;background:#eef1fa;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--pb-navy);flex-shrink:0}
.pb-pay-tile-title{font-size:14.5px;font-weight:700;color:var(--pb-navy)}
.pb-pay-tile-sub{font-size:12px;color:var(--pb-muted);margin-top:1px}

/* Online opts */
.pb-online-opts{display:flex;gap:12px;margin-bottom:18px}
.pb-online-opt{flex:1;border:1.5px solid var(--pb-line);border-radius:10px;padding:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s ease;min-height:54px;background:#fff}
.pb-online-opt:hover{border-color:#635BFF}
.pb-online-opt.active{border-color:var(--pb-navy);background:#f8f8ff;box-shadow:var(--pb-shadow-sm)}

/* Stripe */
.pb-stripe-input{border:1.5px solid var(--pb-line);border-radius:10px;padding:14px;background:#fff;margin-bottom:16px}

/* Store note */
.pb-store-note{background:var(--pb-warn-bg);border-radius:12px;padding:18px;display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;color:#6b4500}
.pb-store-note svg{flex-shrink:0;margin-top:2px}
.pb-store-note strong{display:block;font-size:14.5px;margin-bottom:5px;color:#5c3a00}
.pb-store-note p{font-size:13px;margin:0;color:#7a5212;line-height:1.5}

/* PayPal note */
.pb-paypal-note{background:#eef5ff;border-radius:10px;padding:16px;font-size:13px;color:#003087;margin-bottom:14px;line-height:1.5}

/* Secure note */
.pb-secure{text-align:center;font-size:12px;color:#a8adba;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px}

/* Buttons */
.pb-btn-pay{width:100%;background:var(--pb-navy);color:#fff;border:none;border-radius:10px;padding:15px;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--pb-font-body);transition:background .2s ease;margin-bottom:8px;letter-spacing:.01em}
.pb-btn-pay:hover{background:var(--pb-navy-light)}
.pb-btn-store{background:var(--pb-success-text)}
.pb-btn-store:hover{background:#16511a}
.pb-btn-next,.pb-btn-back{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;border:none;font-family:var(--pb-font-body);transition:all .2s ease;letter-spacing:.01em}
.pb-btn-next{background:var(--pb-navy);color:#fff}
.pb-btn-next:hover{background:var(--pb-navy-light)}
.pb-btn-next:disabled{background:#d4d7e3;cursor:not-allowed}
.pb-btn-back{background:transparent;color:var(--pb-muted);border:1.5px solid var(--pb-line)}
.pb-btn-back:hover{border-color:var(--pb-navy);color:var(--pb-navy)}
.pb-step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:24px;border-top:1px solid var(--pb-line)}

/* Error */
.pb-error{background:var(--pb-danger-bg);color:var(--pb-danger-text);border-radius:9px;padding:12px 16px;font-size:13.5px;margin-bottom:14px;line-height:1.5}

/* Loading */
.pb-loading{position:absolute;inset:0;background:rgba(255,255,255,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;border-radius:16px;backdrop-filter:blur(2px)}
.pb-spinner{width:42px;height:42px;border:3px solid #e6e8f0;border-top-color:var(--pb-navy);border-radius:50%;animation:pb-spin .7s linear infinite;margin-bottom:14px}
@keyframes pb-spin{to{transform:rotate(360deg)}}
.pb-loading p{font-size:14px;color:var(--pb-muted);font-weight:500}

/* Popup */
.pb-popup-overlay{position:fixed;inset:0;background:rgba(15,28,64,.6);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;backdrop-filter:blur(3px)}
.pb-popup-box{background:#fff;border-radius:20px;padding:40px 36px;max-width:460px;width:100%;text-align:center;animation:pb-popupin .3s ease;box-shadow:var(--pb-shadow-lg)}
@keyframes pb-popupin{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.pb-popup-icon{width:76px;height:76px;background:var(--pb-success-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.pb-popup-box h2{font-family:var(--pb-font-heading);font-size:22px;font-weight:700;color:var(--pb-navy);margin:0 0 10px;letter-spacing:.02em;text-transform:uppercase}
.pb-popup-box p{font-size:14px;color:var(--pb-muted);margin:0 0 18px;line-height:1.55}
.pb-popup-ref{background:#eef1fa;border-radius:10px;padding:12px;font-size:15px;font-weight:700;color:var(--pb-navy);letter-spacing:.04em;margin-bottom:20px;font-family:var(--pb-font-body)}
.pb-btn-invoice{display:inline-flex;align-items:center;gap:8px;background:var(--pb-navy);color:#fff;text-decoration:none;padding:13px 26px;border-radius:9px;font-size:14px;font-weight:700;margin-bottom:16px;transition:background .2s ease}
.pb-btn-invoice:hover{background:var(--pb-navy-light);color:#fff;text-decoration:none}
.pb-popup-email-note{font-size:12px;color:#a8adba}

/* ─── flatpickr theme overrides ──────────────────────────── */
.flatpickr-calendar{
  font-family:var(--pb-font-body)!important;border-radius:14px!important;box-shadow:var(--pb-shadow-lg)!important;
  border:1px solid var(--pb-line)!important;
}
.flatpickr-months{padding:10px 0 4px}
.flatpickr-current-month{font-size:15px!important;font-weight:700;color:var(--pb-navy)}
.flatpickr-month{color:var(--pb-navy)!important}
.flatpickr-weekday{font-weight:600!important;color:#9aa0b4!important;font-size:11px!important;text-transform:uppercase}
span.flatpickr-day{border-radius:8px!important;font-weight:500}
span.flatpickr-day.today{border-color:var(--pb-navy)!important}
span.flatpickr-day.selected{background:var(--pb-navy)!important;border-color:var(--pb-navy)!important;box-shadow:var(--pb-shadow-sm)}
span.flatpickr-day.selected:hover{background:var(--pb-navy-light)!important}
/* Fully-closed days: greyed out, struck-through, completely unclickable */
span.flatpickr-day.pb-day-closed{
  color:#c7cad6!important;background:#f4f5f9!important;text-decoration:line-through;
  cursor:not-allowed!important;pointer-events:none;
}
span.flatpickr-day.pb-day-closed:hover{background:#f4f5f9!important}
span.flatpickr-day.flatpickr-disabled{color:#d8dae3!important;cursor:not-allowed!important}
.flatpickr-day.today:not(.selected){color:var(--pb-navy)!important}
