/* assets/css/pages/verify_card.css — v10.5.3 (F4)
   Shared by track_kit.php and verify_member.php: the focused "verification
   card" surface. Both pages previously carried ~170 lines of near-identical
   inline CSS; this is the single deduplicated version.

   Class names are .pcd-* namespaced. The pages' original .btn/.btn-primary
   classes are left to Bootstrap on purpose — theme.css already renders them
   in saffron, so the CTA look is preserved without a bespoke gradient button. */

.pcd-verify-card {
    max-width: 27rem;
    width: 100%;
    margin-inline: auto;
    background: var(--pcd-surface);
    border-radius: 1.25rem;
    box-shadow: var(--pcd-shadow);
    overflow: hidden;
}

/* Saffron gradient crown — the kesariya identity of these pages */
.pcd-verify-head {
    background: linear-gradient(135deg, #FF6B35, #F7C149);
    color: #fff;
    padding: 1.5rem;
    text-align: center;
}

.pcd-verify-head .pcd-verify-devanagari {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.pcd-verify-head p {
    opacity: 0.9;
    font-size: 0.85rem;
    margin: 0;
}

.pcd-verify-body {
    padding: 1.5rem;
}

/* Membership validity banner (verify_member.php) */
.pcd-status-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    font-weight: 700;
    text-align: center;
}

.pcd-status-banner.is-valid {
    background: #D1FAE5;
    color: #065F46;
}

.pcd-status-banner.is-invalid {
    background: #FEE2E2;
    color: #991B1B;
}

[data-bs-theme="dark"] .pcd-status-banner.is-valid {
    background: rgba(16, 185, 129, 0.18);
    color: #6EE7B7;
}

[data-bs-theme="dark"] .pcd-status-banner.is-invalid {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}

/* #trackingTitle / member id display */
.pcd-member-id {
    font-size: 1.8rem;
    color: var(--pcd-primary);
    text-align: center;
    font-weight: 700;
    margin-bottom: 0.9rem;
    overflow-wrap: anywhere;
}

/* OTP prompt panel */
.pcd-verify-section {
    background: #FFF5F0;
    border: 2px solid var(--pcd-primary);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 0.9rem;
}

[data-bs-theme="dark"] .pcd-verify-section {
    background: rgba(var(--pcd-primary-rgb), 0.1);
}

.pcd-verify-section h4 {
    color: var(--pcd-primary);
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}

.pcd-verify-section p {
    color: var(--pcd-text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.9rem;
}

/* Result rows */
.pcd-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--pcd-border);
}

.pcd-info-row:last-of-type {
    border-bottom: none;
}

.pcd-info-label {
    color: var(--pcd-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.pcd-info-value {
    text-align: end;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Revealed by JS via classList.add('show') — the class name is part of the
   existing script contract and must not be renamed. */
.pcd-verified-details {
    display: none;
}

.pcd-verified-details.show {
    display: block;
}

.pcd-verify-foot {
    padding: 0.9rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--pcd-text-muted);
    border-top: 1px solid var(--pcd-border);
}