/* styles for the verification manager modal */

/* overlay for the modal */
.modal-overlay {
    /* display: block !important; */

    display: none; /* hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;

    /* Використовуємо flexbox для центрування модального вікна, але керуємо через JS */
    align-items: center; /* Центрування по вертикалі */
    justify-content: center; /* Центрування по горизонталі */
}

/* main modal container */
#mobcash-verification-modal {
    /* display: block !important; */

    display: none; /* hidden by default, JS will show/hide the parent overlay */
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    max-width: 450px; /* Adjusted max-width for better appearance */
    width: 90%; /* responsive width */
    box-sizing: border-box; /* Include padding in width */
    position: relative; /* Для позиціонування кнопки закриття */
}

/* close button */
#modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px; /* Slightly larger for easier clicking */
    cursor: pointer;
    color: #333;
    border: none;
    background: none;
    line-height: 1;
    padding: 5px;
    z-index: 10001; /* Перекриває інші елементи, щоб бути клікабельним */
}

#modal-close-button:hover {
    color: #000;
}

/* form content and results */
#initial-verification-form,
#verification-loading-indicator, /* Assuming this will be added to HTML */
#mobcash-positive-result-popup,
#mobcash-negative-result-popup {
    display: none; /* managed by JS */
    text-align: center;
    padding-top: 20px; /* Spacing below title */
}

/* default state for the initial form */
#initial-verification-form {
    display: block; 
}

/* titles and messages inside modal */
#mobcash-verification-modal h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
    color: #333;
}

#mobcash-verification-modal p {
    font-size: 1em;
    margin-bottom: 10px;
    color: #555;
}

/* error message styling */
#verification-error-message {
    color: red;
    margin-top: 15px;
    margin-bottom: 10px; /* Added margin-bottom */
    min-height: 20px; /* reserve space */
    font-size: 0.9em;
    font-weight: bold;
}

/* radio button group */
.radio-buttons {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between radio buttons */
}

.radio-buttons label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1em;
    color: #333;
}

/* Make the radio button itself clearly visible when checked */
.radio-buttons input[type="radio"] {
    margin-right: 8px;
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
    /* Make sure it's a visible circle and not transparent */
    border: 2px solid #ccc; /* Thicker border */
    border-radius: 50%; /* Ensure it's round */
    width: 20px; /* Larger size */
    height: 20px;
    background-color: #eee; /* Light background when unchecked */
    box-shadow: none; 
    vertical-align: middle;
    cursor: pointer;
}

.radio-buttons input[type="radio"]:checked {
    border-color: #007bff; /* Blue border when checked */
    background-color: #007bff; /* Blue background when checked */
    /* Add an inner dot for extra clarity */
    position: relative;
}

.radio-buttons input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: #fff; /* White dot */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Highlight the text label of the checked radio button */
/* This assumes the text is directly next to the input within the label */
.radio-buttons label input[type="radio"]:checked ~ span { /* This selector won't work without a span. */ }

/* Given the HTML structure <label><input>Text</label>, we can try styling the label itself: */
.radio-buttons label:has(input[type="radio"]:checked) { /* Using :has() for better targeting, if supported */
    font-weight: bold;
    color: #007bff; /* Highlight text with blue */
}

/* For broader compatibility, if :has() is not supported, we rely on the input styling. */
/* Placeholder visibility: */
#verification_value::placeholder {
    color: #333 !important; /* Make placeholder very dark */
    opacity: 1 !important; /* Ensure full opacity */
    font-weight: bold !important; /* Make placeholder bold */
}
#verification_value::-webkit-input-placeholder {
    color: #333 !important;
    opacity: 1 !important;
    font-weight: bold !important;
}
#verification_value::-moz-placeholder {
    color: #333 !important;
    opacity: 1 !important;
    font-weight: bold !important;
}
#verification_value:-ms-input-placeholder {
    color: #333 !important;
    opacity: 1 !important;
    font-weight: bold !important;
}


/* verify button */
#verify-manager-button-main {
    background-color: #007bff; /* Blue color */
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
    min-width: 150px; /* Ensure button has minimum width */
}

#verify-manager-button-main:hover {
    background-color: #0056b3;
}

/* loading indicator - if added to HTML */
#verification-loading-indicator {
    padding: 30px;
    font-size: 1.2em;
    color: #555;
    /* Basic spinner if you add one later */
}

/* success/error result popups */
.verification-result-popup {
    padding: 20px;
}

.verification-result-popup .popup-icon {
    font-size: 3.5em; /* Larger icon */
    margin-bottom: 15px;
}

.verification-result-popup .popup-title {
    font-size: 1.6em;
    margin-bottom: 10px;
    color: #333;
}

.verification-result-popup .popup-message {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #666;
}

.verification-result-popup .go-back-button {
    background-color: #6c757d; /* Grey color for secondary action */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.verification-result-popup .go-back-button:hover {
    background-color: #5a6268;
}