/* ═══════════════════════════════════════════════════════════════
   PA Notary Directory — Frontend Styles
   Brand: Red #E31B23 · Gold #FFD700 · White · Dark #1A1A1A
   ═══════════════════════════════════════════════════════════════ */

:root {
    --pand-red:    #E31B23;
    --pand-gold:   #FFD700;
    --pand-dark:   #1A1A1A;
    --pand-white:  #ffffff;
    --pand-gray:   #f5f5f5;
    --pand-border: #e0e0e0;
    --pand-text:   #333333;
    --pand-muted:  #666666;
    --pand-radius: 10px;
    --pand-shadow: 0 2px 12px rgba(0,0,0,.10);
    --pand-shadow-hover: 0 6px 24px rgba(0,0,0,.16);
    --pand-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ─── Wrapper ─────────────────────────────────────────────────── */
.pand-directory { max-width: 1200px; margin: 0 auto; padding: 24px 16px; font-family: var(--pand-font); }

/* ─── Header ──────────────────────────────────────────────────── */
.pand-directory__header { text-align: center; margin-bottom: 32px; }
.pand-directory__title  { font-size: 2rem; font-weight: 800; color: var(--pand-dark); margin: 0 0 12px; }
.pand-directory__title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--pand-red); margin: 10px auto 0; border-radius: 2px; }
.pand-directory__subtitle { font-size: 1rem; color: var(--pand-muted); max-width: 700px; margin: 0 auto; line-height: 1.6; }

/* ─── Search Panel ────────────────────────────────────────────── */
.pand-search-panel { background: var(--pand-dark); border-radius: var(--pand-radius); padding: 24px; margin-bottom: 28px; }
.pand-search-row   { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pand-search-row--checkboxes { margin-top: 12px; align-items: center; }
.pand-search-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.pand-search-field label { color: var(--pand-gold); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #FFD700 !important; }
.pand-search-field input,
.pand-search-field select { padding: 10px 12px; border: 1px solid #444; border-radius: 6px; background: #2a2a2a; color: var(--pand-white); font-size: .95rem; }
.pand-search-field input::placeholder { color: #888; }
.pand-search-row--checkboxes label { color: var(--pand-white); font-size: .9rem; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pand-search-row--checkboxes input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--pand-gold); }

/* ─── Buttons ─────────────────────────────────────────────────── */
.pand-btn { display: inline-block; padding: 10px 20px; border-radius: 6px; font-size: .9rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all .2s; }
.pand-btn--primary  { background: var(--pand-red); color: var(--pand-white); }
.pand-btn--primary:hover { background: #c0151c; color: var(--pand-white); }
.pand-btn--secondary{ background: var(--pand-gold); color: var(--pand-dark); }
.pand-btn--secondary:hover { background: #e6c200; }
.pand-btn--ghost    { background: transparent; color: var(--pand-white); border: 1px solid #555; }
.pand-btn--ghost:hover { border-color: var(--pand-gold); color: var(--pand-gold); }
.pand-btn--search   { background: var(--pand-red); color: var(--pand-white); padding: 10px 28px; margin-left: auto; }
.pand-btn--search:hover { background: #c0151c; }

/* ─── Results count ───────────────────────────────────────────── */
.pand-results-header { margin-bottom: 16px; }
#pand-results-count { font-size: .9rem; color: var(--pand-muted); font-weight: 500; }

/* ─── Grid ────────────────────────────────────────────────────── */
.pand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

/* ─── Cards ───────────────────────────────────────────────────── */
.pand-card { background: var(--pand-white); border: 1px solid var(--pand-border); border-radius: var(--pand-radius); padding: 20px; box-shadow: var(--pand-shadow); transition: box-shadow .2s, transform .2s; position: relative; display: flex; flex-direction: column; gap: 14px; }
.pand-card:hover { box-shadow: var(--pand-shadow-hover); transform: translateY(-2px); }
.pand-card--featured { border-color: var(--pand-gold); border-width: 2px; }
.pand-card--featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--pand-gold); border-radius: var(--pand-radius) var(--pand-radius) 0 0; }

.pand-featured-badge { position: absolute; top: 14px; right: 14px; background: var(--pand-gold); color: var(--pand-dark); font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .05em; }

.pand-card__header { display: flex; gap: 14px; align-items: flex-start; }
.pand-card__avatar  { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pand-border); flex-shrink: 0; }
.pand-card__name    { font-size: 1.05rem; font-weight: 700; color: var(--pand-dark); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.pand-verified-check{ color: var(--pand-red); font-size: .85rem; font-weight: 700; }
.pand-card__location{ font-size: .85rem; color: var(--pand-muted); margin: 0 0 8px; }
.pand-card__badges  { display: flex; flex-wrap: wrap; gap: 6px; }

.pand-badge { font-size: .75rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.pand-badge--mobile { background: #e8f0fe; color: #1a56db; }
.pand-badge--ron    { background: #e3f9e5; color: #1a7f37; }
.pand-badge--bond   { background: #fdf4ff; color: #6b21a8; border: 1px solid #e9d5ff; }

.pand-card__creds { display: flex; flex-wrap: wrap; gap: 6px; }
.pand-cred-chip   { font-size: .75rem; background: #fff5f5; color: var(--pand-red); border: 1px solid #fecaca; border-radius: 4px; padding: 3px 8px; font-weight: 500; }
.pand-cred-chip--more { background: var(--pand-gray); color: var(--pand-muted); border-color: var(--pand-border); }

.pand-card__footer { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.pand-card__footer .pand-btn { font-size: .82rem; padding: 8px 14px; }

/* ─── No results ──────────────────────────────────────────────── */
.pand-no-results { grid-column: 1/-1; text-align: center; padding: 48px 0; color: var(--pand-muted); }
.pand-no-results p { font-size: 1rem; }

/* ─── Pagination ──────────────────────────────────────────────── */
.pand-pagination { text-align: center; margin-top: 32px; }
.pand-load-more  { background: var(--pand-dark); color: var(--pand-white); padding: 12px 36px; border-radius: 6px; }
.pand-load-more:hover { background: var(--pand-red); color: var(--pand-white); }

/* ─── Loader ──────────────────────────────────────────────────── */
.pand-loader  { text-align: center; padding: 24px; }
.pand-spinner { display: inline-block; width: 36px; height: 36px; border: 3px solid var(--pand-border); border-top-color: var(--pand-red); border-radius: 50%; animation: pand-spin .7s linear infinite; }
@keyframes pand-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   Profile Page
   ═══════════════════════════════════════════════════════════════ */
.pand-profile-page { max-width: 900px; margin: 0 auto; padding: 24px 16px; font-family: var(--pand-font); }
.pand-profile-page__breadcrumb { margin-bottom: 20px; }
.pand-profile-page__breadcrumb a { color: var(--pand-red); text-decoration: none; font-size: .9rem; }
.pand-profile-page__breadcrumb a:hover { text-decoration: underline; }

.pand-profile-hero { display: flex; gap: 24px; align-items: flex-start; background: #1A1A1A; background: var(--pand-dark); color: #ffffff; border-radius: var(--pand-radius); padding: 28px; margin-bottom: 28px; flex-wrap: wrap; }
.pand-profile-hero--featured { border: 2px solid var(--pand-gold); }
.pand-profile-hero__avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pand-gold); flex-shrink: 0; }
.pand-profile-hero__info { flex: 1; min-width: 200px; }
/* Hardcode hero text to white — never let theme or variable changes affect readability */
.pand-profile-hero__name { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #ffffff !important; }
.pand-verified-badge { background: var(--pand-gold); color: #1A1A1A; color: var(--pand-dark); font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.pand-profile-hero__tier { color: var(--pand-gold); font-size: .85rem; font-weight: 600; margin: 0 0 6px; }
.pand-profile-hero__location { color: #cccccc !important; font-size: .9rem; margin: 0 0 12px; }
.pand-profile-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pand-tag           { background: rgba(255,255,255,.15); color: #ffffff !important; font-size: .8rem; padding: 4px 10px; border-radius: 4px; }
.pand-tag--bond     { background: rgba(167,139,250,.3); border: 1px solid rgba(167,139,250,.6); color: #ffffff !important; }
.pand-profile-hero__contact { display: flex; flex-direction: column; gap: 8px; min-width: 180px; }

.pand-profile-section { background: var(--pand-white); border: 1px solid var(--pand-border); border-radius: var(--pand-radius); padding: 22px; margin-bottom: 20px; }
.pand-profile-section h2 { font-size: 1.1rem; font-weight: 700; color: var(--pand-dark); margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--pand-red); display: inline-block; }

.pand-cred-list { display: grid; gap: 10px; }
.pand-cred-item { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--pand-text); }
.pand-cred-icon { width: 22px; height: 22px; background: var(--pand-red); color: var(--pand-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.pand-cred-note { font-size: .8rem; color: var(--pand-muted); margin-top: 14px; border-top: 1px solid var(--pand-border); padding-top: 12px; }

.pand-coverage-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pand-coverage-list li { background: var(--pand-gray); color: var(--pand-text); font-size: .85rem; padding: 5px 12px; border-radius: 20px; }

.pand-profile-disclaimer { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 14px 18px; font-size: .82rem; color: #854d0e; margin-top: 20px; }

/* ─── Account form ────────────────────────────────────────────── */
.pand-account-profile { max-width: 680px; }
.pand-profile-live-link { background: #ecfdf5; color: #166534; padding: 10px 14px; border-radius: 6px; font-size: .9rem; margin-bottom: 20px; }
.pand-edit-form h3 { font-size: 1rem; font-weight: 700; margin: 20px 0 12px; color: var(--pand-dark); border-bottom: 2px solid var(--pand-red); padding-bottom: 6px; }
.pand-field-group { margin-bottom: 14px; }
.pand-field-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; color: var(--pand-dark); }
.pand-field-group input,
.pand-field-group textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--pand-border); border-radius: 6px; font-size: .95rem; font-family: var(--pand-font); }
.pand-checkbox-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .9rem; cursor: pointer; }
.pand-form-actions { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.pand-account-notice { background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px; padding: 14px 18px; color: #9a3412; }

/* ─── Shortcode Notices ([pand_edit_profile]) ─────────────────── */
.pand-shortcode-notice { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-size: .9rem; line-height: 1.5; }
.pand-shortcode-notice a { font-weight: 600; }
.pand-notice--info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.pand-notice--info a  { color: #1e40af; }
.pand-notice--success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.pand-notice--success a { color: #166534; }
.pand-notice--warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.pand-notice--pending { background: #f5f3ff; border: 1px solid #c4b5fd; color: #5b21b6; }
.pand-notice--error   { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; }

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pand-directory__title { font-size: 1.4rem; }
    .pand-search-field { min-width: 100%; }
    .pand-profile-hero { flex-direction: column; }
    .pand-profile-hero__contact { flex-direction: row; flex-wrap: wrap; }
    .pand-grid { grid-template-columns: 1fr; }
}

/* ─── Radius search row ───────────────────────────────────────── */
.pand-search-row--radius { align-items: flex-end; border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; margin-top: 4px; }
.pand-search-field--zip   { max-width: 140px; }
.pand-search-field--radius{ max-width: 160px; }
.pand-radius-status { display: flex; align-items: center; padding-bottom: 2px; }
.pand-radius-msg { font-size: .82rem; color: var(--pand-gold); font-style: italic; }

/* ---- Opt-in prompt ---- */
.pand-optin-prompt{background:#f0f4ff;border:1px solid #99aedd;border-radius:8px;padding:28px 32px;max-width:600px;margin:0 auto}
.pand-optin-prompt h2{font-size:1.3em;color:#1a2a6e;margin:12px 0 10px}
.pand-optin-prompt p{color:#334;font-size:.95em;line-height:1.6}
.pand-optin-icon{color:#3355aa}
.pand-optin-list{list-style:none;padding:0;margin:14px 0 20px}
.pand-optin-list li{font-size:.9em;color:#334;padding:4px 0}
.pand-optin-skip{font-size:.82em;color:#888;margin-top:12px}
.pand-btn-primary{background:#CC0000;color:#fff;border:none;padding:12px 28px;border-radius:4px;font-size:.95em;font-weight:600;cursor:pointer}
.pand-btn-primary:hover{background:#aa0000}

/* ---- Status bars ---- */
.pand-status-bar{padding:12px 18px;border-radius:6px;margin-bottom:20px;font-size:.92em;line-height:1.5}
.pand-status-approved{background:#edfaf0;border-left:5px solid #2e8b57;color:#1a4a2e}
.pand-status-pending{background:#fff8e6;border-left:5px solid #e6a817;color:#5a3c00}
.pand-status-rejected{background:#fff0f0;border-left:5px solid #CC0000;color:#7a0000}

/* ---- Completion bar ---- */
.pand-completion-bar{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.pand-completion-label{font-size:.85em;color:#555;white-space:nowrap}
.pand-bar-track{flex:1;height:7px;background:#e8e8e8;border-radius:4px;overflow:hidden}
.pand-bar-fill{height:100%;background:#CC0000;border-radius:4px;transition:width .3s ease}
.pand-bar-fill.complete{background:#2e8b57}
.pand-completion-pct{font-size:.85em;font-weight:600;min-width:36px;text-align:right;color:#333}

/* ---- Form response ---- */
.pand-form-response{padding:10px 16px;border-radius:5px;margin-bottom:14px;font-size:.9em}
.pand-form-response.success{background:#edfaf0;border:1px solid #2e8b57;color:#1a4a2e}
.pand-form-response.error{background:#fff0f0;border:1px solid #CC0000;color:#7a0000}

/* ---- Submit note ---- */
.pand-submit-note{font-size:.82em;color:#888;margin-left:12px}
.pand-submit-note.ready{color:#2e8b57;font-weight:600}
.pand-submit-btn:disabled{opacity:.5;cursor:not-allowed}
.pand-specialties-heading{margin:14px 0 6px;font-weight:600;font-size:.9em;color:#333}