.bbs-booking-hub {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 40px;
}

.bbs-hub-header,
.bbs-hub-panel,
.bbs-rental-modal-dialog {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,.06);
}

.bbs-hub-header {
    padding: 32px;
    margin-bottom: 24px;
    text-align: center;
}
.bbs-hub-header h2 { margin: 0 0 10px; }
.bbs-hub-header p { margin: 0; color: #666; }
.bbs-hub-cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; }

.bbs-hub-grid {
    display: grid;
    grid-template-columns: 1.3fr .95fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: start;
}

.bbs-hub-panel { padding: 24px; }
.bbs-panel-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; }
.bbs-panel-header h3 { margin: 0 0 6px; }
.bbs-panel-header p { margin:0; color:#666; }

.bbs-calendar-nav { display:flex; align-items:center; gap:12px; }
.bbs-calendar-title { font-weight:700; min-width:160px; text-align:center; }
.bbs-calendar-arrow {
    width: 42px; height: 42px; border-radius: 50%; border:1px solid #ddd; background:#fff; cursor:pointer;
}
.bbs-calendar-arrow:hover { background:#f7f7f7; }

.bbs-color-guide {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #ebeff3;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.bbs-color-guide h4 {
    margin: 0 0 10px;
    display:flex;
    align-items:center;
    gap:8px;
}
.color-guide-items { display:flex; flex-wrap:wrap; gap:12px 18px; }
.color-guide-item { display:flex; align-items:center; gap:8px; color:#4b5563; font-size:14px; }
.color-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border:1px solid rgba(0,0,0,.1);
}
.color-indicator.available { background:#2d9b57; }
.color-indicator.partial { background:#f2a641; }
.color-indicator.full { background:#dc4c4c; }
.color-indicator.closed { background:#9ca3af; }

.bbs-calendar-weekdays,
.bbs-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.bbs-calendar-weekdays { margin-bottom: 8px; font-weight:600; color:#666; text-align:center; }

.bbs-calendar-day {
    min-height: 92px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    padding: 10px 8px;
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
}
.bbs-calendar-day:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.bbs-calendar-day.empty { border:0; background:transparent; cursor:default; }
.bbs-calendar-day.closed { background:#f3f4f6; color:#999; cursor:not-allowed; }
.bbs-calendar-day.available { background:#edf9f0; border-color:#2d9b57; }
.bbs-calendar-day.partial { background:#fff5e8; border-color:#f2a641; }
.bbs-calendar-day.full { background:#fdeaea; border-color:#dc4c4c; }
.bbs-calendar-day.selected { outline:3px solid #1a1a2e; }
.bbs-day-number { display:block; font-size: 22px; font-weight:700; margin-bottom:6px; }
.bbs-day-state { display:block; font-size: 12px; }

.bbs-calendar-tooltip {
    position:absolute; z-index:9999; max-width:260px; white-space:pre-line; pointer-events:none;
    background:#111827; color:#fff; padding:10px 12px; border-radius:10px; font-size:13px; box-shadow:0 8px 18px rgba(0,0,0,.2);
}

.bbs-day-header {
    position: sticky;
    top: 18px;
    z-index: 4;
    background: #fff;
    padding-bottom: 6px;
}
.bbs-booking-summary {
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px;
    margin-bottom: 18px;
}
.bbs-summary-chip {
    background: #f8fafc;
    border:1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 16px;
}
.bbs-summary-chip span {
    display:block;
    color:#6b7280;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:6px;
}
.bbs-summary-chip strong {
    display:block;
    font-size:14px;
    line-height:1.45;
    color:#111827;
}

.bbs-day-slots { min-height: 240px; }
.bbs-day-message { padding:16px; background:#f7f7f7; border-radius:10px; color:#666; }
.bbs-slot-list { display:grid; gap:12px; }
.bbs-day-slot {
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    width:100%; padding:14px 16px; border-radius:12px; border:1px solid #ddd; cursor:pointer; background:#fff;
}
.bbs-day-slot.available { background:#edf9f0; border-color:#2d9b57; }
.bbs-day-slot.partial { background:#fff5e8; border-color:#f2a641; }
.bbs-day-slot.full { background:#fdeaea; border-color:#dc4c4c; cursor:not-allowed; opacity:.8; }
.bbs-day-slot.selected { outline:3px solid #1a1a2e; }
.bbs-day-slot-time { font-weight:700; }
.bbs-day-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid #ececec;
}
.bbs-day-note { color:#666; font-size: 14px; max-width:340px; }
.bbs-btn-large { padding: 14px 24px; font-size: 16px; white-space:nowrap; }
.bbs-btn-disabled,
.bbs-btn-disabled:hover {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: auto;
}

.rentals-header { margin-bottom:20px; }
.bbs-rental-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:20px; }
.bbs-rental-card {
    position:relative;
    border:1px solid #e5e5e5; border-radius:14px; overflow:visible; background:#fff; transition: transform .2s ease, box-shadow .2s ease;
}
.bbs-rental-card:hover { transform: translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.08); }
.bbs-rental-card.selected { outline:3px solid #1a1a2e; }
.bbs-rental-image img { width:100%; height:180px; object-fit:cover; display:block; border-top-left-radius:14px; border-top-right-radius:14px; }
.bbs-rental-body { padding:18px; }
.bbs-rental-card h4 { margin:0 0 8px; }
.bbs-rental-card h4 small { font-weight:400; color:#666; }
.bbs-rental-meta,
.bbs-rental-description { color:#666; font-size:14px; }
.bbs-rental-stats { display:flex; justify-content:space-between; gap:10px; font-weight:700; margin:14px 0; }
.bbs-rental-actions { display:flex; gap:10px; margin-top:14px; }
.bbs-rental-actions .bbs-btn { flex:1; text-align:center; }
.bbs-rental-hover-card {
    position:absolute;
    left:16px;
    right:16px;
    bottom: calc(100% - 6px);
    background:#111827;
    color:#fff;
    border-radius:14px;
    padding:12px 14px;
    box-shadow:0 16px 32px rgba(0,0,0,.24);
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
    z-index:6;
}
.bbs-rental-card:hover .bbs-rental-hover-card,
.bbs-rental-card:focus-within .bbs-rental-hover-card {
    opacity:1;
    transform:translateY(0);
}
.bbs-rental-hover-card strong,
.bbs-rental-modal-bookings h4 { display:block; margin-bottom:10px; }
.bbs-rental-booking-list {
    margin:0;
    padding-left:18px;
    display:grid;
    gap:6px;
    font-size:13px;
}
.bbs-rental-booking-empty { margin:0; font-size:13px; color:inherit; }

.bbs-rental-modal {
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
}
.bbs-rental-modal.is-open { display:block; }
.bbs-rental-modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(15, 23, 42, .65);
}
.bbs-rental-modal-dialog {
    position:relative;
    width:min(960px, calc(100vw - 28px));
    margin: 40px auto;
    max-height: calc(100vh - 80px);
    overflow:auto;
    padding: 0;
}
.bbs-rental-modal-grid {
    display:grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
}
.bbs-rental-modal-image-wrap {
    background:#0f172a;
    min-height:100%;
}
.bbs-rental-modal-image-wrap img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.bbs-rental-modal-content {
    padding: 28px;
}
.bbs-rental-modal-kicker {
    text-transform: uppercase;
    letter-spacing:.08em;
    font-size:12px;
    color:#6b7280;
    margin-bottom:10px;
}
.bbs-rental-modal-content h3 { margin:0 0 8px; }
.bbs-rental-modal-meta,
.bbs-rental-modal-description { color:#4b5563; }
.bbs-rental-modal-description { margin:16px 0 20px; }
.bbs-rental-modal-stats {
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:12px;
    margin-bottom:20px;
}
.bbs-modal-stat {
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px 16px;
    background:#f8fafc;
}
.bbs-modal-stat span {
    display:block;
    font-size:12px;
    color:#6b7280;
    margin-bottom:6px;
    text-transform:uppercase;
}
.bbs-modal-stat strong { font-size:16px; color:#111827; }
.bbs-rental-modal-bookings {
    border-top:1px solid #ececec;
    padding-top:18px;
}
.bbs-rental-modal-actions {
    display:flex;
    gap:10px;
    margin-top:22px;
}
.bbs-modal-close {
    position:absolute;
    top:12px;
    right:12px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:0;
    background:rgba(255,255,255,.9);
    cursor:pointer;
    font-size:28px;
    line-height:1;
    z-index:2;
}
body.bbs-modal-open { overflow:hidden; }

.bbs-hub-footer { text-align:center; color:#666; margin-top:20px; }
.bbs-hub-yoco { font-size:14px; }

@media (max-width: 980px) {
    .bbs-hub-grid { grid-template-columns: 1fr; }
    .bbs-day-header { position:static; }
}

@media (max-width: 760px) {
    .bbs-rental-modal-grid,
    .bbs-booking-summary { grid-template-columns: 1fr; }
    .bbs-rental-modal-dialog { margin: 14px auto; max-height: calc(100vh - 28px); }
    .bbs-rental-modal-content { padding: 22px; }
    .bbs-day-actions,
    .bbs-rental-modal-actions,
    .bbs-rental-actions { flex-direction:column; }
    .bbs-day-note { max-width:none; }
    .bbs-rental-actions .bbs-btn,
    .bbs-rental-modal-actions .bbs-btn,
    .bbs-day-actions .bbs-btn,
    .bbs-day-header .bbs-btn { width:100%; text-align:center; }
}

@media (max-width: 640px) {
    .bbs-calendar-day { min-height: 78px; }
    .bbs-day-number { font-size: 18px; }
    .bbs-calendar-title { min-width:auto; }
    .bbs-panel-header { flex-direction:column; align-items:stretch; }
    .bbs-rental-hover-card { display:none; }
}