/* ==========================================================================
   Affiliate Pages — Styles  v26.06.22-43.1

   Scopes
   .lx-aff-reg-*    Registration page (hero support, form card, state cards)
   .lx-aff-dash-*   Account/dashboard page shell (dark gradient, nav, card)
   .lx-aff-state-*  Shared status/state cards used on both pages
   .lx-aff-swp-*    Wrappers around SliceWP shortcode output
   .lx-aff-google-btn  Google sign-in button (shared)
   .lx-aff-divider     "or" divider (shared)
   .lx-aff-final-cta   Final CTA section (registration page)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: Google sign-in button
   Matches button-primary pattern from design.md and header implementation.
   -------------------------------------------------------------------------- */

.lx-aff-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: none;
    border-radius: 0.625rem;
    background: var(--t-sec);
    color: var(--t-sec-fg);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 150ms;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}

.lx-aff-google-btn:hover {
    color: var(--color-teal-300);
}

.lx-aff-google-btn img {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* --------------------------------------------------------------------------
   Shared: "or" divider
   -------------------------------------------------------------------------- */

.lx-aff-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--t-mu-fg);
    font-size: 0.75rem;
}

.lx-aff-divider::before,
.lx-aff-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--t-ln);
}

/* --------------------------------------------------------------------------
   Registration page: form section wrapper
   -------------------------------------------------------------------------- */

.lx-aff-reg-section {
    background: var(--t-mu);
    border-top: 1px solid var(--t-ln);
    border-bottom: 1px solid var(--t-ln);
}

.lx-aff-reg-wrap {
    max-width: 680px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Registration: form card (compact centered card)
   -------------------------------------------------------------------------- */

.lx-aff-reg-card {
    background: var(--t-ly);
    border: 1px solid var(--t-ln);
    border-radius: 0.875rem;
    padding: 1.75rem;
}

.lx-aff-reg-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--t-fg);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.lx-aff-reg-card__sub {
    font-size: 0.875rem;
    color: var(--t-mu-fg);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Shared: state/status cards
   -------------------------------------------------------------------------- */

.lx-aff-state-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--t-ly);
    border: 1px solid var(--t-ln);
    border-radius: 0.875rem;
    padding: 1.5rem;
    border-left-width: 4px;
}

/* Color-coded left border per status */
.lx-aff-state-card--active    { border-left-color: var(--color-green-500); }
.lx-aff-state-card--pending   { border-left-color: var(--color-amber-400); }
.lx-aff-state-card--inactive  { border-left-color: var(--color-slate-400); }
.lx-aff-state-card--rejected  { border-left-color: var(--t-err); }
.lx-aff-state-card--info      { border-left-color: var(--color-blue-400); }

.lx-aff-state-card__icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.lx-aff-state-card--active   .lx-aff-state-card__icon { color: var(--color-green-500); }
.lx-aff-state-card--pending  .lx-aff-state-card__icon { color: var(--color-amber-500); }
.lx-aff-state-card--inactive .lx-aff-state-card__icon { color: var(--color-slate-400); }
.lx-aff-state-card--rejected .lx-aff-state-card__icon { color: var(--t-err); }
.lx-aff-state-card--info     .lx-aff-state-card__icon { color: var(--color-blue-500); }

.lx-aff-state-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.lx-aff-state-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--t-ly-fg);
    margin: 0;
    line-height: 1.35;
}

.lx-aff-state-card__desc {
    font-size: 0.875rem;
    color: var(--t-mu-fg);
    margin: 0;
    line-height: 1.55;
}

.lx-aff-state-card__btn {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--t-pri);
    text-decoration: none;
    margin-top: 0.25rem;
    transition: opacity 150ms;
}

.lx-aff-state-card__btn:hover {
    opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Registration: final CTA section (dark gradient block)
   -------------------------------------------------------------------------- */

.lx-aff-final-cta {
    background-color: var(--color-slate-950);
    background-image:
        radial-gradient(
            ellipse 135% 135% at 0% 0%,
            color-mix(in srgb, var(--color-teal-400) 72%, transparent) 0%,
            color-mix(in srgb, var(--color-teal-400) 42%, transparent) 24%,
            color-mix(in srgb, var(--color-teal-400) 16%, transparent) 48%,
            transparent 74%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--color-white) 6%, transparent) 0%,
            transparent 34%
        );
    border-radius: 0.875rem;
    padding: 3rem 2rem;
    text-align: center;
}

.lx-aff-final-cta__badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-teal-300) 80%, transparent);
    margin-bottom: 0.875rem;
}

.lx-aff-final-cta__title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

@media (min-width: 640px) {
    .lx-aff-final-cta__title { font-size: 2.125rem; }
}

.lx-aff-final-cta__desc {
    font-size: 0.9375rem;
    color: color-mix(in srgb, var(--color-white) 60%, transparent);
    max-width: 32rem;
    margin: 0 auto 1.75rem;
    line-height: 1.6;
}

.lx-aff-final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
}

.lx-aff-final-cta__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.375rem;
    border-radius: 0.625rem;
    background: var(--t-pri);
    color: var(--t-pri-fg);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms;
}

.lx-aff-final-cta__btn:hover {
    background: var(--t-pri-h);
}

.lx-aff-final-cta__link {
    font-size: 0.875rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--color-white) 70%, transparent);
    text-decoration: none;
    transition: color 150ms;
}

.lx-aff-final-cta__link:hover {
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Dashboard page: full-page dark gradient body
   -------------------------------------------------------------------------- */

.lx-aff-dash-body {
    min-height: 100vh;
    background-color: var(--color-slate-950);
    background-image:
        radial-gradient(
            ellipse 135% 135% at 0% 0%,
            color-mix(in srgb, var(--color-teal-400) 72%, transparent) 0%,
            color-mix(in srgb, var(--color-teal-400) 42%, transparent) 24%,
            color-mix(in srgb, var(--color-teal-400) 16%, transparent) 48%,
            transparent 74%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--color-white) 6%, transparent) 0%,
            transparent 34%
        );
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Dashboard page: minimal nav
   -------------------------------------------------------------------------- */

.lx-aff-dash-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    flex-shrink: 0;
}

.lx-aff-dash-nav__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.lx-aff-dash-nav__logo-img {
    height: 1.375rem;
    width: auto;
    display: block;
}

.lx-aff-dash-nav__logo-sep {
    color: color-mix(in srgb, var(--color-white) 30%, transparent);
    font-size: 0.875rem;
    font-weight: 300;
}

.lx-aff-dash-nav__logo-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--color-white) 65%, transparent);
    letter-spacing: 0.01em;
}

.lx-aff-dash-nav__end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Language switcher */
.lx-aff-lang-switch {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.lx-aff-lang-switch__btn {
    font-size: 0.75rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--color-white) 40%, transparent);
    text-decoration: none;
    padding: 0.25rem 0.375rem;
    border-radius: 0.375rem;
    transition: color 150ms, background 150ms;
    letter-spacing: 0.03em;
}

.lx-aff-lang-switch__btn:hover {
    color: var(--color-white);
    background: color-mix(in srgb, var(--color-white) 8%, transparent);
}

.lx-aff-lang-switch__btn--active {
    color: color-mix(in srgb, var(--color-white) 80%, transparent);
    font-weight: 600;
}

.lx-aff-lang-switch__sep {
    color: color-mix(in srgb, var(--color-white) 20%, transparent);
    font-size: 0.75rem;
    user-select: none;
}

.lx-aff-dash-nav__link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--color-white) 55%, transparent);
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    transition: color 150ms, background 150ms;
}

.lx-aff-dash-nav__link:hover {
    color: var(--color-white);
    background: color-mix(in srgb, var(--color-white) 8%, transparent);
}

/* --------------------------------------------------------------------------
   Dashboard page: centered content area
   -------------------------------------------------------------------------- */

.lx-aff-dash-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 4rem;
}

/* --------------------------------------------------------------------------
   Dashboard page: white card
   -------------------------------------------------------------------------- */

.lx-aff-dash-card {
    background: var(--t-ly);
    border: 1px solid var(--t-ln);
    border-radius: 0.875rem;
    width: 100%;
    max-width: 1100px;
    padding: 2rem;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--color-black) 20%, transparent);
}

.lx-aff-dash-card--narrow {
    max-width: 480px;
}

@media (min-width: 640px) {
    .lx-aff-dash-card { padding: 2.5rem; }
}

/* Dashboard card header */
.lx-aff-dash-card__hdr {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--t-ln);
}

.lx-aff-dash-card__hdr--compact {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.lx-aff-dash-card__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t-pri);
    margin: 0 0 0.375rem;
}

.lx-aff-dash-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--t-ly-fg);
    margin: 0;
    line-height: 1.25;
}

/* Footer note inside card (for login panel) */
.lx-aff-dash-card__foot-note {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: var(--t-mu-fg);
    text-align: center;
}

.lx-aff-dash-card__foot-note a {
    color: var(--t-pri);
    text-decoration: none;
}

.lx-aff-dash-card__foot-note a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   SliceWP form overrides — scoped to .lx-aff-swp-form
   -------------------------------------------------------------------------- */

.lx-aff-swp-form .slicewp-field-wrapper {
    margin-bottom: 0.875rem;
}

.lx-aff-swp-form .slicewp-field-label-wrapper {
    margin-bottom: 0.3125rem;
}

.lx-aff-swp-form .slicewp-field-label-wrapper label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--t-fg);
    line-height: 1.4;
}

.lx-aff-swp-form .slicewp-field-required-marker {
    color: var(--t-err);
    margin-left: 0.125rem;
}

/* Promotional methods textarea — tall enough to show ~3 lines of hint text */
.lx-aff-swp-form .slicewp-field-inner textarea {
    min-height: 5.5rem;
}

/* Inputs, selects, textareas */
.lx-aff-swp-form .slicewp-field-inner input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.lx-aff-swp-form .slicewp-field-inner select,
.lx-aff-swp-form .slicewp-field-inner textarea {
    display: block;
    width: 100%;
    background: var(--t-bg);
    color: var(--t-fg);
    border: 1px solid var(--t-ln);
    border-radius: 0.625rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: border-color 150ms, box-shadow 150ms;
    box-sizing: border-box;
}

.lx-aff-swp-form .slicewp-field-inner input::placeholder,
.lx-aff-swp-form .slicewp-field-inner textarea::placeholder {
    color: var(--t-mu-fg);
}

.lx-aff-swp-form .slicewp-field-inner input:focus:not([type="checkbox"]):not([type="radio"]),
.lx-aff-swp-form .slicewp-field-inner select:focus,
.lx-aff-swp-form .slicewp-field-inner textarea:focus {
    outline: none;
    border-color: var(--t-pri);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-pri) 15%, transparent);
}

/* Password field toggle */
.lx-aff-swp-form .slicewp-field-input-password {
    position: relative;
    display: flex;
    align-items: center;
}

.lx-aff-swp-form .slicewp-field-input-password input {
    padding-right: 2.5rem !important;
}

.lx-aff-swp-form .slicewp-show-hide-password {
    position: absolute;
    right: 0.625rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--t-mu-fg);
    display: flex;
    align-items: center;
    line-height: 1;
    transition: color 150ms;
}

.lx-aff-swp-form .slicewp-show-hide-password:hover {
    color: var(--t-fg);
}

/* Submit button */
.lx-aff-swp-form .slicewp-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--t-sec);
    color: var(--t-sec-fg);
    border: none;
    border-radius: 0.625rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 150ms;
    margin-top: 0.5rem;
}

.lx-aff-swp-form .slicewp-button-primary:hover {
    color: var(--color-teal-300);
}

/* Error / notice messages */
.lx-aff-swp-form .slicewp-field-notice,
.lx-aff-swp-form .slicewp-notices p {
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    color: var(--t-err);
}

/* Login-specific: tighten up default SliceWP login form spacing */
.lx-aff-swp-form--login .slicewp-form-login {
    margin: 0;
}

/* Registration form: 2-column grid layout.
   SliceWP only adds class "slicewp-field-wrapper" to every wrapper with no field-name suffix.
   Strategy: default ALL form children to full-width, then opt exactly 6 fields into 2-col pairs.
   This way reCAPTCHA (async/defer, renders after first user interaction), terms & conditions,
   nonce fields, notices, and any future unknown elements stay safe and full-width automatically. */
.lx-aff-swp-form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.875rem;
}

.lx-aff-swp-form form > * {
    grid-column: 1 / -1;
}

/* Opt these 6 fields into 2-col pairs:
   first_name | last_name
   user_email | country
   password   | password_confirm */
.lx-aff-swp-form .slicewp-field-wrapper:has(#slicewp-first-name),
.lx-aff-swp-form .slicewp-field-wrapper:has(#slicewp-last-name),
.lx-aff-swp-form .slicewp-field-wrapper:has(#slicewp-user-email),
.lx-aff-swp-form .slicewp-field-wrapper[data-type="country"],
.lx-aff-swp-form .slicewp-field-wrapper:has(#slicewp-password),
.lx-aff-swp-form .slicewp-field-wrapper:has(#slicewp-password-confirm) {
    grid-column: auto;
}

/* Stack to single column on small screens */
@media (max-width: 480px) {
    .lx-aff-swp-form form {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   SliceWP dashboard overrides — scoped to .lx-aff-swp-dash
   -------------------------------------------------------------------------- */

/* Content section panels (Your Affiliate Link, Generate Affiliate Link, etc.) */
.lx-aff-swp-dash .slicewp-section {
    background: var(--t-ly);
    border: 1px solid var(--t-ln);
    border-radius: 0.875rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.lx-aff-swp-dash .slicewp-section:last-child {
    margin-bottom: 0;
}

/* Section headings */
.lx-aff-swp-dash .slicewp-section h3,
.lx-aff-swp-dash .slicewp-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--t-ly-fg);
    margin: 0 0 0.25rem;
    line-height: 1.35;
}

/* Section description text */
.lx-aff-swp-dash .slicewp-section > p,
.lx-aff-swp-dash .slicewp-section-description {
    font-size: 0.8125rem;
    color: var(--t-mu-fg);
    margin: 0 0 0.875rem;
    line-height: 1.55;
}

/* Statistics cards (Visits / Commissions / Earnings at top of Dashboard tab)
   SliceWP uses .slicewp-statistics-cards/.slicewp-statistics-card but may differ by version */
.lx-aff-swp-dash .slicewp-statistics-cards,
.lx-aff-swp-dash .slicewp-statistics-wrap,
.lx-aff-swp-dash .slicewp-stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.lx-aff-swp-dash .slicewp-statistics-card,
.lx-aff-swp-dash .slicewp-statistics-item,
.lx-aff-swp-dash .slicewp-stat-box {
    background: var(--t-sf);
    border: 1px solid var(--t-ln);
    border-radius: 0.875rem;
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Stat card label */
.lx-aff-swp-dash .slicewp-statistics-card h3,
.lx-aff-swp-dash .slicewp-statistics-card .slicewp-statistics-card-title,
.lx-aff-swp-dash .slicewp-statistics-item h3,
.lx-aff-swp-dash .slicewp-stat-box h3 {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--t-sf-fg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* Stat card number */
.lx-aff-swp-dash .slicewp-statistics-card .slicewp-statistics-card-count,
.lx-aff-swp-dash .slicewp-statistics-card .slicewp-statistics-card-value,
.lx-aff-swp-dash .slicewp-statistics-card p,
.lx-aff-swp-dash .slicewp-statistics-item p {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--t-ly-fg);
    line-height: 1.2;
    margin: 0;
}

/* Stat card "View all" link */
.lx-aff-swp-dash .slicewp-statistics-card a,
.lx-aff-swp-dash .slicewp-statistics-item a,
.lx-aff-swp-dash .slicewp-stat-box a {
    font-size: 0.75rem;
    color: var(--t-pri);
    text-decoration: none;
    margin-top: auto;
}

.lx-aff-swp-dash .slicewp-statistics-card a:hover,
.lx-aff-swp-dash .slicewp-statistics-item a:hover,
.lx-aff-swp-dash .slicewp-stat-box a:hover {
    text-decoration: underline;
}

/* Comparison badge ("-" indicator beside stat value) */
.lx-aff-swp-dash .slicewp-statistics-card .slicewp-comparison,
.lx-aff-swp-dash .slicewp-comparison-badge,
.lx-aff-swp-dash [class*="slicewp-comparison"] {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--t-mu-fg);
    background: var(--t-mu);
    border: 1px solid var(--t-ln);
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
}

/* Date range / period filter (Past 30 days / All time picker) */
.lx-aff-swp-dash .slicewp-date-filter-wrapper,
.lx-aff-swp-dash .slicewp-period-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.lx-aff-swp-dash .slicewp-date-filter-wrapper a,
.lx-aff-swp-dash .slicewp-period-filter a,
.lx-aff-swp-dash .slicewp-date-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--t-fg);
    background: var(--t-ly);
    border: 1px solid var(--t-ln);
    border-radius: 0.625rem;
    text-decoration: none;
    transition: border-color 150ms, background 150ms;
}

.lx-aff-swp-dash .slicewp-date-filter-wrapper a:hover,
.lx-aff-swp-dash .slicewp-period-filter a:hover,
.lx-aff-swp-dash .slicewp-date-filter:hover {
    border-color: var(--t-pri);
    background: var(--t-mu);
}

/* Date range text input (May 24, 2026 - Jun 22, 2026) */
.lx-aff-swp-dash .slicewp-date-range-input,
.lx-aff-swp-dash input[type="text"].slicewp-datepicker {
    width: auto;
    display: inline-flex;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    background: var(--t-ly);
    border: 1px solid var(--t-ln);
    border-radius: 0.625rem;
    color: var(--t-fg);
}

/* All inputs / selects / textareas inside the dashboard (broad, catches settings + generate link etc.) */
.lx-aff-swp-dash input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.lx-aff-swp-dash select,
.lx-aff-swp-dash textarea {
    display: block;
    width: 100%;
    background: var(--t-bg);
    color: var(--t-fg);
    border: 1px solid var(--t-ln);
    border-radius: 0.625rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color 150ms, box-shadow 150ms;
}

.lx-aff-swp-dash input:focus:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.lx-aff-swp-dash select:focus,
.lx-aff-swp-dash textarea:focus {
    outline: none;
    border-color: var(--t-pri);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-pri) 15%, transparent);
}

.lx-aff-swp-dash input::placeholder,
.lx-aff-swp-dash textarea::placeholder {
    color: var(--t-mu-fg);
}

/* Field wrapper spacing inside dashboard */
.lx-aff-swp-dash .slicewp-field-wrapper {
    margin-bottom: 0.875rem;
}

/* Field labels inside dashboard */
.lx-aff-swp-dash .slicewp-field-label-wrapper label,
.lx-aff-swp-dash .slicewp-field-wrapper > label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--t-ly-fg);
    margin-bottom: 0.3125rem;
    line-height: 1.4;
}

.lx-aff-swp-dash .slicewp-field-required-marker {
    color: var(--t-err);
    margin-left: 0.125rem;
}

/* Submit / Save button inside dashboard forms */
.lx-aff-swp-dash input[type="submit"],
.lx-aff-swp-dash .slicewp-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0.5rem 1.375rem;
    background: var(--t-sec);
    color: var(--t-sec-fg);
    border: none;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 150ms;
    margin-top: 0.5rem;
}

.lx-aff-swp-dash input[type="submit"]:hover,
.lx-aff-swp-dash .slicewp-button-primary:hover {
    color: var(--color-teal-300);
}

/* Inline dashboard links (Copy, View QR Code, Generate — not nav tabs, not buttons) */
.lx-aff-swp-dash a:not([class*="slicewp-nav-tab"]):not([class*="slicewp-button"]):not([class*="button"]) {
    color: var(--t-pri);
    text-decoration: none;
    font-size: 0.8125rem;
}

.lx-aff-swp-dash a:not([class*="slicewp-nav-tab"]):not([class*="slicewp-button"]):not([class*="button"]):hover {
    text-decoration: underline;
}

/* Tabs — Pill / Segmented style per design.md
   Container: --t-mu bg. Inactive: transparent, --t-mu-fg. Active: --t-ly, --t-ln border, --t-fg. */
.lx-aff-swp-dash .slicewp-nav-tab-wrapper {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: var(--t-mu);
    border-radius: 0.625rem;
    padding: 0.25rem;
    margin-bottom: 1.25rem;
    border: none;
}

.lx-aff-swp-dash .slicewp-nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--t-mu-fg);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    transition: color 150ms, background 150ms;
    line-height: 1.4;
}

.lx-aff-swp-dash .slicewp-nav-tab:hover {
    color: var(--t-fg);
    background: color-mix(in srgb, var(--t-ly) 60%, transparent);
    border-color: transparent;
}

.lx-aff-swp-dash .slicewp-nav-tab-active,
.lx-aff-swp-dash .slicewp-nav-tab.slicewp-nav-tab-active {
    background: var(--t-ly);
    border-color: var(--t-ln);
    color: var(--t-fg);
    font-weight: 600;
}

/* Tables */
.lx-aff-swp-dash table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.lx-aff-swp-dash table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--t-mu-fg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--t-ln);
}

.lx-aff-swp-dash table td {
    padding: 0.625rem 0.75rem;
    color: var(--t-fg);
    border-bottom: 1px solid var(--t-sf);
    vertical-align: middle;
}

.lx-aff-swp-dash table tr:last-child td {
    border-bottom: none;
}

/* Affiliate link copy field */
.lx-aff-swp-dash .slicewp-affiliate-url-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lx-aff-swp-dash .slicewp-affiliate-url-wrapper input[type="text"] {
    flex: 1;
    min-width: 0;
    background: var(--t-mu);
    color: var(--t-fg);
    border: 1px solid var(--t-ln);
    border-radius: 0.625rem;
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    box-sizing: border-box;
}

/* Dashboard buttons */
.lx-aff-swp-dash .slicewp-button,
.lx-aff-swp-dash .button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    background: var(--t-sec);
    color: var(--t-sec-fg);
    border: none;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: color 150ms;
}

.lx-aff-swp-dash .slicewp-button:hover,
.lx-aff-swp-dash .button:hover {
    color: var(--color-teal-300);
}

/* Notice boxes */
.lx-aff-swp-dash .slicewp-notice {
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid var(--t-ln);
    background: var(--t-sf);
    color: var(--t-fg);
    font-size: 0.875rem;
    line-height: 1.55;
    margin-bottom: 1rem;
}

/* Filters row */
.lx-aff-swp-dash .slicewp-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
}

.lx-aff-swp-dash .slicewp-filters-row input,
.lx-aff-swp-dash .slicewp-filters-row select {
    background: var(--t-bg);
    color: var(--t-fg);
    border: 1px solid var(--t-ln);
    border-radius: 0.625rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
}

/* Chart containers */
.lx-aff-swp-dash .slicewp-chart-wrapper {
    background: var(--t-sf);
    border: 1px solid var(--t-ln);
    border-radius: 0.875rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

/* Stats/summary tiles */
.lx-aff-swp-dash .slicewp-stats-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.lx-aff-swp-dash .slicewp-stat-tile {
    background: var(--t-sf);
    border: 1px solid var(--t-ln);
    border-radius: 0.875rem;
    padding: 1rem;
}

.lx-aff-swp-dash .slicewp-stat-tile__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--t-sf-fg);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
}

.lx-aff-swp-dash .slicewp-stat-tile__value {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--t-ly-fg);
}

/* Hashtag tip below dashboard card */
.lx-aff-dash-hashtag-tip {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-white);
    text-align: center;
    line-height: 1.6;
    max-width: 600px;
    padding: 0 1rem;
}

/* Mobile responsiveness for dashboard card */
@media (max-width: 639px) {
    .lx-aff-dash-main {
        padding: 1rem 0.75rem 3rem;
    }

    .lx-aff-dash-card {
        padding: 1.25rem;
        border-radius: 0.75rem;
    }

    .lx-aff-dash-card__title {
        font-size: 1.25rem;
    }

    .lx-aff-swp-dash table {
        font-size: 0.75rem;
    }

    .lx-aff-swp-dash table th,
    .lx-aff-swp-dash table td {
        padding: 0.5rem 0.5rem;
    }
}