/* ═══════════════════════════════════════════════════════════════
   EVENT REGISTRATION SYSTEM — PUBLIC STYLES
   ═══════════════════════════════════════════════════════════════ */

:root {
    --ers-primary: #1a1a2e;
    --ers-primary-light: #16213e;
    --ers-accent: #ff931e;
    --ers-accent-hover: #d63851;
    --ers-success: #0a8754;
    --ers-warning: #e6a817;
    --ers-danger: #dc3545;
    --ers-bg: #f5f6fa;
    --ers-card: #ffffff;
    --ers-text: #2d3436;
    --ers-text-muted: #636e72;
    --ers-border: #dfe6e9;
    --ers-radius: 12px;
    --ers-shadow: 0 2px 16px rgba(26, 26, 46, 0.08);
    --ers-shadow-lg: 0 8px 32px rgba(26, 26, 46, 0.12);
    --ers-font: inherit;
}

.ers-form-wrap,
.ers-form-wrap * {
    font-family: inherit !important;
}
.ers-form-wrap *, .ers-dashboard * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── Form Wrapper ─────────────────────────────────────────── */
.ers-form-wrap {
    max-width: 640px;
    margin: 40px auto;
    font-family: var(--ers-font);
    color: var(--ers-text);
}

/* ─── Stepper ──────────────────────────────────────────────── */
.ers-form-wrap .ers-stepper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-bottom: 32px;
    position: relative;
}
.ers-form-wrap .ers-stepper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--ers-border);
    z-index: 0;
}
.ers-form-wrap .ers-step {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 24px;
    background: transparent;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--ers-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.ers-form-wrap .ers-step-num {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--ers-bg);
    border: 3px solid var(--ers-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
    color: var(--ers-text-muted);
    transition: all 0.3s ease;
}
.ers-form-wrap .ers-step.active .ers-step-num {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}
.ers-form-wrap .ers-step.active { color: var(--ers-accent); }
.ers-form-wrap .ers-step.done .ers-step-num {
    background: var(--ers-success);
    border-color: var(--ers-success);
    color: #fff;
}
.ers-form-wrap .ers-step.done { color: var(--ers-success); }
.ers-form-wrap .ers-step-label {
    display: block;
    margin-top: 4px;
}

/* ─── Form ─────────────────────────────────────────────────── */
.ers-form {
    position: relative;
}

h2.ers-form-title
 {
    color: #000 !important;
}

.ers-form .ers-form-step { display: none !important; visibility: hidden; height: 0; overflow: hidden; }
.ers-form .ers-form-step.active { display: block !important; visibility: visible; height: auto; overflow: visible; animation: ersFadeIn 0.3s ease; }

@keyframes ersFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ers-form-title {
    font-size: 24px; font-weight: 700;
    color: var(--ers-primary); margin-bottom: 6px;
}
.ers-form-subtitle {
    font-size: 14px; color: var(--ers-text-muted); margin-bottom: 28px;
}

/* ─── Fields ───────────────────────────────────────────────── */
.ers-field { margin-bottom: 20px; }
.ers-field label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--ers-text); margin-bottom: 6px;
}
.ers-req { color: red; }

.ers-field input[type="text"],
.ers-field input[type="email"],
.ers-field input[type="tel"],
.ers-field input[type="number"],
.ers-field input[type="date"],
.ers-field select,
.ers-field textarea,
.ers-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--ers-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--ers-font);
    color: var(--ers-text);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}
.ers-field input:focus, .ers-field select:focus, .ers-field textarea:focus, .ers-input:focus {
    border-color: var(--ers-accent);
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);
}
.ers-field input.ers-invalid, .ers-field select.ers-invalid, .ers-field textarea.ers-invalid {
    border-color: var(--ers-danger);
}
.ers-field textarea { resize: vertical; }

/* ─── Upload zone ──────────────────────────────────────────── */
.ers-upload-zone {
    position: relative;
    border: 2px dashed var(--ers-border);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: border-color 0.2s;
    cursor: pointer;
}
.ers-upload-zone:hover, .ers-upload-zone.dragover {
    border-color: var(--ers-accent);
    background: rgba(233, 69, 96, 0.03);
}
.ers-upload-zone input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.ers-upload-placeholder { color: var(--ers-text-muted); }
.ers-upload-placeholder svg { margin-bottom: 8px; opacity: 0.5; }
.ers-upload-preview {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.ers-upload-preview img {
    width: 80px; height: 80px; object-fit: cover;
    border-radius: 6px; border: 2px solid var(--ers-border);
}

/* ─── Buttons ──────────────────────────────────────────────── */
.ers-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 14px 28px;
    font-size: 15px; font-weight: 600; font-family: var(--ers-font);
    color: #fff; background: #000 !important;
    border: none; border-radius: 8px; cursor: pointer;
    transition: all 0.2s ease; text-decoration: none;
    width: 100%; margin-top: 8px;
}
.ers-btn:hover {
    background: var(--ers-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233, 69, 96, 0.3);
}
.ers-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.ers-btn-outline {
    background: transparent; color:#fff;
    border: 2px solid var(--ers-border);
}
.ers-btn-outline:hover {
    border-color: var(--ers-text); background: var(--ers-bg); box-shadow: none;
}
.ers-btn-sm { font-size: 13px; width: auto; margin-top: 0; }
.ers-btn-group { display: flex; gap: 12px; margin-top: 24px; }
.ers-btn-group .ers-btn { flex: 1; }
.ers-btn-stripe { background: #635bff; }
.ers-btn-stripe:hover { background: #4b44d4; box-shadow: 0 4px 12px rgba(99, 91, 255, 0.3); }
.ers-btn-razorpay { background: #0b6ed0; }
.ers-btn-razorpay:hover { background: #0958a8; box-shadow: 0 4px 12px rgba(11, 110, 208, 0.3); }

/* ─── Review card ──────────────────────────────────────────── */
.ers-review-card {
    background: var(--ers-bg); border-radius: 8px; padding: 24px;
}
.ers-review-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 12px 0; border-bottom: 1px solid var(--ers-border); font-size: 14px;
    gap: 16px;
}
.ers-review-row:last-child { border-bottom: none; }
.ers-review-label {
    font-weight: 600; color: var(--ers-text-muted);
    min-width: 140px; flex-shrink: 0;
}
.ers-review-value {
    text-align: right; word-break: break-word; color: var(--ers-text);
}

/* ─── Success ──────────────────────────────────────────────── */
.ers-form-success {
    text-align: center; padding: 60px 40px;
    background: var(--ers-card); border-radius: var(--ers-radius); box-shadow: var(--ers-shadow);
}
.ers-success-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--ers-success); color: #fff; font-size: 40px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; animation: ersScaleIn 0.4s ease;
}
@keyframes ersScaleIn { from { transform: scale(0); } to { transform: scale(1); } }

/* ─── Payment section ──────────────────────────────────────── */
.ers-payment-section { margin-top: 16px; }

/* Ticket tracker */
.ers-ticket-tracker {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 10px; padding: 20px; margin-bottom: 20px; color: #fff;
}
.ers-ticket-info {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.ers-ticket-icon { font-size: 24px; }
.ers-ticket-text { font-size: 15px; }
.ers-ticket-text strong { color: #ff931e; }
.ers-ticket-bar {
    width: 100%; height: 8px; background: rgba(255,255,255,0.15);
    border-radius: 100px; overflow: hidden;
}
.ers-ticket-fill {
    height: 100%; background: linear-gradient(90deg, #0a8754, #2ecc71);
    border-radius: 100px; transition: width 0.6s ease;
}
.ers-ticket-fill.ers-ticket-low {
    background: linear-gradient(90deg, #e6a817, #ff931e);
}
.ers-ticket-fill.ers-ticket-full {
    background: #dc3545; width: 100% !important;
}
.ers-ticket-urgent {
    margin-top: 10px; font-size: 13px; font-weight: 700;
    color: #e6a817; animation: ersPulse 1.5s infinite;
}
@keyframes ersPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Payment divider */
.ers-pay-divider {
    text-align: center; margin: 16px 0 8px; position: relative;
}
.ers-pay-divider::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: var(--ers-border);
}
.ers-pay-divider span {
    background: var(--ers-card); padding: 0 16px;
    position: relative; z-index: 1; color: var(--ers-text-muted);
    font-size: 13px; font-weight: 600; text-transform: uppercase;
}

/* No gateway notice */
.ers-no-gateway-notice {
    background: var(--ers-bg); border-radius: 8px; padding: 16px;
    margin-bottom: 12px; text-align: center; font-size: 14px;
    color: var(--ers-text-muted);
}
.ers-no-gateway-notice p { margin: 0; }
.ers-coupon-row {
    display: flex; gap: 8px; align-items: center; margin-bottom: 16px;
}
.ers-coupon-row input {
    flex: 1; padding: 10px 14px; border: 2px solid var(--ers-border);
    border-radius: 8px; font-size: 14px; outline: none;
}
#ers-coupon-msg { font-size: 13px; font-weight: 600; }
#ers-coupon-msg.success { color: var(--ers-success); }
#ers-coupon-msg.error { color: var(--ers-danger); }
.ers-amount-display {
    font-size: 18px; margin-bottom: 16px; padding: 16px;
    background: var(--ers-bg); border-radius: 8px; text-align: center;
}

/* ─── Spinner ──────────────────────────────────────────────── */
.ers-spinner {
    display: inline-block; width: 20px; height: 20px;
    border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff;
    border-radius: 50%; animation: ersSpin 0.6s linear infinite;
}
@keyframes ersSpin { to { transform: rotate(360deg); } }

/* ─── Login prompt ─────────────────────────────────────────── */
.ers-login-prompt { display: flex; justify-content: center; padding: 60px 20px; }
.ers-login-card {
    text-align: center; background: var(--ers-card);
    border-radius: var(--ers-radius); box-shadow: var(--ers-shadow);
    padding: 48px; max-width: 400px;
}
.ers-login-card h2 { margin-bottom: 8px; }
.ers-login-card p { color: var(--ers-text-muted); margin-bottom: 20px; }
.ers-login-card .ers-btn { width: auto; }

/* ═══ USER DASHBOARD ══════════════════════════════════════════ */
.ers-dashboard {
    max-width: 900px; margin: 40px auto;
    font-family: var(--ers-font); color: var(--ers-text);
}

.ers-dash-header {
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 32px; padding: 32px;
    background: linear-gradient(135deg, var(--ers-primary), var(--ers-primary-light));
    border-radius: var(--ers-radius); color: #fff;
}
.ers-dash-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--ers-accent); display: flex;
    align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700;
}
.ers-dash-info h1 { font-size: 22px; margin-bottom: 2px; }
.ers-dash-info p { opacity: 0.8; font-size: 14px; }

.ers-dash-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-bottom: 32px;
}
.ers-stat-card {
    background: var(--ers-card); border-radius: var(--ers-radius);
    box-shadow: var(--ers-shadow); padding: 24px; text-align: center;
}
.ers-stat-num {
    display: block; font-size: 36px; font-weight: 800;
    color: var(--ers-accent); line-height: 1;
}
.ers-stat-label {
    font-size: 13px; color: var(--ers-text-muted);
    margin-top: 6px; display: block;
}

.ers-dash-tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    background: var(--ers-bg); padding: 4px; border-radius: 10px;
}
.ers-tab {
    flex: 1; padding: 12px; border: none; background: transparent;
    border-radius: 8px; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: var(--ers-font);
    color: var(--ers-text-muted); transition: all 0.2s;
}
.ers-tab.active {
    background: var(--ers-card); color: var(--ers-text);
    box-shadow: var(--ers-shadow);
}
.ers-tab-content { display: none; }
.ers-tab-content.active { display: block; animation: ersFadeIn 0.3s ease; }

/* ─── Registration cards ───────────────────────────────────── */
.ers-reg-card {
    background: var(--ers-card); border-radius: var(--ers-radius);
    box-shadow: var(--ers-shadow); margin-bottom: 16px;
    overflow: hidden; transition: box-shadow 0.2s;
}
.ers-reg-card:hover { box-shadow: var(--ers-shadow-lg); }
.ers-reg-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px; background: var(--ers-bg);
    border-bottom: 1px solid var(--ers-border);
}
.ers-reg-id { font-weight: 700; font-size: 15px; color: var(--ers-primary); }
.ers-reg-card-body { padding: 20px 24px; }
.ers-reg-row {
    font-size: 14px; padding: 6px 0;
    border-bottom: 1px solid var(--ers-bg);
}
.ers-reg-row:last-child { border-bottom: none; }
.ers-reg-card-qr {
    text-align: center; padding: 20px;
    background: var(--ers-bg); border-top: 1px solid var(--ers-border);
}
.ers-qr-img { border-radius: 8px; margin-top: 8px; }
.ers-empty {
    text-align: center; padding: 48px; color: var(--ers-text-muted);
    background: var(--ers-card); border-radius: var(--ers-radius);
    box-shadow: var(--ers-shadow);
}

.ers-photo-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ers-photo-grid img {
    width: 80px; height: 80px; object-fit: cover;
    border-radius: 6px; border: 2px solid var(--ers-border);
    transition: transform 0.2s;
}
.ers-photo-grid img:hover { transform: scale(1.1); }

/* ─── Badges ───────────────────────────────────────────────── */
.ers-badge {
    display: inline-block; padding: 4px 12px; border-radius: 100px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ers-badge-pending { background: #fff3cd; color: #856404; }
.ers-badge-approved { background: #d4edda; color: #155724; }
.ers-badge-rejected { background: #f8d7da; color: #721c24; }

.ers-error {
    background: #f8d7da; color: #721c24;
    padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px;
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .ers-form { padding: 24px 20px; }
    .ers-stepper { flex-wrap: wrap; }
    .ers-step-label { display: none; }
    .ers-dash-stats { grid-template-columns: 1fr; }
    .ers-dash-header { flex-direction: column; text-align: center; }
    .ers-btn-group { flex-direction: column; }
    .ers-coupon-row { flex-direction: column; }
    .ers-reg-card-header { flex-direction: column; gap: 8px; }
}


/* ═══════════════════════════════════════════════
   SELECT2 CONFLICT FIX — paste at bottom of public.css
═══════════════════════════════════════════════ */

/* Select2 button ke upar overlap nahi karega */
.ers-form-wrap .select2-container {
    z-index: 1 !important;
    position: relative !important;
}

/* Buttons hamesha clickable rahenge */
.ers-form-wrap .ers-btn-next,
.ers-form-wrap .ers-btn-prev,
.ers-form-wrap button[type="submit"],
.ers-form-wrap button[type="button"] {
    position: relative !important;
    z-index: 99 !important;
    pointer-events: auto !important;
}

/* Fields ka z-index kam karo taaki button pe na aaye */
.ers-form-wrap .ers-field {
    position: relative;
    z-index: 2;
}

span.select2-selection.select2-selection--single {
    border-radius: 8px !important;
}


/* ── Success tick (replaces the old emoji) ── */
.ers-tick {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #16a34a;
    position: relative;
}
.ers-tick::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 15px;
    width: 15px;
    height: 27px;
    border: solid #fff;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);
}

/* ═══════════════════════════════════════════════════════════════
   VALIDATION + FIELD HINTS — global (v6)
   These used to live only in ERS_Forms::inline_critical_css(), which
   prints on Rideout / Vehicle / Club pages only. Vendor and ticket
   pages never got them, so errors showed with no red border and the
   message ran inline after the hint text. Defined here so every
   ERS form gets identical styling.
   ═══════════════════════════════════════════════════════════════ */
.ers-form-wrap .ers-field { margin-bottom: 20px; position: relative; }

.ers-form-wrap .ers-field-hint {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.4;
    color: #9ca3af;
    margin-top: 5px;
}
.ers-form-wrap .ers-field-desc { font-size: 12px; color: #6b7280; margin: 4px 0 8px; }

/* Red state — inputs, selects, textareas */
.ers-form-wrap input.ers-input-error,
.ers-form-wrap select.ers-input-error,
.ers-form-wrap textarea.ers-input-error {
    border-color: #ef4444 !important;
    background: #fff5f5 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1) !important;
}

/* Theme replaces <select> with Select2 — paint the visible box instead */
.ers-form-wrap select.ers-input-error + .select2-container .select2-selection {
    border-color: #ef4444 !important;
    background: #fff5f5 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1) !important;
}

/* Error message — always its own line, small, red */
.ers-form-wrap .ers-error-msg,
.ers-form-wrap .ers-ticket-error {
    display: flex !important;
    align-items: center;
    gap: 4px;
    width: 100%;
    color: #ef4444 !important;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 6px;
    animation: ersErrIn .2s ease;
}
.ers-form-wrap .ers-error-msg svg,
.ers-form-wrap .ers-ticket-error svg { flex-shrink: 0; margin-right: 0 !important; }

@keyframes ersErrIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

span.ers-error-msg {
    color: red;
}