/*
 * Webdev Zimbabwe × Antler interaction layer
 * Load after Bootstrap and Antler theme styles.
 * Add classes alongside WHMCS-required classes; do not remove WHMCS hooks.
 */

:root {
  --wd-orange-500: #f47c20;
  --wd-orange-600: #df6812;
  --wd-orange-700: #c9570a;
  --wd-orange-050: #fff6ee;
  --wd-charcoal-950: #111416;
  --wd-charcoal-900: #161a1d;
  --wd-charcoal-800: #23272b;
  --wd-slate-600: #4c555d;
  --wd-white: #fff;
  --wd-warm-050: #fafaf8;
  --wd-grey-050: #f6f7f8;
  --wd-grey-100: #eef1f3;
  --wd-grey-200: #d9dee3;
  --wd-grey-300: #c3cad1;
  --wd-grey-500: #69737d;
  --wd-grey-700: #3f4850;
  /* Dropdown menu text — softer than charcoal at the lighter weight. */
  --wd-menu-ink: #313131;
  --wd-success-600: #168a55;
  --wd-success-050: #effaf4;
  --wd-success-800: #0f6b42;
  --wd-warning-600: #d98912;
  --wd-warning-050: #fff8e8;
  --wd-warning-800: #8a5606;
  --wd-error-600: #c93434;
  --wd-error-050: #fff1f1;
  --wd-info-600: #2770b8;
  --wd-info-050: #eff7ff;
  /* Poppins first: Antler forces it on html/body/headings via
     body[data-font="poppins"] with !important, so anything else splits the page
     across two faces. Loaded by webdev-fonts.css — Antler names Poppins but
     never ships an @font-face for it. */
  --wd-font-sans: Poppins, Inter, "Open Sans", system-ui, -apple-system, sans-serif;
  --wd-radius-sm: 8px;
  --wd-radius-md: 12px;
  --wd-radius-lg: 18px;
  --wd-radius-pill: 999px;
  --wd-container: 1320px;
  --wd-card-radius: 15px;
  --wd-card-shadow: 0 5px 15px 0 rgb(110 110 110 / 10%);
  --wd-shadow-xs: 0 1px 2px rgb(17 20 22 / 7%);
  --wd-shadow-sm: 0 5px 16px rgb(17 20 22 / 9%);
  --wd-shadow-md: 0 14px 34px rgb(17 20 22 / 13%);
  --wd-focus: 0 0 0 2px #fff, 0 0 0 5px rgb(244 124 32 / 58%);
  --wd-duration: 200ms;
  --wd-ease: cubic-bezier(.2, .8, .2, 1);
}

.webdev-theme {
  color: var(--wd-charcoal-900);
  background: var(--wd-warm-050);
  font-family: var(--wd-font-sans);
  line-height: 1.6;
}

.wd-btn {
  --wd-btn-bg: transparent;
  --wd-btn-border: transparent;
  --wd-btn-color: var(--wd-charcoal-900);
  --wd-btn-hover-bg: var(--wd-grey-050);
  --wd-btn-hover-border: var(--wd-grey-300);
  --wd-btn-hover-color: var(--wd-charcoal-950);
  align-items: center;
  background: var(--wd-btn-bg);
  border: 1px solid var(--wd-btn-border);
  /* Pills, as on the previous Webdev site (.btn was border-radius: 50px). */
  border-radius: var(--wd-radius-pill);
  box-shadow: none;
  color: var(--wd-btn-color);
  cursor: pointer;
  display: inline-flex;
  font: 600 0.94rem/1 var(--wd-font-sans);
  gap: 0.5rem;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--wd-duration) var(--wd-ease),
    border-color var(--wd-duration) var(--wd-ease),
    box-shadow var(--wd-duration) var(--wd-ease),
    color var(--wd-duration) var(--wd-ease),
    transform var(--wd-duration) var(--wd-ease);
}

.wd-btn--sm {
  min-height: 36px;
  padding: 0.55rem 1rem;
}

.wd-btn--lg {
  min-height: 52px;
  padding: 0.9rem 1.5rem;
}

.wd-btn--block {
  width: 100%;
}

.wd-btn--primary {
  --wd-btn-bg: var(--wd-orange-500);
  --wd-btn-border: var(--wd-orange-500);
  --wd-btn-color: var(--wd-white);
  --wd-btn-hover-bg: var(--wd-orange-600);
  --wd-btn-hover-border: var(--wd-orange-600);
  --wd-btn-hover-color: var(--wd-white);
  box-shadow: var(--wd-shadow-xs);
}

.wd-btn--secondary {
  --wd-btn-bg: var(--wd-white);
  --wd-btn-border: var(--wd-orange-500);
  --wd-btn-color: var(--wd-charcoal-900);
  --wd-btn-hover-bg: var(--wd-orange-050);
  --wd-btn-hover-border: var(--wd-orange-600);
  --wd-btn-hover-color: var(--wd-charcoal-950);
}

.wd-btn--dark {
  --wd-btn-bg: var(--wd-charcoal-900);
  --wd-btn-border: var(--wd-charcoal-900);
  --wd-btn-color: var(--wd-white);
  --wd-btn-hover-bg: var(--wd-charcoal-800);
  --wd-btn-hover-border: var(--wd-orange-500);
  --wd-btn-hover-color: var(--wd-white);
}

.wd-btn--ghost {
  --wd-btn-bg: transparent;
  --wd-btn-border: var(--wd-grey-200);
  --wd-btn-color: var(--wd-charcoal-900);
}

.wd-btn--danger {
  --wd-btn-bg: var(--wd-error-600);
  --wd-btn-border: var(--wd-error-600);
  --wd-btn-color: var(--wd-white);
  --wd-btn-hover-bg: #a92222;
  --wd-btn-hover-border: #a92222;
  --wd-btn-hover-color: var(--wd-white);
}

@media (hover: hover) and (pointer: fine) {
  .wd-btn:not(:disabled, [aria-disabled="true"]):hover {
    background: var(--wd-btn-hover-bg);
    border-color: var(--wd-btn-hover-border);
    box-shadow: var(--wd-shadow-sm);
    color: var(--wd-btn-hover-color);
    transform: translateY(-2px);
  }

  .wd-link:hover {
    color: var(--wd-orange-700);
    text-decoration-thickness: 2px;
  }
}

.wd-btn:not(:disabled, [aria-disabled="true"]):active {
  background: var(--wd-orange-700);
  border-color: var(--wd-orange-700);
  box-shadow: var(--wd-shadow-xs);
  color: var(--wd-white);
  transform: translateY(0);
}

.wd-btn:focus {
  outline: 0;
}

.wd-btn:focus-visible,
.wd-link:focus-visible,
.wd-card--interactive:focus-visible,
.wd-field__control:focus-visible {
  box-shadow: var(--wd-focus);
  outline: 0;
}

.wd-btn:disabled,
.wd-btn[aria-disabled="true"] {
  background: var(--wd-grey-100);
  border-color: var(--wd-grey-100);
  box-shadow: none;
  color: var(--wd-grey-500);
  cursor: not-allowed;
  transform: none;
}

.wd-btn[aria-busy="true"] {
  cursor: wait;
  pointer-events: none;
}

.wd-btn__spinner {
  animation: wd-spin 0.8s linear infinite;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  height: 1rem;
  width: 1rem;
}

.wd-link {
  color: var(--wd-charcoal-900);
  font-weight: 600;
  text-decoration-color: var(--wd-orange-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--wd-duration) var(--wd-ease);
}

.wd-field {
  display: grid;
  gap: 0.45rem;
}

.wd-field__label {
  color: var(--wd-charcoal-900);
  font-size: 0.875rem;
  font-weight: 600;
}

.wd-field__control {
  background: var(--wd-white);
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-radius-sm);
  color: var(--wd-charcoal-900);
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  transition:
    border-color var(--wd-duration) var(--wd-ease),
    box-shadow var(--wd-duration) var(--wd-ease);
  width: 100%;
}

.wd-field__control:hover {
  border-color: var(--wd-grey-300);
}

.wd-field__control:focus {
  border-color: var(--wd-charcoal-900);
  outline: 0;
}

.wd-field__help {
  color: var(--wd-grey-500);
  font-size: 0.82rem;
  margin: 0;
}

.wd-field--error .wd-field__control,
.wd-field__control[aria-invalid="true"] {
  border-color: var(--wd-error-600);
  box-shadow: 0 0 0 3px var(--wd-error-050);
}

.wd-field--error .wd-field__help {
  color: var(--wd-error-600);
}

.wd-field--success .wd-field__control {
  border-color: var(--wd-success-600);
  box-shadow: 0 0 0 3px var(--wd-success-050);
}

.wd-domain-search {
  align-items: end;
  background: var(--wd-white);
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-radius-md);
  box-shadow: var(--wd-shadow-sm);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) 140px auto;
  padding: 1rem;
}

.wd-card {
  background: var(--wd-white);
  /* Transparent border, not none: keeps the box the same size so the
     interactive hover state can colour it without shifting layout. */
  border: 1px solid transparent;
  border-radius: var(--wd-card-radius);
  box-shadow: var(--wd-card-shadow);
  color: var(--wd-charcoal-900);
  padding: clamp(1.25rem, 2vw, 2rem);
}

.wd-card--interactive {
  position: relative;
  text-decoration: none;
  transition:
    border-color var(--wd-duration) var(--wd-ease),
    box-shadow var(--wd-duration) var(--wd-ease),
    transform var(--wd-duration) var(--wd-ease);
}

.wd-card__arrow {
  display: inline-block;
  transition: transform var(--wd-duration) var(--wd-ease);
}

.wd-card--enterprise {
  background: var(--wd-slate-600);
  border-color: var(--wd-slate-600);
  color: var(--wd-white);
}

@media (hover: hover) and (pointer: fine) {
  .wd-card--interactive:hover {
    border-color: var(--wd-orange-500);
    box-shadow: var(--wd-shadow-md);
    transform: translateY(-4px);
  }

  .wd-card--interactive:hover .wd-card__arrow {
    transform: translateX(4px);
  }

  .wd-card--enterprise:hover {
    box-shadow:
      0 0 0 1px var(--wd-orange-500),
      0 16px 38px rgb(244 124 32 / 14%);
  }
}

.wd-card--interactive:focus-within {
  border-color: var(--wd-orange-500);
}

.wd-alert {
  align-items: start;
  background: var(--wd-grey-050);
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-radius-sm);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto 1fr;
  padding: 1rem;
}

.wd-alert--success {
  background: var(--wd-success-050);
  border-color: var(--wd-success-600);
}

.wd-alert--warning {
  background: var(--wd-warning-050);
  border-color: var(--wd-warning-600);
}

.wd-alert--error {
  background: var(--wd-error-050);
  border-color: var(--wd-error-600);
}

.wd-alert--info {
  background: var(--wd-info-050);
  border-color: var(--wd-info-600);
}

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

@media (max-width: 767.98px) {
  .wd-domain-search {
    grid-template-columns: 1fr;
  }

  .wd-btn--mobile-block {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .wd-btn,
  .wd-card--interactive,
  .wd-card__arrow {
    transform: none !important;
  }
}