/* Booking UI – минимален, съвместим със style.css */
:root{
  --bk-primary:#1b1b1b;
  --bk-accent:#7BA87B;
  --bk-muted:#666;
  --bk-border:rgba(0,0,0,.08);
  --bk-bg:#fff;
  --bk-radius:14px;
  --bk-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Base */
.booking .wrap{max-width:1100px;margin:0 auto;padding:24px;}
.booking .lead{color:#333;font-size:1.05rem}
.booking .muted{color:var(--bk-muted)}
.booking .small{font-size:.9rem}

/* Hero + Steps */
.booking .bk-hero{padding:32px 0 8px}
.booking .bk-steps{padding:8px 0 16px}
.booking .steps{display:flex;gap:14px;list-style:none;padding:0;margin:0}
.booking .steps li{display:flex;align-items:center;gap:8px;color:var(--bk-muted)}
.booking .steps li.on{color:#111}
.booking .steps li span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eee;color:#333;font-weight:600}
.booking .steps li.on span{background:var(--bk-accent);color:#fff}

/* Grid */
.booking .grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:980px){.booking .grid{grid-template-columns:1.1fr .9fr}}

/* Cards */
.booking .card{
  background:var(--bk-bg);
  border:1px solid var(--bk-border);
  border-radius:var(--bk-radius);
  box-shadow:var(--bk-shadow);
  padding:18px;
}
.booking .card.success{grid-column:1/-1;text-align:center}

/* Card head */
.booking .card-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.booking .card-head h2{margin:0;font-size:1.25rem}

/* Filters */
.booking .filters{display:flex;gap:12px;align-items:center}
.booking .filters label{display:flex;flex-direction:column;font-size:.92rem;color:#333}
.booking .filters select{padding:8px 10px;border:1px solid var(--bk-border);border-radius:10px}

/* Calendar */
.booking .cal-nav{display:flex;align-items:center;gap:12px}
.booking .cal-nav h2{margin:0}
.booking .cal-nav button{border:1px solid var(--bk-border);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.booking .cal{display:grid;gap:8px}
.booking .cal .wd{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.booking .cal .wd div{font-size:.85rem;color:var(--bk-muted);text-align:center}
.booking .cal .days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.booking .cal .day{
  border:1px solid var(--bk-border);
  border-radius:10px;
  padding:10px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  background:#fff;
}
.booking .cal .day .n{font-weight:600}
.booking .cal .day.today{outline:2px solid var(--bk-accent)}
.booking .cal .day.disabled{opacity:.45;cursor:not-allowed;background:#f6f6f6}
.booking .cal .day.selected{background:var(--bk-accent);color:#fff;border-color:transparent}
.booking .hint{margin-top:8px}

/* Slots (карти) */
.booking .slot{
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "meta tag btn";
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
}
.booking .slots{display:flex;flex-direction:column;gap:12px}
.booking .slot .meta{ grid-area: meta; display:flex;flex-direction:column }
.booking .slot .t{ font-size:1.05rem; font-weight:700; line-height:1 }
.booking .slot .trainer{ color: rgba(0,0,0,.55); font-size:14px; margin-top:2px }
.booking .slot .tag{ grid-area: tag; justify-self:end; display:inline-block;border-radius:999px;padding:4px 8px;font-size:.85rem }
.booking .tag.ok{background:#e9f7ee}
.booking .tag.wait{background:#fff7e6}
.booking .tag.full{background:#fbe7e7}
.booking .tag small{color:#222}
.booking .slot .btn{ grid-area: btn; background:var(--bk-primary);color:#fff;border:0;border-radius:12px;padding:10px 14px;cursor:pointer;text-decoration:none;display:inline-block }
.booking .btn.ghost{background:#fff;color:#111;border:1px solid var(--bk-border)}
.booking .btn[disabled]{opacity:.6;cursor:not-allowed}

/* Actions row */
.booking .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

/* Form */
.booking .form .row{display:grid;gap:12px;margin-bottom:12px}
@media (min-width:720px){.booking .form .row{grid-template-columns:1fr 1fr}}
.booking .form label{display:flex;flex-direction:column;gap:6px;color:#222}
.booking .form input{border:1px solid var(--bk-border);border-radius:10px;padding:10px 12px;font-size:1rem}
.booking .form-msg{margin-top:10px}

/* Colors */
.booking .bad{color:#b00020}
.booking .good{color:#166534}

/* ===== Layout fixes (центриране + по-широки карти) ===== */
.booking .bk-content .wrap.grid{
  display:grid;
  grid-template-columns: 1fr;
  justify-items:center;
}
.booking .card{width:min(100%, 1024px);margin:0 auto 32px;}
.booking .card .cal{width:100%;padding:20px}
.booking .card .cal .wd,
.booking .card .cal .days{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-inline:auto;
  width:100%;
}
.booking .card .cal .day{
  display:flex;align-items:center;justify-content:center;
  height:60px;border-radius:12px;
}
@media (max-width: 992px){
  .booking .card{ width: min(100%, 900px); }
  .booking .card .cal .day{ height: 52px; }
}

/* ===== General mobile tweaks ===== */
@media (max-width: 768px){
  .booking .bk-hero .wrap,
  .booking .bk-steps .wrap,
  .booking .bk-content .wrap{ padding-inline:16px; }

  .booking .card{
    width:100%;
    margin-inline:auto;
    border-radius:14px;
  }
  .booking .card .cal{ padding:12px; }
  .booking .card .cal .wd,
  .booking .card .cal .days{ gap:6px; }
  .booking .card .cal .wd > div{ font-size:12px; }
  .booking .card .cal .day{ height:44px; }
  .booking .card .cal .day .n{ font-size:16px; }
}

/* ===== Step 2 – Mobile polish (хедър + филтри + слотове) ===== */
@media (max-width: 768px){
  /* Хедърът да се пречупва красиво */
  .booking #step2 .card-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Филтри на цял ред, удобни за тап */
  .booking #step2 .filters{
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  .booking #step2 .filters label{
    width: 100%;
  }
  .booking #step2 .filters select{
    width: 100%;
    height: 44px;
    font-size: 16px;
  }

  /* Слотовете: стакнати, голям бутон */
  .booking .slot{
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "tag"
      "btn";
    gap: 10px;
    padding: 12px;
  }
  .booking .slot .btn{
    width: 100%;
    justify-self: stretch;
    height: 48px;           /* ако искаш по-висок – 52px */
    font-size: 16px;
  }
  .booking .slot .tag{
    justify-self: start;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 999px;
  }
}

/* ===== Отстояние под фиксираната навигация само тук ===== */
body.booking-page .bk-hero{
  padding-top: clamp(80px, 10vw, 110px);
}
/* Стъпка 2: направи "Избери" зелен */
.booking #step2 .slot .btn{
  background: var(--bk-accent); /* зелено */
  color: #fff;
}

.booking #step2 .slot .btn:hover{
  background: #6a966a;          /* леко по-тъмно при hover */
}

.booking #step2 .slot .btn:active{
  background: #5c875c;
  transform: translateY(1px);
}