/* ═══════════════════════════════════════════════════════════════════════════
   aerth-kadence-reset.css  (v0.8.17)
   Global A'Erth UI reset — kills the recurring Kadence specificity fight.

   Scoped to body.lz-surface (added by the plugin on all plugin-owned pages:
   Lorearium CPT singles, /aerth/* descendant pages).

   Loaded AFTER lorearium-aerth-pages (dependency) and therefore after all
   Kadence stylesheets, so the !important rules here always win.

   Component CSS may still use !important to override the baseline values set
   here (e.g. vis-pill overrides border-radius to 0); that is fine and
   intentional — the point is that components no longer need to fight Kadence
   themselves.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base button / [type=button] reset ───────────────────────────────────── */
body.lz-surface button,
body.lz-surface [type="button"],
body.lz-surface [type="submit"],
body.lz-surface [type="reset"] {
    background: transparent !important;
    color: var(--lz-text, #e4e4e7) !important;
    border: 1px solid var(--lz-border-2, #3a3d42) !important;
    border-radius: 4px !important;
    padding: 0.3rem 0.75rem !important;
    font-size: 0.82rem !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    outline: none !important;
}
body.lz-surface button:hover,
body.lz-surface [type="button"]:hover,
body.lz-surface [type="submit"]:hover {
    color: var(--lz-text, #e4e4e7) !important;
    border-color: var(--lz-muted, #8b8d92) !important;
    background: rgba(255,255,255,0.04) !important;
    filter: none !important;
}
body.lz-surface button:disabled,
body.lz-surface [type="button"]:disabled,
body.lz-surface [type="submit"]:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* ── .lz-btn-primary — gold fill ─────────────────────────────────────────── */
body.lz-surface .lz-btn-primary {
    background: var(--lz-gold, #dda15e) !important;
    border-color: var(--lz-gold, #dda15e) !important;
    color: #0e0e0f !important;
    font-weight: 600 !important;
}
body.lz-surface .lz-btn-primary:hover {
    background: var(--lz-gold, #dda15e) !important;
    border-color: var(--lz-gold, #dda15e) !important;
    color: #0e0e0f !important;
    filter: brightness(1.12) !important;
}
body.lz-surface .lz-btn-primary:disabled {
    background: var(--lz-gold, #dda15e) !important;
    opacity: 0.45 !important;
}

/* ── .lz-btn-ghost — transparent + subtle border ─────────────────────────── */
body.lz-surface .lz-btn-ghost {
    background: transparent !important;
    border-color: var(--lz-border-2, #3a3d42) !important;
    color: var(--lz-muted, #8b8d92) !important;
}
body.lz-surface .lz-btn-ghost:hover {
    border-color: var(--lz-gold, #dda15e) !important;
    color: var(--lz-gold, #dda15e) !important;
    background: transparent !important;
    filter: none !important;
}

/* ── .lz-btn-danger — red outline ────────────────────────────────────────── */
body.lz-surface .lz-btn-danger {
    background: transparent !important;
    border-color: var(--lz-danger, #f87171) !important;
    color: var(--lz-danger, #f87171) !important;
}
body.lz-surface .lz-btn-danger:hover {
    background: rgba(248,113,113,0.1) !important;
    filter: none !important;
}

/* ── Input / textarea / select reset ─────────────────────────────────────── */
body.lz-surface input[type="text"],
body.lz-surface input[type="number"],
body.lz-surface input[type="email"],
body.lz-surface input[type="date"],
body.lz-surface input[type="password"],
body.lz-surface input[type="search"],
body.lz-surface textarea,
body.lz-surface select {
    background: var(--lz-panel-2, #1e2023) !important;
    color: var(--lz-text, #e4e4e7) !important;
    border: 1px solid var(--lz-border, #2d2f33) !important;
    border-radius: 4px !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.85rem !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
}
body.lz-surface input[type="text"]:focus,
body.lz-surface input[type="number"]:focus,
body.lz-surface input[type="email"]:focus,
body.lz-surface input[type="date"]:focus,
body.lz-surface input[type="password"]:focus,
body.lz-surface input[type="search"]:focus,
body.lz-surface textarea:focus,
body.lz-surface select:focus {
    border-color: var(--lz-gold, #dda15e) !important;
    box-shadow: 0 0 0 2px rgba(221,161,94,0.15) !important;
    outline: none !important;
}
body.lz-surface input::placeholder,
body.lz-surface textarea::placeholder {
    color: var(--lz-muted, #8b8d92) !important;
    opacity: 1 !important;
}
/* Checkboxes and radios keep auto width */
body.lz-surface input[type="checkbox"],
body.lz-surface input[type="radio"] {
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    outline: none !important;
    accent-color: var(--lz-gold, #dda15e);
}

/* ── .vis-pair / .vis-pill (segmented filter pills) ──────────────────────── */
body.lz-surface .vis-pair {
    display: inline-flex !important;
    border: 1px solid var(--lz-border-2, #3a3d42) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: none !important;
    box-shadow: none !important;
}
body.lz-surface .vis-pill {
    background: transparent !important;
    color: var(--lz-text-muted, #8b8d92) !important;
    border: 0 !important;
    padding: 0.2rem 0.6rem !important;
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    font-family: inherit !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    white-space: nowrap !important;
}
body.lz-surface .vis-pill + .vis-pill {
    border-left: 1px solid var(--lz-border-2, #3a3d42) !important;
}
body.lz-surface .vis-pill.selected {
    background: var(--lz-gold-dim, rgba(201,167,105,0.18)) !important;
    color: var(--lz-gold, #dda15e) !important;
}
body.lz-surface .vis-pill:hover:not(.selected) {
    color: var(--lz-text, #e4e4e7) !important;
    background: transparent !important;
}

/* ── Segmented disp-pill / disp-pair (encounter disposition) ─────────────── */
body.lz-surface .disp-pair {
    display: inline-flex !important;
    border: 1px solid var(--lz-border-2, #3a3d42) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: none !important;
    box-shadow: none !important;
}
body.lz-surface .disp-pill {
    background: transparent !important;
    color: var(--lz-muted, #8b8d92) !important;
    border: 0 !important;
    padding: 0.15rem 0.45rem !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}
body.lz-surface .disp-pill + .disp-pill {
    border-left: 1px solid var(--lz-border-2, #3a3d42) !important;
}
body.lz-surface .disp-pill.selected.ally    { background: rgba(74,222,128,0.15) !important; color: #4ade80 !important; }
body.lz-surface .disp-pill.selected.neutral { background: rgba(251,191,36,0.12) !important; color: #fbbf24 !important; }
body.lz-surface .disp-pill.selected.hostile { background: rgba(248,113,113,0.15) !important; color: var(--lz-danger, #f87171) !important; }

/* ── dialog / modal reset ────────────────────────────────────────────────── */
body.lz-surface dialog {
    background: var(--lz-panel-1, #16181c) !important;
    border: 1px solid var(--lz-border, #2d2f33) !important;
    border-radius: 8px !important;
    color: var(--lz-text, #e4e4e7) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.7) !important;
    padding: 1.5rem !important;
    max-width: min(90vw, 520px) !important;
}
body.lz-surface dialog::backdrop {
    background: rgba(0,0,0,0.6) !important;
}
/* Inside dialogs, primary button still gets the gold treatment */
body.lz-surface dialog .lz-btn-primary {
    background: var(--lz-gold, #dda15e) !important;
    border-color: var(--lz-gold, #dda15e) !important;
    color: #0e0e0f !important;
    font-weight: 600 !important;
}
body.lz-surface dialog .lz-btn-primary:hover {
    filter: brightness(1.12) !important;
}
/* Inside dialogs, inputs also get the dark theme */
body.lz-surface dialog input[type="text"],
body.lz-surface dialog input[type="number"],
body.lz-surface dialog input[type="email"],
body.lz-surface dialog textarea,
body.lz-surface dialog select {
    background: var(--lz-bg, #0e0e0f) !important;
    color: var(--lz-text, #e4e4e7) !important;
    border: 1px solid var(--lz-border, #2d2f33) !important;
}

/* ── WP block content buttons — exempt from plugin reset ─────────────────── */
/* Any .wp-block-button__link inside a plugin surface should revert to its
   own styling, NOT get the dark plugin button treatment. */
body.lz-surface .wp-block-button__link,
body.lz-surface .wp-block-button__link:hover {
    all: revert !important;
}

/* ── Responsive: wider tap targets on mobile ─────────────────────────────── */
@media (max-width: 640px) {
    body.lz-surface .vis-pill {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.72rem !important;
    }
}