@import '_content/CompanioNation.Components/CompanioNation.Components.8cz5y1z40p.bundle.scp.css';

/* /CitySelect/CitySelect.razor.rz.scp.css */
/* CitySelect.razor.css */

h3[b-gruvndl3xk] {
    font-size: 1.5em;
    margin-bottom: 1em;
}

.dropdown-display[b-gruvndl3xk] {
    display: inline-block;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background-color: #fff;
    margin-bottom: 1em;
    font-size: 1em;
    color: #333;
    transition: background-color 0.3s ease;
}

    .dropdown-display:hover[b-gruvndl3xk] {
        background-color: #f0f0f0;
    }

input[type="text"][b-gruvndl3xk],
select[b-gruvndl3xk] {
    width: 100%;
    padding: 0.5em;
    margin-bottom: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.cityscroller[b-gruvndl3xk] {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 20em;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
}

li[b-gruvndl3xk] {
    padding: 0.5em;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    margin: 0.2em 0;
}

    li:hover[b-gruvndl3xk] {
        background-color: #f0f0f0;
    }

    li:last-child[b-gruvndl3xk] {
        border-bottom: none;
    }

p[b-gruvndl3xk] {
    margin-top: 1em;
    font-weight: bold;
}

/* Style for the dropdown container */
.dropdown-container[b-gruvndl3xk] {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    border: 1px solid #ccc;
    z-index: 1000;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Style for the dropdown header */
.dropdown-header[b-gruvndl3xk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    border-bottom: 1px solid #ccc;
    z-index: 1;
}

/* Style for the dropdown content */
.dropdown-content[b-gruvndl3xk] {
    padding: 1em;
    overflow-y: auto;
    flex-grow: 1;
}

input[type="checkbox"][b-gruvndl3xk],
input[type="radio"][b-gruvndl3xk] {
    margin-right: 0.5em;
    margin-left: 0.5em;
    transform: scale(1.2);
}

.cancel-button[b-gruvndl3xk] {
    width: 2em;
    height: 2em;
    background-color: transparent;
    color: #000000;
    font-weight: 900;
    font-size: 2.3em;
    border: none;
    margin: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .cancel-button:hover[b-gruvndl3xk] {
        color: #005f99;
    }

.apply-button[b-gruvndl3xk] {
    width: 2em;
    height: 2em;
    background-color: #007acc;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2em;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    .apply-button:hover[b-gruvndl3xk] {
        background-color: #005f99;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    }

/* Style for the background container */
.background-container[b-gruvndl3xk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent overlay */
    backdrop-filter: blur(8px); /* Blurs the content behind it */
    z-index: 999; /* Should be lower than the dropdown-container’s z-index */
}
/* /CitySelect/SearchableCities.razor.rz.scp.css */
.dropdown-display[b-6ijfbcu4dz] {
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: fit-content;
    padding: 0.5em;
    background-color: #f0f0f0;
    font-size: 1em;
    color: #333;
    transition: background-color 0.3s ease;
}

    .dropdown-display:hover[b-6ijfbcu4dz] {
        background-color: #e0e0e0;
    }

/* Style for the dropdown container */
.dropdown-container[b-6ijfbcu4dz] {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    background-color: #cccccc;
    border: 1px solid #ccc;
    z-index: 1000;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Style for the dropdown header */
.dropdown-header[b-6ijfbcu4dz] {
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid #ccc;
    z-index: 1;
}

/* Style for the dropdown content */
.dropdown-content[b-6ijfbcu4dz] {
    padding-right: 1em;
    overflow-y: auto;
    flex-grow: 1;
}

ul[b-6ijfbcu4dz] {
    list-style-type: none;
    padding-left: 1em;
    margin: 0;
}

li[b-6ijfbcu4dz] {
    margin: 0.2em 0;
}

.selectable-label[b-6ijfbcu4dz] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0;
    transition: background-color 0.3s ease;
}

    .selectable-label:hover[b-6ijfbcu4dz] {
        background-color: #f7f7f7;
        border-radius: 3px;
    }

input[type="checkbox"][b-6ijfbcu4dz],
input[type="radio"][b-6ijfbcu4dz] {
    margin-right: 0.5em;
    margin-left: 0.5em;
    transform: scale(1.2);
}

.cancel-button[b-6ijfbcu4dz] {
    transform: translate(-0.5em, -0.5em);
    width: 2em;
    height: 2em;
    background-color: transparent;
    color: #000000;
    font-weight: 900;
    font-size: 2.3em;
    border: none;
    margin: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .cancel-button:hover[b-6ijfbcu4dz] {
        color: #005f99;
    }

.apply-button[b-6ijfbcu4dz] {
    width: 2em;
    height: 2em;
    background-color: #007acc;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2em;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    .apply-button:hover[b-6ijfbcu4dz] {
        background-color: #005f99;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    }



/* Style for the country and admin group headers */
strong[b-6ijfbcu4dz], em[b-6ijfbcu4dz] {
    display: block;
    margin: 5px 0;
}


/* Style for the background container */
.background-container[b-6ijfbcu4dz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent overlay */
    backdrop-filter: blur(8px); /* Blurs the content behind it */
    z-index: 999; /* Should be lower than the dropdown-container’s z-index */
}
/* /Components/ActionButton.razor.rz.scp.css */
/* ActionButton.razor.css */

/* Base styles for action buttons */
.btn-action[b-jzhh0sf2z2] {
    position: relative;
    display: inline-flex;
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    padding: 0.5em 0.75em;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    background-color: var(--bg-color, #1b6ec2);
    border: none;
    border-radius: 0.25em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    width: auto; /* Allows dynamic sizing */
    /* Add shadow for 3D effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.btn-action:hover[b-jzhh0sf2z2] {
    background-color: #0056b3;
}

    /* Disabled state */
    .btn-action:disabled[b-jzhh0sf2z2] {
        background-color: #6c757d;
        cursor: not-allowed;
    }

/* Child elements */
.button-content[b-jzhh0sf2z2] {
    /* No absolute positioning */
}

.spinner[b-jzhh0sf2z2],
.checkmark[b-jzhh0sf2z2],
.errormark[b-jzhh0sf2z2] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

/* Show elements based on state */
.btn-action.loading .spinner[b-jzhh0sf2z2],
.btn-action.success .checkmark[b-jzhh0sf2z2],
.btn-action.error .errormark[b-jzhh0sf2z2] {
    visibility: visible;
}

/* Hide content when necessary */
.btn-action.loading .button-content[b-jzhh0sf2z2],
.btn-action.success .button-content[b-jzhh0sf2z2],
.btn-action.error .button-content[b-jzhh0sf2z2] {
    visibility: hidden;
}

/* Spinner styles */
.spinner[b-jzhh0sf2z2] {
    width: 1em;
    height: 1em;
    border: 0.15em solid #fff;
    border-top: 0.15em solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: spin-b-jzhh0sf2z2 1s linear infinite;
}

/* Checkmark and Error mark styles */
.checkmark[b-jzhh0sf2z2],
.errormark[b-jzhh0sf2z2] {
    font-size: 1em;
    color: #fff;
}

/* Success and Error states */
.btn-action.success[b-jzhh0sf2z2] {
    background-color: #28a745;
}

.btn-action.error[b-jzhh0sf2z2] {
    background-color: #dc3545;
}

/* Keyframes for spinner animation */
@keyframes spin-b-jzhh0sf2z2 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* /Components/AdviceOfTheDay.razor.rz.scp.css */
.advice-card[b-t6yfp73dnr] {
    background: linear-gradient(135deg, #c3e5f5, #f7faff);
    padding: 0.5em;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.nav-button-wrapper[b-t6yfp73dnr] {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50; /* Clean green */
    border-radius: 6px; /* Rounded corners */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth effects */
    cursor: pointer; /* Pointer cursor for click */
}

    .nav-button-wrapper a[b-t6yfp73dnr] {
        color: white;
        text-decoration: none; /* Remove underline */
        font-size: 16px;
        font-weight: bold;
    }

    .nav-button-wrapper:hover[b-t6yfp73dnr] {
        background-color: #45a049; /* Slightly darker green */
        transform: scale(1.02); /* Subtle grow effect */
    }

    .nav-button-wrapper:active[b-t6yfp73dnr] {
        background-color: #388E3C; /* Even darker green */
        transform: scale(0.98); /* Pressed effect */
    }

.companionita-icon[b-t6yfp73dnr] {
    height: 5em;
}
/* /Components/AppleSignInButton.razor.rz.scp.css */

.apple-sign-in-button[b-lmfzgm2wcx] {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: #000;
    background-image: none;
    border: 1px solid #000;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1em;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: min-content;
    display: block;
    margin: 10px auto 0;
}

    .apple-sign-in-button .apple-sign-in-button-content[b-lmfzgm2wcx] {
        -webkit-align-items: center;
        align-items: center;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: 100%;
        justify-content: center;
        position: relative;
        width: 100%;
    }

    .apple-sign-in-button .apple-sign-in-button-icon[b-lmfzgm2wcx] {
        height: 20px;
        margin-right: 12px;
        min-width: 20px;
        width: 20px;
    }

    .apple-sign-in-button .apple-sign-in-button-text[b-lmfzgm2wcx] {
        -webkit-flex-grow: 0;
        flex-grow: 0;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: top;
    }

    .apple-sign-in-button:disabled[b-lmfzgm2wcx] {
        cursor: default;
        background-color: #00000061;
        border-color: #0000001f;
    }

    .apple-sign-in-button:not(:disabled):active[b-lmfzgm2wcx],
    .apple-sign-in-button:not(:disabled):focus[b-lmfzgm2wcx] {
        background-color: #333;
    }

    .apple-sign-in-button:not(:disabled):hover[b-lmfzgm2wcx] {
        background-color: #222;
        -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    }
/* /Components/CameraComponent.razor.rz.scp.css */
.full-container[b-ceshsytn8v] {
    display: flex;
    justify-content: center; /* Centers content horizontally */
    max-width: 640px;
    margin: 0 auto; /* Centers the container horizontally within its parent */
}

.initial-camera-image[b-ceshsytn8v] {
    width: 100%;
    cursor: pointer;
    border: 1px solid black;
}

.camera-ui[b-ceshsytn8v] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    background: black;
}

.camera-preview[b-ceshsytn8v] {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    touch-action: none; /* Only prevents default browser actions, not custom zoom handling */
    transform-origin: center;
}

.camera-container[b-ceshsytn8v] {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden; /* This will clip the content to the container */
}




.camera-controls[b-ceshsytn8v] {
    position: fixed; /* Change this from 'absolute' to 'fixed' */
    bottom: calc(env(safe-area-inset-bottom) + 1em); /* Added safe area inset for iOS */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Ensures controls are above the video/canvas */
}

    .camera-controls button[b-ceshsytn8v] {
        width: 2em;
        height: 2em;
    }

.center-buttons[b-ceshsytn8v] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.take-photo-button[b-ceshsytn8v] {
    margin: 0 0.5em;
    padding: 0;
    border-radius: 50%;
    background-color: white;
    border: 2px solid gray;
    font-size: 2em;
    background-image: url(/images/camera_icon.png);
    background-position: center;
    background-repeat: no-repeat;
}

.confirm-photo-button[b-ceshsytn8v] {
    margin: 0 0.5em;
    padding: 0;
    border-radius: 50%;
    background-color: white;
    border: 2px solid gray;
    font-size: 2em;
}

.switch-button[b-ceshsytn8v],
.retake-button[b-ceshsytn8v] {
    margin: 0 0.5em;
    padding: 0;
    border-radius: 50%;
    background-color: white;
    border: 2px solid gray;
    font-size: 1.5em;
}

.close-button[b-ceshsytn8v] {
    position: absolute;
    top: 1em;
    left: 1em;
    padding: 0;
    background-color: white;
    border: 2px solid gray;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    z-index: 1001; /* Ensures controls are above the video/canvas */
    font-size: 1em;
    opacity: 50%;
}

.hiddenButton[b-ceshsytn8v] {
    visibility: hidden;
}

.hidden-element[b-ceshsytn8v] {
    display: none;
}

/* /Components/ContestLeaderBoard.razor.rz.scp.css */
.leaderboard-title[b-5zo0c6w2vr] {
    text-align: center;
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #333;
}

.leaderboard-table[b-5zo0c6w2vr] {
    width: 100%;
    border-collapse: collapse;
    margin: auto;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
}

    .leaderboard-table thead th[b-5zo0c6w2vr] {
        background-color: #4CAF50;
        color: white;
        text-align: left;
        padding: 10px;
    }

    .leaderboard-table tbody tr:nth-child(even)[b-5zo0c6w2vr] {
        background-color: #f2f2f2;
    }

    .leaderboard-table tbody tr:hover[b-5zo0c6w2vr] {
        background-color: #ddd;
    }

    .leaderboard-table td[b-5zo0c6w2vr], .leaderboard-table th[b-5zo0c6w2vr] {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .leaderboard-table td[b-5zo0c6w2vr] {
        text-align: center;
    }

    .leaderboard-table tbody tr:first-child td[b-5zo0c6w2vr] {
        font-weight: bold;
        color: #4CAF50;
    }

@media screen and (max-width: 768px) {
    .leaderboard-table[b-5zo0c6w2vr] {
        font-size: 0.9em;
    }
}

.thumbnail[b-5zo0c6w2vr] {
    width: 2.5em; /* Set the size of the thumbnail */
    height: 2.5em; /* Keep it square */
    border-radius: 50%; /* Make the thumbnail circular */
    margin-right: 0.5em; /* Add space between the image and the user name */
    object-fit: cover; /* Ensure the image covers the area without stretching */
    border: 0.125em solid #ddd; /* Optional border around the thumbnail */
    display: inline-block; /* Make sure it aligns with the text */
    vertical-align: middle; /* Vertically center the thumbnail */
    flex-shrink: 0;
}

/* /Components/CustomErrorBoundary.razor.rz.scp.css */
.error-boundary[b-l108wuiw76] {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid red;
    background-color: #ffeeee;
    color: #d8000c;
    border-radius: 5px;
    margin: 20px 0;
}

    .error-boundary .error-message[b-l108wuiw76] {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .error-boundary .error-message h2[b-l108wuiw76] {
            font-size: 1.5em;
            margin-bottom: 10px;
        }

        .error-boundary .error-message p[b-l108wuiw76] {
            font-size: 1.2em;
            margin-bottom: 20px;
        }

        .error-boundary .error-message button[b-l108wuiw76] {
            padding: 10px 20px;
            background-color: #d8000c;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

            .error-boundary .error-message button:hover[b-l108wuiw76] {
                background-color: #b00009;
            }
/* /Components/FeedbackButton.razor.rz.scp.css */
.feedbackButtonClass[b-jq5x34d0ng] {
    position: fixed;
    top: 5em;
    right: 0.5em;
    background-color: #FFA200;
    color: white;
    border: none;
    border-radius: 0.5em;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    cursor: pointer;
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.2s, opacity 0.2s;
    z-index: 2001;
    text-align: center;
    line-height: 1.2em;
    padding: 0;
    opacity: 0.75;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.feedbackButtonClass:hover[b-jq5x34d0ng] {
    background-color: #b87500;
    transform: scale(1.05);
    opacity: 1;
}

.feedbackButtonClass:active[b-jq5x34d0ng] {
    background-color: #FFA200;
    transform: scale(0.98);
}

.feedbackButtonClass.dragging[b-jq5x34d0ng] {
    opacity: 1;
    cursor: grabbing;
    transform: scale(1.08);
    box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.3);
}

.feedbackButtonClass img[b-jq5x34d0ng] {
    width: 100%;
    height: 3em;
    pointer-events: none;
}

.popupClass[b-jq5x34d0ng] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1.25em;
    box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.2);
    border-radius: 0.75em;
    z-index: 2001;
    width: 80%;
    max-width: 28em;
}

.popupClass textarea[b-jq5x34d0ng] {
    width: 100%;
    height: 6.25em;
    margin-bottom: 0.625em;
    border: 1px solid #ccc;
    border-radius: 0.375em;
    padding: 0.5em;
    font-family: inherit;
    font-size: 0.9em;
    resize: vertical;
    box-sizing: border-box;
}

.popupClass textarea:focus[b-jq5x34d0ng] {
    outline: none;
    border-color: #FFA200;
    box-shadow: 0 0 0 2px rgba(255, 162, 0, 0.25);
}

.popup-buttons[b-jq5x34d0ng] {
    display: flex;
    gap: 0.5em;
}

.popup-buttons button[b-jq5x34d0ng] {
    display: inline-block;
    padding: 0.625em 1.25em;
    font-size: 0.875em;
    border: none;
    border-radius: 0.3125em;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.sendButton[b-jq5x34d0ng] {
    background-color: #28a745;
    color: white;
}

.sendButton:hover[b-jq5x34d0ng] {
    background-color: #218838;
}

.sendButton:active[b-jq5x34d0ng] {
    background-color: #1e7e34;
}

.sendButton:disabled[b-jq5x34d0ng] {
    background-color: grey;
    cursor: not-allowed;
}

.cancelButton[b-jq5x34d0ng] {
    background-color: #dc3545;
    color: white;
}

.cancelButton:hover[b-jq5x34d0ng] {
    background-color: #c82333;
}

.cancelButton:active[b-jq5x34d0ng] {
    background-color: #bd2130;
}

.blurred-background[b-jq5x34d0ng] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(0.3125em);
    z-index: 2000;
}

.send-icon[b-jq5x34d0ng] {
    margin-right: 0.5em;
}

.thank-you-message[b-jq5x34d0ng] {
    position: fixed;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    background-color: #28a745;
    color: white;
    padding: 0.75em 1.5em;
    border-radius: 0.5em;
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2);
    z-index: 2001;
    font-size: 0.9em;
    animation: fadeInOut-b-jq5x34d0ng 3s ease-in-out;
}

@keyframes fadeInOut-b-jq5x34d0ng {
    0% { opacity: 0; transform: translateX(-50%) translateY(1em); }
    10% { opacity: 1; transform: translateX(-50%) translateY(0); }
    85% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-0.5em); }
}

/* /Components/GoogleSignInButton.razor.rz.scp.css */


.gsi-material-button[b-zj9jrwoa1v] {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: #131314;
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #e3e3e3;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 1em;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: min-content;
    border-color: #8e918f;
    display: block;
    margin: 0 auto;
}

    .gsi-material-button .gsi-material-button-icon[b-zj9jrwoa1v] {
        height: 20px;
        margin-right: 12px;
        min-width: 20px;
        width: 20px;
    }

    .gsi-material-button .gsi-material-button-content-wrapper[b-zj9jrwoa1v] {
        -webkit-align-items: center;
        align-items: center;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: 100%;
        justify-content: center;
        position: relative;
        width: 100%;
    }

    .gsi-material-button .gsi-material-button-contents[b-zj9jrwoa1v] {
        -webkit-flex-grow: 0;
        flex-grow: 0;
        font-family: 'Roboto', arial, sans-serif;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: top;
    }

    .gsi-material-button .gsi-material-button-state[b-zj9jrwoa1v] {
        -webkit-transition: opacity .218s;
        transition: opacity .218s;
        bottom: 0;
        left: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .gsi-material-button:disabled[b-zj9jrwoa1v] {
        cursor: default;
        background-color: #13131461;
        border-color: #8e918f1f;
    }

        .gsi-material-button:disabled .gsi-material-button-state[b-zj9jrwoa1v] {
            background-color: #e3e3e31f;
        }

        .gsi-material-button:disabled .gsi-material-button-contents[b-zj9jrwoa1v] {
            opacity: 38%;
        }

        .gsi-material-button:disabled .gsi-material-button-icon[b-zj9jrwoa1v] {
            opacity: 38%;
        }

    .gsi-material-button:not(:disabled):active .gsi-material-button-state[b-zj9jrwoa1v],
    .gsi-material-button:not(:disabled):focus .gsi-material-button-state[b-zj9jrwoa1v] {
        background-color: white;
        opacity: 12%;
    }

    .gsi-material-button:not(:disabled):hover[b-zj9jrwoa1v] {
        -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    }

        .gsi-material-button:not(:disabled):hover .gsi-material-button-state[b-zj9jrwoa1v] {
            background-color: white;
            opacity: 8%;
        }
/* /Components/Information.razor.rz.scp.css */
/* Info Icon Styling */
.info-icon[b-h5sgs20vfr] {
    float: right;
    cursor: pointer;
    font-size: 2em;
}
    .info-icon img[b-h5sgs20vfr] {
        width: 2em;
    }

/* Overlay Styling */
.overlay[b-h5sgs20vfr] {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.overlay-content[b-h5sgs20vfr] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 90%;
    max-height: 80%;
    overflow-y: auto;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}
/* /Components/LanguageSelector.razor.rz.scp.css */
.language-selector[b-jaizw3sxod] {
    display: inline-block;
}

    .language-selector select[b-jaizw3sxod] {
        background-color: transparent;
        color: inherit;
        border: 1px solid rgba(128, 128, 128, 0.4);
        border-radius: 4px;
        padding: 0.2em 0.4em;
        font-size: 0.85em;
        cursor: pointer;
    }

        .language-selector select:focus[b-jaizw3sxod] {
            outline: none;
            border-color: #109ae1;
        }
/* /Components/QRCodeComponent.razor.rz.scp.css */
.qrcode-container[b-k4fqambcqr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin: 1rem 0;
}

.qrcode-wrapper[b-k4fqambcqr] {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qrcode-image[b-k4fqambcqr] {
    max-width: 250px;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.qrcode-loading[b-k4fqambcqr] {
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-style: italic;
}

.copy-button[b-k4fqambcqr] {
    padding: 0.5rem 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.copy-button:hover[b-k4fqambcqr] {
    background-color: #0056b3;
}

.copy-button:active[b-k4fqambcqr] {
    background-color: #004085;
}

@media (max-width: 768px) {
    .qrcode-container[b-k4fqambcqr] {
        padding: 1rem;
    }

    .qrcode-image[b-k4fqambcqr] {
        max-width: 200px;
    }

    .qrcode-loading[b-k4fqambcqr] {
        width: 200px;
        height: 200px;
    }
}
/* /Components/ReportButton.razor.rz.scp.css */
.report-btn[b-nx48j7bb0c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid #e57373;
    color: #e57373;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s, color 0.2s;
}

.report-btn:hover[b-nx48j7bb0c] {
    background: #e57373;
    color: #fff;
}

.report-overlay[b-nx48j7bb0c] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.report-dialog[b-nx48j7bb0c] {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 24px;
    width: min(400px, 90vw);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.report-dialog h3[b-nx48j7bb0c] {
    margin-top: 0;
    margin-bottom: 16px;
}

.report-dialog label[b-nx48j7bb0c] {
    display: block;
    font-weight: 600;
    margin: 12px 0 4px;
}

.report-dialog select[b-nx48j7bb0c],
.report-dialog textarea[b-nx48j7bb0c] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.report-result[b-nx48j7bb0c] {
    margin: 8px 0;
    font-size: 0.85rem;
}

.report-result.success[b-nx48j7bb0c] { color: #4caf50; }
.report-result.error[b-nx48j7bb0c] { color: #e57373; }

.report-actions[b-nx48j7bb0c] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.btn-cancel[b-nx48j7bb0c] {
    background: transparent;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 6px 16px;
    cursor: pointer;
}
/* /Components/ShareButton.razor.rz.scp.css */
.share-button[b-qby2va04sj] {
    float: right;
    background-color: #1b6ec2;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
    display: flex;
    align-items: center; /* Align the icon and text vertically */
}

.share-icon[b-qby2va04sj] {
    margin-right: 8px; /* Space between the icon and the text */
}

.share-button:hover[b-qby2va04sj] {
    background-color: #0056b3;
}
/* /Components/ThumbnailComponent.razor.rz.scp.css */
/* Define a custom property for the thumbnail size */
.thumbnail-container[b-59kr7n7mv3] {
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin-left: 0.3em;
    flex-shrink: 0;

    --thumbnail-size: 5em; /* Default size */
    width: var(--thumbnail-size);
    height: var(--thumbnail-size);
}

.thumbnail-image[b-59kr7n7mv3] {
    width: 100%; /* Fill container */
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
    border-radius: 0.5em;
    margin-left: 0.3em;
    flex-shrink: 0;
}


.full-size-image[b-59kr7n7mv3] {
    width: 100%; /* Full screen width */
    height: 100%; /* Full screen height */
    object-fit: contain;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Bring the full-size image to the front */
    background-color: rgba(0, 0, 0, 0.8); /* Optional: darken the background */
    transition: transform 0.3s ease-in-out;
}
/* /Layout/CompanioNationLogo.razor.rz.scp.css */
.topLogo[b-o41rrnu9o3] {
    padding: 1px;
    display: block;
    width: 20rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

    .topLogo img[b-o41rrnu9o3] {
        width: 20rem;
    }

.separator[b-o41rrnu9o3] {
    width: 100%;
    height: 1px; /* Adjust thickness here */
    background-color: #3498db; /* Adjust color here */
    margin-top: 1em;
    margin-bottom: 1em;
}
/* Tagline below logo */
.companionation-tagline[b-o41rrnu9o3] {
    color: #555555;
    font-size: 1.1em;
    font-style: italic;
}
/* /Layout/Footer.razor.rz.scp.css */

.footer[b-zjvpxaudrp] {
    text-align: center;
}

.copyright[b-zjvpxaudrp] {
    font-size: 0.8em;
}
/* /Layout/Login.razor.rz.scp.css */
.loading-indicator[b-xl31cxuh1x] {
    color: blue;
    font-weight: bold;
}
.success-message[b-xl31cxuh1x] {
    color: green;
    font-weight: bold;
}

.error-message[b-xl31cxuh1x] {
    color: red;
    font-weight: bold;
}

.loginPopupClass[b-xl31cxuh1x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10001;
}

    .loginPopupClass a[b-xl31cxuh1x] {
        pointer-events: auto; /* Allows pointer interactions */
        cursor: pointer;
    }

    .loginPopupClass h2[b-xl31cxuh1x] {
        font-weight: bold;
    }

    .loginPopupClass #centerPane[b-xl31cxuh1x] {
        position: fixed;
        background-color: white;
        color: #122776;
        padding: 1em;
        width: 30em;
        max-width: calc(100vw - 2em);
        max-height: 90vh;
        height: auto;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        border: 0.2em solid black;
        text-align: center;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
    }


/* The password / new-account inputs are wrapped in a <div> (for the "forgot
   password" link, etc.). In the centered flex column that wrapper shrinks to its
   content width, which prevented the password field from widening on larger
   displays the way the email field (a direct flex child) does. Stretch the
   wrapper so the .loginText inside it can fill the same width as email. */
.loginPopupClass #centerPane > div[b-xl31cxuh1x] {
    align-self: stretch;
    width: 100%;
}

.loginText[b-xl31cxuh1x] {
    border-width: 0.1em;
    /* Fill the popup up to a comfortable max on wide screens, but never overflow
       on narrow ones. Using width:100% + max-width (not width:26em + max-width)
       is the only reliable way to prevent overflow inside a flex column with
       align-items:center on Android — percentage max-width on a fixed em width
       resolves inconsistently there. box-sizing:border-box keeps the padding
       and border inside the width so 100% really means 100%. */
    width: 100%;
    max-width: 26em;
    box-sizing: border-box;
    border-radius: 3em;
    padding: 0.5em 1em;
    box-shadow: 0 0.1em 0.2em darkslategray;
    margin: 0.5em 0;
}

.blueButton[b-xl31cxuh1x] {
    background-color: #122776; /* Blue */
}
.grayButton[b-xl31cxuh1x] {
    background-color: gray; /* Gray */
}

.button-container[b-xl31cxuh1x] {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    align-self: stretch;
}

.blueButton[b-xl31cxuh1x], .grayButton[b-xl31cxuh1x] {
    flex: 1;
    margin: 0 5px;
    box-shadow: 0 0.1em 0.25em darkslategray;
    color: white;
    border: 0;
    text-decoration: none;
    font-weight: bold;
    border-radius: 3em;
    padding: 1em 2em;
    height: 5em;
}
/* /Layout/MainLayout.razor.rz.scp.css */
html[b-l50wdp1tzo] {
}

body[b-l50wdp1tzo] {
}


.loading[b-l50wdp1tzo] {
    text-align: center;
    padding: 20px;
}

.progress[b-l50wdp1tzo] {
    height: 20px;
}

.progress-bar[b-l50wdp1tzo] {
    width: 100%;
}


.fullPage[b-l50wdp1tzo] {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    bottom: env(safe-area-inset-bottom, 0);
    left: env(safe-area-inset-left, 0);
    right: env(safe-area-inset-right, 0);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.content[b-l50wdp1tzo] {
    overflow-y: auto;
    height: 100%;
}


.topBanner[b-l50wdp1tzo] {
    z-index: 10;
    margin: 0;
    border: 0.1em solid gray;
    padding: 1em 2em;
    background-color: lightgray;
    text-align: center;
}

.greenButton[b-l50wdp1tzo] {
    box-shadow: 0 0.1em 0.2em darkslategray;
    background-color: #00C400; /* Green */
    color: black;
    border: 0;
    text-decoration: none;
    font-weight: bold;
    border-radius: 3em;
    margin: 0.25em;
    padding: 1em 2em;
}
    .greenButton:hover[b-l50wdp1tzo] {
        background-color: #11aa11;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

.error[b-l50wdp1tzo] {
    color: red;
    height: 2em;
    text-align: center;
}

.disableHtml[b-l50wdp1tzo] {
    pointer-events: none;
}

.remove-scrolling[b-l50wdp1tzo] {
    height: 100%;
    overflow: hidden;
}





.button-container[b-l50wdp1tzo] {
    margin-top: 1px;
    height: 4em;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    background-color: #f8f9fa;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #ddd; /* Optional: for a top border */
    z-index: 100; /* Ensures the button container is above other elements */
}

.unread-badge[b-l50wdp1tzo] {
    position: absolute;
    top: 15px; /* Adjust as needed  TODO - convert this to em units */
    right: 15px; /* Adjust as needed */
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 0.2em 0.5em; /* Adjust padding to better center the text */
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(50%, -50%); /* Adjusts the placement slightly for perfect centering */
    line-height: 1; /* Ensures text isn't too high or low */
    min-width: 20px; /* Ensures it remains a circle for single-digit counts */
    height: 20px; /* Ensures consistency in height */
    box-sizing: border-box; /* Includes padding in size calculation */
    z-index:101
}

.button[b-l50wdp1tzo] {
    position: relative; /* Ensures the badge is positioned correctly relative to the button */
    flex: 1;
    width: 20%; /* Ensure each button takes up exactly 20% of the container's width */
    padding: 5px 0 0 0; /* Adjust padding to ensure content fits within button */
    font-size: 0.8em;
    font-weight: 500;
    color: #fff;
    background-color: #003366; /* Use a color that matches the icon */
    border: none;
    border-left: 1px solid black; /* Add left border to each button */
    border-right: 1px solid black; /* Add right border to each button */
    border-radius: 0; /* Remove border radius to ensure flush edges */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex; /* Flex display to align icon and text */
    flex-direction: column; /* Stack icon above text */
    align-items: center; /* Center align icon and text horizontally */
    justify-content: space-between; /* Ensures space between icon and text */
    text-align: center; /* Center align text */
}

    .button:first-child[b-l50wdp1tzo] {
        border-left: none; /* Remove left border for the first button */
    }

    .button:last-child[b-l50wdp1tzo] {
        border-right: none; /* Remove right border for the last button */
    }

    .button svg[b-l50wdp1tzo] {
        margin-top: 0px; /* Space between icon and text */
        flex-grow: 1; /* Ensures the icon takes up available space */
    }

    .button span[b-l50wdp1tzo] {
        margin-top: auto; /* Pushes text to the bottom */
        padding-top: 0px; /* Optional: additional space between icon and text */
    }

    .button:hover[b-l50wdp1tzo] {
        background-color: #002244;
    }

    .button:active[b-l50wdp1tzo] {
        transform: scale(0.98);
    }

    .button img[b-l50wdp1tzo] {
        max-width: 100%;
        max-height: calc(100% - 1.5em);
    }



.hideHtmlElement[b-l50wdp1tzo] {
    display: none;
    height: 0;
}



.installIcon[b-l50wdp1tzo] {
    height: 3em;
    vertical-align: middle;
}


#enableNotificationsButton[b-l50wdp1tzo] {
    display: flex;
    align-items: center;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

    #enableNotificationsButton:hover[b-l50wdp1tzo] {
        background-color: #218838;
        transform: scale(1.05);
    }

    #enableNotificationsButton:active[b-l50wdp1tzo] {
        background-color: #1e7e34;
        transform: scale(0.98);
    }

.notification-icon[b-l50wdp1tzo] {
    margin-right: 8px;
    font-size: 18px;
}



.hub-overlay[b-l50wdp1tzo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    cursor: pointer; /* Makes the whole overlay clickable */
}

.hub-overlay-content[b-l50wdp1tzo] {
    text-align: center;
    color: white;
    font-size: 20px;
}

.spinner-border[b-l50wdp1tzo] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
    color: white;
}

.reload-link[b-l50wdp1tzo] {
    color: white;
    text-decoration: underline;
    cursor: pointer;
}


.hub-status[b-l50wdp1tzo] {
    position: fixed;
    top: 5rem; /* Adjust as needed */
    left: 1em; /* Adjust as needed */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    gap: 0.5em; /* Space between the spinner and message */
    z-index: 1000;
}

.hub-status-content[b-l50wdp1tzo] {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.spinner-border[b-l50wdp1tzo] {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.2rem;
}

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

/* Non-intrusive update notification toast */
.update-toast[b-l50wdp1tzo] {
    position: fixed;
    bottom: 1.5em;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 0.6em 1em;
    border-radius: 0.5em;
    box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.3);
    z-index: 10002;
    display: flex;
    align-items: center;
    gap: 0.75em;
    font-size: 0.875em;
    animation: update-toast-slide-in-b-l50wdp1tzo 0.4s ease-out;
}

.update-toast-prompt[b-l50wdp1tzo] {
    display: flex;
    align-items: center;
    gap: 0.75em;
    flex-wrap: nowrap;
}

.update-toast span[b-l50wdp1tzo] {
    white-space: nowrap;
}

.update-toast-refresh[b-l50wdp1tzo] {
    background-color: #FFA200;
    color: white;
    border: none;
    border-radius: 0.3em;
    padding: 0.35em 0.75em;
    cursor: pointer;
    font-size: 0.875em;
    font-weight: 600;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.update-toast-refresh:hover[b-l50wdp1tzo] {
    background-color: #e69200;
}

.update-toast-dismiss[b-l50wdp1tzo] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 1em;
    padding: 0 0.2em;
    line-height: 1;
    transition: color 0.2s;
}

.update-toast-dismiss:hover[b-l50wdp1tzo] {
    color: white;
}

@keyframes update-toast-slide-in-b-l50wdp1tzo {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(1em);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Progress bar and phase text shown while the service worker update is underway */
.update-toast-progress[b-l50wdp1tzo] {
    flex-direction: column;
    gap: 0.4em;
    min-width: 240px;
}

.update-toast-progress .progress[b-l50wdp1tzo] {
    height: 0.4em;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 0.25em;
    overflow: hidden;
}

.update-toast-progress .progress-bar[b-l50wdp1tzo] {
    background-color: #FFA200;
}

.update-toast-phase[b-l50wdp1tzo] {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

/* /Pages/Admin.razor.rz.scp.css */
/* ========== Admin Dashboard ========== */

.admin-panel[b-lgw9e1vbw6] {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px;
}

.admin-panel h3[b-lgw9e1vbw6] {
    margin-bottom: 20px;
}

/* ========== Tool Sections ========== */

.tool-section[b-lgw9e1vbw6] {
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.tool-section-safe[b-lgw9e1vbw6] {
    background: #f0faf0;
    border: 1px solid #c3e6cb;
}

.tool-section-moderate[b-lgw9e1vbw6] {
    background: #fff9e6;
    border: 1px solid #ffeeba;
}

.tool-section-danger[b-lgw9e1vbw6] {
    background: #fdf0f0;
    border: 1px solid #f5c6cb;
}

.tool-section-header[b-lgw9e1vbw6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.tool-section-icon[b-lgw9e1vbw6] {
    font-size: 1.6rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.tool-section-header h4[b-lgw9e1vbw6] {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
}

.tool-section-desc[b-lgw9e1vbw6] {
    color: #6c757d;
    font-size: 0.85em;
    margin: 0;
}

.tool-section-danger .tool-section-desc[b-lgw9e1vbw6] {
    color: #a94442;
}

/* ========== Tool Cards ========== */

.tool-card[b-lgw9e1vbw6] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.tool-card:hover:not(:disabled)[b-lgw9e1vbw6] {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    transform: translateY(-1px);
}

.tool-card:disabled[b-lgw9e1vbw6] {
    opacity: 0.6;
    cursor: not-allowed;
}

.tool-card-danger[b-lgw9e1vbw6] {
    border-color: #f5c6cb;
}

.tool-card-danger:hover:not(:disabled)[b-lgw9e1vbw6] {
    background-color: #fff5f5;
    border-color: #dc3545;
}

.tool-card-icon[b-lgw9e1vbw6] {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.tool-card-text[b-lgw9e1vbw6] {
    display: flex;
    flex-direction: column;
    flex: 1;
    line-height: 1.3;
}

.tool-card-text strong[b-lgw9e1vbw6] {
    font-size: 0.95em;
}

.tool-card-text span[b-lgw9e1vbw6] {
    font-size: 0.8em;
    color: #6c757d;
}

.tool-card-arrow[b-lgw9e1vbw6] {
    font-size: 1.4rem;
    opacity: 0.5;
    flex-shrink: 0;
}

.tool-card-row[b-lgw9e1vbw6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ========== User Editor Layout (sidebar + detail) ========== */

.user-editor-layout[b-lgw9e1vbw6] {
    display: flex;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Hamburger */
.ue-expand-button[b-lgw9e1vbw6] {
    position: fixed;
    z-index: 99;
    background-color: rgba(255, 255, 255, 0.92);
    border: none;
    font-size: 1.25em;
    cursor: pointer;
    padding: 0.25em 0.5em;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s;
}

.ue-expand-button:hover[b-lgw9e1vbw6] {
    background-color: rgba(240, 240, 240, 0.95);
}

/* Sidebar */
.ue-sidebar[b-lgw9e1vbw6] {
    position: absolute;
    height: 100%;
    width: 16em;
    background-image: linear-gradient(180deg, #1760c2 0%, #007bff 70%);
    color: #fff;
    border-right: 1px solid #ddd;
    padding: 0.5em;
    overflow-y: auto;
    z-index: 98;
    transition: transform 0.35s ease;
    display: flex;
    flex-direction: column;
}

.ue-sidebar.collapsed[b-lgw9e1vbw6] {
    transform: translateX(-100%);
}

.ue-sidebar-header[b-lgw9e1vbw6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px 10px;
    flex-shrink: 0;
}

.ue-sidebar-header h4[b-lgw9e1vbw6] {
    margin: 0;
}

.ue-back-btn[b-lgw9e1vbw6] {
    font-size: 0.78em;
    white-space: nowrap;
}

/* Search bar */
.ue-search-bar[b-lgw9e1vbw6] {
    display: flex;
    gap: 4px;
    padding: 0 8px 8px;
    flex-shrink: 0;
}

.ue-search-bar input[b-lgw9e1vbw6] {
    flex: 1;
    min-width: 0;
}

.ue-loading[b-lgw9e1vbw6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    color: #fff;
}

.ue-loading p[b-lgw9e1vbw6] {
    margin-top: 8px;
    font-size: 0.9em;
}

.ue-empty[b-lgw9e1vbw6] {
    text-align: center;
    opacity: 0.8;
    padding: 12px 0;
}

/* User list */
.ue-user-list[b-lgw9e1vbw6] {
    flex: 1;
    overflow-y: auto;
    padding-top: 4px;
}

.ue-user-item[b-lgw9e1vbw6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ue-user-item:hover[b-lgw9e1vbw6] {
    background-color: rgba(255, 255, 255, 0.15);
}

.ue-user-item.active[b-lgw9e1vbw6] {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.ue-user-thumb[b-lgw9e1vbw6] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.ue-user-info[b-lgw9e1vbw6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.ue-user-name[b-lgw9e1vbw6] {
    font-weight: 600;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ue-muted-badge[b-lgw9e1vbw6] {
    font-size: 0.85em;
    flex-shrink: 0;
}

.ue-report-badge[b-lgw9e1vbw6] {
    background: #dc3545;
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 5px;
}

.ue-user-meta[b-lgw9e1vbw6] {
    font-size: 0.75em;
    opacity: 0.8;
}

.ue-pagination[b-lgw9e1vbw6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0 6px;
    font-size: 0.85em;
    flex-shrink: 0;
}

/* ========== Detail Pane ========== */

.ue-detail[b-lgw9e1vbw6] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    margin-left: 16em;
    transition: margin-left 0.35s ease;
}

.ue-detail.expanded[b-lgw9e1vbw6] {
    margin-left: 0;
}

.ue-empty-detail[b-lgw9e1vbw6] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    color: #6c757d;
    font-size: 1.1em;
}

.ue-detail-header[b-lgw9e1vbw6] {
    margin-bottom: 16px;
}

.ue-detail-title[b-lgw9e1vbw6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ue-detail-title h4[b-lgw9e1vbw6] {
    margin: 0;
}

.ue-detail-id[b-lgw9e1vbw6] {
    color: #6c757d;
    font-size: 0.85em;
    font-weight: normal;
}

.ue-info-grid[b-lgw9e1vbw6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
    margin-bottom: 20px;
    font-size: 0.9em;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 14px;
}

/* ========== Edit Section ========== */

.ue-edit-section[b-lgw9e1vbw6] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.ue-edit-section h5[b-lgw9e1vbw6] {
    margin-top: 0;
    margin-bottom: 12px;
}

.ue-edit-field[b-lgw9e1vbw6] {
    margin-bottom: 10px;
}

.ue-edit-field label[b-lgw9e1vbw6] {
    display: block;
    font-weight: 600;
    font-size: 0.85em;
    margin-bottom: 4px;
    color: #495057;
}

.ue-edit-row[b-lgw9e1vbw6] {
    display: flex;
    gap: 16px;
}

.ue-edit-row .ue-edit-field[b-lgw9e1vbw6] {
    flex: 1;
}

.ue-edit-actions[b-lgw9e1vbw6] {
    margin-top: 12px;
}

/* ========== Photos ========== */

.ue-photos-section[b-lgw9e1vbw6] {
    margin-bottom: 20px;
}

.ue-photos-section h5[b-lgw9e1vbw6] {
    margin-bottom: 12px;
}

.ue-photo-grid[b-lgw9e1vbw6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.ue-photo-card[b-lgw9e1vbw6] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
}

.ue-photo-img[b-lgw9e1vbw6] {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}

.ue-photo-meta[b-lgw9e1vbw6] {
    display: flex;
    justify-content: space-between;
    font-size: 0.78em;
    color: #6c757d;
    margin-bottom: 6px;
}

.photo-visible[b-lgw9e1vbw6] {
    color: #28a745;
    font-weight: 600;
}

.photo-hidden[b-lgw9e1vbw6] {
    color: #dc3545;
    font-weight: 600;
}

.ue-delete-confirm[b-lgw9e1vbw6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85em;
    padding: 6px;
    background: #fff3cd;
    border-radius: 4px;
}

.ue-photo-actions[b-lgw9e1vbw6] {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.ue-photo-check-result[b-lgw9e1vbw6] {
    font-size: 0.8em;
    margin-top: 4px;
    padding: 4px 6px;
    background: #f8f9fa;
    border-radius: 4px;
    word-break: break-word;
}

.photo-scan-progress[b-lgw9e1vbw6] {
    margin-top: 8px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
}

/* ========== Description ========== */

.ue-description[b-lgw9e1vbw6] {
    margin-bottom: 20px;
}

.ue-description-text[b-lgw9e1vbw6] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.9em;
    max-height: 200px;
    overflow-y: auto;
}

/* ========== Actions ========== */

.ue-actions[b-lgw9e1vbw6] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

/* ========== Shared States ========== */

.maintenance-message[b-lgw9e1vbw6] {
    color: #ff9800;
    font-weight: bold;
    margin-top: 10px;
    font-size: 1.1em;
}

.maintenance-result[b-lgw9e1vbw6] {
    color: #28a745;
    font-weight: bold;
    margin-top: 10px;
}

.maintenance-error[b-lgw9e1vbw6] {
    color: #dc3545;
    font-weight: bold;
    margin-top: 10px;
}

.spinner-container[b-lgw9e1vbw6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 12px 0;
}

.spinner[b-lgw9e1vbw6] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin-b-lgw9e1vbw6 1s ease infinite;
}

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

/* ========== Responsive ========== */

@media (max-width: 600px) {
    .ue-info-grid[b-lgw9e1vbw6] {
        grid-template-columns: 1fr;
    }

    .ue-edit-row[b-lgw9e1vbw6] {
        flex-direction: column;
        gap: 0;
    }

    .ue-photo-grid[b-lgw9e1vbw6] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .tool-card-row[b-lgw9e1vbw6] {
        grid-template-columns: 1fr;
    }

    .ue-detail[b-lgw9e1vbw6] {
        margin-left: 0;
    }

    .ue-sidebar[b-lgw9e1vbw6] {
        width: 80%;
    }
}

/* ========== Site Statistics ========== */
.stats-header[b-lgw9e1vbw6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.stats-header > div[b-lgw9e1vbw6] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.stats-generated[b-lgw9e1vbw6] {
    color: #888;
    font-size: 0.85rem;
    margin: 0 0 12px;
}

.stats-counter-grid[b-lgw9e1vbw6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.stats-counter[b-lgw9e1vbw6] {
    background: #f5f7fa;
    border: 1px solid #e2e6ea;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.stats-counter-value[b-lgw9e1vbw6] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.2;
}

.stats-counter-label[b-lgw9e1vbw6] {
    font-size: 0.78rem;
    color: #6c757d;
    margin-top: 2px;
}

.stats-snapshot-row[b-lgw9e1vbw6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stats-snapshot[b-lgw9e1vbw6] {
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 6px;
    padding: 12px;
}

.stats-snapshot h5[b-lgw9e1vbw6] {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: #2c3e50;
}

.stats-snapshot-value[b-lgw9e1vbw6] {
    font-size: 1.6rem;
    font-weight: 600;
    color: #2c6cb0;
}

.stats-snapshot-label[b-lgw9e1vbw6] {
    font-size: 0.8rem;
    color: #6c757d;
}

.stats-hint[b-lgw9e1vbw6] {
    color: #888;
    cursor: help;
    font-size: 0.85em;
    font-weight: normal;
}

.stats-chart[b-lgw9e1vbw6] {
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    overflow-x: auto;
}

.stats-chart h5[b-lgw9e1vbw6] {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: #2c3e50;
}

.stats-bars[b-lgw9e1vbw6] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding-bottom: 4px;
    min-width: fit-content;
}

.stats-bar-col[b-lgw9e1vbw6] {
    flex: 1 1 0;
    min-width: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 200px;
}

.stats-bar-count[b-lgw9e1vbw6] {
    font-size: 0.7rem;
    color: #555;
    height: 14px;
    line-height: 14px;
    margin-bottom: 2px;
}

.stats-bar[b-lgw9e1vbw6] {
    width: 100%;
    background: linear-gradient(180deg, #4a90e2 0%, #2c6cb0 100%);
    border-radius: 3px 3px 0 0;
    min-height: 1px;
    transition: height 0.3s ease;
}

.stats-bar-empty[b-lgw9e1vbw6] {
    background: #e9ecef;
}

.stats-bar-label[b-lgw9e1vbw6] {
    font-size: 0.65rem;
    color: #666;
    margin-top: 6px;
    transform: rotate(-45deg);
    transform-origin: top left;
    white-space: nowrap;
    height: 28px;
    width: 100%;
    text-align: left;
}

.stats-empty[b-lgw9e1vbw6] {
    color: #888;
    font-style: italic;
    padding: 16px;
    text-align: center;
}

/* ========== Delete Account Modal ========== */

.admin-delete-modal-overlay[b-lgw9e1vbw6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.admin-delete-modal[b-lgw9e1vbw6] {
    background: #fff;
    border-radius: 10px;
    padding: 28px 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    max-height: 90vh;
    overflow-y: auto;
}

.admin-delete-modal-title[b-lgw9e1vbw6] {
    margin: 0 0 16px;
    color: #dc3545;
    font-size: 1.3rem;
}

.admin-delete-modal-warning-heading[b-lgw9e1vbw6] {
    font-weight: 600;
    margin-bottom: 8px;
}

.admin-delete-modal-loss-list[b-lgw9e1vbw6] {
    margin: 0 0 16px 20px;
    color: #555;
    line-height: 1.7;
}

.admin-delete-modal-warning-subtext[b-lgw9e1vbw6] {
    font-weight: 600;
    color: #dc3545;
    margin-bottom: 20px;
}

.admin-delete-modal-email-hint[b-lgw9e1vbw6] {
    font-weight: 600;
    color: #333;
    background: #f0f0f0;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: monospace;
    margin-bottom: 10px;
    word-break: break-all;
}

.admin-delete-confirm-input[b-lgw9e1vbw6] {
    margin-bottom: 16px;
}

.admin-delete-modal-actions[b-lgw9e1vbw6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
/* /Pages/Auth/AppleCallback.razor.rz.scp.css */
.oauth-overlay[b-2j0dx0hvoh] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10001;
}

.oauth-card[b-2j0dx0hvoh] {
    background: #fff;
    color: #333;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    text-align: center;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
    animation: oauth-fade-in-b-2j0dx0hvoh 0.3s ease;
}

.oauth-logo[b-2j0dx0hvoh] {
    font-size: 1.3rem;
    font-weight: bold;
    color: #122776;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

/* Spinner */
.oauth-spinner-container[b-2j0dx0hvoh] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.oauth-spinner[b-2j0dx0hvoh] {
    width: 2.5rem;
    height: 2.5rem;
    border: 0.25rem solid #e0e0e0;
    border-top-color: #122776;
    border-radius: 50%;
    animation: oauth-spin-b-2j0dx0hvoh 0.8s linear infinite;
}

.oauth-status[b-2j0dx0hvoh] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 0.4rem;
}

.oauth-hint[b-2j0dx0hvoh] {
    font-size: 0.85rem;
    color: #888;
    margin: 0;
}

/* Error state */
.oauth-error-icon[b-2j0dx0hvoh] {
    font-size: 2.2rem;
    margin-bottom: 0.6rem;
    color: #d9534f;
}

.oauth-error-heading[b-2j0dx0hvoh] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.6rem;
}

.oauth-error-message[b-2j0dx0hvoh] {
    font-size: 0.9rem;
    color: #d9534f;
    background: #fdf2f2;
    border: 1px solid #f5c6cb;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.oauth-alt-hint[b-2j0dx0hvoh] {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 0.75rem;
}

.oauth-alt-button[b-2j0dx0hvoh] {
    display: inline-block;
    background: #122776;
    color: #fff;
    border: none;
    border-radius: 3em;
    padding: 0.7em 1.8em;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s;
}

.oauth-alt-button:hover[b-2j0dx0hvoh] {
    background: #0e1f5e;
}

/* Animations */
@keyframes oauth-spin-b-2j0dx0hvoh {
    to { transform: rotate(360deg); }
}

@keyframes oauth-fade-in-b-2j0dx0hvoh {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Pages/Auth/GoogleCallback.razor.rz.scp.css */
.oauth-overlay[b-33lk4g3mzc] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10001;
}

.oauth-card[b-33lk4g3mzc] {
    background: #fff;
    color: #333;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    text-align: center;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
    animation: oauth-fade-in-b-33lk4g3mzc 0.3s ease;
}

.oauth-logo[b-33lk4g3mzc] {
    font-size: 1.3rem;
    font-weight: bold;
    color: #122776;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

/* Spinner */
.oauth-spinner-container[b-33lk4g3mzc] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.oauth-spinner[b-33lk4g3mzc] {
    width: 2.5rem;
    height: 2.5rem;
    border: 0.25rem solid #e0e0e0;
    border-top-color: #122776;
    border-radius: 50%;
    animation: oauth-spin-b-33lk4g3mzc 0.8s linear infinite;
}

.oauth-status[b-33lk4g3mzc] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 0.4rem;
}

.oauth-hint[b-33lk4g3mzc] {
    font-size: 0.85rem;
    color: #888;
    margin: 0;
}

/* Error state */
.oauth-error-icon[b-33lk4g3mzc] {
    font-size: 2.2rem;
    margin-bottom: 0.6rem;
    color: #d9534f;
}

.oauth-error-heading[b-33lk4g3mzc] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.6rem;
}

.oauth-error-message[b-33lk4g3mzc] {
    font-size: 0.9rem;
    color: #d9534f;
    background: #fdf2f2;
    border: 1px solid #f5c6cb;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.oauth-alt-hint[b-33lk4g3mzc] {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 0.75rem;
}

.oauth-alt-button[b-33lk4g3mzc] {
    display: inline-block;
    background: #122776;
    color: #fff;
    border: none;
    border-radius: 3em;
    padding: 0.7em 1.8em;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s;
}

.oauth-alt-button:hover[b-33lk4g3mzc] {
    background: #0e1f5e;
}

/* Animations */
@keyframes oauth-spin-b-33lk4g3mzc {
    to { transform: rotate(360deg); }
}

@keyframes oauth-fade-in-b-33lk4g3mzc {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Pages/CompanioNitasCorner.razor.rz.scp.css */
.companionita-icon[b-5jgmi7omb6] {
    height: 5em;
}

.advice-card[b-5jgmi7omb6] {
    background: linear-gradient(135deg, #c3e5f5, #f7faff);
    padding: 0.5em;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}
/* /Pages/EnterBasicInfo.razor.rz.scp.css */
.complete-profile[b-70xakh5g08] {
    margin: 1em;
    max-width: 37.5em; /* 600px to 37.5em */
    margin: 0 auto;
    padding: 1.25em; /* 20px to 1.25em */
    background-color: #f9f9f9;
    border-radius: 0.5em; /* 8px to 0.5em */
    box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.1); /* 10px to 0.625em */
}

/* Add some basic styling for form inputs */
.form-group[b-70xakh5g08] {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.9375em; /* 15px to 0.9375em */
}

label[b-70xakh5g08] {
    font-weight: bold;
    margin-bottom: 0.3125em; /* 5px to 0.3125em */
    display: block;
}

input.form-control[b-70xakh5g08],
select.form-control[b-70xakh5g08],
textarea.form-control[b-70xakh5g08] {
    width: 100%;
    padding: 0.625em; /* 10px to 0.625em */
    font-size: 1em; /* 16px to 1em */
    border-radius: 0.3125em; /* 5px to 0.3125em */
    border: 0.0625em solid #ccc; /* 1px to 0.0625em */
    box-sizing: border-box;
}

input.form-check-input[b-70xakh5g08] {
    margin-right: 0.625em; /* 10px to 0.625em */
}

textarea.form-control[b-70xakh5g08] {
    resize: vertical; /* Allows textarea to be resized vertically */
}

button[b-70xakh5g08] {
    margin-top: 1.25em; /* 20px to 1.25em */
}

/* Center the h3 heading */
h3[b-70xakh5g08] {
    text-align: center;
    margin-bottom: 1.875em; /* 30px to 1.875em */
}

/* Center align the loading and success messages */
.alert-success[b-70xakh5g08], .alert-danger[b-70xakh5g08], p[b-70xakh5g08] {
    text-align: center;
    font-size: 1.2em;
}

/* Optionally, apply specific spacing for ActionButton */
form .btn-action[b-70xakh5g08] {
    margin-top: 1.25em; /* 20px to 1.25em */
    width: 100%;
    display: block;
}

.form-header[b-70xakh5g08] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25em; /* 20px to 1.25em */
}

.form-group label[b-70xakh5g08] {
    display: block;
    margin-bottom: 0.3125em; /* 5px to 0.3125em */
    font-weight: bold;
}

.form-group input[b-70xakh5g08],
.form-group select[b-70xakh5g08],
.form-group textarea[b-70xakh5g08] {
    width: 100%;
    padding: 0.5em; /* 8px to 0.5em */
    box-sizing: border-box;
}

.form-group .text-danger[b-70xakh5g08] {
    color: #dc3545;
}

.img-thumbnail[b-70xakh5g08] {
    max-width: 6.25em; /* 100px to 6.25em */
    max-height: 6.25em; /* 100px to 6.25em */
    border-radius: 50%;
    margin-top: 0.625em; /* 10px to 0.625em */
    object-fit: cover; /* Ensure aspect ratio remains unaltered */
}

.alert[b-70xakh5g08] {
    margin-top: 1.25em; /* 20px to 1.25em */
}

.form-switch-input[b-70xakh5g08] {
    width: auto;
    margin-top: 0.3125em; /* 5px to 0.3125em */
}

/* Add styles for the custom toggle switch */
.switch[b-70xakh5g08] {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input[b-70xakh5g08] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-70xakh5g08] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider[b-70xakh5g08]:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider[b-70xakh5g08] {
    background-color: #4CAF50;
}

input:checked + .slider[b-70xakh5g08]:before {
    transform: translateX(26px);
}

.slider.round[b-70xakh5g08] {
    border-radius: 34px;
}

.slider.round[b-70xakh5g08]:before {
    border-radius: 50%;
}

/* /Pages/FindCompanion.razor.rz.scp.css */
/* Container for search criteria */
.search-container[b-bybzyan1bn] {
    padding: 1.25em;
    margin-bottom: 1.25em;
    background-color: #f9f9f9;
    border: 0.0625em solid #ddd;
    border-radius: 0.5em;
}

/* Form groups for better spacing */
.form-group[b-bybzyan1bn] {
    margin-bottom: 0.9375em;
}

/* Input styles */
.input-age[b-bybzyan1bn], .input-location[b-bybzyan1bn] {
    width: 100%;
    padding: 0.5em;
    margin-top: 0.3125em;
    border: 0.0625em solid #ccc;
    border-radius: 0.25em;
}

/* No results message styling */
.no-results[b-bybzyan1bn] {
    color: #666;
    font-size: 1em;
    text-align: center;
    margin-top: 1.25em;
}

/* Searching indicator styling */
.searching-indicator[b-bybzyan1bn] {
    color: #007bff;
    font-size: 1.125em;
    text-align: center;
    margin-top: 1.25em;
    font-weight: bold;
}

/* Spinner animation for searching indicator */
@keyframes spinner-b-bybzyan1bn {
    to {
        transform: rotate(360deg);
    }
}

/* Optional: Spinner icon for the searching indicator */
.spinner-icon[b-bybzyan1bn] {
    margin-right: 0.5em;
    display: inline-block;
    width: 1.125em;
    height: 1.125em;
    border: 0.125em solid rgba(0, 0, 0, 0.2);
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spinner-b-bybzyan1bn 0.6s linear infinite;
}

/* Styling the results list to be a block-level element for full-width display */
.results-list[b-bybzyan1bn] {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    padding: 0;
}


/* Send message button positioned under the image */
.send-message-link[b-bybzyan1bn] {
    display: inline-flex;
    margin-bottom: 0.5em;
    margin-right: 1em;
    padding: 0.5em 0.75em;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 0.3125em;
    font-size: 1em;
    transition: background-color 0.3s;
    text-align: center;
    width: auto;
    font-weight: bold;
}

    .send-message-link:hover[b-bybzyan1bn] {
        background-color: #0056b3;
    }

/* Ignore button positioned under the Send Message button */
.ignore-button[b-bybzyan1bn] {
    margin-top: 0.3125em; /* Slightly reduced margin to keep buttons close */
    padding: 0.5em 0.75em;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 0.3125em;
    font-size: 0.875em;
    transition: background-color 0.3s;
    text-align: center;
    width: 100%; /* Make the button full width of the image */
    cursor: pointer;
}

    .ignore-button:hover[b-bybzyan1bn] {
        background-color: #c82333;
    }

/* Ranking and reviews section styles */
.ranking-visual[b-bybzyan1bn] {
    margin-top: 0.625em;
    font-size: 0.875em;
    color: #ffaa00;
}

.reviews-slider[b-bybzyan1bn] {
    margin-top: 0.625em;
    border: 0.0625em solid #ddd;
    border-radius: 0.5em;
    padding: 0.3125em;
    max-width: 100%;
    cursor: pointer;
}

.review-item[b-bybzyan1bn] {
    padding: 0em 0; /* Reduced top and bottom padding for a tighter look */
    margin-bottom: 0em; /* Minimize space below the review item */
}

.review-date[b-bybzyan1bn] {
    font-size: 0.625em;
    color: #888;
    text-align: right;
    margin-bottom: 0em; /* Remove bottom margin to reduce whitespace */
}

/* Adjust hover and transition effects if desired */
.review-item:hover[b-bybzyan1bn] {
    background-color: #f0f0f0;
}


/* Reviews styling - ensure wrapping */
.review-text[b-bybzyan1bn] {
    font-size: 0.75em;
    color: #333;
    margin-bottom: 0em;
    word-wrap: break-word; /* Force word wrap */
    word-break: break-word; /* Handle long words */
    overflow-wrap: break-word; /* Ensure no overflow on small screens */
}

.right-section h4[b-bybzyan1bn], .right-section p[b-bybzyan1bn] {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Overlay to cover the whole screen */
.spinner-overlay[b-bybzyan1bn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Optional: semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Make sure it's on top of other elements */
}

/* Center the spinner and text */
.spinner-container[b-bybzyan1bn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Spinner donut styling */
.spinner-donut[b-bybzyan1bn] {
    width: 3em;
    height: 3em;
    border: 0.3em solid rgba(0, 0, 0, 0.1); /* Light grey background */
    border-top: 0.3em solid #007bff; /* Blue color for the top arc */
    border-radius: 50%;
    animation: spin-b-bybzyan1bn 1s linear infinite;
    margin-bottom: 0.5em; /* Space between spinner and text */
}

/* Keyframes for spinning animation */
@keyframes spin-b-bybzyan1bn {
    to {
        transform: rotate(360deg);
    }
}

/* Searching text styling */
.searching-indicator[b-bybzyan1bn] {
    color: #007bff;
    font-size: 1.5em;
    font-weight: bold;
}



/* Adjust individual result items for mobile screens */
.result-item[b-bybzyan1bn] {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 0.05em solid #ddd;
    border-radius: 0.5em;
    padding: 1em;
    box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.1);
    width: 100%; /* Ensure full width */
}

.photo-scroller-container[b-bybzyan1bn] {
    display: flex;
    overflow-x: auto; /* Enables horizontal scrolling */
    overflow-y: hidden;
    white-space: nowrap; /* Keeps items in a single row */
    margin-bottom: 1em; /* Adds space between the photo scroller and buttons */
}

.photo-scroller[b-bybzyan1bn] {
    display: inline-flex; /* Displays the images in a row */
}

.thumbnail-image[b-bybzyan1bn] {
    margin-right: 0.5em; /* Adds space between the thumbnails */
}

.bottom-buttons[b-bybzyan1bn] {
    display: flex;
    justify-content: space-between; /* Spreads the buttons apart */
    margin-top: 1em; /* Adds some space above the buttons */
}

/* /Pages/Guarantee.razor.rz.scp.css */
.fullWidthInput[b-4r3gnpnqez] {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.3s;
}

    .fullWidthInput:focus[b-4r3gnpnqez] {
        border-color: #4CAF50;
        outline: none;
    }

.centered[b-4r3gnpnqez] {
    text-align: center;
    margin-top: 20px;
}

.guaranteeButton[b-4r3gnpnqez] {
    padding: 12px 24px;
    border: none;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    border-radius: 6px;
    font-size: 16px;
    transition: background-color 0.3s;
    position: relative;
}

    .guaranteeButton:hover[b-4r3gnpnqez] {
        background-color: #45a049;
    }

    .guaranteeButton:disabled[b-4r3gnpnqez] {
        background-color: #ccc;
        cursor: not-allowed;
    }

.success-message[b-4r3gnpnqez],
.error-message[b-4r3gnpnqez] {
    font-size: 18px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}

.loading-spinner[b-4r3gnpnqez] {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007BFF;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin-b-4r3gnpnqez 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin-b-4r3gnpnqez {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.rescindButton[b-4r3gnpnqez] {
    margin-left: auto;
    padding: 10px 12px;
    border: none;
    background-color: #dc3545;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s;
    align-self: center;
}

    .rescindButton:hover[b-4r3gnpnqez] {
        background-color: #c82333;
    }


.loading-indicator[b-4r3gnpnqez] {
    color: #007BFF;
    font-size: 18px;
    text-align: center;
    padding: 10px;
}



.guaranteed-list[b-4r3gnpnqez] {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}

    .guaranteed-list li[b-4r3gnpnqez] {
        display: flex;
        align-items: center; /* Vertically centers items within the list item */
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-bottom: 10px;
        background-color: #e0e0e0;
        transition: box-shadow 0.3s;
        flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    }

        .guaranteed-list li:hover[b-4r3gnpnqez] {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

.guaranteed-item[b-4r3gnpnqez] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    transition: box-shadow 0.3s;
    gap: 20px; /* Adds spacing between elements */
}


.guaranteed-photo[b-4r3gnpnqez] {
    border-radius: 10px;
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.guaranteed-info[b-4r3gnpnqez] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px; /* Adds spacing between text and input elements */
}


.user-name[b-4r3gnpnqez] {
    font-size: 16px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Truncates the name if it's too long */
}

.user-email[b-4r3gnpnqez] {
    font-size: 14px;
    color: #666;
    margin-top: 4px; /* Adds some spacing between name and email */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Truncates the email if it's too long */
}

.rating-slider-container[b-4r3gnpnqez] {
    display: flex;
    align-items: center;
    gap: 10px; /* Adds space between the slider and the label */
}

.review-container[b-4r3gnpnqez] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.button-container[b-4r3gnpnqez] {
    display: flex;
    justify-content: space-between; /* Distributes space between child elements */
    gap: 10px;
    margin-top: 10px;
    align-items: center; /* Aligns buttons with the rest of the content */
}

.direct-camera-button[b-4r3gnpnqez] {
    display: block;
    margin: 2rem auto;
    padding: 0.75rem 1.5rem;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .direct-camera-button:hover[b-4r3gnpnqez] {
        background-color: #218838;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

    .direct-camera-button:active[b-4r3gnpnqez] {
        background-color: #1e7e34;
        transform: translateY(0);
    }

    .direct-camera-button:disabled[b-4r3gnpnqez] {
        background-color: #ccc;
        cursor: not-allowed;
        transform: none;
    }

/* /Pages/Home.razor.rz.scp.css */
.home-layout[b-xv6k8pfh2a] {
    padding: 0.5em;
}

.past-advice-section[b-xv6k8pfh2a] {
    margin-top: 1em;
}

    .past-advice-section button[b-xv6k8pfh2a] {
        background-color: #007bff;
        color: white;
        padding: 0.5em;
        border: none;
        border-radius: 0.3125em;
        cursor: pointer;
        transition: background-color 0.3s;
    }

        .past-advice-section button:hover[b-xv6k8pfh2a] {
            background-color: #0056b3;
        }

    .past-advice-section ul[b-xv6k8pfh2a] {
        list-style-type: none;
        padding: 0;
        margin-top: 1em;
    }

    .past-advice-section li[b-xv6k8pfh2a] {
        margin-bottom: 1em;
        background-color: #f9f9f9;
        padding: 1em;
        border-radius: 0.3125em;
    }

.companionita-icon[b-xv6k8pfh2a] {
    height: 5em;
}

/* /Pages/LandingPage.razor.rz.scp.css */
.fullWidth[b-6bizh5snxp] {
    width: 100%;
    padding: 1em;
}

.fullWidthCentered[b-6bizh5snxp] {
    width: 100%;
    text-align: center;
}


/* Header Section */
.intro[b-6bizh5snxp] {
    font-size: 1.1em;
    padding: 1.5em;
    background-color: #f0f8ff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

    .intro h3[b-6bizh5snxp] {
        font-size: 1.6em;
        font-weight: bold;
        color: #003366;
        text-align: center;
        margin-bottom: 1em;
    }

    .intro ul[b-6bizh5snxp] {
        padding-left: 1em;
    }

    .intro li[b-6bizh5snxp] {
        margin: 0.5em 0;
        list-style-type: '✓ ';
        color: #109ae1;
    }



.block[b-6bizh5snxp] {
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    width: 30em;
    max-width: 90%;
}

.greenButton[b-6bizh5snxp] {
    box-shadow: 0 0.1em 0.2em darkslategray;
    background-color: #00C400; /* Green */
    color: black;
    border: 0;
    text-decoration: none;
    font-weight: bold;
    border-radius: 3em;
    margin: 0.25em;
    padding: 1em 2em;
}

    .greenButton:hover[b-6bizh5snxp] {
        background-color: #11aa11;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

.container[b-6bizh5snxp] {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video[b-6bizh5snxp] {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}


.form-group[b-6bizh5snxp] {
    margin-bottom: 1em;
}

.form-control[b-6bizh5snxp] {
    width: 100%;
    padding: 1em;
    margin-top: 0.5em;
    border: 0.1em solid #ccc;
    border-radius: 0.4em;
}

.text-danger[b-6bizh5snxp] {
    color: red;
}

.text-success[b-6bizh5snxp] {
    color: green;
}

/* App store badges (shown only in a web browser, never in the wrapper apps) */
.storeBadges[b-6bizh5snxp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6em;
    margin: 1em auto 0;
    max-width: 90%;
}

    .storeBadges a[b-6bizh5snxp] {
        display: inline-flex;
        line-height: 0;
    }

    .storeBadges img[b-6bizh5snxp] {
        height: 44px;
        width: auto;
        border-radius: 7px;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .storeBadges a:hover img[b-6bizh5snxp],
        .storeBadges a:focus-visible img[b-6bizh5snxp] {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
        }
/* /Pages/Link.razor.rz.scp.css */
/* --- LINK intro section --- */

.link-intro[b-5pnqjlpduz] {
    text-align: center;
    padding: 16px 20px;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f0fdf4;
}

    .link-intro h2[b-5pnqjlpduz] {
        margin: 0 0 8px 0;
        font-size: 1.3em;
        color: #333;
    }

    .link-intro p[b-5pnqjlpduz] {
        margin: 0;
        color: #555;
        font-size: 0.95em;
        line-height: 1.5;
    }

.centered[b-5pnqjlpduz] {
    text-align: center;
    margin-top: 20px;
}

.fullWidthInput[b-5pnqjlpduz] {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.3s;
}

    .fullWidthInput:focus[b-5pnqjlpduz] {
        border-color: #4CAF50;
        outline: none;
    }

/* --- Success card for incoming QR scan --- */

.link-success-card[b-5pnqjlpduz] {
    text-align: center;
    padding: 24px;
    border: 1px solid #4caf50;
    border-radius: 8px;
    margin: 16px 0;
    background-color: #f0fdf4;
}

    .link-success-card h2[b-5pnqjlpduz] {
        color: #4caf50;
        margin-bottom: 12px;
    }

.link-success-actions[b-5pnqjlpduz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.skip-button[b-5pnqjlpduz] {
    padding: 8px 24px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    color: #666;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    transition: background-color 0.3s;
}

    .skip-button:hover[b-5pnqjlpduz] {
        background-color: #e0e0e0;
    }

/* --- Link methods grid --- */

.link-methods[b-5pnqjlpduz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

@media (max-width: 600px) {
    .link-methods[b-5pnqjlpduz] {
        grid-template-columns: 1fr;
    }
}

.link-method-card[b-5pnqjlpduz] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* --- Status messages --- */

.status-message[b-5pnqjlpduz] {
    font-size: 14px;
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    margin-top: 10px;
}

.success-message[b-5pnqjlpduz] {
    color: #4caf50;
}

.error-message[b-5pnqjlpduz] {
    color: #dc3545;
}

/* --- Linked users list --- */

.linked-users-list[b-5pnqjlpduz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.linked-user-card[b-5pnqjlpduz] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s;
}

    .linked-user-card:hover[b-5pnqjlpduz] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.linked-user-header[b-5pnqjlpduz] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.linked-user-info[b-5pnqjlpduz] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
}

.user-name[b-5pnqjlpduz] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.link-meta[b-5pnqjlpduz] {
    font-size: 13px;
    color: #888;
}

.karma-badge[b-5pnqjlpduz] {
    font-size: 14px;
    font-weight: 700;
    color: #4caf50;
}

/* --- Photo gallery --- */

.photo-gallery[b-5pnqjlpduz] {
    margin-top: 8px;
}

.photo-count[b-5pnqjlpduz] {
    font-size: 13px;
    color: #666;
    display: block;
    margin-bottom: 8px;
}

.photo-grid[b-5pnqjlpduz] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.photo-item[b-5pnqjlpduz] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.link-photo[b-5pnqjlpduz] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.photo-meta[b-5pnqjlpduz] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.visibility-badge[b-5pnqjlpduz] {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

    .visibility-badge.visible[b-5pnqjlpduz] {
        background-color: #e8f5e9;
        color: #2e7d32;
    }

    .visibility-badge.hidden[b-5pnqjlpduz] {
        background-color: #fce4ec;
        color: #c62828;
    }

.delete-photo-btn[b-5pnqjlpduz] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

    .delete-photo-btn:hover[b-5pnqjlpduz] {
        opacity: 1;
    }

.no-photos[b-5pnqjlpduz] {
    font-size: 13px;
    color: #999;
    margin: 8px 0;
}

/* --- Upload section --- */

.upload-photo-section[b-5pnqjlpduz] {
    margin-top: 12px;
}

.upload-button[b-5pnqjlpduz] {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .upload-button:hover[b-5pnqjlpduz] {
        background-color: #218838;
    }

/* --- Pending photos section --- */

.pending-photos-list[b-5pnqjlpduz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.pending-photo-card[b-5pnqjlpduz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid #fff3cd;
    border-radius: 8px;
    padding: 12px 16px;
    background-color: #fffde7;
}

.pending-photo-actions[b-5pnqjlpduz] {
    display: flex;
    gap: 8px;
}

.action-btn[b-5pnqjlpduz] {
    padding: 6px 14px;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

.view-btn[b-5pnqjlpduz] {
    background-color: #e3f2fd;
    color: #1565c0;
}

    .view-btn:hover[b-5pnqjlpduz] {
        background-color: #bbdefb;
    }

.enable-btn[b-5pnqjlpduz] {
    background-color: #e8f5e9;
    color: #2e7d32;
}

    .enable-btn:hover[b-5pnqjlpduz] {
        background-color: #c8e6c9;
    }

.dismiss-btn[b-5pnqjlpduz] {
    background-color: #f5f5f5;
    color: #666;
}

    .dismiss-btn:hover[b-5pnqjlpduz] {
        background-color: #e0e0e0;
    }

/* --- Photo preview overlay --- */

.photo-preview-overlay[b-5pnqjlpduz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.photo-preview-content[b-5pnqjlpduz] {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

    .photo-preview-content img[b-5pnqjlpduz] {
        max-width: 100%;
        max-height: 80vh;
        border-radius: 8px;
    }

.close-preview-btn[b-5pnqjlpduz] {
    position: absolute;
    top: -12px;
    right: -12px;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-preview-btn:hover[b-5pnqjlpduz] {
        background-color: #f5f5f5;
    }
/* /Pages/Messages.razor.rz.scp.css */
.messages-layout[b-95janzzd94] {
    display: flex;
    overflow: hidden; /* Ensure no unnecessary overflow */
    margin: 0; /* Ensure no margin */
    padding: 0; /* Ensure no padding */
    height: 100%;
}

.message-thread[b-95janzzd94] {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    padding: 0; /* Remove padding */
    margin: 0;
    height: 100%;
    width: 100%;
}
    .message-thread h4[b-95janzzd94] {
        display: flex;
        text-align: center;
        padding-top: 0.25em;
        margin-left: 2.5em;
        margin-bottom: 0;
    }

    .message-thread.expanded[b-95janzzd94] {
        margin-left: 0;
    }

.no-conversation-selected[b-95janzzd94] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    text-align: center;
    padding: 2em;
    margin-left: 15em;
}

    .no-conversation-selected h4[b-95janzzd94] {
        margin-bottom: 1em;
        color: #555;
    }

.message-thread.expanded .no-conversation-selected[b-95janzzd94] {
    margin-left: 0;
}


.messages-container[b-95janzzd94] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5em;
    margin: 0; /* Remove margin to avoid unnecessary space */
    background-color: #f9f9f9;
    border-radius: 0.3125em; /* 5px converted */
}

.message-item[b-95janzzd94] {
    margin-bottom: 0.3em; /* 10px converted */
    padding: 0.5em; /* 8px converted */
    border-radius: 0.3125em; /* 5px converted */
}

/* ── Compose bar (send panel) ── */
.new-message[b-95janzzd94] {
    display: flex;
    align-items: flex-end;
    padding: 0.4em 0.5em;
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
    gap: 0.4em;
}

.companionita-btn[b-95janzzd94] {
    flex-shrink: 0;
    width: 2.25em;
    height: 2.25em;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #FFD700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s;
}

    .companionita-btn:hover[b-95janzzd94] {
        background-color: #f0c800;
    }

    .companionita-btn img[b-95janzzd94] {
        width: 1.5em;
        height: 1.5em;
        object-fit: contain;
    }

.compose-bar[b-95janzzd94] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 1.5em;
    padding: 0.25em 0.25em 0.25em 0.75em;
    min-height: 2.5em;
    transition: border-color 0.2s;
}

    .compose-bar:focus-within[b-95janzzd94] {
        border-color: #007bff;
    }

    .compose-bar textarea[b-95janzzd94] {
        flex: 1;
        border: none;
        outline: none;
        resize: none;
        font-family: inherit;
        font-size: 0.95em;
        line-height: 1.4;
        max-height: 8em;
        overflow-y: auto;
        padding: 0.3em 0;
        background: transparent;
        field-sizing: content;
    }

.send-btn[b-95janzzd94] {
    flex-shrink: 0;
    width: 2em;
    height: 2em;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #007bff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

    .send-btn:hover[b-95janzzd94] {
        background-color: #0056b3;
    }

    .send-btn:disabled[b-95janzzd94] {
        cursor: default;
        opacity: 0.7;
    }

.compose-bar.sending textarea[b-95janzzd94] {
    opacity: 0.5;
}

.send-spinner[b-95janzzd94] {
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-95janzzd94 0.6s linear infinite;
}

.loading-indicator[b-95janzzd94] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 100%;
    width: 100%;
}

    .loading-indicator p[b-95janzzd94] {
        font-size: 1.2em;
        color: #333;
        margin-bottom: 1em;
    }

/* Rest of your existing CSS... */

.sidebar[b-95janzzd94] {
    position: absolute;
    height: 100%;
    width: 15em; 
    background-image: linear-gradient(180deg, #1760c2 0%, #007bff 70%);
    color: #fff;
    border-right: 1px solid #ddd;
    padding: 0.5em;
    margin: 0; /* Ensure no margin */
    overflow-y: auto; /* Scrollable sidebar */
    z-index: 98;
    transition: transform 0.5s ease;
}
.sidebar h4[b-95janzzd94] {
    display: flex;
    white-space: nowrap;
    text-align: center;
    padding-top: 0;
    margin-left: 2em;
    margin-bottom: 0.35em;
}

    .sidebar.collapsed[b-95janzzd94] {
        transform: translateX(-100%);
        transition: transform 0.5s ease;
    }

/* Button to toggle ignored conversations */

/* Button to toggle ignored conversations */
.toggle-ignored-button[b-95janzzd94], .toggle-other-user-ignored-button[b-95janzzd94] {
    margin-top: 1em;
    padding: 0.5em;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    width: 100%;
}


.expand-button[b-95janzzd94] {
    position: fixed;
    z-index: 99;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    font-size: 1.25em;
    cursor: pointer;
    padding: 0.25em 0.5em; /* 4px 8px converted */
    border-radius: 0.3125em; /* 5px converted */
    box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

    .expand-button:hover[b-95janzzd94] {
        background-color: rgba(240, 240, 240, 0.9);
    }

.sidebar.collapsed ~ .expand-button[b-95janzzd94] {
    display: block;
}

.user-list[b-95janzzd94] {
    list-style-type: none;
    padding: 0;
    padding-top: 1em;
}

.user-item[b-95janzzd94] {
    cursor: pointer;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    margin-bottom: 0.5em;
    transition: background-color 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .user-item:hover[b-95janzzd94] {
        background-color: #122776;
    }
    .user-item.ignored[b-95janzzd94] {
        background-color: #3498db;
    }
    .user-item.other-ignored[b-95janzzd94] {
        background-color: #3498db;
    }


.btn-primary[b-95janzzd94] {
    padding: 0.5em 1em;
    background-color: #007bff;
    border: none;
    color: white;
    border-radius: 0.3125em; /* 5px converted */
    cursor: pointer;
    transition: background-color 0.3s;
}

    .btn-primary:hover[b-95janzzd94] {
        background-color: #0056b3;
    }

.spinner[b-95janzzd94] {
    border: 0.5em solid #f3f3f3; /* Light grey */
    border-top: 0.5em solid #3498db; /* Blue */
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation: spin-b-95janzzd94 2s linear infinite;
}

@keyframes spin-b-95janzzd94 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.user-photos-container[b-95janzzd94] {
    position: sticky;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    z-index: 95;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    scrollbar-width: thin; /* For Firefox */
}

.photos-scroller[b-95janzzd94] {
    display: flex;
    white-space: nowrap; /* Prevent line breaks and force horizontal scrolling */
    overflow-x: auto;
    padding: 0 1em 0 0;
    scrollbar-width: thin; /* For Firefox to make the scrollbar smaller */
}


.user-photo[b-95janzzd94] {
    width: 5em;
    height: 5em;
    margin-left: 0.3em;
    border-radius: 0.5em;
    object-fit: cover;
    flex-shrink: 0; /* Prevent photos from shrinking */
}

.thumbnail[b-95janzzd94] {
    width: 2.5em; /* Set the size of the thumbnail */
    height: 2.5em; /* Keep it square */
    border-radius: 50%; /* Make the thumbnail circular */
    margin-right: 0.5em; /* Add space between the image and the user name */
    object-fit: cover; /* Ensure the image covers the area without stretching */
    border: 0.125em solid #ddd; /* Optional border around the thumbnail */
    display: inline-block; /* Make sure it aligns with the text */
    vertical-align: middle; /* Vertically center the thumbnail */
    flex-shrink: 0;
}

.heading[b-95janzzd94] {
    display: flex;
    align-items: center;
    justify-content: space-between; /* This will push elements to edges */
    height: 2.5em;
    width: 100%;
    padding-left: 4em;
    flex-shrink: 0;
    overflow: hidden;
}

    .heading h4[b-95janzzd94] {
        white-space: nowrap;
        text-align: center;
        padding-top: 0.25em;
        margin-left: 1em;
        margin-bottom: 0;
        flex-grow: 1; /* Allows the h4 to take up available space */
    }


.message-row[b-95janzzd94] {
    display: flex;
    align-items: flex-end;
    margin-bottom: 0.5em;
    padding: 0 1em;
}

    .message-row.sent[b-95janzzd94] {
        justify-content: flex-end;
    }

    .message-row.received[b-95janzzd94] {
        justify-content: flex-start;
    }

.message-thumbnail[b-95janzzd94] {
    width: 3em; /* Thumbnail size */
    height: 3em;
    object-fit: cover; /* Ensure the image covers the area without stretching */
    border-radius: 50%;
    margin: 0 0.5em;
    flex-shrink: 0;
    z-index: 2;
}


.companionita-logo[b-95janzzd94] {
    width: 3em; /* Adjust size as needed */
    vertical-align: middle; /* Align with text */
    margin-right: 0.5em; /* Space between logo and message */
}
.ignore[b-95janzzd94] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4em;
    padding-right: 0.5em;
    flex-shrink: 0;
    white-space: nowrap;
}

    .ignore[b-95janzzd94]  .btn-action,
    .ignore[b-95janzzd94]  .report-btn {
        font-size: 0.75em;
        padding: 0.3em 0.5em;
        white-space: nowrap;
    }
.information[b-95janzzd94] {
    right: 0;
}



/* Wrapper for message-bubble */
.message-wrapper[b-95janzzd94] {
    position: relative; /* Establishes a new stacking context */
    z-index: 1; /* Ensures the wrapper defines the parent context */
    max-width: 90%;
}

    .message-wrapper[b-95janzzd94]::before {
        content: "";
        position: absolute;
        z-index: 1;
        bottom: 0;
        height: 20px;
        width: 20px;
        background-attachment: fixed;
    }

    .message-wrapper[b-95janzzd94]::after {
        content: "";
        position: absolute;
        z-index: 2;
        bottom: 0;
        width: 10px;
        height: 20px;
        background: #f9f9f9;
    }

.message-row.sent .message-wrapper[b-95janzzd94]::before {
    right: -8px;
    background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
    border-bottom-left-radius: 15px;
}

.message-row.sent .message-wrapper[b-95janzzd94]::after {
    right: -10px;
    border-bottom-left-radius: 15px;
}

.message-row.received .message-wrapper[b-95janzzd94]::before {
    left: -8px;
    background: linear-gradient(to bottom, #FCE27D 0%, #F9C74F 100%); /* Gradient for received message */
    border-bottom-right-radius: 15px;
}

.message-row.received .message-wrapper[b-95janzzd94]::after {
    left: -10px;
    border-bottom-right-radius: 15px;
}

.message-bubble[b-95janzzd94] {
    padding: 0.75em;
    border-radius: 0.5em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    word-wrap: break-word;
    background-color: #f9f9f9;
    z-index: 3;
    right: 0;
}

.message-row.sent .message-bubble[b-95janzzd94] {
    background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
    color: #FFF;
    text-align: right;
}

.message-row.received .message-bubble[b-95janzzd94] {
    background: linear-gradient(to bottom, #FCE27D 0%, #F9C74F 100%); /* Gradient for received message */
    color: #333;
    text-align: left;
}

.message-row.sent .message-bubble .message-date[b-95janzzd94] {
    display: block;
    font-size: 0.75em;
    color: #ccc;
    margin-top: 0.25em;
}

.message-row.received .message-bubble .message-date[b-95janzzd94] {
    display: block;
    font-size: 0.75em;
    color: #666;
    margin-top: 0.25em;
}

.message-row.companionita-message .message-bubble[b-95janzzd94] {
    color: #000;
    background-color: #ffcccc;
    /* border: 1px solid #ffeeba; */
}

.load-error[b-95janzzd94] {
    text-align: center;
    padding: 1em;
    color: #c62828;
}

.load-error p[b-95janzzd94] {
    margin-bottom: 0.5em;
}

.retry-btn[b-95janzzd94] {
    padding: 0.4em 1.2em;
    border: none;
    border-radius: 0.4em;
    background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
    color: #fff;
    cursor: pointer;
    font-size: 0.9em;
}

.send-error[b-95janzzd94] {
    width: 100%;
    text-align: center;
    padding: 0.3em 0.5em;
    font-size: 0.85em;
    color: #c62828;
    background-color: #fce4ec;
    border-radius: 0.3em;
    margin-bottom: 0.3em;
}

/* ── Profile preview slot (inside photos-scroller) ── */
.profile-preview-slot[b-95janzzd94] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.2em;
    height: 5em;
    margin-left: 0.3em;
    padding: 0.2em 0.4em;
    border-radius: 0.5em;
    background: linear-gradient(135deg, #007bff 0%, #00D0EA 100%);
    color: #fff;
    cursor: pointer;
    text-align: center;
    gap: 0.1em;
    user-select: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

    .profile-preview-slot:hover[b-95janzzd94] {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

.profile-preview-age-gender[b-95janzzd94] {
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.2;
}

.profile-preview-city[b-95janzzd94] {
    font-size: 0.65em;
    line-height: 1.2;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 6em;
}

/* ── Profile popup overlay ── */
.profile-popup-overlay[b-95janzzd94] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.profile-popup-card[b-95janzzd94] {
    position: relative;
    background: #fff;
    border-radius: 0.75em;
    max-width: 24em;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5em;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: profile-popup-enter-b-95janzzd94 0.2s ease-out;
}

@keyframes profile-popup-enter-b-95janzzd94 {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.profile-popup-close[b-95janzzd94] {
    position: absolute;
    top: 0.5em;
    right: 0.6em;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #666;
    line-height: 1;
    padding: 0.1em 0.3em;
    border-radius: 50%;
    transition: background-color 0.15s;
}

    .profile-popup-close:hover[b-95janzzd94] {
        background-color: rgba(0, 0, 0, 0.08);
        color: #333;
    }

.profile-popup-header[b-95janzzd94] {
    text-align: center;
    margin-bottom: 1em;
}

.profile-popup-photo[b-95janzzd94] {
    width: 6em;
    height: 6em;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.5em;
    border: 3px solid #007bff;
}

.profile-popup-name-line[b-95janzzd94] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4em;
}

    .profile-popup-name-line h3[b-95janzzd94] {
        margin: 0;
        font-size: 1.2em;
    }

.profile-popup-age-gender[b-95janzzd94] {
    font-size: 0.95em;
    color: #555;
    font-weight: 600;
}

.profile-popup-location[b-95janzzd94] {
    display: block;
    font-size: 0.85em;
    color: #777;
    margin-top: 0.2em;
}

.profile-popup-section[b-95janzzd94] {
    border-top: 1px solid #eee;
    padding-top: 0.75em;
    margin-top: 0.75em;
}

    .profile-popup-section h4[b-95janzzd94] {
        margin: 0 0 0.4em 0;
        font-size: 0.9em;
        color: #333;
        text-align: left;
    }

    .profile-popup-section p[b-95janzzd94] {
        margin: 0;
        font-size: 0.85em;
        color: #444;
        line-height: 1.5;
        word-wrap: break-word;
    }

.profile-popup-review[b-95janzzd94] {
    padding: 0.4em 0;
    border-bottom: 1px solid #f0f0f0;
}

    .profile-popup-review:last-child[b-95janzzd94] {
        border-bottom: none;
    }

    .profile-popup-review p[b-95janzzd94] {
        margin: 0 0 0.2em 0;
    }

.profile-popup-review-date[b-95janzzd94] {
    font-size: 0.75em;
    color: #999;
}
/* /Pages/PrivacyPolicy.razor.rz.scp.css */
.privacy-policy-container[b-91tbi2in70] {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

    .privacy-policy-container h1[b-91tbi2in70],
    .privacy-policy-container h2[b-91tbi2in70],
    .privacy-policy-container h3[b-91tbi2in70] {
        color: #2E4053;
    }

    .privacy-policy-container ul[b-91tbi2in70] {
        list-style-type: none;
        padding: 0;
    }

        .privacy-policy-container ul li[b-91tbi2in70]::before {
            content: "•";
            color: #2E4053;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }

    .privacy-policy-container a[b-91tbi2in70] {
        color: #1A5276;
        text-decoration: none;
    }

        .privacy-policy-container a:hover[b-91tbi2in70] {
            text-decoration: underline;
        }

/* /Pages/Settings.razor.rz.scp.css */
.settings-container[b-wqodgadr1p] {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header[b-wqodgadr1p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.header h4[b-wqodgadr1p] {
    font-size: 1.5rem;
    color: #333;
    margin: 0;
}

.compact-info[b-wqodgadr1p] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.info-item[b-wqodgadr1p] {
    font-weight: bold;
    font-size: 1rem;
    color: #555;
}

.admin-section[b-wqodgadr1p] {
    margin-top: 16px;
    margin-bottom: 16px;
}

.admin-panel-link[b-wqodgadr1p] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #dde1e6;
    border-left: 4px solid #1a73e8;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.admin-panel-link:hover[b-wqodgadr1p] {
    background: #f4f7fb;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.15);
    color: #333;
    text-decoration: none;
}

.admin-panel-link-badge[b-wqodgadr1p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background: #1a73e8;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
}

.admin-panel-link-text[b-wqodgadr1p] {
    display: flex;
    flex-direction: column;
    flex: 1;
    line-height: 1.3;
}

.admin-panel-link-text strong[b-wqodgadr1p] {
    font-size: 1rem;
    color: #1a1a1a;
}

.admin-panel-link-text span[b-wqodgadr1p] {
    font-size: 0.82rem;
    color: #5f6368;
}

.admin-panel-link-arrow[b-wqodgadr1p] {
    font-size: 1.5rem;
    color: #9aa0a6;
    flex-shrink: 0;
}

.editable-fields[b-wqodgadr1p] {
    margin-top: 30px;
}

.editable-fields .form-control[b-wqodgadr1p] {
    margin-bottom: 15px;
}

.field-group[b-wqodgadr1p] {
    margin-top: 10px;
}

.button-container[b-wqodgadr1p] {
    margin-top: 30px; /* More whitespace before Save Changes button */
    display: flex;
    justify-content: flex-end;
}

.image-gallery[b-wqodgadr1p], .review-gallery[b-wqodgadr1p] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.image-item[b-wqodgadr1p], .review-item[b-wqodgadr1p] {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-image[b-wqodgadr1p] {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
}

.actions[b-wqodgadr1p] {
    margin-top: 20px;
    text-align: center;
}

.contact-link[b-wqodgadr1p] {
    font-size: 1.1rem;
}

.policy-text[b-wqodgadr1p] {
    margin-top: 15px;
    text-align: center;
}

.city-select-container[b-wqodgadr1p] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

/* Profile Visibility Section */
.profile-visibility-section[b-wqodgadr1p] {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
}

.profile-visibility-section h4[b-wqodgadr1p] {
    margin-top: 0;
    margin-bottom: 4px;
    color: #333;
}

.visibility-description[b-wqodgadr1p] {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.visibility-toggle-row[b-wqodgadr1p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.visibility-label[b-wqodgadr1p] {
    font-weight: 600;
    font-size: 1rem;
    color: #333;
}

/* Toggle Switch */
.toggle-switch[b-wqodgadr1p] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch input[b-wqodgadr1p] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-wqodgadr1p] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 28px;
    transition: background-color 0.3s;
}

.toggle-slider[b-wqodgadr1p]::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-switch input:checked + .toggle-slider[b-wqodgadr1p] {
    background-color: #1b6ec2;
}

.toggle-switch input:checked + .toggle-slider[b-wqodgadr1p]::before {
    transform: translateX(24px);
}

.visibility-feedback[b-wqodgadr1p] {
    margin-top: 10px;
    font-size: 0.9rem;
}

/* Delete Account Zone */
.delete-account-row[b-wqodgadr1p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    margin-top: 16px;
    border-top: 1px solid #eee;
}

.delete-account-label[b-wqodgadr1p] {
    font-weight: 600;
    font-size: 1rem;
    color: #333;
}

.btn-delete-account[b-wqodgadr1p] {
    background-color: #dc3545;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.15s;
}

.btn-delete-account:hover[b-wqodgadr1p] {
    background-color: #b02a37;
}

/* Delete Account Modal Overlay */
.delete-modal-overlay[b-wqodgadr1p] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.delete-modal[b-wqodgadr1p] {
    background: #fff;
    border-radius: 10px;
    padding: 28px 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    max-height: 90vh;
    overflow-y: auto;
}

.delete-modal-title[b-wqodgadr1p] {
    margin: 0 0 16px;
    color: #dc3545;
    font-size: 1.3rem;
}

.delete-modal-warning-heading[b-wqodgadr1p] {
    font-weight: 600;
    margin-bottom: 8px;
}

.delete-modal-loss-list[b-wqodgadr1p] {
    margin: 0 0 16px 20px;
    color: #555;
    line-height: 1.7;
}

.delete-modal-warning-subtext[b-wqodgadr1p] {
    font-weight: 600;
    color: #dc3545;
    margin-bottom: 20px;
}

.delete-modal-email-hint[b-wqodgadr1p] {
    font-weight: 600;
    color: #333;
    background: #f0f0f0;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: monospace;
    margin-bottom: 10px;
    word-break: break-all;
}

.delete-confirm-input[b-wqodgadr1p] {
    margin-bottom: 16px;
}

.delete-modal-actions[b-wqodgadr1p] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.btn-hide-instead[b-wqodgadr1p] {
    background-color: #1b6ec2;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-hide-instead:hover[b-wqodgadr1p] {
    background-color: #155a9c;
}

.btn-delete-continue[b-wqodgadr1p] {
    background: none;
    border: 1px solid #dc3545;
    color: #dc3545;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-delete-continue:hover[b-wqodgadr1p] {
    background-color: #dc3545;
    color: #fff;
}

/* Gray Cancel Button */
.grayButton[b-wqodgadr1p] {
    background-color: #6c757d;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.15s;
}

.grayButton:hover[b-wqodgadr1p] {
    background-color: #5a6268;
}

/* Upload Button */
#photoUpload[b-wqodgadr1p] {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
}

#photoUpload:disabled[b-wqodgadr1p] {
    opacity: 0.6;
    cursor: not-allowed;
}

#photoUpload[b-wqodgadr1p]::file-selector-button {
    background-color: #1b6ec2;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    margin-right: 10px;
    transition: background-color 0.15s;
}

#photoUpload[b-wqodgadr1p]::file-selector-button:hover {
    background-color: #155a9c;
}

#photoUpload:disabled[b-wqodgadr1p]::file-selector-button {
    background-color: #999;
    cursor: not-allowed;
}
/* /Pages/Terms.razor.rz.scp.css */
.blueButton[b-xjcz8f9ih9] {
    background-color: #122776;
    color: #fff;
    border: 0;
    font-weight: bold;
    border-radius: 2em;
    padding: 0.75em 2em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 1em;
}

.blueButton:hover:not(:disabled)[b-xjcz8f9ih9] {
    background-color: #0d1a56;
}

.blueButton:disabled[b-xjcz8f9ih9] {
    background-color: #ccc;
    cursor: not-allowed;
}