/* ==========================================================================
   Eventpage Theme-Engine — ticket-bridge.css
   Bildet die Theme-Tokens (--ep-*) auf die Bootstrap-3-Primitive und die
   cart.php-Hooks der geteilten Ticketseiten ab. Wird nur auf Ticket-/Konto-/
   Inhaltsseiten geladen (IS_TICKET_PAGE / NEEDS_BASE_CSS), NACH /min/g=cssep
   (Bootstrap + switch + icons) und ungelayert, damit es Bootstrap ohne
   !important schlaegt. !important nur dort, wo cart.php Inline-Styles setzt.
   ========================================================================== */

/* ---- Grundflaeche: Bootstrap-Body-Defaults auf Tokens ---- */
body.ep-with-base { background: var(--ep-bg); color: var(--ep-text); font-family: var(--ep-font-body); font-size: 15px; line-height: 1.5; }
/* Die Bridge laeuft immer auf der Bootstrap-3-Basis, die html auf 10px setzt; rem hier meint 16px. */
html { font-size: 16px; }
body.ep-with-base .ep-main { padding-block: calc(var(--ep-gap) * 1.2) var(--ep-section-y); }
body.ep-with-base .ep-main > .container, body.ep-with-base .ep-main .container { width: 100%; max-width: var(--ep-container); padding-inline: var(--ep-gutter); margin-inline: auto; }
body.ep-with-base .margin_60 { margin: 0; padding-block: 0; }
:where(body.ep-with-base) h1, :where(body.ep-with-base) h2, :where(body.ep-with-base) h3, :where(body.ep-with-base) h4, :where(body.ep-with-base) h5, :where(body.ep-with-base) legend {
  font-family: var(--ep-font-display); font-weight: var(--ep-display-weight); color: var(--ep-text);
  text-transform: var(--ep-display-transform); letter-spacing: var(--ep-display-tracking); overflow-wrap: anywhere; hyphens: auto;
}
:where(body.ep-with-base) h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); }
:where(body.ep-with-base) h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
:where(body.ep-with-base) h3 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
:where(body.ep-with-base) a { color: var(--ep-primary); }
:where(body.ep-with-base) a:hover, body.ep-with-base a:focus { color: var(--ep-primary-hover); }
:where(body.ep-with-base) hr { border-top-color: var(--ep-line); }
body.ep-with-base .text-muted, body.ep-with-base small, body.ep-with-base .help-block { color: var(--ep-muted); }
body.ep-with-base .tpink, body.ep-with-base .tgreen, body.ep-with-base .color, body.ep-with-base .event-headline { color: var(--ep-primary); }
body.ep-with-base .bg.pink, body.ep-with-base .bg.green, body.ep-with-base .bg.color, body.ep-with-base .bg.colored { background-color: var(--ep-primary); color: var(--ep-on-primary); }
:where(body.ep-with-base) img { max-width: 100%; height: auto; }
body.ep-with-base .well { background: var(--ep-surface-2); border-color: var(--ep-line); border-radius: var(--ep-radius); box-shadow: none; }
body.ep-with-base .label-default { background: var(--ep-muted); }
body.ep-with-base .label-primary, body.ep-with-base .badge { background: var(--ep-primary); color: var(--ep-on-primary); }

/* ---- Buttons ---- */
body.ep-with-base .btn { border-radius: var(--ep-radius-sm); font-family: var(--ep-font-display); font-weight: 600; min-height: var(--ep-tap); padding: .6em 1.2em; line-height: 1.3; transition: background-color .15s, border-color .15s, color .15s; white-space: normal; }
body.ep-with-base .btn-default { background: var(--ep-surface); border-color: var(--ep-line-strong); color: var(--ep-text); }
body.ep-with-base .btn-default:hover, body.ep-with-base .btn-default:focus { background: var(--ep-surface-2); border-color: var(--ep-text); color: var(--ep-text); }
body.ep-with-base .btn-primary, body.ep-with-base .btn_1, body.ep-with-base .btn.bg.colored, body.ep-with-base .btn.bg.color, body.ep-with-base .btn.bg.pink, body.ep-with-base .btn.bg.green,
body.ep-with-base .btn-promo, body.ep-with-base #gotopay, body.ep-with-base .btn.btn-block:not(.outline):not(.btn-default):not(.btn-danger):not(.btn-link) {
  background: var(--ep-primary); border-color: var(--ep-primary); color: var(--ep-on-primary); text-transform: var(--ep-display-transform); letter-spacing: var(--ep-display-tracking);
}
body.ep-with-base .btn-primary:hover, body.ep-with-base .btn-primary:focus, body.ep-with-base .btn-primary:active, body.ep-with-base .btn_1:hover, body.ep-with-base .btn.bg.colored:hover,
body.ep-with-base .btn-promo:hover, body.ep-with-base #gotopay:hover, body.ep-with-base .btn.btn-block:not(.outline):not(.btn-default):not(.btn-danger):not(.btn-link):hover {
  background: var(--ep-primary-hover); border-color: var(--ep-primary-hover); color: var(--ep-on-primary);
}
body.ep-with-base .btn-danger, body.ep-with-base .btn-promo.btn-danger { background: #c62828; border-color: #c62828; color: #fff; }
body.ep-with-base .btn.outline, body.ep-with-base a.btn.outline { background: transparent; border: var(--ep-border-w) solid var(--ep-line-strong); color: var(--ep-text); }
body.ep-with-base .btn.outline:hover { border-color: var(--ep-primary); color: var(--ep-primary); background: transparent; }
body.ep-with-base .btn-link { color: var(--ep-primary); }
body.ep-with-base .btn-promo { white-space: nowrap; min-width: 100px; width: auto; }
[data-surface="brutal"] body.ep-with-base .btn-primary, [data-surface="brutal"] body.ep-with-base #gotopay { box-shadow: 3px 3px 0 0 var(--ep-text); }
[data-shape="pill"] body.ep-with-base .btn { border-radius: 999px; }

/* ---- Formulare ---- */
body.ep-with-base .form-control, body.ep-with-base input[type="text"], body.ep-with-base input[type="email"], body.ep-with-base input[type="tel"], body.ep-with-base input[type="number"], body.ep-with-base input[type="password"], body.ep-with-base select, body.ep-with-base textarea {
  background: var(--ep-surface); color: var(--ep-text); border: var(--ep-border-w) solid var(--ep-line-strong); border-radius: var(--ep-radius-sm); box-shadow: none; min-height: var(--ep-tap); font-size: 16px; height: auto; padding: .55em .8em;
}
body.ep-with-base .form-control:focus, body.ep-with-base select:focus, body.ep-with-base textarea:focus { border-color: var(--ep-primary); box-shadow: 0 0 0 3px var(--ep-primary-soft); outline: 0; }
body.ep-with-base .form-control::placeholder { color: var(--ep-muted); opacity: .8; }
body.ep-with-base .form-control[readonly] { background: var(--ep-surface-2); }
:where(body.ep-with-base) label { color: var(--ep-text); font-weight: 600; }
body.ep-with-base .has-error .form-control { border-color: #c62828; }
body.ep-with-base .has-error .help-block, body.ep-with-base .text-danger { color: #d32f2f; }
[data-scheme="dark"] body.ep-with-base .text-danger, [data-scheme="dark"] body.ep-with-base .has-error .help-block { color: #ff6b6b; }
body.ep-with-base .text-success { color: #2e7d32; }
[data-scheme="dark"] body.ep-with-base .text-success { color: #7bd88f; }
body.ep-with-base .checkbox label, body.ep-with-base .radio label { font-weight: 400; padding-left: 26px; min-height: 28px; }
body.ep-with-base .checkbox input, body.ep-with-base .radio input { width: 18px; height: 18px; margin-left: -26px; margin-top: 4px; accent-color: var(--ep-primary); }
body.ep-with-base .input-group-addon { background: var(--ep-surface-2); border-color: var(--ep-line-strong); color: var(--ep-muted); border-radius: var(--ep-radius-sm); }
/* iOS-Schalter (jquery.switch) in Primaerfarbe */
/* Die Schiene ist das ::before des aeusseren <span> (jquery.switch: left:100px); der Span
   selbst umfasst auch die Textflaeche links — ihn einzufaerben ergab einen dunklen Block. */
body.ep-with-base .switch-light.switch-ios > input:checked ~ span { background: transparent; }
body.ep-with-base .switch-light.switch-ios > input:checked ~ span:before { border-color: var(--ep-primary); box-shadow: inset 0 0 0 30px var(--ep-primary); }
body.ep-with-base .switch-light.switch-ios > input:checked ~ span span:last-of-type { color: var(--ep-on-primary); }

/* ---- Tabellen ---- */
body.ep-with-base .table-responsive { border: 0; margin-bottom: 0; -webkit-overflow-scrolling: touch; }
body.ep-with-base .table { color: var(--ep-text); background: transparent; margin-bottom: 0; }
body.ep-with-base .table > thead > tr > th { border-bottom: 2px solid var(--ep-line-strong); color: var(--ep-muted); font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; }
body.ep-with-base .table > tbody > tr > td, body.ep-with-base .table > tbody > tr > th, body.ep-with-base .table > tfoot > tr > td { border-top-color: var(--ep-line); vertical-align: middle; padding: 10px 8px; }
body.ep-with-base .table-striped > tbody > tr:nth-of-type(odd) { background: var(--ep-surface-2); }
body.ep-with-base .table-striped > tbody > tr { background: transparent; }
body.ep-with-base .table_summary td { padding: 8px 4px; font-size: .9375rem; }
body.ep-with-base .table_summary .total td, body.ep-with-base .table_summary tr.total td { font-weight: 700; font-size: 1.125rem; border-top: 2px solid var(--ep-line-strong); color: var(--ep-text); }
body.ep-with-base .table_summary .rabatt { color: var(--ep-primary); }
body.ep-with-base .options_cart td { font-size: .9375rem; }

/* ---- Panels, Boxen, Alerts, Tabs, Modals ---- */
body.ep-with-base .panel, body.ep-with-base .panel-default { background: var(--ep-surface); border-color: var(--ep-line); border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); }
body.ep-with-base .panel-default > .panel-heading { background: var(--ep-surface-2); border-color: var(--ep-line); color: var(--ep-text); border-radius: var(--ep-radius) var(--ep-radius) 0 0; }
body.ep-with-base .panel-body { color: var(--ep-text); }
body.ep-with-base .box_style_1 { background: var(--ep-surface); border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); padding: 22px; margin-bottom: 24px; color: var(--ep-text); }
body.ep-with-base .box_style_1 h3.inner { margin: -22px -22px 18px; padding: 12px 18px; background: var(--ep-primary); color: var(--ep-on-primary); border: 0; border-radius: var(--ep-radius) var(--ep-radius) 0 0; font-size: 1.125rem; }
body.ep-with-base .box_style_1 h3.inner i { color: inherit; }
:where(body.ep-with-base) fieldset { border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--ep-radius); padding: 16px; margin-bottom: 20px; background: var(--ep-surface); }
body.ep-with-base fieldset legend { width: auto; padding: 0 8px; margin: 0; border: 0; font-size: 1rem; color: var(--ep-text); }
body.ep-with-base .alert { border-radius: var(--ep-radius-sm); border-width: var(--ep-border-w); }
body.ep-with-base .alert-info { background: var(--ep-primary-soft); border-color: var(--ep-primary); color: var(--ep-text); }
body.ep-with-base .alert-success { background: rgba(46,125,50,.12); border-color: rgba(46,125,50,.5); color: var(--ep-text); }
body.ep-with-base .alert-warning { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.6); color: var(--ep-text); }
body.ep-with-base .alert-danger { background: rgba(198,40,40,.12); border-color: rgba(198,40,40,.6); color: var(--ep-text); }
body.ep-with-base .nav-tabs { border-bottom-color: var(--ep-line); }
body.ep-with-base .nav-tabs > li > a { color: var(--ep-muted); border-radius: var(--ep-radius-sm) var(--ep-radius-sm) 0 0; min-height: var(--ep-tap); }
body.ep-with-base .nav-tabs > li.active > a, body.ep-with-base .nav-tabs > li.active > a:hover, body.ep-with-base .nav-tabs > li.active > a:focus { background: var(--ep-surface); border-color: var(--ep-line) var(--ep-line) var(--ep-surface); color: var(--ep-text); }
body.ep-with-base .modal-content { background: var(--ep-surface); color: var(--ep-text); border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--ep-radius); box-shadow: var(--ep-shadow-lg); }
body.ep-with-base .modal-header, body.ep-with-base .modal-footer { border-color: var(--ep-line); }
body.ep-with-base .modal-header .close { color: var(--ep-text); opacity: .6; text-shadow: none; min-width: var(--ep-tap); min-height: var(--ep-tap); }
body.ep-with-base .modal-backdrop.in { opacity: .6; }
@media (max-width: 767px) {
  /* Modals als Bottom-Sheet */
  body.ep-with-base .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; width: auto; max-height: 92dvh; display: flex; }
  body.ep-with-base .modal-content { width: 100%; border-radius: var(--ep-radius) var(--ep-radius) 0 0; max-height: 92dvh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
  body.ep-with-base .modal.fade .modal-dialog { transform: translateY(20%); }
  body.ep-with-base .modal.in .modal-dialog { transform: none; }
}

/* ---- Ticketauswahl (cart.php) ---- */
body.ep-with-base .ticket-card { background: var(--ep-surface); border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); padding: 16px; margin-bottom: 14px; }
body.ep-with-base .ticket-card:hover { box-shadow: var(--ep-shadow-lg); }
body.ep-with-base .ticket-card-title { font-family: var(--ep-font-display); font-weight: 600; font-size: 1.0625rem; color: var(--ep-text); }
body.ep-with-base .ticket-card-title.pushit { color: var(--ep-accent); }
body.ep-with-base .ticket-card-info { color: var(--ep-muted); }
body.ep-with-base .ticket-card .glyphicon-info-sign { color: var(--ep-primary) !important; }  /* Inline-Farbe in cart.php */
body.ep-with-base .ticket-variant { border-bottom-color: var(--ep-line); }
body.ep-with-base .ticket-variant .variant-price, body.ep-with-base .ticket-variant .variant-sum, body.ep-with-base .price, body.ep-with-base .ticketprice { color: var(--ep-text); font-variant-numeric: tabular-nums; }
body.ep-with-base .ticket-variant.is-combo .variant-label { color: var(--ep-muted); }
body.ep-with-base .ticket-variant .variant-qty::before { color: var(--ep-text) !important; }
body.ep-with-base .ticket-desc, body.ep-with-base .ticket-card [id^="zpDesc"], body.ep-with-base .ticket-card [id^="comboDesc"] { background: var(--ep-surface-2) !important; color: var(--ep-text) !important; border-radius: var(--ep-radius-sm) !important; }
body.ep-with-base .ticket-unavailable { color: #d32f2f; }
body.ep-with-base .ticket-upcoming { color: #e67e22; }
body.ep-with-base .ticket-category-group { background: var(--ep-surface) !important; border-color: var(--ep-line) !important; border-radius: var(--ep-radius) !important; }
/* Mengen-Steuerung: Stepper 44x44, Eingabe 56px hoch */
body.ep-with-base .numbers-row { position: relative; display: flex; align-items: stretch; gap: 0; max-width: 160px; }
body.ep-with-base .numbers-row input, body.ep-with-base input.qty, body.ep-with-base input.qty2 { flex: 1; min-width: 56px; height: 44px; min-height: 44px; text-align: center; font-weight: 600; font-size: 16px; padding: 0 4px; background: var(--ep-surface); color: var(--ep-text); border: var(--ep-border-w) solid var(--ep-line-strong); border-radius: var(--ep-radius-sm); -moz-appearance: textfield; }
body.ep-with-base input.qty2::-webkit-inner-spin-button, body.ep-with-base input.qty2::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.ep-with-base .button_inc { position: relative; width: 44px; height: 44px; flex: 0 0 44px; text-indent: 0; display: grid; place-items: center; background: var(--ep-surface-2); color: var(--ep-text); border: var(--ep-border-w) solid var(--ep-line-strong); border-radius: var(--ep-radius-sm); cursor: pointer; user-select: none; font-size: 0; }
body.ep-with-base .button_inc::after { font-size: 20px; line-height: 1; font-weight: 700; }
body.ep-with-base .button_inc.dec::after { content: "−"; }
body.ep-with-base .button_inc.inc::after { content: "+"; }
body.ep-with-base .button_inc:hover { background: var(--ep-primary); color: var(--ep-on-primary); border-color: var(--ep-primary); }
body.ep-with-base .variant-qty .numbers-row { margin-left: auto; }

/* Bundle-Upsell, Kasse, Zahlarten */
body.ep-with-base .bundle-upsell { background: var(--ep-primary-soft); color: var(--ep-text); border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--ep-radius-sm); }
body.ep-with-base .bundle-upsell em { color: var(--ep-primary); }
body.ep-with-base .cart-login-box { background: var(--ep-primary-soft) !important; border: var(--ep-border-w) solid var(--ep-primary) !important; border-radius: var(--ep-radius-sm) !important; color: var(--ep-text); }
body.ep-with-base .cart-login-box .glyphicon { color: var(--ep-primary) !important; }
body.ep-with-base .cart-login-box input.form-control { min-height: 40px; }
body.ep-with-base #rabattcode { text-transform: uppercase; }
body.ep-with-base #rabattcodeMessage { min-height: 1.2em; }
body.ep-with-base .payby_header label { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; margin: 0 0 8px; background: var(--ep-surface); border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--ep-radius-sm); color: var(--ep-text); cursor: pointer; font-weight: 500; }
body.ep-with-base .payby_header label:hover { border-color: var(--ep-line-strong); }
body.ep-with-base .payby_header label.checked { border-color: var(--ep-primary); box-shadow: 0 0 0 3px var(--ep-primary-soft); background: var(--ep-surface); }
body.ep-with-base .payby_header label img { max-height: 28px; width: auto; }
body.ep-with-base .payby_cont { background: var(--ep-surface-2); border-radius: var(--ep-radius-sm); padding: 14px; }
body.ep-with-base #gotopay { width: 100%; min-height: 52px; font-size: 1.0625rem; margin-top: 8px; }

/* ---- Archiv-Seite beendeter Events (tickets/archive.php) ---- */
body.ep-with-base .archive-hero, body.ep-with-base .archive-box, body.ep-with-base .archive-card { background: var(--ep-surface); border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); color: var(--ep-text); }
body.ep-with-base .archive-badge, body.ep-with-base .archive-label { background: var(--ep-surface-2); color: var(--ep-muted); border-radius: 999px; padding: .25em .75em; font-size: .8125rem; }
body.ep-with-base .archive-meta { color: var(--ep-muted); }
body.ep-with-base .archive-cta .btn, body.ep-with-base .archive-actions .btn { min-height: var(--ep-tap); }

/* ---- Kundenkonto (/meinkonto) ---- */
body.ep-with-base .meinkonto-nav a, body.ep-with-base .account-nav a { color: var(--ep-text); border-radius: var(--ep-radius-sm); min-height: var(--ep-tap); }
body.ep-with-base .meinkonto-nav a.active, body.ep-with-base .account-nav a.active { background: var(--ep-primary); color: var(--ep-on-primary); }

/* ---- Mobil: Kassenspalte unter den Tickets, Abstaende ---- */
@media (max-width: 767px) {
  body.ep-with-base .box_style_1 { padding: 16px; }
  body.ep-with-base .box_style_1 h3.inner { margin: -16px -16px 14px; }
  body.ep-with-base .ticket-card { padding: 12px; }
  body.ep-with-base .table > tbody > tr > td { padding: 8px 6px; }
}