/* mod_specialdeals -- registration form.
 *
 * Every colour is a CSS custom property with a default here, so the module
 * options can override any of them by setting the same properties on the
 * wrapper element. Nothing in this file has to be edited to restyle the form,
 * and a site that prefers to do its own styling can switch the stylesheet off
 * entirely in the module options.
 *
 * Scoped to .sdn-module throughout, so it cannot leak into the site template.
 */

.sdn-module {
  /* --- colours, all overridable from the module options --- */
  --sdn-accent:        #c8102e;   /* buttons, required marks, focus ring */
  --sdn-accent-text:   #ffffff;   /* text on the button */
  --sdn-text:          inherit;   /* body text */
  --sdn-label:         inherit;   /* field labels */
  --sdn-muted:         #6b7280;   /* hints, optional markers */
  --sdn-input-bg:      #ffffff;
  --sdn-input-text:    inherit;
  --sdn-border:        #cbd5e1;   /* input and fieldset borders */
  --sdn-focus:         #2563eb;

  --sdn-success-bg:    #f0fdf4;
  --sdn-success-text:  #14532d;
  --sdn-success-line:  #15803d;

  --sdn-error-bg:      #fef2f2;
  --sdn-error-text:    #7f1d1d;
  --sdn-error-line:    #b91c1c;

  --sdn-radius:        4px;

  max-width: 640px;
  color: var(--sdn-text);
}

.sdn-module .sdn-heading { margin: 0 0 .4rem; font-size: 1.25rem; line-height: 1.3; }
.sdn-module .sdn-intro   { margin: 0 0 1rem; }
.sdn-module .sdn-muted   { color: var(--sdn-muted); font-size: .875rem; font-weight: 400; }
.sdn-module .sdn-req     { color: var(--sdn-accent); }

.sdn-module .sdn-form { display: block; }

.sdn-module .sdn-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.sdn-module .sdn-row > .sdn-field { flex: 1 1 200px; min-width: 0; }

.sdn-module .sdn-field { margin-bottom: 1rem; }

.sdn-module .sdn-field > label {
  display: block;
  margin-bottom: .3rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--sdn-label);
}

.sdn-module .sdn-field input[type="text"],
.sdn-module .sdn-field input[type="email"] {
  display: block;
  width: 100%;
  padding: .55rem .7rem;
  font: inherit;
  font-size: 1rem;
  color: var(--sdn-input-text);
  background: var(--sdn-input-bg);
  border: 1px solid var(--sdn-border);
  border-radius: var(--sdn-radius);
}

.sdn-module .sdn-field input:focus-visible {
  outline: 2px solid var(--sdn-focus);
  outline-offset: 1px;
  border-color: var(--sdn-focus);
}

.sdn-module .sdn-fieldset {
  margin: 0 0 1rem;
  padding: .75rem 1rem 1rem;
  border: 1px solid var(--sdn-border);
  border-radius: calc(var(--sdn-radius) + 2px);
}

.sdn-module .sdn-fieldset legend {
  padding: 0 .35rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--sdn-label);
  width: auto;
  float: none;          /* some templates float legends */
  margin-bottom: 0;
}

.sdn-module .sdn-check {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .3rem 0;
  font-size: .9375rem;
  cursor: pointer;
}
.sdn-module .sdn-check input { margin-top: .25rem; flex: 0 0 auto; accent-color: var(--sdn-accent); }

.sdn-module .sdn-consent { margin: .25rem 0 .75rem; }
.sdn-module .sdn-privacy { margin: 0 0 1rem; }

.sdn-module .sdn-captcha__row {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}
.sdn-module .sdn-captcha__row img {
  border: 1px solid var(--sdn-border);
  border-radius: var(--sdn-radius);
  display: block;
  max-width: 100%;
  height: auto;
}
.sdn-module .sdn-captcha__row input { max-width: 10rem; }
.sdn-module .sdn-captcha__question {
  font-weight: 600;
  padding: .5rem .75rem;
  background: var(--sdn-success-bg);
  border-radius: var(--sdn-radius);
}

.sdn-module .sdn-submit {
  display: inline-block;
  padding: .7rem 1.6rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sdn-accent-text);
  background: var(--sdn-accent);
  border: 1px solid var(--sdn-accent);
  border-radius: var(--sdn-radius);
  cursor: pointer;
}
.sdn-module .sdn-submit:hover { filter: brightness(.92); }
.sdn-module .sdn-submit[disabled] { opacity: .6; cursor: default; }

.sdn-module .sdn-panel {
  padding: .9rem 1.1rem;
  border-radius: calc(var(--sdn-radius) + 2px);
  margin-bottom: 1rem;
  border-left: 4px solid;
}
.sdn-module .sdn-panel__title { margin: 0 0 .4rem; font-weight: 700; }
.sdn-module .sdn-panel p:last-child { margin-bottom: 0; }
.sdn-module .sdn-panel ul { margin: 0; padding-left: 1.2rem; }

.sdn-module .sdn-panel--success {
  background: var(--sdn-success-bg);
  border-color: var(--sdn-success-line);
  color: var(--sdn-success-text);
}
.sdn-module .sdn-panel--error {
  background: var(--sdn-error-bg);
  border-color: var(--sdn-error-line);
  color: var(--sdn-error-text);
}

/* Honeypots: out of sight and out of the tab order, but still real inputs
   that a form-filling bot will happily complete. */
.sdn-module .sdn-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Only applied when the module options leave the colours untouched: a site that
   sets its own values gets exactly those, in both schemes. */
@media (prefers-color-scheme: dark) {
  .sdn-module:not([style*="--sdn-"]) {
    --sdn-input-bg: #111827;
    --sdn-border:   #374151;
    --sdn-success-bg: #052e16;
    --sdn-success-text: #bbf7d0;
    --sdn-error-bg: #450a0a;
    --sdn-error-text: #fecaca;
  }
}