/* =========================================
   Exocad Gate – Theme-safe styling (FINAL)
   Colors:
   - Primary: #fad420
   - Text:    #232323
   ========================================= */

.exocad-gate {
  --exocad-primary: #fad420;
  --exocad-text: #232323;
  --exocad-border: rgba(35, 35, 35, 0.12);
  --exocad-muted: rgba(35, 35, 35, 0.70);
  --exocad-bg: #ffffff;

  margin: 16px 0 18px;
  border: 1px solid var(--exocad-border);
  border-radius: 14px;
  background: var(--exocad-bg);
  overflow: hidden;
  color: var(--exocad-text);
  font-family: inherit;
}

.exocad-unit { font-weight: 600; }
.exocad-min-info { margin-top: 6px; font-size: 0.95em; opacity: 0.85; }

/* --- hard reset for theme button styles INSIDE gate only --- */
.exocad-gate button,
.exocad-gate .exocad-step__head {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 0;
  margin: 0;
  line-height: normal;
}

/* Structure */
.exocad-step + .exocad-step {
  border-top: 1px solid var(--exocad-border);
}

/* Header */
.exocad-step__head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;
  cursor: pointer;
  text-align: left;

  background: #fff !important; /* force remove theme black */
}

.exocad-step__title {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  color: var(--exocad-text);
}

/* Right-side indicator */
.exocad-step__head::after {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--exocad-border);
  background: #fff;
  display: grid;
  place-items: center;

  content: "▾";
  color: var(--exocad-text);
  font-size: 16px;
  opacity: 0.85;
}

/* Open state = HARD yellow */
.exocad-step.is-open .exocad-step__head {
  background: #fad420 !important;
  color: #232323;
  box-shadow: inset 0 -1px 0 rgba(35, 35, 35, 0.18);
}

.exocad-step.is-open .exocad-step__title {
  color: #232323;
}

.exocad-step.is-open .exocad-step__head::after {
  content: "▴";
  border-color: rgba(35, 35, 35, 0.22);
  opacity: 1;
}

/* Done state (shows checkmark) */
.exocad-step.is-done .exocad-step__head {
  background: #fff !important;
}

.exocad-step.is-done .exocad-step__head::after {
  content: "✓";
  background: #fad420;
  border-color: rgba(35, 35, 35, 0.20);
  color: #232323;
  opacity: 1;
  font-weight: 900;
}

/* Locked state (no “Gesperrt”, just visually disabled) */
.exocad-step.is-locked {
  opacity: 0.55;
}

.exocad-step.is-locked .exocad-step__head {
  cursor: default;
}

/* Body */
.exocad-step__body {
  padding: 12px 16px 16px;
  background: #fff;
}

/* Inputs */
.exocad-label {
  display: block;
  font-weight: 800;
  margin: 0 0 8px;
  color: #232323;
}

.exocad-gate input[type="email"] {
  width: 100%;
  max-width: 560px;
  padding: 12px 12px;
  border: 1px solid rgba(35, 35, 35, 0.18);
  border-radius: 12px;
  box-sizing: border-box;
  color: #232323;
  background: #fff;
  outline: none;
}

.exocad-gate input[type="email"]:focus {
  border-color: rgba(35, 35, 35, 0.35);
  box-shadow: 0 0 0 4px rgba(250, 212, 32, 0.35);
}

.exocad-help {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: rgba(35, 35, 35, 0.70);
}

/* Radios / Checkbox */
.exocad-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.exocad-radio,
.exocad-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  color: #232323;
  font-weight: 650;
}

.exocad-radio input,
.exocad-checkbox input {
  margin-top: 3px;
}

/* Confirmation list */
.exocad-confirm-list {
  margin: 10px 0 0 18px;
  color: rgba(35, 35, 35, 0.88);
}

.exocad-confirm-list li {
  margin: 6px 0;
}

/* Required marker */
.required { color: #cc0000; }

/* Screen reader fallback */
.screen-reader-text {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ===== Step 3: confirmation delay UI (5s) ===== */

.exocad-confirm-head {
  margin: 0 0 10px;
  color: #232323;
  font-size: 16px;
  font-weight: 800;
}

.exocad-confirm-ack {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(35,35,35,.12);
}

.exocad-delay {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(35,35,35,.12);
  background: #fff;
}

.exocad-delay__bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(35,35,35,.12);
  overflow: hidden;
}

.exocad-delay__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #fad420;
  transition: width 0.12s linear;
}

.exocad-delay__text {
  margin-top: 10px;
  color: rgba(35,35,35,.85);
  font-weight: 700;
}

/* Checkbox UNDER the list */
.exocad-checkbox {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(35,35,35,.12);
  background: #fff;
}

/* Disabled checkbox looks disabled, but not ugly */
.exocad-checkbox--disabled {
  opacity: .55;
}

.exocad-checkbox--disabled input {
  cursor: not-allowed;
}

.exocad-checkbox span {
  color: #232323;
  font-weight: 800;
}

/* Mobile niceness */
@media (max-width: 640px) {
  .exocad-step__head {
    padding: 13px 14px;
  }
  .exocad-step__body {
    padding: 12px 14px 14px;
  }
  .exocad-step__title {
    font-size: 14.5px;
  }
}

/* =========================================
   Force qty + add-to-cart button stacked
   (only when Exocad gate is present)
   ========================================= */

form.cart:has(#exocad-gate) {
  display: block;
}

form.cart:has(#exocad-gate) .quantity,
form.cart:has(#exocad-gate) .single_add_to_cart_button {
  float: none !important;
  width: 100% !important;
}

form.cart:has(#exocad-gate) .quantity {
  margin: 0 0 12px !important;
}

form.cart:has(#exocad-gate) .single_add_to_cart_button {
  display: block !important;
  margin: 0 !important;
}

/* If your theme wraps them in a flex row, kill it */
form.cart:has(#exocad-gate) .woocommerce-variation-add-to-cart,
form.cart:has(#exocad-gate) .variations_button {
  display: block !important;
}

/* =========================================
   Multistep header: Abstand vom linken Rand
   ========================================= */

.exocad-step__title {
  padding-left: 14px;   /* Abstand vom linken Rand */
}

/* Mobile etwas weniger */
@media (max-width: 640px) {
  .exocad-step__title {
    padding-left: 10px;
  }
}