/**
 * Pixel PCO WordPress Integrator — Frontend Styles
 *
 * Styles for the [pco_registration] and [pco_registration_card] shortcodes.
 *
 * All rules are scoped under .pco-registration-card or .pco-* prefixes
 * to minimise conflicts with theme styles.
 *
 * Customisation
 * -------------
 * Override any of these rules in your theme stylesheet. The card layout
 * uses CSS custom properties so you can reskin it with a few lines:
 *
 *   .pco-registration-card {
 *     --pco-card-radius:     8px;
 *     --pco-card-shadow:     0 2px 12px rgba(0,0,0,.12);
 *     --pco-accent:          #0073aa;
 *     --pco-accent-hover:    #005177;
 *     --pco-open-color:      #065f46;
 *     --pco-open-bg:         #d1fae5;
 *     --pco-closed-color:    #991b1b;
 *     --pco-closed-bg:       #fee2e2;
 *     --pco-archived-color:  #6b7280;
 *     --pco-archived-bg:     #f3f4f6;
 *   }
 *
 * @package PixelPCO
 */

/* ── Custom properties ───────────────────────────────────────────────────── */

.pco-registration-card {
	--pco-card-radius:    6px;
	--pco-card-shadow:    0 2px 8px rgba(0, 0, 0, 0.10);
	--pco-accent:         #0073aa;
	--pco-accent-hover:   #005177;
	--pco-open-color:     #065f46;
	--pco-open-bg:        #d1fae5;
	--pco-closed-color:   #991b1b;
	--pco-closed-bg:      #fee2e2;
	--pco-archived-color: #6b7280;
	--pco-archived-bg:    #f3f4f6;
}

/* ── Card container ──────────────────────────────────────────────────────── */

.pco-registration-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: var(--pco-card-radius);
	box-shadow: var(--pco-card-shadow);
	overflow: hidden;
	max-width: 560px;
	font-family: inherit;
	color: inherit;
}

/* ── Image ───────────────────────────────────────────────────────────────── */

.pco-card__image-wrap {
	width: 100%;
	overflow: hidden;
	max-height: 260px;
}

.pco-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.pco-card__body {
	padding: 20px 24px 24px;
}

/* ── Header (title + status badge) ──────────────────────────────────────── */

.pco-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.pco-card__title {
	margin: 0;
	font-size: 1.25em;
	line-height: 1.3;
	font-weight: 700;
	color: inherit;
}

.pco-card__status {
	flex-shrink: 0;
	display: inline-block;
	font-size: 0.72em;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
	margin-top: 3px;
}

.pco-card__status--open {
	background: var(--pco-open-bg);
	color: var(--pco-open-color);
}

.pco-card__status--closed {
	background: var(--pco-closed-bg);
	color: var(--pco-closed-color);
}

.pco-card__status--archived {
	background: var(--pco-archived-bg);
	color: var(--pco-archived-color);
}

/* ── Dates ───────────────────────────────────────────────────────────────── */

.pco-card__dates {
	margin-bottom: 14px;
}

.pco-dates-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pco-date-item {
	font-size: 0.9em;
	color: #374151;
	padding: 2px 0;
}

.pco-date-item::before {
	content: "📅 ";
}

.pco-no-dates {
	font-size: 0.9em;
	color: #6b7280;
	font-style: italic;
}

/* ── Description ─────────────────────────────────────────────────────────── */

.pco-card__description {
	font-size: 0.95em;
	line-height: 1.6;
	color: #374151;
	margin-bottom: 20px;
}

.pco-card__description p:last-child {
	margin-bottom: 0;
}

/* ── CTA button ──────────────────────────────────────────────────────────── */

.pco-card__cta {
	margin-top: 4px;
}

.pco-card__register-btn {
	display: inline-block;
	background: var(--pco-accent);
	color: #fff;
	text-decoration: none;
	padding: 10px 22px;
	border-radius: 4px;
	font-size: 0.95em;
	font-weight: 600;
	transition: background 0.15s;
	cursor: pointer;
}

.pco-card__register-btn:hover,
.pco-card__register-btn:focus {
	background: var(--pco-accent-hover);
	color: #fff;
	text-decoration: none;
}

.pco-card__register-btn--disabled {
	background: #9ca3af;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Field shortcode wrappers ────────────────────────────────────────────── */

.pco-registration-name {
	font-weight: 600;
}

.pco-registration-description {
	line-height: 1.6;
}

.pco-registration-image {
	max-width: 100%;
	height: auto;
	display: block;
}

.pco-registration-dates .pco-dates-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ── Error (admin-only) ──────────────────────────────────────────────────── */

.pco-shortcode-error {
	background: #fee2e2;
	border-left: 4px solid #ef4444;
	padding: 10px 14px;
	font-size: 13px;
	color: #7f1d1d;
	border-radius: 2px;
	margin: 8px 0;
}