/* ============================================================
   CBMP — Elementor Widget Styles
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.cbmp-el-wrapper { font-family: system-ui, -apple-system, sans-serif; }

/* ── Tabs ────────────────────────────────────────────────── */
.cbmp-el-tabs {
	display:       flex;
	gap:           0;
	border-bottom: 2px solid rgba(0,0,0,.1);
	margin-bottom: 32px;
	background:    transparent;
}

.cbmp-el-tab-btn {
	background:    transparent;
	border:        none;
	padding:       14px 28px;
	font-size:     15px;
	font-weight:   700;
	color:         #ff0000;
	cursor:        pointer;
	position:      relative;
	border-radius: 6px 6px 0 0;
	transition:    color .2s, background .2s;
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
}
.cbmp-el-tab-btn::after {
	content:       '';
	position:      absolute;
	bottom:        -2px;
	left:          0;
	right:         0;
	height:        3px;
	background:    transparent;
	border-radius: 2px;
	transition:    background .2s;
}
.cbmp-el-tab-btn.cbmp-el-tab-active::after { background: #ff0000; }

.cbmp-el-tab-count {
	display:       inline-block;
	font-size:     11px;
	font-weight:   800;
	padding:       2px 8px;
	border-radius: 20px;
	border:        1px solid currentColor;
	line-height:   1.4;
	transition:    background .2s, color .2s;
}
.cbmp-el-tab-btn.cbmp-el-tab-active .cbmp-el-tab-count {
	background: #ff0000;
	color:      #fff;
	border-color: #ff0000;
}

.cbmp-el-tab-panel { display: none; }
.cbmp-el-panel-active { display: block; }

/* ── Events Grid ─────────────────────────────────────────── */
.cbmp-el-events-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   24px;
}
@media (max-width: 1024px) { .cbmp-el-events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cbmp-el-events-grid { grid-template-columns: 1fr; } }

/* ── Event Card — Base ───────────────────────────────────── */
.cbmp-el-event-card {
	display:         block;
	text-decoration: none;
	color:           inherit;
	background:      #fff;
	border-radius:   16px;
	overflow:        hidden;
	box-shadow:      0 4px 24px rgba(0,0,0,.08);
	transition:      transform .25s ease, box-shadow .25s ease;
	cursor:          pointer;
}
.cbmp-el-event-card:hover {
	transform:       translateY(-6px);
	box-shadow:      0 18px 52px rgba(0,0,0,.15);
	text-decoration: none;
	color:           inherit;
}
.cbmp-el-event-card:focus { outline: 3px solid #ff0000; outline-offset: 2px; }

/* ── Banner ──────────────────────────────────────────────── */
.cbmp-el-card-banner-wrap {
	position:   relative;
	overflow:   hidden;
}
.cbmp-el-card-banner {
	width:        100%;
	height:       220px;
	object-fit:   cover;
	display:      block;
	transition:   transform .4s ease;
}
.cbmp-el-event-card:hover .cbmp-el-card-banner { transform: scale(1.05); }

.cbmp-el-banner-overlay {
	position:         absolute;
	inset:            0;
	background:       linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.75) 100%);
	display:          flex;
	flex-direction:   column;
	justify-content:  flex-end;
	padding:          14px 16px;
}

/* Placeholder (no image) */
.cbmp-el-card-banner-placeholder {
	height:          220px;
	background:      linear-gradient(135deg, #1A05A2 0%, #7b0ead 50%, #ff0000 100%);
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             14px;
	position:        relative;
}
.cbmp-el-placeholder-icon { font-size: 3.5rem; }

.cbmp-el-banner-badges {
	display:    flex;
	gap:        8px;
	flex-wrap:  wrap;
}
.cbmp-el-banner-badges--placeholder {
	position: absolute;
	bottom:   14px;
	left:     16px;
}

/* No-banner badges row */
.cbmp-el-card-badges-row {
	display:     flex;
	gap:         8px;
	padding:     14px 18px 0;
	flex-wrap:   wrap;
}

/* ── Badges ──────────────────────────────────────────────── */
.cbmp-el-badge {
	display:       inline-block;
	padding:       4px 12px;
	border-radius: 20px;
	font-size:     11px;
	font-weight:   800;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.cbmp-el-badge-draft     { background: rgba(241,245,249,.9); color: #64748b; }
.cbmp-el-badge-upcoming  { background: rgba(254,243,199,.95); color: #d97706; }
.cbmp-el-badge-live      { background: rgba(220,252,231,.95); color: #16a34a;
	animation: cbmp-el-pulse 1.5s infinite; }
.cbmp-el-badge-completed { background: rgba(224,231,255,.95); color: #4338ca; }
.cbmp-el-badge-cancelled { background: rgba(254,226,226,.95); color: #dc2626; }

@keyframes cbmp-el-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

.cbmp-el-type-tag {
	display:       inline-block;
	padding:       4px 12px;
	border-radius: 20px;
	font-size:     11px;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: .3px;
	background:    rgba(255,255,255,.22);
	color:         #fff;
	backdrop-filter: blur(4px);
	border:        1px solid rgba(255,255,255,.35);
}
.cbmp-el-type-tag--dark {
	background: rgba(0,0,0,.35);
	border-color: rgba(255,255,255,.2);
}

/* ── Card Body ───────────────────────────────────────────── */
.cbmp-el-card-body { padding: 22px; }

.cbmp-el-card-title {
	font-size:   18px;
	font-weight: 800;
	color:       #1a1a2e;
	margin:      0 0 14px;
	line-height: 1.3;
	transition:  color .2s ease;
}
.cbmp-el-event-card:hover .cbmp-el-card-title { color: #ff0000; }

/* Divider */
.cbmp-el-divider {
	height:        2px;
	background:    linear-gradient(to right, #ff0000 30%, transparent 100%);
	margin-bottom: 14px;
	border-radius: 2px;
}

/* Details */
.cbmp-el-card-details { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.cbmp-el-detail-row {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   13px;
	font-weight: 500;
	color:       #64748b;
}
.cbmp-el-detail-icon { font-size: 14px; width: 18px; flex-shrink: 0; }

/* Buttons */
.cbmp-el-card-actions {
	display:     flex;
	gap:         8px;
	flex-wrap:   wrap;
	padding-top: 4px;
}
.cbmp-el-card-btn {
	display:        inline-flex;
	align-items:    center;
	gap:            5px;
	padding:        8px 16px;
	border-radius:  8px;
	font-size:      12px;
	font-weight:    800;
	text-transform: uppercase;
	letter-spacing: .4px;
	color:          #fff;
	cursor:         pointer;
	transition:     opacity .2s, transform .15s;
	pointer-events: none; /* link is on the card itself */
}
.cbmp-el-btn-ticket { background: #ff0000; }
.cbmp-el-btn-watch  { background: #1A05A2; }

/* ── Card Style Variants ─────────────────────────────────── */

/* Clean */
.cbmp-el-style-clean .cbmp-el-event-card {
	border:     1px solid #e2e8f0;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.cbmp-el-style-clean .cbmp-el-card-banner { height: 180px; }
.cbmp-el-style-clean .cbmp-el-banner-overlay {
	background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.5) 100%);
}

/* Minimal */
.cbmp-el-style-minimal .cbmp-el-event-card {
	border:     1px solid #e2e8f0;
	box-shadow: none;
	border-radius: 8px;
}
.cbmp-el-style-minimal .cbmp-el-card-banner { height: 160px; }
.cbmp-el-style-minimal .cbmp-el-event-card:hover { transform: none; box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* Bordered accent */
.cbmp-el-style-bordered .cbmp-el-event-card {
	border-left:  4px solid #ff0000;
	box-shadow:   0 2px 12px rgba(0,0,0,.06);
	border-radius: 0 12px 12px 0;
}
.cbmp-el-style-bordered .cbmp-el-card-banner { height: 180px; }

/* ── Empty State ─────────────────────────────────────────── */
.cbmp-el-empty {
	text-align: center;
	padding:    60px 20px;
	color:      #94a3b8;
}
.cbmp-el-empty-icon { font-size: 3.5rem; display: block; margin-bottom: 12px; }
.cbmp-el-empty p    { font-size: 15px; }

/* ============================================================
   Officials Widget — Horizontal Card Design
   ============================================================ */

.cbmp-el-officials-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   16px;
}
@media (max-width: 1100px) { .cbmp-el-officials-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .cbmp-el-officials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .cbmp-el-officials-grid { grid-template-columns: 1fr; } }

/* Horizontal card */
.cbmp-el-official-card {
	display:       flex;
	align-items:   center;
	gap:           14px;
	background:    #fff;
	border-radius: 12px;
	padding:       14px 16px;
	box-shadow:    0 4px 20px rgba(0,0,0,.07);
	transition:    transform .22s ease, box-shadow .22s ease, border-color .2s;
	border-left:   3px solid transparent;
}
.cbmp-el-official-card:hover {
	transform:    translateY(-3px);
	box-shadow:   0 14px 40px rgba(0,0,0,.12);
	border-color: #ff0000;
}

/* Photo wrap */
.cbmp-el-off-photo-wrap { flex-shrink: 0; }

.cbmp-el-official-photo {
	width:      56px;
	height:     56px;
	object-fit: cover;
	border:     2px solid #e2e8f0;
	display:    block;
	transition: border-color .2s;
}
.cbmp-el-photo-circle .cbmp-el-official-photo { border-radius: 50%; }
.cbmp-el-photo-square .cbmp-el-official-photo { border-radius: 10px; }
.cbmp-el-official-card:hover .cbmp-el-official-photo { border-color: #ff0000; }

.cbmp-el-official-avatar {
	width:           56px;
	height:          56px;
	border-radius:   50%;
	background:      linear-gradient(135deg, #1A05A2 0%, #ff0000 100%);
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       1.6rem;
}
.cbmp-el-photo-square .cbmp-el-official-avatar { border-radius: 10px; }

/* Info */
.cbmp-el-official-info { flex: 1; min-width: 0; }

.cbmp-el-official-name {
	font-size:     14px;
	font-weight:   800;
	color:         #1a1a2e;
	margin:        0 0 3px;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	line-height:   1.3;
}

.cbmp-el-official-country {
	font-size:     12px;
	color:         #64748b;
	font-weight:   500;
	margin-bottom: 6px;
}

/* Badges row */
.cbmp-el-off-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }

.cbmp-el-official-role {
	display:        inline-block;
	font-size:      10px;
	font-weight:    800;
	text-transform: uppercase;
	letter-spacing: .4px;
	color:          #fff;
	padding:        2px 8px;
	border-radius:  4px;
	line-height:    1.5;
}

.cbmp-el-off-status {
	font-size:      11px;
	font-weight:    700;
	letter-spacing: .3px;
}

.cbmp-el-official-license {
	font-size:   11px;
	color:       #94a3b8;
	font-weight: 500;
}
.cbmp-el-official-license span { font-weight: 700; color: #64748b; }

.cbmp-el-official-bio {
	font-size:   12px;
	color:       #64748b;
	line-height: 1.5;
	margin:      5px 0 0;
}