/* latest UI improvements 20/07/2026 */
/* ============================================================
   EPAY — CONSOLIDATED STYLESHEET
   XMUM E-Payment / Conference & Events Portal
   ============================================================
   Sections:
   1. Root variables & reset
   2. App shell (sidebar / nav / offcanvas)
   3. Topbar & breadcrumbs
   4. Page wrapper & footer
   5. Details header / back button
   6. Info card component
   7. Table component
   8. Buttons
   9. Checkbox / radio (custom)
   10. Payment method cards
   11. Status pills
   12. Terms & conditions box
   13. Test / info banners
   14. Form fields (registration form)
   15. Select2 override
   16. Tabs component
   17. Event listing (hero / toolbar / chips / cards / pager)
   18. Event details (qty stepper)
   19. Registration result (success state)
   20. Payment enquiries page
   21. Print styles
   22. Responsive (shell-level, <=1040px)
   ============================================================ */

/* ============================================================
   1. ROOT VARIABLES & RESET
   ============================================================ */
:root {
    --epay-bg: #f3f5f8;
    --epay-surface: #ffffff;
    --epay-surface-2: #f7f9fc;
    --epay-ink: #0e1726;
    --epay-ink-2: #3a4558;
    --epay-ink-3: #6b7689;
    --epay-line: #e2e6ee;
    --epay-line-2: #eef1f6;
    --epay-teal: #0a9d80;
    --epay-teal-2: #0bc09a;
    --epay-teal-soft: #d6f5ec;
    --epay-coral: #ff5a3c;
    --epay-coral-soft: #ffe1d8;
    --epay-amber: #f5a623;
    --epay-amber-soft: #fff1d1;
    --epay-green: #11b364;
    --epay-green-soft: #d2f4e1;
    --epay-grey: #8a93a3;
    --epay-grey-soft: #eef0f5;
    --epay-indigo: #5a4af4;
    --epay-indigo-soft: #e4e0fd;
    --epay-pink: #ec4899;
    --epay-pink-soft: #fde0ef;
    --epay-navy: #002347;
    --epay-navy-2: #1a3e60;
    --epay-radius-sm: 10px;
    --epay-radius: 16px;
    --epay-radius-lg: 24px;
    --epay-shadow-sm: 0 1px 0 rgba(20,25,23,0.04), 0 1px 2px rgba(20,25,23,0.04);
    --epay-shadow: 0 1px 0 rgba(20,25,23,0.04), 0 8px 24px -12px rgba(20,25,23,0.12);
}

select.form-control,
select.form-select,
.epay-select-wrap select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    padding-right: 38px !important;
}

html, body { margin: 0; padding: 0; }

body {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--epay-bg);
    color: var(--epay-ink);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   2. APP SHELL
   ============================================================ */
.epay-app {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

.epay-sidebar {
    background: linear-gradient(180deg, #0e1726 0%, #0a1430 100%);
    color: #d7dcd9;
    padding: 22px 16px 10px;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.epay-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 12px;
}

.epay-brand-mark { display: flex; align-items: center; justify-content: center; flex: none; }
.epay-brand-text { line-height: 1.15; }
.epay-brand-text .epay-brand-title { font-weight: 800; font-size: 15px; color: #fff; }
.epay-brand-text .epay-brand-subtitle { font-size: 12px; color: #98a39f; letter-spacing: 0.02em; }

.epay-nav-section {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6f7a76;
    padding: 14px 12px 6px;
}

.epay-nav { display: flex; flex-direction: column; gap: 2px; }

.epay-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 12px;
    color: #c5ccc9;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.epay-nav a:hover { background: rgba(255,255,255,0.04); color: #fff; text-decoration: none; }

.epay-nav a.epay-active {
    background: linear-gradient(135deg, rgba(11,192,154,0.22), rgba(90,74,244,0.22));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(11,192,154,0.35);
}

.epay-nav .epay-nav-ico { width: 20px; height: 20px; flex: none; opacity: .9; font-size: 16px; }

.epay-nav .epay-badge-n {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    background: var(--epay-coral);
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
}

.epay-icon-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--epay-surface-2);
    border: 1px solid var(--epay-line);
    color: var(--epay-ink-2);
    text-decoration: none;
    transition: background .15s;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.epay-icon-btn:hover { background: var(--epay-bg); color: var(--epay-ink); text-decoration: none; }

/* Mobile hamburger (flat variant) */
.epay-menu-toggle { display: none; }

.epay-menu-toggle.epay-icon-btn {
    background: transparent;
    border: none;
    width: auto;
    height: auto;
    border-radius: 0;
    color: var(--epay-ink);
    font-size: 1.6rem;
    line-height: 1;
    transition: color 0.3s ease;
}

.epay-menu-toggle.epay-icon-btn:hover,
.epay-menu-toggle.epay-icon-btn:active,
.epay-menu-toggle.epay-icon-btn:focus {
    background: transparent;
    color: var(--epay-teal);
    box-shadow: none;
}

/* Offcanvas (mobile sidebar) */
.epay-offcanvas { background: #0f1a18 !important; color: #d7dcd9 !important; width: 280px !important; }
.epay-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 20px 20px 16px 10px; }
.epay-offcanvas .offcanvas-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.epay-offcanvas .epay-brand { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.epay-offcanvas .epay-nav-section { padding: 16px 10px 6px; }
.epay-offcanvas .epay-nav a { padding: 10px 10px; border-radius: 10px; font-size: 14px; }
.epay-offcanvas .epay-sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.08); padding: 16px 10px; }

.offcanvas-backdrop {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(15, 26, 24, 0.5) !important;
}
.offcanvas-backdrop.show { opacity: 1 !important; }

.epay-offcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.8; }
.epay-offcanvas .btn-close:hover { opacity: 1; }

/* ============================================================
   3. TOPBAR & BREADCRUMBS
   ============================================================ */
.epay-main { display: flex; flex-direction: column; min-width: 0; }

.epay-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    background: var(--epay-surface);
    border-bottom: 1px solid var(--epay-line);
    gap: 16px;
    flex-wrap: nowrap;
}

.epay-topbar-title { font-size: 15px; font-weight: 700; color: var(--epay-ink); }

.epay-crumb-slot { flex: 1 1 auto; min-width: 0; }

.epay-breadcrumb-wrapper {
    padding: 0 16px 0 0;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: hidden;
    position: relative;
}

.epay-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--epay-ink-3);
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
    width: 100%;
    min-width: 0;
}

.epay-breadcrumbs a { color: var(--epay-ink-2); font-weight: 500; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.epay-breadcrumbs a:hover { text-decoration: underline; }
.epay-breadcrumbs .epay-breadcrumb-sep { opacity: .5; flex-shrink: 0; }
.epay-breadcrumbs .epay-breadcrumb-current { color: var(--epay-ink); font-weight: 600; white-space: nowrap; flex-shrink: 0; }

.epay-breadcrumb-wrapper::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 4px;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--epay-surface));
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
.epay-breadcrumb-wrapper.has-more-right::after { opacity: 1; }

/* ============================================================
   4. PAGE WRAPPER & FOOTER
   ============================================================ */
.epay-page { padding: 28px 32px 20px; width: 100%; flex: 1; margin: 0 auto; overflow-x: hidden; }
.epay-foot { margin-top: 40px; text-align: center; color: var(--epay-ink-3); font-size: 13px; }

/* ============================================================
   5. DETAILS HEADER / BACK BUTTON
   (used by: event-details, event-registration, payment-confirmation,
   api-payment-confirmation, free-registration-result)
   ============================================================ */
.epay-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.epay-details-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--epay-ink, var(--epay-navy));
    letter-spacing: -0.02em;
    margin: 0;
}

.epay-details-subtitle {
    font-size: 15px;
    color: var(--epay-ink-2);
    text-align: center;
    margin-bottom: 32px;
}

.epay-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid var(--epay-line);
    background: var(--epay-surface);
    color: var(--epay-ink-2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}
.epay-btn-back:hover { background: var(--epay-surface-2); border-color: var(--epay-ink-3); color: var(--epay-ink); }

/* ============================================================
   6. INFO CARD COMPONENT
   ============================================================ */
.epay-info-card {
    background: var(--epay-surface);
    border: 1px solid var(--epay-line);
    border-radius: var(--epay-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.epay-info-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--epay-ink);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--epay-line);
    display: flex;
    align-items: center;
    gap: 8px;
}

.epay-info-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .epay-info-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; } }

.epay-info-row { display: flex; flex-direction: column; gap: 6px; }
.epay-info-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--epay-ink-3); }
.epay-info-value { font-size: 15px; font-weight: 600; color: var(--epay-ink); line-height: 1.4; }
.epay-info-value a { color: var(--epay-amber); text-decoration: none; }
.epay-info-value a:hover { text-decoration: underline; }

.epay-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--epay-line) 20%, var(--epay-line) 80%, transparent);
    margin: 32px 0;
}

/* ============================================================
   7. TABLE COMPONENT
   ============================================================ */
.epay-table-container { overflow-x: auto; border: 1px solid var(--epay-line); border-radius: 12px; }
.epay-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 600px; }
.epay-table thead { background: var(--epay-surface-2); }
.epay-table th { padding: 14px 16px; text-align: left; font-weight: 700; color: var(--epay-ink); border-bottom: 2px solid var(--epay-line); white-space: nowrap; }
.epay-table th.text-center, .epay-table td.text-center { text-align: center; }
.epay-table th.text-right, .epay-table td.text-right { text-align: right; }
.epay-table td { padding: 16px; border-top: 1px solid var(--epay-line); color: var(--epay-ink-2); }
.epay-table tr:hover { background: var(--epay-surface-2); }
.epay-table tfoot { background: var(--epay-surface-2); font-weight: 700; }
.epay-table tfoot td { border-top: 2px solid var(--epay-line); font-size: 16px; color: var(--epay-ink); }

/* ============================================================
   8. BUTTONS
   ============================================================ */
.epay-submit-wrap { display: flex; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.epay-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    border: none;
    text-decoration: none;
    transition: transform .1s, background .15s, box-shadow .15s;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}
.epay-btn:active { transform: translateY(1px); }
.epay-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.epay-btn-primary {
    background: linear-gradient(135deg, var(--epay-navy) 0%, var(--epay-navy-2) 100%);
    box-shadow: 0 4px 12px -2px rgba(0, 35, 71, 0.35);
    color: #fff;
}
.epay-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--epay-navy-2) 0%, var(--epay-navy) 100%);
    color: #fff;
    box-shadow: 0 6px 16px -2px rgba(0, 35, 71, 0.45);
    text-decoration: none;
}
.epay-btn-primary .epay-btn-arrow { transition: transform .15s; }
.epay-btn-primary:hover .epay-btn-arrow { transform: translateX(2px); }

.epay-btn-secondary { background: var(--epay-surface); border: 1px solid var(--epay-line); color: var(--epay-ink-2); }
.epay-btn-secondary:hover { background: var(--epay-surface-2); border-color: var(--epay-ink-3); color: var(--epay-ink); text-decoration: none; }

.epay-btn-disabled { background: var(--epay-grey-soft); color: var(--epay-grey); cursor: not-allowed; }

/* ============================================================
   9. CUSTOM CHECKBOX / RADIO
   ============================================================ */
input.epay-checkbox[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-content: center !important;
    transition: all 0.15s ease !important;
}

input.epay-checkbox[type="checkbox"]:checked {
    background-color: var(--epay-navy) !important;
    border-color: var(--epay-navy) !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 12px 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

input.epay-checkbox[type="checkbox"]:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(0, 35, 71, 0.15) !important; }

.epay-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--epay-surface-2);
    border-radius: 12px;
    border: 1px solid var(--epay-line);
}
.epay-checkbox-label { font-size: 14px; font-weight: 600; color: var(--epay-ink); cursor: pointer; line-height: 1.5; user-select: none; }

.epay-radio-wrapper { display: inline-flex; align-items: center; cursor: pointer; }
.epay-radio-input { width: 20px; height: 20px; margin: 0; cursor: pointer; }

/* ============================================================
   10. PAYMENT METHOD CARDS
   ============================================================ */
.epay-payment-methods { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
@media (min-width: 640px) { .epay-payment-methods { grid-template-columns: repeat(2, 1fr); } }

.epay-payment-option { position: relative; }
.epay-payment-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.epay-custom-radio {
    width: 20px; height: 20px; border: 2px solid #cbd5e1; border-radius: 50%;
    position: relative; flex-shrink: 0; transition: all 0.15s ease; background-color: #ffffff;
}
.epay-custom-radio::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0); width: 10px; height: 10px;
    border-radius: 50%; background-color: var(--epay-navy); transition: transform 0.15s ease;
}

.epay-payment-label {
    display: flex; align-items: center; gap: 16px; padding: 20px;
    border: 2px solid var(--epay-line); border-radius: 12px;
    background: var(--epay-surface); cursor: pointer; transition: all 0.2s ease;
}
.epay-payment-label:hover { border-color: var(--epay-ink-3); background: var(--epay-surface-2); }

.epay-payment-option input[type="radio"]:checked + .epay-payment-label {
    border-color: var(--epay-navy); background: rgba(0, 35, 71, 0.03);
    box-shadow: 0 0 0 3px rgba(0, 35, 71, 0.1);
}
.epay-payment-option input[type="radio"]:checked + .epay-payment-label .epay-custom-radio { border-color: var(--epay-navy); }
.epay-payment-option input[type="radio"]:checked + .epay-payment-label .epay-custom-radio::after { transform: translate(-50%, -50%) scale(1); }

.epay-payment-logo { width: 100px; height: auto; flex-shrink: 0; }
.epay-payment-info { display: flex; flex-direction: column; }
.epay-payment-title { font-size: 16px; font-weight: 700; color: var(--epay-ink); margin-bottom: 4px; }
.epay-payment-desc { font-size: 13px; color: var(--epay-ink-3); line-height: 1.4; }

/* ============================================================
   11. STATUS PILLS
   ============================================================ */
.epay-status-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.epay-status-pending { background: #fff7ed; color: #c2410c; }
.epay-status-paid { background: #ecfdf5; color: #047857; }
.epay-status-failed { background: #fef2f2; color: #b91c1c; }

/* ============================================================
   12. TERMS & CONDITIONS
   ============================================================ */
.epay-tc-box {
    max-height: 300px; overflow-y: auto; padding: 20px;
    background: var(--epay-surface-2); border: 1px solid var(--epay-line);
    border-radius: 12px; margin-bottom: 20px; font-size: 14px;
    color: var(--epay-ink-2); line-height: 1.6;
}
.epay-tc-box ol { padding-left: 20px; margin: 0; }
.epay-tc-box li { margin-bottom: 12px; }
.epay-tc-box ul { margin-top: 8px; padding-left: 20px; }
.epay-tc-box ul li { margin-bottom: 6px; }

.epay-tc-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin-top: 8px; }
.epay-tc-check span { font-size: 14px; font-weight: 600; color: var(--epay-ink); line-height: 1.5; }

/* ============================================================
   13. BANNERS / ALERTS
   ============================================================ */
.epay-test-banner { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 24px; }

.epay-alert { max-width: 640px; margin-bottom: 20px; padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; display: flex; align-items: flex-start; gap: 10px; }
.epay-alert-success { background: var(--epay-green-soft); color: #0d8a4d; border: 1px solid var(--epay-green); }
.epay-alert-danger { background: var(--epay-coral-soft); color: var(--epay-coral); border: 1px solid var(--epay-coral); }

.epay-success-note {
    border-left: 4px solid #10b981;
    background: rgba(16, 185, 129, 0.05);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
}
.epay-success-note svg { flex-shrink: 0; margin-top: 2px; }
.epay-success-note strong { display: block; font-size: 15px; color: var(--epay-navy); margin-bottom: 4px; }
.epay-success-note p { font-size: 14px; color: #475569; margin: 0; line-height: 1.5; }

.epay-success-icon {
    width: 80px;
    height: 80px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
    animation: epay-scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.epay-success-icon svg { width: 40px; height: 40px; }
@keyframes epay-scaleIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ============================================================
   14. FORM FIELDS (event-registration)
   ============================================================ */
.epay-form-group { margin-bottom: 20px; }
.epay-form-label { display: block; font-size: 14px; font-weight: 600; color: var(--epay-ink); }
.epay-form-label.required::after { content: " *"; color: #e53e3e; }

.epay-form-input, .epay-form-select, .epay-form-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--epay-line);
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    background: var(--epay-surface);
    color: var(--epay-ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.epay-form-input:focus, .epay-form-select:focus, .epay-form-textarea:focus {
    outline: none; border-color: var(--epay-navy); box-shadow: 0 0 0 3px rgba(0, 35, 71, 0.1);
}
.epay-form-input.is-invalid, .epay-form-select.is-invalid { border-color: #e53e3e; }
.epay-form-input.is-valid, .epay-form-select.is-valid { border-color: #48bb78; }

.epay-form-select {
    height: 42px;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--epay-line);
    border-radius: 6px;
    background-color: var(--epay-surface);
    font-size: 15px;
    color: var(--epay-ink);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
.epay-form-select:focus { border-color: var(--epay-navy); box-shadow: 0 0 0 3px rgba(0, 35, 71, 0.1); outline: none; }
.epay-form-select:invalid, .epay-form-select option[value=""] { color: var(--epay-ink-3); }

.epay-form-hint { font-size: 12px; color: var(--epay-ink-3); }
.epay-form-hint a { color: var(--epay-amber); text-decoration: none; }
.epay-form-hint a:hover { text-decoration: underline; }

/* ============================================================
   15. SELECT2 OVERRIDE (native look)
   ============================================================ */
.select2-container .select2-selection--single {
    height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--epay-line);
    border-radius: 6px;
    background-color: var(--epay-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
    font-size: 15px;
}
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 26px; color: var(--epay-ink); padding-left: 0; }
.select2-container .select2-selection--single .select2-selection__placeholder { color: var(--epay-ink-3); }
.select2-container .select2-selection--single .select2-selection__arrow { height: 46px; right: 12px; }
.select2-container--focus .select2-selection--single,
.select2-container--open .select2-selection--single { border-color: var(--epay-navy); box-shadow: 0 0 0 3px rgba(0, 35, 71, 0.1); outline: none; }
.select2-dropdown { border: 1px solid var(--epay-line); box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin-top: 4px; }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--epay-line); border-radius: 4px; font-family: inherit; }

/* ============================================================
   16. TABS COMPONENT
   ============================================================ */
.epay-tabs {
    display: flex; gap: 8px; margin-bottom: 20px;
    border-bottom: 2px solid var(--epay-line);
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 2px;
}
.epay-tabs::-webkit-scrollbar { display: none; }

.epay-tab {
    padding: 12px 20px; font-size: 14px; font-weight: 600;
    color: var(--epay-ink-2); background: transparent; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.epay-tab:hover { color: var(--epay-ink); }
.epay-tab.active { color: var(--epay-navy); border-bottom-color: var(--epay-navy); }

.epay-tab-content { display: none; }
.epay-tab-content.active { display: block; }

/* ============================================================
   17. EVENT LISTING PAGE
   ============================================================ */
.epay-hero { display: grid; gap: 24px; margin-bottom: 24px; }
.epay-hero-card {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255,90,60,0.32) 0%, transparent 55%),
        radial-gradient(100% 80% at 0% 100%, rgba(90,74,244,0.45) 0%, transparent 60%),
        linear-gradient(135deg, var(--epay-navy) 0%, var(--epay-navy-2) 45%, #2c5282 100%);
    color: #fff; border-radius: var(--epay-radius-lg); padding: 28px 30px; position: relative; overflow: hidden;
}
.epay-hero-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at center, rgba(255,255,255,0.18), transparent 70%); }
.epay-hero-card::before { content: ""; position: absolute; left: 30%; bottom: -120px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,80,0.25), transparent 65%); }

.epay-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #f97373; margin-bottom: 14px; position: relative; z-index: 1; }
.epay-eyebrow-dot { width: 6px; height: 6px; background: #f97373; box-shadow: 0 0 12px rgba(249, 115, 115, 0.5); border-radius: 50%; }
.epay-hero-card h1 { margin: 0 0 8px; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; position: relative; z-index: 1; color: #fff; }
.epay-hero-card p { margin: 0; color: rgba(255,255,255,0.78); font-size: 16px; max-width: 44ch; position: relative; z-index: 1; }
.epay-hero-stats { display: flex; gap: 24px; margin-top: 22px; position: relative; z-index: 1; }
.epay-stat-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.epay-stat-label { font-size: 12px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }

.epay-hero-mobile { display: none; }

.epay-toolbar { background: var(--epay-surface); border: 1px solid var(--epay-line); border-radius: var(--epay-radius); padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.epay-toolbar .epay-toolbar-form { display: flex; width: 100%; gap: 12px; flex-wrap: wrap; }

.epay-search-box { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--epay-surface-2); border: 1px solid var(--epay-line); border-radius: 12px; }
.epay-search-box input { border: none; background: transparent; outline: none; flex: 1; font-size: 15px; color: var(--epay-ink); font-family: inherit; }
.epay-search-box input::placeholder { color: var(--epay-ink-3); }
.epay-search-box svg { color: var(--epay-ink-3); flex: none; }

.epay-select-wrap { position: relative; min-width: 180px; }
.epay-select-wrap select {
    display: block; width: 100%; padding: 10px 38px 10px 14px; font-family: inherit;
    font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--epay-ink);
    background-color: var(--epay-surface-2); background-image: none; border: 1px solid var(--epay-line);
    border-radius: 12px; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.epay-select-wrap select:focus { border-color: var(--epay-navy); outline: 0; box-shadow: 0 0 0 3px rgba(0, 35, 71, 0.15); }
.epay-select-wrap select option { padding: 12px; background: #fff; color: var(--epay-ink); font-weight: 500; }
.epay-select-wrap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--epay-ink-2); border-bottom: 2px solid var(--epay-ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

.epay-toolbar-mobile { display: none; }

.epay-sort-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; background: var(--epay-surface-2); border: 1px solid var(--epay-line); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--epay-ink); cursor: pointer; transition: all 0.15s; font-family: inherit; }
.epay-sort-toggle:hover { background: var(--epay-surface); border-color: var(--epay-ink-3); }
.epay-sort-toggle-mobile { width: 100%; justify-content: center; }

.epay-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.epay-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--epay-line); background: var(--epay-surface); font-size: 13px; font-weight: 600; color: var(--epay-ink-2); cursor: pointer; transition: all .15s; text-decoration: none; white-space: nowrap; flex: none; }
.epay-chip:hover { border-color: var(--epay-ink-3); text-decoration: none; color: var(--epay-ink-2); }
.epay-chip.epay-chip-active { background: linear-gradient(135deg, var(--epay-navy) 0%, var(--epay-navy-2) 100%); color: #fff; border-color: transparent; box-shadow: 0 4px 10px -2px rgba(10,157,128,0.4); }
.epay-chip .epay-chip-n { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--epay-line-2); color: var(--epay-ink-2); }
.epay-chip.epay-chip-active .epay-chip-n { background: rgba(255,255,255,0.15); color: #fff; }

.epay-events { display: grid; grid-template-columns: 1fr; gap: 16px; }

.epay-event-card { background: var(--epay-surface); border: 1px solid var(--epay-line); border-radius: var(--epay-radius); overflow: hidden; display: grid; grid-template-columns: 140px 1fr auto; transition: transform .15s, box-shadow .2s, border-color .15s; }
.epay-event-card:hover { border-color: #d5cfbe; box-shadow: var(--epay-shadow); transform: translateY(-1px); }
.epay-event-card-mobile { display: none; }

.epay-date-block { background: var(--epay-surface-2); border-right: 1px solid var(--epay-line-2); padding: 24px 16px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.epay-date-month { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--epay-coral); }
.epay-date-day { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--epay-ink); }
.epay-date-year { font-size: 13px; color: var(--epay-ink-3); font-weight: 600; }
.epay-date-duration { margin-top: 8px; font-size: 11px; color: var(--epay-ink-3); padding-top: 8px; border-top: 1px dashed var(--epay-line); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }

.epay-event-body { padding: 22px 24px; min-width: 0; }
.epay-event-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }

.epay-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.02em; border: none; }
.epay-pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.epay-pill-cat { background: #eef2ff; color: var(--epay-navy); }
.epay-pill-cat .epay-pill-dot { background: var(--epay-navy); }
.epay-pill-cat.epay-pill-alt { background: #fff7ed; color: #e67e22; }
.epay-pill-cat.epay-pill-alt .epay-pill-dot { background: #e67e22; }
.epay-pill-cat.epay-pill-alt2 { background: #f0fdf4; color: #2e7d64; }
.epay-pill-cat.epay-pill-alt2 .epay-pill-dot { background: #2e7d64; }

.epay-pill-status { padding: 4px 10px; font-weight: 700; }
.epay-pill-status.epay-status-ongoing { background: #e6f4ef; color: #2e7d64; }
.epay-pill-status.epay-status-ongoing .epay-pill-dot { background: #2e7d64; }
.epay-pill-status.epay-status-upcoming { background: #fff7ed; color: #e67e22; }
.epay-pill-status.epay-status-upcoming .epay-pill-dot { background: #e67e22; }
.epay-pill-status.epay-status-ended { background: #f1f5f9; color: #64748b; }
.epay-pill-status.epay-status-ended .epay-pill-dot { background: #64748b; }

.epay-event-body h2 { margin: 0 0 14px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--epay-ink); }

.epay-meta { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 1301px) { .epay-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; } }
.epay-meta-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--epay-ink-2); min-width: 0; }
.epay-meta-row svg { flex: none; color: var(--epay-ink-3); }
.epay-meta-k { color: var(--epay-ink-3); flex: none; }
.epay-meta-v { color: var(--epay-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epay-meta-v a { color: #e67e22; text-decoration: none; }
.epay-meta-v a:hover { text-decoration: underline; }
.epay-meta-code { font-family: "JetBrains Mono", monospace; font-size: 13px; background: var(--epay-surface-2); border: 1px solid var(--epay-line); padding: 2px 8px; border-radius: 6px; color: var(--epay-ink); }

.epay-event-action { border-left: 1px solid var(--epay-line-2); background: linear-gradient(180deg, var(--epay-surface) 0%, var(--epay-surface-2) 100%); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 12px; min-width: 260px; }
.epay-countdown { text-align: right; line-height: 1.2; }
.epay-countdown-label { font-size: 11px; color: var(--epay-ink-3); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.epay-countdown-value { font-size: 22px; font-weight: 800; color: var(--epay-ink); letter-spacing: -0.01em; }
.epay-countdown.epay-status-ongoing .epay-countdown-value { color: var(--epay-green); }
.epay-countdown.epay-status-ended .epay-countdown-value { color: var(--epay-grey); }

.epay-pager { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.epay-pager-info { color: var(--epay-ink-3); font-size: 14px; }
.epay-pager-info b { color: var(--epay-ink); font-weight: 700; }
.epay-page-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.epay-page-btn { min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--epay-line); background: var(--epay-surface); color: var(--epay-ink-2); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.epay-page-btn:hover { background: var(--epay-surface-2); text-decoration: none; color: var(--epay-ink-2); }
.epay-page-btn.epay-page-active { background: linear-gradient(135deg, var(--epay-navy) 0%, var(--epay-navy-2) 100%); border-color: transparent; color: #fff; box-shadow: 0 4px 10px -2px rgba(10,157,128,0.4); }
.epay-page-btn:disabled { opacity: .35; cursor: not-allowed; }

.epay-empty { text-align: center; padding: 60px 20px; color: var(--epay-ink-3); }
.epay-empty svg { margin-bottom: 16px; }
.epay-empty h3 { color: var(--epay-ink-2); margin-bottom: 8px; }

/* ============================================================
   18. EVENT DETAILS PAGE (qty stepper)
   ============================================================ */
.epay-qty-card { background: var(--epay-surface); border: 1px solid var(--epay-line); border-radius: var(--epay-radius-lg); padding: 24px; margin-bottom: 32px; }
.epay-qty-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.epay-qty-label { font-size: 16px; font-weight: 700; color: var(--epay-ink); }
.epay-qty-control { display: inline-flex; align-items: center; border: 1px solid var(--epay-line); border-radius: 12px; background: var(--epay-surface-2); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.epay-qty-control:focus-within { border-color: var(--epay-navy); box-shadow: 0 0 0 3px rgba(0, 35, 71, 0.1); }
.epay-qty-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--epay-ink); font-size: 18px; font-weight: 700; cursor: pointer; transition: background 0.15s; user-select: none; }
.epay-qty-btn:hover { background: var(--epay-line); }
.epay-qty-btn:active { background: #cbd5e1; }
.epay-qty-input { width: 60px; height: 44px; border: none; border-left: 1px solid var(--epay-line); border-right: 1px solid var(--epay-line); background: var(--epay-surface); text-align: center; font-size: 16px; font-weight: 700; color: var(--epay-ink); font-family: inherit; -moz-appearance: textfield; }
.epay-qty-input::-webkit-outer-spin-button, .epay-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
   19. PAYMENT ENQUIRIES PAGE
   ============================================================ */
.epay-enquiry-card { background: var(--epay-surface); border: 1px solid var(--epay-line); border-radius: var(--epay-radius-lg); padding: 40px; }
.epay-enquiry-card h2 { margin: 0 0 6px; font-size: 26px; font-weight: 700; color: var(--epay-ink); letter-spacing: -0.02em; line-height: 1.2; }
.epay-enquiry-card > p { margin: 0; color: var(--epay-ink-3); font-size: 14px; line-height: 1.6; }
.epay-enquiry-divider { height: 1px; background: var(--epay-line); margin: 28px 0; }
.epay-enquiry-form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
.epay-enquiry-label { font-size: 13px; font-weight: 600; color: var(--epay-ink); display: flex; align-items: center; gap: 4px; }
.epay-enquiry-label .epay-required { color: var(--epay-coral); }
.epay-enquiry-input-row { display: flex; gap: 10px; align-items: stretch; }
.epay-enquiry-input { flex: 1; min-width: 0; padding: 11px 14px; font-family: 'Courier New', Courier, monospace; font-size: 14px; letter-spacing: 0.03em; color: var(--epay-ink); background: var(--epay-surface-2); border: 1px solid var(--epay-line); border-radius: 10px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.epay-enquiry-input:focus { border-color: var(--epay-navy); box-shadow: 0 0 0 3px rgba(0, 35, 71, 0.12); background: var(--epay-surface); }
.epay-enquiry-input::placeholder { color: var(--epay-ink-3); font-family: inherit; letter-spacing: 0; }

.epay-btn-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 22px; border-radius: 10px; font-weight: 700; font-size: 14px;
    font-family: inherit; cursor: pointer; border: none;
    background: linear-gradient(135deg, var(--epay-navy) 0%, var(--epay-navy-2) 100%);
    box-shadow: 0 4px 12px -2px rgba(0, 35, 71, 0.35), inset 0 1px 0 rgba(255,255,255,0.1);
    color: #fff; transition: transform .1s, background .15s, box-shadow .15s; white-space: nowrap;
}
.epay-btn-submit:hover { background: linear-gradient(135deg, var(--epay-navy-2) 0%, var(--epay-navy) 100%); box-shadow: 0 6px 16px -2px rgba(0, 35, 71, 0.45), inset 0 1px 0 rgba(255,255,255,0.1); }
.epay-btn-submit:active { transform: scale(0.98); }

/* ============================================================
   20. PRINT STYLES
   ============================================================ */
@media print {
    .d-print-none, .epay-btn, .epay-breadcrumb-wrapper, .epay-sidebar, .epay-topbar,
    .epay-foot, .epay-menu-toggle, .offcanvas, nav, footer, .no-print {
        display: none !important;
    }
    .epay-app { grid-template-columns: 1fr !important; }
    .epay-page { padding: 0 !important; }
    body { background: #ffffff !important; color: #000000 !important; }
    .epay-info-card { border: 1px solid #e2e8f0 !important; box-shadow: none !important; break-inside: avoid; margin-bottom: 16px !important; padding: 16px !important; }
    .epay-table-container { border: 1px solid #e2e8f0 !important; overflow: visible !important; }
    .epay-table { min-width: 100% !important; font-size: 12px; }
    .epay-table th, .epay-table td { padding: 8px 12px !important; border: 1px solid #e2e8f0 !important; }
    .epay-success-note { border: 1px solid #10b981 !important; background: #ffffff !important; }
}

/* ============================================================
   21. RESPONSIVE (shell + component breakpoints, <=1040px)
   ============================================================ */
@media (max-width: 1040px) {
    .epay-app { grid-template-columns: 1fr; }
    .epay-sidebar { display: none; }
    .epay-menu-toggle { display: grid; }
    .epay-page { padding: 20px; }
    .epay-topbar { padding: 16px; flex-direction: row; align-items: center; justify-content: space-between; }

    .title-text { color: var(--epay-navy); margin-left: 14px; text-transform: capitalize; font-size: 2rem; font-weight: bolder; transition: .3s; margin-bottom: 16px; }
    ol { margin-bottom: 0 !important; }

    .epay-breadcrumbs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .epay-breadcrumbs::-webkit-scrollbar { display: none; }

    /* Event listing: hero */
    .epay-hero { display: none; }
    .epay-hero-mobile { display: block; margin-bottom: 16px; }
    .epay-hero-mobile .epay-hero-card { border-radius: 22px; padding: 20px; }
    .epay-hero-mobile .epay-hero-card::after { right: -40px; top: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%); }
    .epay-hero-mobile .epay-hero-card::before { left: 40%; bottom: -80px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255,200,80,0.3), transparent 65%); }
    .epay-hero-mobile .epay-eyebrow { font-size: 10px; margin-bottom: 8px; }
    .epay-hero-mobile .epay-hero-card h1 { font-size: 22px; line-height: 1.2; }
    .epay-hero-mobile .epay-hero-stats { gap: 8px; }
    .epay-hero-mobile .epay-stat { flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 8px 10px; backdrop-filter: blur(8px); }
    .epay-hero-mobile .epay-stat-value { font-size: 18px; }
    .epay-hero-mobile .epay-stat-label { font-size: 9.5px; color: rgba(255,255,255,0.65); letter-spacing: 0.08em; }

    /* Event listing: toolbar */
    .epay-toolbar { display: none; }
    .epay-toolbar-mobile { display: block; margin-bottom: 14px; }
    .epay-toolbar-mobile .epay-toolbar-form { display: flex; flex-direction: column; gap: 10px; }
    .epay-toolbar-mobile .epay-mobile-selects { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .epay-toolbar-mobile .epay-select-wrap,
    .epay-toolbar-mobile .epay-mobile-selects .epay-select-wrap { min-width: 100% !important; width: 100% !important; }
    .epay-toolbar-mobile .epay-select-wrap select,
    .epay-toolbar-mobile .epay-mobile-selects .epay-select-wrap select { min-width: 100% !important; width: 100% !important; }

    /* Event listing: cards */
    .epay-event-card { display: none; }
    .epay-event-card-mobile { display: block; background: var(--epay-surface); border: 1px solid var(--epay-line); border-radius: 18px; padding: 14px; box-shadow: 0 1px 0 rgba(20,25,23,0.03); }
    .epay-event-card-mobile .epay-event-card-top { display: flex; gap: 12px; align-items: stretch; margin-bottom: 12px; }
    .epay-event-card-mobile .epay-date-block { width: 64px; flex: none; border-right: none; border: 1px solid var(--epay-line-2); border-radius: 12px; padding: 8px 4px; }
    .epay-event-card-mobile .epay-date-day { font-size: 26px; margin-top: 2px; }
    .epay-event-card-mobile .epay-date-month { font-size: 10px; color: var(--epay-coral); font-weight: 800; }
    .epay-event-card-mobile .epay-date-year { display: none; }
    .epay-event-card-mobile .epay-date-duration { font-size: 9px; margin-top: 4px; padding-top: 0; border-top: none; }
    .epay-event-card-mobile .epay-event-body { padding: 0; flex: 1; min-width: 0; }
    .epay-event-card-mobile .epay-event-body h2 { font-size: 16px; margin-bottom: 0; }
    .epay-event-card-mobile .epay-meta { padding-top: 10px; margin-top: 8px; border-top: 1px dashed var(--epay-line); }
    .epay-event-card-mobile .epay-meta-row { font-size: 14px; gap: 10px; }
    .epay-event-card-mobile .epay-meta-k { display: inline; }
    .epay-event-card-mobile .epay-meta-code { font-size: 11.5px; padding: 2px 6px; border-radius: 5px; }
    .epay-event-card-mobile .epay-event-action { border-left: none; border-top: 1px solid var(--epay-line-2); background: transparent; padding: 12px 0 0; margin-top: 12px; flex-direction: row; align-items: center; min-width: 0; gap: 10px; }
    .epay-event-card-mobile .epay-countdown { flex: 1; text-align: left; }
    .epay-event-card-mobile .epay-countdown-value { font-size: 16px; }
    .epay-event-card-mobile .epay-countdown-label { font-size: 10px; padding-bottom: 4px; }
    .epay-event-card-mobile .epay-btn { font-size: 16px; padding: 10px 14px; }

    .epay-chips { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; flex-wrap: nowrap; padding: 0 0 14px; margin-bottom: 0; }
    .epay-chips::-webkit-scrollbar { display: none; }

    .epay-pager { flex-direction: column; align-items: center; text-align: center; }
    .epay-pager-info { margin-bottom: 8px; }
    .epay-page-btns { justify-content: center; }

    /* generic detail pages */
    .epay-info-grid { grid-template-columns: 1fr; }
    .epay-submit-wrap { flex-direction: column; }
    .epay-submit-wrap .epay-btn { width: 100%; }

    .epay-enquiry-card { padding: 24px 20px; border-radius: 18px; }
    .epay-enquiry-card h2 { font-size: 22px; }
    .epay-enquiry-input-row { flex-direction: column; }
    .epay-enquiry-input { min-width: 100%; }
    .epay-btn-submit { width: 100%; padding: 13px 20px; }

    .epay-success-note { flex-direction: column; gap: 12px; }
    .epay-info-card { padding: 16px; }
}

@media (min-width: 1040px) {
    .epay-hero-mobile, .epay-toolbar-mobile, .epay-event-card-mobile { display: none !important; }
}

@media (max-width: 1100px) {
    .epay-hero { grid-template-columns: 1fr; }
}