/* Dojo Event Booking – Frontend */

/* ── Event List ─────────────────────────────────────────────────────────── */
.deb-event-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
}
.deb-empty {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 40px 0;
}

/* Card */
.deb-card {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s, transform .15s;
}
.deb-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); transform: translateY(-1px); }

.deb-card-header {
    display: flex;
    gap: 18px;
    padding: 18px 20px;
}

/* Date block */
.deb-card-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    color: #fff;
    border-radius: 8px;
    min-width: 52px;
    padding: 8px 10px;
    flex-shrink: 0;
}
.deb-day   { font-size: 22px; font-weight: 800; line-height: 1; }
.deb-month { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.deb-recur-dot { font-size: 10px; margin-top: 2px; opacity: .7; }

.deb-card-meta { flex: 1; }
.deb-card-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.deb-card-details { font-size: 13px; color: #666; }
.deb-card-desc { margin: 8px 0 0; font-size: 13px; color: #555; }

/* Footer */
.deb-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    flex-wrap: wrap;
    gap: 8px;
}
.deb-spots-text { font-size: 12px; color: #666; }
.deb-spots-text.deb-full { color: #cf222e; font-weight: 600; }
.deb-rank-req { font-size: 11px; background: #f0f0f0; padding: 2px 8px; border-radius: 20px; color: #555; }

/* Buttons */
.deb-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .2s, opacity .2s;
    text-decoration: none;
}
.deb-btn-book     { background: #1a1a2e; color: #fff; }
.deb-btn-book:hover { background: #2e2e50; color: #fff; }
.deb-btn-cancel   { background: #fde8e8; color: #cf222e; border: 1px solid #f0b0b0; }
.deb-btn-cancel:hover { background: #fbd0d0; }
.deb-btn-waitlist { background: #fff3cd; color: #9a6700; border: 1px solid #ffc107; }
.deb-btn-disabled { background: #e8e8e8; color: #888; cursor: default; }
.deb-btn-sm { padding: 5px 12px; font-size: 12px; }

/* Message flash */
.deb-message {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    border-top: 1px solid #f0f0f0;
}
.deb-message.deb-success { background: #e8f5e9; color: #1a7f37; }
.deb-message.deb-error   { background: #fde8e8; color: #cf222e; }

/* ── My Bookings ────────────────────────────────────────────────────────── */
.deb-my-bookings { max-width: 680px; }
.deb-booking-row {
    display: grid;
    grid-template-columns: 130px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e8e8e8;
    margin-bottom: 8px;
}
.deb-booking-row.deb-history { opacity: .7; }
.deb-booking-date { font-size: 13px; }
.deb-booking-info { font-size: 14px; }
.deb-badge { display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600; }
.deb-badge.deb-booked    { background:#e8f5e9;color:#1a7f37; }
.deb-badge.deb-waitlist  { background:#fff3cd;color:#9a6700; }
.deb-badge.deb-cancelled { background:#f0f0f0;color:#666; }
.deb-badge.deb-attended  { background:#e8eaf6;color:#3f51b5; }

.deb-notice {
    background: #fff3cd; border: 1px solid #ffc107;
    border-radius: 6px; padding: 12px 16px;
}

@media (max-width: 520px) {
    .deb-card-header { flex-direction: column; gap: 12px; }
    .deb-booking-row { grid-template-columns: 1fr auto; }
    .deb-booking-date { display: none; }
}