/* Styles for authentication pages like verify-session */

.verify-session-page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 80vh; /* Adjust as needed, considering header/footer from main.hbs */
    padding: 20px; /* Add some padding for smaller screens */
    box-sizing: border-box;
}

.verify-session-container {
    background-color: var(--surface-color);
    color: var(--text-color);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--shadow-color);
    text-align: center;
    max-width: 450px;
    width: 100%; /* Allow it to take full width up to max-width */
    transition: background-color 0.3s, color 0.3s;
}

.verify-session-container h1 {
    color: var(--text-color); /* Assuming headers should use primary text color */
    margin-bottom: 20px;
    font-size: 1.75rem; /* Example size */
}

.verify-session-container p {
    margin-bottom: 15px;
    line-height: 1.6;
    color: var(--text-muted);
}

.verify-session-container .contact-info {
    margin-bottom: 20px;
    font-weight: bold;
}

.verify-session-container .contact-info p {
    color: var(--text-color); /* Make contact info stand out a bit more */
}

.verify-session-container .form-group {
    margin-bottom: 20px;
    text-align: left;
}

.verify-session-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color);
}

.verify-session-container .form-group.form-group-inline { /* New class for inline items */
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 10px; /* Space between input and button */
}

.verify-session-container .form-group.code-timer-group {
    justify-content: center;
    text-align: center;
    margin-bottom: 24px;
}

.verify-session-container input#verificationCode {
    max-width: 180px;
    margin-right: 0;
    margin-left: 0;
    text-align: center;
}

.verify-session-container .form-group.form-group-inline {
    justify-content: center;
}

.verify-session-container input[type="text"],
.verify-session-container input[type="number"] {
    width: 100%; /* Use 100% and box-sizing for easier width management */
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px; /* Consistent border radius */
    font-size: 16px;
    background-color: var(--bg-color); /* Inputs on surface, might need different bg */
    color: var(--text-color);
}

.verify-session-container input[type="text"]:focus {
    border-color: var(--primary-color);
    outline: none;
}

.verify-session-container input[type="text"]:not(:focus) {
    border-color: var(--border-color);
}

.verify-session-container .form-group.form-group-inline input[type="text"] {
    flex-grow: 1; /* Allow input to take available space */
    width: auto; /* Override 100% width when in this group */
}

.verify-session-container .radio-group label {
    display: inline-block;
    margin-right: 15px;
    font-weight: normal;
}

.verify-session-container .radio-group input[type="radio"] {
    margin-right: 5px;
    accent-color: var(--primary-color); /* Style radio button check color */
}

/* General button, message, spinner styles could be moved to theme.css if used globally */
/* For now, scoped to verify-session-container */
.verify-session-container .btn-primary { /* Using a class for primary button */
    background-color: var(--primary-color);
    color: white; /* Assuming primary buttons have white text */
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.verify-session-container .btn-inline-action { /* New class for resend button */
    width: auto; /* Override full width */
    padding: 5px 10px;
    font-size: 0.9em;
    margin-top: 0; /* Adjust if it's part of form-group-inline */
    /* margin-left: 10px; /* This will be handled by gap in form-group-inline */
    flex-shrink: 0; /* Prevent button from shrinking */
}


.verify-session-container .btn-primary:hover:not(:disabled) {
    /* Define a hover state, perhaps by darkening primary-color or using a specific variable */
    opacity: 0.9;
}

.verify-session-container .btn-primary:disabled {
    background-color: var(--text-muted); /* Or a specific disabled color variable */
    opacity: 0.7;
    cursor: not-allowed;
}

.verify-session-container .message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid transparent;
}

.verify-session-container .message.success {
    background-color: rgba(var(--success-color-rgb, 76, 175, 80), 0.1); /* Use RGB for transparency */
    color: var(--success-color, #4CAF50);
    border-color: var(--success-color, #4CAF50);
}

.verify-session-container .message.error {
    background-color: rgba(var(--danger-color-rgb, 220, 53, 69), 0.1); /* Use RGB for transparency */
    color: var(--danger-color, #dc3545);
    border-color: var(--danger-color, #dc3545);
}

.verify-session-container .hidden {
    display: none !important; /* Use important if necessary to override other display properties */
}

.verify-session-container .spinner {
    border: 4px solid rgba(var(--text-color-rgb, 248, 249, 250), 0.2); /* Lighter track for spinner */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border-left-color: var(--primary-color);
    animation: spin 1s ease infinite;
    margin: 10px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Styles for access-denied page */
.access-denied-page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh; /* Adjust based on your header/footer in base.hbs */
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.access-denied-container {
    background-color: var(--surface-color);
    color: var(--text-color);
    padding: 30px 40px;
    border-radius: 8px; /* Or var(--border-radius-lg) */
    box-shadow: 0 4px 15px var(--shadow-color); /* Or var(--card-shadow) */
    max-width: 500px;
    width: 100%;
}

.access-denied-container h1 {
    color: var(--text-color); /* Or var(--header-text-color) */
    margin-bottom: 20px;
    font-size: 1.8rem; /* Adjust as needed */
}

.access-denied-container h1 .fa-exclamation-triangle {
    color: var(--warning-color, #ffc107); /* Define --warning-color in theme.css */
    margin-right: 10px;
}

.access-denied-container p {
    font-size: 1.1em;
    margin-top: 15px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.access-denied-container p.details-message { /* Example for a specific message paragraph */
    margin-top: 15px;
    font-style: italic;
    color: var(--text-muted);
}

.code-timer-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.code-timer {
    font-size: 0.95em;
    color: var(--text-muted);
}
.btn-link {
    background: none;
    border: none;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.95em;
    border-radius: 4px;
    transition: background 0.2s;
}
.btn-link:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    text-decoration: none;
}
.btn-link:hover:not(:disabled) {
    background: rgba(var(--primary-color-rgb, 0,123,255), 0.08);
    text-decoration: underline;
}

/* Larger checkbox and label for better mobile usability */
.verify-session-container label[for="trustDeviceCheckbox"],
.verify-session-container #trustDeviceCheckbox {
    font-size: 1.1em;
    line-height: 1.8;
    cursor: pointer;
}

.verify-session-container #trustDeviceCheckbox {
    width: 1.3em;
    height: 1.3em;
    vertical-align: middle;
    accent-color: var(--primary-color);
    margin-right: 8px;
}