/*
 * Verify Enrollment V2 Page-Specific Styles
 * Using Ebury Design System tokens
 * Common styles are in common-v2.css
 * This file contains ONLY verify-enrollment-specific styles
 */

/* ============================================
   Method Selection Styles
   ============================================ */

#totp-secret {
    pointer-events: none;
    opacity: 0.8;
    outline: none;
    outline-offset: 0;
    font-size: var(--eds-size-075); /* 12px - smaller font for full code visibility */
    letter-spacing: 0.5px;
    font-family: monospace; /* Monospace font for better readability of code */
}

.kc-enrollment-method-options {
    display: flex;
    flex-direction: column;
}

.kc-radio-option {
    display: flex;
    align-items: center;
    gap: var(--eds-space-075);
    padding: var(--eds-space-037);
    border-radius: var(--v2-border-radius-input);
    cursor: pointer;
    transition: all var(--v2-transition-speed) ease;
}

.kc-radio-option:hover {
    border-color: var(--v2-color-border-hover);
    background-color: var(--v2-bg-input-hover);
}

.kc-radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

.kc-radio-option label {
    cursor: pointer;
    margin: 0;
    font-size: var(--v2-font-size-input);
    font-weight: var(--eds-font-weight-medium);
    color: var(--v2-color-text-primary);
    flex: 1;
    transition: color var(--v2-transition-speed) ease;
}

.kc-radio-option input[type="radio"]:checked + label {
    color: var(--eds-control-action-background-rest);
}

#kc-otp-form-section.dark .kc-radio-option {
    border-color: var(--eds-grey-700);
    background-color: transparent;
}

#kc-otp-form-section.dark .kc-radio-option:hover {
    border-color: var(--eds-grey-600);
    background-color: var(--eds-grey-900);
}

#kc-otp-form-section.dark .kc-radio-option label {
    color: var(--v2-color-text-primary);
}

#kc-otp-form-section.dark .kc-radio-option input[type="radio"]:checked + label {
    color: var(--eds-blue-400);
}

/* ============================================
   QR Code Display Styles
   ============================================ */
.kc-enrollment-qr-section {
    text-align: center;
    margin: var(--eds-space-100) 0;
}

.kc-qr-code-wrapper {
    display: inline-block;
    padding: var(--eds-space-100);
    background: var(--eds-white-100);
    border-radius: var(--eds-border-radius-large);
    box-shadow: var(--v2-box-shadow);
    transition: background var(--v2-transition-speed) ease;
}

/* Dark mode: Keep QR code background white for scanability */
#kc-otp-form-section.dark .kc-qr-code-wrapper {
    background: var(--eds-white-100);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.kc-qr-code-image {
    width: 200px;
    height: 200px;
    display: block;
}

.kc-copy-button {
    padding: var(--v2-spacing-input-padding); /* Match input field padding */
    background: var(--v2-bg-input);
    border: 1px solid var(--v2-color-border-default);
    border-radius: var(--v2-border-radius-button);
    cursor: pointer;
    font-size: 16px; /* Icon size */
    font-weight: var(--eds-font-weight-normal);
    color: var(--v2-color-text-primary);
    white-space: nowrap;
    transition: all var(--v2-transition-speed) ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    aspect-ratio: 1; /* Keep it square */
}

.kc-copy-button:hover {
    background: var(--v2-bg-input-hover);
    border-color: var(--v2-color-border-hover);
}

.kc-copy-button svg {
    display: block;
}

#kc-otp-form-section.dark .kc-copy-button {
    background: var(--v2-bg-input);
    border-color: var(--v2-color-border-default);
    color: var(--v2-color-text-primary);
}

#kc-otp-form-section.dark .kc-copy-button:hover {
    background: var(--v2-bg-input-hover);
    border-color: var(--v2-color-border-hover);
}

/* Copy Button Success State */
.kc-copy-button-success {
    background: var(--eds-green-500) !important;
    border-color: var(--eds-green-600) !important;
    color: var(--eds-white-100) !important;
}

.kc-copy-button-success:hover {
    background: var(--eds-green-500) !important;
    border-color: var(--eds-green-600) !important;
}

#kc-otp-form-section.dark .kc-copy-button-success {
    background: var(--eds-green-600) !important;
    border-color: var(--eds-green-700) !important;
    color: var(--eds-white-100) !important;
}

#kc-otp-form-section.dark .kc-copy-button-success:hover {
    background: var(--eds-green-600) !important;
    border-color: var(--eds-green-700) !important;
}

/* ============================================
   Phone Input Styles
   ============================================ */
.kc-searchable-select-wrapper {
    position: relative;
    width: 100%;
}

.kc-searchable-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background: var(--v2-bg-input);
    border: 1px solid var(--v2-color-border-default);
    border-radius: var(--v2-border-radius-input);
    box-shadow: var(--v2-box-shadow);
    z-index: 1000;
    margin-top: var(--eds-space-025);
    display: none;
}

.kc-searchable-select-dropdown.open {
    display: block;
}

.kc-searchable-select-option {
    padding: var(--eds-space-075) var(--eds-space-100);
    cursor: pointer;
    font-size: var(--v2-font-size-input);
    color: var(--v2-color-text-primary);
    transition: background var(--v2-transition-speed) ease;
}

.kc-searchable-select-option:hover,
.kc-searchable-select-option.highlighted {
    background: var(--v2-bg-input-hover);
}

.kc-searchable-select-option.selected {
    background: var(--v2-bg-input-focus);
    color: var(--eds-control-action-background-rest);
}

.kc-searchable-select-option.hidden {
    display: none;
}

#kc-otp-form-section.dark .kc-searchable-select-dropdown {
    background: var(--v2-bg-input);
    border-color: var(--v2-color-border-default);
}

#kc-otp-form-section.dark .kc-searchable-select-option {
    color: var(--v2-color-text-primary);
}

#kc-otp-form-section.dark .kc-searchable-select-option:hover,
#kc-otp-form-section.dark .kc-searchable-select-option.highlighted {
    background: var(--v2-bg-input-hover);
}

#kc-otp-form-section.dark .kc-searchable-select-option.selected {
    background: var(--v2-bg-input-focus);
    color: var(--eds-blue-400);
}

/* ============================================
   Verification Styles
   ============================================ */
.kc-attempts-info {
    text-align: center;
    font-size: var(--v2-font-size-label);
    font-weight: var(--eds-font-weight-normal);
    color: var(--v2-color-text-secondary);
    margin-bottom: var(--eds-space-100);
    transition: color var(--v2-transition-speed) ease;
}

/* ============================================
   Label Styles (used in phone input form)
   ============================================ */
.kc-label-v2 {
    font-size: var(--v2-font-size-label);
    font-weight: var(--eds-font-weight-normal);
    color: var(--v2-color-text-secondary);
    margin: 0;
    padding: 0;
    transition: color var(--v2-transition-speed) ease;
}

/* ============================================
   Alert Styles (used in enrollment forms)
   ============================================ */
.kc-alert-v2 {
    padding: var(--eds-space-075) var(--eds-space-100);
    border-radius: var(--v2-border-radius-input);
    margin: var(--eds-space-100) 0;
    font-size: var(--v2-font-size-label);
    transition: all var(--v2-transition-speed) ease;
}

.kc-alert-v2.alert-error {
    background: var(--eds-red-50);
    border: 1px solid var(--eds-red-500);
    color: var(--eds-red-700);
}

.kc-alert-v2.alert-success {
    background: var(--eds-green-50);
    border: 1px solid var(--eds-green-500);
    color: var(--eds-green-700);
}

.kc-alert-v2.alert-warning {
    background: var(--eds-yellow-50);
    border: 1px solid var(--eds-yellow-500);
    color: var(--eds-yellow-700);
}

.kc-alert-v2.alert-info {
    background: var(--eds-blue-50);
    border: 1px solid var(--eds-blue-500);
    color: var(--eds-blue-700);
}

.kc-alert-v2 .kc-feedback-text {
    font-weight: var(--eds-font-weight-normal);
}

/* Dark mode: Alert styles */
#kc-otp-form-section.dark .kc-alert-v2.alert-error {
    background: rgba(220, 38, 38, 0.1);
    border-color: var(--eds-red-500);
    color: var(--eds-red-300);
}

#kc-otp-form-section.dark .kc-alert-v2.alert-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--eds-green-500);
    color: var(--eds-green-300);
}

#kc-otp-form-section.dark .kc-alert-v2.alert-warning {
    background: rgba(234, 179, 8, 0.1);
    border-color: var(--eds-yellow-500);
    color: var(--eds-yellow-300);
}

#kc-otp-form-section.dark .kc-alert-v2.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--eds-blue-500);
    color: var(--eds-blue-300);
}