/* Wolf Affiliates — front end.
   Inherits the theme's design tokens where they exist, falls back otherwise. */

.waff-form,
.waff-dash { --waff-blue: var(--blue, #1B4FD8); --waff-navy: var(--navy, #0B2A5B);
  --waff-line: var(--line, #D5E0EE); --waff-surface: var(--surface, #F4F8FD);
  --waff-slate: var(--slate, #5B6B82); --waff-ok: var(--assay, #0B7355); --waff-bad: var(--flag, #C63A28); }

.waff-hp { position: absolute !important; left: -9999px !important; }

.waff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.waff-field { margin-bottom: 16px; }
.waff-field label { display: block; font-weight: 600; font-size: .85rem; color: var(--waff-navy); margin-bottom: 6px; }
.waff-field input, .waff-field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--waff-line);
  border-radius: 8px; font: inherit; font-size: .92rem; background: #fff;
}
.waff-field input:focus, .waff-field textarea:focus {
  border-color: var(--waff-blue); outline: none; box-shadow: 0 0 0 3px rgba(27, 79, 216, .14);
}
.waff-note { font-size: .8rem; color: var(--waff-slate); margin-top: 6px; }

.waff-check {
  display: flex; gap: 12px; align-items: flex-start; background: var(--waff-surface);
  border: 1px solid var(--waff-line); border-radius: 10px; padding: 14px; margin-bottom: 16px; cursor: pointer;
}
.waff-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--waff-blue); }
.waff-check span { font-size: .88rem; color: var(--waff-slate); }

.waff-submit { border: 0; }

.waff-notice {
  border: 1px solid var(--waff-line); border-left: 4px solid var(--waff-blue);
  background: var(--waff-surface); border-radius: 10px; padding: 16px 18px;
  font-size: .92rem; margin-bottom: 20px;
}
.waff-notice--ok { border-left-color: var(--waff-ok); }
.waff-notice--bad { border-left-color: var(--waff-bad); }

.waff-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.waff-card {
  background: #fff; border: 1px solid var(--waff-line); border-radius: 14px;
  padding: 20px; display: flex; flex-direction: column; gap: 4px;
}
.waff-card__label {
  font-family: var(--mono, monospace); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--waff-slate);
}
.waff-card__big {
  font-family: var(--display, sans-serif); font-size: 1.7rem; font-weight: 800;
  color: var(--waff-navy); line-height: 1.1; letter-spacing: -.02em; word-break: break-word;
}
.waff-card__sub { font-size: .82rem; color: var(--waff-slate); }

.waff-linkbox {
  background: var(--waff-surface); border: 1px solid var(--waff-line);
  border-radius: 14px; padding: 20px; margin-bottom: 30px;
}
.waff-linkbox label { display: block; font-weight: 600; font-size: .85rem; color: var(--waff-navy); margin-bottom: 6px; }
.waff-linkbox input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--waff-line); border-radius: 8px;
  font-family: var(--mono, monospace); font-size: .88rem; background: #fff;
}

.waff-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--waff-line); border-radius: 14px; overflow: hidden; }
.waff-table th, .waff-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--waff-line); font-size: .9rem; }
.waff-table th {
  background: var(--waff-surface); font-family: var(--mono, monospace); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--waff-slate);
}
.waff-table tr:last-child td { border-bottom: 0; }

.waff-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem;
  font-weight: 600; text-transform: capitalize; background: var(--waff-surface); color: var(--waff-slate);
}
.waff-pill--approved { background: rgba(11, 115, 85, .12); color: var(--waff-ok); }
.waff-pill--paid { background: rgba(27, 79, 216, .12); color: var(--waff-blue); }
.waff-pill--void { background: rgba(198, 58, 40, .1); color: var(--waff-bad); }

@media (max-width: 900px) { .waff-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .waff-cards { grid-template-columns: 1fr; }
  .waff-row { grid-template-columns: 1fr; }
  .waff-table { display: block; overflow-x: auto; }
}

/* ==========================================================================
   v1.1 fixes
   ========================================================================== */

/* The theme constrains ordinary page content to .prose { max-width:74ch },
   which squeezed the dashboard grid into a narrow column. Break out of it. */
.waff-dash,
.waff-form { max-width: none !important; width: 100%; }
.prose .waff-dash,
.prose .waff-form,
.entry-content .waff-dash,
.entry-content .waff-form { max-width: none !important; }
.waff-dash * { box-sizing: border-box; }

/* dashboard header */
.waff-dash__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
  padding-bottom: 20px; border-bottom: 1px solid var(--waff-line);
}
.waff-dash__head h2 { margin: 0; font-size: 1.9rem; line-height: 1.1; color: var(--waff-navy); }
.waff-eyebrow {
  font-family: var(--mono, monospace); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--waff-blue); margin: 0 0 6px; font-weight: 600;
}
.waff-signout {
  font-size: .88rem; color: var(--waff-slate); text-decoration: underline; white-space: nowrap;
}
.waff-signout:hover { color: var(--waff-bad); }

/* copy affordances */
.waff-copy { cursor: pointer; position: relative; }
.waff-copy:hover { color: var(--waff-blue); }
.waff-linkrow { display: flex; gap: 10px; align-items: stretch; }
.waff-linkrow input { flex: 1; min-width: 0; }
.waff-copy-btn { flex: 0 0 auto; white-space: nowrap; }
.waff-copied::after {
  content: attr(data-copied); position: absolute; left: 0; top: -26px;
  background: var(--waff-navy); color: #fff; font-family: var(--body, sans-serif);
  font-size: .7rem; font-weight: 500; padding: 4px 9px; border-radius: 6px; white-space: nowrap;
}

/* sign-in card — wp_login_form ships completely unstyled */
.waff-signin {
  max-width: 440px !important; margin: 0 auto; background: #fff;
  border: 1px solid var(--waff-line); border-radius: 16px; padding: 32px;
}
.waff-signin h3 { margin: 0 0 6px; color: var(--waff-navy); }
.waff-signin #loginform p { margin: 0 0 14px; }
.waff-signin #loginform label {
  display: block; font-weight: 600; font-size: .85rem;
  color: var(--waff-navy); margin-bottom: 6px;
}
.waff-signin #loginform input[type=text],
.waff-signin #loginform input[type=password] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--waff-line);
  border-radius: 10px; font: inherit; font-size: .95rem; background: #fff;
}
.waff-signin #loginform input[type=text]:focus,
.waff-signin #loginform input[type=password]:focus {
  border-color: var(--waff-blue); outline: none; box-shadow: 0 0 0 3px rgba(27,79,216,.14);
}
.waff-signin .login-remember label {
  display: flex; gap: 9px; align-items: center; font-weight: 400;
  font-size: .88rem; color: var(--waff-slate);
}
.waff-signin .login-remember input { width: auto; accent-color: var(--waff-blue); }
.waff-signin #wp-submit {
  width: 100%; padding: 14px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--waff-blue); color: #fff; font-weight: 700; font-size: .95rem;
  font-family: var(--display, inherit); transition: background .2s ease, transform .2s ease;
}
.waff-signin #wp-submit:hover { background: var(--blue-hot, #3B74F0); transform: translateY(-1px); }

@media (max-width: 600px) {
  .waff-dash__head { align-items: flex-start; }
  .waff-linkrow { flex-direction: column; }
}

/* ---------- dashboard tabs + account form ---------- */
.waff-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--waff-line);
  margin-bottom: 26px; flex-wrap: wrap;
}
.waff-tab {
  border: 0; background: none; cursor: pointer; padding: 12px 18px;
  font-family: var(--display, inherit); font-weight: 700; font-size: .92rem;
  color: var(--waff-slate); border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color .2s ease, border-color .2s ease;
}
.waff-tab:hover { color: var(--waff-blue); }
.waff-tab.is-on { color: var(--waff-navy); border-bottom-color: var(--waff-blue); }
.waff-panel[hidden] { display: none; }

.waff-account { max-width: 720px !important; }
.waff-account h3 { color: var(--waff-navy); margin: 0 0 4px; }
.waff-account input[disabled] { background: var(--waff-surface); color: var(--waff-slate); cursor: not-allowed; }
.waff-confirm {
  background: var(--waff-surface); border: 1px solid var(--waff-line);
  border-radius: 12px; padding: 18px; margin-top: 4px;
}
.waff-confirm label { margin-bottom: 6px; }

/* ---------- sign-in error ---------- */
.waff-signin .waff-notice { margin-bottom: 18px; font-size: .9rem; }
.waff-signin .waff-notice--bad {
  background: rgba(198, 58, 40, .06);
  border-left-color: var(--waff-bad);
}
.waff-signin .waff-notice a { color: var(--waff-blue); text-decoration: underline; }
.waff-signin .waff-notice strong { color: var(--waff-navy); display: block; margin-bottom: 2px; }

/* ---------- bonus progress ---------- */
.waff-bonus {
  background: var(--waff-surface); border: 1px solid var(--waff-line);
  border-radius: 14px; padding: 20px; margin-bottom: 30px;
}
.waff-bonus__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.waff-bonus__head strong {
  font-family: var(--display, sans-serif); font-size: 1.6rem; font-weight: 800;
  color: var(--waff-navy); line-height: 1; letter-spacing: -.02em; display: block;
}
.waff-bonus__head .waff-note { margin-top: 4px; }
.waff-bonus__target {
  font-size: .9rem; color: var(--waff-navy); font-weight: 600; text-align: right;
}
.waff-bar {
  height: 10px; background: #fff; border: 1px solid var(--waff-line);
  border-radius: 999px; overflow: hidden;
}
.waff-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--waff-blue), var(--blue-hot, #3B74F0));
  border-radius: 999px; transition: width .6s cubic-bezier(.22,1,.36,1);
}
@media (max-width: 600px) {
  .waff-bonus__target { text-align: left; }
}