/**
 * cawood-platform.css
 * -------------------
 * Styles for the Cawood members area.
 * Uses Cawood design tokens where available.
 *
 * Sections:
 *   1. Design tokens
 *   2. Auth forms  (.cawood-auth-form)
 *   3. Logout button (.cawood-logout-btn)
 *   4. Spinner
 */


/* ── 1. Design tokens ────────────────────────────────────────────────────── */

:root {
  --cp-navy:        #1C2541;
  --cp-green:       #0CF57E;
  --cp-coral:       #FF6F61;
  --cp-error:       #D9534F;
  --cp-text:        #3A506B;
  --cp-border:      #CBD5E0;
  --cp-radius:      6px;
  --cp-font-body:   'Open Sans', sans-serif;
  --cp-font-head:   'Raleway', sans-serif;
}


/* ── 2. Auth forms ───────────────────────────────────────────────────────── */

.cawood-auth-form {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  width:          100%;
}

.cawood-auth-form__field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

/* Two fields side by side (first + last name) */
.cawood-auth-form__field--row {
  flex-direction: row;
  gap:            12px;
}

.cawood-auth-form__field--row > .cawood-auth-form__field {
  flex: 1;
}

.cawood-auth-form label {
  font-family:  var(--cp-font-body);
  font-size:    0.85rem;
  font-weight:  600;
  color:        var(--cp-text);
}

.cawood-auth-form input {
  padding:       10px 14px;
  border:        1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  font-family:   var(--cp-font-body);
  font-size:     0.95rem;
  color:         var(--cp-navy);
  width:         100%;
  box-sizing:    border-box;
  transition:    border-color 0.15s ease;
}

.cawood-auth-form input:focus {
  outline:      none;
  border-color: var(--cp-green);
  box-shadow:   0 0 0 3px rgba(12, 245, 126, 0.15);
}

/* Submit button */
.cawood-auth-form__submit {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         12px 24px;
  background:      var(--cp-green);
  color:           var(--cp-navy);
  border:          none;
  border-radius:   var(--cp-radius);
  font-family:     var(--cp-font-head);
  font-weight:     700;
  font-size:       1rem;
  cursor:          pointer;
  transition:      opacity 0.15s ease, transform 0.1s ease;
  width:           100%;
}

.cawood-auth-form__submit:hover:not(:disabled) {
  opacity:   0.9;
  transform: translateY(-1px);
}

.cawood-auth-form__submit:disabled {
  opacity: 0.6;
  cursor:  not-allowed;
}

/* Error message */
.cawood-auth-form__error {
  padding:       12px 16px;
  background:    rgba(217, 83, 79, 0.08);
  border:        1px solid var(--cp-error);
  border-radius: var(--cp-radius);
  color:         var(--cp-error);
  font-family:   var(--cp-font-body);
  font-size:     0.9rem;
}


/* ── 3. Logout button ────────────────────────────────────────────────────── */

.cawood-logout-btn {
  display:       inline-block;
  padding:       10px 20px;
  background:    transparent;
  color:         var(--cp-navy);
  border:        2px solid var(--cp-navy);
  border-radius: var(--cp-radius);
  font-family:   var(--cp-font-head);
  font-weight:   700;
  font-size:     0.9rem;
  cursor:        pointer;
  transition:    background 0.15s ease, color 0.15s ease;
}

.cawood-logout-btn:hover:not(:disabled) {
  background: var(--cp-navy);
  color:      #fff;
}

.cawood-logout-btn:disabled {
  opacity: 0.6;
  cursor:  not-allowed;
}


/* ── 4. DMA download button ─────────────────────────────────────────────── */

.cawood-dma-download {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cawood-dma-download__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         12px 24px;
  background:      var(--cp-green);
  color:           var(--cp-navy);
  border:          none;
  border-radius:   var(--cp-radius);
  font-family:     var(--cp-font-head);
  font-weight:     700;
  font-size:       1rem;
  cursor:          pointer;
  transition:      opacity 0.15s ease, transform 0.1s ease;
}

.cawood-dma-download__btn:hover {
  opacity:   0.9;
  transform: translateY(-1px);
}

.cawood-dma-download__fallback {
  font-family: var(--cp-font-body);
  font-size:   0.9rem;
  color:       var(--cp-text);
}

.cawood-dma-download__fallback a {
  color:           var(--cp-navy);
  font-weight:     600;
  text-decoration: underline;
}


/* ── 5. Spinner ──────────────────────────────────────────────────────────── */

.cawood-auth-form__spinner {
  display:       inline-block;
  width:         18px;
  height:        18px;
  border:        2px solid rgba(28, 37, 65, 0.3);
  border-top:    2px solid var(--cp-navy);
  border-radius: 50%;
  animation:     cawood-spin 0.7s linear infinite;
}

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