/* ============================================================
   Barbershop Booking Pro – Customer Portal
   Base: Clean white & grey. Primary/secondary injected via wp_head.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* Default colours — overridden by saved options injected in wp_head */
:root {
  --bbp-primary:       #2c2c2c;
  --bbp-primary-dark:  #1a1a1a;
  --bbp-primary-light: #444444;
  --bbp-secondary:     #6c757d;
  --bbp-secondary-dark:#555e66;
  --bbp-on-primary:    #ffffff;   /* text on primary bg */
  --bbp-on-secondary:  #ffffff;   /* text on secondary bg */

  /* Neutral base — always white/grey */
  --bbp-white:    #ffffff;
  --bbp-off:      #f8f9fa;
  --bbp-off2:     #f0f1f3;
  --bbp-border:   #dee2e6;
  --bbp-text:     #212529;
  --bbp-muted:    #6c757d;
  --bbp-error:    #dc3545;
  --bbp-success:  #198754;
  --bbp-radius:   10px;
  --bbp-shadow:   0 2px 16px rgba(0,0,0,.07);
  --bbp-trans:    all .2s ease;
}

/* ======================== BASE ======================== */
.bbp-portal {
  font-family: 'DM Sans', sans-serif;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 16px 48px;
  color: var(--bbp-text);
}

.bbp-portal-notice {
  background: #d1e7dd;
  color: #0a3622;
  border-left: 4px solid var(--bbp-success);
  padding: 14px 20px;
  border-radius: var(--bbp-radius);
  margin-bottom: 24px;
  font-size: 15px;
}

/* ======================== STEPS ======================== */
.bbp-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0 28px;
  overflow-x: auto;
  gap: 0;
}
.bbp-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.bbp-step-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bbp-off2); border: 2px solid var(--bbp-border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--bbp-muted);
  transition: var(--bbp-trans);
}
.bbp-step.active .bbp-step-circle    { background: var(--bbp-primary);   border-color: var(--bbp-primary);   color: var(--bbp-on-primary); }
.bbp-step.completed .bbp-step-circle { background: var(--bbp-secondary); border-color: var(--bbp-secondary); color: var(--bbp-on-secondary); }
.bbp-step-label { font-size: 11px; font-weight: 600; color: var(--bbp-muted); text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; }
.bbp-step.active .bbp-step-label    { color: var(--bbp-primary); }
.bbp-step.completed .bbp-step-label { color: var(--bbp-secondary); }
.bbp-step-line { flex: 1; height: 2px; background: var(--bbp-border); min-width: 20px; max-width: 60px; margin-bottom: 18px; }

/* ======================== PANELS ======================== */
.bbp-panel        { display: none; animation: bbpFadeUp .3s ease; }
.bbp-panel.active { display: block; }
@keyframes bbpFadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.bbp-panel-header  { text-align: center; margin-bottom: 28px; }
.bbp-panel-title   { font-family: 'Playfair Display', Georgia, serif; font-size: 28px; font-weight: 700; color: var(--bbp-text); margin: 0 0 6px; }
.bbp-panel-sub     { color: var(--bbp-muted); font-size: 15px; margin: 0; }

/* ======================== BARBERS ======================== */
.bbp-barber-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 16px; margin-bottom: 24px; }
.bbp-barber-card-pub {
  background: var(--bbp-white); border: 2px solid var(--bbp-border);
  border-radius: var(--bbp-radius); padding: 22px 18px; cursor: pointer;
  text-align: center; transition: var(--bbp-trans); position: relative;
}
.bbp-barber-card-pub:hover    { border-color: var(--bbp-primary); transform: translateY(-2px); box-shadow: var(--bbp-shadow); }
.bbp-barber-card-pub.selected { border-color: var(--bbp-primary); background: var(--bbp-primary); }
.bbp-barber-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bbp-off2); margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; overflow: hidden; border: 2px solid var(--bbp-border);
  color: var(--bbp-muted);
}
.bbp-barber-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bbp-barber-name-pub  { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--bbp-text); margin-bottom: 4px; }
.bbp-barber-meta-pub  { font-size: 12px; color: var(--bbp-muted); }
.bbp-barber-card-pub.selected .bbp-barber-name-pub { color: var(--bbp-on-primary); }
.bbp-barber-card-pub.selected .bbp-barber-meta-pub { color: rgba(255,255,255,.7); }
.bbp-selected-check {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; background: var(--bbp-secondary);
  border-radius: 50%; display: none; align-items: center; justify-content: center;
  color: var(--bbp-on-secondary); font-size: 12px; font-weight: 700;
}
.bbp-barber-card-pub.selected .bbp-selected-check { display: flex; }

/* ======================== SERVICES ======================== */
.bbp-service-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 14px; margin-bottom: 24px; }
.bbp-service-card-pub {
  background: var(--bbp-white); border: 2px solid var(--bbp-border);
  border-radius: var(--bbp-radius); padding: 18px 20px;
  cursor: pointer; transition: var(--bbp-trans); position: relative;
}
.bbp-service-card-pub::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--color,var(--bbp-primary)); border-radius:var(--bbp-radius) var(--bbp-radius) 0 0; }
.bbp-service-card-pub:hover    { border-color: var(--bbp-primary); transform: translateY(-2px); box-shadow: var(--bbp-shadow); }
.bbp-service-card-pub.selected { border-color: var(--bbp-primary); background: var(--bbp-primary); }
.bbp-service-name-pub  { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; color: var(--bbp-text); margin-bottom: 4px; }
.bbp-service-meta-pub  { font-size: 12px; color: var(--bbp-muted); margin-bottom: 10px; }
.bbp-service-price-pub { font-size: 20px; font-weight: 700; color: var(--bbp-primary); }
.bbp-service-card-pub.selected .bbp-service-name-pub  { color: var(--bbp-on-primary); }
.bbp-service-card-pub.selected .bbp-service-meta-pub  { color: rgba(255,255,255,.7); }
.bbp-service-card-pub.selected .bbp-service-price-pub { color: var(--bbp-on-primary); }

/* ======================== CALENDAR ======================== */
.bbp-datetime-wrap { display: grid; grid-template-columns: 330px 1fr; gap: 20px; margin-bottom: 24px; }
@media(max-width:680px) { .bbp-datetime-wrap { grid-template-columns: 1fr; } }

.bbp-calendar-wrap  { background: var(--bbp-primary); border-radius: var(--bbp-radius); overflow: hidden; box-shadow: var(--bbp-shadow); }
.bbp-cal-header     { background: var(--bbp-primary-dark); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; }
#bbp-cal-month-label{ font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600; color: var(--bbp-on-primary); }
.bbp-cal-nav {
  background: rgba(255,255,255,.15); border: none; color: var(--bbp-on-primary);
  width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: var(--bbp-trans);
}
.bbp-cal-nav:hover  { background: var(--bbp-secondary); }
.bbp-cal-grid       { display: grid; grid-template-columns: repeat(7,1fr); background: var(--bbp-primary-light); }
.bbp-cal-day-header { text-align: center; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); padding: 8px 0; text-transform: uppercase; letter-spacing: .5px; }
.bbp-cal-days       { display: grid; grid-template-columns: repeat(7,1fr); padding: 8px; gap: 3px; background: var(--bbp-primary); }
.bbp-cal-day        { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; color: rgba(255,255,255,.8); transition: var(--bbp-trans); }
.bbp-cal-day.available:hover { background: rgba(255,255,255,.15); color: #fff; }
.bbp-cal-day.today  { color: #fff; font-weight: 700; }
.bbp-cal-day.selected { background: var(--bbp-secondary) !important; color: var(--bbp-on-secondary) !important; font-weight: 700; }
.bbp-cal-day.past        { color: rgba(255,255,255,.25); cursor: not-allowed; }
.bbp-cal-day.unavailable { color: rgba(255,255,255,.2); cursor: not-allowed; text-decoration: line-through; }
.bbp-cal-day.unavailable:hover { background: none; }
.bbp-cal-day.empty  { cursor: default; }

/* ======================== SLOTS ======================== */
.bbp-slots-wrap    { background: var(--bbp-off); border: 2px solid var(--bbp-border); border-radius: var(--bbp-radius); overflow: hidden; }
.bbp-slots-header  { background: var(--bbp-white); padding: 14px 20px; border-bottom: 1px solid var(--bbp-border); }
.bbp-slots-header h3 { margin: 0; font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600; color: var(--bbp-text); }
.bbp-slots-grid    { padding: 16px; display: grid; grid-template-columns: repeat(auto-fill,minmax(80px,1fr)); gap: 8px; max-height: 320px; overflow-y: auto; }
.bbp-slot          { background: var(--bbp-white); border: 1.5px solid var(--bbp-border); border-radius: 8px; padding: 10px 6px; text-align: center; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--bbp-text); transition: var(--bbp-trans); }
.bbp-slot:hover    { border-color: var(--bbp-primary); background: var(--bbp-off2); }
.bbp-slot.selected { background: var(--bbp-primary); color: var(--bbp-on-primary); border-color: var(--bbp-primary); }
.bbp-slots-placeholder { grid-column:1/-1; text-align:center; color:var(--bbp-muted); padding:30px; font-size:14px; }
.bbp-no-slots      { grid-column:1/-1; text-align:center; padding:30px; color:var(--bbp-muted); }

/* ======================== DETAILS FORM ======================== */
.bbp-booking-summary { background: var(--bbp-primary); border-radius: var(--bbp-radius); padding: 16px 20px; margin-bottom: 20px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; }
.bbp-summary-item    { display: flex; flex-direction: column; gap: 2px; }
.bbp-summary-label   { color: rgba(255,255,255,.6); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.bbp-summary-value   { color: var(--bbp-on-primary); font-weight: 600; font-size: 14px; }

.bbp-details-form  { margin-bottom: 24px; }
.bbp-field-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:560px) { .bbp-field-row { grid-template-columns: 1fr; } }
.bbp-field-wrap    { margin-bottom: 14px; }
.bbp-field-wrap label { display:block; font-size:12px; font-weight:600; color:var(--bbp-muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.5px; }
.bbp-field-wrap input,
.bbp-field-wrap textarea { width:100%; padding:11px 14px; border:1.5px solid var(--bbp-border); border-radius:8px; font-family:'DM Sans',sans-serif; font-size:15px; color:var(--bbp-text); background:var(--bbp-white); transition:var(--bbp-trans); box-sizing:border-box; }
.bbp-field-wrap input:focus,
.bbp-field-wrap textarea:focus { border-color:var(--bbp-primary); outline:none; box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.bbp-field-wrap textarea { min-height:90px; resize:vertical; }
.bbp-field-err { color:var(--bbp-error); font-size:12px; margin-top:4px; display:block; }

/* ======================== CONFIRM CARD ======================== */
.bbp-confirm-card   { background: var(--bbp-white); border: 2px solid var(--bbp-border); border-radius: 12px; overflow: hidden; margin-bottom: 20px; box-shadow: var(--bbp-shadow); }
.bbp-confirm-header { background: var(--bbp-primary); padding: 20px 24px; }
.bbp-confirm-shop   { font-size: 11px; color: rgba(255,255,255,.6); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.bbp-confirm-title  { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--bbp-on-primary); margin: 0; }
.bbp-confirm-rows   { padding: 0; }
.bbp-confirm-row    { display: flex; align-items: flex-start; padding: 13px 24px; border-bottom: 1px solid var(--bbp-border); }
.bbp-confirm-row:last-child { border-bottom: none; }
.bbp-confirm-row-label { width:120px; min-width:120px; font-size:11px; font-weight:600; color:var(--bbp-muted); text-transform:uppercase; letter-spacing:.5px; padding-top:2px; }
.bbp-confirm-row-value { font-size:15px; color:var(--bbp-text); font-weight:500; }
.bbp-confirm-price  { font-size:22px; color:var(--bbp-primary); font-weight:700; }
.bbp-consent        { text-align:center; color:var(--bbp-muted); font-size:13px; margin-bottom:20px; padding:0 20px; }

/* ======================== SUCCESS ======================== */
.bbp-success-wrap  { text-align:center; padding:20px 0 40px; animation:bbpFadeUp .4s ease; }
.bbp-success-icon  { width:80px; height:80px; background:var(--bbp-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:36px; color:var(--bbp-on-primary); margin:0 auto 20px; animation:bbpPop .4s cubic-bezier(.17,.67,.4,1.4); }
@keyframes bbpPop  { from{transform:scale(0);opacity:0;} to{transform:scale(1);opacity:1;} }
.bbp-success-title { font-family:'Playfair Display',serif; font-size:30px; color:var(--bbp-text); margin:0 0 10px; }
.bbp-success-sub   { color:var(--bbp-muted); font-size:15px; margin-bottom:24px; }
.bbp-success-card  { background:var(--bbp-primary); border-radius:10px; padding:20px 28px; margin:0 auto 20px; max-width:480px; text-align:left; color:var(--bbp-on-primary); font-size:14px; line-height:2; opacity:.95; }
.bbp-success-cancel-note { color:var(--bbp-muted); font-size:13px; margin-bottom:24px; }

/* ======================== BUTTONS ======================== */
.bbp-panel-nav     { display:flex; align-items:center; justify-content:space-between; padding-top:8px; }
.bbp-btn-back      { background:transparent; border:2px solid var(--bbp-border); color:var(--bbp-muted); padding:11px 22px; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; cursor:pointer; transition:var(--bbp-trans); }
.bbp-btn-back:hover{ border-color:var(--bbp-primary); color:var(--bbp-primary); }
.bbp-btn-next      { background:var(--bbp-primary); color:var(--bbp-on-primary); border:none; padding:12px 28px; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:var(--bbp-trans); }
.bbp-btn-next:hover{ background:var(--bbp-primary-dark); transform:translateY(-1px); }
.bbp-btn-next-disabled{ background:var(--bbp-off2); color:var(--bbp-muted); cursor:not-allowed; }
.bbp-btn-next-disabled:hover{ background:var(--bbp-off2); transform:none; }
.bbp-btn-confirm   { background:var(--bbp-secondary); color:var(--bbp-on-secondary); border:none; padding:14px 36px; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:700; cursor:pointer; transition:var(--bbp-trans); display:flex; align-items:center; gap:8px; }
.bbp-btn-confirm:hover{ background:var(--bbp-secondary-dark); transform:translateY(-1px); }
.bbp-btn-confirm:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.bbp-btn-new       { background:var(--bbp-primary); color:var(--bbp-on-primary); border:none; padding:12px 28px; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:var(--bbp-trans); }
.bbp-btn-new:hover { background:var(--bbp-primary-dark); }

/* ======================== LOADING ======================== */
.bbp-loading-spinner{ display:flex; align-items:center; gap:10px; padding:30px; color:var(--bbp-muted); font-size:14px; grid-column:1/-1; }
.bbp-spinner       { width:20px; height:20px; border:2.5px solid var(--bbp-border); border-top-color:var(--bbp-secondary); border-radius:50%; animation:bbpSpin .7s linear infinite; flex-shrink:0; }
.bbp-spinner-white { border-color:rgba(255,255,255,.3); border-top-color:var(--bbp-on-primary); }
@keyframes bbpSpin { to{transform:rotate(360deg);} }

#bbp-submit-msg    { margin-bottom:16px; text-align:center; font-size:14px; font-weight:600; padding:12px; border-radius:8px; display:none; }
#bbp-submit-msg.error  { background:#fde8e8; color:#8b1c1c; display:block; }
#bbp-submit-msg.success{ background:#d1e7dd; color:#0a3622; display:block; }

/* ======================== RESPONSIVE ======================== */
@media(max-width:600px){
  .bbp-panel-title { font-size:22px; }
  .bbp-step-label  { display:none; }
  .bbp-step-line   { min-width:12px; }
  .bbp-confirm-row-label { width:90px; min-width:90px; }
}