.niv-verifier-container {
    background: linear-gradient(135deg, #003366 0%, #0055aa 100%);
    /* Dark blue gradient approximation */
    color: #fff;
    padding: 60px 20px;
    font-family: 'Arial', sans-serif;
    /* Fallback font */
    display: flex;
    justify-content: center;
    min-height: 80vh;
    /* Ensure it takes up space */
}

.niv-verifier-content {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    align-items: center;
    gap: 40px;
}

.niv-left-column {
    flex: 1;
    min-width: 300px;
}

.niv-right-column {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.niv-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
}

.niv-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
}

.niv-description strong {
    font-weight: bold;
    color: #fff;
}

.niv-input-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
}

.niv-input {
    padding: 15px;
    border-radius: 5px;
    border: none;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.niv-button {
    padding: 15px 30px;
    background-color: #5dade2;
    /* Light blue button */
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    width: fit-content;
}

.niv-button-group {
    display: flex;
    gap: 10px;
    /* Espacio entre los botones */
}

.niv-button:hover {
    background-color: #3498db;
}

.niv-car-image-placeholder {
    width: 100%;
    height: 300px;
    background-image: url('https://placehold.co/600x400/004488/ffffff?text=Car+Image');
    /* Placeholder */
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.placa-button {
    padding: 10px 20px;
    font-size: 1rem;
    color: #fff;
    background-color: #28a745;
    /* Tono de verde */
    border: 1px solid #28a745;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    /* margin-left: 10px; */
    /* Eliminado para usar el gap del contenedor flex */
    /* Espacio para separarlo del otro botón */
}

.placa-button:hover {
    background-color: #218838;
    /* Tono de verde más oscuro para el hover */
    border-color: #1e7e34;
}

/* Info Section Styles */
.niv-info-section {
    background-color: #fff;
    color: #333;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

.niv-info-content {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    gap: 40px;
    align-items: center;
}

.niv-info-text {
    flex: 1;
    min-width: 300px;
}

.niv-info-title {
    color: #004080;
    /* Blue title */
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.niv-info-text p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
}

.niv-info-graphic {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.vin-box-container {
    display: flex;
    gap: 5px;
    align-items: flex-end;
}

.vin-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vin-label {
    font-weight: bold;
    color: #004080;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.vin-sublabel {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
    max-width: 150px;
}

.vin-box {
    border: 2px solid #004080;
    border-radius: 5px;
    padding: 10px 15px;
    font-family: monospace;
    font-size: 1.5rem;
    font-weight: bold;
    color: #004080;
    background: #fff;
    letter-spacing: 5px;
}

/* Verification View Styles */
.niv-verification-view {
    background-color: #fff;
    color: #333;
    padding: 60px 20px;
    min-height: 80vh;
}

.verification-content {
    max-width: 1000px;
    margin: 0 auto;
}

.verification-title {
    color: #4285f4;
    /* Google Blue-ish */
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 30px;
}

.verification-cost {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.verification-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.terms-container {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 5px;
    display: flex;
    gap: 20px;
}

.terms-box {
    height: 200px;
    overflow-y: auto;
    padding-right: 10px;
    width: 100%;
    /* Full width for now, payment on side in desktop */
}

.terms-box h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #003366;
}

.payment-section {
    display: flex;
    justify-content: flex-end;
    /* Align to right like image */
    margin-bottom: 30px;
}

.payment-options {
    border-left: 1px solid #ccc;
    padding-left: 20px;
    min-width: 300px;
}

.payment-methods {
    list-style: none;
    padding: 0;
}

.payment-methods li {
    margin-bottom: 15px;
}

.payment-methods span {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #666;
}

.payment-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pay-icon {
    background: #f0f0f0;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8rem;
    border: 1px solid #ddd;
}



.niv-car-image-placeholder {
    width: 100%;
    height: 300px;
    background-image: url('https://placehold.co/600x400/004488/ffffff?text=Car+Image');
    /* Placeholder */
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Info Section Styles */
.niv-info-section {
    background-color: #fff;
    color: #333;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

.niv-info-content {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    gap: 40px;
    align-items: center;
}

.niv-info-text {
    flex: 1;
    min-width: 300px;
}

.niv-info-title {
    color: #004080;
    /* Blue title */
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.niv-info-text p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
}

.niv-info-graphic {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.vin-box-container {
    display: flex;
    gap: 5px;
    align-items: flex-end;
}

.vin-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vin-label {
    font-weight: bold;
    color: #004080;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.vin-sublabel {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
    max-width: 150px;
}

.vin-box {
    border: 2px solid #004080;
    border-radius: 5px;
    padding: 10px 15px;
    font-family: monospace;
    font-size: 1.5rem;
    font-weight: bold;
    color: #004080;
    background: #fff;
    letter-spacing: 5px;
}

/* Verification View Styles */
.niv-verification-view {
    background-color: #fff;
    color: #333;
    padding: 60px 20px;
    min-height: 80vh;
}

.verification-content {
    max-width: 1000px;
    margin: 0 auto;
}

.verification-title {
    color: #4285f4;
    /* Google Blue-ish */
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 30px;
}

.verification-cost {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.verification-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.terms-container {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 5px;
    display: flex;
    gap: 20px;
}

.terms-box {
    height: 200px;
    overflow-y: auto;
    padding-right: 10px;
    width: 100%;
    /* Full width for now, payment on side in desktop */
}

.terms-box h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #003366;
}

.payment-section {
    display: flex;
    justify-content: flex-end;
    /* Align to right like image */
    margin-bottom: 30px;
}

.payment-options {
    border-left: 1px solid #ccc;
    padding-left: 20px;
    min-width: 300px;
}

.payment-methods {
    list-style: none;
    padding: 0;
}

.payment-methods li {
    margin-bottom: 15px;
}

.payment-methods span {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #666;
}

.payment-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pay-icon {
    background: #f0f0f0;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8rem;
    border: 1px solid #ddd;
}

.verification-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.action-btn {
    padding: 15px 30px;
    border: none;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    transition: opacity 0.3s;
}

.correct-btn {
    background-color: #66ff66;
    /* Light green */
    color: #fff;
    /* White text might be hard to read on light green, adjusting */
    background-color: #69f0ae;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.pay-btn {
    background-color: #4fc3f7;
    /* Light blue */
}

.action-btn:hover {
    opacity: 0.9;
}

.payment-footer {
    margin-top: 30px;
    color: #666;
    font-size: 0.9rem;
}

@media (min-width: 769px) {
    .terms-container {
        /* If we want payment side-by-side with terms, we need a different structure. 
           The image shows payment options to the right of terms? Or below? 
           Image shows "Opciones de pago" on the right column. 
           Let's restructure HTML slightly if needed, or use flex here. */
        display: flex;
        justify-content: space-between;
    }

    .terms-box {
        flex: 2;
        margin-right: 20px;
    }

    .payment-section {
        flex: 1;
        border-left: 1px solid #ccc;
        padding-left: 20px;
        margin-bottom: 0;
        justify-content: flex-start;
    }

    .payment-options {
        border-left: none;
        padding-left: 0;
    }
}

@media (max-width: 768px) {

    .niv-verifier-content,
    .niv-info-content {
        flex-direction: column;
    }

    .niv-title {
        font-size: 2rem;
    }

    .vin-box-container {
        flex-wrap: wrap;
    }

    .terms-container {
        flex-direction: column;
    }

    .payment-section {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #ccc;
        padding-top: 20px;
    }
}


@media (max-width: 768px) {

    .niv-verifier-content,
    .niv-info-content {
        flex-direction: column;
    }

    .niv-title {
        font-size: 2rem;
    }

    .vin-box-container {
        flex-wrap: wrap;
    }

    .terms-container {
        flex-direction: column;
    }

    .payment-section {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #ccc;
        padding-top: 20px;
    }
}