/* CEO Circle — Subscription Scheduler front-end styles. Palette: blue + light blue. */

/* Badges (details "Schedule" row + affiliate table) */
.ccs-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.6;
}
.ccs-badge.ccs-state--on { background: #eef2ff; color: #2b4ae0; }
.ccs-badge.ccs-state--pause { background: #fdf1dd; color: #7a4d06; }
.ccs-badge.ccs-state--unpaid { background: #fbe4e4; color: #a4262c; }

/* Calendar row (inside the subscription details table) */
.ccs-cal-cell { padding-top: 16px; padding-bottom: 16px; }

/* Notices */
.ccs-notice { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: 0.92em; }
.ccs-notice--success { background: #eef2ff; color: #2b4ae0; border: 1px solid #c3cffb; }
.ccs-notice--error { background: #fbe4e4; color: #a4262c; border: 1px solid #f1b0b0; }
.ccs-notice--info { background: #eef2ff; color: #3538cd; border: 1px solid #c7d0ff; }

/* Paused banner */
.ccs-status {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 14px; border-radius: 10px; margin: 0 0 12px; font-size: 0.9em; line-height: 1.5;
}
.ccs-status__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.ccs-status--pause { background: #fdf1dd; color: #7a4d06; }
.ccs-status--pause .ccs-status__dot { background: #e0900a; }

/* Reactivate now */
.ccs-reactivate { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.ccs-reactivate__note { font-size: 0.82em; color: #6b7280; }

/* Mode selector (two radio cards) */
.ccs-modes { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.ccs-mode { border: 1.5px solid #e4e4e7; border-radius: 12px; background: #fff; transition: border-color 0.15s; }
.ccs-mode:hover { border-color: #2b4ae0; }
.ccs-mode:has(input:checked) { border-color: #2b4ae0; }

.ccs-mode__head { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0; cursor: pointer; }
.ccs-mode__head input { position: absolute; opacity: 0; width: 0; height: 0; }
.ccs-mode__dot {
	width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cbd5e1;
	flex: 0 0 auto; margin-top: 2px; position: relative; transition: 0.15s;
}
.ccs-mode__head input:checked + .ccs-mode__dot { border-color: #2b4ae0; }
.ccs-mode__head input:checked + .ccs-mode__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #2b4ae0; }
.ccs-mode__head input:focus-visible + .ccs-mode__dot { box-shadow: 0 0 0 3px rgba(43, 74, 224, 0.3); }
.ccs-mode__text { display: flex; flex-direction: column; gap: 2px; }
.ccs-mode__title { font-weight: 600; }
.ccs-mode__title strong { color: #2b4ae0; }
/* Active-months count shows only in custom mode. */
.ccs-form:not(.is-open) .ccs-count-wrap { display: none; }
.ccs-mode__badge {
	display: inline-block; font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	color: #6b7280; background: #f1f2f4; padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 4px;
}
.ccs-mode__desc { font-size: 0.82em; color: #6b7280; line-height: 1.45; }

/* Collapsible scheduler (inside the custom card) */
.ccs-scheduler { padding: 0 14px 14px; }
.ccs-form:not(.is-open) .ccs-scheduler { display: none; }

/* Month pills */
.ccs-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 4px 0 0; }
@media (max-width: 600px) { .ccs-months { grid-template-columns: repeat(3, 1fr); } }

.ccs-month { display: block; cursor: pointer; margin: 0; }
.ccs-month input { position: absolute; opacity: 0; width: 0; height: 0; }
.ccs-month__pill {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	padding: 10px 8px; min-height: 54px;
	border: 1.5px solid #e4e4e7; border-radius: 10px; background: #fff;
	font-weight: 600; color: #9ca3af; transition: all 0.15s; text-align: center;
}
.ccs-month__name { font-size: 0.95em; }
.ccs-month__tag { font-size: 0.58em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.ccs-month:hover .ccs-month__pill { border-color: #2b4ae0; }
.ccs-month input:checked + .ccs-month__pill { border-color: #2b4ae0; background: #eef2ff; color: #2b4ae0; }
.ccs-month--current { cursor: not-allowed; }
.ccs-month--current .ccs-month__pill { border-style: dashed; }
.ccs-month--current:hover .ccs-month__pill { border-color: #cbd5e1; }

/* Notes */
.ccs-lock-note { font-size: 0.8em; color: #9ca3af; margin: 12px 0 0; line-height: 1.45; }
.ccs-form__error { color: #a4262c; font-size: 0.85em; font-weight: 600; margin: 8px 0 0; }

.ccs-form__save { margin-top: 0; }
.ccs-form__save[disabled] { opacity: 0.5; cursor: not-allowed; }
.ccs-form__save[hidden] { display: none !important; }

/* Affiliate area — client schedule table */
.ccs-affiliate { margin: 2em 0 0; }
.ccs-affiliate__hint { font-size: 0.88em; color: #6b7280; margin: 0 0 0.75em; }
.ccs-affiliate__table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.ccs-affiliate__table th,
.ccs-affiliate__table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: middle; }

.ccs-pattern { display: inline-flex; gap: 2px; }
.ccs-pattern span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; border-radius: 4px; font-size: 10px; font-weight: 700;
}
.ccs-pattern__on { background: #dbe3ff; color: #2b4ae0; }
.ccs-pattern__off { background: #ececed; color: #9ca3af; }