/**
 * WEAM Field Validation — CSS
 *
 * Indicators, popups, banner, and panel styles for the
 * per-attribute field type validation system (Pro feature).
 *
 * @package WEAM
 * @since   2.1.13.73
 */

/* --- Indicator dots (inline next to attribute name) --- */
.weam-fv-indicator { display: inline-block; font-weight: 700; font-size: var(--weam-text-md); cursor: pointer; margin-left: 3px; line-height: 1; vertical-align: middle; width: 16px; height: 16px; text-align: center; border-radius: 50%; transition: background 0.15s; }
.weam-fv-unset { color: var(--weam-amber); background: rgba(245, 158, 11, .12); }
.weam-fv-unset:hover { background: rgba(245, 158, 11, .25); }
.weam-fv-set { color: var(--weam-success); background: rgba(22, 163, 74, .10); font-size: var(--weam-text-sm); }
.weam-fv-set:hover { background: rgba(22, 163, 74, .22); }

/* --- Banner (top of attribute list) --- */
.weam-fv-banner { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 6px; padding: 8px 14px; margin: 0 0 8px; font-size: var(--weam-text-base); color: var(--weam-amber-800); display: flex; align-items: center; gap: 6px; line-height: 1.4; }
.weam-fv-banner a { color: var(--weam-amber-600); text-decoration: underline; }
.weam-fv-banner-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #F59E0B; color: #fff; font-weight: 700; font-size: var(--weam-text-sm); flex-shrink: 0; }
.weam-fv-banner-close { background: none; border: none; color: var(--weam-amber-800); font-size: var(--weam-text-xl); cursor: pointer; padding: 0 0 0 8px; margin-left: auto; line-height: 1; opacity: .6; }
.weam-fv-banner-close:hover { opacity: 1; }

/* --- Per-field popup (type selector) --- */
.weam-fv-popup { position: absolute; z-index: 100100; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); width: 320px; padding: 0; font-size: var(--weam-text-md); }
.weam-fv-popup-arrow { position: absolute; top: -6px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #fff; border: 1px solid #ddd; border-right: 0; border-bottom: 0; transform: rotate(45deg); }
.weam-fv-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; border-bottom: 1px solid #f0f0f0; }
.weam-fv-popup-header strong { font-size: var(--weam-text-md); }
.weam-fv-popup-close { background: none; border: none; font-size: var(--weam-text-2xl); cursor: pointer; color: var(--weam-slate-400); padding: 0; line-height: 1; }
.weam-fv-popup-close:hover { color: var(--weam-slate-700); }
.weam-fv-popup-desc { padding: 8px 14px 4px; color: var(--weam-slate-500); font-size: var(--weam-text-base); line-height: 1.4; }
.weam-fv-popup-scope { margin: 4px 14px 8px; padding: 6px 10px; background: #f8f8f8; border-radius: 4px; color: var(--weam-slate-400); font-size: var(--weam-text-sm); }
.weam-fv-popup-options { padding: 4px 0 8px; }

/* --- Popup radio options --- */
.weam-fv-option { display: flex; align-items: baseline; gap: 6px; padding: 6px 14px; cursor: pointer; transition: background 0.1s; }
.weam-fv-option:hover { background: #f8f8f8; }
.weam-fv-option.weam-fv-selected { background: #FFFBEB; }
.weam-fv-option input[type="radio"] { margin: 0; flex-shrink: 0; }
.weam-fv-option-label { font-weight: 500; white-space: nowrap; }
.weam-fv-option-hint { color: var(--weam-slate-400); font-size: var(--weam-text-sm); margin-left: auto; }
.weam-fv-sep { height: 1px; background: #eee; margin: 4px 14px; }

/* --- Toolbar panel button --- */
.weam-fv-panel-btn { position: relative; font-weight: 700; font-size: var(--weam-text-md); color: var(--weam-amber); min-width: 28px; }
.weam-fv-btn-warn { color: var(--weam-amber); }
.weam-fv-btn-ok { color: var(--weam-success); font-size: var(--weam-text-sm); }

/* --- Overview panel (dropdown from toolbar) --- */
.weam-fv-panel { position: absolute; z-index: 100050; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); width: 300px; font-size: var(--weam-text-md); max-height: 70vh; display: flex; flex-direction: column; }
.weam-fv-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 8px; border-bottom: 1px solid #f0f0f0; }
.weam-fv-panel-close { background: none; border: none; font-size: var(--weam-text-2xl); cursor: pointer; color: var(--weam-slate-400); padding: 0; line-height: 1; }
.weam-fv-panel-close:hover { color: var(--weam-slate-700); }
.weam-fv-panel-body { overflow-y: auto; flex: 1; padding: 4px 0; }
.weam-fv-panel-section { padding: 8px 14px 4px; font-size: var(--weam-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--weam-slate-400); }
.weam-fv-panel-row { display: flex; align-items: center; gap: 8px; padding: 5px 14px; cursor: pointer; transition: background 0.1s; }
.weam-fv-panel-row:hover { background: #f8fafc; }
.weam-fv-panel-indicator { width: 16px; height: 16px; border-radius: 50%; text-align: center; font-weight: 700; font-size: var(--weam-text-sm); line-height: 16px; flex-shrink: 0; }
.weam-fv-panel-row-unset .weam-fv-panel-indicator { color: var(--weam-amber); background: rgba(245, 158, 11, .12); }
.weam-fv-panel-row-set .weam-fv-panel-indicator { color: var(--weam-success); background: rgba(22, 163, 74, .10); }
.weam-fv-panel-name { flex: 1; font-size: var(--weam-text-base); color: var(--weam-slate-700); }
.weam-fv-panel-type { font-size: var(--weam-text-sm); color: var(--weam-slate-400); white-space: nowrap; }
.weam-fv-panel-row-set .weam-fv-panel-type { color: var(--weam-success); }
.weam-fv-panel-footer { padding: 8px 14px; border-top: 1px solid #f0f0f0; font-size: var(--weam-text-sm); color: var(--weam-slate-400); text-align: center; }