/* New user registration page specific styles */

.flash-message {
    margin-top: 10px;
}

.error-message {
    color: red;
    font-size: 0.9em;
    display: none;
}

/* ダークモード対応 */
body.dark-mode {
    background-color: #121212;
    color: #E0E0E0;
}

body.dark-mode .container {
    background-color: #1e1e1e;
    color: #E0E0E0;
}

body.dark-mode .error-message {
    color: #ff6b6b;
}

body.dark-mode .form-control {
    background-color: #2a2a2a;
    color: #E0E0E0;
    border-color: #555;
}

body.dark-mode .form-control:focus {
    background-color: #333;
    color: #E0E0E0;
    border-color: #4c8bf5;
}

/* タブレット用メディアクエリ */
@media (max-width: 768px) {
    .container {
        width: calc(100% - 20px);
        max-width: 100%;
        padding: 15px;
        margin: 10px auto;
    }
    
    .form-control {
        min-height: 44px;
        font-size: 16px;
    }
    
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        font-size: 16px;
    }
}

/* モバイル用メディアクエリ */
@media (max-width: 576px) {
    .container {
        width: calc(100% - 10px);
        max-width: 100%;
        padding: 10px;
        margin: 5px auto;
    }
    
    .btn {
        width: 100%;
        margin: 5px 0;
    }
}

/* デスクトップ用メディアクエリ */
@media (min-width: 992px) {
    .container {
        max-width: 600px;
    }
}