/* Calendarific front end. Colors come from CSS variables set in Settings → Look & Feel. */
.calfic-scope {
	--calfic-primary: #008B8B;
	--calfic-on-primary: #fff;
	--calfic-accent: #FF1493;
	--calfic-on-accent: #fff;
	--calfic-text: #222;
	--calfic-bg: #fff;
	--calfic-surface: #f6fafa;
	--calfic-border: #e3e8ea;
	--calfic-today: #e3f4f4;
	--calfic-radius: 12px;
	--calfic-font: inherit;
	--calfic-shadow: 0 10px 30px -12px rgba(0,0,0,.18);
	--calfic-pad: 10px;
	--calfic-muted: color-mix(in srgb, var(--calfic-text) 58%, var(--calfic-bg));
	--calfic-r-sm: calc(var(--calfic-radius) * .6);
	font-family: var(--calfic-font);
	color: var(--calfic-text);
	line-height: 1.45;
	box-sizing: border-box;
}
.calfic-scope *, .calfic-scope *::before, .calfic-scope *::after { box-sizing: border-box; }
.calfic-scope button { font-family: inherit; }

.calfic { container-type: inline-size; margin: 1.5em 0; }
.calfic-loading { padding: 40px; text-align: center; color: var(--calfic-muted); }
.calfic-shell {
	background: var(--calfic-bg);
	border: 1px solid var(--calfic-border);
	border-radius: var(--calfic-radius);
	box-shadow: var(--calfic-shadow);
	overflow: hidden;
}

/* Toolbar */
.calfic-toolbar {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 16px 18px; border-bottom: 1px solid var(--calfic-border);
}
.calfic-nav { display: flex; gap: 6px; align-items: center; }
.calfic-scope .calfic-title { margin: 0; font-size: 1.35em; font-weight: 700; flex: 1; min-width: 150px; color: var(--calfic-text); line-height: 1.2; font-family: inherit; }
.calfic-icon-btn {
	width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--calfic-border);
	background: var(--calfic-bg); color: var(--calfic-text); font-size: 20px; line-height: 1; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: .15s;
}
.calfic-icon-btn:hover { background: var(--calfic-primary); color: var(--calfic-on-primary); border-color: var(--calfic-primary); }
.calfic-views { display: inline-flex; background: var(--calfic-surface); border: 1px solid var(--calfic-border); border-radius: 999px; padding: 3px; }
.calfic-views button {
	border: 0; background: transparent; color: var(--calfic-text); padding: 6px 14px; border-radius: 999px;
	cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.2;
}
.calfic-views button.is-active { background: var(--calfic-primary); color: var(--calfic-on-primary); }

/* Filters */
.calfic-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--calfic-border); background: var(--calfic-surface); }
.calfic-chipbtn {
	--calfic-ev: var(--calfic-primary);
	border: 1px solid var(--calfic-border); background: var(--calfic-bg); color: var(--calfic-text);
	border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; line-height: 1.2;
}
.calfic-chipbtn i { width: 9px; height: 9px; border-radius: 50%; background: var(--calfic-ev); display: inline-block; }
.calfic-chipbtn.is-active { background: var(--calfic-ev); border-color: var(--calfic-ev); color: #fff; }
.calfic-chipbtn.is-active i { background: #fff; }
.calfic-search {
	margin-left: auto; border: 1px solid var(--calfic-border); border-radius: 999px; padding: 6px 14px;
	background: var(--calfic-bg); color: var(--calfic-text); font-size: 14px; min-width: 180px; font-family: inherit;
}
.calfic-search:focus { outline: 2px solid var(--calfic-primary); outline-offset: 1px; }

/* Buttons */
.calfic-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 9px 16px; border-radius: 999px; border: 1px solid var(--calfic-border);
	background: var(--calfic-bg); color: var(--calfic-text) !important; text-decoration: none !important;
	font-weight: 600; font-size: 14px; cursor: pointer; line-height: 1.2; transition: .15s;
}
.calfic-btn:hover { border-color: var(--calfic-primary); color: var(--calfic-primary) !important; }
.calfic-btn-primary { background: var(--calfic-primary); border-color: var(--calfic-primary); color: var(--calfic-on-primary) !important; }
.calfic-btn-primary:hover { filter: brightness(1.08); color: var(--calfic-on-primary) !important; }
.calfic-btn-sm { padding: 6px 12px; font-size: 13px; }
.calfic-btn[disabled] { opacity: .6; cursor: wait; }

/* Month grid */
.calfic-dow, .calfic-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calfic-dow span {
	padding: 10px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--calfic-muted); text-align: center; background: var(--calfic-surface); border-bottom: 1px solid var(--calfic-border);
}
.calfic-day {
	min-height: 112px; padding: var(--calfic-pad) 6px; border-right: 1px solid var(--calfic-border); border-bottom: 1px solid var(--calfic-border);
	display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; background: var(--calfic-bg);
}
.calfic-day:nth-child(7n) { border-right: 0; }
.calfic-day.is-other { background: var(--calfic-surface); }
.calfic-day.is-other .calfic-daynum { opacity: .45; }
.calfic-day.is-today { background: var(--calfic-today); }
.calfic-daynum {
	font-size: 13px; font-weight: 700; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; align-self: flex-end; margin: -4px 0 0; border: 0; background: none; color: inherit; padding: 0; cursor: default;
}
.calfic-day.is-today .calfic-daynum { background: var(--calfic-primary); color: var(--calfic-on-primary); }

.calfic-ev {
	--calfic-ev: var(--calfic-primary);
	display: flex; align-items: flex-start; gap: 5px; width: 100%; text-align: left;
	font-size: 12.5px; font-weight: 600; line-height: 1.25; padding: 4px 7px; border-radius: var(--calfic-r-sm);
	cursor: pointer; border: 1px solid transparent; min-width: 0; font-family: inherit;
	background: color-mix(in srgb, var(--calfic-ev) 14%, var(--calfic-bg)); color: var(--calfic-text);
	transition: transform .12s, box-shadow .12s;
}
.calfic-ev:hover, .calfic-ev:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--calfic-ev) 60%, transparent); outline: none; }
.calfic-ev-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--calfic-ev); flex: 0 0 auto; margin-top: 5px; }
.calfic-ev-txt { display: flex; flex-direction: column; min-width: 0; }
.calfic-ev-t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.calfic-ev-time { font-weight: 500; opacity: .8; font-size: 11px; }
.calfic-pill-soft .calfic-ev-dot { display: none; }
.calfic-pill-soft .calfic-ev { border-left: 3px solid var(--calfic-ev); }
.calfic-pill-filled .calfic-ev { background: var(--calfic-ev); color: #fff; }
.calfic-pill-filled .calfic-ev-dot { display: none; }
.calfic-pill-outline .calfic-ev { background: var(--calfic-bg); border-color: var(--calfic-ev); color: var(--calfic-text); }
.calfic-pill-outline .calfic-ev-dot { display: none; }
.calfic-pill-dot .calfic-ev { background: transparent; padding-left: 2px; }
.calfic-pill-dot .calfic-ev:hover { background: color-mix(in srgb, var(--calfic-ev) 10%, var(--calfic-bg)); }
.calfic-ev.is-featured { box-shadow: inset 0 0 0 2px var(--calfic-accent); }
.calfic-ev.is-featured .calfic-ev-t::before { content: "★ "; color: var(--calfic-accent); }
.calfic-pill-filled .calfic-ev.is-featured .calfic-ev-t::before { color: #fff; }
.calfic-ev.is-past { opacity: .55; }
.calfic-more { background: none; border: 0; padding: 2px 6px; font-size: 12px; font-weight: 700; color: var(--calfic-primary); cursor: pointer; text-align: left; font-family: inherit; }
.calfic-more:hover { text-decoration: underline; }

/* Day panel (phones + "more") */
.calfic-daypanel { padding: 16px 18px; border-top: 1px solid var(--calfic-border); }
.calfic-daypanel h4 { margin: 0 0 10px; font-size: 1em; font-family: inherit; color: var(--calfic-text); }

/* List view */
.calfic-list { padding: 6px 18px 18px; }
.calfic-group { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--calfic-border); }
.calfic-group:last-child { border-bottom: 0; }
.calfic-group.is-today .calfic-badge { background: var(--calfic-primary); color: var(--calfic-on-primary); border-color: var(--calfic-primary); }
.calfic-group-items { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.calfic-row {
	--calfic-ev: var(--calfic-primary);
	display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; width: 100%; text-align: left;
	padding: 12px 14px; border-radius: var(--calfic-radius); border: 1px solid var(--calfic-border); border-left: 5px solid var(--calfic-ev);
	background: var(--calfic-bg); color: var(--calfic-text); cursor: pointer; font-family: inherit; font-size: inherit; transition: .15s;
}
.calfic-row:hover, .calfic-row:focus-visible { border-color: var(--calfic-ev); box-shadow: var(--calfic-shadow); outline: none; }
.calfic-row.is-featured { background: color-mix(in srgb, var(--calfic-accent) 6%, var(--calfic-bg)); }
.calfic-row.is-past { opacity: .6; }
.calfic-row-img { width: 76px; height: 60px; border-radius: var(--calfic-r-sm); background-size: cover; background-position: center; }
.calfic-row-noimg { display: none; }
.calfic-row-main { min-width: 0; }
.calfic-row-time { font-size: 13px; font-weight: 700; color: var(--calfic-ev); }
.calfic-row-title { font-size: 1.05em; font-weight: 700; margin: 2px 0; }
.calfic-row-meta { font-size: 13px; color: var(--calfic-muted); }
.calfic-row-ex { font-size: 14px; margin-top: 4px; color: var(--calfic-muted); }
.calfic-loadmore { text-align: center; padding-top: 14px; }
.calfic-empty { text-align: center; padding: 40px 10px; color: var(--calfic-muted); }

/* Date badge */
.calfic-badge {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	width: 60px; height: 64px; border-radius: var(--calfic-radius); border: 1px solid var(--calfic-border);
	background: var(--calfic-surface); color: var(--calfic-text); flex: 0 0 auto; line-height: 1;
}
.calfic-badge-m { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--calfic-ev, var(--calfic-primary)); }
.calfic-group.is-today .calfic-badge-m { color: inherit; }
.calfic-badge-d { font-size: 24px; font-weight: 800; margin-top: 4px; }
.calfic-badge-w { font-size: 11px; margin-top: 3px; opacity: .75; }
.calfic-badge-lg { width: 76px; height: 80px; }
.calfic-badge-lg .calfic-badge-d { font-size: 30px; }

.calfic-chip { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--calfic-surface); border: 1px solid var(--calfic-border); font-weight: 600; vertical-align: middle; }
.calfic-status { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; background: var(--calfic-accent); color: var(--calfic-on-accent); margin-top: 4px; }

/* Modal */
.calfic-modal-wrap {
	position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px;
	background: rgba(15, 18, 30, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s;
}
.calfic-modal-wrap.is-open { opacity: 1; }
.calfic-modal {
	--calfic-ev: var(--calfic-primary);
	background: var(--calfic-bg); color: var(--calfic-text); width: 100%; max-width: 580px; max-height: calc(100vh - 32px); overflow: auto;
	border-radius: calc(var(--calfic-radius) + 4px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); position: relative;
	transform: translateY(12px) scale(.98); transition: transform .2s;
}
.calfic-modal-wrap.is-open .calfic-modal { transform: none; }
.calfic-modal-img { height: 210px; background-size: cover; background-position: center; }
.calfic-modal-band { height: 8px; background: var(--calfic-ev); }
.calfic-modal-body { padding: 22px 26px 26px; }
.calfic-close {
	position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0;
	background: rgba(255,255,255,.92); color: #222; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 2;
}
.calfic-modal-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.calfic-modal-cats span { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--calfic-primary); }
.calfic-scope .calfic-modal-title { font-size: 1.6em; margin: 0 0 12px; line-height: 1.2; color: var(--calfic-text); font-family: inherit; padding-right: 30px; }
.calfic-facts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 15px; }
.calfic-fact a { color: var(--calfic-primary); font-weight: 600; }
.calfic-modal-desc { font-size: 15px; margin-bottom: 18px; }
.calfic-modal-desc p { margin: 0 0 .8em; }
.calfic-modal-desc img { max-width: 100%; height: auto; }
.calfic-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.calfic-addto { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--calfic-muted); text-transform: uppercase; letter-spacing: .05em; }
.calfic-past-note { margin-top: 12px; color: var(--calfic-muted); font-style: italic; }
.calfic-modal-open { overflow: hidden; }

/* Reminder form */
.calfic-remind {
	margin-top: 18px; padding: 16px; border-radius: var(--calfic-radius);
	background: color-mix(in srgb, var(--calfic-primary) 8%, var(--calfic-bg)); border: 1px dashed color-mix(in srgb, var(--calfic-primary) 45%, var(--calfic-bg));
}
.calfic-remind-h { font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.calfic-remind-row { display: flex; gap: 8px; flex-wrap: wrap; }
.calfic-remind input, .calfic-remind select,
.calfic-submit input, .calfic-submit select, .calfic-submit textarea {
	border: 1px solid var(--calfic-border); border-radius: var(--calfic-r-sm); padding: 9px 12px; font-size: 15px; font-family: inherit;
	background: var(--calfic-bg); color: var(--calfic-text); min-width: 0; width: 100%; max-width: 100%;
}
.calfic-remind input[type=email] { flex: 2 1 180px; width: auto; }
.calfic-remind input[type=text] { flex: 1 1 120px; width: auto; }
.calfic-remind select { flex: 1 1 140px; width: auto; }
.calfic-remind button { flex: 0 0 auto; }
.calfic-msg { margin-top: 10px; font-weight: 600; font-size: 14px; }
.calfic-msg.is-ok { color: #138a47; }
.calfic-msg.is-err { color: #c62828; }
.calfic-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Upcoming widget */
.calfic-upcoming { display: flex; flex-direction: column; gap: 10px; margin: 1em 0; }
.calfic-scope .calfic-upcoming-title { margin: 0 0 4px; font-family: inherit; }
.calfic-up-item {
	--calfic-ev: var(--calfic-primary);
	display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: var(--calfic-radius);
	border: 1px solid var(--calfic-border); background: var(--calfic-bg); color: var(--calfic-text) !important; text-decoration: none !important; transition: .15s;
}
.calfic-up-item:hover { border-color: var(--calfic-ev); box-shadow: var(--calfic-shadow); }
.calfic-up-item.is-featured { border-color: var(--calfic-accent); }
.calfic-up-item .calfic-badge { width: 54px; height: 58px; }
.calfic-up-item .calfic-badge-d { font-size: 21px; }
.calfic-up-body { display: flex; flex-direction: column; min-width: 0; }
.calfic-up-name { font-weight: 700; line-height: 1.3; }
.calfic-up-meta { font-size: 13px; color: var(--calfic-muted); }
.calfic-up-img { width: 64px; height: 58px; border-radius: var(--calfic-r-sm); background-size: cover; background-position: center; flex: 0 0 auto; }
.calfic-upcoming-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.calfic-upcoming-cards .calfic-upcoming-title { grid-column: 1 / -1; }
.calfic-upcoming-cards .calfic-up-item { flex-direction: column; align-items: flex-start; padding: 0 0 16px; overflow: hidden; position: relative; }
.calfic-upcoming-cards .calfic-up-img { width: 100%; height: 150px; border-radius: 0; }
.calfic-upcoming-cards .calfic-badge { position: absolute; top: 12px; left: 12px; background: var(--calfic-bg); box-shadow: var(--calfic-shadow); }
.calfic-upcoming-cards .calfic-up-body { padding: 0 16px; }
.calfic-upcoming-cards .calfic-up-item:not(:has(.calfic-up-img)) { padding-top: 84px; }

/* Single event page */
.calfic-single {
	--calfic-ev: var(--calfic-primary);
	border: 1px solid var(--calfic-border); border-top: 6px solid var(--calfic-ev); border-radius: var(--calfic-radius);
	padding: 20px 22px; margin: 0 0 1.8em; background: var(--calfic-bg); box-shadow: var(--calfic-shadow);
}
.calfic-single-top { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.calfic-single-facts { display: flex; flex-direction: column; gap: 5px; font-size: 15px; }
.calfic-single-facts a { color: var(--calfic-primary); font-weight: 600; }

/* Submit form */
.calfic-submit { margin: 1.5em 0; }
.calfic-submit-form {
	background: var(--calfic-bg); border: 1px solid var(--calfic-border); border-radius: var(--calfic-radius);
	padding: 24px; box-shadow: var(--calfic-shadow); position: relative;
}
.calfic-scope .calfic-submit-form h3 { margin: 0 0 16px; font-family: inherit; color: var(--calfic-text); }
.calfic-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 18px; container-type: inline-size; }
.calfic-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; }
.calfic-fields label em { color: var(--calfic-accent); font-style: normal; }
.calfic-fields .calfic-full { grid-column: 1 / -1; }
.calfic-fields .calfic-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.calfic-fields .calfic-check input { width: auto; }
.calfic-submit-form.is-allday .calfic-t { opacity: .4; pointer-events: none; }
.calfic-submit-form.is-done .calfic-fields, .calfic-submit-form.is-done > button { display: none; }
.calfic-submit-form.is-done .calfic-msg { font-size: 17px; padding: 20px; text-align: center; }

/* Narrow containers (phones, sidebars) */
@container (max-width: 640px) {
	.calfic-toolbar { padding: 12px; gap: 8px; }
	.calfic-title { order: -1; flex-basis: 100%; font-size: 1.15em; }
	.calfic-views { margin-left: auto; }
	.calfic-filters { padding: 10px 12px; }
	.calfic-search { flex-basis: 100%; margin-left: 0; }
	.calfic-dow span { padding: 8px 2px; font-size: 11px; }
	.calfic-day { min-height: 54px; padding: 4px 2px; align-items: center; cursor: pointer; gap: 2px; }
	.calfic-daynum { align-self: center; margin: 0; }
	.calfic-day .calfic-ev, .calfic-day .calfic-more { display: none; }
	.calfic-day-dots { display: flex !important; gap: 3px; flex-wrap: wrap; justify-content: center; }
	.calfic-day.is-selected { box-shadow: inset 0 0 0 2px var(--calfic-primary); }
	.calfic-list { padding: 4px 12px 14px; }
	.calfic-group { grid-template-columns: 1fr; gap: 8px; }
	.calfic-group > .calfic-badge { flex-direction: row; width: auto; height: auto; padding: 6px 12px; gap: 8px; justify-self: start; border-radius: 999px; }
	.calfic-group > .calfic-badge .calfic-badge-d { font-size: 16px; margin: 0; }
	.calfic-group > .calfic-badge .calfic-badge-w { margin: 0; }
	.calfic-row { grid-template-columns: 1fr; }
	.calfic-row-img { width: 100%; height: 130px; }
}
.calfic-day-dots { display: none; }
.calfic-day-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--calfic-ev, var(--calfic-primary)); display: block; }

@container (max-width: 520px) {
	.calfic-fields { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.calfic-modal-wrap { align-items: flex-end; padding: 0; }
	.calfic-modal { max-height: 92vh; border-radius: calc(var(--calfic-radius) + 4px) calc(var(--calfic-radius) + 4px) 0 0; }
	.calfic-modal-body { padding: 18px; }
	.calfic-modal-img { height: 160px; }
	.calfic-single-top { flex-direction: column; }
	.calfic-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.calfic-scope *, .calfic-modal-wrap, .calfic-modal { transition: none !important; }
}