/* ========================================
   KYC Verification Styles
   EFR, OCR, SmartPass Components
   Optimized for performance and maintainability
   ======================================== */

/* ===== CSS Variables ===== */
:root {
    /* Colors */
    --kyc-primary-blue: #3498db;
    --kyc-success-green: #28a745;
    --kyc-danger-red: #dc3545;
    --kyc-light-gray: #f3f3f3;
    --kyc-dark-gray: #212529;
    --kyc-medium-gray: #666;
    --kyc-medium-gray-alt: #6c757d;
    --kyc-border-gray: #dee2e6;
    --kyc-white: #fff;
    --kyc-black: #000;
    --kyc-bg-light: #f8f9fa;
    --kyc-overlay-dark: rgba(0, 0, 0, 0.7);
    --kyc-overlay-darker: rgba(0, 0, 0, 0.8);

    /* Typography */
    --kyc-font-size-base: 16px;
    --kyc-font-size-lg: 18px;
    --kyc-font-size-xl: 20px;
    --kyc-font-size-2xl: 22px;
    --kyc-font-size-3xl: 24px;
    --kyc-font-size-icon: 64px;
    --kyc-font-size-icon-lg: 72px;
    --kyc-font-weight-medium: 500;
    --kyc-font-weight-semibold: 600;
    --kyc-line-height-normal: 1.5;
    --kyc-line-height-relaxed: 1.6;

    /* Spacing */
    --kyc-spacing-xs: 10px;
    --kyc-spacing-sm: 15px;
    --kyc-spacing-md: 20px;
    --kyc-spacing-lg: 25px;
    --kyc-spacing-xl: 30px;
    --kyc-spacing-2xl: 35px;
    --kyc-spacing-3xl: 40px;
    --kyc-card-padding: 50px 30px;
    --kyc-card-padding-compact: 40px 20px;

    /* Borders */
    --kyc-border-width: 1px;
    --kyc-border-radius: 8px;
    --kyc-border-radius-lg: 12px;
    --kyc-border: 1px solid var(--kyc-border-gray);

    /* Z-index layers */
    --kyc-z-status: 1;
    --kyc-z-modal: 9999;

    /* Shadows */
    --kyc-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --kyc-card-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Dimensions */
    --kyc-spinner-size: 50px;
    --kyc-spinner-border: 4px;
    --kyc-container-max-width: 500px;
    --kyc-container-max-width-lg: 600px;
    --kyc-camera-min-height: 500px;
    --kyc-icon-max-width: 120px;
}

/* ===== Animations ===== */
@keyframes kyc-spin {
    to { transform: rotate(360deg); }
}

/* ===== Utility Classes ===== */
.kyc-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.kyc-text-center {
    text-align: center;
}

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

/* ===== Base Components ===== */

/* Shared Card Base */
.kyc-card-base,
.efr-status-container,
.efr-success-container,
.efr-error-container {
    background: var(--kyc-white);
    border: var(--kyc-border);
    border-radius: var(--kyc-border-radius-lg);
    text-align: center;
}

/* Loading Spinner */
.kyc-spinner {
    width: var(--kyc-spinner-size);
    height: var(--kyc-spinner-size);
    border: var(--kyc-spinner-border) solid var(--kyc-light-gray);
    border-top-color: var(--kyc-primary-blue);
    border-radius: 50%;
    animation: kyc-spin 1s linear infinite;
    margin: 0 auto;
}

.kyc-spinner--inline {
    display: inline-block;
}

/* Overlay */
.kyc-overlay {
    position: fixed;
    inset: 0;
    background: var(--kyc-overlay-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--kyc-z-modal);
}

.kyc-overlay__message,
.ocr-message {
    color: var(--kyc-white);
    font-size: var(--kyc-font-size-lg);
    font-weight: var(--kyc-font-weight-medium);
    text-align: center;
    padding: 0 var(--kyc-spacing-md);
    margin-top: var(--kyc-spacing-md);
}

/* Configuration Containers */
.kyc-config-hidden {
    display: none;
}

/* ===== EFR Components ===== */

/* Camera */
.efr-camera-section {
    display: none;
}

.efr-camera-container,
.efr-flow-camera-container {
    width: 100%;
    min-height: var(--kyc-camera-min-height);
    position: relative;
}

.efr-camera-container {
    display: block;
}

.efr-flow-camera-container {
    display: none;
}

/* Status Container */
.efr-status-container {
    padding: var(--kyc-card-padding-compact);
    box-shadow: var(--kyc-card-shadow-medium);
    margin: var(--kyc-spacing-md) auto;
    max-width: var(--kyc-container-max-width);
    position: relative;
    z-index: var(--kyc-z-status);
}

.efr-status-container--flow {
    padding: var(--kyc-card-padding);
    box-shadow: var(--kyc-card-shadow);
}

.efr-status-icon {
    margin-bottom: var(--kyc-spacing-lg);
    text-align: center;
}

.efr-status-text {
    font-size: var(--kyc-font-size-lg);
    font-weight: var(--kyc-font-weight-semibold);
    color: var(--kyc-dark-gray);
    margin-bottom: var(--kyc-spacing-xl);
    line-height: var(--kyc-line-height-normal);
}

.efr-status-text--large {
    font-size: var(--kyc-font-size-xl);
    margin-bottom: var(--kyc-spacing-2xl);
    line-height: var(--kyc-line-height-relaxed);
}

/* Success Container */
.efr-success-container {
    display: none;
    padding: var(--kyc-card-padding-compact);
    box-shadow: var(--kyc-card-shadow-medium);
}

.efr-success-container--flow {
    padding: var(--kyc-card-padding);
    box-shadow: var(--kyc-card-shadow);
}

.efr-success-icon {
    font-size: var(--kyc-font-size-icon);
    color: var(--kyc-success-green);
    margin-bottom: var(--kyc-spacing-md);
}

.efr-success-icon--large {
    font-size: var(--kyc-font-size-icon-lg);
    margin-bottom: var(--kyc-spacing-lg);
}

.efr-success-title {
    color: var(--kyc-black);
    font-size: var(--kyc-font-size-3xl);
    font-weight: var(--kyc-font-weight-semibold);
    margin-bottom: var(--kyc-spacing-xs);
}

.efr-success-title--medium {
    font-size: var(--kyc-font-size-2xl);
    margin-bottom: var(--kyc-spacing-sm);
    line-height: 1.4;
}

.efr-success-message {
    font-size: var(--kyc-font-size-base);
    color: var(--kyc-medium-gray);
}

.efr-success-message--gray {
    color: var(--kyc-medium-gray-alt);
    line-height: var(--kyc-line-height-normal);
}

/* Error Container */
.efr-error-container {
    display: none;
    padding: var(--kyc-spacing-md);
    box-shadow: var(--kyc-card-shadow-medium);
}

.efr-error-container--flow {
    padding: var(--kyc-card-padding);
    box-shadow: var(--kyc-card-shadow);
}

.efr-error-icon {
    font-size: var(--kyc-font-size-icon);
    color: var(--kyc-danger-red);
    margin-bottom: var(--kyc-spacing-md);
}

.efr-error-title {
    color: var(--kyc-danger-red);
    font-size: var(--kyc-font-size-3xl);
    font-weight: var(--kyc-font-weight-semibold);
    margin-bottom: var(--kyc-spacing-xs);
}

.efr-error-message {
    font-size: var(--kyc-font-size-base);
    color: var(--kyc-medium-gray);
    margin-bottom: var(--kyc-spacing-md);
}

.efr-retry-button {
    padding: var(--kyc-spacing-xs) var(--kyc-spacing-xl);
    font-size: var(--kyc-font-size-base);
}

/* EFR-Only Flow (QR Scan Landing) */
.efr-only-section {
    text-align: center;
    padding: var(--kyc-spacing-3xl) var(--kyc-spacing-md);
}

.efr-only-content {
    max-width: var(--kyc-container-max-width-lg);
    margin: 0 auto;
}

.efr-only-icon,
.efr-only-actions {
    margin-bottom: 1rem;
}

.efr-icon-image {
    max-width: var(--kyc-icon-max-width);
    height: auto;
    margin: 0 auto;
}

.efr-help-text {
    text-align: center;
}

/* EFR Flow Container */
.efr-flow-container {
    display: none;
    width: 100%;
    min-height: var(--kyc-container-max-width-lg);
    padding: var(--kyc-spacing-md);
    background: var(--kyc-bg-light);
}

.efr-flow-container__inner {
    width: 100%;
    max-width: var(--kyc-container-max-width-lg);
    margin: 0 auto;
}

/* EFR QR Code Modal */
.efr-qr-container {
    position: fixed;
    inset: 0;
    background: var(--kyc-overlay-darker);
    z-index: var(--kyc-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.efr-qr-content {
    background: var(--kyc-white);
    padding: var(--kyc-spacing-3xl);
    border-radius: var(--kyc-border-radius);
    max-width: var(--kyc-container-max-width);
    text-align: center;
}

.efr-qr-image-container {
    margin: var(--kyc-spacing-md) 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* EFR Progress Bar */
.efr-progress-bar {
    transition: width 0.3s ease-in-out;
    color: var(--kyc-white);
    font-weight: var(--kyc-font-weight-medium);
    line-height: var(--kyc-line-height-normal);
    text-align: center;
}

/* ===== SmartPass Components ===== */
.smartpass-container {
    text-align: center;
}

.smartpass-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.smartpass-error-msg {
    display: none;
    margin-top: var(--kyc-spacing-sm);
}

/* ===== OCR Components ===== */

/* OCR Overlay */
.ocr-overlay {
    position: fixed;
    inset: 0;
    background: var(--kyc-overlay-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--kyc-z-modal);
}

/* OCR Spinner */
.ocr-spinner {
    width: var(--kyc-spinner-size);
    height: var(--kyc-spinner-size);
    border: var(--kyc-spinner-border) solid var(--kyc-light-gray);
    border-top-color: var(--kyc-primary-blue);
    border-radius: 50%;
    animation: kyc-spin 1s linear infinite;
    margin: 0 auto var(--kyc-spacing-md);
}

/* OCR Message */
.ocr-message {
    color: var(--kyc-white);
    font-size: var(--kyc-font-size-lg);
    font-weight: var(--kyc-font-weight-medium);
    text-align: center;
    padding: 0 var(--kyc-spacing-md);
    margin-top: var(--kyc-spacing-md);
}