/*
 * Public program cards (views/login/_program_cards.php): auth pages + Program settings > Public Info Card preview.
 * Styles (Public_program_model::design_styles): .pc-style-classic | hero | ticket | glass | minimal, plus
 * .pc-shadow-none|soft|strong and .pc-btn-rounded|pill|square. Colours come from CSS variables set inline per card
 * (Design section, soft palette): --pc-accent, --pc-accent2, --pc-bg, --pc-title, --pc-text, --pc-chip-bg,
 * --pc-chip-text, --pc-btn-bg, --pc-btn-text, --pc-radius. Unset variable = the style's default.
 * Phones: horizontal swipe strip (one card = full width). Desktop: 1–2 equal-height columns, max ~820px wide.
 * Every rule is scoped under .pc-wrap so page-wide link colours (e.g. .auth-body a) cannot leak in.
 */
.pc-wrap { --pc-muted: #6b7280; --pc-line: #e8edf5; color: #1f2937; max-width: 820px; }

.pc-wrap .pc-head { margin: 0 2px 18px; }
.pc-wrap .pc-head h2 { margin: 0 0 4px; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; color: #0f172a; }
.pc-wrap .pc-head h2 span { background: linear-gradient(90deg, #3b82f6, #a855f7 55%, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-wrap .pc-head p { margin: 0 0 12px; color: #475569; font-size: .92rem; }
.pc-wrap .pc-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.pc-wrap .pc-steps li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .9); font-size: .78rem; font-weight: 700; color: #334155; }
.pc-wrap .pc-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .72rem; background: linear-gradient(135deg, #3b82f6, #a855f7); }
@media (max-width: 575px) { .pc-wrap .pc-steps li { font-size: .74rem; } .pc-wrap .pc-head p { font-size: .86rem; } }

.pc-wrap .pc-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* Card base (Classic) */
.pc-wrap .pc-card {
	flex: 0 0 min(88%, 380px); scroll-snap-align: start;
	position: relative; display: flex; min-width: 0; overflow: hidden;
	background: var(--pc-bg, #fff); color: var(--pc-text, #334155);
	border-radius: var(--pc-radius, 16px); border: 1px solid var(--pc-line);
	box-shadow: 0 4px 16px rgba(16, 24, 40, .06);
}
.pc-wrap .pc-list.is-single .pc-card { flex-basis: 100%; }
.pc-wrap .pc-stub { display: none; }
.pc-wrap .pc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 14px 14px 12px 18px; }
.pc-wrap .pc-style-classic::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--pc-accent, #3b82f6); }

.pc-wrap .pc-shadow-none { box-shadow: none; }
.pc-wrap .pc-shadow-strong { box-shadow: 0 14px 34px rgba(16, 24, 40, .14); }

/* Header */
.pc-wrap .pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pc-wrap .pc-name { min-width: 0; }
.pc-wrap .pc-name h3 { font-size: 1rem; font-weight: 800; margin: 0; line-height: 1.3; color: var(--pc-title, #111827); }
.pc-wrap .pc-name p { margin: 1px 0 0; color: var(--pc-accent, #3b82f6); font-weight: 700; font-size: .84rem; }
.pc-wrap .pc-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: 0 0 auto; max-width: 45%; }
.pc-wrap .pc-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; line-height: 1.2; white-space: nowrap; }
.pc-wrap .pc-pill .fa-circle { font-size: .45rem; }
.pc-wrap .pc-pill.is-open { background: #dcfce7; color: #166534; }
.pc-wrap .pc-pill.is-wait { background: #fef3c7; color: #92400e; }
.pc-wrap .pc-pill.is-off  { background: #f1f5f9; color: #475569; }

/* Facts line */
.pc-wrap .pc-facts { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 0; font-size: .8rem; }
.pc-wrap .pc-facts span { display: inline-flex; align-items: center; gap: 5px; }
.pc-wrap .pc-facts i { color: #94a3b8; font-size: .78rem; }

/* Key chips */
.pc-wrap .pc-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-wrap .pc-keys span { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; padding: 4px 9px; border-radius: 8px; }
.pc-wrap .pc-keys i { font-size: .7rem; }
.pc-wrap .pc-keys .is-fee  { background: #fffbeb; color: #92400e; }
.pc-wrap .pc-keys .is-app  { background: #f1f5f9; color: #334155; }
.pc-wrap .pc-keys .is-deal { background: #fce7f3; color: #9d174d; }

/* Seats */
.pc-wrap .pc-seats { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pc-wrap .pc-seats-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pc-muted); margin-right: 2px; }
.pc-wrap .pc-seat { font-size: .74rem; padding: 3px 8px; border-radius: 8px; border: 1px solid transparent; }
.pc-wrap .pc-seat b { font-weight: 700; }
.pc-wrap .pc-seat.is-ok   { background: #f0fdf4; color: #166534; border-color: #dcfce7; }
.pc-wrap .pc-seat.is-low  { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.pc-wrap .pc-seat.is-full { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pc-wrap .pc-seat.is-more { background: #f8fafc; color: var(--pc-muted); }
.pc-wrap .pc-full { margin: 0; font-size: .78rem; color: #92400e; background: #fffbeb; border-radius: 8px; padding: 6px 9px; }

.pc-wrap .pc-note { margin: 0; font-size: .8rem; background: rgba(148, 163, 184, .1); border-radius: 10px; padding: 7px 10px;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* "See fees, courses & more" → modal (auth pages); inline list in the settings preview */
.pc-wrap .pc-more-btn { color: var(--pc-accent, #2563eb) !important; display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 40px; border: 0; border-top: 1px dashed var(--pc-line); background: none; padding: 0; font: inherit; font-weight: 700; font-size: .82rem; color: #2563eb; cursor: pointer; text-align: left; }
.pc-wrap .pc-more-btn span::first-letter { text-transform: uppercase; }
.pc-wrap .pc-more-btn i { font-size: .72rem; }
.pc-wrap .pc-detail, .pc-modal-body { display: grid; gap: 12px; }
.pc-wrap.is-preview .pc-detail { border-top: 1px dashed var(--pc-line); padding-top: 10px; }

.pc-sec h4 { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 800; margin: 0 0 6px; }
.pc-sec h4 i { margin-right: 3px; }
.pc-fees { list-style: none; padding: 0; margin: 0; border: 1px solid #e8edf5; border-radius: 10px; overflow: hidden; }
.pc-fees li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 10px; font-size: .84rem; }
.pc-fees li + li { border-top: 1px solid #e8edf5; }
.pc-fees small { color: #6b7280; font-size: .74rem; }
.pc-fees b { white-space: nowrap; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chips > span, .pc-course { background: var(--pc-chip-bg, #f1f5f9); color: var(--pc-chip-text, #334155); border-radius: 8px; padding: 4px 9px; font-size: .78rem; font-weight: 600; line-height: 1.35; }
.pc-sec-courses .pc-chips > span { background: var(--pc-chip-bg, #eef2ff); color: var(--pc-chip-text, #3730a3); }
.pc-course { border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; cursor: pointer; font-family: inherit; text-align: left; min-height: 32px; }
.pc-course:hover { background: #e0e7ff; }
.pc-course i { margin-right: 3px; }
.pc-sec-grades .pc-chips > span { background: var(--pc-chip-bg, #f0fdf4); color: var(--pc-chip-text, #166534); }
.pc-sec-discounts .pc-chips > span { background: var(--pc-chip-bg, #fce7f3); color: var(--pc-chip-text, #9d174d); }
.pc-loc + .pc-loc { margin-top: 8px; }
.pc-loc strong { display: block; font-size: .84rem; margin-bottom: 5px; }
.pc-contact { margin: 0; font-size: .8rem; color: #6b7280; word-break: break-word; }
.pc-contact a { color: #2563eb; }

/* Select toggle (one button: tap to select, tap again to unselect) */
.pc-wrap .pc-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 2px; }
.pc-wrap .pc-select { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; border: 1.5px solid transparent; background: var(--pc-btn-bg, #eff6ff); color: var(--pc-btn-text, #1d4ed8); font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.pc-wrap .pc-select:hover { filter: brightness(.97); }
.pc-wrap .pc-select:active { transform: scale(.98); }
.pc-wrap .pc-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid currentColor; display: grid; place-items: center; font-size: .65rem; }
.pc-wrap .pc-check i { opacity: 0; }
.pc-wrap .pc-select-on { display: none; }
.pc-wrap .pc-select[aria-pressed="true"] { background: var(--pc-accent, #3b82f6); border-color: var(--pc-accent, #3b82f6); color: #fff; }
.pc-wrap .pc-select[aria-pressed="true"] .pc-check { background: #fff; color: var(--pc-accent, #3b82f6); border-color: #fff; }
.pc-wrap .pc-select[aria-pressed="true"] .pc-check i { opacity: 1; }
.pc-wrap .pc-select[aria-pressed="true"] .pc-select-on { display: inline; }
.pc-wrap .pc-select[aria-pressed="true"] .pc-select-off { display: none; }
.pc-wrap .pc-select.is-busy { opacity: .6; pointer-events: none; }
.pc-wrap .pc-icon-btn { flex: 0 0 44px; display: grid; place-items: center; min-height: 44px; border-radius: 12px; background: #f8fafc; color: #475569; border: 1px solid var(--pc-line); text-decoration: none; }
.pc-wrap .pc-icon-btn:hover { color: #1f2937; }
.pc-wrap .pc-card.is-selected { border-color: var(--pc-accent, #3b82f6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-accent, #3b82f6) 25%, transparent), 0 6px 18px rgba(16, 24, 40, .08); }

/* Desktop: equal-height cards in 1–2 columns */
@media (min-width: 992px) {
	.pc-wrap .pc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); overflow: visible; padding: 4px; align-items: stretch; }
	.pc-wrap .pc-list.is-single { grid-template-columns: minmax(0, 560px); }
}

.pc-wrap.is-preview { max-width: none; }
.pc-wrap.is-preview .pc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 380px)); overflow: visible; align-items: start; }

/* Modal */
.pc-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px); }
.pc-modal[hidden] { display: none; }
.pc-modal-box { width: 100%; max-width: 560px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); overflow: hidden; color: #1f2937; animation: pc-pop .18s ease-out; }
.pc-modal-box > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid #eef2f7; }
.pc-modal-box h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.pc-modal-box header p { margin: 2px 0 0; font-size: .84rem; color: #2563eb; font-weight: 700; }
.pc-modal-x { flex: 0 0 40px; height: 40px; border: 0; border-radius: 10px; background: #f1f5f9; color: #475569; cursor: pointer; }
.pc-modal-body { padding: 16px 18px; overflow-y: auto; font-size: .9rem; line-height: 1.55; }
.pc-modal-body h2, .pc-modal-body h3, .pc-modal-body h4 { font-size: 1rem; margin: .4em 0 .2em; }
.pc-modal-body p { margin: 0 0 .6em; }
.pc-modal-box > footer:empty { display: none; }
.pc-modal-box > footer { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #eef2f7; display: flex; gap: 8px; }
.pc-modal-box > footer .pc-select { flex: 1; }
@keyframes pc-pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
@media (max-width: 575px) {
	.pc-modal { align-items: flex-end; padding: 0; }
	.pc-modal-box { max-width: none; border-radius: 18px 18px 0 0; max-height: 88dvh; }
}

/* Button shapes */
.pc-wrap .pc-btn-pill .pc-select, .pc-wrap .pc-btn-pill .pc-icon-btn { border-radius: 999px; }
.pc-wrap .pc-btn-square .pc-select, .pc-wrap .pc-btn-square .pc-icon-btn { border-radius: 6px; }

/* Hero header: gradient band with the name in white */
.pc-wrap .pc-style-hero .pc-main { padding: 0 0 14px; }
.pc-wrap .pc-style-hero .pc-main > :not(.pc-top) { margin-left: 16px; margin-right: 16px; }
.pc-wrap .pc-style-hero .pc-top {
	padding: 16px 16px 18px; margin-bottom: 2px; color: #fff;
	background: linear-gradient(135deg, var(--pc-accent, #3b82f6), var(--pc-accent2, color-mix(in srgb, var(--pc-accent, #3b82f6) 45%, #a855f7)));
}
.pc-wrap .pc-style-hero .pc-name h3 { color: var(--pc-title, #fff); font-size: 1.06rem; }
.pc-wrap .pc-style-hero .pc-name p { color: rgba(255, 255, 255, .88); }
.pc-wrap .pc-style-hero .pc-pill { background: rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(4px); }

/* Ticket: date stub + perforated edge */
.pc-wrap .pc-style-ticket .pc-stub {
	flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff; text-transform: uppercase;
	background: linear-gradient(180deg, var(--pc-accent, #3b82f6), var(--pc-accent2, color-mix(in srgb, var(--pc-accent, #3b82f6) 55%, #0ea5e9)));
}
.pc-wrap .pc-style-ticket .pc-stub span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; opacity: .9; }
.pc-wrap .pc-style-ticket .pc-stub b { font-size: 1.9rem; line-height: 1; font-weight: 800; }
.pc-wrap .pc-style-ticket .pc-stub i { font-size: 1.5rem; }
.pc-wrap .pc-style-ticket .pc-main { border-left: 2px dashed #e2e8f0; padding-left: 14px; }
.pc-wrap .pc-style-ticket::before, .pc-wrap .pc-style-ticket::after {
	content: ''; position: absolute; left: 67px; width: 18px; height: 18px; border-radius: 50%; background: var(--pc-notch, #eef2fb); z-index: 1;
}
.pc-wrap .pc-style-ticket::before { top: -9px; }
.pc-wrap .pc-style-ticket::after { bottom: -9px; }
.pc-wrap .pc-style-ticket .pc-name p { color: var(--pc-accent, #3b82f6); }

/* Glass: frosted card, icon tiles */
.pc-wrap .pc-style-glass {
	background: var(--pc-bg, rgba(255, 255, 255, .58)); border: 1px solid rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.pc-wrap .pc-style-glass .pc-top::before { content: ''; flex: 0 0 34px; height: 34px; border-radius: 12px; background: linear-gradient(135deg, var(--pc-accent, #3b82f6), var(--pc-accent2, #a855f7)); box-shadow: 0 6px 14px rgba(59, 130, 246, .25); }
.pc-wrap .pc-style-glass .pc-name { flex: 1; }
.pc-wrap .pc-style-glass .pc-facts { gap: 6px; }
.pc-wrap .pc-style-glass .pc-facts span { background: rgba(255, 255, 255, .75); border-radius: 10px; padding: 5px 9px; }
.pc-wrap .pc-style-glass .pc-facts i { color: var(--pc-accent, #3b82f6); }
.pc-wrap .pc-style-glass .pc-select { background: var(--pc-btn-bg, rgba(255, 255, 255, .8)); }
.pc-wrap .pc-style-glass .pc-more-btn { border-top-color: rgba(148, 163, 184, .35); }

/* Minimal: outline, space, dot */
.pc-wrap .pc-style-minimal { border-color: #e5e7eb; }
.pc-wrap .pc-style-minimal.pc-shadow-soft { box-shadow: none; }
.pc-wrap .pc-style-minimal .pc-main { padding: 18px 18px 14px; gap: 11px; }
.pc-wrap .pc-style-minimal .pc-name h3::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pc-accent, #3b82f6); margin-right: 8px; vertical-align: 2px; }
.pc-wrap .pc-style-minimal .pc-name p { color: var(--pc-muted); font-weight: 600; padding-left: 17px; }
.pc-wrap .pc-style-minimal .pc-pill, .pc-wrap .pc-style-minimal .pc-keys span, .pc-wrap .pc-style-minimal .pc-seat { background: transparent; border: 1px solid #e5e7eb; }
.pc-wrap .pc-style-minimal .pc-select { background: var(--pc-btn-bg, transparent); border-color: #e5e7eb; color: var(--pc-btn-text, #111827); }

/* Selected state wins over every style */
.pc-wrap .pc-card .pc-select[aria-pressed="true"] { background: var(--pc-accent, #3b82f6); border-color: var(--pc-accent, #3b82f6); color: #fff; }
.pc-wrap .pc-card.pc-card.is-selected { border-color: var(--pc-accent, #3b82f6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-accent, #3b82f6) 25%, transparent), 0 6px 18px rgba(16, 24, 40, .08); }

/* Details modal follows the card design (auth.js copies the card's variables + style classes onto .pc-modal-box) */
.pc-modal-box { background: var(--pc-bg, #fff); color: var(--pc-text, #1f2937); border-radius: calc(var(--pc-radius, 16px) + 2px); }
.pc-modal-box > header h3 { color: var(--pc-title, #111827); }
.pc-modal-box > header p { color: var(--pc-accent, #2563eb); }
.pc-modal-box.pc-style-hero > header, .pc-modal-box.pc-style-ticket > header, .pc-modal-box.pc-style-glass > header {
	border-bottom: 0; color: #fff;
	background: linear-gradient(135deg, var(--pc-accent, #3b82f6), var(--pc-accent2, color-mix(in srgb, var(--pc-accent, #3b82f6) 45%, #a855f7)));
}
.pc-modal-box.pc-style-hero > header h3, .pc-modal-box.pc-style-ticket > header h3, .pc-modal-box.pc-style-glass > header h3 { color: var(--pc-title, #fff); }
.pc-modal-box.pc-style-hero > header p, .pc-modal-box.pc-style-ticket > header p, .pc-modal-box.pc-style-glass > header p { color: rgba(255, 255, 255, .88); }
.pc-modal-box.pc-style-hero .pc-modal-x, .pc-modal-box.pc-style-ticket .pc-modal-x, .pc-modal-box.pc-style-glass .pc-modal-x { background: rgba(255, 255, 255, .22); color: #fff; }
.pc-modal-box .pc-sec h4 { color: inherit; opacity: .7; }
.pc-modal-box .pc-fees, .pc-modal-box .pc-fees li + li { border-color: color-mix(in srgb, var(--pc-text, #1f2937) 12%, transparent); }
.pc-modal-box .pc-course { border-color: transparent; }
.pc-modal-box > footer { border-top-color: color-mix(in srgb, var(--pc-text, #1f2937) 10%, transparent); }
.pc-modal-box.pc-btn-pill .pc-select { border-radius: 999px; }
.pc-modal-box.pc-btn-square .pc-select { border-radius: 6px; }
@media (max-width: 575px) { .pc-modal-box { border-radius: calc(var(--pc-radius, 16px) + 2px) calc(var(--pc-radius, 16px) + 2px) 0 0; } }