/* ============================================================
   Event Ticket Manager — Public Styles
   Modern, mobile-first, no framework dependency.
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────── */
.etm-wrap *,
.etm-wrap *::before,
.etm-wrap *::after {
	box-sizing: border-box;
}

.etm-wrap {
	--etm-primary:    #d8345f;
	--etm-primary-h:  #b8244c;
	--etm-success:    #057a55;
	--etm-success-bg: #def7ec;
	--etm-danger:     #c81e1e;
	--etm-danger-bg:  #fde8e8;
	--etm-warning:    #92400e;
	--etm-warning-bg: #fef3c7;
	--etm-info:       #1e429f;
	--etm-info-bg:    #e1effe;
	--etm-gray-50:    #f7f7f9;
	--etm-gray-100:   #eeeef2;
	--etm-gray-200:   #e0e0e7;
	--etm-gray-400:   #98989f;
	--etm-gray-600:   #56565f;
	--etm-gray-800:   #1c1c22;
	--etm-radius:     14px;
	--etm-shadow:     0 1px 2px rgba(17,21,28,.06), 0 1px 1px rgba(17,21,28,.04);
	--etm-shadow-md:  0 8px 24px rgba(17,21,28,.08), 0 2px 6px rgba(17,21,28,.05);

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--etm-gray-800);
	line-height: 1.55;
	font-size: 14px; /* Base minimum — nothing in forms should render smaller than this. */
	-webkit-font-smoothing: antialiased;
}

/* ── Card ─────────────────────────────────────────────── */
.etm-card {
	background: #fff;
	border: 1px solid var(--etm-gray-200);
	border-radius: var(--etm-radius);
	box-shadow: var(--etm-shadow-md);
	padding: 28px;
	margin-bottom: 20px;
}

/* ── Auth container ───────────────────────────────────── */
.etm-auth-container {
	max-width: 420px;
	margin: 48px auto;
	padding: 0 16px;
}

.etm-auth-logo {
	text-align: center;
	margin-bottom: 20px;
}

.etm-auth-logo img {
	max-height: 56px;
	width: auto;
}

.etm-auth-title {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-align: center;
	margin: 0 0 6px;
	color: var(--etm-gray-800);
}

.etm-auth-subtitle {
	text-align: center;
	color: var(--etm-gray-600);
	margin: 0 0 28px;
	font-size: 1.2rem;
}

/* ── Form ─────────────────────────────────────────────── */
.etm-form-group {
	margin-bottom: 14px;
}

.etm-form-row {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 480px) {
	.etm-form-row { grid-template-columns: 1fr; }
	.etm-card { padding: 22px 18px; }
}

.etm-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--etm-gray-800);
	margin-bottom: 5px;
}

.etm-input,
.etm-select,
.etm-textarea {
	display: block;
	width: 100%;
	padding: 8px 12px;
	font-size: 16px;
	font-family: inherit;
	color: var(--etm-gray-800);
	background: #fff;
	border: 1.5px solid var(--etm-gray-200);
	border-radius: 8px;
	transition: border-color .15s, box-shadow .15s;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

.etm-input:focus,
.etm-select:focus,
.etm-textarea:focus {
	border-color: var(--etm-primary);
	box-shadow: 0 0 0 3px rgba(216,52,95,.15);
}

.etm-input.is-invalid,
.etm-select.is-invalid {
	border-color: var(--etm-danger);
}

/* ── Password field with show/hide toggle ──────────────────────────────── */
.etm-password-wrap {
	position: relative;
}

.etm-password-wrap .etm-input {
	padding-right: 44px;
}

.etm-toggle-password {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 8px;
	color: var(--etm-gray-600);
	border-radius: 6px;
}

.etm-toggle-password:hover {
	background: var(--etm-gray-100);
}

.etm-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

/* ── Buttons ──────────────────────────────────────────── */
.etm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	border: none;
	border-radius: 9px;
	cursor: pointer;
	transition: background .15s, transform .1s, box-shadow .15s;
	text-decoration: none;
	line-height: 1.4;
}

.etm-btn:active { transform: translateY(1px); }

.etm-btn-primary {
	background: var(--etm-primary);
	color: #fff;
	width: 100%;
	box-shadow: 0 2px 8px rgba(216,52,95,.28);
}
.etm-btn-primary:hover { background: var(--etm-primary-h); color: #fff; }

.etm-btn-secondary {
	background: var(--etm-gray-100);
	color: var(--etm-gray-800);
	border: 1.5px solid var(--etm-gray-200);
}
.etm-btn-secondary:hover { background: var(--etm-gray-200); }

.etm-btn-sm {
	padding: 7px 14px;
	font-size: 1.2rem; /* 14px */
}

.etm-btn:disabled,
.etm-btn.is-loading {
	opacity: .65;
	cursor: not-allowed;
	pointer-events: none;
}

.etm-btn-link {
	background: none;
	border: none;
	color: var(--etm-primary);
	padding: 0;
	font-size: inherit;
	cursor: pointer;
	text-decoration: underline;
}

/* ── Alerts ───────────────────────────────────────────── */
.etm-alert {
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 1.2rem;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.etm-alert-success { background: var(--etm-success-bg); color: var(--etm-success); }
.etm-alert-danger  { background: var(--etm-danger-bg);  color: var(--etm-danger); }
.etm-alert-warning { background: var(--etm-warning-bg); color: var(--etm-warning); }
.etm-alert-info    { background: var(--etm-info-bg);    color: var(--etm-info); }

/* ── Links ────────────────────────────────────────────── */
.etm-auth-links {
	text-align: center;
	margin-top: 20px;
	font-size: 1.2rem;
	color: var(--etm-gray-600);
}

.etm-auth-links a {
	color: var(--etm-primary);
	text-decoration: none;
	font-weight: 600;
}

.etm-auth-links a:hover { text-decoration: underline; }

/* ── Divider ──────────────────────────────────────────── */
.etm-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	color: var(--etm-gray-400);
	font-size: .875rem; /* 14px */
}
.etm-divider::before,
.etm-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--etm-gray-200);
}

/* ── Checkbox ─────────────────────────────────────────── */
.etm-checkbox-group {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.2rem;
}

.etm-checkbox-group input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--etm-primary);
	cursor: pointer;
}

/* ── Unverified banner ───────────────────────────────── */
.etm-verify-banner {
	background: var(--etm-warning-bg);
	border: 1px solid #fcd34d;
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.etm-verify-banner p {
	margin: 0;
	color: var(--etm-warning);
	font-size: 1.2rem;
}

/* ── Spinner ──────────────────────────────────────────── */
.etm-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: etm-spin .7s linear infinite;
}

@keyframes etm-spin {
	to { transform: rotate(360deg); }
}

/* ── Success screen ───────────────────────────────────── */
.etm-success-screen {
	text-align: center;
	padding: 40px 20px;
}

.etm-success-icon {
	width: 64px;
	height: 64px;
	background: var(--etm-success-bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	font-size: 2rem;
}

.etm-success-screen h2 {
	font-size: 1.4rem;
	margin: 0 0 10px;
	color: var(--etm-success);
}

.etm-success-screen p {
	color: var(--etm-gray-600);
	max-width: 360px;
	margin: 0 auto 24px;
}

/* ── Dashboard ────────────────────────────────────────── */
.etm-dashboard-container {
	max-width: 100%;
	margin: 32px auto;
	padding: 0 16px;
}

.etm-dashboard-header {
	margin-bottom: 28px;
}

.etm-dashboard-header h2 {
	font-size: 1.6rem;
	margin: 0 0 4px;
}

.etm-dashboard-header p {
	color: var(--etm-gray-600);
	margin: 0;
}

/* ── Ticket table ─────────────────────────────────────── */
.etm-table-wrap {
	overflow-x: auto;
}

.etm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.etm-table th {
	text-align: left;
	padding: 10px 14px;
	background: var(--etm-gray-50);
	border-bottom: 2px solid var(--etm-gray-200);
	font-weight: 600;
	white-space: nowrap;
}

.etm-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--etm-gray-100);
	vertical-align: middle;
}

.etm-table tr:last-child td { border-bottom: none; }
.etm-table tr:hover td { background: var(--etm-gray-50); }

/* ── Badge ────────────────────────────────────────────── */
.etm-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.etm-badge-active   { background: var(--etm-success-bg); color: var(--etm-success); }
.etm-badge-used     { background: var(--etm-warning-bg); color: var(--etm-warning); }
.etm-badge-expired  { background: var(--etm-danger-bg);  color: var(--etm-danger); }

/* ── Day cards ────────────────────────────────────────── */
.etm-days-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.etm-day-card {
	background: #fff;
	border: 1px solid var(--etm-gray-200);
	border-radius: var(--etm-radius);
	padding: 20px;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}

.etm-day-card:hover {
	border-color: var(--etm-primary);
	box-shadow: var(--etm-shadow-md);
	transform: translateY(-2px);
}

.etm-day-card.is-disabled {
	opacity: .6;
	pointer-events: none;
	background: var(--etm-gray-50);
}

.etm-day-card-date {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--etm-primary);
	margin-bottom: 4px;
}

.etm-day-card-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 12px;
}

.etm-matches-list {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	font-size: 1.3rem;
}

.etm-matches-list li {
	padding: 5px 0;
	border-bottom: 1px solid var(--etm-gray-100);
	display: flex;
	gap: 10px;
}

.etm-matches-list li:last-child { border-bottom: none; }

.etm-match-time {
	color: var(--etm-gray-600);
	white-space: nowrap;
	min-width: 70px;
}

.etm-day-capacity {
	font-size: 1.2rem;
	color: var(--etm-gray-600);
	margin-bottom: 14px;
}

.etm-day-capacity strong {
	color: var(--etm-success);
}

/* ── QR Scanner ───────────────────────────────────────── */
.etm-scanner-container {
	max-width: 480px;
	margin: 32px auto;
	padding: 0 16px;
}

#etm-qr-reader {
	width: 100%;
	border-radius: var(--etm-radius);
	overflow: hidden;
}

.etm-verify-result {
	margin-top: 24px;
	border-radius: var(--etm-radius);
	padding: 24px;
	text-align: center;
}

.etm-verify-valid    { background: #d1fae5; border: 2px solid #10b981; }
.etm-verify-used     { background: #fef3c7; border: 2px solid #f59e0b; }
.etm-verify-expired  { background: #fee2e2; border: 2px solid #ef4444; }
.etm-verify-invalid  { background: #fee2e2; border: 2px solid #ef4444; }
.etm-verify-wrongday { background: #e0e7ff; border: 2px solid #6366f1; }

.etm-verify-result h2 {
	font-size: 1.6rem;
	margin: 0 0 16px;
}

.etm-verify-result .etm-attendee-name {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.etm-verify-result table {
	margin: 16px auto;
	font-size: .9rem;
	text-align: left;
}

.etm-verify-result table td:first-child {
	font-weight: 600;
	padding-right: 16px;
	white-space: nowrap;
}