/* ==========================================================================
   DevOpsSchool — Trainer Profile Directory
   Premium, enterprise card directory. Dependency-free; scoped under .tdir.
   ========================================================================== */

.tdir {
    --tdir-bg: #f5f7fb;
    --tdir-card: #ffffff;
    --tdir-border: #e6e9f2;
    --tdir-border-strong: #d6dcec;
    --tdir-text: #111827;
    --tdir-muted: #6b7280;
    --tdir-faint: #9aa3b2;
    --tdir-primary: #2563eb;
    --tdir-primary-dark: #1d4ed8;
    --tdir-primary-soft: #eef2ff;
    --tdir-success: #16a34a;
    --tdir-amber: #f59e0b;
    --tdir-radius: 12px;
    --tdir-radius-sm: 10px;
    --tdir-shadow: 0 1px 2px rgba(16,24,40,.05);
    --tdir-shadow-hover: 0 10px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);

    background: var(--tdir-bg);
    color: var(--tdir-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 0 0 56px;
    min-height: 72vh;
}
.tdir *, .tdir *::before, .tdir *::after { box-sizing: border-box; }
.tdir a { text-decoration: none; }

.tdir-wrap { max-width: 1280px; margin: 0 auto; padding: 0 18px; }

/* ---- Compact hero header (title + description + integrated search) ---- */
.tdir-header {
    background: linear-gradient(120deg, #0f172a 0%, #1e3a8a 60%, #2563eb 100%);
    color: #fff; padding: 30px 0 28px;
    font-family: 'Poppins', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
}
/* Form controls don't inherit the page font by default — opt the search field in. */
.tdir-header .tdir-search input { font-family: inherit; }
.tdir-header h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 6px; letter-spacing: -.02em; }
.tdir-header p { color: #c7d2fe; font-size: .94rem; max-width: 680px; margin: 0; line-height: 1.5; }
.tdir-header .tdir-search { margin-top: 18px; max-width: 760px; }

/* ---- Hero row: search bar + "Become a Trainer" CTA side by side ---- */
.tdir-hero-row { display: flex; align-items: stretch; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.tdir-hero-row .tdir-search { margin-top: 0; flex: 1 1 420px; max-width: 760px; }
.tdir-become-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6ff 100%);
    border: 1px solid rgba(255, 255, 255, .85); border-radius: var(--tdir-radius);
    padding: 0 22px; text-decoration: none; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(2, 8, 40, .18), 0 1px 2px rgba(2, 8, 40, .12);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tdir-become-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--tdir-primary-soft); color: var(--tdir-primary);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.tdir-become-ico i { font-size: .82rem; }
.tdir-become-txt {
    font-family: 'Poppins', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
    color: var(--tdir-primary-dark); font-weight: 600; font-size: .95rem;
    letter-spacing: .01em; line-height: 1;
}
.tdir-become-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #ffffff 0%, #eaf0ff 100%);
    box-shadow: 0 12px 26px rgba(2, 8, 40, .26), 0 2px 6px rgba(2, 8, 40, .16);
}
.tdir-become-btn:hover .tdir-become-ico {
    background: linear-gradient(135deg, var(--tdir-primary) 0%, var(--tdir-primary-dark) 100%);
    color: #fff; transform: scale(1.06);
}
.tdir-become-btn:active { transform: translateY(0); }
@media (max-width: 560px) {
    .tdir-become-btn { flex: 1 1 100%; justify-content: center; padding: 13px 22px; }
}

/* ---- Search bar ---- */
.tdir-search {
    background: var(--tdir-card); border: 1px solid var(--tdir-border);
    border-radius: var(--tdir-radius); box-shadow: var(--tdir-shadow);
    padding: 6px 8px; display: flex; align-items: center; gap: 6px;
}
.tdir-search .ico { color: var(--tdir-faint); padding: 0 4px 0 10px; font-size: 1rem; }
.tdir-search input {
    flex: 1; border: 0; outline: 0; font-size: .98rem; padding: 10px 4px;
    background: transparent; color: var(--tdir-text); min-width: 0;
}
.tdir-search input::placeholder { color: var(--tdir-faint); }
.tdir-search .clear-search {
    border: 0; background: transparent; color: var(--tdir-muted); cursor: pointer;
    font-size: 1.2rem; line-height: 1; padding: 6px 10px; display: none;
}
.tdir-search.has-value .clear-search { display: inline-block; }

/* ---- Skill chips ---- */
.tdir-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 2px; }
.tdir-chips .chips-label { font-size: .8rem; color: var(--tdir-muted); align-self: center; margin-right: 2px; font-weight: 600; }
.tdir-chip {
    border: 1px solid var(--tdir-border); background: #fff; color: #374151;
    border-radius: 999px; padding: 6px 14px; font-size: .83rem; font-weight: 600;
    cursor: pointer; transition: all .12s ease; white-space: nowrap;
}
.tdir-chip:hover { border-color: var(--tdir-primary); color: var(--tdir-primary); }
.tdir-chip.active { background: var(--tdir-primary); border-color: var(--tdir-primary); color: #fff; }

/* ---- Toolbar (sort + per-page + refresh + mobile filter toggle) ---- */
.tdir-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin: 16px 0 14px;
}
.tdir-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tdir-select {
    border: 1px solid var(--tdir-border); background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
    border-radius: var(--tdir-radius-sm); padding: 9px 32px 9px 12px; font-size: .86rem;
    color: var(--tdir-text); cursor: pointer; outline: 0; -webkit-appearance: none; appearance: none;
}
.tdir-select:focus { border-color: var(--tdir-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tdir-iconbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--tdir-border); background: #fff; border-radius: var(--tdir-radius-sm);
    padding: 9px 12px; font-size: .86rem; font-weight: 600; color: #475569; cursor: pointer;
}
.tdir-iconbtn:hover { border-color: var(--tdir-primary); color: var(--tdir-primary); }
.tdir-filter-toggle { display: none; }
.tdir-filter-toggle .badge-count { background: var(--tdir-primary); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; font-weight: 700; }

/* ---- Main grid: sidebar + cards ---- */
.tdir-main { display: grid; grid-template-columns: 264px 1fr; gap: 22px; align-items: start; }

/* ---- Filter panel ---- */
.tdir-filters {
    background: var(--tdir-card); border: 1px solid var(--tdir-border);
    border-radius: var(--tdir-radius); box-shadow: var(--tdir-shadow);
    padding: 6px 18px 14px; position: sticky; top: 16px;
}
.tdir-filters .filter-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 12px; border-bottom: 1px solid var(--tdir-border); }
.tdir-filters h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.tdir-filters .reset-link { background: transparent; border: 0; color: var(--tdir-primary); font-weight: 600; font-size: .82rem; cursor: pointer; padding: 0; }
.tdir-filters .reset-link:hover { color: var(--tdir-primary-dark); text-decoration: underline; }
.tdir-fgroup { padding: 13px 0; border-bottom: 1px solid #f1f3f9; }
.tdir-fgroup:last-child { border-bottom: 0; padding-bottom: 4px; }
.tdir-fgroup > label.flabel { display: block; font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tdir-muted); margin-bottom: 8px; }
.tdir-fgroup select.tdir-select { width: 100%; }
.tdir-fopt { display: flex; align-items: center; gap: 9px; font-size: .87rem; color: #374151; cursor: pointer; }
.tdir-fopt input { accent-color: var(--tdir-primary); width: 16px; height: 16px; }
.tdir-drawer-close { display: none; }

/* ---- Cards grid: desktop 3, tablet 2, mobile 1 ---- */
.tdir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }

.tdir-card {
    background: var(--tdir-card); border: 1px solid var(--tdir-border);
    border-radius: var(--tdir-radius); box-shadow: var(--tdir-shadow);
    padding: 20px; display: flex; flex-direction: column; height: 100%;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tdir-card:hover { transform: translateY(-2px); box-shadow: var(--tdir-shadow-hover); border-color: var(--tdir-border-strong); }

/* header row: avatar + identity + (admin menu) */
.tdir-card-top { display: flex; align-items: flex-start; gap: 14px; }
.tdir-avatar {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    background: #eef1f6; border: 1px solid var(--tdir-border); flex-shrink: 0;
}
.tdir-id { min-width: 0; flex: 1; }
.tdir-name-row { display: flex; align-items: center; gap: 6px; }
.tdir-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.25; min-width: 0; }
.tdir-card h3 a { color: var(--tdir-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tdir-card h3 a:hover { color: var(--tdir-primary); }
.tdir-verified { display: inline-flex; align-items: center; color: var(--tdir-success); font-size: .92rem; flex-shrink: 0; }
.tdir-title {
    color: var(--tdir-muted); font-size: .85rem; margin: 3px 0 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.tdir-loc { font-size: .83rem; color: #4b5563; margin: 13px 0 0; display: flex; align-items: center; gap: 6px; }
.tdir-loc i { color: var(--tdir-faint); }

/* stats: experience | courses | rating */
.tdir-stats { display: flex; flex-wrap: wrap; align-items: center; font-size: .82rem; color: #4b5563; margin: 10px 0 13px; }
.tdir-stats span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 11px; }
.tdir-stats span:first-child { padding-left: 0; }
.tdir-stats span:not(:last-child) { border-right: 1px solid var(--tdir-border); }
.tdir-stats i { color: var(--tdir-faint); }
.tdir-stats span.star i { color: var(--tdir-amber); }
.tdir-stats span.star { font-weight: 700; color: #b45309; }

.tdir-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tdir-badge { background: var(--tdir-primary-soft); color: var(--tdir-primary-dark); border-radius: 7px; padding: 3px 9px; font-size: .75rem; font-weight: 600; }
.tdir-badge.more { background: #f3f4f6; color: #6b7280; }

.tdir-bio {
    font-size: .84rem; color: #4b5563; line-height: 1.5; margin: 0 0 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.tdir-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tdir-mode { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--tdir-border); border-radius: 7px; padding: 2px 9px; font-size: .73rem; color: #475569; font-weight: 600; }
.tdir-mode i { font-size: .55rem; color: var(--tdir-success); }

.tdir-actions { margin-top: auto; }
.tdir-btn-view {
    display: block; width: 100%; text-align: center; border-radius: var(--tdir-radius-sm);
    padding: 10px 12px; font-size: .87rem; font-weight: 700; cursor: pointer;
    background: #fff; color: var(--tdir-primary); border: 1px solid var(--tdir-border-strong);
    transition: all .12s ease;
}
.tdir-btn-view:hover { background: var(--tdir-primary); border-color: var(--tdir-primary); color: #fff; }

/* admin three-dot menu (permission-gated) */
.tdir-menu { position: relative; flex-shrink: 0; }
.tdir-menu-btn { border: 0; background: transparent; color: var(--tdir-faint); cursor: pointer; padding: 4px 9px; border-radius: 7px; font-size: 1rem; }
.tdir-menu-btn:hover { background: #f3f4f6; color: #374151; }
.tdir-menu-list { position: absolute; right: 0; top: 32px; background: #fff; border: 1px solid var(--tdir-border); border-radius: var(--tdir-radius-sm); box-shadow: var(--tdir-shadow-hover); min-width: 184px; padding: 6px; display: none; z-index: 30; }
.tdir-menu-list.open { display: block; }
.tdir-menu-list a, .tdir-menu-list button { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 10px; font-size: .85rem; color: #374151; border-radius: 7px; cursor: pointer; }
.tdir-menu-list a:hover, .tdir-menu-list button:hover { background: #f3f4f6; }
.tdir-menu-list button.danger { color: #dc2626; }

/* ---- Count line ---- */
.tdir-count { color: var(--tdir-muted); font-size: .9rem; margin-bottom: 14px; }
.tdir-count strong { color: var(--tdir-text); font-weight: 700; }

/* ---- Skeleton ---- */
.tdir-skel-card { background: var(--tdir-card); border: 1px solid var(--tdir-border); border-radius: var(--tdir-radius); padding: 20px; }
.tdir-skel-top { display: flex; gap: 14px; margin-bottom: 16px; }
.tdir-skel-avatar { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.tdir-skel-lines { flex: 1; padding-top: 6px; }
.tdir-skel-line { height: 11px; border-radius: 6px; margin-bottom: 9px; }
.tdir-shimmer { background: linear-gradient(90deg, #eef1f6 25%, #e3e8f1 37%, #eef1f6 63%); background-size: 400% 100%; animation: tdir-shimmer 1.3s ease infinite; }
@keyframes tdir-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---- Empty + error states ---- */
.tdir-state { background: var(--tdir-card); border: 1px solid var(--tdir-border); border-radius: var(--tdir-radius); padding: 56px 24px; text-align: center; box-shadow: var(--tdir-shadow); }
.tdir-state .ico-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--tdir-primary-soft); color: var(--tdir-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.55rem; margin-bottom: 16px; }
.tdir-state h3 { font-size: 1.18rem; font-weight: 700; margin: 0 0 6px; }
.tdir-state p { color: var(--tdir-muted); margin: 0 0 20px; }
.tdir-state .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- Pagination ---- */
.tdir-pagination { margin-top: 26px; display: flex; justify-content: center; }
.tdir-pagination nav > p, .tdir-pagination nav > div:first-child:not(.flex) { display: none; }
.tdir-pagination ul.pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.tdir-pagination .page-item .page-link { border: 1px solid var(--tdir-border); background: #fff; color: var(--tdir-text); border-radius: 9px; padding: 8px 13px; font-size: .87rem; font-weight: 600; min-width: 40px; text-align: center; }
.tdir-pagination .page-item.active .page-link { background: var(--tdir-primary); border-color: var(--tdir-primary); color: #fff; }
.tdir-pagination .page-item.disabled .page-link { color: #c0c6d2; background: #f8fafc; }

/* ---- Buttons (shared, used in states) ---- */
.tdir-btn { border-radius: var(--tdir-radius-sm); padding: 9px 18px; font-size: .87rem; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.tdir-btn-primary { background: var(--tdir-primary); color: #fff; }
.tdir-btn-primary:hover { background: var(--tdir-primary-dark); color: #fff; }
.tdir-btn-ghost { background: #fff; color: var(--tdir-primary); border-color: var(--tdir-border-strong); }
.tdir-btn-ghost:hover { border-color: var(--tdir-primary); }

/* ---- Mobile filter drawer ---- */
.tdir-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1090; display: none; }
.tdir-overlay.open { display: block; }

/* ---- Confirmation modal ---- */
.tdir-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 1100; display: none; align-items: center; justify-content: center; padding: 16px; }
.tdir-modal-overlay.open { display: flex; }
.tdir-modal { background: #fff; border-radius: var(--tdir-radius); max-width: 420px; width: 100%; padding: 24px; box-shadow: var(--tdir-shadow-hover); }
.tdir-modal h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 8px; }
.tdir-modal p { color: var(--tdir-muted); margin: 0 0 20px; }
.tdir-modal .actions { display: flex; gap: 10px; justify-content: flex-end; }
.tdir-btn-danger { background: #dc2626; color: #fff; padding: 9px 16px; border-radius: var(--tdir-radius-sm); border: 0; font-weight: 700; cursor: pointer; }

.tdir-loading { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .tdir-main { grid-template-columns: 1fr; }
    .tdir-grid { grid-template-columns: repeat(2, 1fr); }
    .tdir-filter-toggle { display: inline-flex; align-items: center; }
    .tdir-filters {
        position: fixed; top: 0; left: 0; bottom: 0; width: 322px; max-width: 88vw; z-index: 1095;
        border-radius: 0 16px 16px 0; transform: translateX(-105%); transition: transform .22s ease;
        overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.2);
    }
    .tdir-filters.open { transform: translateX(0); }
    .tdir-drawer-close { display: inline-flex; border: 0; background: #f3f4f6; border-radius: 8px; width: 32px; height: 32px; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; }
}
@media (max-width: 640px) {
    .tdir-grid { grid-template-columns: 1fr; }
    .tdir-header h1 { font-size: 1.45rem; }
    .tdir-header { padding: 24px 0 22px; }
    .tdir-toolbar-right { width: 100%; }
    .tdir-toolbar-right .tdir-select { flex: 1; }
}

/* Certificate directory overrides */
.tdir.tdir-cert {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .10), transparent 26%),
        radial-gradient(circle at top right, rgba(13, 148, 136, .10), transparent 24%),
        #f5f7fb;
}
.tdir-cert .tdir-header {
    background: linear-gradient(120deg, #0b1220 0%, #1e3a8a 58%, #0f766e 100%);
}
.tdir-notice,
.tdir-highlight,
.tdir-bulk {
    background: rgba(255,255,255,.96);
    border: 1px solid #e4e9f4;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(16,24,40,.08);
}
.tdir-notice {
    display:flex;
    align-items:center;
    gap:10px;
    margin:18px 0 0;
    padding:13px 16px;
    color:#0f172a;
    font-weight:700;
}
.tdir-notice i { color:#16a34a; }
.tdir-highlights {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin:20px 0 18px;
}
.tdir-highlight { padding:18px; }
.tdir-highlight span,
.tdir-cert-meta span,
.tdir-master-check span,
.tdir-bulk-copy {
    color:#64748b;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.tdir-highlight strong {
    display:block;
    margin:10px 0 7px;
    color:#111827;
    font-size:1.9rem;
    font-weight:800;
}
.tdir-highlight p { margin:0; color:#6b7280; font-size:.9rem; line-height:1.55; }
.tdir-results-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}
.tdir-master-check {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#475569;
    cursor:pointer;
}
.tdir-master-check input { accent-color:#2563eb; width:16px; height:16px; }
.tdir-bulk {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    margin-bottom:14px;
    flex-wrap:wrap;
}
.tdir-filter-actions {
    display:grid;
    gap:10px;
    margin-top:16px;
}
.tdir-filter-actions .tdir-btn { justify-content:center; }
.tdir-input { background-image:none; }
.tdir-cert-card { padding:18px; }
.tdir-check {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    margin-top:4px;
    cursor:pointer;
}
.tdir-check input {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}
.tdir-check span {
    width:22px;
    height:22px;
    border-radius:7px;
    border:1.5px solid #cbd5e1;
    background:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.tdir-check input:checked + span {
    border-color:#2563eb;
    background:linear-gradient(135deg,#2563eb,#0f766e);
    box-shadow:0 10px 20px rgba(37,99,235,.22);
}
.tdir-check input:checked + span::after {
    content:'';
    width:6px;
    height:10px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(40deg) translate(-1px,-1px);
}
.tdir-cert-avatar {
    width:54px;
    height:54px;
    border-radius:16px;
    background:linear-gradient(135deg,#eef2ff,#dbeafe);
    color:#1d4ed8;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    font-weight:800;
    flex-shrink:0;
}
.tdir-cert-status {
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:6px 10px;
    font-size:.71rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.tdir-cert-status.verified { background:rgba(22,163,74,.12); color:#15803d; }
.tdir-cert-status.pending { background:rgba(245,158,11,.15); color:#b45309; }
.tdir-cert-meta {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-bottom:14px;
}
.tdir-cert-meta > div {
    padding:12px 13px;
    border-radius:12px;
    background:#f8fafc;
    border:1px solid #e6e9f2;
}
.tdir-cert-meta strong {
    display:block;
    margin:6px 0 4px;
    color:#111827;
    font-size:.9rem;
}
.tdir-cert-meta p { margin:0; color:#6b7280; font-size:.82rem; line-height:1.5; }
.tdir-card-actions {
    margin-top:auto;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.tdir-card-actions .tdir-btn-view { flex:1 1 100%; }
.tdir-inline-btn {
    flex:1 1 150px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    border:1px solid #d6dcec;
    border-radius:10px;
    background:#fff;
    color:#1d4ed8;
    font-size:.84rem;
    font-weight:700;
}
@media (max-width: 992px) {
    .tdir-highlights { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px) {
    .tdir-highlights,
    .tdir-cert-meta { grid-template-columns:1fr; }
    .tdir-inline-btn,
    .tdir-filter-actions .tdir-btn { width:100%; }
}

/* ==========================================================================
   Verification portal — search-first additions (hero, tabs, steps, FAQ).
   Scoped under .tdir so the design tokens above resolve.
   ========================================================================== */

/* ---- Card action buttons (icons) ---- */
.tdir-card-actions .tdir-btn-view { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.tdir-cert-card .tdir-inline-btn { gap:7px; cursor:pointer; transition:all .12s ease; }
.tdir-cert-card .tdir-inline-btn:hover { border-color:var(--tdir-primary); background:var(--tdir-primary); color:#fff; }

/* ---- Hero ---- */
.tdir-cert .cv-hero { padding:40px 0 92px; position:relative; }
.cv-hero-eyebrow {
    display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase; color:#bfdbfe;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
    padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.cv-hero h1 { font-size:2.1rem; }
.cv-hero p { font-size:1.02rem; max-width:640px; }
.cv-trust { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:18px; }
.cv-trust-item { display:inline-flex; align-items:center; gap:8px; color:#dbeafe; font-size:.9rem; font-weight:500; }
.cv-trust-item i { color:#5eead4; font-size:1rem; }
.cv-trust-item strong { color:#fff; font-weight:800; }

/* ---- Search card (overlaps hero) ---- */
.cv-search-shell { margin-top:-64px; position:relative; z-index:5; }
.cv-search-card {
    background:#fff; border:1px solid var(--tdir-border); border-radius:18px;
    box-shadow:0 24px 50px -18px rgba(2,6,23,.28), 0 8px 16px -10px rgba(2,6,23,.12);
    padding:22px 22px 18px; max-width:860px; margin:0 auto;
}
.cv-search-head h2 { font-size:1.18rem; font-weight:800; margin:0 0 4px; color:#0f172a; }
.cv-search-head p { margin:0 0 14px; color:var(--tdir-muted); font-size:.9rem; }
.cv-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.cv-tab {
    display:inline-flex; align-items:center; gap:8px; border:1px solid var(--tdir-border);
    background:#fff; color:#475569; border-radius:10px; padding:9px 14px;
    font-size:.86rem; font-weight:700; cursor:pointer; transition:all .14s ease;
}
.cv-tab i { font-size:.9rem; color:var(--tdir-faint); }
.cv-tab:hover { border-color:var(--tdir-primary); color:var(--tdir-primary); }
.cv-tab:hover i { color:var(--tdir-primary); }
.cv-tab.active {
    background:linear-gradient(180deg,#eff5ff,#e3edff); border-color:rgba(37,99,235,.45);
    color:var(--tdir-primary-dark); box-shadow:inset 0 0 0 1px rgba(37,99,235,.12);
}
.cv-tab.active i { color:var(--tdir-primary); }
.cv-search-row { display:flex; gap:10px; align-items:stretch; }
.cv-search-row .tdir-search { flex:1; }
.cv-search-row .tdir-search input { font-family:inherit; }
.cv-search-btn {
    flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; background:var(--tdir-primary);
    color:#fff; border:0; border-radius:var(--tdir-radius); padding:0 22px; font-size:.92rem;
    font-weight:700; cursor:pointer; box-shadow:0 10px 22px -10px rgba(37,99,235,.6);
    transition:background .14s ease, transform .14s ease;
}
.cv-search-btn:hover { background:var(--tdir-primary-dark); transform:translateY(-1px); }
.cv-search-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; }
.cv-browse-link { background:transparent; border:0; color:var(--tdir-primary); font-weight:700; font-size:.88rem; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:0; }
.cv-browse-link:hover { color:var(--tdir-primary-dark); text-decoration:underline; }
.cv-secure-note { display:inline-flex; align-items:center; gap:7px; color:var(--tdir-muted); font-size:.82rem; }
.cv-secure-note i { color:var(--tdir-success); }

/* ---- Section headings ---- */
.cv-section-head { margin:0 0 16px; }
.cv-section-head h2 { font-size:1.4rem; font-weight:800; color:#0f172a; margin:0 0 6px; display:flex; align-items:center; gap:10px; }
.cv-section-head h2 i { color:var(--tdir-primary); }
.cv-section-head p { margin:0; color:var(--tdir-muted); font-size:.95rem; }
.cv-section-head.center { text-align:center; }
.cv-section-head.center h2 { justify-content:center; }
.cv-section-head.center p { max-width:560px; margin:0 auto; }
.cv-directory { padding-top:30px; }

/* ---- How verification works ---- */
.cv-how { padding:48px 0 8px; }
.cv-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cv-step {
    position:relative; background:#fff; border:1px solid var(--tdir-border); border-radius:16px;
    padding:28px 22px 22px; box-shadow:var(--tdir-shadow); text-align:center;
}
.cv-step-num {
    position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:30px; height:30px;
    border-radius:50%; background:var(--tdir-primary); color:#fff; font-weight:800; font-size:.9rem;
    display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 16px -6px rgba(37,99,235,.6);
}
.cv-step-ico {
    width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,#eef2ff,#dbeafe);
    color:var(--tdir-primary-dark); display:inline-flex; align-items:center; justify-content:center;
    font-size:1.4rem; margin:8px 0 14px;
}
.cv-step h3 { font-size:1.02rem; font-weight:700; margin:0 0 8px; color:#0f172a; }
.cv-step p { margin:0; color:var(--tdir-muted); font-size:.9rem; line-height:1.55; }

/* ---- FAQ ---- */
.cv-faq { padding:48px 0 12px; }
.cv-faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.cv-faq-item { background:#fff; border:1px solid var(--tdir-border); border-radius:14px; box-shadow:var(--tdir-shadow); overflow:hidden; }
.cv-faq-q {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:transparent; border:0; padding:18px 20px; font-size:.98rem; font-weight:700;
    color:#0f172a; cursor:pointer; text-align:left;
}
.cv-faq-q i { color:var(--tdir-primary); transition:transform .2s ease; flex-shrink:0; }
.cv-faq-q[aria-expanded="true"] i { transform:rotate(180deg); }
.cv-faq-a { max-height:0; overflow:hidden; transition:max-height .26s ease; }
.cv-faq-a p { margin:0; padding:0 20px 18px; color:var(--tdir-muted); font-size:.92rem; line-height:1.6; }
.cv-faq-item.open .cv-faq-a { max-height:340px; }

/* ---- Toast (share / copy feedback) ---- */
.cv-toast {
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
    background:#0f172a; color:#fff; padding:12px 18px; border-radius:12px; font-size:.88rem;
    font-weight:600; box-shadow:0 18px 40px -12px rgba(2,6,23,.6); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; z-index:1200; display:inline-flex; align-items:center; gap:9px;
}
.cv-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.cv-toast i { color:#5eead4; }

/* ---- Portal responsive ---- */
@media (max-width:768px) {
    .cv-steps { grid-template-columns:1fr; }
    .cv-tabs { display:grid; grid-template-columns:1fr; }
    .cv-search-row { flex-direction:column; }
    .cv-search-btn { padding:13px; justify-content:center; }
    .cv-hero h1 { font-size:1.6rem; }
}
@media (max-width:560px) {
    .cv-search-shell { margin-top:-50px; }
    .cv-search-card { padding:18px 16px; }
    .cv-search-foot { flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   Verification DETAIL page (.cv-verify) — standalone scope (no .tdir parent),
   so brand colours are written as literals here.
   ========================================================================== */
.cv-verify {
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 26%),
        radial-gradient(circle at top right, rgba(13,148,136,.08), transparent 24%),
        #f5f7fb;
    min-height:70vh; padding:32px 0 64px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:#111827;
}
.cv-verify *, .cv-verify *::before, .cv-verify *::after { box-sizing:border-box; }
.cv-verify a { text-decoration:none; }
.cv-verify-wrap { max-width:1100px; margin:0 auto; padding:0 18px; }
.cv-back { display:inline-flex; align-items:center; gap:8px; color:#475569; font-size:.88rem; font-weight:600; margin-bottom:16px; }
.cv-back:hover { color:#2563eb; }
.cv-verify-grid { display:grid; grid-template-columns:380px 1fr; gap:22px; align-items:start; }
.cv-panel { background:#fff; border:1px solid #e6e9f2; border-radius:16px; box-shadow:0 10px 24px rgba(16,24,40,.08); padding:24px; }
.cv-verify-badge {
    display:inline-flex; align-items:center; gap:9px; background:rgba(22,163,74,.12); color:#15803d;
    border-radius:999px; padding:8px 16px; font-weight:800; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em;
}
.cv-verify-badge.pending { background:rgba(245,158,11,.15); color:#b45309; }
.cv-learner { margin:18px 0 2px; font-size:1.5rem; font-weight:800; color:#0f172a; }
.cv-course { color:#1d4ed8; font-weight:700; font-size:1rem; margin:0 0 18px; }
.cv-dl { display:grid; gap:0; margin:0; }
.cv-dl-row { display:flex; flex-direction:column; gap:3px; border-top:1px solid #eef1f6; padding:12px 0; }
.cv-dl-row:first-child { border-top:0; padding-top:0; }
.cv-dl-row dt { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; }
.cv-dl-row dd { margin:0; font-size:.96rem; font-weight:600; color:#0f172a; word-break:break-word; }
.cv-verify-url { display:flex; gap:8px; align-items:center; margin-top:4px; }
.cv-verify-url input { flex:1; border:1px solid #e6e9f2; border-radius:9px; padding:8px 10px; font-size:.8rem; color:#475569; background:#f8fafc; min-width:0; }
.cv-copy-btn { flex:0 0 auto; border:1px solid #d6dcec; background:#fff; color:#2563eb; border-radius:9px; padding:8px 12px; font-weight:700; font-size:.82rem; cursor:pointer; }
.cv-copy-btn:hover { background:#2563eb; border-color:#2563eb; color:#fff; }
.cv-verify-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.cv-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; padding:11px 16px; font-weight:700; font-size:.9rem; cursor:pointer; border:1px solid transparent; flex:1 1 140px; }
.cv-btn-primary { background:#2563eb; color:#fff; box-shadow:0 10px 22px -10px rgba(37,99,235,.6); }
.cv-btn-primary:hover { background:#1d4ed8; color:#fff; }
.cv-btn-ghost { background:#fff; color:#2563eb; border-color:#d6dcec; }
.cv-btn-ghost:hover { border-color:#2563eb; }
.cv-stage-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.cv-stage-head h2 { font-size:1.05rem; font-weight:800; color:#0f172a; margin:0; display:flex; align-items:center; gap:9px; }
.cv-stage-head h2 i { color:#2563eb; }
.cv-stage-note { font-size:.8rem; color:#64748b; }
.cv-cert-stage { background:#fff; border:1px solid #e6e9f2; border-radius:16px; box-shadow:0 10px 24px rgba(16,24,40,.08); padding:18px; }
@media (max-width:880px) { .cv-verify-grid { grid-template-columns:1fr; } }

/* ==========================================================================
   Email-first FINDER — search form, results, credential cards, employers.
   Scoped under .tdir (.cv-finder) so the design tokens resolve.
   ========================================================================== */

/* ---- Search form fields (email-first) ---- */
.cv-panel-field { margin-bottom:14px; }
.cv-field-label { display:block; font-size:.8rem; font-weight:700; color:#334155; margin-bottom:7px; }
.cv-input-wrap {
    display:flex; align-items:center; gap:10px; border:1.5px solid var(--tdir-border);
    border-radius:12px; padding:0 14px; background:#fff;
    transition:border-color .14s ease, box-shadow .14s ease;
}
.cv-input-wrap:focus-within { border-color:var(--tdir-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.cv-input-wrap.has-error { border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.10); }
.cv-input-wrap i { color:var(--tdir-faint); font-size:1rem; }
.cv-input-wrap input { flex:1; border:0; outline:0; background:transparent; font-size:1rem; padding:14px 0; color:var(--tdir-text); min-width:0; font-family:inherit; }
.cv-input-wrap input::placeholder { color:var(--tdir-faint); }
.cv-field-error { color:#dc2626; font-size:.82rem; margin:8px 0 0; font-weight:600; }
.cv-field-error--server { display:block; }
.cv-submit-btn {
    width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px;
    background:var(--tdir-primary); color:#fff; border:0; border-radius:12px; padding:14px 18px;
    font-size:1rem; font-weight:800; cursor:pointer; box-shadow:0 12px 26px -12px rgba(37,99,235,.7);
    transition:background .14s ease, transform .14s ease; margin-top:4px;
}
.cv-submit-btn:hover:not(:disabled) { background:var(--tdir-primary-dark); transform:translateY(-1px); }
.cv-submit-btn:disabled { opacity:.75; cursor:default; }
.cv-submit-btn > span { display:inline-flex; align-items:center; gap:9px; }

/* ---- Results ---- */
#cv-results:empty { display:none; }
.cv-results-head { margin:34px 0 18px; text-align:center; }
.cv-results-head h2 { font-size:1.5rem; font-weight:800; color:#0f172a; margin:0 0 6px; display:flex; align-items:center; justify-content:center; gap:9px; }
.cv-results-head h2 i { color:var(--tdir-success); }
.cv-results-head p { margin:0; color:var(--tdir-muted); font-size:.96rem; }
.cv-results-head strong { color:#0f172a; }
.cv-results-note { text-align:center; color:var(--tdir-muted); font-size:.86rem; margin:18px 0 0; display:flex; align-items:center; justify-content:center; gap:7px; }

/* ---- Credential card (certificate-style, NOT a profile) ---- */
.cv-cred-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.cv-cred {
    position:relative; background:#fff; border:1px solid var(--tdir-border); border-radius:16px;
    box-shadow:0 1px 2px rgba(16,24,40,.05); padding:22px 20px 18px; display:flex; flex-direction:column;
    overflow:hidden; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.cv-cred:hover { transform:translateY(-3px); box-shadow:0 16px 32px rgba(16,24,40,.12); border-color:var(--tdir-border-strong); }
.cv-cred-ribbon { position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,#2563eb,#0ea5e9,#0f766e); }
.cv-cred.is-pending .cv-cred-ribbon { background:linear-gradient(90deg,#f59e0b,#f97316); }
.cv-cred-head { display:flex; align-items:center; justify-content:space-between; margin:8px 0 14px; }
.cv-cred-seal {
    width:48px; height:48px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#eff6ff,#dbeafe); color:#1d4ed8; font-size:1.3rem;
    box-shadow:inset 0 0 0 1px rgba(37,99,235,.12);
}
.cv-cred.is-pending .cv-cred-seal { background:linear-gradient(135deg,#fff7ed,#ffedd5); color:#b45309; box-shadow:inset 0 0 0 1px rgba(245,158,11,.18); }
.cv-cred-badge {
    display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 11px;
    font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    background:rgba(22,163,74,.12); color:#15803d;
}
.cv-cred-badge.pending { background:rgba(245,158,11,.15); color:#b45309; }
.cv-cred-title { font-size:1.08rem; font-weight:800; color:#0f172a; margin:0 0 4px; line-height:1.3; }
.cv-cred-awarded { font-size:.86rem; color:var(--tdir-muted); margin:0 0 16px; }
.cv-cred-awarded strong { color:#334155; font-weight:700; }
.cv-cred-meta {
    display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin:0 0 16px; padding:14px 0;
    border-top:1px solid #eef1f6; border-bottom:1px solid #eef1f6;
}
.cv-cred-meta dt { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; margin-bottom:3px; }
.cv-cred-meta dd { margin:0; font-size:.86rem; font-weight:600; color:#0f172a; word-break:break-word; }
.cv-cred-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.cv-cred-brand { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:800; color:#1d4ed8; }
.cv-cred-cat { font-size:.72rem; font-weight:700; color:#475569; background:#f1f5f9; border-radius:7px; padding:3px 9px; }
.cv-cred-actions { margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; }
.cv-cred-btn {
    flex:1 1 30%; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px;
    border:1px solid var(--tdir-border-strong); border-radius:9px; background:#fff; color:#1d4ed8;
    font-size:.82rem; font-weight:700; cursor:pointer; transition:all .12s ease; padding:0 10px;
}
.cv-cred-btn:hover { border-color:var(--tdir-primary); background:var(--tdir-primary); color:#fff; }
.cv-cred-btn.primary { background:var(--tdir-primary); border-color:var(--tdir-primary); color:#fff; flex:1 1 100%; }
.cv-cred-btn.primary:hover { background:var(--tdir-primary-dark); border-color:var(--tdir-primary-dark); }

/* ---- Empty state ---- */
.cv-empty { background:#fff; border:1px solid var(--tdir-border); border-radius:16px; padding:54px 24px; text-align:center; box-shadow:var(--tdir-shadow); margin-top:34px; }
.cv-empty-ico { width:66px; height:66px; border-radius:50%; background:var(--tdir-primary-soft); color:var(--tdir-primary); display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:16px; }
.cv-empty h2 { font-size:1.25rem; font-weight:800; color:#0f172a; margin:0 0 8px; }
.cv-empty p { color:var(--tdir-muted); margin:0 auto 22px; max-width:480px; line-height:1.55; }
.cv-empty-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---- For employers ---- */
.cv-employers { padding:48px 0 8px; }
.cv-employers-card {
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    background:linear-gradient(120deg,#0b1220 0%,#1e3a8a 70%,#0f766e 130%);
    border-radius:18px; padding:26px 28px; color:#fff; box-shadow:0 20px 44px -22px rgba(2,6,23,.6);
}
.cv-employers-ico { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.12); display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; color:#bfdbfe; flex-shrink:0; }
.cv-employers-body { flex:1 1 320px; }
.cv-employers-body h2 { font-size:1.25rem; font-weight:800; margin:0 0 6px; color:#fff; }
.cv-employers-body p { margin:0; color:#cbd5e1; font-size:.95rem; line-height:1.55; }
.cv-employers-card .cv-btn-primary { background:#fff; color:#1d4ed8; flex:0 0 auto; box-shadow:0 10px 22px -10px rgba(0,0,0,.45); }
.cv-employers-card .cv-btn-primary:hover { background:#eff6ff; color:#1d4ed8; }

/* ---- Finder responsive ---- */
@media (max-width:992px) { .cv-cred-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) {
    .cv-cred-grid { grid-template-columns:1fr; }
    .cv-cred-meta { grid-template-columns:1fr 1fr; }
    .cv-employers-card { flex-direction:column; align-items:flex-start; text-align:left; }
    .cv-employers-card .cv-btn-primary { width:100%; }
}