/* ═══════════════════════════════════════════════════════════════════
   Exit Permit Manager — Public Verification Portal CSS
   Design: matches iop.e-isma.com exactly
   Theme isolation: all rules scoped to .epm-wrap to avoid
   conflicts with ANY WordPress theme or WPBakery layouts.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Full theme isolation reset ────────────────────────────────────
   Every rule is scoped inside .epm-wrap so it NEVER bleeds into
   the surrounding theme. This makes the plugin safe with:
   - Astra, OceanWP, Divi, Avada, BeTheme, Hello Elementor
   - WPBakery Page Builder (Visual Composer) columns & rows
   - Any custom theme
   ─────────────────────────────────────────────────────────────────*/
.epm-wrap,
.epm-wrap *,
.epm-wrap *::before,
.epm-wrap *::after {
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
}

/* Reset common theme overrides inside our widget */
.epm-wrap h1,.epm-wrap h2,.epm-wrap h3,.epm-wrap h4 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    color: inherit;
    border: none;
}
.epm-wrap p   { margin: 0; padding: 0; }
.epm-wrap a   { text-decoration: none; }
.epm-wrap ul,
.epm-wrap ol  { list-style: none; margin: 0; padding: 0; }
.epm-wrap img { max-width: none; height: auto; display: inline-block; }
.epm-wrap input,
.epm-wrap button,
.epm-wrap select,
.epm-wrap textarea {
    font-family: inherit;
    font-size: inherit;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* ── Wrapper ────────────────────────────────────────────────────── */
.epm-wrap {
    color: #1a1a1a;
    background: #f0f2f5;
    /* WPBakery sets its own padding — we override it cleanly */
    padding: 0 !important;
    margin: 0 !important;
}

/* When placed inside a WPBakery column, remove the background bleed */
.vc_column-inner > .wpb_wrapper > .epm-wrap,
.vc_col-sm-12 .epm-wrap {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* ── Header ─────────────────────────────────────────────────────── */
.epm-wrap .epm-header {
    background: #1a56db;
    color: #fff;
    padding: 20px 24px;
}
.epm-wrap .epm-header-inner { max-width: 700px; margin: 0 auto; }
.epm-wrap .epm-logo-area { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.epm-wrap .epm-logo-icon { font-size: 28px; line-height: 1; }
.epm-wrap .epm-org-name  { font-size: 13px; font-weight: 600; opacity: .9; }
.epm-wrap .epm-org-short { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: 1px; }
.epm-wrap .epm-page-title { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.3px; }

/* ── Search ─────────────────────────────────────────────────────── */
.epm-wrap .epm-search-section { padding: 24px 20px 0; max-width: 700px; margin: 0 auto; }
.epm-wrap .epm-search-card { background: #fff; border-radius: 12px; padding: 22px 24px; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.epm-wrap .epm-search-label { font-size: 14px; font-weight: 500; color: #374151; margin-bottom: 12px !important; display: block; }
.epm-wrap .epm-search-row { display: flex; gap: 10px; }

.epm-wrap .epm-input {
    flex: 1;
    height: 46px;
    padding: 0 16px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    background: #fff;
    color: #111827;
    transition: border-color .18s, box-shadow .18s;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
    width: auto;
    min-width: 0;
}
.epm-wrap .epm-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.12); }

.epm-wrap .epm-btn {
    height: 46px;
    padding: 0 28px;
    background: #1a56db;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s;
    flex-shrink: 0;
    /* Override WPBakery/theme button styles */
    box-shadow: none;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.epm-wrap .epm-btn:hover  { background: #1647c8; }
.epm-wrap .epm-btn:active { opacity: .9; }
.epm-wrap .epm-btn:focus  { outline: none; box-shadow: 0 0 0 3px rgba(26,86,219,.3); }

/* ── Loader ─────────────────────────────────────────────────────── */
.epm-wrap .epm-loader { display: flex; justify-content: center; padding: 40px 0; }
.epm-wrap .epm-spinner {
    width: 36px; height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: #1a56db;
    border-radius: 50%;
    animation: epm-spin .7s linear infinite;
}
@keyframes epm-spin { to { transform: rotate(360deg); } }

/* ── Result ─────────────────────────────────────────────────────── */
.epm-wrap .epm-result {
    max-width: 700px;
    margin: 20px auto 0;
    padding: 0 20px 28px;
    animation: epm-in .3s ease;
}
@keyframes epm-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ── Status banner ──────────────────────────────────────────────── */
.epm-wrap .epm-status-banner {
    border-radius: 10px;
    border: 1px solid;
    padding: 15px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
.epm-wrap .epm-valid     { background: #f0fdf4; border-color: #4ade80; }
.epm-wrap .epm-expired   { background: #fef2f2; border-color: #f87171; }
.epm-wrap .epm-suspended { background: #fffbeb; border-color: #fbbf24; }
.epm-wrap .epm-revoked   { background: #f9fafb; border-color: #d1d5db; }

.epm-wrap .epm-status-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 900; flex-shrink: 0; color: #fff;
}
.epm-wrap .epm-valid     .epm-status-icon { background: #22c55e; }
.epm-wrap .epm-expired   .epm-status-icon { background: #ef4444; }
.epm-wrap .epm-suspended .epm-status-icon { background: #f59e0b; }
.epm-wrap .epm-revoked   .epm-status-icon { background: #9ca3af; }

.epm-wrap .epm-status-text strong {
    display: block; font-size: 14px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px;
}
.epm-wrap .epm-valid     .epm-status-text strong { color: #15803d; }
.epm-wrap .epm-expired   .epm-status-text strong { color: #b91c1c; }
.epm-wrap .epm-suspended .epm-status-text strong { color: #b45309; }
.epm-wrap .epm-revoked   .epm-status-text strong { color: #374151; }
.epm-wrap .epm-status-text span { font-size: 14px; color: #374151; }

/* ── Data table ─────────────────────────────────────────────────── */
.epm-wrap .epm-data-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.08); overflow: hidden; margin-bottom: 16px; }
.epm-wrap .epm-data-table { width: 100%; border-collapse: collapse; }
.epm-wrap .epm-data-table tr { border-bottom: 1px solid #f3f4f6; }
.epm-wrap .epm-data-table tr:last-child { border-bottom: none; }
.epm-wrap .epm-data-table th { width: 38%; padding: 14px 20px; font-size: 14px; font-weight: 400; color: #6b7280; text-align: left; vertical-align: top; background: #fff; }
.epm-wrap .epm-data-table td { padding: 14px 20px; font-size: 15px; font-weight: 600; color: #111827; vertical-align: top; }
.epm-wrap .epm-permit-no-val { font-family: monospace; font-size: 17px; font-weight: 700; color: #1a56db; }

/* ── Bottom row ─────────────────────────────────────────────────── */
.epm-wrap .epm-bottom-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }

.epm-wrap .epm-qr-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
    padding: 18px; text-align: center; min-width: 190px;
}
.epm-wrap .epm-qr-card img { border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px; display: block; margin: 0 auto 8px; }
.epm-wrap .epm-qr-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: #9ca3af; margin-bottom: 8px !important; }
.epm-wrap .epm-qr-dl { display: inline-block; font-size: 12px; color: #1a56db; margin-top: 4px; }
.epm-wrap .epm-qr-dl:hover { text-decoration: underline; color: #1a56db; }

.epm-wrap .epm-files-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.08); padding: 18px; }
.epm-wrap .epm-files-title { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: #9ca3af; margin-bottom: 10px !important; }
.epm-wrap .epm-file-link { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #f9fafb; border-radius: 8px; color: #1a56db; font-size: 14px; font-weight: 500; margin-bottom: 8px; transition: background .15s; }
.epm-wrap .epm-file-link:hover { background: #eff6ff; color: #1a56db; }
.epm-wrap .epm-file-link span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Not found ──────────────────────────────────────────────────── */
.epm-wrap .epm-not-found { background: #fff; border-radius: 12px; padding: 40px 24px; text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.epm-wrap .epm-not-found h3 { font-size: 18px; color: #1f2937; margin-bottom: 8px !important; }
.epm-wrap .epm-not-found p  { color: #6b7280; font-size: 14px; }

/* ── Timestamp ──────────────────────────────────────────────────── */
.epm-wrap .epm-verify-ts { text-align: center; font-size: 12px; color: #9ca3af; margin-top: 16px !important; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .epm-wrap .epm-search-row { flex-direction: column; }
    .epm-wrap .epm-btn        { width: 100%; height: 44px; }
    .epm-wrap .epm-bottom-row { grid-template-columns: 1fr; }
    .epm-wrap .epm-data-table th { width: 42%; font-size: 13px; padding: 12px 14px; }
    .epm-wrap .epm-data-table td { font-size: 14px; padding: 12px 14px; }
}

/* ── WPBakery-specific overrides ────────────────────────────────── */
/* Prevent WPBakery row/column padding from squashing the widget */
.vc_row .epm-wrap .epm-header,
.vc_row .epm-wrap .epm-search-section,
.vc_row .epm-wrap .epm-result { width: 100%; }

/* WPBakery sometimes injects extra margin on first p inside columns */
.wpb_wrapper .epm-wrap p:first-child { margin-top: 0 !important; }

/* Full-width row in WPBakery */
.vc_row-full-width .epm-wrap { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }