/* Sourcewav Features 5-8 — Booking Board */
/* --------------------------------------------------------------------------
   5. BOOKING BOARD SECTION & CARDS
--------------------------------------------------------------------------- */
.booking-section {
  margin-top: 36px;
  padding: 26px 28px;
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(23, 41, 64, 0.05);
  position: relative;
  overflow: hidden;
}
.booking-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #172a40, #5cd6c6 40%, #d7fa48 85%);
}
.booking-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.booking-header h2 {
  font-size: 24px;
  margin: 4px 0 6px;
  letter-spacing: -0.5px;
  color: #172a40;
}
.booking-header p {
  color: #61788c;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  max-width: 580px;
}
.booking-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.booking-primary-btn {
  background: #172a40;
  color: #d7fa48;
  border: 1px solid #2a4768;
  border-radius: 10px;
  padding: 10px 16px;
  font: 600 12px var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(23, 42, 64, 0.16);
  transition: all 0.18s ease;
}
.booking-primary-btn:hover {
  background: #1f3754;
  color: #ffffff;
  transform: translateY(-1px);
}
.booking-inbox-btn {
  background: #f1f5f9;
  color: #27435f;
  border: 1px solid #d0dce7;
  border-radius: 10px;
  padding: 10px 14px;
  font: 600 12px var(--font);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.booking-inbox-btn .inbox-count {
  background: #2858ef;
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
}

/* Category Filter Chips */
.booking-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid #edf2f7;
}
.booking-chip {
  flex: none;
  background: #f8fafc;
  border: 1px solid #d5e1ec;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #556c82;
  cursor: pointer;
  transition: all 0.15s ease;
}
.booking-chip:hover {
  border-color: #8bb2cf;
  color: #172a40;
  background: #ffffff;
}
.booking-chip.selected {
  background: #172a40;
  border-color: #172a40;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(23, 42, 64, 0.15);
}

/* Booking Cards Grid */
.booking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.booking-card {
  background: #ffffff;
  border: 1px solid #e1e9f0;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(16, 32, 51, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.booking-card:hover {
  transform: translateY(-2px);
  border-color: #79bfd0;
  box-shadow: 0 12px 28px rgba(16, 32, 51, 0.08);
}
.booking-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.booking-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #172a40, #274b6b);
  color: #d7fa48;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  flex: none;
}
.booking-meta {
  flex: 1;
  min-width: 0;
}
.booking-meta strong {
  display: block;
  font-size: 15px;
  color: #14283d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-meta small {
  display: block;
  font-size: 11px;
  color: #6b7e91;
  margin-top: 1px;
}
.booking-role-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: #eef5fb;
  color: #245580;
}
.booking-role-tag.dj { background: #fdf2f8; color: #be185d; }
.booking-role-tag.rapper { background: #fef3c7; color: #b45309; }
.booking-role-tag.producer { background: #f3e8ff; color: #7e22ce; }
.booking-role-tag.photographer { background: #e0f2fe; color: #0369a1; }
.booking-role-tag.vj { background: #ccfbf1; color: #0f766e; }
.booking-role-tag.crew { background: #f1f5f9; color: #475569; }

.booking-avail-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  margin: 8px 0;
}
.booking-avail-pill.ready {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.booking-avail-pill.busy {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.booking-avail-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.booking-rate-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 11px;
  margin: 8px 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.booking-rate-box b {
  font-size: 15px;
  color: #172a40;
}
.booking-rate-box span {
  font-size: 10px;
  color: #718497;
}

.booking-portfolio-snippet {
  font-size: 11px;
  color: #475a6c;
  line-height: 1.5;
  margin-bottom: 12px;
  background: #ffffff;
  padding: 6px 8px;
  border-left: 3px solid #5cd6c6;
  border-radius: 0 6px 6px 0;
}

.booking-card-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #edf2f7;
}
.hire-btn {
  background: #172a40;
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  font: 600 12px var(--font);
  cursor: pointer;
  text-align: center;
  transition: all 0.16s ease;
}
.hire-btn:hover {
  background: #254467;
  color: #d7fa48;
}
.booking-chat-btn {
  background: #edf2f7;
  color: #3b5066;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 14px;
  cursor: pointer;
}
.booking-chat-btn:hover {
  background: #e2e8f0;
}

/* Artist Booking Board — luminous glass workspace */
.booking-section{
  isolation:isolate;position:relative;overflow:hidden;margin-top:30px;padding:30px;
  border:1px solid #75dff06b;border-radius:22px;
  background:radial-gradient(ellipse at 86% 0%,#156a9142,transparent 34%),radial-gradient(ellipse at 2% 100%,#124b7040,transparent 38%),linear-gradient(145deg,#071522,#0b1a2b 55%,#081522);
  box-shadow:0 20px 55px #05101d38,inset 0 1px #dbfbff1c;
}
.booking-section::before{height:2px;background:linear-gradient(90deg,#6af1f2,#348db9 45%,#b5f179 82%,transparent)}
.booking-section::after{position:absolute;z-index:-1;inset:0;content:"";opacity:.16;pointer-events:none;background-image:radial-gradient(#88dcf44c 1px,transparent 1px),linear-gradient(#9bdcf30b 1px,transparent 1px);background-size:19px 19px,96px 96px;mask-image:linear-gradient(145deg,#000,transparent 78%)}
.booking-header{position:relative;z-index:1;align-items:center;gap:20px;margin-bottom:24px}
.booking-header .section-kicker{color:#71deed;font:700 11px var(--display);letter-spacing:1.6px}
.booking-header h2{margin:5px 0 7px;color:#f1faff;font-size:clamp(25px,3vw,36px);font-weight:750;line-height:1.25;letter-spacing:-.5px;white-space:normal;text-shadow:0 0 24px #52c7e624}
.booking-header p{max-width:630px;color:#a8bfce;font-size:13px;line-height:1.75}
.booking-actions{flex:none;flex-wrap:wrap;justify-content:flex-end;gap:9px}
.booking-primary-btn{min-height:46px;padding:0 18px;border:1px solid #c4f783;border-radius:999px;background:linear-gradient(115deg,#203343,#101f2b 68%,#263a37);color:#d9ff7d;font-size:14px;font-weight:750;box-shadow:0 0 0 1px #d0ff6926,0 0 23px #c5f77b32,inset 0 1px #ffffff23;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}
.booking-primary-btn:hover{transform:translateY(-2px);border-color:#e5ffaf;background:linear-gradient(110deg,#304c4c,#183b42);color:#efffc8;box-shadow:0 0 0 2px #d0ff6933,0 0 30px #c5f77b55,inset 0 1px #ffffff3b}
.booking-primary-btn>span{font-size:21px;line-height:1}
.booking-inbox-btn{min-height:42px;padding:0 13px;border-color:#72cadd50;border-radius:999px;background:#122638a8;color:#c2deec;font-size:12px;backdrop-filter:blur(12px)}
.booking-inbox-btn:hover{border-color:#6bdcf0;background:#183449;color:#effbff}
.booking-inbox-btn .inbox-count{display:grid;min-width:20px;height:20px;place-items:center;background:#25b9d4;color:#061829;font-size:10px}
.booking-filters{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,minmax(125px,1fr));gap:10px;overflow-x:auto;margin:0 -2px 19px;padding:3px 2px 17px;border-bottom:1px solid #8dc9dc2b;scrollbar-color:#3587a2 #0d1a28;scrollbar-width:thin}
.booking-chip{display:flex;min-height:76px;align-items:center;justify-content:center;gap:9px;padding:10px 13px;border:1px solid #79d8e17a;border-radius:17px;background:linear-gradient(145deg,#1b3143e8,#101d2de8 70%,#142b3a);color:#d7eaf3;font-size:13px;font-weight:700;line-height:1.4;text-align:center;white-space:normal;box-shadow:inset 0 1px #ffffff17,0 7px 17px #020b1640;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s}
.booking-chip:hover{transform:translateY(-2px);border-color:#9aeaf1;background:linear-gradient(145deg,#25475a,#152a3e);color:#f5fdff;box-shadow:inset 0 1px #ffffff28,0 9px 20px #020b1650,0 0 16px #50d5e71c}
.booking-chip.selected{border-color:#d4ff78;background:linear-gradient(145deg,#384832,#202c31 62%,#233a37);color:#efffc2;box-shadow:inset 0 1px #ffffff36,0 0 0 1px #d6ff7770,0 0 24px #bbf46c34}
.booking-grid{position:relative;z-index:1;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:14px}
.booking-card{min-width:0;border:1px solid #6eabc071;border-radius:17px;background:linear-gradient(150deg,#12283a,#0d1d2d 74%,#102a38);color:#dcecf4;box-shadow:inset 0 1px #ffffff15,0 9px 24px #020a1540;transition:transform .22s,border-color .22s,box-shadow .22s}
.booking-card:hover{transform:translateY(-3px);border-color:#71deeb;box-shadow:inset 0 1px #ffffff20,0 15px 32px #020a1560,0 0 22px #2eb5d21a}
.booking-avatar{border:1px solid #89e7f4;border-radius:14px;background:linear-gradient(145deg,#287d9b,#173852 70%);color:#dbff94;box-shadow:0 5px 14px #020b1652,inset 0 1px #ffffff47}
.booking-meta strong{color:#f1faff;font-size:16px}
.booking-meta small{color:#a5bfce;font-size:11px}
.booking-role-tag{border:1px solid #70c9da55;border-radius:999px;background:#17364a;color:#aeeaf1;font-size:10px;padding:3px 9px}
.booking-role-tag.dj,.booking-role-tag.rapper,.booking-role-tag.producer,.booking-role-tag.photographer,.booking-role-tag.vj,.booking-role-tag.crew{border-color:#76ccdd55;background:#183449;color:#aeeaf1}
.booking-avail-pill{border-radius:999px;font-size:11px}
.booking-avail-pill.ready{border-color:#74dfb155;background:#0e382f;color:#8af0bb}
.booking-avail-pill.busy{border-color:#e1c56b60;background:#3b3020;color:#f2d47c}
.booking-rate-box{border-color:#6fb3c341;border-radius:11px;background:#0a1a28a6}
.booking-rate-box b{color:#e9fbff;font-size:17px}
.booking-rate-box span{color:#91b3c4}
.booking-rate-box>small{color:#83e8b3!important}
.booking-card>div>p{color:#b8ccd8!important;font-size:12px!important;line-height:1.7!important}
.booking-portfolio-snippet{border:1px solid #6dc6d344;border-left:3px solid #75e2e4;border-radius:0 9px 9px 0;background:#10283a;color:#c6dbe5;font-size:11px;padding:9px 11px}
.booking-portfolio-snippet strong{color:#7de2e9}
.booking-card-foot{border-color:#78b4c32c}
.hire-btn{min-height:40px;border:1px solid #51bfd17d;border-radius:999px;background:linear-gradient(110deg,#155779,#14738a);color:#effcff;font-size:12px;box-shadow:0 5px 14px #05253a5c,inset 0 1px #ffffff32}
.hire-btn:hover{background:linear-gradient(110deg,#16759b,#1798ab);color:#fff;box-shadow:0 0 18px #2bbddc40}
.booking-chat-btn{width:40px;height:40px;border:1px solid #72cbd577;border-radius:50%;background:#132c3f;color:#abecf3}
.booking-chat-btn:hover{border-color:#a3f1ef;background:#1a4051;color:#fff}
.booking-empty{grid-column:1/-1;display:flex;min-height:365px;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:28px;border:1px solid #80b8ca63;border-radius:21px;background:radial-gradient(ellipse at 50% 47%,#0f5a8044,transparent 36%),linear-gradient(145deg,#0c1a2a,#0a1725 60%,#101d29);text-align:center;box-shadow:inset 0 1px #ffffff18,0 14px 30px #02091430}
.booking-empty-art{width:165px;height:142px;margin:-5px 0 8px;filter:drop-shadow(0 10px 20px #22c7ec30);animation:booking-float 5s ease-in-out infinite}
.booking-empty-art svg{display:block;width:100%;height:100%;overflow:visible}
.booking-empty-kicker{color:#80e8f0;font:700 10px var(--display);letter-spacing:1.6px}
.booking-empty h3{margin:7px 0;color:#f1f9ff;font-size:21px;line-height:1.45}
.booking-empty p{max-width:450px;margin:0 0 18px;color:#abc3d1;font-size:13px;line-height:1.75}
.booking-empty .booking-primary-btn{min-height:48px;padding-inline:23px;font-size:14px}
.booking-section :is(button):focus-visible{outline:3px solid #a4f2ff;outline-offset:3px}
@keyframes booking-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:900px){.booking-section{padding:24px}.booking-header{align-items:flex-start}.booking-actions{max-width:100%}.booking-filters{grid-template-columns:repeat(6,minmax(118px,1fr))}}
@media(max-width:680px){.booking-section{margin-top:23px;padding:21px 16px;border-radius:18px}.booking-header{flex-direction:column;align-items:stretch;gap:15px}.booking-header h2{font-size:26px}.booking-header p{font-size:12px}.booking-actions{justify-content:flex-start}.booking-filters{grid-template-columns:repeat(6,minmax(112px,1fr));margin-bottom:14px}.booking-chip{min-height:66px;padding:8px 10px;font-size:12px}.booking-grid{grid-template-columns:1fr;gap:11px}.booking-empty{min-height:320px;padding:22px 14px}.booking-empty-art{width:145px;height:125px}.booking-empty h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){.booking-card,.booking-chip,.booking-primary-btn,.booking-empty-art{transition:none;animation:none}}


/* Compact artist-role filters with clear pictograms. */
.booking-filters{display:flex;flex-wrap:wrap;gap:8px;overflow:visible;margin:0 0 15px;padding:2px 0 12px;border-bottom:1px solid #8dc9dc2b;scrollbar-width:none}
.booking-chip{display:inline-flex;min-height:42px;flex:0 0 auto;align-items:center;justify-content:flex-start;gap:7px;padding:5px 11px;border:1px solid #79d8e15c;border-radius:12px;background:#13283ad9;color:#c8dce8;font-size:12px;font-weight:650;line-height:1.2;text-align:left;white-space:nowrap;box-shadow:inset 0 1px #ffffff12;transition:border-color .16s,background .16s,color .16s}
.booking-chip:hover{transform:none;border-color:#76d7e8;background:#1a3549;color:#f2fbff;box-shadow:0 3px 10px #03101b45}
.booking-chip.selected{border-color:#c9f477;background:#263b3b;color:#efffc4;box-shadow:inset 0 0 0 1px #c9f47736,0 0 12px #baf06b1d}
.booking-filter-icon{display:block;width:27px;height:27px;flex:none;object-fit:contain}
@media(max-width:680px){.booking-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;gap:7px;padding:2px 0 9px;margin-bottom:12px;scrollbar-width:thin}.booking-chip{min-height:40px;padding:4px 9px;font-size:11px}.booking-filter-icon{width:25px;height:25px}}