/* ユーザー登録ページ専用スタイル */

/* ========================================
   1. メインコンテナ
======================================== */

.register-container {
    max-width: 700px;
    margin: var(--bb-space-12, 3rem) auto;
    padding: var(--bb-space-10, 2.5rem);
    background: #ffffff;
    border-radius: var(--bb-radius-xl, 1rem);
    box-shadow: var(--bb-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    border: 1px solid var(--bb-gray-200, #e9ecef);
}

/* ========================================
   2. ヘッダーセクション
======================================== */

.register-header {
    text-align: center;
    margin-bottom: var(--bb-space-8, 2rem);
}

.register-header h1 {
    color: var(--bb-main-text-color-color, #333);
    font-size: var(--bb-font-size-3xl, 1.875rem);
    margin-bottom: var(--bb-space-2, 0.5rem);
    border-bottom: 3px solid var(--bb-accent-color, #ffd700);
    padding-bottom: var(--bb-space-2, 0.5rem);
}

.register-header p {
    color: var(--bb-gray-600, #666);
    font-size: var(--bb-font-size-base, 1rem);
    margin-top: var(--bb-space-4, 1rem);
    line-height: 1.6;
}

/* ========================================
   3. 重要な注意書きセクション
======================================== */

.notice-section {
    background: var(--bb-warning, #ffc107);
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.1) 0%,
            rgba(255, 193, 7, 0.05) 100%);
    border: 2px solid var(--bb-warning, #ffc107);
    border-radius: var(--bb-radius-lg, 0.75rem);
    padding: var(--bb-space-6, 1.5rem);
    margin-bottom: var(--bb-space-8, 2rem);
}

.notice-important {
    font-size: var(--bb-font-size-lg, 1.125rem);
    font-weight: 700;
    color: var(--bb-gray-800, #212529);
    margin-bottom: var(--bb-space-2, 0.5rem);
    display: flex;
    align-items: center;
    gap: var(--bb-space-2, 0.5rem);
}

/* .notice-important::before {
    content: "⚠️";
    font-size: var(--bb-font-size-xl, 1.25rem);
} */

.notice-description {
    color: var(--bb-gray-700, #343a40);
    margin: 0;
    font-size: var(--bb-font-size-sm, 0.875rem);
    line-height: 1.5;
}

/* ========================================
   4. フォームスタイル
======================================== */

.register-form {
    margin-bottom: var(--bb-space-8, 2rem);
}

.register-form .form-group {
    margin-bottom: var(--bb-space-6, 1.5rem);
}

.register-form .form-group label {
    display: block;
    margin-bottom: var(--bb-space-2, 0.5rem);
    font-weight: 600;
    color: var(--bb-main-text-color, #333);
    font-size: var(--bb-font-size-sm, 0.875rem);
}

.register-form .form-group .required {
    color: var(--bb-danger, #dc3545);
    font-weight: 700;
    margin-left: var(--bb-space-1, 0.25rem);
}

.register-form .form-group small {
    display: block;
    margin-top: var(--bb-space-2, 0.5rem);
    color: var(--bb-gray-500, #6c757d);
    font-size: var(--bb-font-size-xs, 0.75rem);
    font-style: italic;
    line-height: 1.4;
}

.register-form .form-group input {
    width: 100%;
    padding: var(--bb-space-4, 1rem) var(--bb-space-4, 1rem);
    border: 2px solid var(--bb-gray-200, #e9ecef);
    border-radius: var(--bb-radius-lg, 0.75rem);
    font-size: var(--bb-font-size-base, 1rem);
    font-family: var(--bb-font-family);
    transition: all 0.3s ease;
    background: var(--bb-gray-100, #f8f9fa);
    box-sizing: border-box;
}

.register-form .form-group input:focus {
    outline: none;
    border-color: var(--bb-accent-color, #ffd700);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
    transform: translateY(-1px);
}

.register-form .form-group input:user-invalid {
    border-color: var(--bb-danger, #dc3545);
    background: var(--bb-danger-bg, #ffe6e6);
}

.register-form .form-group input:user-invalid:focus {
    border-color: var(--bb-danger, #dc3545);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* ========================================
   5. 氏名入力フィールド（横並び）
======================================== */

.register-form .form-row {
    display: flex;
    gap: var(--bb-space-4, 1rem);
    margin-bottom: var(--bb-space-6, 1.5rem);
}

.register-form .form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

/* ========================================
   6. 利用規約チェックボックス
======================================== */

.agreement-section {
    margin-bottom: var(--bb-space-6, 1.5rem);
    background: var(--bb-gray-100, #f8f9fa);
    border-radius: var(--bb-radius-lg, 0.75rem);
    padding: var(--bb-space-6, 1.5rem);
    border: 1px solid var(--bb-gray-300, #dee2e6);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--bb-space-3, 0.75rem);
    cursor: pointer;
    font-size: var(--bb-font-size-sm, 0.875rem);
    line-height: 1.5;
    margin: 0;
}

.checkbox-label input[type="checkbox"] {
    width: auto !important;
    margin: 5px;
    margin-top: var(--bb-space-1, 0.25rem);
    flex-shrink: 0;
    cursor: pointer;
    transform: scale(1.2);
}

.checkbox-text {
    color: var(--bb-gray-700, #343a40);
}

.checkbox-text a {
    color: var(--bb-main-text-color, #333);
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.3s ease;
}

.checkbox-text a:hover {
    color: var(--bb-sub-color, #ffd700);
    text-decoration: none;
}

.checkbox-text .required {
    color: var(--bb-danger, #dc3545);
    font-weight: 700;
}

/* ========================================
   7. 送信ボタン
======================================== */

.register-form .btn-primary:active {
    transform: translateY(0);
}


/* ========================================
   8. エラーメッセージ
======================================== */

.error-message {
    background: var(--bb-danger-bg, #ffe6e6);
    border: 2px solid var(--bb-danger-light, #ff9999);
    border-radius: var(--bb-radius-lg, 0.75rem);
    padding: var(--bb-space-4, 1rem);
    margin-bottom: var(--bb-space-6, 1.5rem);
    color: var(--bb-danger-dark, #cc0000);
    text-align: center;
    font-weight: 600;
}

.error-message p {
    margin: 0;
    line-height: 1.4;
}

.error-message li {
    list-style: none;
}

/* ========================================
   9. ログインリンクセクション
======================================== */
.login-link {
    text-align: center;
    padding-top: var(--bb-space-8, 2rem);
    border-top: 1px solid var(--bb-gray-100, #e9ecef);
}

.login-link p {
    margin: var(--bb-space-2, 0.5rem) 0;
    color: var(--bb-gray-600, #495057);
    font-size: var(--bb-font-size-sm, 0.875rem);
}

.login-link a {
    color: var(--bb-accent-text-color, #333);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: var(--bb-space-2, 0.5rem) var(--bb-space-4, 1rem);
    background: var(--bb-accent-color, #ffd700);
    border-radius: var(--bb-radius-md, 0.5rem);
    display: inline-block;
    margin: 0 var(--bb-space-1, 0.25rem);
}

.login-link a:hover {
    background: var(--bb-accent-color-light, #ffed4a);
    transform: translateY(-1px);
    font-size: var(--bb-font-size-base);
    box-shadow: var(--bb-shadow-md, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}


/* ========================================
   10. パスワード強度インジケーター（将来の拡張用）
======================================== */

.password-strength {
    margin-top: var(--bb-space-2, 0.5rem);
    height: 4px;
    border-radius: var(--bb-radius-sm, 0.25rem);
    background: var(--bb-gray-200, #e9ecef);
    overflow: hidden;
    transition: all 0.3s ease;
}

.password-strength.weak {
    background: linear-gradient(to right,
            var(--bb-danger, #dc3545) 0%,
            var(--bb-danger, #dc3545) 33%,
            var(--bb-gray-200, #e9ecef) 33%);
}

.password-strength.medium {
    background: linear-gradient(to right,
            var(--bb-warning, #ffc107) 0%,
            var(--bb-warning, #ffc107) 66%,
            var(--bb-gray-200, #e9ecef) 66%);
}

.password-strength.strong {
    background: var(--bb-success, #28a745);
}

/* ========================================
   11. レスポンシブ対応
======================================== */

@media (max-width: 768px) {
    .register-container {
        margin: var(--bb-space-6, 1.5rem);
        padding: var(--bb-space-8, 2rem) var(--bb-space-6, 1.5rem);
    }

    .register-header h1 {
        font-size: var(--bb-font-size-2xl, 1.5rem);
    }

    .register-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .register-form .form-row .form-group {
        margin-bottom: var(--bb-space-6, 1.5rem);
    }

    .register-form .form-group input {
        padding: var(--bb-space-3, 0.75rem) var(--bb-space-4, 1rem);
        font-size: var(--bb-font-size-sm, 0.875rem);
    }

    .register-form .btn-primary {
        padding: var(--bb-space-4, 1rem) var(--bb-space-5, 1.25rem);
        font-size: var(--bb-font-size-base, 1rem);
    }

    .notice-section {
        padding: var(--bb-space-5, 1.25rem);
    }

    .agreement-section {
        padding: var(--bb-space-5, 1.25rem);
    }
}

@media (max-width: 480px) {
    .register-container {
        margin: var(--bb-space-4, 1rem);
        padding: var(--bb-space-6, 1.5rem) var(--bb-space-5, 1.25rem);
    }

    .register-header h1 {
        font-size: var(--bb-font-size-xl, 1.25rem);
    }

    .register-header p {
        font-size: var(--bb-font-size-sm, 0.875rem);
    }

    .register-form .form-group small {
        font-size: var(--bb-font-size-xs, 0.75rem);
    }

    .notice-important {
        font-size: var(--bb-font-size-base, 1rem);
    }

    .notice-description {
        font-size: var(--bb-font-size-xs, 0.75rem);
    }
}

/* ========================================
   12. アクセシビリティ
======================================== */

.register-form .form-group input:focus,
.register-form .btn-primary:focus,
.checkbox-label:focus-within {
    outline: 2px solid var(--bb-accent-color, #ffd700);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .register-form .form-group input,
    .register-form .btn-primary,
    .login-link a,
    .password-strength {
        transition: none;
    }

    .register-form .form-group input:focus,
    .register-form .btn-primary:hover,
    .login-link a:hover {
        transform: none;
    }
}