/* Shared visual system for Uitagenda and Uitagenda Tickets.
   Load after each platform stylesheet. Brand accents remain platform-specific. */
:root {
  --ui-page: #fcfaf8;
  --ui-surface: #fff;
  --ui-ink: #29303d;
  --ui-muted: #5d6472;
  --ui-subtle: #8b919c;
  --ui-border: #ece5de;
  --ui-field-border: #e2dad2;
  --ui-soft: #f6f1ec;
  --ui-radius: 18px;
  --ui-radius-control: 8px;
  --ui-shadow: 0 1px 2px #29303d0a;
  --ui-shadow-hover: 0 10px 30px #29303d17;
  --ui-footer: #262c38;
  --ui-footer-text: #b8bcc5;
  --ui-footer-muted: #8a909c;
  --ui-footer-border: #3a4150;
  --ui-brand: #d95626;
  --ui-brand-dark: #b8441a;
  --ui-brand-soft: #fdf3ee;
  --ui-font: 'DM Sans', sans-serif;
  --ui-display: 'TASA Orbiter', 'DM Sans', sans-serif;
}
html[data-theme] {
  --ui-brand: var(--brand);
  --ui-brand-dark: var(--brand-dark);
  --ui-brand-soft: var(--brand-soft);
  --bg: var(--ui-page);
  --ink: var(--ui-ink);
  --ink-2: var(--ui-muted);
  --ink-3: var(--ui-subtle);
  --line: var(--ui-border);
  --field: var(--ui-field-border);
  --neutral-bg: var(--ui-soft);
  --r-card: var(--ui-radius);
  --r-btn: var(--ui-radius-control);
  --r-field: var(--ui-radius-control);
  --shadow-soft: var(--ui-shadow);
  --shadow-card: var(--ui-shadow-hover);
}
.page-shell, html[data-theme]:not([data-design-review="true"]) body { background: var(--ui-page); color: var(--ui-ink); }
html[data-theme] body { font-family: var(--ui-font); line-height: 1.5; }
.container-page, .wrap { max-width: 1180px; padding-inline: 24px; }
.restyle-header, .header { background: var(--ui-surface); border-color: var(--ui-border); }
.restyle-header-inner, .header-inner { min-height: 68px; }
.restyle-brand-mark, .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
.restyle-brand-mark svg, .brand-mark svg { width: 20px; height: 20px; }
.restyle-brand-text small, .brand-text small { color: var(--ui-subtle); font: 500 11px/1.2 var(--ui-font); letter-spacing: .04em; }
.restyle-brand-text strong, .brand-text strong { color: var(--ui-ink); font: 700 18px/1.15 var(--ui-display); }
.restyle-nav, .header .nav { margin-left: 8px; gap: 3px; }
.restyle-nav a, .header .nav a { padding: 9px 13px; border-radius: 100px; color: var(--ui-muted); font: 500 15px/1.5 var(--ui-font); }
.restyle-nav a:hover, .restyle-nav a.active, .header .nav a:hover, .header .nav a.active { background: var(--ui-brand-soft); color: var(--ui-brand-dark); }
.restyle-header-actions, .header-actions { gap: 14px; }
.restyle-login, .header-actions a.link, .header-actions .link-btn { color: var(--ui-muted); font: 600 14px/1.5 var(--ui-font); }
.restyle-button, .btn { min-height: 43px; padding: 9px 18px; gap: 7px; border-radius: var(--ui-radius-control); font-size: 15px; font-weight: 600; line-height: 1.3; }
.btn { border: 0; }
.restyle-button, .btn:not(.btn-outline):not(.btn-ghost):not(.btn-danger):not([disabled]):not([aria-disabled="true"]) { background: var(--ui-brand); color: #fff; }
.restyle-button:hover, .btn:not(.btn-outline):not(.btn-ghost):not(.btn-danger):not([disabled]):not([aria-disabled="true"]):hover { background: var(--ui-brand-dark); }
.restyle-outline-button, .btn-outline { min-height: 43px; padding: 9px 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); background: transparent; color: var(--ui-ink); font-size: 15px; font-weight: 600; line-height: 1.3; }
.restyle-outline-button:hover, .btn-outline:hover { border-color: var(--ui-brand); color: var(--ui-brand-dark); background: transparent; }
.btn-lg { min-height: 48px; padding: 12px 22px; font-size: 16px; }
.header-inner .btn { min-height: 43px; padding: 9px 18px; font-size: 15px; }
.restyle-menu-button, .menu-btn { width: 38px; height: 38px; padding: 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); }
.restyle-menu-button svg, .menu-btn svg { width: 20px; height: 20px; }
.restyle-mobile-menu, .mobile-menu { padding: 10px 24px 18px; border-color: var(--ui-border); }
.restyle-mobile-menu a, .mobile-menu a { padding: 10px 4px; border-color: var(--ui-border); font: 600 16px/1.5 var(--ui-font); }
.restyle-event-card, .ev-card { background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); transition: transform .2s, box-shadow .2s; }
.restyle-event-card:hover, .ev-card:hover { transform: translateY(-2px); border-color: var(--ui-border); box-shadow: var(--ui-shadow-hover); }
.restyle-card-media, .ev-media { aspect-ratio: 16 / 10; background: var(--ui-soft); }
.restyle-card-body, .ev-body { padding: 16px 18px 18px; }
.restyle-card-body h3, .ev-body h3 { font: 700 19px/1.25 var(--ui-display); }
.restyle-card-price strong, .ev-foot strong { font: 600 14px/1.5 var(--ui-font); }
.restyle-section-heading h2, .section-heading h2 { font: 700 28px/1.15 var(--ui-display); }
.restyle-section-heading p, .section-heading p { color: var(--ui-muted); font-size: 14px; }
.restyle-section-heading > a, .section-heading > a { color: var(--ui-brand-dark); font-size: 14px; font-weight: 700; }
.card, .step, .detail-img, .ticket { border-radius: var(--ui-radius); }
.card { border-color: var(--ui-border); }
.restyle-input, .restyle-search .form-input, .restyle-search .form-select, .input, .select, .textarea { min-height: 46px; padding: 10px 14px; border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius-control); background-color: var(--ui-surface); color: var(--ui-ink); font: 400 15px/1.5 var(--ui-font); }
.select, .restyle-search .form-select { padding-right: 40px; }
textarea.restyle-input, .textarea { min-height: 120px; }
.restyle-input::placeholder, .input::placeholder, .textarea::placeholder { color: #a9adb5; opacity: 1; }
.restyle-input:focus, .restyle-search .form-input:focus, .restyle-search .form-select:focus, .input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--ui-brand); box-shadow: 0 0 0 3px var(--ui-brand-soft); }
.restyle-field > label, .restyle-field > legend, .field > label, .label { color: var(--ui-ink); font-size: 14px; font-weight: 700; }
.restyle-field-hint, .hint { color: var(--ui-subtle); font-size: 13px; }
.hero { background: var(--ui-page); }
.restyle-footer, .footer { margin-top: 80px; padding: 56px 0 28px; border: 0; background: var(--ui-footer); color: var(--ui-footer-text); font: 400 14px/1.5 var(--ui-font); }
.restyle-footer-main:not(.restyle-platform-footer-main), .footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.footer-grid { gap: 32px; }
.restyle-footer-intro > a, .footer .footer-intro > a { color: #fff; font: 700 20px var(--ui-display); text-decoration: none; }
.restyle-footer-intro em, .footer-intro em { color: var(--ui-brand); font-style: normal; }
.restyle-footer-intro p, .footer-intro p { max-width: 36ch; margin-top: 10px; }
.restyle-footer-main h2, .footer h3 { margin: 0 0 4px; color: #fff; font: 600 14px/1.5 var(--ui-font); }
.footer-main > div:not(:first-child) { display: grid; align-content: start; gap: 8px; }
.footer ul { gap: 8px; }
.footer a { color: inherit; text-decoration: none; }
.footer .brand-text strong { color: #fff; }
.footer .brand-text small { color: var(--ui-footer-text); }
.restyle-footer a:hover, .restyle-footer button:hover, .footer a:hover { color: #fff; }
.restyle-footer a:focus-visible, .restyle-footer button:focus-visible, .footer a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.restyle-footer-cities, .footer-network { margin-top: 40px; padding: 28px 0; border-top: 1px solid var(--ui-footer-border); border-bottom: 1px solid var(--ui-footer-border); }
.footer-network h3 { color: #fff; font-size: 16px; margin-bottom: 18px; }
.footer-network nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 24px; }
.footer-network nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; }
.restyle-footer-bottom, .footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; color: var(--ui-footer-muted); font-size: 13px; }
.footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1080px) { .restyle-nav a { padding: 8px; } .restyle-header-actions { gap: 10px; } }
@container app (max-width: 1080px) { .header .nav a { padding: 8px; } .header-actions { gap: 10px; } }
@media (max-width: 900px) { .restyle-footer-main:not(.restyle-platform-footer-main), .footer-main { grid-template-columns: 1fr 1fr; } .restyle-footer-intro, .footer-intro { grid-column: 1 / -1; } }
@container app (max-width: 900px) { .footer-main { grid-template-columns: 1fr 1fr; } .footer-intro { grid-column: 1 / -1; } }
@media (max-width: 620px) { .container-page, .wrap, .wrap-narrow { padding-inline: 16px; } .footer-network nav { grid-template-columns: 1fr 1fr; } .footer-bottom { flex-wrap: wrap; gap: 12px; } }
@container app (max-width: 620px) {
  .wrap, .wrap-narrow { padding-inline: 16px; }
  .footer-network nav { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .restyle-event-card, .ev-card { transition: none; } .restyle-event-card:hover, .ev-card:hover { transform: none; } }