/*
 * OTS Checkout — Dark Theme v1.2.0
 * Mobile-first. Full-page template_include ownership.
 */

/* Apple/Google Pay express (Stripe Payment Request) — rendered at top of step 1 */
body.ots-checkout-body .ots-express-pay {
  margin: 0 0 16px !important;
}
body.ots-checkout-body .ots-express-pay:not(:empty)::after {
  content: "oder mit Formular fortfahren";
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-txt2);
  margin-top: 12px;
  position: relative;
}
body.ots-checkout-body .ots-express-pay .wc-stripe-payment-request-button-separator,
body.ots-checkout-body .ots-express-pay .woocommerce-info { display: none !important; }

/* ══════════════════════════════════════════════════════
   Tokens
   ══════════════════════════════════════════════════════ */
:root {
  --c-bg:       #09090b;
  --c-bg2:      #111113;
  --c-surf:     #18181b;
  --c-surf2:    #1e1e22;
  --c-bdr:      #2a2a30;
  --c-bdr2:     #3f3f46;
  --c-txt:      #f4f4f5;
  --c-txt2:     #a1a1aa;
  --c-txt3:     #6b6b75;
  --c-acc:      #6366f1;
  --c-acc2:     #818cf8;
  --c-acc-a:    rgba(99,102,241,.13);
  --c-ok:       #22c55e;
  --c-ok-a:     rgba(34,197,94,.12);
  --c-err:      #ef4444;
  --c-err-a:    rgba(239,68,68,.10);
  --r:          12px;
  --rsm:        8px;
  --ease:       0.16s ease;
  --font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ══════════════════════════════════════════════════════
   Global reset + forced full-width
   (also in template <style> as early override)
   ══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background:               #09090b !important;
  max-width:                none !important;
  overflow-x:               hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior:          smooth;
}

body.ots-checkout-body {
  background:              var(--c-bg) !important;
  color:                   var(--c-txt);
  font-family:             var(--font);
  font-size:               15px;
  line-height:             1.6;
  max-width:               none !important;
  width:                   100% !important;
  margin:                  0 !important;
  padding:                 0 0 env(safe-area-inset-bottom) !important;
  overflow-x:              hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide admin bar + any theme wrappers that slip through */
#wpadminbar                               { display: none !important; }
.ots-checkout-body #page,
.ots-checkout-body .site,
.ots-checkout-body .woocommerce,
.ots-checkout-body .woocommerce-page      { padding: 0 !important; margin: 0 !important; }

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }

/* ══════════════════════════════════════════════════════
   Page shell
   ══════════════════════════════════════════════════════ */
.ots-page {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
  min-height:     100dvh;
}

/* ══════════════════════════════════════════════════════
   Header
   ══════════════════════════════════════════════════════ */
.ots-header {
  position:   -webkit-sticky;
  position:   sticky;
  top:        0;
  z-index:    300;
  background: rgba(9,9,11,.94);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter:         blur(14px) saturate(180%);
  border-bottom: 1px solid var(--c-bdr);
  padding-top:   env(safe-area-inset-top);
}

/* Row 1 — logo + back ─────────────────────────────── */
.ots-hrow {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          52px;
  padding:         0 16px;
  max-width:       1160px;
  margin:          0 auto;
  width:           100%;
}

.ots-logo {
  display:        flex;
  align-items:    center;
  font-weight:    700;
  font-size:      16px;
  letter-spacing: -.02em;
  color:          var(--c-txt);
  flex-shrink:    0;
}
.ots-logo img { height: 28px; width: auto; }

.ots-cart-back {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   13px;
  font-weight: 500;
  color:       var(--c-txt3);
  flex-shrink: 0;
  transition:  color var(--ease);
}
.ots-cart-back:hover { color: var(--c-txt2); }
.ots-cart-back span  { display: none; }   /* hidden on small phones, shown at 400px+ */

/* Row 2 — stepper ─────────────────────────────────── */
.ots-hstep {
  border-top: 1px solid var(--c-bdr);
  background: var(--c-bg2);
}

.ots-stepper {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         10px 12px;
  max-width:       480px;
  margin:          0 auto;
}

.ots-sbtn {
  display:     flex;
  align-items: center;
  gap:         6px;
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     4px 2px;
  font-family: var(--font);
  font-size:   12px;
  font-weight: 500;
  color:       var(--c-txt3);
  white-space: nowrap;
  transition:  color var(--ease);
}
.ots-sbtn:disabled { cursor: default; }

.ots-scircle {
  width:           24px;
  height:          24px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--c-surf);
  border:          1.5px solid var(--c-bdr2);
  flex-shrink:     0;
  transition:      all var(--ease);
  position:        relative;
}

.ots-sn {
  font-size:   11px;
  font-weight: 700;
  color:       var(--c-txt3);
  transition:  color var(--ease);
}
.ots-sok { display: none; color: var(--c-ok); }

.ots-slbl { font-size: 12px; }

.ots-sline {
  flex:       1;
  min-width:  16px;
  max-width:  44px;
  height:     1.5px;
  background: var(--c-bdr);
  margin:     0 3px;
  transition: background var(--ease);
}
.ots-sline.done { background: var(--c-acc); }

/* Active step */
.ots-sbtn.active { color: var(--c-txt); }
.ots-sbtn.active .ots-scircle { background: var(--c-acc-a); border-color: var(--c-acc); }
.ots-sbtn.active .ots-sn      { color: var(--c-acc2); }

/* Completed step */
.ots-sbtn.completed { color: var(--c-txt2); }
.ots-sbtn.completed .ots-scircle { background: var(--c-ok-a); border-color: var(--c-ok); }
.ots-sbtn.completed .ots-sn      { display: none; }
.ots-sbtn.completed .ots-sok     { display: flex; }

/* ══════════════════════════════════════════════════════
   Main content
   ══════════════════════════════════════════════════════ */
.ots-main {
  flex:    1;
  padding: 20px 14px 56px;
}

/* WooCommerce notices ──────────────────────────────── */
.ots-notices {
  max-width: 1160px;
  margin:    0 auto 16px;
}
.ots-checkout-body .woocommerce-error,
.ots-checkout-body .woocommerce-message,
.ots-checkout-body .woocommerce-info {
  background:    var(--c-err-a) !important;
  border:        none !important;
  border-left:   4px solid var(--c-err) !important;
  border-radius: var(--rsm) !important;
  color:         #fca5a5 !important;
  padding:       12px 16px !important;
  margin:        0 0 10px !important;
  font-size:     13px !important;
  list-style:    none !important;
}
.ots-checkout-body .woocommerce-error li { list-style: none !important; }
.ots-checkout-body .woocommerce-message  { background: var(--c-ok-a) !important; border-color: var(--c-ok) !important; color: #86efac !important; }
.ots-checkout-body .woocommerce-info     { background: var(--c-acc-a) !important; border-color: var(--c-acc) !important; color: var(--c-acc2) !important; }

/* ── Coupon toggle ──────────────────────────────────────────────────────
   WC injects .woocommerce-form-coupon-toggle via woocommerce_before_checkout_form.
   We nuke ALL banner styles and make it a plain subtle text row. */
body.ots-checkout-body .woocommerce-form-coupon-toggle {
  max-width:  1160px;
  margin:     0 auto 16px !important;
  padding:    0 !important;
  background: transparent !important;
  border:     none !important;
}
body.ots-checkout-body .woocommerce-form-coupon-toggle .woocommerce-info,
body.ots-checkout-body .woocommerce-form-coupon-toggle > * {
  background:    transparent !important;
  border:        none !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  padding:       0 !important;
  margin:        0 !important;
  font-size:     13px !important;
  color:         var(--c-txt3) !important;
  display:       block !important;
  line-height:   1.5 !important;
}
body.ots-checkout-body .woocommerce-form-coupon-toggle .woocommerce-info::before,
body.ots-checkout-body .woocommerce-form-coupon-toggle .woocommerce-info::after {
  display: none !important;
  content: none !important;
}
body.ots-checkout-body .woocommerce-form-coupon-toggle a {
  color:           var(--c-acc2) !important;
  text-decoration: underline !important;
  font-weight:     600 !important;
}
/* Expanded coupon input form — input + button in one flex row */
body.ots-checkout-body .woocommerce-form-coupon {
  display:       none !important; /* Hidden until JS adds .ots-coupon-open */
  background:    var(--c-surf) !important;
  border:        1px solid var(--c-bdr) !important;
  border-radius: var(--r) !important;
  padding:       14px !important;
  margin:        0 auto 16px !important;
  max-width:     1160px !important;
  box-shadow:    none !important;
  flex-wrap:     wrap !important;
  gap:           8px !important;
  align-items:   flex-end !important;
}
body.ots-checkout-body .woocommerce-form-coupon.ots-coupon-open {
  display: flex !important;
}
/* Hide ONLY the descriptive hint paragraph — NOT the .form-row paragraphs that
   hold the coupon input + apply button (those must stay visible). */
body.ots-checkout-body .woocommerce-form-coupon > p:not(.form-row) {
  width:  100% !important;
  margin: 0 !important;
  display: none !important; /* hide default WC hint text */
}
body.ots-checkout-body .woocommerce-form-coupon > p.form-row {
  display: block !important;
}
body.ots-checkout-body .woocommerce-form-coupon .form-row {
  margin: 0 !important;
  float:  none !important;
}
body.ots-checkout-body .woocommerce-form-coupon .form-row-first {
  flex: 1 1 160px !important;
}
body.ots-checkout-body .woocommerce-form-coupon .form-row-last {
  flex: 0 0 auto !important;
}
body.ots-checkout-body .woocommerce-form-coupon .clear { display: none !important; }
body.ots-checkout-body .woocommerce-form-coupon label {
  font-size:      11px !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color:          var(--c-txt2) !important;
  margin-bottom:  5px !important;
  display:        block !important;
}
body.ots-checkout-body .woocommerce-form-coupon input.input-text {
  background:    var(--c-bg) !important;
  border:        1.5px solid var(--c-bdr2) !important;
  border-radius: var(--rsm) !important;
  color:         var(--c-txt) !important;
  font-size:     16px !important;
  padding:       10px 13px !important;
  width:         100% !important;
  height:        auto !important;
  box-shadow:    none !important;
  outline:       none !important;
}
body.ots-checkout-body .woocommerce-form-coupon input.input-text:focus {
  border-color: var(--c-acc) !important;
  box-shadow:   0 0 0 3px var(--c-acc-a) !important;
}
body.ots-checkout-body .woocommerce-form-coupon .button,
body.ots-checkout-body .woocommerce-form-coupon input[type=submit] {
  display:        inline-flex !important;
  align-items:    center !important;
  background:     var(--c-acc) !important;
  color:          #fff !important;
  border:         none !important;
  border-radius:  var(--rsm) !important;
  padding:        10px 16px !important;
  font-family:    var(--font) !important;
  font-size:      13px !important;
  font-weight:    600 !important;
  cursor:         pointer !important;
  height:         auto !important;
  min-height:     0 !important;
  width:          auto !important;
  max-width:      none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow:     none !important;
  line-height:    1.4 !important;
  white-space:    nowrap !important;
}
body.ots-checkout-body .woocommerce-form-coupon .button:hover,
body.ots-checkout-body .woocommerce-form-coupon input[type=submit]:hover {
  background: var(--c-acc2) !important;
}

/* Two-column grid (mobile: single column) ─────────── */
.ots-grid {
  max-width:      1160px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

/* Mobile: summary above form */
.ots-gcol--aside { order: -1; }
.ots-gcol--form  { order:  1; }

/* ══════════════════════════════════════════════════════
   Steps
   ══════════════════════════════════════════════════════ */
.ots-step        { display: none; }
.ots-step.active { display: block; }

@keyframes ots-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.ots-step.active .ots-card { animation: ots-in .2s ease; }

/* ══════════════════════════════════════════════════════
   Card
   ══════════════════════════════════════════════════════ */
.ots-card {
  background:    var(--c-surf);
  border:        1px solid var(--c-bdr);
  border-radius: var(--r);
  overflow:      hidden;
}

.ots-card-hd { padding: 22px 20px 0; }

.ots-eyebrow {
  display:        inline-block;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--c-acc2);
  background:     var(--c-acc-a);
  padding:        3px 9px;
  border-radius:  20px;
  margin-bottom:  10px;
}

.ots-card-h {
  font-size:      19px;
  font-weight:    700;
  letter-spacing: -.025em;
  color:          var(--c-txt);
  line-height:    1.3;
  margin-bottom:  20px;
}

.ots-card-bd { padding: 0 20px 22px; }

.ots-card-ft {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     16px 20px 22px;
  border-top:  1px solid var(--c-bdr);
  flex-wrap:   wrap;
}
.ots-card-ft--end { justify-content: flex-end; }

.ots-sec-lbl {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--c-txt3);
  margin-bottom:  4px;
  margin-top:     4px;
}

/* ══════════════════════════════════════════════════════
   Form fields
   ══════════════════════════════════════════════════════ */
.ots-form .form-row {
  margin: 0 0 13px;
  float:  none !important;
  clear:  none !important;
  width:  100% !important;
}

/* 2-col name grid */
.ots-name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     12px;
  margin-bottom: 13px;
}
.ots-name-grid .form-row { margin: 0; }

/* Labels */
.ots-form label,
.ots-form .form-row > label {
  display:        block;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color:          var(--c-txt2);
  margin-bottom:  5px;
}
.ots-form abbr.required,
.ots-form span.required { color: var(--c-err); border: none; text-decoration: none; margin-left: 2px; }

/* Inputs — 16px prevents iOS auto-zoom */
.ots-form input[type="text"],
.ots-form input[type="email"],
.ots-form input[type="tel"],
.ots-form input[type="number"],
.ots-form input[type="password"],
.ots-form input.input-text,
.ots-form select,
.ots-form textarea {
  display:       block;
  width:         100%;
  background:    var(--c-bg) !important;
  border:        1.5px solid var(--c-bdr2) !important;
  border-radius: var(--rsm) !important;
  color:         var(--c-txt) !important;
  font-family:   var(--font) !important;
  font-size:     16px !important;
  padding:       11px 13px !important;
  height:        auto !important;
  line-height:   1.4 !important;
  outline:       none !important;
  box-shadow:    none !important;
  transition:    border-color var(--ease), box-shadow var(--ease);
  -webkit-appearance: none;
  appearance:    none;
}
.ots-form input::placeholder,
.ots-form textarea::placeholder { color: var(--c-txt3) !important; }

.ots-form input[type="text"]:focus,
.ots-form input[type="email"]:focus,
.ots-form input[type="tel"]:focus,
.ots-form input[type="password"]:focus,
.ots-form input.input-text:focus,
.ots-form select:focus,
.ots-form textarea:focus {
  border-color: var(--c-acc) !important;
  box-shadow:   0 0 0 3px var(--c-acc-a) !important;
}

/* Invalid state */
.ots-form .woocommerce-invalid .input-text,
.ots-form .woocommerce-invalid select,
.ots-form input.ots-invalid,
.ots-form select.ots-invalid {
  border-color: var(--c-err) !important;
  box-shadow:   0 0 0 3px var(--c-err-a) !important;
}
.ots-inline-err { display: block; font-size: 12px; color: var(--c-err); margin-top: 4px; }

/* Select2 dark theme */
.ots-form .select2-container--default .select2-selection--single {
  background:    var(--c-bg) !important;
  border:        1.5px solid var(--c-bdr2) !important;
  border-radius: var(--rsm) !important;
  height:        46px !important;
}
.ots-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  color:       var(--c-txt) !important;
  line-height: 44px !important;
  padding:     0 13px !important;
  font-size:   16px !important;
  font-family: var(--font) !important;
}
.ots-form .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important; right: 12px !important; transform: translateY(-50%);
}
.ots-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--c-txt3) transparent transparent !important;
}
.select2-dropdown {
  background:    var(--c-surf2) !important;
  border:        1px solid var(--c-bdr2) !important;
  border-radius: var(--rsm) !important;
  box-shadow:    0 8px 32px rgba(0,0,0,.6) !important;
  z-index:       99999 !important;
}
.select2-results__option { font-size: 15px !important; padding: 10px 14px !important; color: var(--c-txt) !important; }
.select2-results__option--highlighted.select2-results__option--selectable { background: var(--c-acc) !important; color: #fff !important; }
.select2-search--dropdown .select2-search__field {
  background:    var(--c-bg) !important;
  border:        1px solid var(--c-bdr2) !important;
  border-radius: 6px !important;
  color:         var(--c-txt) !important;
  padding:       8px 12px !important;
  font-size:     15px !important;
  outline:       none !important;
}

/* Shipping toggle ──────────────────────────────────── */
.ots-ship-toggle { margin: 8px 0 18px; }

.ots-chk {
  display:     flex;
  align-items: center;
  gap:         10px;
  cursor:      pointer;
  user-select: none;
}
.ots-chk input[type="checkbox"] { display: none; }
.ots-chk-box {
  width:           18px;
  height:          18px;
  min-width:       18px;
  background:      var(--c-bg);
  border:          1.5px solid var(--c-bdr2);
  border-radius:   4px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all var(--ease);
}
.ots-chk input:checked ~ .ots-chk-box {
  background: var(--c-acc); border-color: var(--c-acc);
}
.ots-chk input:checked ~ .ots-chk-box::after {
  content:      '';
  display:      block;
  width:        10px;
  height:       6px;
  border:       2px solid #fff;
  border-top:   none;
  border-right: none;
  transform:    rotate(-45deg) translate(0,-1px);
}
.ots-chk-lbl { font-size: 14px; font-weight: 500; color: var(--c-txt2); }
.ots-ship-fields { display: none; }

/* ══════════════════════════════════════════════════════
   Buttons
   ══════════════════════════════════════════════════════ */
.ots-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  min-height:      46px;
  padding:         0 20px;
  border:          none;
  border-radius:   var(--rsm);
  font-family:     var(--font);
  font-size:       14px;
  font-weight:     600;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      all var(--ease);
  letter-spacing:  -.01em;
  flex:            1 1 auto;
}

.ots-btn--p { background: var(--c-acc); color: #fff; }
.ots-btn--p:hover { background: var(--c-acc2); box-shadow: 0 4px 18px rgba(99,102,241,.38); }
.ots-btn--p:active { box-shadow: none; }

.ots-btn--g {
  background:  transparent;
  color:       var(--c-txt2);
  border:      1.5px solid var(--c-bdr2);
  flex:        0 0 auto;
}
.ots-btn--g:hover { background: var(--c-surf2); color: var(--c-txt); }

/* Shake on validation fail */
@keyframes ots-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX( 6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX( 4px); }
}
.ots-shake { animation: ots-shake .35s ease; }

/* ══════════════════════════════════════════════════════
   Step 3 — order preview
   ══════════════════════════════════════════════════════ */
.ots-order-preview {
  border-bottom: 1px solid var(--c-bdr);
  padding-bottom: 8px;
  margin-bottom: 0;
}

.ots-op-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             10px;
  padding:         7px 0;
  border-bottom:   1px solid var(--c-bdr);
  font-size:       13px;
}
.ots-op-row:last-of-type { border-bottom: none; }
.ots-op-name  { color: var(--c-txt); font-weight: 600; flex: 1; }
.ots-op-qty   { font-weight: 400; color: var(--c-txt3); font-size: 12px; }
.ots-op-price { color: var(--c-txt); font-weight: 700; white-space: nowrap; }

.ots-op-sub {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             10px;
  padding:         6px 0;
  font-size:       12px;
  color:           var(--c-txt2);
}
.ots-op-sub--disc { color: var(--c-ok); }

.ots-op-taxnote {
  padding:    0 0 4px;
  font-size:  11px;
  color:      var(--c-txt3);
  margin-top: -2px;
}
.ots-op-taxnote--total {
  padding:      6px 0;
  border-bottom: 1px solid var(--c-bdr);
  margin-bottom: 4px;
}

.ots-sum-disc { color: var(--c-ok); }

.ots-op-total {
  display:         flex;
  justify-content: space-between;
  padding:         12px 0 0;
  font-size:       15px;
  font-weight:     700;
  color:           var(--c-txt);
  border-top:      1px solid var(--c-bdr2);
  margin-top:      8px;
}

/* Payment section */
.ots-pay-bd { padding-top: 2px; }

/* ══════════════════════════════════════════════════════
   Payment gateways — card grid
   ══════════════════════════════════════════════════════ */
#payment {
  background: transparent !important;
  border:     none !important;
  padding:    0 !important;
  margin:     0 !important;
}

/* Hide anything PayPal/WC plugins inject ABOVE the payment methods list
   (express checkout buttons, notices, etc. that create unwanted space) */
#payment > *:not(ul.payment_methods):not(#ots-pm-detail):not(.form-row):not(input):not(script) {
  display:  none !important;
  height:   0 !important;
  overflow: hidden !important;
  margin:   0 !important;
  padding:  0 !important;
}

/* Payment method grid: 3 columns, equal width, 10px gap */
#payment ul.payment_methods {
  list-style:            none !important;
  padding:               0 !important;
  margin:                0 0 10px !important;
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   10px !important;
}

/* Each li = a white card tile with relative positioning so the label can
   cover it completely (hiding the native input underneath) */
#payment ul.payment_methods > li {
  position:      relative !important;
  background:    #fff !important;
  border:        1.5px solid #e4e4e7 !important;
  border-radius: var(--rsm) !important;
  padding:       0 !important;
  min-height:    78px !important;
  overflow:      hidden !important;
  transition:    border-color var(--ease), box-shadow var(--ease);
  cursor:        pointer;
}
#payment ul.payment_methods > li.ots-pm-selected {
  border: 2.5px solid #09090b !important;
  box-shadow: none !important;
  background: #fafafa !important;
}

/* Label covers the ENTIRE card tile (position:absolute, inset:0).
   This hides any native input that WooCommerce/Stripe/PayPal renders
   before the label in the DOM — they sit underneath the label. */
#payment ul.payment_methods label {
  position:        absolute !important;
  inset:           0 !important;
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             7px !important;
  padding:         12px 8px !important;
  cursor:          pointer !important;
  text-align:      center !important;
  font-size:       11px !important;
  font-weight:     600 !important;
  color:           #52525b !important;
  text-transform:  none !important;
  letter-spacing:  0 !important;
  line-height:     1.2 !important;
  box-sizing:      border-box !important;
  background:      transparent !important;
  border:          none !important;
  z-index:         1 !important;
  min-height:      0 !important;
}
#payment ul.payment_methods li.ots-pm-selected label { color: #18181b !important; }
#payment ul.payment_methods label > img               { display: none !important; }

/* Method name span injected by JS */
.ots-pm-name {
  font-size:   11px !important;
  font-weight: 600 !important;
  color:       #3f3f46 !important;
  line-height: 1.2 !important;
}
li.ots-pm-selected .ots-pm-name { color: #18181b !important; font-weight: 700 !important; }

/* Native input — moved inside label by JS, completely hidden.
   display:none removes all native rendering (no platform radio dot, no iOS square). */
#payment ul.payment_methods input[type=radio],
#payment ul.payment_methods input[type=checkbox],
#payment ul.payment_methods label > input,
#payment ul.payment_methods .input-radio,
#payment ul.payment_methods .input-checkbox {
  display:            none !important;
  position:           absolute !important;
  width:              0 !important;
  height:             0 !important;
  opacity:            0 !important;
  pointer-events:     none !important;
  -webkit-appearance: none !important;
  appearance:         none !important;
  border:             none !important;
  margin:             0 !important;
  padding:            0 !important;
  flex:               0 0 0 !important;
}

/* Suppress theme ::before/::after indicators on payment labels (white square fix) */
#payment ul.payment_methods label::before,
#payment ul.payment_methods label::after {
  display: none !important;
  content: none !important;
}

/* ── Payment method icons (injected by JS) ─────────────────────────────── */
.ots-pm-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  color:           #71717a;
}

/* Card/bank SVG icons: dark gray on white card */
.ots-pm-icon--card svg,
.ots-pm-icon--bank svg { stroke: #52525b; }

/* PayPal wordmark badge */
.ots-pm-icon--paypal {
  background:     #003087;
  color:          #009cde;
  font-family:    var(--font);
  font-size:      11px;
  font-weight:    800;
  font-style:     italic;
  padding:        4px 8px;
  border-radius:  4px;
  letter-spacing: -.2px;
  line-height:    1;
}
.ots-pm-icon--paypal em { color: #fff; font-style: normal; }

/* Klarna badge */
.ots-pm-icon--klarna {
  background:    #ffb3c7;
  color:         #17120e;
  font-family:   var(--font);
  font-size:     11px;
  font-weight:   800;
  padding:       4px 8px;
  border-radius: 4px;
  line-height:   1;
}

/* Text badges (EPS, Giropay, iDEAL, Sofort, etc.) */
.ots-pm-icon--text {
  background:    #f4f4f5;
  color:         #3f3f46;
  font-family:   var(--font);
  font-size:     10px;
  font-weight:   800;
  padding:       4px 7px;
  border-radius: 4px;
  line-height:   1;
  letter-spacing: -.01em;
}
.ots-pm-icon--link {
  background: #635bff;
  color:      #fff;
}

/* Stripe UPE real tile — hidden from view, kept for WooCommerce */
.ots-upe-hidden { display: none !important; }

/* Synthetic Stripe sub-tiles look identical to normal gateway tiles */
#payment ul.payment_methods > li.ots-stripe-tile {
  cursor: pointer;
}

/* ── Payment detail panel (extracted from li by JS) ─────────────────── */
#ots-pm-detail {
  margin-top: 10px;
}

/* Hide payment boxes that contain only text (no interactive UI).
   JS adds .ots-pm-empty via auditPaymentBoxes() in restructurePaymentGrid(). */
.ots-pm-box.ots-pm-empty { display: none !important; }
.ots-pm-box .payment_box {
  background:    var(--c-bg2) !important;
  border:        1px solid var(--c-bdr) !important;
  border-radius: var(--rsm) !important;
  padding:       14px !important;
  font-size:     13px !important;
  color:         var(--c-txt2) !important;
}

/* Hide payment gateway text descriptions (e.g. "Mit PayPal bezahlen" explanations) */
.ots-pm-box .payment_box > p,
.ots-pm-box .payment_box > span:not([class*="ppcp"]):not([id*="stripe"]):not([class*="stripe"]) {
  display: none !important;
}

.ots-pm-box .payment_box input.input-text { margin-top: 8px; }

/* PayPal PPCP: constrain injected iframe/button containers */
.ots-pm-box [id*="ppc-button"],
.ots-pm-box [id*="ppcp"],
.ots-pm-box .paypal-button-container,
.ots-pm-box .wc-ppcp-container {
  max-height: 50px !important;
  overflow:   hidden !important;
}
.ots-pm-box [id*="ppcp"] button,
.ots-pm-box [class*="ppcp"] button,
.ots-pm-box [id*="paypal-button"],
.ots-pm-box [class*="paypal-button"],
.ots-pm-box .wc-ppcp-container button {
  height:     44px !important;
  max-height: 44px !important;
  min-height: 0 !important;
  padding:    0 18px !important;
  font-size:  13px !important;
  width:      auto !important;
}

/* ── BlockUI overlay ────────────────────────────────────────────────────── */
body.ots-checkout-body .blockUI.blockOverlay {
  background:    rgba(9,9,11,.78) !important;
  opacity:       1 !important;
  border-radius: var(--r) !important;
}
body.ots-checkout-body .blockUI.blockMsg {
  background:    var(--c-surf) !important;
  border:        1px solid var(--c-bdr) !important;
  border-radius: var(--r) !important;
  color:         var(--c-txt2) !important;
  box-shadow:    0 8px 32px rgba(0,0,0,.55) !important;
}

/* ── Place order button ─────────────────────────────────────────────────── */
#payment #place_order,
#payment button[type=submit] {
  display:        block !important;
  width:          100% !important;
  height:         50px !important;
  padding:        0 20px !important;
  background:     var(--c-acc) !important;
  color:          #fff !important;
  font-family:    var(--font) !important;
  font-size:      15px !important;
  font-weight:    700 !important;
  border:         none !important;
  border-radius:  var(--rsm) !important;
  cursor:         pointer !important;
  letter-spacing: -.01em !important;
  transition:     all var(--ease) !important;
  box-shadow:     0 2px 14px rgba(99,102,241,.3) !important;
  text-align:     center !important;
  margin-top:     6px !important;
  text-transform: none !important;
  line-height:    50px !important;
}
#payment #place_order:hover,
#payment button[type=submit]:hover {
  background: var(--c-acc2) !important;
  box-shadow: 0 6px 24px rgba(99,102,241,.46) !important;
}

/* Privacy policy text — left-aligned, small, muted */
.woocommerce-privacy-policy-text {
  font-size:   12px !important;
  color:       var(--c-txt3) !important;
  margin:      0 0 16px !important;
  line-height: 1.65 !important;
  text-align:  left !important;
}
.woocommerce-privacy-policy-text a {
  color:           var(--c-txt2) !important;
  text-decoration: underline !important;
}

/* ── Terms & conditions ───────────────────────────────
   Native checkbox is hidden via JS (checkout.js).
   .ots-terms-bx is the injected visual replacement. */

body.ots-checkout-body .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 18px !important;
}

body.ots-checkout-body #terms_and_conditions_field {
  margin: 0 !important; padding: 0 !important; float: none !important; width: 100% !important;
}

/* Kill any WooCommerce default box/border on terms wrapper */
body.ots-checkout-body .woocommerce-terms-and-conditions-wrapper,
body.ots-checkout-body #payment .place-order {
  background:    none !important;
  border:        none !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  padding:       0 !important;
}

/* Native #terms checkbox — completely hidden via display:none + off-screen fallback.
   display:none removes it from flex layout; position:fixed is belt-and-suspenders. */
body.ots-checkout-body #terms {
  display:        none !important;
  position:       fixed !important;
  left:           -9999px !important;
  top:            -9999px !important;
  width:          0 !important;
  height:         0 !important;
  opacity:        0 !important;
  pointer-events: none !important;
  border:         none !important;
  padding:        0 !important;
  margin:         0 !important;
  box-shadow:     none !important;
  -webkit-appearance: none !important;
  appearance:         none !important;
}

/* Suppress theme/WC ::before ::after indicators on terms label (white square fix) */
body.ots-checkout-body .woocommerce-form__label-for-checkbox::before,
body.ots-checkout-body .woocommerce-form__label-for-checkbox::after,
body.ots-checkout-body #terms_and_conditions_field label::before,
body.ots-checkout-body #terms_and_conditions_field label::after {
  display: none !important;
  content: none !important;
}

/* Label: simple flex row, no box/border (the .ots-terms-bx IS the box) */
body.ots-checkout-body #terms_and_conditions_field label,
body.ots-checkout-body .woocommerce-form__label-for-checkbox {
  display:        flex !important;
  align-items:    flex-start !important;
  gap:            12px !important;
  padding:        0 !important;
  background:     transparent !important;
  border:         none !important;
  cursor:         pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size:      13px !important;
  font-weight:    400 !important;
  line-height:    1.55 !important;
  color:          var(--c-txt2) !important;
  margin:         0 !important;
}

/* The JS-injected visual checkbox box */
.ots-terms-bx {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  min-width:       20px;
  background:      var(--c-bg);
  border:          1.5px solid var(--c-bdr2);
  border-radius:   5px;
  flex-shrink:     0;
  margin-top:      1px;
  cursor:          pointer;
  position:        relative;
  transition:      all var(--ease);
}
.ots-terms-bx.is-checked {
  background:   var(--c-acc);
  border-color: var(--c-acc);
}
.ots-terms-bx.is-checked::after {
  content:      '';
  display:      block;
  position:     absolute;
  top:          3px;
  left:         5px;
  width:        8px;
  height:       5px;
  border:       2.5px solid #fff;
  border-top:   none;
  border-right: none;
  transform:    rotate(-46deg);
}

/* Link in checkbox text */
body.ots-checkout-body .woocommerce-terms-and-conditions-checkbox-text a {
  color: var(--c-acc2) !important; text-decoration: underline !important;
}

/* Validation error: red box */
body.ots-checkout-body #terms_and_conditions_field.woocommerce-invalid .ots-terms-bx,
body.ots-checkout-body #terms_and_conditions_field.woocommerce-invalid-required-field .ots-terms-bx {
  border-color: var(--c-err) !important;
  box-shadow:   0 0 0 3px var(--c-err-a) !important;
}

/* Wrapper that holds privacy + terms + button */
#payment .form-row.place-order { margin: 0 !important; padding: 0 !important; }

/* ══════════════════════════════════════════════════════
   Sidebar — custom HTML summary
   ══════════════════════════════════════════════════════ */
.ots-summary {
  background:    var(--c-surf);
  border:        1px solid var(--c-bdr);
  border-radius: var(--r);
  overflow:      hidden;
}

.ots-sum-hdg {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--c-txt3);
  padding:        16px 18px;
  border-bottom:  1px solid var(--c-bdr);
}

.ots-sum-item {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             12px;
  padding:         11px 18px;
  border-bottom:   1px solid var(--c-bdr);
  font-size:       13px;
}
.ots-sum-name  { color: var(--c-txt); font-weight: 600; flex: 1; }
.ots-sum-qty   { font-weight: 400; color: var(--c-txt3); font-size: 12px; margin-left: 3px; }
.ots-sum-price { color: var(--c-txt); font-weight: 700; white-space: nowrap; }
.ots-sum-price .woocommerce-Price-amount { color: inherit !important; }

.ots-sum-sub {
  display:         flex;
  justify-content: space-between;
  padding:         9px 18px;
  font-size:       12px;
  color:           var(--c-txt2);
  border-bottom:   1px solid var(--c-bdr);
}

.ots-sum-taxnote {
  padding:     0 18px 8px;
  font-size:   11px;
  color:       var(--c-txt3);
  margin-top:  -4px;
}
.ots-sum-taxnote--total {
  padding:         8px 18px;
  border-bottom:   1px solid var(--c-bdr);
}

.ots-sum-total {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         14px 18px;
  font-size:       15px;
  font-weight:     700;
  color:           var(--c-txt);
  background:      var(--c-surf2);
  border-top:      1px solid var(--c-bdr2);
}
.ots-sum-total .woocommerce-Price-amount { color: inherit !important; }

/* ══════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════ */
.ots-footer {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             6px;
  padding:         20px 20px 28px;
  border-top:      1px solid var(--c-bdr);
  font-size:       12px;
  color:           var(--c-txt3);
  text-align:      center;
}
.ots-footer-ssl {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   12px;
  color:       var(--c-txt3);
}
.ots-footer-ssl svg { opacity: .7; flex-shrink: 0; }
.ots-footer-links {
  display:     flex;
  align-items: center;
  gap:         6px 10px;
  flex-wrap:   wrap;
  justify-content: center;
}
.ots-footer-links a {
  color:           var(--c-txt3) !important;
  text-decoration: underline;
}
.ots-footer-links a:hover { color: var(--c-txt2) !important; }
.ots-footer-brand {
  font-size:  11px;
  color:      var(--c-txt3);
  opacity:    .55;
  margin-top: 2px;
}
.ots-dot { opacity: .4; }

/* ══════════════════════════════════════════════════════
   PHONE — 400px+: show back-link label
   ══════════════════════════════════════════════════════ */
@media (min-width: 400px) {
  .ots-cart-back span { display: inline; }
}

/* ══════════════════════════════════════════════════════
   TABLET — 600px+
   ══════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  .ots-hrow     { padding: 0 24px; height: 56px; }
  .ots-logo img { height: 32px; }
  .ots-main     { padding: 28px 24px 64px; }
  .ots-grid     { gap: 24px; }
  .ots-card-hd  { padding: 26px 26px 0; }
  .ots-card-bd  { padding: 0 26px 24px; }
  .ots-card-ft  { padding: 16px 26px 24px; }
}

/* ══════════════════════════════════════════════════════
   DESKTOP — 900px+: two-column grid
   ══════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .ots-hrow     { padding: 0 32px; height: 60px; }
  .ots-logo img { height: 36px; }
  .ots-sline    { min-width: 32px; max-width: 56px; }
  .ots-main     { padding: 36px 32px 72px; }

  .ots-grid {
    display:               grid;
    grid-template-columns: 1fr 340px;
    gap:                   28px;
    align-items:           start;
  }

  /* Restore natural DOM order — form first, aside second */
  .ots-gcol--form  { order: 0; }
  .ots-gcol--aside {
    order:    1;
    position: sticky;
    top:      136px;
  }

  .ots-card-hd { padding: 30px 32px 0; }
  .ots-card-bd { padding: 0 32px 26px; }
  .ots-card-ft { padding: 18px 32px 28px; }

  /* Buttons: natural width on desktop (no stretch) */
  .ots-btn { flex: 0 0 auto; }

  .ots-sum-item { padding: 12px 22px; }
  .ots-sum-hdg  { padding: 18px 22px; }
  .ots-sum-sub  { padding: 9px 22px; }
  .ots-sum-total{ padding: 16px 22px; }
}

/* ══════════════════════════════════════════════════════
   VERY SMALL — < 380px
   ══════════════════════════════════════════════════════ */
@media (max-width: 379px) {
  .ots-name-grid  { grid-template-columns: 1fr; }
  .ots-slbl       { display: none; }   /* hide step labels, keep circles + numbers */
}

/* ══════════════════════════════════════════════════════
   Thank-You / Order-Received Page
   ══════════════════════════════════════════════════════ */
.ots-ty-main {
  flex:    1;
  padding: 24px 16px 64px;
  max-width: 680px;
  margin:  0 auto;
  width:   100%;
}

/* Hero ──────────────────────────────────────────────── */
.ots-ty-hero {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        32px 0 28px;
  gap:            12px;
}

.ots-ty-ok-circle {
  width:           60px;
  height:          60px;
  border-radius:   50%;
  background:      rgba(16,185,129,.13);
  border:          1.5px solid rgba(16,185,129,.35);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.ots-ty-h1 {
  font-size:      26px;
  font-weight:    800;
  letter-spacing: -.03em;
  color:          var(--c-txt);
  line-height:    1.2;
  margin:         0;
}

.ots-ty-sub {
  font-size:   14px;
  color:       var(--c-txt2);
  line-height: 1.6;
  max-width:   440px;
  margin:      0;
}
.ots-ty-sub strong { color: var(--c-txt); font-weight: 600; }

/* Cards ─────────────────────────────────────────────── */
.ots-ty-card {
  background:    var(--c-surf);
  border:        1px solid var(--c-bdr);
  border-radius: var(--r);
  overflow:      hidden;
  margin-bottom: 16px;
}

.ots-ty-card-hdg {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--c-txt3);
  padding:        14px 18px;
  border-bottom:  1px solid var(--c-bdr);
  margin:         0;
}

/* Rows ──────────────────────────────────────────────── */
.ots-ty-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             12px;
  padding:         11px 18px;
  border-bottom:   1px solid var(--c-bdr);
  font-size:       13px;
}
.ots-ty-row:last-child { border-bottom: none; }

.ots-ty-label { color: var(--c-txt2); flex: 1; }
.ots-ty-val   { color: var(--c-txt); font-weight: 700; white-space: nowrap; }
.ots-ty-val .woocommerce-Price-amount { color: inherit !important; }

.ots-ty-qty {
  font-size:   12px;
  color:       var(--c-txt3);
  font-weight: 400;
  margin-left: 3px;
}

.ots-ty-row--total .ots-ty-label,
.ots-ty-row--total .ots-ty-val {
  font-size:   15px;
  font-weight: 800;
  color:       var(--c-txt);
}
.ots-ty-row--disc .ots-ty-val { color: var(--c-ok); }
.ots-ty-row--tax  .ots-ty-label,
.ots-ty-row--tax  .ots-ty-val  { color: var(--c-txt3); font-size: 11px; }

/* Back button (error state) ─────────────────────────── */
.ots-ty-back-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-height:      44px;
  padding:         0 22px;
  background:      var(--c-acc);
  color:           #fff;
  border-radius:   var(--rsm);
  font-size:       14px;
  font-weight:     700;
  margin-top:      12px;
  transition:      background var(--ease);
}
.ots-ty-back-btn:hover { background: var(--c-acc2); }

/* ── QR code section (output by thankyou_tickets_section hook) ── */
.ots-ty {
  background:    var(--c-surf);
  border:        1px solid var(--c-bdr);
  border-radius: var(--r);
  overflow:      hidden;
  margin-bottom: 16px;
}

.ots-ty-btn-wrap { padding: 18px; }

.ots-ty-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  min-height:      48px;
  padding:         0 20px;
  background:      var(--c-acc);
  color:           #fff;
  border:          none;
  border-radius:   var(--rsm);
  font-family:     var(--font);
  font-size:       15px;
  font-weight:     700;
  cursor:          pointer;
  transition:      background var(--ease), opacity var(--ease);
}
.ots-ty-btn:hover    { background: var(--c-acc2); }
.ots-ty-btn:disabled { opacity: .6; cursor: default; }

.ots-ty-spinner {
  display:         none;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         32px 18px;
  color:           var(--c-txt3);
  font-size:       13px;
}
.ots-ty-spinner.is-active { display: flex; }

@keyframes ots-spin {
  to { transform: rotate(360deg); }
}
.ots-ty-ring {
  width:       36px;
  height:      36px;
  border:      3px solid var(--c-bdr2);
  border-top-color: var(--c-acc);
  border-radius: 50%;
  animation:   ots-spin .8s linear infinite;
}

/* QR grid ───────────────────────────────────────────── */
.ots-ty-grid {
  display:     none;
  flex-wrap:   wrap;
  gap:         14px;
  padding:     0 18px 20px;
}
.ots-ty-grid.is-active { display: flex; }

.ots-ty-ticket {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  background:     var(--c-bg);
  border:         1px solid var(--c-bdr);
  border-radius:  var(--rsm);
  padding:        16px 14px 14px;
  width:          180px;
  flex-shrink:    0;
}

.ots-ty-ticket img {
  width:         148px;
  height:        148px;
  border-radius: 6px;
  border:        1px solid var(--c-bdr2);
}

.ots-ty-tn {
  font-size:   12px;
  font-weight: 700;
  color:       var(--c-txt2);
}

.ots-ty-an {
  font-size:  11px;
  color:      var(--c-txt3);
  text-align: center;
  max-width:  150px;
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ots-ty-err {
  padding:     18px;
  font-size:   13px;
  color:       #fca5a5;
  background:  var(--c-err-a);
  border-top:  1px solid var(--c-bdr);
}

/* Responsive ────────────────────────────────────────── */
@media (min-width: 600px) {
  .ots-ty-main  { padding: 32px 24px 72px; }
  .ots-ty-h1    { font-size: 30px; }
  .ots-ty-card-hdg,
  .ots-ty-btn-wrap,
  .ots-ty-spinner,
  .ots-ty-grid  { padding-left: 22px; padding-right: 22px; }
  .ots-ty-row   { padding: 12px 22px; }
}

@media (min-width: 900px) {
  .ots-ty-main { padding: 40px 32px 80px; }
}