/*
 * Athenian Back in Stock Notifications — Frontend
 * Token-aware styling:
 * - Uses Athenian Site Themes vars when available (--ctl-c1, --text-high, --surface-card, --border, --focus-ring)
 * - Falls back to sensible defaults
 */

:root{
  --ath-abins-accent: var(--ath-abins-accent-override, var(--ctl-c1, #2271b1));
  --ath-abins-text:   var(--text-high, #0f172a);
  --ath-abins-muted:  var(--text-mid,  #475569);
  --ath-abins-surface: var(--surface-card, #ffffff);
  --ath-abins-border:  var(--border, rgba(15,23,42,.14));
  --ath-abins-focus:   var(--focus-ring, rgba(34,113,177,.22));
  --ath-abins-shadow:  0 10px 24px rgba(2,6,23,.10);
}

.ath-abins{ margin: 14px 0; }
.ath-abins.is-hidden{ display:none; }

.ath-abins__panel{
  background: var(--ath-abins-surface);
  border: 1px solid var(--ath-abins-border);
  border-radius: 14px;
  box-shadow: var(--ath-abins-shadow);
  padding: 12px 12px 10px;
  color: var(--ath-abins-text);
}

.ath-abins__head{ margin-bottom: 10px; }
.ath-abins__title{ font-weight: 700; letter-spacing: .2px; line-height: 1.25; }
.ath-abins__desc{ margin-top: 4px; color: var(--ath-abins-muted); font-size: 13px; line-height: 1.35; }

.ath-abins__form{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.ath-abins__label{ flex: 1 1 240px; min-width: 210px; }

.ath-abins__input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--ath-abins-border);
  background: transparent;
  color: var(--ath-abins-text);
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ath-abins__input::placeholder{ color: color-mix(in srgb, var(--ath-abins-muted) 80%, transparent); }
.ath-abins__input:focus{
  border-color: color-mix(in srgb, var(--ath-abins-accent) 55%, var(--ath-abins-border));
  box-shadow: 0 0 0 4px var(--ath-abins-focus);
}

.ath-abins__btn{
  appearance:none;
  border: 1px solid color-mix(in srgb, var(--ath-abins-accent) 55%, var(--ath-abins-border));
  background: var(--gradient-btn, linear-gradient(180deg, color-mix(in srgb, var(--ath-abins-accent) 92%, white) 0%, color-mix(in srgb, var(--ath-abins-accent) 80%, black) 120%));
  color: var(--text-on-c1, #0b1220);
  font-weight: 700;
  border-radius: 12px;
  padding: 10px 14px;
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .15s ease;
  display:inline-flex; align-items:center; justify-content:center;
  gap: 10px;
  min-width: 140px;
}
.ath-abins__btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.ath-abins__btn:active{ transform: translateY(0) scale(.99); }
.ath-abins.is-loading .ath-abins__btn{ opacity: .85; cursor: wait; }

.ath-abins__spinner{
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--ath-abins-text) 25%, transparent);
  border-top-color: var(--ath-abins-text);
  display:none;
  animation: ath-abins-spin .8s linear infinite;
}
.ath-abins.is-loading .ath-abins__spinner{ display:inline-block; }

.ath-abins__msg{
  flex: 1 1 100%;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ath-abins-muted);
}
.ath-abins__msg.is-ok{ color: color-mix(in srgb, #16a34a 80%, var(--ath-abins-text)); }
.ath-abins__msg.is-err{ color: color-mix(in srgb, #dc2626 80%, var(--ath-abins-text)); }

.ath-abins__consent{
  flex: 1 1 100%;
  display:flex;
  gap: 8px;
  align-items:flex-start;
  font-size: 12px;
  color: var(--ath-abins-muted);
  user-select:none;
}
.ath-abins__consent input{ margin-top: 2px; }

/* Compact loop style */
.ath-abins.ath-abins--compact .ath-abins__panel{ padding: 10px 10px 8px; box-shadow: none; }
.ath-abins.ath-abins--compact .ath-abins__desc{ display:none; }
.ath-abins.ath-abins--compact .ath-abins__label{ min-width: 180px; }
.ath-abins.ath-abins--compact .ath-abins__btn{ min-width: 120px; padding: 9px 12px; }

@keyframes ath-abins-spin { to { transform: rotate(360deg); } }

/* Fallbacks for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, white)){
  .ath-abins__input::placeholder{ color: rgba(71,85,105,.75); }
  .ath-abins__input:focus{ border-color: var(--ath-abins-accent); box-shadow: 0 0 0 4px var(--ath-abins-focus); }
  .ath-abins__btn{ border-color: var(--ath-abins-accent); }
}

/* Hide variable add-to-cart block when ABINS is active for an out-of-stock variation */
.woocommerce-variation-add-to-cart.ath-abins-atc-hidden{ display:none !important; }