/* Eventedia shared visual system. Loaded after each page's existing styles. */
:root {
  --ed-primary: #5b4bff; --ed-primary-dark: #4334d5;
  --ed-primary-light: #a794ff; --ed-primary-bg: #f0edff;
  --ed-dark-bg: #1a1a2e; --ed-white: #fff; --ed-gray-bg: #f6f7fb;
  --ed-text: #222438; --ed-text-secondary: #62677c; --ed-border: #e2e5ef;
  --ed-gradient: #5b4bff; --ed-radius: 14px;
  --ed-shadow: 0 8px 28px rgba(26,26,46,.055);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; color: var(--ed-text); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; }
button, input, select, textarea { font-family: inherit !important; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ed-primary) !important; outline-offset: 3px; }
:where(button, [role=button], .btn, .btn-primary, .btn-outline, .btn-secondary, .ce-btn) { touch-action: manipulation; }
:where(button, .btn, .btn-primary, .btn-outline, .btn-secondary, .ce-btn):disabled { cursor: not-allowed; opacity: .6; }
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]), select, textarea) { max-width: 100%; border-radius: 10px; border-color: var(--ed-border); color: var(--ed-text); }
:where(input, select, textarea):focus { border-color: var(--ed-primary); }
input[type=checkbox], input[type=radio] { accent-color: var(--ed-primary); }
textarea { resize: vertical; }
:where(h1, h2, h3, p, .user-email, .user-meta, .event-title) { overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.25; }
.dashboard-wrapper { background: var(--ed-gray-bg); }
.dashboard-main { min-width: 0; width: 100%; padding: clamp(20px, 3vw, 38px) !important; }
.dashboard-main > :first-child { margin-top: 0; }
.dashboard-header { gap: 20px; flex-wrap: wrap; }
.dashboard-sidebar { background: var(--ed-dark-bg) !important; }
.dashboard-sidebar .nav a { min-height: 44px; }
.dashboard-sidebar .nav a.active { background: rgba(91,75,255,.23) !important; border-left-color: var(--ed-primary) !important; color: white !important; }
:where(.stat-card, .chart-card, .recent-card, .form-card, .content-card, .ce-section, .edit-form) { border: 1px solid var(--ed-border); border-radius: var(--ed-radius); box-shadow: var(--ed-shadow); }
:where(.stat-card, .chart-card, .recent-card, .form-card, .content-card, .edit-form) { background: var(--ed-white); }
.stat-icon-badge { background: var(--ed-primary-bg) !important; color: var(--ed-primary) !important; }
.stats-grid > *, .ce-row > *, .form-grid > *, .form-row > * { min-width: 0; }
:where(.btn-primary, .ce-btn-primary, .submit-btn, .btn-submit) { background: var(--ed-primary) !important; border-color: var(--ed-primary) !important; color: white !important; }
:where(.btn-primary, .ce-btn-primary, .submit-btn, .btn-submit):hover { background: var(--ed-primary-dark) !important; border-color: var(--ed-primary-dark) !important; }
:where(.btn-outline, .btn-secondary) { border-color: var(--ed-primary) !important; color: var(--ed-primary) !important; }
:where(.btn-outline, .btn-secondary):hover { background: var(--ed-primary) !important; color: white !important; }
:where(.btn, .btn-primary, .btn-outline, .btn-secondary, .submit-btn, .btn-submit, .ce-btn) { min-height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; white-space: normal; }
:where(.ce-hint, .form-hint, .help-text, .stat-label) { color: var(--ed-text-secondary); }
:where(.table-wrap, .table-wrapper, .table-responsive, .ed-table-scroll) { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.ed-table-scroll { border: 1px solid var(--ed-border); margin-block: 12px; }
:where(.data-table, .transactions-table) { width: 100%; border-collapse: collapse; }
:where(.data-table, .transactions-table) th { background: var(--ed-gray-bg); color: var(--ed-text-secondary); font-size: .78rem; letter-spacing: .025em; }
:where(.data-table, .transactions-table) :is(th, td) { padding: 13px 16px; border-bottom: 1px solid var(--ed-border); vertical-align: middle; }
:where(.data-table, .transactions-table) tbody tr:hover { background: #fafaff; }
.header-container { gap: 12px; }
.header .logo { min-width: 0; flex-shrink: 1; }
.header .logo img { object-fit: contain; max-width: min(190px, 42vw); }
.ed-skip-link { position: fixed; top: -100px; left: 16px; z-index: 99999; background: var(--ed-dark-bg); color: white; padding: 12px 18px; border-radius: 10px; }
.ed-skip-link:focus { top: 12px; }
@media (max-width: 1024px) {
 .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
 .ce-row.col-3, .ce-row.col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
 .dashboard-sidebar { width: 230px; }
}
@media (max-width: 768px) {
 body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
 .dashboard-main { padding: 20px 16px !important; }
 .dashboard-header h1, .page-header h1 { font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important; }
 .dashboard-header .user-info { max-width: 100%; }
 .dashboard-sidebar { max-width: min(300px, 86vw); }
 :where(.form-row, .form-grid, .ce-row.col-2, .ce-row.col-3, .ce-row.col-4, .ce-ticket-grid, .charts-grid) { grid-template-columns: minmax(0, 1fr) !important; }
 :where(.event-detail-layout, .event-layout, .two-column, .content-grid) { grid-template-columns: minmax(0, 1fr) !important; }
 :where(.filters, .filter-bar, .filter-row, .page-header, .toolbar, .form-actions) { flex-wrap: wrap; gap: 12px; }
 :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) { font-size: 16px !important; }
 :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select) { min-height: 44px; }
 :where(.edit-form, .form-card, .ce-section-body) { padding: 20px 16px !important; }
 .notif-dropdown { max-width: calc(100vw - 24px); }
 .bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
 :where(.modal-content, .modal-card) { max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow-y: auto; }
}
@media (max-width: 420px) {
 .stats-grid { grid-template-columns: minmax(0, 1fr) !important; }
 .events-grid-page, .events-grid { grid-template-columns: minmax(0, 1fr) !important; }
 .stat-card { padding: 18px; }
 .dashboard-header { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* Refined public pages and checkout, using the same system as dashboards. */
:where(.detail-info-top, .detail-other, .buy-card, .donate-card, .organizer-card, .event-card, .auth-box) { min-width: 0; }
:where(.detail-info-top, .detail-other, .buy-card, .donate-card, .organizer-card) { border: 1px solid var(--ed-border); box-shadow: var(--ed-shadow); }
:where(.btn-buy, .chat-input-row button, .comment-form button, .hero-search-btn):not(#nearMeBtn) { background: var(--ed-primary) !important; color: white !important; min-height: 44px; }
:where(.btn-buy, .chat-input-row button, .comment-form button, .hero-search-btn):not(#nearMeBtn):hover { background: var(--ed-primary-dark) !important; }
.method-card.selected { border-color: var(--ed-primary) !important; background: var(--ed-primary-bg) !important; }
/* Keep payment radio controls accessible to keyboards and screen readers. */
.method-card input[type=radio] { display: block !important; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.method-card:focus-within { outline: 3px solid var(--ed-primary); outline-offset: 3px; }
.method-card { position: relative; min-width: 0; }
:where(.pagination a, .pagination span, .react-btn) { min-height: 44px; min-width: 44px; }
:where(.empty-state, .no-data) { padding: 36px 20px; color: var(--ed-text-secondary); text-align: center; }
:where(.summary-row, .qty-row) { gap: 12px; }
.summary-row > :last-child { flex-shrink: 0; }
:where(.search-input, .search-box, .hero-search-box, .chat-input-row) { min-width: 0; }
@media (max-width: 768px) {
 .event-detail-wrap { display: flex !important; flex-direction: column; padding: 20px 16px 36px !important; gap: 16px; }
 .detail-info-top { order: 0; } .buy-card { order: 1; } .donate-card { order: 2; } .organizer-card { order: 3; } .detail-other { order: 4; }
 :where(.detail-info-top, .detail-other, .buy-card, .donate-card, .organizer-card) { padding: 20px 16px !important; }
 .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
 .hero-search-form { flex-wrap: wrap; gap: 12px; }
 .hero-search-box { flex: 1 1 100%; width: 100%; }
 .hero-search-btn { flex: 1 1 auto; }
 .event-banner-inner h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
 .contact-vendor-btn { min-height: 44px; }
 .auth-section { padding-inline: 16px !important; }
 .ce-section-header { padding-inline: 16px; }
}
/* Keep the mobile landing page concise, with an explicit expansion control. */
#popularEventsStatus { text-align: center; color: var(--ed-text-secondary); font-size: .875rem; margin: 20px 0 12px; }
.popular-events-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.popular-events-actions a { text-decoration: none; padding: 10px 18px; }
#popularEventsToggle { padding: 10px 18px; cursor: pointer; }
#popularEventsToggle[hidden] { display: none !important; }
@media (max-width: 768px) {
 #eventsGrid:not([data-expanded="true"]) > .event-card-modern:nth-child(n+4) { display: none !important; }
 #eventsGrid { grid-template-columns: minmax(0, 1fr); }
 .popular-events-actions { flex-direction: column; align-items: stretch; }
}

.ed-action-feedback:empty { display: none; }
.ed-action-feedback { position: fixed; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--ed-dark-bg); color: white; box-shadow: var(--ed-shadow); z-index: 1100; }
@media (min-width: 769px) { .ed-action-feedback { bottom: 24px; } }
/* Shared form spacing, input feedback and comfortable phone controls. */
.ed-form :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),select,textarea){box-sizing:border-box;max-width:100%;border-radius:10px;border:1px solid #d8dce8;background:#fff;color:var(--ed-text);min-height:44px;font-size:16px;transition:border-color .15s,box-shadow .15s}
.ed-form :where(input,select,textarea):focus-visible{outline:2px solid var(--ed-primary);outline-offset:2px;box-shadow:0 0 0 4px rgba(91,75,255,.1)}
.ed-form [aria-invalid=true]{border-color:#b42318!important;background:#fffafa!important}
.ed-field-feedback{display:block;margin:6px 0;color:#b42318;font-size:.85rem;line-height:1.4}
.ed-field-feedback[hidden]{display:none}
.ed-password-toggle{display:block;margin:8px 0;padding:8px 12px;border:1px solid #d8dce8;background:#f6f5ff;color:#493bd0;border-radius:8px;cursor:pointer;min-height:44px}
.ed-file-feedback{display:block;margin:8px 0;color:#62677c;overflow-wrap:anywhere}
.ed-form label{line-height:1.5}.ed-form textarea{resize:vertical}.ed-form[aria-busy=true]{cursor:progress}
@media(max-width:600px){.ed-form :where(.form-row,.form-grid){grid-template-columns:minmax(0,1fr)!important;gap:16px}.ed-form :where(input,select,textarea){font-size:16px}.ed-form :where(.form-group,.field){min-width:0}}
/* Password controls must align with the input, independent of nested icon rules. */
.input-group .pw-toggle-btn,.ed-password-wrap .ed-password-toggle{position:absolute!important;inset:50% 6px auto auto!important;transform:translateY(-50%);width:44px;height:44px;min-height:44px;padding:0!important;margin:0!important;display:flex!important;align-items:center;justify-content:center;border:0!important;border-radius:8px;background:transparent!important;color:#5b4bff;z-index:2;cursor:pointer}
.input-group .pw-toggle-btn i{position:static!important;inset:auto!important;transform:none!important;font-size:18px!important;line-height:1}
.ed-password-wrap{position:relative;width:100%}.ed-password-wrap input,.input-group:has(.pw-toggle-btn) input{padding-right:56px!important}
.ed-password-toggle svg{fill:none;stroke:currentColor;stroke-width:1.8}.ed-password-toggle[aria-pressed=true]{background:#eeebff!important}
.otp-inputs{display:flex!important;justify-content:center;gap:clamp(5px,2vw,10px)!important;width:100%;max-width:390px;margin:20px auto!important}
.otp-inputs input{flex:1 1 0!important;min-width:0!important;max-width:50px!important;width:0!important;height:56px!important;padding:0!important;text-align:center;font-size:24px!important;font-weight:700;font-variant-numeric:tabular-nums;border:1.5px solid #d8dce8!important;border-radius:12px!important;background:#f9f9ff;color:#1a1a2e;box-sizing:border-box}
.otp-inputs input:focus{outline:2px solid #5b4bff!important;outline-offset:2px;box-shadow:0 0 0 4px #eeebff!important}
#otpHelp{font-size:.875rem;color:#62677c;text-align:center;line-height:1.5}
@media(max-width:360px){.otp-inputs input{height:48px!important;font-size:21px!important}}
/* Country code and phone digits share a stable row without overlapping. */
.phone-group{display:flex!important;align-items:center;border:1px solid #d8dce8;border-radius:10px;background:#fff;position:relative;overflow:visible}
.phone-group:focus-within{border-color:#5b4bff;box-shadow:0 0 0 3px #eeebff}
.phone-group .phone-prefix{position:static!important;transform:none!important;display:flex!important;align-items:center;gap:7px!important;white-space:nowrap;flex:0 0 auto;padding:0 12px!important;margin:0!important;border-right:1px solid #d8dce8;font-size:15px!important;line-height:24px}
.phone-group input{flex:1 1 0;min-width:0!important;width:100%!important;padding:14px 36px 14px 12px!important;border:0!important;background:transparent!important;box-shadow:none!important;letter-spacing:.03em}
.phone-group .phone-status{left:auto!important;right:12px!important;pointer-events:none}
@media(max-width:360px){.phone-group .phone-prefix{padding-inline:8px!important;gap:5px!important}.phone-group .phone-prefix .flag-icon{width:18px!important}.phone-group input{padding-left:8px!important}}

.ed-booking-help{margin-top:16px;padding-top:14px;border-top:1px solid #e2e5ef;font-size:.82rem;line-height:1.6;color:#62677c}.ed-booking-help p+p{margin-top:8px}.ed-booking-help a{color:#493bd0;text-decoration:underline;text-underline-offset:3px}

.ed-balance-dialog{border:1px solid #e2e5ef;border-radius:20px;padding:28px;max-width:440px;width:calc(100% - 32px);box-sizing:border-box;color:#1a1a2e;margin:auto;box-shadow:0 24px 80px #1a1a2e33}.ed-balance-dialog::backdrop{background:#1a1a2e88}.ed-balance-dialog h2{font-size:1.4rem;margin-bottom:16px}.ed-balance-dialog p{line-height:1.6;margin-bottom:16px}.ed-balance-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}