/* GC Stripe: Checkout, Paywall, Abo-Verwaltung, Kündigungsformular.
   Farben kommen aus den Theme-Variablen (--gc-*), damit Light und Dark Mode wie die Bricks-Formulare aussehen.
   Die Theme-Variablen selbst nie hier überschreiben, sonst ändern sie sich seitenweit. */
.gc-co-host, .gc-co, .gc-paywall, .gc-billing, .gc-modal, .gc-cancel-form, .gc-upsell {
  --gcs-accent: var(--gc-primary, #f58b00);
  --gcs-accent-soft: var(--gc-primary-t-1, rgba(245, 139, 0, .25));
  --gcs-danger: var(--gc-danger, #e50000);
  --gcs-danger-soft: var(--gc-danger-t-1, rgba(229, 0, 0, .25));
  --gcs-success: var(--gc-success, #00c950);
  --gcs-text: var(--gc-text-main, #363636);
  --gcs-muted: var(--gc-text-sub, #7e8994);
  --gcs-border: var(--gc-border, #e5e7eb);
  --gcs-surface: var(--gc-container, #fff);
  --gcs-input: var(--gc-inputfield, #fff);
  --gcs-radius: 1rem;
}

.gc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 1rem 2rem; border: 1px solid var(--gcs-border); border-radius: var(--gc-border-radius, 3rem);
  background: var(--gc-gradient-primary, var(--gcs-accent)); background-color: var(--gcs-accent);
  color: #fff; font-size: 1.6rem; font-weight: 700; text-transform: uppercase; cursor: pointer; text-decoration: none;
  box-shadow: 0 0 1rem .5rem var(--gcs-accent-soft);
}
.gc-btn:disabled { opacity: .6; cursor: wait; }
.gc-btn--ghost { background: transparent; color: var(--gcs-text); box-shadow: inset 0 0 0 2px var(--gcs-text); border-color: transparent; }
.gc-btn--danger { background: var(--gcs-danger); box-shadow: none; }
.gc-link { background: none; border: 0; padding: 0; color: var(--gcs-accent); cursor: pointer; text-decoration: underline; font: inherit; }
.gc-link--danger { color: var(--gcs-danger); }
.gc-muted { color: var(--gcs-muted); font-size: .92em; }
.gc-hp { position: absolute !important; left: -9999px !important; }

/* Eingabefelder wie .brxe-form auf /profile */
.gc-co__field, .gc-cancel-form label, .gc-modal__box label { display: grid; gap: .4rem; color: var(--gcs-muted); }
.gc-co__field input, .gc-cancel-form input, .gc-cancel-form select, .gc-cancel-form textarea, .gc-modal select, .gc-modal textarea {
  width: 100%; padding: .9rem 1.2rem; border: 1px solid var(--gcs-border); border-radius: var(--gcs-radius);
  background-color: var(--gcs-input); color: var(--gcs-text); font: inherit; font-size: 1.5rem;
}
.gc-co__field input::placeholder, .gc-cancel-form ::placeholder, .gc-modal ::placeholder { color: var(--gcs-muted); }
.gc-co__field input:focus, .gc-cancel-form :is(input, select, textarea):focus, .gc-modal :is(select, textarea):focus {
  outline: none; border-color: var(--gcs-accent); box-shadow: 0 0 0 3px var(--gcs-accent-soft);
}
.gc-co__terms input, .gc-cancel-form input[type="checkbox"] { width: auto; accent-color: var(--gcs-accent); }

/* Checkout */
.gc-co-host { margin: 1.5rem 0; }
.gc-co { display: grid; gap: 1rem; color: var(--gcs-text); }
.gc-co__details, .gc-co__payment { display: grid; gap: 1rem; }
.gc-co [hidden] { display: none !important; }
.gc-co__hint { margin: 0; color: var(--gcs-muted); font-size: .92em; }
.gc-co__terms { display: flex; gap: .6rem; align-items: flex-start; font-size: .9em; line-height: 1.45; }
.gc-co__terms input { margin-top: .25em; flex: 0 0 auto; }
.gc-co__terms a, .gc-co__hint a { color: var(--gcs-accent); }
.gc-co__summary { border-top: 1px solid var(--gcs-border); padding-top: .75rem; display: grid; gap: .4rem; }
.gc-co__row { display: flex; justify-content: space-between; gap: 1rem; }
.gc-co__row--note { color: var(--gcs-accent); }
.gc-co__row--total { font-weight: 700; font-size: 1.05em; }
.gc-co__legal { margin: .4rem 0 0; color: var(--gcs-muted); font-size: .85em; }
.gc-co__error { padding: .75em 1em; border-radius: var(--gcs-radius); background: var(--gcs-danger-soft); color: var(--gcs-danger); }
.gc-co__error a { color: inherit; text-decoration: underline; }
.gc-co--soon { padding: 1rem; border: 1px dashed var(--gcs-border); border-radius: var(--gcs-radius); text-align: center; }

/* Paywall */
.gc-paywall { display: grid; gap: 1rem; text-align: center; padding: 2rem 1rem; color: var(--gcs-text); }
.gc-paywall__title { margin: 0; }
.gc-paywall__text { margin: 0 auto; max-width: 40rem; color: var(--gcs-muted); }
.gc-paywall__cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 44rem; margin: 0 auto; width: 100%; }
.gc-paywall__card { display: grid; gap: .5rem; padding: 1.5rem; border-radius: var(--gcs-radius); background: var(--gcs-surface); border: 1px solid var(--gcs-border); }
.gc-paywall__card.is-featured { border: 2px solid var(--gcs-accent); }
.gc-paywall__label { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .8em; color: var(--gcs-muted); }
.gc-paywall__offer { color: var(--gcs-accent); font-size: .9em; }
.gc-paywall__price { font-size: 2rem; font-weight: 700; }
.gc-paywall__price s { font-size: .55em; color: var(--gcs-muted); font-weight: 400; }
.gc-paywall__price span { font-size: .45em; font-weight: 400; color: var(--gcs-muted); }
.gc-paywall__note { font-size: .85em; color: var(--gcs-muted); }
.gc-paywall__login a { color: var(--gcs-accent); }

/* Abo-Verwaltung */
.gc-billing { display: grid; gap: 1.5rem; color: var(--gcs-text); }
.gc-billing__section { display: grid; gap: .75rem; }
.gc-billing__section h4 { margin: 0; }
.gc-billing__sub, .gc-billing__upsell, .gc-billing__pm { padding: 1.25rem; border-radius: var(--gcs-radius); background: var(--gcs-surface); border: 1px solid var(--gcs-border); }
.gc-billing__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.gc-billing__items { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .35rem; }
.gc-billing__items li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gc-billing__notice { color: var(--gcs-accent); margin: .5rem 0; }
.gc-billing__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .75rem; }
.gc-billing__pm { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gc-billing__payments { width: 100%; border-collapse: collapse; font-size: .92em; }
.gc-billing__payments td { padding: .5rem .25rem; border-bottom: 1px solid var(--gcs-border); }
.gc-billing__payments td:nth-child(3), .gc-billing__payments td:nth-child(4) { text-align: right; white-space: nowrap; }
.gc-billing__status--open, .gc-billing__status--uncollectible { color: var(--gcs-danger); }
.gc-billing__offer { display: grid; gap: .5rem; padding: 1rem; border-radius: var(--gcs-radius); border: 1px solid var(--gcs-accent); margin-bottom: 1rem; }
.gc-badge { font-size: .78em; padding: .2em .6em; border-radius: 999px; background: var(--gcs-surface); border: 1px solid var(--gcs-border); }
.gc-badge--active, .gc-badge--trialing { color: var(--gcs-success); border-color: var(--gcs-success); }
.gc-badge--past_due, .gc-badge--unpaid { color: var(--gcs-danger); border-color: var(--gcs-danger); }

/* Baustein dazubuchen */
.gc-upsell { display: grid; gap: .75rem; padding: 1.5rem; border-radius: var(--gcs-radius); background: var(--gcs-surface); border: 1px solid var(--gcs-border); color: var(--gcs-text); }
.gc-upsell h4, .gc-upsell p { margin: 0; }
.gc-upsell__price { font-size: 1.4em; font-weight: 700; }
.gc-upsell [hidden] { display: none !important; }
.gc-upsell .gc-btn { justify-self: start; }

/* Modal */
.gc-modal { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 1rem; background: var(--gc-backdrop, rgba(11, 12, 14, .6)); }
.gc-modal__box { position: relative; width: min(520px, 100%); max-height: 90vh; overflow: auto; display: grid; gap: 1rem; padding: 1.75rem; border-radius: var(--gcs-radius); background: var(--gcs-surface); color: var(--gcs-text); border: 1px solid var(--gcs-border); }
.gc-modal__box h3 { margin: 0; }
.gc-modal__step { display: grid; gap: 1rem; }
.gc-modal__close { position: absolute; top: .5rem; right: .75rem; background: none; border: 0; color: inherit; font-size: 1.6rem; cursor: pointer; }

/* Kündigungsformular */
.gc-cancel-form { display: grid; gap: 1.5rem; max-width: 48rem; color: var(--gcs-text); }
.gc-cancel-form h3 { margin: 0; }
.gc-cancel-form__result { color: var(--gcs-danger); }
.gc-cancel-form [hidden], .gc-modal [hidden] { display: none !important; }
