/**
 * ECV Membership - Public Styles
 *
 * Uses CSS variables from theme for light/dark mode support
 * NEVER hardcode colors - always use var(--variable)
 */

/* ============================================
   Form Wrapper & Layout
   ============================================ */

.ecv-membership-form-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
}

.form-header {
    text-align: center;
    margin-bottom: 2rem;
}

.form-header h2 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

.form-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ============================================
   Form Sections
   ============================================ */

.form-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

.section-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Profile Fields - Horizontal Layout */
.game-profiles {
    background: var(--surface-light);
    border-radius: var(--radius-md, 8px);
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
}

.profiles-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.profiles-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.profiles-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
}

.profile-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

.profile-fields-row .profile-field {
    display: flex;
    flex-direction: column;
}

.profile-fields-row .profile-field label {
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.profile-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

/* Faceit orange logo */
.faceit-icon {
    background-image: url("../images/faceit.svg");
    border-radius: 3px;
}

/* Steam logo */
.steam-icon {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/83/Steam_icon_logo.svg");
}

.profile-fields-row .profile-field input {
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .profile-fields-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.profile-field {
    margin-bottom: 0;
}

.profile-field label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    font-weight: 500;
    color: var(--text-primary);
}

.profile-field input {
    width: 100%;
    font-size: 0.85rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 6px);
    color: var(--text-primary);
}

.profile-field input:focus {
    outline: none;
    border-color: var(--primary);
}

.profile-field input::placeholder {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.profile-field .field-error {
    font-size: 0.75rem;
    min-height: 0;
    margin-top: 0.25rem;
}

/* Override form-section styles for game-profiles */
.form-section.game-profiles {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
}

/* ============================================
   Form Fields
   ============================================ */

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

.form-row label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
}

.form-row label .required {
    color: var(--error, #e74c3c);
}

.form-row label .optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="url"],
.form-row input[type="date"] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition);
}

.form-row input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(61, 189, 170, 0.15);
}

.form-row input.error {
    border-color: var(--error, #e74c3c);
}

.field-error {
    display: block;
    color: var(--error, #e74c3c);
    font-size: 0.85rem;
    margin-top: 0.35rem;
    min-height: 1.2em;
}

.field-hint {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.field-hint-privacy {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    background: rgba(61, 189, 170, 0.08);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm, 4px);
    margin-top: 0.5rem;
    border-left: 2px solid var(--primary);
}

.field-hint-privacy svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Privacy indicators */
.privacy-badge {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    margin-left: 0.25rem;
    opacity: 0.8;
}

.privacy-note {
    color: var(--text-muted);
    font-size: 0.8em;
    opacity: 0.7;
}

/* Email hidden/reveal toggle */
.email-hidden-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.email-hidden-container .email-revealed,
.email-hidden-container.show-email .email-hidden {
    display: none;
}

.email-hidden-container.show-email .email-revealed {
    display: inline;
}

.email-hidden {
    color: var(--text-muted);
    font-family: monospace;
    letter-spacing: 0.05em;
}

.email-toggle-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--primary);
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: all 0.15s ease;
}

.email-toggle-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Default state: email is hidden, show "Bekijken" button */
.email-toggle-btn .btn-show {
    display: inline;
}

.email-toggle-btn .btn-hide {
    display: none;
}

/* When email is revealed, show "Verbergen" button */
.email-hidden-container.show-email .email-toggle-btn .btn-show {
    display: none;
}

.email-hidden-container.show-email .email-toggle-btn .btn-hide {
    display: inline;
}

/* ============================================
   Games Grid
   ============================================ */

.games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

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

.game-checkbox {
    cursor: pointer;
}

.game-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--surface-light);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(61, 189, 170, 0.1));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.game-checkbox input:checked + .game-card::before {
    opacity: 1;
}

.game-checkbox input:checked + .game-card {
    border-color: var(--primary);
    background: var(--surface);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(61, 189, 170, 0.2);
}

.game-checkbox:hover .game-card {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.game-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 0.75rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.85;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.game-checkbox input:checked + .game-card .game-icon {
    opacity: 1;
    transform: scale(1.05);
}

.game-checkbox:hover .game-card .game-icon {
    opacity: 1;
}

.game-name {
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

/* Checkmark indicator */
.game-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

.game-checkbox input:checked + .game-card::after {
    opacity: 1;
    transform: scale(1);
}

/* Coming Soon / Unavailable Games */
.game-checkbox.game-unavailable {
    cursor: not-allowed;
}

.game-checkbox.game-unavailable .game-card {
    opacity: 0.6;
    position: relative;
}

.game-checkbox.game-unavailable:hover .game-card {
    border-color: var(--border);
    transform: none;
    box-shadow: none;
}

.game-checkbox.game-unavailable .game-icon {
    filter: grayscale(50%);
}

.game-coming-soon {
    display: inline-block;
    background: var(--primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full, 999px);
    margin-top: 0.5rem;
    position: relative;
    z-index: 1;
}

/* Game Icons - Local icons from theme */

/* Counter-Strike 2 */
.game-icon-cs2 {
    background-image: url("/wp-content/themes/ecv-play/assets/images/games/cs2.png");
    background-color: #1a1a1a;
    border-radius: 8px;
    background-size: 80%;
}

/* League of Legends */
.game-icon-lol {
    background-image: url("/wp-content/themes/ecv-play/assets/images/games/lol.webp");
    background-color: #091428;
    border-radius: 8px;
    background-size: 90%;
}

/* Super Smash Bros */
.game-icon-smash {
    background-image: url("/wp-content/themes/ecv-play/assets/images/games/smash.webp");
    background-color: #1a1a1a;
    border-radius: 8px;
    background-size: 75%;
}

/* Valorant */
.game-icon-valorant {
    background-image: url("/wp-content/themes/ecv-play/assets/images/games/valorant.webp");
    background-color: #0F1923;
    border-radius: 8px;
    background-size: 70%;
}

/* ============================================
   Checkbox & Terms
   ============================================ */

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--primary);
}

.checkbox-label span {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.checkbox-label a {
    color: var(--primary);
    text-decoration: underline;
}

/* ============================================
   Honeypot
   ============================================ */

.ohnohoney {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   Buttons
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md, 8px);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--surface-light);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--surface);
    border-color: var(--primary);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-actions {
    margin-top: 1.5rem;
}

.form-actions .btn {
    width: 100%;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   Form Messages
   ============================================ */

.form-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.95rem;
}

.form-message.success {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #27ae60;
}

.form-message.error {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}

.form-footer {
    margin-top: 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

.form-footer a {
    color: var(--primary);
}

/* ============================================
   Success Page
   ============================================ */

.ecv-membership-success {
    text-align: center;
    padding: 3rem 2rem;
    max-width: 600px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--border);
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: rgba(46, 204, 113, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #27ae60;
}

.ecv-membership-success h2 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.ecv-membership-success > p {
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.steps-list {
    text-align: left;
    max-width: 400px;
    margin: 0 auto 2rem;
}

.step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.step:last-child {
    border-bottom: none;
}

.step-number {
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.step-text {
    color: var(--text-primary);
}

/* ============================================
   Activation Page
   ============================================ */

.ecv-membership-activation {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

.activation-success,
.activation-error,
.activation-no-token {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    padding: 3rem 2rem;
}

.icon-success,
.icon-error,
.icon-warning {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.icon-success {
    background: rgba(46, 204, 113, 0.1);
    color: #27ae60;
}

.icon-error {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.icon-warning {
    background: rgba(241, 196, 15, 0.1);
    color: #f1c40f;
    font-weight: bold;
}

.welcome-message {
    text-align: left;
    background: var(--surface-light);
    padding: 1.5rem;
    border-radius: var(--radius-md, 8px);
    margin: 2rem 0;
}

.welcome-message h3 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.welcome-message ul {
    color: var(--text-secondary);
    margin-left: 1.25rem;
}

.welcome-message li {
    margin-bottom: 0.5rem;
}

.help-text {
    text-align: left;
    background: var(--surface-light);
    padding: 1.5rem;
    border-radius: var(--radius-md, 8px);
    margin: 1.5rem 0;
}

.help-text ul {
    color: var(--text-secondary);
    margin-left: 1.25rem;
}

.steps-card {
    text-align: left;
    background: var(--surface-light);
    padding: 1.5rem;
    border-radius: var(--radius-md, 8px);
    margin: 2rem 0;
}

.steps-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.steps-card ol {
    color: var(--text-secondary);
    margin-left: 1.25rem;
}

.steps-card li {
    margin-bottom: 0.5rem;
}

.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* ============================================
   Member Dashboard
   ============================================ */

.ecv-membership-dashboard {
    max-width: 800px;
    margin: 0 auto;
}

.dashboard-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    margin-bottom: 1.5rem;
}

.profile-avatar img {
    border-radius: 50%;
    border: 3px solid var(--primary);
}

.profile-avatar .custom-avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.profile-info h1 {
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

.discord-name {
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full, 999px);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pending {
    background: rgba(241, 196, 15, 0.15);
    color: #f39c12;
}

.status-awaiting {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.status-active {
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.status-suspended {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

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

    .dashboard-header {
        flex-direction: column;
        text-align: center;
    }
}

.dashboard-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    padding: 1.5rem;
}

.dashboard-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

/* Info List */
.info-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.info-list dt {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.info-list dd {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}

/* Games List */
.games-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.game-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.game-item:last-child {
    border-bottom: none;
}

.game-profiles {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}

.profile-link {
    font-size: 0.85rem;
    color: var(--primary);
    text-decoration: none;
}

.profile-link:hover {
    text-decoration: underline;
}

.no-games {
    color: var(--text-muted);
    font-style: italic;
}

/* Dashboard Actions */
.dashboard-actions {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    padding: 1.5rem;
}

.dashboard-actions h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* Dashboard Notice */
.dashboard-notice {
    padding: 1.5rem;
    border-radius: var(--radius-lg, 12px);
    margin-bottom: 1.5rem;
}

.dashboard-notice h3 {
    margin-bottom: 0.5rem;
}

.notice-warning {
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.3);
}

.notice-warning h3 {
    color: #f39c12;
}

.notice-error {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.notice-error h3 {
    color: #e74c3c;
}

/* Profile Actions in Header */
.profile-actions {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

.profile-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .dashboard-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-actions {
        margin-left: 0;
        margin-top: 1rem;
        justify-content: center;
    }
}

/* Wide Dashboard Card (full width) */
.dashboard-card-wide {
    grid-column: 1 / -1;
}

/* Activity List */
.activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--surface-light);
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--primary);
}

.activity-text {
    flex: 1;
    color: var(--text-secondary);
}

.activity-text strong {
    color: var(--text-primary);
}

.activity-date {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.no-activity {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 1rem 0;
}

/* ============================================
   Status Card (for already registered)
   ============================================ */

.ecv-membership-status-card {
    max-width: 500px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    text-align: center;
}

.ecv-membership-status-card h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.status-line {
    margin: 1rem 0;
}

.ecv-membership-status-card .notice-info {
    background: var(--surface-light);
    padding: 1.5rem;
    border-radius: var(--radius-md, 8px);
    margin-top: 1.5rem;
    text-align: left;
}

/* ============================================
   Generic Notice
   ============================================ */

.ecv-membership-notice {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    text-align: center;
}

.ecv-membership-notice p {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* ============================================
   Discord Login Page
   ============================================ */

.ecv-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 300px);
    padding: 2rem;
}

.ecv-login-box {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    padding: 2.5rem;
}

.ecv-login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.ecv-login-logo {
    width: 120px;
    height: auto;
    margin-bottom: 1.5rem;
}

.ecv-login-header h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.ecv-login-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.ecv-login-error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md, 8px);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.ecv-login-error svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ecv-discord-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: #5865F2;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md, 8px);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.ecv-discord-login-btn:hover {
    background: #4752C4;
    color: #fff;
    transform: translateY(-2px);
}

.ecv-discord-login-btn svg {
    width: 24px;
    height: 24px;
}

.ecv-login-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    gap: 1rem;
}

.ecv-login-divider::before,
.ecv-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.ecv-login-divider span {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.ecv-login-register {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.ecv-login-register a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.ecv-login-register a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .ecv-login-box {
        padding: 2rem 1.5rem;
    }

    .ecv-login-logo {
        width: 100px;
    }

    .ecv-login-header h2 {
        font-size: 1.25rem;
    }
}

/* ============================================
   Profile Settings Page
   ============================================ */

.ecv-profile-settings {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem;
}

.settings-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.settings-header h1 {
    color: var(--text-primary);
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

.settings-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.view-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.settings-notice {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md, 8px);
    margin-bottom: 1.5rem;
}

.settings-notice.notice-info {
    background: var(--surface-light);
    border: 1px solid var(--primary);
    color: var(--text-primary);
}

.settings-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

.settings-section {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.settings-section:last-of-type {
    border-bottom: none;
}

.settings-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

.settings-section h2 svg {
    color: var(--primary);
}

.settings-section .section-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

/* Social Links Grid */
.social-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.social-link-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.social-link-field label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.social-link-field input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.social-link-field input:focus {
    outline: none;
    border-color: var(--primary);
}

.social-link-field input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Social Icons */
.social-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.social-icon-twitter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231DA1F2'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.social-icon-twitch {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239146FF'%3E%3Cpath d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z'/%3E%3C/svg%3E");
}

.social-icon-youtube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF0000'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.social-icon-instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E4405F'%3E%3Cpath d='M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z'/%3E%3C/svg%3E");
}

.social-icon-tiktok {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}

.social-icon-globe {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

/* Privacy Options */
.privacy-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.toggle-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    background: var(--surface-light);
    border-radius: var(--radius-md, 8px);
    transition: background-color 0.2s ease;
}

.toggle-option:hover {
    background: var(--surface);
}

.toggle-option input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.toggle-option input:checked + .toggle-slider {
    background: var(--primary);
}

.toggle-option input:checked + .toggle-slider::after {
    transform: translateX(20px);
}

.toggle-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--text-primary);
    font-weight: 500;
}

.toggle-label small {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Display Name Field */
.display-name-field {
    max-width: 400px;
}

.display-name-field input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    transition: border-color 0.2s ease;
}

.display-name-field input:focus {
    outline: none;
    border-color: var(--primary);
}

.display-name-field .field-note {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Settings Actions */
.settings-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--surface-light);
}

.settings-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.save-status .success {
    color: var(--success, #10B981);
}

.save-status .error {
    color: var(--error, #EF4444);
}

/* Spin animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* Settings Footer */
.settings-footer {
    margin-top: 1.5rem;
    text-align: center;
}

.settings-footer .back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.settings-footer .back-link:hover {
    color: var(--primary);
}

/* Responsive */
@media (max-width: 600px) {
    .ecv-profile-settings {
        padding: 1rem;
    }

    .social-links-grid {
        grid-template-columns: 1fr;
    }

    .settings-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-actions .btn {
        justify-content: center;
    }
}

/* ============================================
   Profile Settings - Clean Modern Design
   ============================================ */

.ecv-settings-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

/* Ensure form doesn't break grid layout */
.ecv-settings-page form,
.ecv-settings-page .settings-form-new {
    display: block;
    width: 100%;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Empty State */
.settings-empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 2rem;
}

.settings-empty-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    max-width: 380px;
}

.empty-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover, #2fa394));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.empty-icon svg {
    color: white;
}

.settings-empty-card h2 {
    color: var(--text-primary);
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

.settings-empty-card p {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

/* Page Header */
.settings-page-header {
    padding: 1.5rem 0 1rem;
    margin-bottom: 1rem;
}

.settings-page-header .header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.settings-page-header .back-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.settings-page-header .back-link:hover {
    background: var(--surface-light);
    color: var(--primary);
    border-color: var(--primary);
}

.settings-page-header .header-text h1 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

.settings-page-header .header-text p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

/* Settings Grid - Two Column Layout */
.ecv-settings-page .settings-grid,
.settings-form-new .settings-grid,
.settings-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem;
    width: 100%;
}

@media (max-width: 768px) {
    .ecv-settings-page .settings-grid,
    .settings-form-new .settings-grid,
    .settings-grid {
        grid-template-columns: 1fr !important;
    }
}

.ecv-settings-page .settings-column,
.settings-form-new .settings-column,
.settings-column {
    display: flex !important;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0; /* Prevent grid blowout */
}

/* Settings Card */
.settings-card-new {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.card-section {
    padding: 1.25rem;
}

.card-divider {
    height: 1px;
    background: var(--border);
    margin: 0;
}

.card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.card-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover, #2fa394));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon svg {
    color: white;
}

.card-header h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

.card-header p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0.15rem 0 0;
}

/* Profile Header Section */
.profile-header-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.avatar-container {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover, #2fa394));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--surface-light);
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-container .avatar-letter {
    color: white;
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

.avatar-edit-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 30px;
    height: 30px;
    background: var(--primary);
    border: 3px solid var(--surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.avatar-edit-btn:hover {
    background: var(--primary-hover, #2fa394);
    transform: scale(1.1);
}

.avatar-edit-btn svg {
    color: white;
}

.profile-header-info h2 {
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
}

.profile-link-small {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}

.profile-link-small:hover {
    opacity: 0.8;
}

/* Form Elements */
.form-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(61, 189, 170, 0.15);
}

.form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--surface);
}

.form-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.input-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0.5rem 0 0;
}

.input-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.input-notice-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.input-notice svg {
    flex-shrink: 0;
}

/* Toggle List */
.toggle-list {
    padding: 0.5rem 0;
}

.toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--border);
}

.toggle-item:last-child {
    border-bottom: none;
}

.toggle-item:hover {
    background: var(--surface-light);
}

.toggle-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.toggle-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.toggle-sublabel {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.toggle-control {
    position: relative;
    flex-shrink: 0;
}

.toggle-control input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-track {
    display: block;
    width: 46px;
    height: 26px;
    background: var(--border);
    border-radius: 13px;
    position: relative;
    transition: background-color 0.2s ease;
}

.toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.toggle-control input:checked + .toggle-track {
    background: var(--primary);
}

.toggle-control input:checked + .toggle-track::after {
    transform: translateX(20px);
}

/* Social Inputs */
.social-inputs {
    padding: 0.75rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.social-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.social-input-icon {
    width: 38px;
    height: 38px;
    background: var(--surface-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.social-input-icon svg {
    width: 18px;
    height: 18px;
}

.social-icon-twitter { color: #000; }
.social-icon-twitch { color: #9146FF; }
.social-icon-youtube { color: #FF0000; }
.social-icon-instagram { color: #E4405F; }
.social-icon-tiktok { color: #000; }
.social-icon-globe { color: var(--primary); }

.social-input-group .form-input {
    flex: 1;
    padding: 0.65rem 0.875rem;
    font-size: 0.9rem;
}

/* Save Bar */
.settings-save-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
}

.save-status-container {
    flex: 1;
    text-align: right;
}

.status-success {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--success, #10B981);
    font-weight: 500;
}

.status-error {
    color: var(--error, #EF4444);
    font-weight: 500;
}

.btn-save {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Games Selection */
.games-selection {
    padding: 0.75rem 1.25rem 1.25rem;
}

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

.game-checkbox {
    position: relative;
}

.game-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.game-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-light);
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-checkbox input:checked + .game-checkbox-label {
    border-color: var(--primary);
    background: rgba(61, 189, 170, 0.08);
}

.game-checkbox-label:hover {
    border-color: var(--primary);
}

.game-checkbox-icon {
    width: 36px;
    height: 36px;
    background: var(--surface);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.game-checkbox-info {
    flex: 1;
    min-width: 0;
}

.game-checkbox-name {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-checkbox-status {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.game-checkbox-check {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.game-checkbox input:checked + .game-checkbox-label .game-checkbox-check {
    background: var(--primary);
    border-color: var(--primary);
}

.game-checkbox-check svg {
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.game-checkbox input:checked + .game-checkbox-label .game-checkbox-check svg {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 480px) {
    .games-grid-settings {
        grid-template-columns: 1fr;
    }
}