/* 認証・プロフィール編集ページ共通スタイル */

/* 全体レイアウト */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', 'Meiryo', sans-serif;
    background: #f7fafd;
    min-height: 100vh;
}

/* メインコンテナ */
.main {
    padding-top: 1rem !important;
    padding-bottom: 2rem;
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* 戻るボタン - 統一スタイル */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem auto;
    padding: 0.6rem 1.5rem;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.main .back-btn {
    align-self: flex-start;
    margin: 1rem 0;
}

.back-btn:hover {
    background: linear-gradient(135deg, #357abd 0%, #2b6cb0 100%);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    transform: translateY(-2px);
}

.back-btn::before {
    content: '←';
    font-size: 1.1rem;
}

/* ログイン・登録コンテナ */
.login-container,
.register-container,
.profile-edit-container {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    padding: 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* タイトル */
.login-title,
.register-title,
.profile-edit-title {
    font-size: 1.75rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #2c3e50;
    position: relative;
    padding-bottom: 0.75rem;
}

.login-title::after,
.register-title::after,
.profile-edit-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #4a90e2, #357abd);
    border-radius: 2px;
}

/* 旅行者ブランドカラー */
.brand-traveler .login-title,
.brand-traveler .register-title,
.brand-traveler .profile-edit-title {
    color: #f57c00;
}

.brand-traveler .login-title::after,
.brand-traveler .register-title::after,
.brand-traveler .profile-edit-title::after {
    background: linear-gradient(90deg, #ff9800, #f57c00);
}

/* ガイドブランドカラー */
.brand-loco .login-title,
.brand-loco .register-title,
.brand-loco .profile-edit-title {
    color: #388e3c;
}

.brand-loco .login-title::after,
.brand-loco .register-title::after,
.brand-loco .profile-edit-title::after {
    background: linear-gradient(90deg, #4caf50, #388e3c);
}

/* フォームスタイル */
.login-form,
.register-form,
.profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.login-form label,
.register-form label,
.profile-edit-form label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.3rem;
}

.login-form input,
.register-form input,
.profile-edit-form input,
.login-form select,
.register-form select,
.profile-edit-form select,
.login-form textarea,
.register-form textarea,
.profile-edit-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.login-form input:focus,
.register-form input:focus,
.profile-edit-form input:focus,
.login-form select:focus,
.register-form select:focus,
.profile-edit-form select:focus,
.login-form textarea:focus,
.register-form textarea:focus,
.profile-edit-form textarea:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* 旅行者用フォーカスカラー */
.brand-traveler input:focus,
.brand-traveler select:focus,
.brand-traveler textarea:focus {
    border-color: #ff9800;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

/* ガイド用フォーカスカラー */
.brand-loco input:focus,
.brand-loco select:focus,
.brand-loco textarea:focus {
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

/* ボタン */
.login-btn,
.register-btn,
.profile-save-btn,
.profile-edit-btn {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.login-btn:hover,
.register-btn:hover,
.profile-save-btn:hover,
.profile-edit-btn:hover {
    background: linear-gradient(135deg, #357abd 0%, #2b6cb0 100%);
    box-shadow: 0 6px 16px rgba(74, 144, 226, 0.4);
    transform: translateY(-2px);
}

/* 旅行者用ボタン */
.brand-traveler .login-btn,
.brand-traveler .register-btn,
.brand-traveler .profile-save-btn,
.brand-traveler .profile-edit-btn {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.brand-traveler .login-btn:hover,
.brand-traveler .register-btn:hover,
.brand-traveler .profile-save-btn:hover,
.brand-traveler .profile-edit-btn:hover {
    background: linear-gradient(135deg, #f57c00 0%, #ef6c00 100%);
    box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}

/* ガイド用ボタン */
.brand-loco .login-btn,
.brand-loco .register-btn,
.brand-loco .profile-save-btn,
.brand-loco .profile-edit-btn {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.brand-loco .login-btn:hover,
.brand-loco .register-btn:hover,
.brand-loco .profile-save-btn:hover,
.brand-loco .profile-edit-btn:hover {
    background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}


/* Loco service selection (shared) */
.service-selection { margin-bottom:20px; }
.selected-services { min-height:60px; border:2px dashed #ccc; border-radius:8px; padding:15px; margin-bottom:15px; background:#f9f9f9; }
.selected-service { display:inline-block; background: #4caf50; color:#fff; padding:6px 12px; margin:4px; border-radius:20px; font-size:.85rem; }
.selected-service .remove { margin-left:8px; cursor:pointer; font-weight:700; color:#fff; }
.service-select-btn { width:100%; background:#2196F3; color:#fff; border:none; border-radius:8px; padding:12px; font-size:1rem; cursor:pointer; transition:background .2s; }
.service-select-btn:hover { background:#1976D2; }
.service-count { text-align:center; color:#666; font-size:.9rem; margin-bottom:10px; font-weight:700; }

/* Modal */
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); }
.modal-content { background:#fff; margin:5% auto; border-radius:12px; width:90%; max-width:800px; max-height:80vh; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid #eee; background:#f8f9fa; }
.modal-header h3 { margin:0; color:#333; }
.modal-close { font-size:28px; cursor:pointer; color:#999; }
.modal-close:hover { color:#333; }
.modal-body { padding:20px; max-height:50vh; overflow-y:auto; }
.modal-footer { padding:15px 20px; border-top:1px solid #eee; text-align:right; background:#f8f9fa; }

/* Service pills */
.search-container { margin-bottom:20px; }
.search-container input { width:100%; padding:12px; border:1px solid #ddd; border-radius:25px; font-size:1rem; }
.services-pills-container { display:flex; flex-direction:column; gap:20px; max-height:400px; overflow-y:auto; padding:15px; background:#f8f9fa; border-radius:10px; }
.service-category-group { margin-bottom:10px; }
.category-header { font-weight:600; font-size:1rem; color:#333; margin-bottom:12px; padding:8px 15px; background:#e9ecef; border-radius:8px; border-left:4px solid #4caf50; }
.category-pills { display:flex; flex-wrap:wrap; gap:10px; }
.service-pill { display:inline-block; padding:8px 16px; background:#fff; border:2px solid #ddd; border-radius:25px; cursor:pointer; transition:all .2s ease; font-size:.9rem; user-select:none; }
.service-pill:hover { background:#e8f5e9; border-color:#4caf50; transform:translateY(-2px); box-shadow:0 4px 12px rgba(76,175,80,.2); }
.service-pill.selected { background:#4caf50; color:#ffffff; border-color:#388e3c; font-weight: 600; }
.service-pill.selected:hover { background:#388e3c; color:#ffffff; }

/* Ads and layout on mobile */
/* side-ad elements are hidden on small screens via media query below */

/* Responsive */
@media (max-width: 768px) {
    .login-container,
    .profile-edit-container {
        padding: 1.5rem;
        margin: 0 1rem;
    }

    .login-title,
    .profile-edit-title {
        font-size: 1.5rem;
    }

    .back-btn {
        padding: 0.5rem 1.2rem;
        font-size: 0.85rem;
    }
}

/* プロフィール編集固有のスタイル */
.profile-edit-container {
    max-width: 600px;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ファイルアップロード */
input[type="file"] {
    padding: 0.5rem;
    font-size: 0.9rem;
}

/* テキストエリア */
textarea {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}

/* 注意書き */
.note,
.warning-note {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #4a90e2;
}

.warning-note {
    background: #fff3e0;
    border-left-color: #ff9800;
    color: #e65100;
}

/* 必須マーク */
label .required {
    color: #f44336;
    margin-left: 0.25rem;
}

/* 登録リンク */
.register-link {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.register-link p {
    margin: 0 0 0.5rem 0;
    color: #666;
    font-size: 0.9rem;
    text-align: center;
}

.register-link a {
    color: #4a90e2;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    display: inline-block;
}

.register-link a:hover {
    color: #357abd;
    text-decoration: underline;
}

.brand-traveler .register-link a {
    color: #ff9800;
}

.brand-traveler .register-link a:hover {
    color: #f57c00;
}

.brand-loco .register-link a {
    color: #4caf50;
}

.brand-loco .register-link a:hover {
    color: #388e3c;
}

/* 登録ページ固有のスタイル */
.register-container {
    max-width: 550px;
}

.register-desc {
    text-align: center;
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* ヘルパーボックス */
.helper-box {
    display: none;
    background: #e8f5e8;
    border: 1px solid #4caf50;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: #2e7d32;
}

/* サービス選択 */
.service-selection {
    margin: 1rem 0;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

.service-item input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.service-item label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

@media (max-width: 640px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
}