/* Modern profile switcher with clean design */

/* =========================================
   CSS Custom Properties (defaults)
   ========================================= */
.profileswitch-template {
    --ps-bg: #ffffff;
    --ps-page-bg: var(--ps-bg);
    --ps-text: #1a1a1a;
    --ps-text-secondary: rgba(26, 26, 26, 0.6);
    --ps-border: rgba(26, 26, 26, 0.15);
    --ps-hover-shadow: rgba(0, 0, 0, 0.12);
    --ps-badge-text: #ffffff;
    --ps-button-text: #ffffff;
    --ps-overlay-bg: rgba(0, 0, 0, 0.6);
}

/* Dark color scheme */
.profileswitch-template.profileswitch-scheme-dark {
    --ps-bg: #141414;
    --ps-text: #e5e5e5;
    --ps-text-secondary: rgba(229, 229, 229, 0.6);
    --ps-border: rgba(229, 229, 229, 0.15);
    --ps-hover-shadow: rgba(0, 0, 0, 0.4);
    --ps-badge-text: #141414;
    --ps-button-text: #141414;
    --ps-overlay-bg: rgba(255, 255, 255, 0.7);
}

/* =========================================
   Custom template body
   ========================================= */
.profileswitch-template {
    display: flex;
    justify-content: safe center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    /* Using height (not min-height) so overflow-y: auto contains long content inside the
       template rather than letting the body/page grow and scroll. `safe center` keeps the
       top of overflowing content reachable instead of clipped by flex centering. */
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    margin: 0;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: var(--ps-page-bg);
    color: var(--ps-text);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Background image / solid-color page bg: content box for readability */
.profileswitch-template.profileswitch-has-bg-image article,
.profileswitch-template.profileswitch-has-bg-solid article {
    background: var(--ps-bg);
    border-radius: 16px;
    padding: 40px 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 480px) {
    .profileswitch-template.profileswitch-has-bg-image article,
    .profileswitch-template.profileswitch-has-bg-solid article {
        padding: 24px 16px;
        border-radius: 12px;
    }
}

/* =========================================
   Website Blur background
   ========================================= */
.profileswitch-blur-iframe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border: none;
    pointer-events: none;
    filter: blur(12px);
    transform: scale(1.05); /* Prevent blur edge artifacts */
    z-index: 0;
}

.profileswitch-blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--ps-overlay-bg);
    z-index: 0;
}

.profileswitch-template.profileswitch-has-bg-blur {
    background-color: transparent;
}

.profileswitch-template.profileswitch-has-bg-blur article {
    position: relative;
    z-index: 1;
    background: var(--ps-bg);
    border-radius: 16px;
    padding: 40px 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 480px) {
    .profileswitch-template.profileswitch-has-bg-blur article {
        padding: 24px 16px;
        border-radius: 12px;
    }
}

/* Adjust for WordPress admin bar. The compound selector (no space) is required
   because body carries both `admin-bar` and `profileswitch-template` classes. */
.admin-bar.profileswitch-template {
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar.profileswitch-template {
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }
}

/* Article in custom template body */
.profileswitch-template article {
    width: 100%;
    max-width: 800px;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================
   Container
   ========================================= */
.profileswitch-shortcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* Heading styling */
.profileswitch-shortcode h2 {
    margin: 0 0 32px 0;
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ps-text);
}

/* Back to site link */
.profileswitch-back-to-site {
    align-self: flex-start;
    margin-bottom: 24px;
    font-weight: 500;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.profileswitch-back-to-site:hover {
    opacity: 1;
}

.profileswitch-back-to-site a {
    text-decoration: none;
    color: inherit;
}

/* =========================================
   Profiles list wrapper
   ========================================= */
.profileswitch-profiles-list {
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
}

/* =========================================
   Layout: Grid (default)
   ========================================= */
.profileswitch-profiles-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    padding: 8px;
    max-width: 600px;
    margin: 0 auto;
}

/* =========================================
   Profile item buttons
   ========================================= */
.profileswitch-profile-item > button,
.profileswitch-profile-item > .profileswitch-add-profile-button,
.profileswitch-profile-item > a.profileswitch-add-profile-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    outline: none;
    width: 100%;
}

/* Hover state (only on devices that actually support hover — avoids sticky-hover on touch). */
@media (hover: hover) {
    .profileswitch-profile-item > button:hover,
    .profileswitch-profile-item > .profileswitch-add-profile-button:hover,
    .profileswitch-profile-item > a.profileswitch-add-profile-button:hover {
        transform: translateY(-4px);
        border-color: var(--ps-border);
        box-shadow: 0 8px 24px var(--ps-hover-shadow);
    }

    .profileswitch-profile-item:hover .profileswitch-profile-avatar {
        box-shadow: 0 4px 16px var(--ps-hover-shadow);
    }

    .profileswitch-edit-overlay:hover {
        transform: scale(1.15);
    }
}

/* Focus state for accessibility */
.profileswitch-profile-item > button:focus-visible,
.profileswitch-profile-item > .profileswitch-add-profile-button:focus-visible,
.profileswitch-profile-item > a.profileswitch-add-profile-button:focus-visible {
    border-color: var(--ps-text);
    box-shadow: 0 0 0 3px var(--ps-border);
}

/* Active/pressed state */
.profileswitch-profile-item > button:active,
.profileswitch-profile-item > .profileswitch-add-profile-button:active,
.profileswitch-profile-item > a.profileswitch-add-profile-button:active {
    transform: translateY(-2px);
}

/* =========================================
   Avatar container
   ========================================= */
.profileswitch-profile-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 28px;
    background: transparent;
    margin-bottom: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--ps-hover-shadow);
    transition: box-shadow 0.2s ease;
}


/* Avatar images */
.profileswitch-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   Edit overlay on avatar
   ========================================= */
.profileswitch-profile-item {
    position: relative;
}

.profileswitch-edit-overlay {
    position: absolute;
    top: 76px; /* bottom-right of the 80px avatar (16px padding + 80px - badge size overlap) */
    left: calc(50% + 20px);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ps-text);
    color: var(--ps-badge-text);
    /* Visible by default — always shown on touch devices. Hover-capable devices hide this
       and reveal it on hover via the @media (hover: hover) rule below. */
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Hover-capable devices: hide the edit overlay and reveal it on hover. */
@media (hover: hover) {
    .profileswitch-edit-overlay {
        opacity: 0;
        pointer-events: none;
    }

    .profileswitch-profile-item:hover .profileswitch-edit-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}


.profileswitch-edit-icon {
    font-size: 14px;
    line-height: 1;
}

/* =========================================
   Profile name
   ========================================= */
.profileswitch-profile-name {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================
   Current profile badge
   ========================================= */
.profileswitch-current-profile-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    margin-top: 8px;
    background: var(--ps-text);
    color: var(--ps-badge-text);
    opacity: 0.9;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.profileswitch-primary-profile-badge,
.profileswitch-manager-profile-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 8px;
    border: 1px solid var(--ps-border);
    color: var(--ps-text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* =========================================
   Add profile button
   ========================================= */
.profileswitch-add-profile-button .profileswitch-profile-avatar {
    border: 2px dashed var(--ps-text);
    background: transparent;
    opacity: 0.3;
    font-size: 36px;
    font-weight: 300;
}

.profileswitch-add-profile-button:hover .profileswitch-profile-avatar {
    opacity: 0.5;
}

/* =========================================
   Add/Edit profile forms
   ========================================= */
#profileswitch-add-profile-form,
#profileswitch-edit-profile-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

#profileswitch-add-profile-form p,
#profileswitch-edit-profile-form p {
    margin: 0 0 16px 0;
    font-size: 15px;
    color: var(--ps-text-secondary);
}

#profileswitch-add-profile-form input[type="text"],
#profileswitch-add-profile-form input[type="email"],
#profileswitch-add-profile-form input[type="password"],
#profileswitch-edit-profile-form input[type="text"],
#profileswitch-edit-profile-form input[type="email"],
#profileswitch-edit-profile-form input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--ps-border);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 16px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    margin-bottom: 8px;
}

#profileswitch-add-profile-form input[type="text"]:focus,
#profileswitch-add-profile-form input[type="email"]:focus,
#profileswitch-add-profile-form input[type="password"]:focus,
#profileswitch-edit-profile-form input[type="text"]:focus,
#profileswitch-edit-profile-form input[type="email"]:focus,
#profileswitch-edit-profile-form input[type="password"]:focus {
    outline: none;
    border-color: var(--ps-text);
    box-shadow: 0 0 0 3px var(--ps-border);
}

/* Custom credentials toggle */
.profileswitch-custom-credentials {
    margin: 16px 0;
}

.profileswitch-custom-credentials > label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ps-text-secondary);
}

.profileswitch-custom-credentials-fields {
    margin-top: 16px;
}

/* Manager section */
.profileswitch-manager-section {
    width: 100%;
    max-width: 400px;
    margin: 24px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--ps-border);
}

.profileswitch-manager-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--ps-text);
}

.profileswitch-manager-section > p {
    font-size: 13px;
    color: var(--ps-text-secondary);
    margin: 0 0 12px 0;
}

.profileswitch-manager-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.profileswitch-manager-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid var(--ps-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 calc(50% - 4px);
    min-width: 0;
    box-sizing: border-box;
}

.profileswitch-manager-card:hover {
    border-color: var(--ps-text-secondary);
}

.profileswitch-manager-card.is-manager {
    border-color: var(--ps-text);
    background: var(--ps-hover-bg, rgba(0,0,0,0.04));
}

.profileswitch-manager-card input[type="checkbox"] {
    display: none;
}

.profileswitch-manager-card img {
    border-radius: 50%;
    flex-shrink: 0;
}

.profileswitch-manager-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profileswitch-manager-card-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profileswitch-manager-card-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ps-text-secondary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.profileswitch-manager-card.is-manager .profileswitch-manager-card-badge {
    opacity: 1;
}

/* BuddyPress profile fields */
.profileswitch-bp-field {
    margin-bottom: 4px;
}

.profileswitch-bp-datebox {
    display: flex;
    gap: 8px;
}

.profileswitch-bp-datebox select {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--ps-border);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

/* Edit profile current avatar */
.profileswitch-edit-current-avatar {
    margin-bottom: 16px;
}

.profileswitch-edit-current-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px var(--ps-hover-shadow);
}

/* Buttons row */
#profileswitch-add-profile-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}

#profileswitch-add-profile-buttons > button,
#profileswitch-add-profile-buttons > a {
    padding: 10px 20px;
    border: 1px solid var(--ps-border);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    opacity: 0.7;
}

#profileswitch-add-profile-buttons > button {
    background: var(--ps-text);
    color: var(--ps-button-text);
    border-color: var(--ps-text);
    opacity: 0.9;
}

#profileswitch-add-profile-buttons > button:hover,
#profileswitch-add-profile-buttons > a:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--ps-hover-shadow);
}

#profileswitch-add-profile-buttons > button:active,
#profileswitch-add-profile-buttons > a:active {
    transform: translateY(0);
}

/* =========================================
   Avatar picker (frontend)
   ========================================= */
.profileswitch-avatar-picker {
    margin: 20px 0;
}

.profileswitch-avatar-picker p {
    font-size: 14px;
    color: var(--ps-text-secondary);
    margin-bottom: 12px;
}

.profileswitch-avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    max-width: 100%;
}

.profileswitch-avatar-picker-item {
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    display: block;
}

.profileswitch-avatar-picker-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.profileswitch-avatar-picker-item input[type="radio"] {
    display: none;
}

.profileswitch-avatar-picker-item:hover {
    border-color: var(--ps-border);
    transform: scale(1.1);
}

.profileswitch-avatar-picker-item:has(input:checked) {
    border-color: var(--ps-text);
    box-shadow: 0 0 0 2px var(--ps-border);
}

/* "Default" avatar option */
.profileswitch-avatar-picker-none {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ps-border);
    border-radius: 50%;
}

.profileswitch-avatar-picker-none-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ps-text-secondary);
}

/* =========================================
   Animation: Scale Up
   ========================================= */
.profileswitch-anim-scale .profileswitch-profile-item,
.profileswitch-anim-scale #profileswitch-add-profile-form,
.profileswitch-anim-scale #profileswitch-edit-profile-form {
    animation: profileswitch-scale-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.profileswitch-anim-scale .profileswitch-profile-item:nth-child(1) { animation-delay: 0s; }
.profileswitch-anim-scale .profileswitch-profile-item:nth-child(2) { animation-delay: 0.06s; }
.profileswitch-anim-scale .profileswitch-profile-item:nth-child(3) { animation-delay: 0.12s; }
.profileswitch-anim-scale .profileswitch-profile-item:nth-child(4) { animation-delay: 0.18s; }
.profileswitch-anim-scale .profileswitch-profile-item:nth-child(5) { animation-delay: 0.24s; }
.profileswitch-anim-scale .profileswitch-profile-item:nth-child(6) { animation-delay: 0.3s; }
.profileswitch-anim-scale .profileswitch-profile-item:nth-child(7) { animation-delay: 0.36s; }
.profileswitch-anim-scale .profileswitch-profile-item:nth-child(8) { animation-delay: 0.42s; }
.profileswitch-anim-scale .profileswitch-profile-item:nth-child(9) { animation-delay: 0.48s; }
.profileswitch-anim-scale .profileswitch-profile-item:nth-child(10) { animation-delay: 0.54s; }
.profileswitch-anim-scale .profileswitch-profile-item:nth-child(n+11) { animation-delay: 0.6s; }

@keyframes profileswitch-scale-up {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* =========================================
   Visibility utility classes
   ========================================= */
.profileswitch-cannot-access .profileswitch-require-access {
    display: none;
}

.profileswitch-can-access .profileswitch-require-no-access {
    display: none;
}

/* =========================================
   PIN form (shared by gate page and switcher)
   ========================================= */
.profileswitch-pin-form {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.profileswitch-pin-inputs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
}

.profileswitch-pin-inputs input {
    width: 56px;
    height: 64px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    border: 2px solid var(--ps-border);
    border-radius: 12px;
    background: transparent;
    color: var(--ps-text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -moz-appearance: textfield;
    caret-color: var(--ps-text);
}

.profileswitch-pin-inputs input::-webkit-outer-spin-button,
.profileswitch-pin-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.profileswitch-pin-inputs input:focus {
    border-color: var(--ps-text);
    box-shadow: 0 0 0 3px var(--ps-border);
}

/* Alphanumeric PIN (single password field) */
.profileswitch-pin-alpha input {
    width: 100%;
    height: auto;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.1em;
    border-radius: 8px;
}

.profileswitch-pin-submit {
    display: block;
    width: 100%;
    padding: 12px 24px;
    background: var(--ps-text);
    color: var(--ps-button-text);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0.9;
}

.profileswitch-pin-submit:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.profileswitch-pin-submit:active {
    transform: translateY(0);
}

/* PIN gate page */
.profileswitch-pin-gate-article {
    width: 100%;
    max-width: 480px;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.profileswitch-pin-gate.profileswitch-has-bg-image .profileswitch-pin-gate-article,
.profileswitch-pin-gate.profileswitch-has-bg-blur .profileswitch-pin-gate-article {
    background: var(--ps-bg);
    border-radius: 16px;
    padding: 40px 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 480px) {
    .profileswitch-pin-gate.profileswitch-has-bg-image .profileswitch-pin-gate-article,
    .profileswitch-pin-gate.profileswitch-has-bg-blur .profileswitch-pin-gate-article {
        padding: 24px 16px;
        border-radius: 12px;
    }

    .profileswitch-pin-inputs input {
        width: 48px;
        height: 56px;
        font-size: 20px;
    }

    /* Larger edit overlay for easier tapping on mobile. Top raised to keep the
       bigger overlay from overlapping the profile name below the avatar. */
    .profileswitch-edit-overlay {
        width: 36px;
        height: 36px;
        top: 72px;
    }

    .profileswitch-edit-icon {
        font-size: 16px;
    }
}

/* =========================================
   PIN form submission spinner
   Shown after auto-submit so users on slow connections know the PIN was received.
   ========================================= */
form.profileswitch-pin-submitting {
    position: relative;
    pointer-events: none;
}

form.profileswitch-pin-submitting::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ps-bg);
    opacity: 0.75;
    z-index: 5;
    border-radius: inherit;
}

form.profileswitch-pin-submitting::before {
    content: '';
    position: absolute;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    width: 32px;
    height: 32px;
    border: 3px solid var(--ps-border);
    border-top-color: var(--ps-text);
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 6;
    animation: profileswitch-pin-spin 0.8s linear infinite;
}

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

.profileswitch-pin-gate-description {
    font-size: 15px;
    color: var(--ps-text-secondary);
    margin: 0 0 24px 0;
}

.profileswitch-pin-error {
    color: #dc3232;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 16px 0;
}

/* PIN prompt on profile switcher page */
.profileswitch-pin-prompt {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* =========================================
   Lock icon on avatar
   ========================================= */
.profileswitch-profile-item > button {
    position: relative;
}

.profileswitch-lock-icon {
    position: absolute;
    top: 12px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ps-text);
    color: var(--ps-badge-text);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1;
    z-index: 1;
}

/* =========================================
   Parental controls section on switcher page
   ========================================= */
.profileswitch-parental-controls-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--ps-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.profileswitch-parental-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ps-text-secondary);
}

.profileswitch-parental-status-icon {
    font-size: 16px;
}

.profileswitch-parental-actions {
    display: flex;
    gap: 16px;
}

.profileswitch-parental-actions a,
.profileswitch-parental-setup-link {
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--ps-text-secondary);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.profileswitch-parental-actions a:hover,
.profileswitch-parental-setup-link:hover {
    opacity: 1;
}

.profileswitch-parental-setup-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

/* Parental controls setup/change/disable forms */
.profileswitch-parental-setup {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.profileswitch-parental-setup h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--ps-text);
}

.profileswitch-parental-setup p {
    font-size: 15px;
    color: var(--ps-text-secondary);
    margin: 0 0 20px 0;
}

.profileswitch-parental-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--ps-text-secondary);
}

.profileswitch-parental-form input[type="tel"],
.profileswitch-parental-form input[type="password"] {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-top: 6px;
    border: 1px solid var(--ps-border);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 18px;
    letter-spacing: 0.3em;
    text-align: center;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.profileswitch-parental-form input[type="tel"]:focus,
.profileswitch-parental-form input[type="password"]:focus {
    outline: none;
    border-color: var(--ps-text);
    box-shadow: 0 0 0 3px var(--ps-border);
}

/* =========================================
   PIN management on edit profile page
   ========================================= */
.profileswitch-pin-management {
    width: 100%;
    max-width: 400px;
    margin: 24px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--ps-border);
}

.profileswitch-pin-management h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--ps-text);
}

.profileswitch-pin-status {
    font-size: 14px;
    color: var(--ps-text-secondary);
    margin: 0 0 12px 0;
}

.profileswitch-pin-details {
    margin-bottom: 8px;
}

.profileswitch-pin-details summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--ps-text-secondary);
    opacity: 0.8;
    transition: opacity 0.2s ease;
    padding: 6px 0;
}

.profileswitch-pin-details summary:hover {
    opacity: 1;
}

.profileswitch-pin-details[open] summary {
    margin-bottom: 12px;
}

.profileswitch-pin-details .profileswitch-parental-form {
    padding-left: 16px;
}

.profileswitch-pin-details p {
    font-size: 14px;
    color: var(--ps-text-secondary);
    margin: 0 0 12px 0;
    padding-left: 16px;
}

/* Inline layout (not flex) so the icon and the text run as one wrapping line.
   Using flex here would treat each child of the paragraph (icon span, text nodes,
   and the inline link) as a separate flex item and lay them out in columns. */
.profileswitch-parental-hint {
    font-size: 14px;
    text-align: center;
    color: var(--ps-text-secondary);
}

.profileswitch-parental-hint .profileswitch-parental-status-icon {
    margin-right: 6px;
    vertical-align: middle;
}

.profileswitch-parental-hint a {
    color: inherit;
    font-weight: 600;
}

/* =========================================
   Forgot PIN
   ========================================= */
.profileswitch-forgot-pin-form {
    margin-top: 16px;
    text-align: center;
}

.profileswitch-forgot-pin-link {
    background: none;
    border: none;
    color: var(--ps-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    text-decoration: underline;
    padding: 0;
}

.profileswitch-forgot-pin-link:hover {
    opacity: 1;
}

.profileswitch-forgot-pin-message {
    margin-top: 16px;
    font-size: 13px;
    color: var(--ps-text-secondary);
    text-align: center;
}

.profileswitch-forgot-pin-success {
    color: #00a32a;
    font-weight: 500;
}

/* PIN prompt profile avatar and name */
.profileswitch-pin-prompt-avatar {
    margin-bottom: 12px;
}

.profileswitch-pin-prompt-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px var(--ps-hover-shadow);
}

.profileswitch-pin-prompt h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--ps-text);
}

/* =========================================
   Manage Account link on switcher page
   ========================================= */
.profileswitch-manage-account-section {
    margin-top: 24px;
    text-align: center;
}

.profileswitch-manage-account-link {
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--ps-text-secondary);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.profileswitch-manage-account-link:hover {
    opacity: 1;
}

/* =========================================
   Email Verification form
   ========================================= */
.profileswitch-verify-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.profileswitch-verify-form p {
    font-size: 15px;
    color: var(--ps-text-secondary);
    margin: 0 0 16px 0;
}

.profileswitch-verification-code-input {
    display: block;
    width: 100%;
    padding: 16px;
    border: 2px solid var(--ps-border);
    border-radius: 12px;
    background: transparent;
    color: var(--ps-text);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

.profileswitch-verification-code-input:focus {
    outline: none;
    border-color: var(--ps-text);
    box-shadow: 0 0 0 3px var(--ps-border);
}

.profileswitch-verification-code-input::-webkit-outer-spin-button,
.profileswitch-verification-code-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =========================================
   Account Management UI
   ========================================= */
.profileswitch-account-management {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.profileswitch-acct-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ps-border);
}

.profileswitch-acct-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.profileswitch-acct-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--ps-text);
}

.profileswitch-acct-section > p {
    font-size: 13px;
    color: var(--ps-text-secondary);
    margin: 0 0 16px 0;
}

/* Success messages */
.profileswitch-success-message {
    color: #00a32a;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 20px 0;
    padding: 10px 16px;
    background: rgba(0, 163, 42, 0.08);
    border-radius: 8px;
    text-align: center;
}

/* Linked profiles list */
.profileswitch-linked-profiles-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profileswitch-linked-profile-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--ps-border);
    border-radius: 12px;
    transition: border-color 0.2s ease;
}

.profileswitch-linked-profile-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profileswitch-linked-profile-info img {
    border-radius: 50%;
    flex-shrink: 0;
}

.profileswitch-linked-profile-info strong {
    font-size: 14px;
}

.profileswitch-linked-profile-info small {
    color: var(--ps-text-secondary);
    font-size: 12px;
}

.profileswitch-linked-profile-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.profileswitch-action-details {
    flex: 1;
    min-width: 0;
}

.profileswitch-action-details summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ps-text-secondary);
    padding: 4px 0;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.profileswitch-action-details summary:hover {
    opacity: 1;
}

.profileswitch-inline-action-form {
    padding: 12px;
    background: var(--ps-border);
    border-radius: 8px;
    margin-top: 8px;
}

.profileswitch-inline-action-form p {
    font-size: 13px;
    color: var(--ps-text-secondary);
    margin: 0 0 12px 0;
}

.profileswitch-inline-action-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 12px;
    cursor: pointer;
}

.profileswitch-danger-text {
    color: #dc3232 !important;
}

.profileswitch-button-caution {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--ps-border);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profileswitch-button-caution:hover {
    background: var(--ps-border);
}

.profileswitch-button-danger {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #dc3232;
    border-radius: 6px;
    background: #dc3232;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profileswitch-button-danger:hover {
    background: #a00;
    border-color: #a00;
}