/* =====================================================================
   Event Booking Pro – Public CSS
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --ebp-accent:  #7c3aed;
    --ebp-accent2: #5b21b6;
    --ebp-green:   #059669;
    --ebp-red:     #dc2626;
    --ebp-warn:    #d97706;
    --ebp-border:  #e5e7eb;
    --ebp-bg:      #fafafb;
    --ebp-r:       10px;
    --ebp-font:    'DM Sans', system-ui, sans-serif;
}

/* ── Calendar ────────────────────────────────────────────────────── */
.ebp-calendar { font-family: var(--ebp-font); max-width: 780px; }
.ebp-cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ebp-cal-header h3 { margin:0; font-size:1.25rem; font-weight:700; }
.ebp-cal-nav { text-decoration:none; font-size:1.5rem; color:var(--ebp-accent); padding:0 10px; }
.ebp-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--ebp-border); border-radius:var(--ebp-r); overflow:hidden; }
.ebp-cal-dow { background:#f3f0ff; color:var(--ebp-accent); font-weight:700; font-size:.78rem; text-align:center; padding:8px 0; text-transform:uppercase; letter-spacing:.05em; }
.ebp-cal-day { border:1px solid #f3f4f6; min-height:80px; padding:6px; background:#fff; font-size:.85rem; }
.ebp-cal-day--empty { background: var(--ebp-bg); }
.ebp-cal-day--today > .ebp-cal-day__num { background:var(--ebp-accent); color:#fff; border-radius:50%; width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center; }
.ebp-cal-day--has-event { background:#faf5ff; }
.ebp-cal-day__num { font-weight:600; display:block; margin-bottom:4px; }
.ebp-cal-event-chip { display:block; width:100%; text-align:left; padding:3px 7px; border:none; border-radius:5px; color:#fff; font-size:.75rem; font-weight:600; cursor:pointer; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ebp-cal-event-chip:hover { opacity:.85; }

/* ── Modal ───────────────────────────────────────────────────────── */
.ebp-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; }
.ebp-modal-box { background:#fff; border-radius:16px; max-width:520px; width:100%; max-height:90vh; overflow-y:auto; padding:32px; position:relative; }
.ebp-modal-close { position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.3rem; cursor:pointer; color:#6b7280; }

/* ── Event list ──────────────────────────────────────────────────── */
.ebp-event-list { font-family:var(--ebp-font); display:grid; gap:20px; }
.ebp-event-card { border-left:4px solid var(--accent,#7c3aed); background:#fff; border-radius:var(--ebp-r); box-shadow:0 2px 12px rgba(0,0,0,.06); overflow:hidden; }
.ebp-event-card__img { height:140px; background-size:cover; background-position:center; }
.ebp-event-card__body { padding:18px 20px; }
.ebp-event-card__meta { display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; color:#6b7280; margin-bottom:8px; }
.ebp-event-card__title { font-size:1.15rem; font-weight:700; margin:0 0 12px; }
.ebp-event-card__foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ebp-event-card__price { font-size:1.05rem; font-weight:700; color:var(--ebp-accent); }
.ebp-event-card__avail { font-size:.82rem; color:var(--ebp-green); font-weight:600; }
.ebp-event-card__avail.ebp-sold-out { color:var(--ebp-red); }
.ebp-btn-sm { padding:7px 16px; background:var(--ebp-accent); color:#fff; border:none; border-radius:6px; font-family:var(--ebp-font); font-size:.85rem; font-weight:700; cursor:pointer; }
.ebp-btn-sm:hover { background:var(--ebp-accent2); }
.ebp-empty { color:#6b7280; }

/* ── Booking form ────────────────────────────────────────────────── */
.ebp-booking-wrap { font-family:var(--ebp-font); max-width:680px; color:#1f2937; }
.ebp-field { display:flex; flex-direction:column; margin-bottom:18px; }
.ebp-field label { font-weight:600; font-size:.83rem; text-transform:uppercase; letter-spacing:.04em; color:#374151; margin-bottom:6px; }
.ebp-field input, .ebp-field select, .ebp-field textarea {
    width:100%; padding:11px 14px; border:2px solid var(--ebp-border); border-radius:8px;
    font-family:var(--ebp-font); font-size:.95rem; color:#111; background:#fff;
    transition:border-color .15s, box-shadow .15s; box-sizing:border-box;
    appearance:none; -webkit-appearance:none;
}
.ebp-field input:focus, .ebp-field select:focus, .ebp-field textarea:focus {
    outline:none; border-color:var(--ebp-accent); box-shadow:0 0 0 3px rgba(124,58,237,.15);
}
.ebp-field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.ebp-field textarea { resize:vertical; min-height:80px; }
.ebp-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:520px) { .ebp-row { grid-template-columns:1fr; } }

/* Event info panel */
.ebp-event-info-panel { background:#f5f3ff; border-left:3px solid var(--ebp-accent); border-radius:0 8px 8px 0; padding:14px 18px; margin-bottom:18px; font-size:.9rem; }
.ebp-event-info-panel h4 { margin:0 0 6px; font-size:1rem; color:var(--ebp-accent2); }
.ebp-event-info-panel p  { margin:2px 0; color:#4b5563; }

/* Total preview */
.ebp-total-preview { background:#ecfdf5; border:1px solid #a7f3d0; border-radius:8px; padding:12px 16px; margin-bottom:18px; font-weight:600; color:#065f46; font-size:1rem; }

/* Payment methods */
.ebp-pay-methods { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.ebp-pay-opt { display:flex; align-items:center; gap:8px; padding:10px 18px; border:2px solid var(--ebp-border); border-radius:8px; cursor:pointer; font-weight:500; transition:border-color .15s; }
.ebp-pay-opt:has(input:checked) { border-color:var(--ebp-accent); background:#f5f3ff; }
.ebp-pay-opt input { accent-color:var(--ebp-accent); }

/* Submit */
.ebp-submit-row { margin-top:6px; }
.ebp-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 36px; background:var(--ebp-accent); color:#fff; border:none; border-radius:8px; font-family:var(--ebp-font); font-size:1rem; font-weight:700; cursor:pointer; letter-spacing:.01em; transition:background .15s, box-shadow .15s, transform .1s; }
.ebp-btn:hover  { background:var(--ebp-accent2); box-shadow:0 4px 14px rgba(124,58,237,.4); }
.ebp-btn:active { transform:translateY(1px); }
.ebp-btn:disabled { opacity:.6; cursor:not-allowed; }
.ebp-btn__spinner { display:none; width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:ebp-spin .7s linear infinite; }
.ebp-btn.is-loading .ebp-btn__spinner { display:block; }
.ebp-btn.is-loading .ebp-btn__text { display:none; }
@keyframes ebp-spin { to { transform:rotate(360deg); } }

/* Notices */
.ebp-notice { padding:14px 18px; border-radius:8px; margin-bottom:18px; font-weight:500; font-family:var(--ebp-font); }
.ebp-notice--success { background:#ecfdf5; border-left:4px solid var(--ebp-green); color:#065f46; }
.ebp-notice--error   { background:#fef2f2; border-left:4px solid var(--ebp-red);   color:#7f1d1d; }
.ebp-notice--warning { background:#fffbeb; border-left:4px solid var(--ebp-warn);   color:#78350f; }
