/* =========================================
   1. VARIABLES & BASE (STANDARD SHORTCODE)
   ========================================= */
.qrv-frontend-root {
    --qrv-text-dark: #2c3e50;
    --qrv-text-medium: #6c757d;
    --qrv-blue: #003366;
    --qrv-red: #cc3333;
    --qrv-green: #28a745;
    --qrv-light-bg: #f5f5f7;
    --qrv-card-border: #e6e6e6;
    
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    max-width: 600px;
    margin: 0 auto;
    background: var(--qrv-light-bg);
    border: 1px solid var(--qrv-card-border);
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    color: var(--qrv-text-dark);
}

.qrv-hidden { 
    display: none !important; 
}

/* Standard Content Card */
.qrv-content-card { 
    background: #fff; 
    padding: 30px; 
    border-radius: 11px; 
}

.qrv-state h3 { 
    margin-top: 0; 
    margin-bottom: 25px; 
    text-align: center; 
    font-size: 24px; 
}

/* Standard Input State */
.qrv-state-entry .qrv-input-group { 
    position: relative; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    display: flex; 
    align-items: center; 
    margin-bottom: 20px; 
}

.qrv-state-entry .qrv-icon-key { 
    padding: 15px; 
    color: #aaa; 
}

.qrv-state-entry input { 
    flex: 1; 
    border: none; 
    padding: 15px 0; 
    font-size: 16px; 
    text-transform: uppercase; 
    outline: none; 
    background: transparent; 
}

.qrv-state-entry input::placeholder { 
    color: #aaa; 
    text-transform: none; 
}

.qrv-illustration-hand { 
    position: absolute; 
    right: 2px; 
    bottom: 0px; 
    height: 50px; 
    pointer-events: none; 
    max-width: 50px !important;  
}

.qrv-frontend-root .qrv-verify-btn { 
    width: 100%; 
    background: var(--qrv-blue); 
    color: #fff; 
    border: none; 
    border-radius: 5px; 
    padding: 15px; 
    font-weight: bold; 
    cursor: pointer; 
    text-transform: uppercase; 
}


/* =========================================
   2. SHARED RESULTS STATES (WARNING & DETAILS)
   ========================================= */
   
/* Warning State Base */
.qrv-banner { 
    padding: 15px 25px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    color: #fff; 
    font-weight: bold; 
    text-align: left; 
    margin: -30px -30px 20px -30px; 
}
.qrv-banner-red { background: var(--qrv-red); }
.qrv-banner span { margin-right: 10px; }
.qrv-inner-content { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
.qrv-icon-stop { font-size: 40px; color: #fff; background: var(--qrv-red); border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.qrv-inner-content p { font-size: 15px; line-height: 1.5; color: var(--qrv-text-dark); margin: 0; padding: 0 10px; }
.qrv-illustration-fake { height: 120px; }

.qrv-card-footer { 
    border-top: 1px solid var(--qrv-card-border); 
    margin: 20px -30px -30px -30px; 
    padding: 20px; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}
.qrv-card-footer a { color: var(--qrv-text-medium); font-size: 13px; text-decoration: underline; cursor: pointer; }

/* Dark Theme Success State Base */
.qrv-state-details.qrv-dark-theme {
    background-color: #0f172a;
    color: #cbd5e1;
    margin: -30px; 
    padding: 30px;
    border-radius: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.qrv-auth-header { font-size: 26px; font-weight: 800; color: #fff; border-bottom: 1px solid #1e293b; padding-bottom: 20px; margin-bottom: 25px; display: flex; align-items: center; }
.qrv-auth-header .qrv-check-circle { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid #22c55e; color: #22c55e; width: 32px; height: 32px; font-size: 20px; font-weight: bold; margin-right: 12px; }
.text-green { color: #22c55e; margin-left: 8px; }
.text-gray { color: #94a3b8; font-size: 12px; }

.qrv-auth-intro { position: relative; margin-bottom: 25px; background: #1e293b; padding: 20px; border-radius: 12px; }
.qrv-auth-intro p:first-child { font-weight: bold; color: #fff; font-size: 16px; margin-top: 0; margin-bottom: 15px; }
.qrv-auth-intro p { margin: 8px 0; font-size: 14px; }
.qrv-check-small { color: #fff; background: #22c55e; border-radius: 50%; display: inline-block; width: 16px; height: 16px; text-align: center; line-height: 16px; font-size: 11px; margin-right: 8px; font-weight: bold; }
.qrv-product-img { position: absolute; right: 20px; top: -60px; max-width: 140px; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)); }

.qrv-auth-grid { display: flex; background: transparent; gap: 30px; }
.qrv-grid-col { flex: 1; }
.qrv-grid-col h4 { color: #94a3b8; margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid #1e293b; padding-bottom: 10px; font-size: 13px; letter-spacing: 1px; }
.qrv-grid-col.border-left { border-left: 1px solid #1e293b; padding-left: 30px; }
.qrv-data-row { display: flex; margin-bottom: 20px; }
.qrv-data-item { flex: 1; }
.qrv-data-item label { display: block; color: #94a3b8; font-size: 13px; margin-bottom: 4px; }
.qrv-data-item span { display: block; color: #f8fafc; font-size: 15px; font-weight: 500; }
.qrv-info-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; }
.qrv-info-row label { color: #94a3b8; }
.qrv-info-row span { color: #f8fafc; font-weight: 500; }
.qrv-lock-text { color: #94a3b8; font-style: italic; font-size: 13px; margin: 25px 0; text-align: center; }
.qrv-lab-btn { display: block; background: #22c55e; color: #fff; text-align: center; padding: 12px; border-radius: 8px; text-decoration: none; font-weight: bold; font-size: 15px; transition: background 0.2s; }
.qrv-lab-btn:hover { background: #16a34a; color: #fff; }

@media (max-width: 500px) {
    .qrv-auth-grid { flex-direction: column; gap: 20px; }
    .qrv-grid-col.border-left { border-left: none; padding-left: 0; }
    .qrv-product-img { max-width: 90px; top: -30px; right: 10px; }
}


/* =========================================
   3. HERO SHORTCODE STYLES [qr_verify_hero]
   ========================================= */
.qrv-hero-root {
    background-color: #0b1120; 
    color: #f8fafc;
    padding: 60px 30px;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    margin: 40px 0;
}

.qrv-hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    flex-wrap: wrap;
}

.qrv-hero-content { flex: 1; min-width: 320px; }
.qrv-hero-image-wrap { flex: 1; display: flex; justify-content: center; align-items: center; min-width: 320px; }
.qrv-hero-side-img { max-width: 100%; height: auto; border-radius: 12px; filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.2)); }

.qrv-hero-title { font-size: 46px; font-weight: 800; line-height: 1.15; margin-top: 0; margin-bottom: 20px; color: #ffffff !important; }
.qrv-hero-subtitle { font-size: 18px; color: #94a3b8; margin-bottom: 35px; }

.qrv-hero-input-wrapper { display: flex; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 6px; margin-bottom: 15px; align-items: center; }
.qrv-hero-input { flex: 1; background: transparent !important; border: none !important; color: #ffffff !important; padding: 12px 15px !important; font-size: 16px !important; outline: none !important; text-transform: uppercase; }
.qrv-hero-input::placeholder { color: #64748b !important; text-transform: none; }
.qrv-hero-btn { background: #4ade80 !important; color: #064e3b !important; border: none !important; padding: 14px 25px !important; border-radius: 6px !important; font-weight: 800 !important; cursor: pointer !important; transition: all 0.3s ease !important; white-space: nowrap; }
.qrv-hero-btn:hover { background: #22c55e !important; box-shadow: 0 0 15px rgba(74, 222, 128, 0.5) !important; }
.qrv-hero-warning { color: #cbd5e1; font-size: 14px; margin: 0; }

/* Hero Results Specific Overrides (White Text & Colors) */
.qrv-hero-root .qrv-state-details,
.qrv-hero-root .qrv-state-warning {
    background: transparent;
    padding: 0;
    margin: 0;
    color: #ffffff;
    text-align: left;
}
.qrv-hero-root .qrv-state-warning .qrv-inner-content { align-items: flex-start; text-align: left; }
.qrv-hero-root .qrv-state-warning p.val-error-message { color: #ffffff; padding: 0; font-size: 16px; }
.qrv-hero-root .qrv-banner-red { background: transparent; color: #ef4444; padding: 0; margin: 0 0 15px 0; font-size: 22px; }
.qrv-hero-root .qrv-icon-stop { background: #ef4444; margin-bottom: 10px; }
.qrv-hero-root .qrv-auth-header { color: #22c55e; border-bottom-color: #334155; padding-bottom: 15px; margin-bottom: 20px; }
.qrv-hero-root .qrv-auth-intro { background: transparent; padding: 0; margin-bottom: 20px; border: none; }
.qrv-hero-root .qrv-auth-intro p { color: #ffffff; }
.qrv-hero-root .qrv-grid-col h4 { color: #4ade80; border-bottom-color: #334155; }
.qrv-hero-root .qrv-data-item label, .qrv-hero-root .qrv-info-row label, .qrv-hero-root .text-gray, .qrv-hero-root .qrv-lock-text { color: #cbd5e1; }
.qrv-hero-root .qrv-data-item span, .qrv-hero-root .qrv-info-row span { color: #ffffff; }
.qrv-hero-root .qrv-card-footer { text-align: left; border-top: none; margin-top: 15px; padding: 0; }
.qrv-hero-root .qrv-card-footer a.qrv-back-btn { color: #38bdf8; text-decoration: none; font-weight: bold; }


/* =========================================
   4. MISSION SHORTCODE STYLES [qr_verify_mission]
   ========================================= */
.qrv-mission-root {
    background-color: #0b1120; 
    color: #f8fafc;
    padding: 60px 30px;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 40px 0;
}

.qrv-mission-main-title {
    text-align: center;
    font-size: 38px;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 50px;
    color: #cbd5e1 !important;
}

.qrv-mission-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    flex-wrap: wrap;
}

.qrv-mission-content { flex: 1; min-width: 320px; }
.qrv-mission-image-wrap { flex: 1; display: flex; justify-content: center; align-items: center; min-width: 320px; }
.qrv-mission-side-img { max-width: 100%; height: auto; border-radius: 12px !important; }

.qrv-mission-title { font-size: 28px; font-weight: 800; color: #ffffff !important; margin-top: 0; margin-bottom: 15px; }
.qrv-mission-text { color: #94a3b8 !important; font-size: 16px; line-height: 1.6; margin-bottom: 40px; }
.qrv-mission-subtitle { font-size: 24px; font-weight: bold; color: #cbd5e1 !important; margin-top: 0; margin-bottom: 25px; line-height: 1.4; }

/* 4 Icon Boxes Grid */
.qrv-mission-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.qrv-icon-box {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 20px 10px;
    text-align: center;
    transition: transform 0.2s ease;
}

.qrv-icon-box:hover { transform: translateY(-3px); }

.qrv-icon-box svg {
    width: 36px;
    height: 36px;
    stroke: #4ade80; /* Bright Green */
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 12px;
}

.qrv-icon-label { display: block; color: #f8fafc; font-size: 14px; font-weight: 500; }

@media (max-width: 768px) {
    .qrv-mission-icons { grid-template-columns: repeat(2, 1fr); }
    .qrv-mission-main-title { font-size: 30px; }
}