/* 
 * Backup Phrase CSS Styles
 * Date: June 3, 2025
 */

/* Password visibility toggle */
.toggle-password {
    cursor: pointer;
}

.toggle-password:focus {
    outline: none;
    box-shadow: none;
}

/* Input group for password fields */
.input-group .form-control {
    border-right: 0;
}

.input-group-append .btn {
    border-color: #d1d3e2;
    color: #858796;
}

.input-group-append .btn:hover {
    background-color: #eaecf4;
}

/* Backup phrase container */
.backup-phrase-display-wrapper {
    position: relative;
}

/* Masked phrase styling */
.masked-phrase {
    font-family: monospace;
    letter-spacing: 1px;
    user-select: none;
}

/* Backup phrase word grid for modal */
.backup-phrase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 15px 0;
    background-color: #f8f9fc;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #e3e6f0;
}

.backup-phrase-word {
    padding: 8px;
    background-color: #eaecf4;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
}

.word-number {
    color: #4e73df;
    font-weight: bold;
    margin-right: 5px;
}

/* Security notice styling */
.security-notice {
    border-left: 4px solid #f6c23e;
    padding: 10px 15px;
    background-color: #fff3cd;
    color: #856404;
    border-radius: 0 4px 4px 0;
    margin-top: 20px;
}

/* Tip card styling */
.tip-card {
    border-left: 4px solid #36b9cc;
    padding: 10px 15px;
    background-color: #d1ecf1;
    border-radius: 0 4px 4px 0;
}

.tip-icon {
    color: #36b9cc;
    font-size: 1.5rem;
    margin-right: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .backup-phrase-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .backup-phrase-grid {
        grid-template-columns: 1fr;
    }
}