/* =========================
   ZOOJ - Main Design
   Plum / Burgundy Purple Theme

   Primary:       #6D3F67
   Primary hover: #593454
   Soft accent:   #8B5E86
   Deep burgundy: #5A194F
   Pink accent:   #EC4899
   ========================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background: #FAF7FC;
    color: #18131F;
    min-height: 100vh;
}


/* =========================
   Navbar
   ========================= */

.navbar {
    width: 100%;
    padding: 20px 40px;

    background: #FFFFFF;
    border-bottom: 1px solid #E9E1F0;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #6D3F67;
}

.nav-links {
    display: flex;
    gap: 25px;
}

.nav-links a {
    color: #4B4452;
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s;
}

.nav-links a:hover {
    color: #6D3F67;
}


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

.dashboard {
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 25px;
}

.welcome {
    margin-bottom: 40px;
}

.welcome h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

.welcome h1 span {
    color: #6D3F67;
}

.welcome p {
    color: #756D7D;
    font-size: 17px;
}


/* =========================
   Dashboard Cards
   ========================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.dashboard-card {
    background: #FFFFFF;

    border: 1px solid #E9E1F0;
    border-radius: 18px;

    padding: 30px;

    min-height: 180px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-decoration: none;
    color: #18131F;

    transition: 0.3s;

    box-shadow: 0 5px 20px rgba(59, 23, 100, 0.05);
}

.dashboard-card:hover {
    transform: translateY(-5px);

    border-color: #8B5E86;

    box-shadow: 0 12px 30px rgba(109, 63, 103, 0.15);
}

.dashboard-card .icon {
    font-size: 35px;
    margin-bottom: 15px;
}

.dashboard-card h2 {
    font-size: 21px;
    margin: 0 0 8px 0;
}

.dashboard-card p {
    color: #756D7D;
    line-height: 1.5;
    margin: 0;
}

/* =========================
   Notification Badge
   ========================= */

.notification-badge {
    display: inline-block;

    background: #EC4899;
    color: #FFFFFF;

    font-size: 12px;
    font-weight: bold;

    padding: 3px 8px;
    border-radius: 20px;

    margin-left: -3px;
}


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

.btn {
    display: inline-block;

    padding: 13px 25px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: bold;

    border: none;

    cursor: pointer;

    transition: 0.3s;
}

.btn-primary {
    background: #6D3F67;
    color: #FFFFFF;
}

.btn-primary:hover {
    background: #8B5E86;
    transform: translateY(-2px);
}

.btn-pink {
    background: #EC4899;
    color: #FFFFFF;
}

.btn-pink:hover {
    opacity: 0.9;
}


/* =========================
   Logout
   ========================= */

.logout {
    margin-top: 40px;
}

.logout a {
    color: #756D7D;
    text-decoration: none;
}

.logout a:hover {
    color: #EC4899;
}


/* =========================
   Discover
   ========================= */

.discover-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 45px 25px 100px;
}

.discover-header {
    text-align: center;
    margin-bottom: 40px;
}

.discover-header h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.discover-header p {
    color: #756D7D;
}


/* =========================
   Profile Grid
   ========================= */

.profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* =========================
   Profile Card
   ========================= */

.profile-card {
    background: #FFFFFF;

    border: 1px solid #E9E1F0;
    border-radius: 22px;

    overflow: hidden;

    transition: 0.3s;

    box-shadow: 0 5px 20px rgba(59, 23, 100, 0.06);
}

.profile-card:hover {
    transform: translateY(-6px);

    border-color: #8B5E86;

    box-shadow: 0 15px 35px rgba(109, 63, 103, 0.15);
}


/* =========================
   Profile Photo
   ========================= */

.profile-photo {
    width: 100%;
    height: 320px;

    object-fit: cover;

    display: block;
}

.profile-placeholder {
    width: 100%;
    height: 320px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #F0E8F8;

    font-size: 70px;
}


/* =========================
   Profile Information
   ========================= */

.profile-info {
    padding: 22px;
}

.profile-info h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

.profile-meta {
    color: #756D7D;

    font-size: 14px;

    margin-bottom: 15px;
}

.profile-bio {
    color: #514A58;

    line-height: 1.5;

    margin-bottom: 20px;
}


/* =========================
   View Profile
   ========================= */

.view-profile {
    display: block;

    text-align: center;

    padding: 12px;

    border: 1px solid #6D3F67;

    border-radius: 10px;

    color: #6D3F67;

    text-decoration: none;

    margin-bottom: 15px;

    transition: 0.3s;
}

.view-profile:hover {
    background: #6D3F67;
    color: #FFFFFF;
}


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

.profile-actions {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
}

.action-btn {
    padding: 12px 8px;

    border-radius: 10px;

    text-align: center;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}


/* Like */

.like-btn {
    background: #EC4899;
    color: #FFFFFF;
}

.like-btn:hover {
    transform: scale(1.03);
}


/* Pass */

.pass-btn {
    background: #F0EDF2;
    color: #4B4452;
}

.pass-btn:hover {
    background: #E5E0E8;
}


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

.profile-secondary-actions {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 20px;

    margin-top: 15px;
}

.secondary-actions a {
    color: #8A818F;

    text-decoration: none;

    font-size: 13px;
}

.secondary-actions a {
    color: #8A818F;

    text-decoration: none;

    font-size: 13px;
}

.secondary-actions a:hover {
    color: #6D3F67;
}


/* =========================
   No Users
   ========================= */

.no-users {
    text-align: center;

    padding: 80px 20px;
}

.no-users h2 {
    margin-bottom: 10px;
}

.no-users p {
    color: #756D7D;
}


/* =========================
   Mobile Navigation
   ========================= */

.mobile-nav {
    display: none;
}


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

@media (max-width: 900px) {

    .profile-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .navbar {
        padding: 18px 20px;
    }

    .nav-links {
        display: none;
    }

    .dashboard {
        padding: 30px 18px 100px;
    }

    .welcome h1 {
        font-size: 32px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card {
        padding: 25px;
    }

    .mobile-nav {
        display: flex;

        position: fixed;

        bottom: 0;
        left: 0;

        width: 100%;

        background: #FFFFFF;

        border-top: 1px solid #E9E1F0;

        justify-content: space-around;

        padding: 12px 5px;

        z-index: 100;

        box-shadow: 0 -5px 20px rgba(59, 23, 100, 0.08);
    }

    .mobile-nav a {
        color: #756D7D;

        text-decoration: none;

        font-size: 12px;

        text-align: center;
    }

    .mobile-nav a:hover {
        color: #6D3F67;
    }

    .mobile-nav .nav-icon {
        display: block;

        font-size: 21px;

        margin-bottom: 3px;
    }

}


@media (max-width: 600px) {

    .discover-page {
        padding: 30px 15px 100px;
    }

    .discover-header h1 {
        font-size: 32px;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-photo,
    .profile-placeholder {
        height: 360px;
    }

}

/* =========================
   ZOOJ - Discover Page
   ========================= */

.discover-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 45px 25px 100px;
}

.discover-header {
    text-align: center;
    margin-bottom: 40px;
}

.discover-header h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.discover-header p {
    color: #756D7D;
}


/* Profile Grid */

.profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* Profile Card */

.profile-card {
    background: #FFFFFF;
    border: 1px solid #E9E1F0;
    border-radius: 22px;
    overflow: hidden;

    transition: 0.3s;

    box-shadow: 0 5px 20px rgba(59, 23, 100, 0.06);
}

.profile-card:hover {
    transform: translateY(-6px);
    border-color: #8B5E86;
    box-shadow: 0 15px 35px rgba(109, 63, 103, 0.15);
}


/* Profile Photo */

.profile-photo {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}


/* No Photo */

.profile-placeholder {
    width: 100%;
    height: 320px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #F0E8F8;

    font-size: 70px;
}


/* Profile Information */

.profile-info {
    padding: 22px;
}

.profile-info h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

.profile-meta {
    color: #756D7D;
    font-size: 14px;
    margin-bottom: 15px;
}

.profile-bio {
    color: #514A58;
    line-height: 1.5;
    margin-bottom: 20px;
}


/* View Profile */

.view-profile{
    display: block;

    text-align: center;

    padding: 12px;

    border: 1px solid #6D3F67;
    border-radius: 10px;

    color: #6D3F67;

    text-decoration: none;

    margin-bottom: 15px;

    transition: 0.3s;
}

.view-profile:hover {
    background: #6D3F67;
    color: #FFFFFF;
}


/* Like / Pass */

.profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.action-btn {
    padding: 12px 8px;

    border-radius: 10px;

    text-align: center;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}


/* Like */

.like-btn {
    background: #EC4899;
    color: #FFFFFF;
}

.like-btn:hover {
    transform: scale(1.03);
}


/* Pass */

.pass-btn {
    background: #F0EDF2;
    color: #4B4452;
}

.pass-btn:hover {
    background: #E5E0E8;
}


/* Block / Report */

.secondary-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.secondary-actions a {
    color: #8A818F;
    text-decoration: none;
    font-size: 13px;
}

.secondary-actions a:hover {
    color: #6D3F67;
}


/* No Users */

.no-users {
    text-align: center;
    padding: 80px 20px;
}

.no-users h2 {
    margin-bottom: 10px;
}

.no-users p {
    color: #756D7D;
}


/* =========================
   Discover - Mobile
   ========================= */

@media (max-width: 900px) {

    .profile-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .discover-page {
        padding: 30px 15px 100px;
    }

    .discover-header h1 {
        font-size: 32px;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-photo,
    .profile-placeholder {
        height: 360px;
    }

}

/* =========================
   ZOOJ - User Profile
   ========================= */

.user-profile-page {
    max-width: 950px;
    margin: 0 auto;
    padding: 50px 25px 100px;
}

.user-profile-card {
    background: #FFFFFF;

    border: 1px solid #E9E1F0;
    border-radius: 25px;

    overflow: hidden;

    display: grid;
    grid-template-columns: 45% 55%;

    box-shadow: 0 10px 40px rgba(59, 23, 100, 0.08);
}


/* Photo */

.user-profile-photo {
    min-height: 600px;
}

.user-profile-photo img {
    width: 100%;
    height: 100%;

    min-height: 600px;

    object-fit: cover;

    display: block;
}


/* Information */

.user-profile-info {
    padding: 45px;
}

.user-profile-info h1 {
    font-size: 38px;
    margin-bottom: 10px;
}

.user-profile-meta {
    color: #756D7D;
    margin-bottom: 35px;
}

.user-profile-bio {
    margin-bottom: 35px;
}

.user-profile-bio h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.user-profile-bio p {
    color: #514A58;
    line-height: 1.7;
}


/* Actions */

.user-profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    margin-bottom: 20px;
}

.profile-main-btn {
    padding: 15px;

    border-radius: 12px;

    text-align: center;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}

.profile-main-btn:hover {
    transform: translateY(-2px);
}


/* Like */

.profile-main-btn.like-btn {
    background: #EC4899;
    color: #FFFFFF;
}


/* Block */

.profile-main-btn.block-btn {
    background: #F0EDF2;
    color: #4B4452;
}

.profile-main-btn.block-btn:hover {
    background: #E5E0E8;
}


/* Report */

.report-link {
    display: block;

    color: #8A818F;

    text-decoration: none;

    text-align: center;

    font-size: 14px;

    margin-bottom: 25px;
}

.report-link:hover {
    color: #EC4899;
}


/* Back */

.back-link {
    display: block;

    color: #6D3F67;

    text-decoration: none;

    text-align: center;

    font-weight: bold;
}


/* Mobile */

@media (max-width: 700px) {

    .user-profile-page {
        padding: 25px 15px 100px;
    }

    .user-profile-card {
        grid-template-columns: 1fr;
    }

    .user-profile-photo {
        min-height: 420px;
    }

    .user-profile-photo img {
        min-height: 420px;
        max-height: 500px;
    }

    .user-profile-info {
        padding: 30px 25px;
    }

    .user-profile-info h1 {
        font-size: 30px;
    }

}

/* =========================
   ZOOJ - Matches
   ========================= */

.matches-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 45px 25px 100px;
}

.matches-header {
    text-align: center;
    margin-bottom: 40px;
}

.matches-header h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.matches-header p {
    color: #756D7D;
}


/* Matches Grid */

.matches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* Match Card */

.match-card {
    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: 0 5px 20px rgba(59, 23, 100, 0.06);

    transition: 0.3s;
}

.match-card:hover {
    transform: translateY(-6px);

    border-color: #8B5E86;

    box-shadow: 0 15px 35px rgba(109, 63, 103, 0.15);
}


/* Match Photo */

.match-photo {
    width: 100%;
    height: 300px;

    object-fit: cover;

    display: block;
}

.match-placeholder {
    width: 100%;
    height: 300px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #F0E8F8;

    font-size: 70px;
}


/* Match Info */

.match-info {
    padding: 22px;
}

.match-info h2 {
    font-size: 24px;

    margin-bottom: 8px;
}

.match-meta {
    color: #756D7D;

    font-size: 14px;

    margin-bottom: 20px;
}


/* Match Actions */

.match-actions {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
}

.match-profile-btn,
.match-chat-btn {
    padding: 12px 8px;

    border-radius: 10px;

    text-align: center;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}


/* Profile */

.match-profile-btn {
    border: 1px solid #6D3F67;

    color: #6D3F67;
}

.match-profile-btn:hover {
    background: #6D3F67;

    color: #FFFFFF;
}


/* Chat */

.match-chat-btn {
    background: #EC4899;

    color: #FFFFFF;
}

.match-chat-btn:hover {
    transform: translateY(-2px);
}


/* No Matches */

.no-matches {
    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 22px;

    text-align: center;

    padding: 80px 25px;

    box-shadow: 0 5px 20px rgba(59, 23, 100, 0.05);
}

.no-matches-icon {
    font-size: 55px;

    margin-bottom: 20px;
}

.no-matches h2 {
    font-size: 28px;

    margin-bottom: 10px;
}

.no-matches p {
    color: #756D7D;

    margin-bottom: 25px;
}

.discover-btn {
    display: inline-block;

    background: #6D3F67;

    color: #FFFFFF;

    padding: 13px 25px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}

.discover-btn:hover {
    background: #8B5E86;

    transform: translateY(-2px);
}


/* Mobile */

@media (max-width: 900px) {

    .matches-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .matches-page {
        padding: 30px 15px 100px;
    }

    .matches-header h1 {
        font-size: 32px;
    }

    .matches-grid {
        grid-template-columns: 1fr;
    }

    .match-photo,
    .match-placeholder {
        height: 360px;
    }

}

/* =========================
   ZOOJ - Chat
   ========================= */

.chat-page {
    max-width: 850px;
    margin: 0 auto;
    padding: 40px 20px 100px;
}


/* Chat Card */

.chat-card {
    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: 0 10px 35px rgba(59, 23, 100, 0.08);

    height: 75vh;

    min-height: 550px;

    display: flex;
    flex-direction: column;
}


/* Chat Header */

.chat-header {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 20px 25px;

    border-bottom: 1px solid #E9E1F0;

    background: #FFFFFF;
}

.chat-header h1 {
    font-size: 22px;

    margin-bottom: 5px;
}

.chat-header a {
    color: #6D3F67;

    text-decoration: none;

    font-size: 13px;
}

.chat-header a:hover {
    color: #EC4899;
}


/* Avatar */

.chat-avatar,
.chat-avatar-placeholder {
    width: 55px;
    height: 55px;

    min-width: 55px;
    min-height: 55px;

    border-radius: 50%;

    flex-shrink: 0;

    box-sizing: border-box;
}

.chat-avatar {
    object-fit: cover;
    display: block;
}

.chat-avatar-placeholder {
    background: #F0E8F8;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 25px;

    line-height: 1;
}


/* Messages */

.messages-container {
    flex: 1;

    overflow-y: auto;

    padding: 25px;

    background: #FAF7FC;
}


/* Message Row */

.message-row {
    display: flex;

    margin-bottom: 14px;
}

.my-message {
    justify-content: flex-end;
}

.their-message {
    justify-content: flex-start;
}


/* Message Bubble */

.message-bubble {
    max-width: 70%;

    padding: 12px 16px;

    border-radius: 18px;

    line-height: 1.5;

    word-wrap: break-word;
}


/* My Message */

.my-message .message-bubble {
    background: #6D3F67;

    color: #FFFFFF;

    border-bottom-right-radius: 5px;
}


/* Their Message */

.their-message .message-bubble {
    background: #FFFFFF;

    color: #18131F;

    border: 1px solid #E9E1F0;

    border-bottom-left-radius: 5px;
}


/* Empty Chat */

.empty-chat {
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #756D7D;

    text-align: center;
}

.empty-chat div {
    font-size: 50px;

    margin-bottom: 15px;
}


/* Message Form */

.message-form {
    display: flex;

    gap: 10px;

    padding: 18px 20px;

    background: #FFFFFF;

    border-top: 1px solid #E9E1F0;
}

.message-form input {
    flex: 1;

    border: 1px solid #DDD5E4;

    border-radius: 12px;

    padding: 13px 16px;

    font-size: 15px;

    outline: none;
}

.message-form input:focus {
    border-color: #6D3F67;

    box-shadow: 0 0 0 3px rgba(109, 63, 103, 0.08);
}

.message-form button {
    border: none;

    border-radius: 12px;

    padding: 13px 22px;

    background: #EC4899;

    color: #FFFFFF;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;
}

.message-form button:hover {
    transform: translateY(-2px);
}


/* Back */

.back-to-matches {
    display: block;

    text-align: center;

    margin-top: 20px;

    color: #6D3F67;

    text-decoration: none;

    font-weight: bold;
}


/* Mobile */

@media (max-width: 600px) {

    .chat-page {
        padding: 20px 10px 90px;
    }

    .chat-card {
        height: calc(100vh - 150px);

        min-height: 500px;

        border-radius: 16px;
    }

    .chat-header {
        padding: 15px;
    }

    .messages-container {
        padding: 15px;
    }

    .message-bubble {
        max-width: 82%;
    }

    .message-form {
        padding: 12px;
    }

    .message-form input {
        min-width: 0;
    }

    .message-form button {
        padding: 13px 16px;
    }

}

/* =========================
   ZOOJ - Notifications
   ========================= */

.notifications-page {
    max-width: 850px;
    margin: 0 auto;
    padding: 45px 20px 100px;
}

.notifications-header {
    text-align: center;
    margin-bottom: 35px;
}

.notifications-header h1 {
    font-size: 38px;
    margin-bottom: 10px;
}

.notifications-header p {
    color: #756D7D;
}


/* Notifications List */

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* Notification Card */

.notification-card {
    display: flex;

    align-items: center;

    gap: 18px;

    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 18px;

    padding: 20px;

    box-shadow: 0 5px 20px rgba(59, 23, 100, 0.05);

    transition: 0.3s;
}

.notification-card:hover {
    transform: translateY(-2px);

    border-color: #A77AA2;

    box-shadow: 0 10px 25px rgba(109, 63, 103, 0.10);
}


/* Notification Icon */

.notification-icon {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #F5ECFA;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 25px;
}


/* Content */

.notification-content {
    flex: 1;
}

.notification-content p {
    margin-bottom: 10px;

    color: #302936;

    line-height: 1.5;
}

.notification-content strong {
    color: #5A194F;
}

.notification-content small {
    display: block;

    margin-top: 10px;

    color: #9A919F;

    font-size: 12px;
}


/* Actions */

.notification-actions {
    display: flex;

    gap: 10px;
}


/* Buttons */

.notification-btn,
.notification-chat-btn {
    display: inline-block;

    padding: 9px 15px;

    border-radius: 9px;

    text-decoration: none;

    font-size: 13px;

    font-weight: bold;

    transition: 0.3s;
}

.notification-btn {
    border: 1px solid #6D3F67;

    color: #6D3F67;
}

.notification-btn:hover {
    background: #6D3F67;

    color: #FFFFFF;
}

.notification-chat-btn {
    background: #EC4899;

    color: #FFFFFF;
}

.notification-chat-btn:hover {
    transform: translateY(-2px);
}


/* Empty Notifications */

.no-notifications {
    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 22px;

    padding: 70px 25px;

    text-align: center;

    box-shadow: 0 5px 20px rgba(59, 23, 100, 0.05);
}

.no-notifications-icon {
    font-size: 55px;

    margin-bottom: 20px;
}

.no-notifications h2 {
    font-size: 27px;

    margin-bottom: 10px;
}

.no-notifications p {
    max-width: 450px;

    margin: 0 auto 25px;

    color: #756D7D;

    line-height: 1.6;
}


/* Mobile */

@media (max-width: 600px) {

    .notifications-page {
        padding: 30px 15px 100px;
    }

    .notifications-header h1 {
        font-size: 31px;
    }

    .notification-card {
        align-items: flex-start;

        padding: 16px;
    }

    .notification-icon {
        width: 45px;
        height: 45px;

        font-size: 20px;
    }

    .notification-actions {
        flex-direction: column;

        align-items: flex-start;
    }

    .notification-btn,
    .notification-chat-btn {
        text-align: center;

        width: 100%;
    }

}

/* =========================
   ZOOJ - My Profile
   ========================= */

.profile-page {
    max-width: 700px;

    margin: 0 auto;

    padding: 45px 20px 100px;
}


.profile-card {
    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 25px;

    padding: 40px;

    text-align: center;

    box-shadow: 0 10px 35px rgba(59, 23, 100, 0.08);
}


/* Profile Photo */

.profile-photo-container {
    margin-bottom: 20px;
}

.profile-photo,
.profile-placeholder {
    width: 180px;
    height: 180px;

    margin: 0 auto;

    border-radius: 50%;

    box-sizing: border-box;
}

.profile-photo {
    object-fit: cover;

    border: 5px solid #F0E8F8;

    box-shadow: 0 8px 25px rgba(59, 23, 100, 0.12);

    display: block;
}

.profile-placeholder {
    background: #F0E8F8;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 70px;

    line-height: 1;

    border: 5px solid #F0E8F8;

    box-shadow: 0 8px 25px rgba(59, 23, 100, 0.12);
}

/* Name */

.profile-card h1 {
    font-size: 34px;

    margin-bottom: 5px;
}

.profile-subtitle {
    color: #756D7D;

    margin-bottom: 30px;
}


/* Details */

.profile-details {
    text-align: left;

    border-top: 1px solid #E9E1F0;

    border-bottom: 1px solid #E9E1F0;

    padding: 10px 0;
}


.profile-detail {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 17px 5px;

    border-bottom: 1px solid #F0EBF3;
}

.profile-detail:last-child {
    border-bottom: none;
}


.detail-label {
    font-weight: bold;

    color: #5A194F;
}

.detail-value {
    color: #4A4350;

    text-align: right;

    word-break: break-word;
}


/* Bio */

.profile-bio {
    padding: 20px 5px 15px;

    text-align: left;
}

.profile-bio p {
    color: #4A4350;

    line-height: 1.7;

    margin-top: 10px;
}


/* Actions */

.profile-actions {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 30px;
}


.profile-primary-btn,
.profile-secondary-btn {
    padding: 13px;

    border-radius: 11px;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}


.profile-primary-btn {
    background: #6D3F67;

    color: #FFFFFF;
}

.profile-primary-btn:hover {
    background: #593454;

    transform: translateY(-2px);
}


.profile-secondary-btn {
    border: 1px solid #EC4899;

    color: #EC4899;
}

.profile-secondary-btn:hover {
    background: #EC4899;

    color: #FFFFFF;
}


/* Back */

.back-to-dashboard {
    display: block;

    text-align: center;

    margin-top: 22px;

    color: #6D3F67;

    text-decoration: none;

    font-weight: bold;
}


/* Mobile */

@media (max-width: 600px) {

    .profile-page {
        padding: 25px 15px 90px;
    }

    .profile-card {
        padding: 30px 20px;

        border-radius: 20px;
    }

    .profile-photo,
    .profile-photo-placeholder {
        width: 145px;
        height: 145px;
    }

    .profile-photo-placeholder {
        font-size: 55px;
    }

    .profile-card h1 {
        font-size: 28px;
    }

    .profile-detail {
        flex-direction: column;

        gap: 5px;
    }

    .detail-value {
        text-align: left;
    }

    .profile-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================
   ZOOJ - Settings
   ========================= */

.settings-page {
    max-width: 800px;

    margin: 0 auto;

    padding: 45px 20px 100px;
}


/* Header */

.settings-header {
    text-align: center;

    margin-bottom: 35px;
}

.settings-header h1 {
    font-size: 38px;

    margin-bottom: 10px;
}

.settings-header p {
    color: #756D7D;
}


/* Card */

.settings-card {
    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(59, 23, 100, 0.07);
}


/* Setting Item */

.settings-section {
    display: flex;

    align-items: center;

    gap: 18px;

    padding: 23px;

    border-bottom: 1px solid #EEE8F2;

    transition: 0.3s;
}

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

.settings-section:hover {
    background: #FCFAFD;
}


/* Icon */

.settings-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    border-radius: 14px;

    background: #F3EAF8;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 24px;
}


/* Info */

.settings-info {
    flex: 1;
}

.settings-info h2 {
    font-size: 18px;

    margin-bottom: 5px;
}

.settings-info p {
    color: #756D7D;

    font-size: 13px;

    line-height: 1.5;
}


/* Normal Button */

.settings-btn {
    display: inline-block;

    padding: 10px 17px;

    border-radius: 9px;

    border: 1px solid #6D3F67;

    color: #6D3F67;

    text-decoration: none;

    font-size: 13px;

    font-weight: bold;

    transition: 0.3s;
}

.settings-btn:hover {
    background: #6D3F67;

    color: #FFFFFF;
}


/* Delete */

.delete-section {
    background: #FFF9FA;
}

.delete-section:hover {
    background: #FFF5F7;
}

.delete-icon {
    background: #FBE7EC;
}

.delete-btn {
    display: inline-block;

    padding: 10px 17px;

    border-radius: 9px;

    background: #B4235A;

    color: #FFFFFF;

    text-decoration: none;

    font-size: 13px;

    font-weight: bold;

    transition: 0.3s;
}

.delete-btn:hover {
    background: #8F1745;

    transform: translateY(-2px);
}


/* Back */

.back-to-dashboard {
    display: block;

    text-align: center;

    margin-top: 22px;

    color: #6D3F67;

    text-decoration: none;

    font-weight: bold;
}


/* Mobile */

@media (max-width: 600px) {

    .settings-page {
        padding: 30px 15px 90px;
    }

    .settings-header h1 {
        font-size: 31px;
    }

    .settings-section {
        padding: 18px;

        gap: 12px;
    }

    .settings-icon {
        width: 45px;
        height: 45px;

        font-size: 20px;
    }

    .settings-info h2 {
        font-size: 16px;
    }

    .settings-info p {
        font-size: 12px;
    }

    .settings-btn,
    .delete-btn {
        padding: 9px 12px;
    }

}

/* =========================
   ZOOJ - Edit Profile
   ========================= */

.edit-profile-page {
    max-width: 650px;

    margin: 0 auto;

    padding: 45px 20px 100px;
}


/* Card */

.edit-profile-card {
    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 24px;

    padding: 40px;

    box-shadow: 0 10px 35px rgba(59, 23, 100, 0.08);
}


/* Header */

.edit-profile-header {
    text-align: center;

    margin-bottom: 35px;
}

.edit-profile-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 15px;

    border-radius: 18px;

    background: #F3EAF8;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 27px;
}

.edit-profile-header h1 {
    font-size: 32px;

    margin-bottom: 8px;
}

.edit-profile-header p {
    color: #756D7D;
}


/* Form */

.profile-form {
    display: flex;

    flex-direction: column;

    gap: 20px;
}

.form-group {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.form-group label {
    font-weight: bold;

    color: #5A194F;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border: 1px solid #DDD5E4;

    border-radius: 11px;

    background: #FFFFFF;

    color: #302936;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition: 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #6D3F67;

    box-shadow: 0 0 0 3px rgba(109, 63, 103, 0.08);
}

.form-group textarea {
    resize: vertical;

    min-height: 130px;
}


/* Actions */

.edit-profile-actions {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 10px;
}


/* Save */

.save-profile-btn {
    border: none;

    border-radius: 11px;

    padding: 14px;

    background: #6D3F67;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;
}

.save-profile-btn:hover {
    background: #593454;

    transform: translateY(-2px);
}


/* Cancel */

.cancel-profile-btn {
    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid #DDD5E4;

    border-radius: 11px;

    padding: 14px;

    color: #756D7D;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}

.cancel-profile-btn:hover {
    border-color: #6D3F67;

    color: #6D3F67;
}


/* Mobile */

@media (max-width: 600px) {

    .edit-profile-page {
        padding: 25px 15px 90px;
    }

    .edit-profile-card {
        padding: 30px 20px;

        border-radius: 20px;
    }

    .edit-profile-header h1 {
        font-size: 28px;
    }

    .edit-profile-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================
   ZOOJ - Upload Photo
   ========================= */

.upload-photo-page {
    max-width: 600px;

    margin: 0 auto;

    padding: 55px 20px 100px;
}


/* Card */

.upload-photo-card {
    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 24px;

    padding: 40px;

    text-align: center;

    box-shadow: 0 10px 35px rgba(59, 23, 100, 0.08);
}


/* Header */

.upload-photo-header {
    margin-bottom: 30px;
}

.upload-photo-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 16px;

    border-radius: 20px;

    background: #F3EAF8;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 30px;
}

.upload-photo-header h1 {
    font-size: 32px;

    margin-bottom: 8px;
}

.upload-photo-header p {
    color: #756D7D;
}


/* Messages */

.success-message,
.error-message {
    padding: 13px 15px;

    border-radius: 10px;

    margin-bottom: 20px;

    font-size: 14px;
}

.success-message {
    background: #EEF9F2;

    color: #237A45;

    border: 1px solid #CDEBD8;
}

.error-message {
    background: #FFF1F3;

    color: #A51D43;

    border: 1px solid #F3CDD6;
}


/* Upload Area */

.photo-upload-form {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


.photo-upload-area {
    min-height: 170px;

    border: 2px dashed #D9CBE4;

    border-radius: 18px;

    background: #FCFAFD;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    cursor: pointer;

    transition: 0.3s;
}

.photo-upload-area:hover {
    border-color: #6D3F67;

    background: #FDFCFF;
}


.upload-large-icon {
    font-size: 38px;

    margin-bottom: 5px;
}

.photo-upload-area strong {
    color: #4A1945;

    font-size: 17px;
}

.photo-upload-area span:last-child {
    color: #8A8190;

    font-size: 13px;
}


/* Hide Native Input */

#photo {
    display: none;
}


/* Upload Button */

.upload-photo-btn {
    border: none;

    border-radius: 11px;

    padding: 14px;

    background: #6D3F67;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;
}

.upload-photo-btn:hover {
    background: #593454;

    transform: translateY(-2px);
}


/* Back */

.back-to-profile {
    display: block;

    margin-top: 22px;

    color: #6D3F67;

    text-decoration: none;

    font-weight: bold;
}


/* Mobile */

@media (max-width: 600px) {

    .upload-photo-page {
        padding: 30px 15px 90px;
    }

    .upload-photo-card {
        padding: 30px 20px;

        border-radius: 20px;
    }

    .upload-photo-header h1 {
        font-size: 28px;
    }

    .photo-upload-area {
        min-height: 150px;
    }

}

/* =========================
   ZOOJ - Delete Account
   ========================= */

.delete-account-page {
    min-height: calc(100vh - 80px);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 40px 20px 100px;

    box-sizing: border-box;
}


/* Card */

.delete-account-card {
    width: 100%;

    max-width: 520px;

    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 24px;

    padding: 45px;

    text-align: center;

    box-shadow: 0 12px 40px rgba(59, 23, 100, 0.09);
}


/* Icon */

.delete-account-icon {
    width: 75px;
    height: 75px;

    margin: 0 auto 22px;

    border-radius: 22px;

    background: #FBE7EC;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 34px;
}


/* Heading */

.delete-account-card h1 {
    font-size: 30px;

    color: #4A1945;

    margin-bottom: 12px;
}


/* Warning */

.delete-warning {
    color: #756D7D;

    line-height: 1.6;

    margin-bottom: 25px;
}


/* Notice */

.delete-notice {
    background: #FFF7F9;

    border: 1px solid #F2D8DF;

    border-radius: 14px;

    padding: 18px;

    margin-bottom: 28px;
}

.delete-notice strong {
    color: #A51D43;

    font-size: 15px;
}

.delete-notice p {
    color: #756D7D;

    font-size: 13px;

    line-height: 1.6;

    margin-top: 7px;
}


/* Form */

.delete-account-form {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* Delete */

.confirm-delete-btn {
    border: none;

    border-radius: 11px;

    padding: 14px;

    background: #B4235A;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;
}

.confirm-delete-btn:hover {
    background: #8F1745;

    transform: translateY(-2px);
}


/* Keep */

.keep-account-btn {
    display: block;

    padding: 13px;

    border: 1px solid #DDD5E4;

    border-radius: 11px;

    color: #5A194F;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}

.keep-account-btn:hover {
    border-color: #6D3F67;

    color: #6D3F67;

    background: #FCFAFD;
}


/* Mobile */

@media (max-width: 600px) {

    .delete-account-page {
        padding: 30px 15px 90px;
    }

    .delete-account-card {
        padding: 32px 22px;

        border-radius: 20px;
    }

    .delete-account-card h1 {
        font-size: 26px;
    }

}

/* =========================
   REGISTER PAGE
========================= */

.register-page {
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
}

.register-card {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.register-header {
    text-align: center;
    margin-bottom: 30px;
}

.register-icon {
    font-size: 42px;
    margin-bottom: 10px;
}

.register-header h1 {
    margin: 0;
    font-size: 30px;
}

.register-header p {
    margin-top: 10px;
    color: #777;
}

.register-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.register-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.register-form label {
    font-weight: 600;
}

.register-form input,
.register-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.register-form input:focus,
.register-form select:focus {
    border-color: #e91e63;
}

.register-btn {
    width: 100%;
    border: none;
    padding: 14px;
    border-radius: 10px;
    background: #e91e63;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 5px;
    transition: opacity 0.2s;
}

.register-btn:hover {
    opacity: 0.9;
}

.register-error {
    background: #ffe5e5;
    color: #c62828;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.register-success {
    background: #e5f7e9;
    color: #2e7d32;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.register-footer {
    text-align: center;
    margin-top: 25px;
    color: #777;
}

.register-footer a {
    color: #e91e63;
    font-weight: 600;
    text-decoration: none;
}


/* =========================
   LOGIN PAGE
========================= */

.login-page {
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
}

.login-card {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-icon {
    font-size: 42px;
    margin-bottom: 10px;
}

.login-header h1 {
    margin: 0;
    font-size: 30px;
}

.login-header p {
    margin-top: 10px;
    color: #777;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-form label {
    font-weight: 600;
}

.login-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.login-form input:focus {
    border-color: #e91e63;
}

.login-btn {
    width: 100%;
    border: none;
    padding: 14px;
    border-radius: 10px;
    background: #e91e63;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 5px;
    transition: opacity 0.2s;
}

.login-btn:hover {
    opacity: 0.9;
}

.login-error {
    background: #ffe5e5;
    color: #c62828;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.login-footer {
    text-align: center;
    margin-top: 25px;
    color: #777;
}

.login-footer a {
    color: #e91e63;
    font-weight: 600;
    text-decoration: none;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .register-page,
    .login-page {
        padding: 30px 15px;
    }

    .register-card,
    .login-card {
        padding: 25px 20px;
    }

    .register-header h1,
    .login-header h1 {
        font-size: 25px;
    }

}


.message-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;

    padding: 0 6px;

    margin-left: 5px;

    background: #e91e63;
    color: #ffffff;

    border-radius: 50px;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;
}

/* =========================================================
   MESSAGES PAGE
========================================================= */
/* =========================================================
   MESSAGES PAGE
========================================================= */

.messages-page {
    min-height: calc(100vh - 80px);
    padding: 40px 20px 100px;
    box-sizing: border-box;
}

.messages-card {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.messages-header {
    padding: 30px 30px 25px;
    text-align: left;
    border-bottom: 1px solid #eeeeee;
}

.messages-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff0f5;
    border-radius: 50%;

    font-size: 24px;

    margin-bottom: 12px;
}

.messages-header h1 {
    margin: 0;

    font-size: 28px;
    font-weight: 700;

    color: #222222;
}

.messages-header p {
    margin: 6px 0 0;

    font-size: 14px;
    color: #888888;
}


/* =========================================================
   CONVERSATION LIST
========================================================= */

.conversation-list {
    width: 100%;
}


/* =========================================================
   CONVERSATION
========================================================= */

.conversation-item {
    display: flex;

    width: 100%;
    min-height: 86px;

    box-sizing: border-box;

    padding: 14px 24px;

    align-items: center;

    gap: 16px;

    text-decoration: none;

    color: inherit;

    border-bottom: 1px solid #eeeeee;

    transition: background 0.2s ease;
}

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

.conversation-item:hover {
    background: #fff8fa;
}


/* =========================================================
   PHOTO
========================================================= */

.conversation-photo {
    width: 58px;
    height: 58px;

    min-width: 58px;

    flex-shrink: 0;
}

.conversation-photo img {
    display: block;

    width: 58px;
    height: 58px;

    object-fit: cover;

    border-radius: 50%;
}

.conversation-placeholder {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f3f3f3;

    border-radius: 50%;

    font-size: 25px;
}


/* =========================================================
   CONVERSATION INFORMATION
========================================================= */

.conversation-info {
    flex: 1;

    min-width: 0;
}


/* =========================================================
   NAME + DATE
========================================================= */

.conversation-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 6px;
}

.conversation-top h2 {
    margin: 0;

    font-size: 16px;
    font-weight: 700;

    color: #222222;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time {
    flex-shrink: 0;

    font-size: 12px;

    color: #999999;
}


/* =========================================================
   LAST MESSAGE + BADGE
========================================================= */

.conversation-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}

.conversation-bottom p {
    margin: 0;

    flex: 1;

    min-width: 0;

    font-size: 14px;

    color: #777777;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   UNREAD BADGE
========================================================= */

.conversation-badge {
    min-width: 22px;
    height: 22px;

    padding: 0 6px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: #e91e63;

    color: #ffffff;

    border-radius: 50%;

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   NO CONVERSATIONS
========================================================= */

.no-conversations {
    padding: 70px 30px;

    text-align: center;
}

.no-conversations-icon {
    font-size: 50px;

    margin-bottom: 15px;
}

.no-conversations h2 {
    margin: 0;

    font-size: 21px;

    color: #333333;
}

.no-conversations p {
    max-width: 430px;

    margin: 10px auto 25px;

    font-size: 14px;

    line-height: 1.6;

    color: #888888;
}


/* =========================================================
   VIEW MATCHES BUTTON
========================================================= */

.messages-discover-btn {
    display: inline-block;

    padding: 12px 22px;

    background: #e91e63;

    color: #ffffff;

    border-radius: 10px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: opacity 0.2s ease;
}

.messages-discover-btn:hover {
    opacity: 0.9;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .messages-page {
        padding: 25px 12px 90px;
    }

    .messages-card {
        border-radius: 15px;
    }

    .messages-header {
        padding: 25px 20px 20px;
    }

    .messages-header h1 {
        font-size: 25px;
    }

    .conversation-item {
        min-height: 78px;

        padding: 12px 15px;

        gap: 12px;
    }

    .conversation-photo,
    .conversation-photo img,
    .conversation-placeholder {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    .conversation-placeholder {
        font-size: 22px;
    }

    .conversation-top h2 {
        font-size: 15px;
    }

    .conversation-bottom p {
        font-size: 13px;
    }

    .conversation-time {
        font-size: 11px;
    }

}


/* Female gender icon */
.female-icon {
    color: #e91e63 !important;
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 900;
    display: inline-block;
    transform: scaleX(1.15);
}

.male-icon {
    color: #4F7FD8;
    font-weight: 800;
    display: inline-block;
    margin-left: 4px;
}

/* ZOOJ chat safety actions and branded confirmation */
.zooj-chat-safety-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.zooj-chat-safety-actions form {
    margin: 0;
}

.zooj-chat-report-btn,
.zooj-chat-block-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 3px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #6D3F67;
    font: 700 12px Arial, sans-serif;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.zooj-chat-report-btn:hover,
.zooj-chat-report-btn:focus-visible {
    color: #593454;
    outline: none;
}

.zooj-chat-block-btn {
    color: #A3294D;
}

.zooj-chat-block-btn:hover,
.zooj-chat-block-btn:focus-visible {
    color: #7F203C;
    outline: none;
}

.zooj-chat-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    font-size: 15px;
    line-height: 1;
}
.zooj-action-modal { position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:18px; }
.zooj-action-modal.show { display:flex; }
.zooj-action-modal-backdrop { position:absolute; inset:0; background:rgba(31,18,39,.52); backdrop-filter:blur(4px); }
.zooj-action-modal-card { position:relative; width:min(100%,440px); padding:30px; border:1px solid #E9DDF0; border-radius:24px; background:#FFF; box-shadow:0 24px 70px rgba(45,24,55,.28); text-align:center; }
.zooj-action-modal-brand { color:#6D3F67; font-weight:900; letter-spacing:2px; }
.zooj-action-modal-brand span { color:#EC4899; }
.zooj-action-modal-icon { margin:14px 0 8px; font-size:40px; }
.zooj-action-modal-card h2 { margin:0 0 9px; color:#33263A; }
.zooj-action-modal-card p { margin:0; color:#776C7C; line-height:1.55; }
.zooj-action-modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:23px; }
.zooj-action-modal-actions button { min-height:44px; border:1px solid #DDD3E3; border-radius:11px; background:#FFF; color:#62576A; font-weight:800; cursor:pointer; }
.zooj-action-modal-actions button.is-primary { border-color:#6D3F67; background:#6D3F67; color:#FFF; }
@media (max-width:700px) { .zooj-action-modal-actions { grid-template-columns:1fr; } }

/* =========================================================
   ZOOJ SUBSCRIPTION PAGE
========================================================= */

.subscription-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 25px 90px;
}


/* =========================================================
   HEADER
========================================================= */

.subscription-header {
    text-align: center;
    margin-bottom: 45px;
}

.subscription-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff0f6;

    font-size: 36px;

    box-shadow:
        0 8px 25px rgba(255, 79, 154, 0.12);
}

.subscription-header h1 {
    margin: 0;

    font-size: 36px;
    font-weight: 700;

    color: #222;
}

.subscription-header p {
    max-width: 650px;

    margin: 12px auto 0;

    color: #777;

    font-size: 16px;

    line-height: 1.6;
}


/* =========================================================
   PLANS
========================================================= */

.subscription-plans {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    align-items: stretch;

    max-width: 1100px;

    margin: 0 auto;
}


/* =========================================================
   CARD
========================================================= */

.subscription-card {
    position: relative;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 24px;

    padding: 32px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.subscription-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   WEEKLY
   PINK
========================================================= */

.subscription-card:nth-child(2) {
    border-color: #ff4f9a;
}

.subscription-card:nth-child(2)
.subscription-card-header h2 {
    color: #ff4f9a;
}

.subscription-card:nth-child(2)
.subscription-btn {
    background: #ff4f9a;

    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(255, 79, 154, 0.25);
}

.subscription-card:nth-child(2)
.subscription-btn:hover {
    opacity: 0.93;

    transform: translateY(-2px);

    box-shadow:
        0 11px 25px rgba(255, 79, 154, 0.32);
}


/* =========================================================
   MONTHLY / BEST VALUE
   PURPLE
========================================================= */

.premium-card {
    border: 2px solid #7A4E74;

    box-shadow:
        0 15px 45px rgba(122, 78, 116, 0.18);

    transform: translateY(-8px);
}

.premium-card:hover {
    transform: translateY(-13px);
}

.premium-card
.subscription-card-header h2 {
    color: #7A4E74;
}


/* =========================================================
   BEST VALUE BADGE
========================================================= */

.popular-badge {
    position: absolute;

    top: -14px;
    left: 50%;

    transform: translateX(-50%);

    white-space: nowrap;

    padding: 7px 22px;

    border-radius: 30px;

    background: #7A4E74;

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.8px;

    box-shadow:
        0 5px 15px rgba(122, 78, 116, 0.25);
}


/* =========================================================
   MONTHLY BUTTON
========================================================= */

.premium-card
.premium-btn {
    background: #7A4E74;

    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(122, 78, 116, 0.25);
}

.premium-card
.premium-btn:hover {
    opacity: 0.93;

    transform: translateY(-2px);

    box-shadow:
        0 11px 25px rgba(122, 78, 116, 0.32);
}


/* =========================================================
   CARD HEADER
========================================================= */

.subscription-card-header h2 {
    margin: 0 0 14px;

    font-size: 24px;

    color: #222;
}

.subscription-price {
    display: flex;

    align-items: baseline;

    gap: 5px;
}

.subscription-price .price {
    font-size: 40px;

    font-weight: 700;

    color: #222;
}

.subscription-price .period {
    font-size: 14px;

    color: #888;
}


/* =========================================================
   DIVIDER
========================================================= */

.subscription-divider {
    height: 1px;

    background: #eeeeee;

    margin: 24px 0;
}


/* =========================================================
   FEATURES
========================================================= */

.subscription-features {
    list-style: none;

    padding: 0;

    margin: 0 0 28px;
}

.subscription-features li {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px 0;

    font-size: 15px;

    color: #444;
}


/* =========================================================
   BUTTONS
========================================================= */

.subscription-btn {
    width: 100%;

    border: none;

    border-radius: 13px;

    padding: 14px 18px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.current-plan {
    background: #f3f3f3;

    color: #777;

    cursor: default;
}


/* =========================================================
   PAYMENT NOTE
========================================================= */

.subscription-note {
    text-align: center;

    margin-top: 35px;

    color: #888;

    font-size: 13px;
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 767px) {

    .subscription-page {
        padding: 40px 18px 80px;
    }

    .subscription-header {
        margin-bottom: 35px;
    }

    .subscription-header h1 {
        font-size: 29px;
    }

    .subscription-header p {
        font-size: 15px;
    }

    .subscription-plans {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .premium-card {
        transform: none;
    }

    .premium-card:hover {
        transform: translateY(-5px);
    }

    .subscription-card {
        padding: 27px;
    }

}

/* =========================================================
   SEARCH PAGE
========================================================= */

.search-page {
    max-width: 650px;
    margin: 0 auto;
    padding: 45px 20px 100px;
}


/* Card */

.search-card {
    background: #FFFFFF;
    border: 1px solid #E9E1F0;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 35px rgba(59, 23, 100, 0.08);
}


/* Header */

.search-header {
    text-align: center;
    margin-bottom: 35px;
}

.search-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 15px;

    border-radius: 18px;

    background: #F3EAF8;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 27px;
}

.search-header h1 {
    font-size: 32px;
    margin-bottom: 8px;
}

.search-header p {
    color: #756D7D;
}


/* Form */

.search-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* Sections */

.form-section {
    padding: 25px;

    background: #FCFAFE;

    border: 1px solid #E9E1F0;

    border-radius: 18px;
}


/* Section title */

.form-section-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 25px;
}

.form-section-title > span {
    font-size: 25px;
}

.form-section-title h2 {
    font-size: 20px;
    margin-bottom: 5px;
}

.form-section-title p {
    color: #756D7D;
    font-size: 14px;
}


/* Search form group */

.search-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-bottom: 18px;
}

.search-form-group:last-child {
    margin-bottom: 0;
}

.search-form-group label {
    font-weight: bold;
    color: #5A194F;
}

.search-form-group input,
.search-form-group select,
.search-form-group textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border: 1px solid #DDD5E4;

    border-radius: 11px;

    background: #FFFFFF;

    color: #302936;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition: 0.3s;
}

.search-form-group input:focus,
.search-form-group select:focus,
.search-form-group textarea:focus {
    border-color: #6D3F67;

    box-shadow: 0 0 0 3px rgba(109, 63, 103, 0.08);
}


/* Buttons */

.search-actions {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 10px;
}


/* Search */

.search-submit-btn {
    border: none;

    border-radius: 11px;

    padding: 14px;

    background: #6D3F67;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;
}

.search-submit-btn:hover {
    background: #593454;
    transform: translateY(-2px);
}


/* Cancel */

.search-cancel-btn {
    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid #DDD5E4;

    border-radius: 11px;

    padding: 14px;

    color: #756D7D;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}

.search-cancel-btn:hover {
    border-color: #6D3F67;
    color: #6D3F67;
}


/* Mobile */

@media (max-width: 600px) {

    .search-page {
        padding: 25px 15px 90px;
    }

    .search-card {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .search-header h1 {
        font-size: 28px;
    }

    .search-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================
   ZOOJ - Likes Empty State
   ========================= */

.likes-empty-container {
    width: 100%;
    max-width: 700px;

    margin: 20px auto 0;

    padding: 80px 25px;

    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 22px;

    text-align: center;

    box-shadow: 0 5px 20px rgba(59, 23, 100, 0.05);

    box-sizing: border-box;
}


.likes-empty-icon {
    font-size: 55px;

    margin-bottom: 20px;
}


.likes-empty-container h2 {
    font-size: 28px;

    margin-bottom: 10px;
}


.likes-empty-container p {
    color: #756D7D;

    margin: 0;
}


/* Mobile */

@media (max-width: 600px) {

    .likes-empty-container {
        padding: 60px 20px;
    }

    .likes-empty-container h2 {
        font-size: 25px;
    }

}

/* =========================
   CENTER LIKES EMPTY STATE
   ========================= */

.likes-empty-container {
    width: 100%;
    max-width: 700px;

    margin: 40px auto 0;

    padding: 80px 25px;

    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 22px;

    text-align: center;

    box-shadow: 0 5px 20px rgba(59, 23, 100, 0.05);

    box-sizing: border-box;

    grid-column: 1 / -1;
}

/* =========================
   ZOOJ - Discover Empty State
   ========================= */

.no-users {
    grid-column: 1 / -1;

    width: 100%;
    max-width: 700px;

    margin: 0 auto;

    background: #FFFFFF;

    border: 1px solid #E9E1F0;

    border-radius: 22px;

    text-align: center;

    padding: 80px 25px;

    box-shadow: 0 5px 20px rgba(59, 23, 100, 0.05);

    box-sizing: border-box;
}

.no-users h2 {
    font-size: 28px;

    margin-bottom: 10px;
}

.no-users p {
    color: #756D7D;

    margin: 0;
}


/* Mobile */

@media (max-width: 600px) {

    .no-users {
        padding: 60px 20px;
    }

    .no-users h2 {
        font-size: 25px;
    }

}

/* =========================
   Mobile Notification Badge
   ========================= */

@media (max-width: 700px) {

    .notification-nav-icon {
        position: relative;
        display: inline-block !important;
    }

    .notification-bell {
        display: block;
    }

    .notification-badge {
        position: absolute;

        top: -7px;
        right: -10px;

        min-width: 18px;
        height: 18px;

        padding: 0 5px;

        background: #F472B6;
        color: #FFFFFF;

        border-radius: 50%;

        font-size: 11px;
        font-weight: bold;

        align-items: center;
        justify-content: center;

        line-height: 18px;
    }

}

/* =========================
   Mobile Notification Badge
   ========================= */

@media (max-width: 700px) {

    .mobile-nav .notification-icon-wrapper {
        position: relative !important;

        display: block !important;

        width: 28px !important;
        height: 27px !important;

        margin: 0 auto 3px !important;
    }

    .mobile-nav .notification-bell {
        display: block !important;

        width: 28px !important;
        height: 27px !important;

        font-size: 21px !important;
        line-height: 27px !important;
    }

    .mobile-nav .notification-badge {
        position: absolute !important;

        top: -5px !important;
        right: -6px !important;

        width: 18px !important;
        height: 18px !important;

        min-width: 18px !important;

        padding: 0 !important;

        background: #F472B6 !important;
        color: #FFFFFF !important;

        border-radius: 50% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        font-size: 10px !important;
        font-weight: bold !important;

        line-height: 18px !important;

        z-index: 10 !important;
    }

}

@media (max-width: 700px) {

    .mobile-nav .notification-mobile-link {
        position: relative;
    }

    .mobile-nav .notification-icon-wrapper {
        position: relative !important;
        display: block !important;
        width: 28px !important;
        height: 27px !important;
    }

    .mobile-nav .notification-bell {
        display: block !important;
        font-size: 21px;
        line-height: 27px;
    }

    .mobile-nav .notification-badge {
        position: absolute !important;

        top: -5px !important;
        right: -6px !important;

        width: 18px !important;
        height: 18px !important;

        min-width: 18px !important;

        padding: 0 !important;

        background: #F472B6 !important;
        color: #FFFFFF !important;

        border-radius: 50% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 10px !important;
        font-weight: bold !important;

        line-height: 18px !important;

        z-index: 999 !important;
    }

}


/* =========================================================
   ZOOJ - CONSISTENCY LAYER
   Namespaced member cards, my profile, and viewed-user profile.
   ========================================================= */

:root {
    --zooj-bg: #FAF7FC;
    --zooj-surface: #FFFFFF;
    --zooj-text: #18131F;
    --zooj-muted: #756D7D;
    --zooj-border: #E9E1F0;
    --zooj-primary: #6D3F67;
    --zooj-primary-hover: #593454;
    --zooj-accent: #EC4899;
    --zooj-soft: #F0E8F8;
    --zooj-radius-card: 22px;
    --zooj-radius-control: 11px;
    --zooj-shadow-card: 0 5px 20px rgba(59, 23, 100, 0.06);
    --zooj-shadow-hover: 0 15px 35px rgba(109, 63, 103, 0.15);
}

/* Shared member grids: Discover, Likes, Passed */
.member-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.member-card {
    background: var(--zooj-surface);
    border: 1px solid var(--zooj-border);
    border-radius: var(--zooj-radius-card);
    overflow: hidden;
    box-shadow: var(--zooj-shadow-card);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.member-card:hover {
    transform: translateY(-6px);
    border-color: #8B5E86;
    box-shadow: var(--zooj-shadow-hover);
}

.member-photo-container {
    width: 100%;
    overflow: hidden;
    background: var(--zooj-soft);
}

.member-photo,
.member-placeholder {
    width: 100%;
    height: 320px;
    display: block;
}

.member-photo {
    object-fit: cover;
}

.member-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zooj-soft);
    font-size: 70px;
}

.member-info {
    padding: 22px;
}

.member-info h2 {
    margin: 0 0 8px;
    font-size: 24px;
}

.member-meta {
    margin-bottom: 15px;
    color: var(--zooj-muted);
    font-size: 14px;
}

.member-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.member-secondary-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

.member-secondary-actions a {
    color: #8A818F;
    text-decoration: none;
    font-size: 13px;
}

.member-secondary-actions a:hover {
    color: var(--zooj-primary);
}

/* My Profile: fully isolated from member list cards */
.my-profile-card {
    background: var(--zooj-surface);
    border: 1px solid var(--zooj-border);
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 35px rgba(59, 23, 100, 0.08);
}

.my-profile-photo-container {
    margin-bottom: 20px;
}

.my-profile-photo,
.my-profile-placeholder {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    border-radius: 50%;
    border: 5px solid var(--zooj-soft);
    box-shadow: 0 8px 25px rgba(59, 23, 100, 0.12);
}

.my-profile-photo {
    display: block;
    object-fit: cover;
}

.my-profile-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zooj-soft);
    font-size: 70px;
}

.my-profile-details {
    padding: 10px 0;
    text-align: left;
    border-top: 1px solid var(--zooj-border);
    border-bottom: 1px solid var(--zooj-border);
}

.my-profile-detail,
.user-profile-detail {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 5px;
    border-bottom: 1px solid #F0EBF3;
}

.my-profile-detail:last-child,
.user-profile-detail:last-child {
    border-bottom: 0;
}

.my-detail-label,
.user-detail-label {
    font-weight: 700;
    color: #5A194F;
}

.my-detail-value,
.user-detail-value {
    color: #4A4350;
    text-align: right;
    overflow-wrap: anywhere;
}

.my-profile-bio {
    padding: 20px 5px 15px;
    text-align: left;
}

.my-profile-bio p {
    margin-top: 10px;
    color: #4A4350;
    line-height: 1.7;
}

.my-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
}

/* Viewed member profile */
.user-profile-placeholder {
    width: 100%;
    min-height: 600px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zooj-soft);
    font-size: 80px;
}

.user-profile-secondary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

/* State shown after a like but before a mutual match */
.waiting-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3EFF8;
    color: #756D7D;
    border: 1px solid #E2D8EA;
    cursor: default;
    user-select: none;
}

/* Keep all primary interaction buttons visually aligned */
.action-btn,
.profile-main-btn,
.profile-primary-btn,
.profile-secondary-btn,
.settings-btn,
.search-submit-btn,
.search-cancel-btn,
.upload-photo-btn,
.register-btn,
.login-btn,
.subscription-btn {
    min-height: 44px;
}

@media (max-width: 900px) {
    .member-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .user-profile-placeholder {
        min-height: 420px;
    }
}

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

    .member-photo,
    .member-placeholder {
        height: 360px;
    }

    .my-profile-card {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .my-profile-photo,
    .my-profile-placeholder {
        width: 145px;
        height: 145px;
    }

    .my-profile-detail,
    .user-profile-detail {
        flex-direction: column;
        gap: 5px;
    }

    .my-detail-value,
    .user-detail-value {
        text-align: left;
    }

    .my-profile-actions,
    .user-profile-secondary-actions {
        grid-template-columns: 1fr;
    }
}


/* =========================
   ZOOJ Branded Match + Unmatch
   ========================= */

body.modal-open {
    overflow: hidden;
}

.zooj-modal,
.zooj-match-celebration {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.zooj-modal.show,
.zooj-match-celebration.show {
    opacity: 1;
    visibility: visible;
}

.zooj-modal-backdrop,
.zooj-celebration-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(45, 27, 72, .56);
    backdrop-filter: blur(5px);
}

.zooj-modal-card,
.zooj-celebration-card {
    position: relative;
    width: min(100%, 430px);
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E9DDF7;
    border-radius: 26px;
    padding: 30px 30px 28px;
    text-align: center;
    box-shadow: 0 28px 80px rgba(69, 38, 101, .24);
    transform: translateY(10px) scale(.97);
    transition: transform .22s ease;
}

.zooj-modal-card::before,
.zooj-celebration-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #6D3F67, #EC4899);
}

.zooj-modal.show .zooj-modal-card,
.zooj-match-celebration.show .zooj-celebration-card {
    transform: translateY(0) scale(1);
}

.zooj-modal-brand,
.zooj-celebration-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px;
    color: #6D3F67;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .8px;
}

.zooj-modal-brand span,
.zooj-celebration-brand span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6D3F67, #EC4899);
    color: #FFFFFF;
    font-size: 14px;
}

.zooj-modal-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #F2EAFE, #FCE7F3);
    font-size: 31px;
    box-shadow: inset 0 0 0 1px #EBDDF8;
}

.zooj-modal-card h2,
.zooj-celebration-card h2 {
    margin: 0 0 9px;
    color: #6D3F67;
    font-size: 27px;
    font-weight: 900;
}

.zooj-modal-card p,
.zooj-celebration-card p {
    margin: 0;
    color: #665A70;
    font-size: 15px;
    line-height: 1.55;
}

.zooj-modal-note {
    display: block;
    margin-top: 8px;
    color: #93869D;
    font-size: 13px;
    line-height: 1.45;
}

.zooj-modal-actions,
.zooj-celebration-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 25px;
}

.zooj-modal-actions button,
.zooj-celebration-actions button,
.zooj-celebration-actions a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.zooj-modal-cancel,
.zooj-celebration-later {
    border: 1px solid #E5DDEF;
    background: #F8F5FB;
    color: #5B4C68;
}

.zooj-modal-confirm,
.zooj-celebration-chat {
    border: 1px solid #EC4899;
    background: linear-gradient(135deg, #EC4899, #E83E8C);
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(236, 72, 153, .22);
}

.zooj-modal-actions button:hover,
.zooj-celebration-actions button:hover,
.zooj-celebration-actions a:hover {
    transform: translateY(-1px);
}

.zooj-modal-confirm:hover,
.zooj-celebration-chat:hover {
    box-shadow: 0 10px 24px rgba(236, 72, 153, .30);
}

.zooj-modal-actions button:disabled {
    cursor: not-allowed;
    opacity: .65;
    transform: none;
}

.zooj-celebration-hearts {
    margin: 2px 0 11px;
    font-size: 56px;
    animation: zoojMatchPulse .75s ease-in-out infinite alternate;
}

@keyframes zoojMatchPulse {
    from { transform: scale(.94); }
    to { transform: scale(1.06); }
}

@media (max-width: 520px) {
    .zooj-modal-card,
    .zooj-celebration-card {
        padding: 27px 20px 22px;
        border-radius: 21px;
    }

    .zooj-modal-actions,
    .zooj-celebration-actions {
        grid-template-columns: 1fr;
    }

    .zooj-modal-confirm,
    .zooj-celebration-chat {
        order: -1;
    }
}


/* =========================
   ZOOJ Block Action Forms
   ========================= */
.block-action-form {
    display: inline;
    margin: 0;
}

.secondary-action-button {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.user-profile-secondary-actions .block-action-form {
    display: inline-flex;
}

.block-action-form .profile-main-btn {
    font-family: inherit;
    cursor: pointer;
}


/* =========================================================
   ZOOJ — Locked Likes / Premium
   ========================================================= */

.likes-locked-card {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    text-align: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: transparent;
}

.likes-locked-content {
    width: 100%;
    filter: blur(6px);
    transform: scale(1.08);
    transform-origin: center;
    pointer-events: none;
    user-select: none;
}

.likes-locked-card:hover .likes-locked-content {
    filter: blur(6px);
}

.likes-locked-view,
.likes-locked-actions {
    pointer-events: none;
}

.likes-premium-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(30, 18, 45, 0.68);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.likes-premium-modal.show {
    display: flex;
}

.likes-premium-modal-card {
    width: min(100%, 440px);
    padding: 36px 30px 30px;
    border-radius: 26px;
    background: #FFFFFF;
    text-align: center;
    box-shadow: 0 24px 70px rgba(50, 20, 80, 0.28);
    animation: zoojLikesModalIn 0.22s ease-out;
}

.likes-premium-brand {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6D3F67, #EC4899);
    color: #FFFFFF;
    font-size: 29px;
    box-shadow: 0 10px 28px rgba(109, 63, 103, 0.25);
}

.likes-premium-modal-card h2 {
    margin: 0 0 10px;
    color: #5A194F;
    font-size: 27px;
}

.likes-premium-modal-card p {
    margin: 0 auto 25px;
    max-width: 340px;
    color: #756D7D;
    font-size: 15px;
    line-height: 1.55;
}

.likes-premium-modal-actions {
    display: grid;
    gap: 10px;
}

.likes-premium-subscribe-btn,
.likes-premium-close-btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.likes-premium-subscribe-btn {
    border: 0;
    background: linear-gradient(135deg, #6D3F67, #EC4899);
    color: #FFFFFF;
}

.likes-premium-close-btn {
    border: 1px solid #E9E1F0;
    background: #F8F5FB;
    color: #756D7D;
}

.likes-modal-open {
    overflow: hidden;
}

@keyframes zoojLikesModalIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    .likes-locked-content {
        filter: blur(6px);
    }

    .likes-premium-modal-card {
        padding: 30px 20px 22px;
    }
}


.likes-premium-message {
    margin-top: 8px;
    color: #6D3F67;
    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   ZOOJ - Mobile Navigation (strictly small screens only)
   ========================================================= */

/* NEVER show mobile navigation on desktop */
.mobile-topbar,
.mobile-menu-backdrop,
.mobile-menu-drawer,
.mobile-nav {
    display: none !important;
}

/* Desktop navbar stays visible by default */
.desktop-navbar {
    display: flex;
}

@media (max-width: 768px) {

    body {
        padding-top: 64px !important;
        padding-bottom: 76px !important;
    }

    /* Hide desktop navbar only on small screens */
    .desktop-navbar {
        display: none !important;
    }

    /* -------------------------
       TOP MOBILE BAR
       ------------------------- */

    .mobile-topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 950 !important;

        height: 64px !important;
        padding: 0 14px !important;

        display: grid !important;
        grid-template-columns: 44px 1fr 44px !important;
        align-items: center !important;

        background: #FFFFFF !important;
        border-bottom: 1px solid #E9E1F0 !important;
        box-shadow: 0 3px 14px rgba(59, 23, 100, 0.06) !important;
    }

    .mobile-menu-button {
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        border: 0 !important;
        border-radius: 11px !important;
        background: transparent !important;
        cursor: pointer !important;
    }

    .mobile-menu-button span {
        display: block !important;
        width: 23px !important;
        height: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 99px !important;
        background: #3F3746 !important;
    }

    .mobile-topbar-logo {
        justify-self: center !important;
        margin: 0 !important;

        color: #6D3F67 !important;
        font-size: 25px !important;
        font-weight: 800 !important;
        letter-spacing: 3px !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .mobile-topbar-notifications {
        position: relative !important;
        justify-self: end !important;

        width: 42px !important;
        height: 42px !important;

        display: grid !important;
        place-items: center !important;

        margin: 0 !important;
        padding: 0 !important;
        border-radius: 11px !important;
        text-decoration: none !important;
    }

    .mobile-topbar-bell {
        display: block !important;
        font-size: 23px !important;
        line-height: 1 !important;
    }

    .mobile-topbar .mobile-topbar-badge {
        position: absolute !important;
        top: 0 !important;
        right: -1px !important;

        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;

        display: none;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin-left: -3px !important;

        border: 2px solid #FFFFFF !important;
        border-radius: 50% !important;

        background: #EC4899 !important;
        color: #FFFFFF !important;

        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    /* -------------------------
       DRAWER
       ------------------------- */

    .mobile-menu-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 970 !important;

        display: block !important;
        visibility: hidden !important;
        opacity: 0 !important;

        background: rgba(24, 19, 31, 0.45) !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }

    .mobile-menu-backdrop.show {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mobile-menu-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 980 !important;

        width: min(82vw, 310px) !important;
        max-width: 310px !important;
        height: 100vh !important;

        display: flex !important;
        flex-direction: column !important;

        padding: 18px !important;

        background: #FFFFFF !important;
        box-shadow: 18px 0 50px rgba(34, 17, 51, 0.2) !important;

        transform: translateX(-105%) !important;
        transition: transform 0.24s ease !important;
    }

    .mobile-menu-drawer.show {
        transform: translateX(0) !important;
    }

    .mobile-menu-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        padding: 4px 2px 18px !important;
        border-bottom: 1px solid #EEE7F3 !important;
    }

    .mobile-menu-brand {
        color: #6D3F67 !important;
        font-size: 23px !important;
        font-weight: 800 !important;
        letter-spacing: 3px !important;
    }

    .mobile-menu-close {
        width: 38px !important;
        height: 38px !important;

        display: grid !important;
        place-items: center !important;

        border: 0 !important;
        border-radius: 50% !important;

        background: #F7F2FA !important;
        color: #4B4452 !important;

        font-size: 26px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-menu-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;

        padding-top: 16px !important;
    }

    .mobile-menu-links a {
        min-height: 50px !important;

        display: flex !important;
        align-items: center !important;
        gap: 12px !important;

        padding: 0 14px !important;
        border-radius: 12px !important;

        color: #4B4452 !important;
        text-decoration: none !important;

        font-size: 15px !important;
        font-weight: 700 !important;
    }

    .mobile-menu-links a:hover {
        background: #F7F2FA !important;
        color: #6D3F67 !important;
    }

    .mobile-menu-links a span {
        width: 24px !important;
        text-align: center !important;
    }

    .mobile-menu-open {
        overflow: hidden !important;
    }

    /* -------------------------
       BOTTOM NAV
       ------------------------- */

    .mobile-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 940 !important;

        width: 100% !important;
        height: 72px !important;

        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        align-items: stretch !important;
        gap: 4px !important;

        padding: 7px 10px 8px !important;

        background: #FFFFFF !important;
        border-top: 1px solid #E9E1F0 !important;
        box-shadow: 0 -5px 20px rgba(59, 23, 100, 0.08) !important;
    }

    .mobile-nav > a {
        min-width: 0 !important;
        height: 56px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 11px !important;

        color: #756D7D !important;
        text-decoration: none !important;

        font-size: 11px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    .mobile-nav .nav-icon {
        position: relative !important;
        display: block !important;

        margin: 0 !important;

        font-size: 21px !important;
        line-height: 23px !important;
    }

    .mobile-nav .mobile-premium-link {
        color: #6D3F67 !important;
    }

    .mobile-message-icon-wrapper {
        width: 30px !important;
        height: 23px !important;
    }

    .mobile-nav .mobile-message-badge {
        position: absolute !important;
        top: -7px !important;
        right: -9px !important;

        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;

        padding: 0 !important;
        margin: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        border: 2px solid #FFFFFF !important;
        border-radius: 50% !important;

        background: #EC4899 !important;
        color: #FFFFFF !important;

        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }
}



/* =========================================================
   ZOOJ UI POLISH V1
   Targeted overrides only:
   avatars / matches empty state / chat / notifications
========================================================= */

:root {
    --zooj-avatar-border: #EEE5F5;
    --zooj-avatar-bg: #F6F0FA;
    --zooj-card-photo-ratio: 4 / 5;
}

/* ---------------------------------------------------------
   Consistent photo and avatar sizing
--------------------------------------------------------- */

.member-photo,
.member-placeholder,
.match-photo,
.match-placeholder {
    width: 100%;
    height: auto !important;
    aspect-ratio: var(--zooj-card-photo-ratio);
}

.member-photo,
.match-photo {
    object-fit: cover;
    object-position: center;
}

.profile-photo,
.profile-placeholder,
.my-profile-photo,
.my-profile-placeholder {
    width: 180px;
    height: 180px;
    aspect-ratio: 1 / 1;
}

.chat-avatar,
.chat-avatar-placeholder {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    aspect-ratio: 1 / 1;
}

.conversation-photo,
.conversation-photo img,
.conversation-placeholder {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    aspect-ratio: 1 / 1;
}

.profile-photo,
.my-profile-photo,
.chat-avatar,
.conversation-photo img {
    object-fit: cover;
    object-position: center;
}

/* ---------------------------------------------------------
   Matches: clearer cards and empty state
--------------------------------------------------------- */

.matches-grid {
    align-items: stretch;
}

.match-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.match-info {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.match-actions {
    margin-top: auto;
}

.no-matches {
    max-width: 620px;
    margin: 0 auto;
    padding: 64px 28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(109, 63, 103, 0.08), transparent 42%),
        #FFFFFF;
}

.no-matches-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: #F5EEFF;
    color: #6D3F67;
}

.no-matches-icon svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.no-matches-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: #6D3F67;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.no-matches h2 {
    margin-bottom: 10px;
}

.no-matches p {
    max-width: 470px;
    margin: 0 auto 26px;
    line-height: 1.65;
}

/* ---------------------------------------------------------
   Chat visual polish
--------------------------------------------------------- */

.chat-page {
    max-width: 920px;
}

.chat-card {
    border-color: #E7DEEE;
    box-shadow: 0 18px 55px rgba(59, 23, 100, 0.10);
}

.chat-header {
    position: relative;
    min-height: 76px;
    padding: 14px 20px;
    gap: 12px;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FCFAFD 100%);
}

.chat-back-btn {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid !important;
    place-items: center;
    border-radius: 11px;
    background: #F7F2FA;
    color: #5B5062 !important;
}

.chat-back-btn:hover {
    background: #EFE6F6;
    color: #593454 !important;
}

.chat-back-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-avatar,
.chat-avatar-placeholder {
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 2px #EDE4F4;
}

.chat-header-info {
    min-width: 0;
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
}

.chat-header-info h1 {
    grid-column: 1 / -1;
    margin: 0;
    line-height: 1.2;
}

.chat-header-info > a {
    font-weight: 700;
}

.chat-profile-link {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit !important;
    text-decoration: none !important;
}

.chat-profile-link:hover .chat-header-info h1,
.chat-profile-link:focus-visible .chat-header-info h1 {
    color: #6D3F67;
}

.chat-profile-link:focus-visible {
    outline: 2px solid rgba(109, 63, 103, .28);
    outline-offset: 4px;
    border-radius: 12px;
}

.chat-profile-link.is-disabled {
    cursor: default;
}

.chat-connection-label {
    color: #93889B;
    font-size: 12px;
}

.messages-container {
    padding: 26px;
    background:
        radial-gradient(circle at 20% 0%, rgba(109, 63, 103, .035), transparent 28%),
        #FAF8FC;
    scrollbar-width: thin;
    scrollbar-color: #D8CBE3 transparent;
}

.message-row {
    margin-bottom: 10px;
}

.message-bubble {
    max-width: min(72%, 560px);
    padding: 11px 15px;
    border-radius: 18px;
    line-height: 1.55;
    box-shadow: 0 2px 8px rgba(59, 23, 100, 0.04);
}

.my-message .message-bubble {
    background: linear-gradient(135deg, #6D3F67, #84577E);
    border-bottom-right-radius: 6px;
}

.their-message .message-bubble {
    border-color: #E8E0EE;
    border-bottom-left-radius: 6px;
}

.empty-chat {
    gap: 8px;
}

.empty-chat-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 6px !important;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: #F4ECFA;
    color: #6D3F67;
}

.empty-chat-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.empty-chat strong {
    color: #302936;
    font-size: 17px;
}

.empty-chat p {
    margin: 0;
    font-size: 14px;
}

.message-form {
    padding: 14px 16px;
    gap: 9px;
    background: rgba(255,255,255,.98);
}

.message-form input {
    min-height: 46px;
    border-radius: 14px;
    background: #FCFAFD;
}

.message-form button {
    min-width: 78px;
    min-height: 46px;
    border-radius: 14px;
    background: #6D3F67;
}

.message-form button:hover {
    background: #593454;
}

/* ---------------------------------------------------------
   Notifications: hierarchy + unread state
--------------------------------------------------------- */

.notifications-list {
    gap: 12px;
}

.notification-card {
    position: relative;
    align-items: flex-start;
    padding: 18px;
    border-radius: 17px;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.notification-card.is-unread {
    border-color: #D9C7F4;
    background: linear-gradient(90deg, #FBF8FF 0%, #FFFFFF 32%);
    box-shadow: 0 7px 24px rgba(89, 52, 84, 0.08);
}

.notification-card.is-unread::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: #6D3F67;
}

.notification-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    color: #593454;
    background: #F5EEFF;
}

.notification-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-icon-like {
    color: #DB2777;
    background: #FFF0F6;
}

.notification-icon-match {
    color: #6D3F67;
    background: #F4ECFF;
}

.notification-icon-blog_comment,
.notification-icon-blog_published {
    color: #6A3C65;
    background: #F2EDFF;
}

.notification-icon-blog_rejected {
    color: #8B5E3C;
    background: #FFF7ED;
}

.notification-meta-row {
    min-height: 19px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-type-label {
    color: #8A7F91;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.notification-new-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    background: #6D3F67;
}

.notification-content p {
    margin: 0 0 10px;
}

.notification-content small {
    margin-top: 10px;
}

.notification-btn,
.notification-chat-btn {
    min-height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 600px) {

    .match-photo,
    .match-placeholder,
    .member-photo,
    .member-placeholder {
        height: auto !important;
        aspect-ratio: 4 / 5;
    }

    .no-matches {
        padding: 48px 20px;
    }

    .chat-page {
        padding: 10px 8px 88px;
    }

    .chat-card {
        height: calc(100dvh - 154px);
        min-height: 480px;
        border-radius: 16px;
    }

    .chat-header {
        min-height: 68px;
        padding: 10px 12px;
        gap: 9px;
    }

    .chat-back-btn {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .chat-avatar,
    .chat-avatar-placeholder {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .chat-header-info {
        column-gap: 7px;
    }

    .chat-header-info h1 {
        font-size: 17px;
    }

    .chat-connection-label {
        font-size: 10px;
    }

    .messages-container {
        padding: 14px 12px;
    }

    .message-bubble {
        max-width: 84%;
        padding: 10px 13px;
        font-size: 14px;
    }

    .message-form {
        padding: 10px;
    }

    .message-form input {
        min-height: 44px;
        padding: 11px 13px;
    }

    .message-form button {
        min-width: 66px;
        min-height: 44px;
        padding: 10px 13px;
    }

    .notification-card {
        gap: 12px;
        padding: 14px;
    }

    .notification-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 12px;
    }

    .notification-icon svg {
        width: 21px;
        height: 21px;
    }

    .notification-actions {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .notification-btn,
    .notification-chat-btn {
        width: auto;
        flex: 1 1 130px;
    }
}


/* =========================================================
   ZOOJ SEARCH / DISCOVER FILTER POLISH V1
   Targeted overrides only
========================================================= */

.search-range-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.search-range-grid .search-form-group {
    margin-bottom: 0;
}

.search-field-hint {
    margin: 8px 0 0;
    color: #918797;
    font-size: 12px;
    line-height: 1.45;
}

.search-range-notice {
    margin-bottom: 14px;
    padding: 11px 13px;
    border: 1px solid #E1D4F1;
    border-radius: 12px;
    background: #F8F3FF;
    color: #5B3B75;
    font-size: 13px;
    line-height: 1.5;
}

.discover-header .search-btn {
    gap: 7px;
}

.discover-filter-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 999px;
    background: #FFFFFF;
    color: #593454;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 1px 5px rgba(59, 23, 100, .12);
}

.discover-filter-notice {
    width: min(640px, 100%);
    margin: 12px auto 0;
    padding: 10px 13px;
    box-sizing: border-box;
    border: 1px solid #E5D9F3;
    border-radius: 12px;
    background: #FAF6FF;
    color: #67556F;
    font-size: 12px;
    line-height: 1.5;
}

.discover-empty-state {
    width: min(620px, 100%);
    margin: 16px auto 0;
    padding: 58px 28px;
    box-sizing: border-box;
    border: 1px solid #EDE5F2;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 0%, rgba(109, 63, 103, .07), transparent 40%),
        #FFFFFF;
    text-align: center;
}

.discover-empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 21px;
    background: #F4ECFF;
    color: #6D3F67;
}

.discover-empty-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.discover-empty-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: #6D3F67;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.discover-empty-state h2 {
    margin: 0 0 10px;
}

.discover-empty-state p {
    max-width: 500px;
    margin: 0 auto 24px;
    color: #766D7C;
    line-height: 1.65;
}

.discover-empty-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.discover-empty-primary,
.discover-empty-secondary {
    min-height: 42px;
    padding: 10px 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 12px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
}

.discover-empty-primary {
    background: #6D3F67;
    color: #FFFFFF;
}

.discover-empty-primary:hover {
    background: #593454;
}

.discover-empty-secondary {
    border: 1px solid #E2D8E9;
    background: #FFFFFF;
    color: #62586A;
}

.discover-empty-secondary:hover {
    background: #F8F4FA;
}


@media (max-width: 600px) {

    .search-range-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .discover-empty-state {
        margin-top: 6px;
        padding: 44px 18px;
    }

    .discover-empty-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .discover-empty-primary,
    .discover-empty-secondary {
        width: 100%;
    }

}


/* =========================================================
   ZOOJ UX / RESILIENCE V1
========================================================= */

.chat-feedback {
    margin: 0 16px 10px;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.chat-feedback.is-error {
    border: 1px solid #F0CCCC;
    background: #FFF6F6;
    color: #9A3434;
}

.chat-feedback.is-success {
    border: 1px solid #C5E6D1;
    background: #F3FBF6;
    color: #2E6A44;
}

.chat-feedback.is-info {
    border: 1px solid #DFD1EF;
    background: #F9F5FD;
    color: #624579;
}

.notification-unavailable {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    color: #928899;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 600px) {
    .chat-feedback {
        margin: 0 10px 8px;
    }
}


/* =========================================================
   ZOOJ PROFILE SAFETY MENU V1
   Report / Block live inside the member profile only.
========================================================= */

.user-profile-card {
    position: relative;
}

.user-profile-safety-menu {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 30;
}

.user-profile-more-btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(126, 105, 142, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #4B3E54;
    box-shadow: 0 5px 16px rgba(52, 36, 63, 0.10);
    cursor: pointer;
    font: inherit;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.user-profile-more-btn:hover,
.user-profile-more-btn:focus-visible {
    background: #FFFFFF;
    box-shadow: 0 8px 22px rgba(52, 36, 63, 0.15);
    outline: none;
    transform: translateY(-1px);
}

.user-profile-safety-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 205px;
    overflow: hidden;
    border: 1px solid #E8E0ED;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(48, 31, 59, 0.16);
}

.user-profile-safety-menu-panel[hidden] {
    display: none !important;
}

.user-profile-safety-menu-form {
    margin: 0;
}

.user-profile-safety-menu-item {
    display: flex;
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 0;
    background: transparent;
    color: #4B3E54;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
}

.user-profile-safety-menu-item:hover,
.user-profile-safety-menu-item:focus-visible {
    background: #F8F5FA;
    outline: none;
}

.user-profile-safety-menu-form {
    border-top: 1px solid #EFE8F2;
}

.user-profile-safety-menu-block {
    color: #A33B3B;
}

.user-profile-safety-menu-icon {
    display: inline-flex;
    width: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

@media (max-width: 600px) {

    .user-profile-safety-menu {
        top: 10px;
        right: 10px;
    }

    .user-profile-more-btn {
        width: 38px;
        height: 38px;
    }

    .user-profile-safety-menu-panel {
        width: 195px;
    }
}


/* =========================================================
   ZOOJ CONVERSATION ARCHIVE V1
========================================================= */

.messages-archived-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    color: #684D64;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.messages-archived-link:hover,
.messages-archived-link:focus-visible {
    text-decoration: underline;
    outline: none;
}

.conversation-row {
    position: relative;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #F0EAF3;
}

.conversation-row:last-child {
    border-bottom: 0;
}

.conversation-row .conversation-item {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
    padding-right: 58px;
}

.conversation-archive-btn,
.conversation-unarchive-btn {
    position: absolute;
    top: 50%;
    right: 14px;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid rgba(112, 87, 125, 0.16);
    border-radius: 50%;
    background: #FFFFFF;
    color: #684D64;
    cursor: pointer;
    transition:
        background 0.16s ease,
        transform 0.16s ease,
        box-shadow 0.16s ease;
}

.conversation-archive-btn:hover,
.conversation-archive-btn:focus-visible,
.conversation-unarchive-btn:hover,
.conversation-unarchive-btn:focus-visible {
    background: #F8F5FA;
    box-shadow: 0 6px 16px rgba(62, 43, 73, 0.10);
    outline: none;
    transform: translateY(-50%) scale(1.03);
}

.conversation-archive-btn:disabled,
.conversation-unarchive-btn:disabled {
    cursor: wait;
    opacity: 0.55;
}

.conversation-archive-btn svg,
.conversation-unarchive-btn svg,
.chat-archive-btn svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-archive-btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 1px solid rgba(112, 87, 125, 0.16);
    border-radius: 50%;
    background: #FFFFFF;
    color: #684D64;
    cursor: pointer;
    transition:
        background 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.chat-archive-btn:hover,
.chat-archive-btn:focus-visible {
    background: #F8F5FA;
    box-shadow: 0 6px 16px rgba(62, 43, 73, 0.10);
    outline: none;
    transform: translateY(-1px);
}

.chat-archive-btn:disabled {
    cursor: wait;
    opacity: 0.55;
}

@media (max-width: 600px) {

    .conversation-row .conversation-item {
        padding-right: 54px;
    }

    .conversation-archive-btn,
    .conversation-unarchive-btn {
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .chat-archive-btn {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}


/* =========================================================
   ZOOJ LOCATION COUNTRY VERIFICATION V1
========================================================= */

.location-verification-box {
    display: grid;
    gap: 9px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #E8E0ED;
    border-radius: 14px;
    background: #FAF8FB;
}

.verify-location-btn {
    justify-self: start;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: #684D64;
    color: #FFFFFF;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.verify-location-btn:hover,
.verify-location-btn:focus-visible {
    filter: brightness(1.04);
    outline: none;
}

.verify-location-btn:disabled {
    cursor: wait;
    opacity: 0.62;
}

.location-verification-status {
    color: #6E6374;
    font-size: 14px;
    font-weight: 700;
}

.location-verification-status.is-working {
    color: #684D64;
}

.location-verification-status.is-success {
    color: #2D7A4B;
}

.location-verification-status.is-error {
    color: #A33B3B;
}

.location-verification-box small {
    color: #7A6F80;
    line-height: 1.45;
}

.save-profile-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}


/* =========================================================
   ZOOJ USER AGREEMENT + CLICKWRAP V1
========================================================= */

.register-legal-box {
    margin: 18px 0;
    padding: 14px;
    border: 1px solid #DED3E4;
    border-radius: 12px;
    background: #FBF8FC;
}

.register-legal-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.55;
    font-size: 14px;
    cursor: pointer;
}

.register-legal-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.register-legal-check a {
    font-weight: 700;
    text-decoration: underline;
}


.legal-page {
    width: min(100% - 28px, 980px);
    margin: 34px auto 70px;
}

.legal-card {
    padding: clamp(22px, 4vw, 46px);
    border: 1px solid #E5DDE8;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 14px 40px rgba(60, 38, 67, .08);
}

.legal-header {
    padding-bottom: 22px;
    border-bottom: 1px solid #EEE7F0;
}

.legal-header h1 {
    margin: 4px 0 10px;
}

.legal-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    opacity: .65;
}

.legal-important,
.legal-ny-notice,
.legal-final-ack {
    margin: 22px 0;
    padding: 16px 18px;
    border: 1px solid #DCCFE2;
    border-radius: 14px;
    background: #F8F3FA;
    line-height: 1.65;
}

.legal-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 30px;
}

.legal-toc a {
    padding: 7px 10px;
    border: 1px solid #E4D9E8;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
}

.legal-card section {
    scroll-margin-top: 90px;
    margin: 30px 0;
}

.legal-card h2 {
    margin-bottom: 10px;
    font-size: clamp(19px, 2.3vw, 24px);
}

.legal-card h3 {
    margin-top: 0;
}

.legal-card p,
.legal-card li {
    line-height: 1.72;
}

.legal-card ul {
    padding-left: 22px;
}

@media (max-width: 640px) {
    .legal-page {
        width: min(100% - 18px, 980px);
        margin-top: 18px;
    }

    .legal-card {
        padding: 20px 16px;
        border-radius: 15px;
    }

    .register-legal-check {
        font-size: 13px;
    }
}


/* =========================================================
   ZOOJ LEGAL BRANDING V2
   Targeted identity layer for Terms + Safety only.
========================================================= */

.legal-page {
    --zooj-legal-ink: #2d1f32;
    --zooj-legal-muted: #76687b;
    --zooj-legal-line: #eadfee;
    --zooj-legal-soft: #faf6fb;
    --zooj-legal-accent: #6D4D68;
    --zooj-legal-accent-deep: #56365f;
}

.zooj-legal-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 138px;
    margin-bottom: 18px;
    padding: 26px 30px;
    border: 1px solid var(--zooj-legal-line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 10%, rgba(118, 80, 127, .14), transparent 31%),
        radial-gradient(circle at 8% 100%, rgba(118, 80, 127, .10), transparent 32%),
        linear-gradient(135deg, #fff 0%, #fbf7fc 100%);
    box-shadow: 0 16px 42px rgba(67, 44, 73, .09);
}

.zooj-legal-hero::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -86px;
    bottom: -105px;
    border: 28px solid rgba(118, 80, 127, .055);
    border-radius: 50%;
    pointer-events: none;
}

.zooj-legal-brandmark {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: linear-gradient(145deg, var(--zooj-legal-accent), var(--zooj-legal-accent-deep));
    box-shadow: 0 10px 24px rgba(86, 54, 95, .20);
}

.zooj-legal-ring {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 2px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    color: #fff;
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
}

.zooj-legal-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.zooj-legal-brand {
    color: var(--zooj-legal-accent-deep);
    font-size: clamp(25px, 4vw, 36px);
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1;
}

.zooj-legal-tagline {
    color: var(--zooj-legal-muted);
    font-size: 14px;
    font-weight: 600;
}

.zooj-legal-hero-badge {
    position: relative;
    z-index: 1;
    padding: 9px 13px;
    border: 1px solid #dfd1e4;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--zooj-legal-accent-deep);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .10em;
    white-space: nowrap;
}

.legal-card {
    position: relative;
    overflow: hidden;
    color: var(--zooj-legal-ink);
}

.legal-card::before {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin: -4px 0 25px;
    border-radius: 999px;
    background: var(--zooj-legal-accent);
    opacity: .8;
}

.legal-header h1 {
    color: var(--zooj-legal-ink);
    letter-spacing: -.025em;
}

.legal-header p,
.legal-card p,
.legal-card li {
    color: #514557;
}

.legal-kicker {
    color: var(--zooj-legal-accent-deep);
    opacity: 1;
}

.legal-card h2,
.legal-card h3 {
    color: var(--zooj-legal-ink);
}

.legal-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legal-card h2::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 23px;
    border-radius: 999px;
    background: var(--zooj-legal-accent);
    opacity: .72;
}

.legal-card section:not(.legal-final-ack) {
    padding-bottom: 24px;
    border-bottom: 1px solid #f0e9f2;
}

.legal-toc {
    padding: 15px;
    border: 1px solid #eee4f1;
    border-radius: 16px;
    background: #fcf9fd;
}

.legal-toc a {
    background: #fff;
    color: var(--zooj-legal-accent-deep);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.legal-toc a:hover {
    transform: translateY(-1px);
    border-color: #d7c6dd;
    box-shadow: 0 5px 14px rgba(68, 44, 75, .07);
}

.legal-important {
    border-left: 5px solid var(--zooj-legal-accent);
    background: linear-gradient(90deg, #f7f0f9 0%, #fcf9fd 100%);
}

.legal-ny-notice {
    border-left: 5px solid #9a7aa3;
}

.legal-final-ack {
    border: 1px solid #d8c8de;
    background: linear-gradient(135deg, #f8f2fa 0%, #fff 100%);
}

.zooj-legal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 42px;
    padding-top: 22px;
    border-top: 1px solid var(--zooj-legal-line);
    color: var(--zooj-legal-muted);
}

.zooj-legal-footer-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--zooj-legal-accent-deep);
    letter-spacing: .08em;
}

.zooj-legal-footer-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--zooj-legal-accent);
    color: #fff;
    font-weight: 850;
}

.zooj-legal-footer p {
    margin: 0;
    font-size: 13px;
}

@media (max-width: 640px) {
    .zooj-legal-hero {
        grid-template-columns: auto 1fr;
        gap: 13px;
        min-height: 118px;
        padding: 20px 18px;
        border-radius: 18px;
    }

    .zooj-legal-brandmark {
        width: 58px;
        height: 58px;
        border-radius: 18px;
    }

    .zooj-legal-ring {
        width: 38px;
        height: 38px;
        font-size: 21px;
    }

    .zooj-legal-hero-badge {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 2px;
    }

    .zooj-legal-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   ZOOJ SAFETY WARNINGS V1
========================================================= */

.zooj-chat-safety-strip,
.zooj-messages-safety-banner,
.zooj-first-chat-warning,
.zooj-context-warning,
.zooj-emergency-warning {
    border: 1px solid #e4d8e8;
    border-radius: 14px;
    background: #fbf8fc;
    color: #493c4f;
}

.zooj-chat-safety-strip {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 10px 14px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.45;
}

.zooj-chat-safety-strip a,
.zooj-messages-safety-banner a {
    font-weight: 750;
    text-decoration: underline;
}

.zooj-safety-shield {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #efe5f2;
    color: #65456e;
    font-weight: 900;
}

.zooj-messages-safety-banner {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: min(100% - 28px, 880px);
    margin: 14px auto 18px;
    padding: 13px 15px;
    font-size: 13px;
    line-height: 1.5;
}

.zooj-first-chat-warning,
.zooj-context-warning {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 10px 14px;
    padding: 13px 14px;
    box-shadow: 0 8px 22px rgba(70, 45, 77, .07);
}

.zooj-first-chat-warning[hidden],
.zooj-context-warning[hidden],
.zooj-emergency-warning[hidden] {
    display: none !important;
}

.zooj-first-chat-warning strong,
.zooj-context-warning strong,
.zooj-emergency-warning strong {
    color: #573760;
}

.zooj-first-chat-warning p,
.zooj-context-warning p {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
}

.zooj-identity-reminder {
    opacity: .82;
}

.zooj-first-chat-warning button,
.zooj-context-warning button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #d9c9df;
    border-radius: 10px;
    background: #fff;
    color: #573760;
    font-weight: 750;
    cursor: pointer;
}

.zooj-context-warning {
    border-left: 5px solid #7a5683;
}

.zooj-emergency-warning {
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 5px solid #80515c;
    background: #fff8f8;
    line-height: 1.55;
}

.zooj-emergency-warning strong {
    display: block;
    margin-bottom: 3px;
}

.zooj-report-good-faith {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    opacity: .82;
}

.zooj-critical-safety-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.zooj-critical-safety-grid > div {
    padding: 14px;
    border: 1px solid #eadfee;
    border-radius: 14px;
    background: #fcf9fd;
}

.zooj-critical-safety-grid strong,
.zooj-critical-safety-grid span {
    display: block;
}

.zooj-critical-safety-grid strong {
    margin-bottom: 5px;
    color: #56365f;
}

.zooj-critical-safety-grid span {
    font-size: 13px;
    line-height: 1.55;
    color: #5d5062;
}

@media (max-width: 640px) {
    .zooj-first-chat-warning,
    .zooj-context-warning {
        flex-direction: column;
    }

    .zooj-first-chat-warning button,
    .zooj-context-warning button {
        width: 100%;
    }

    .zooj-critical-safety-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   ZOOJ PROFILE BOOST V1 — "ORBIT RISE"
========================================================= */

.zooj-boost-page {
    width: min(100% - 28px, 1040px);
    margin: 0 auto;
    padding: 34px 0 70px;
}

.zooj-boost-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 28px;
    padding: 34px;
    border: 1px solid #e6d9ea;
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 20%, rgba(109, 63, 103, .16), transparent 25%),
        radial-gradient(circle at 90% 10%, rgba(236, 72, 153, .10), transparent 28%),
        linear-gradient(135deg, #fff 0%, #faf5fc 100%);
    box-shadow: 0 18px 50px rgba(65, 38, 72, .10);
}

.zooj-boost-orbit-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 130px;
    height: 130px;
    border-radius: 38px;
    background: linear-gradient(145deg, #643F60, #8a5d94);
    color: #fff;
    box-shadow: 0 18px 36px rgba(86, 54, 95, .25);
}

.zooj-boost-orbit-icon {
    position: relative;
    z-index: 2;
    width: 86px;
    height: 86px;
    filter: drop-shadow(0 5px 8px rgba(39, 18, 46, .22));
}

.zooj-boost-orbit-glow {
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    animation: zoojBoostPulse 2.4s ease-in-out infinite;
}

@keyframes zoojBoostPulse {
    0%,100% { transform: scale(.92); opacity: .45; }
    50% { transform: scale(1.08); opacity: .9; }
}

.zooj-boost-kicker,
.zooj-boost-section-heading > span,
.zooj-boost-plan-tag {
    color: #6D4D68;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
}

.zooj-boost-hero h1 {
    margin: 7px 0 9px;
    color: #302335;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.03;
    letter-spacing: -.035em;
}

.zooj-boost-hero p {
    max-width: 680px;
    margin: 0;
    color: #6d6171;
    font-size: 15px;
    line-height: 1.65;
}

.zooj-boost-system-note,
.zooj-boost-fairness {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #e6d9ea;
    border-radius: 16px;
    background: #fbf8fc;
    color: #55475a;
}

.zooj-boost-system-note strong,
.zooj-boost-system-note span {
    display: block;
}

.zooj-boost-system-note span {
    margin-top: 3px;
    font-size: 13px;
}

.zooj-boost-status-card {
    margin-top: 22px;
    padding: 26px;
    border: 1px solid #e8deeb;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(67, 44, 73, .07);
}

.zooj-boost-status-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.zooj-boost-label {
    display: block;
    color: #766b79;
    font-size: 13px;
    font-weight: 700;
}

.zooj-boost-balance {
    display: block;
    margin-top: 2px;
    color: #392b3e;
    font-size: 42px;
    line-height: 1;
}

.zooj-boost-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f4eaf6;
    color: #6d4776;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
}

.zooj-boost-live-pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px rgba(109,71,118,.11);
}

.zooj-boost-balance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 22px 0;
}

.zooj-boost-balance-grid > div {
    padding: 15px;
    border: 1px solid #eee5f0;
    border-radius: 16px;
    background: #fcfafc;
}

.zooj-boost-balance-grid span,
.zooj-boost-balance-grid small,
.zooj-boost-balance-grid strong {
    display: block;
}

.zooj-boost-balance-grid span {
    color: #776b7a;
    font-size: 12px;
    font-weight: 700;
}

.zooj-boost-balance-grid strong {
    margin: 5px 0 3px;
    color: #503758;
    font-size: 25px;
}

.zooj-boost-balance-grid small {
    color: #8b808e;
}

.zooj-boost-now-btn {
    width: 100%;
    min-height: 62px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(135deg, #603C5B, #7B5575);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 12px 25px rgba(92, 58, 101, .22);
}

.zooj-boost-now-btn:disabled {
    opacity: .46;
    cursor: not-allowed;
    box-shadow: none;
}

.zooj-boost-now-btn > span {
    justify-self: start;
    font-size: 16px;
    font-weight: 850;
}

.zooj-boost-now-btn small {
    opacity: .78;
    font-weight: 700;
}

.zooj-boost-button-icon {
    width: 34px;
    height: 34px;
}

.zooj-boost-profile-note,
.zooj-boost-feedback {
    margin: 0 0 13px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #faf5fb;
    color: #67586c;
    font-size: 13px;
}

.zooj-boost-profile-note a {
    margin-left: 5px;
    font-weight: 800;
}

.zooj-boost-active {
    margin-top: 22px;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8f0fa, #fff);
    text-align: center;
}

.zooj-boost-active strong,
.zooj-boost-active span {
    display: block;
}

.zooj-boost-active span {
    margin-top: 8px;
    color: #7a6d7e;
    font-size: 12px;
}

.zooj-boost-countdown {
    margin-top: 4px;
    color: #5c3d65;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: .04em;
}

.zooj-boost-explainer,
.zooj-boost-packs {
    margin-top: 38px;
}

.zooj-boost-section-heading h2 {
    margin: 6px 0;
    color: #35283a;
    font-size: 28px;
}

.zooj-boost-section-heading p {
    margin: 0;
    color: #766b79;
}

.zooj-boost-premium-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 17px;
}

.zooj-boost-premium-grid article,
.zooj-boost-pack-grid article {
    position: relative;
    padding: 22px;
    border: 1px solid #e8deeb;
    border-radius: 20px;
    background: #fff;
}

.zooj-boost-premium-grid article.featured {
    border-color: #d9c3df;
    background: linear-gradient(145deg, #fff, #faf4fb);
}

.zooj-boost-premium-grid h3,
.zooj-boost-pack-grid h3 {
    margin: 8px 0;
    color: #45304c;
}

.zooj-boost-premium-grid p,
.zooj-boost-pack-grid p {
    color: #756978;
    line-height: 1.58;
}

.zooj-boost-premium-grid article > strong {
    color: #684771;
    font-size: 13px;
    line-height: 1.5;
}

.zooj-boost-pack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 17px;
}

.zooj-boost-pack-grid article {
    text-align: center;
}

.zooj-boost-pack-grid article.popular {
    transform: translateY(-6px);
    border-color: #cfb5d6;
    box-shadow: 0 13px 30px rgba(72, 45, 79, .09);
}

.zooj-boost-pack-icon {
    width: 50px;
    height: 50px;
    color: #6D4D68;
}

.zooj-boost-pack-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 999px;
    background: #6D4D68;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

.zooj-boost-pack-grid button {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dfd2e3;
    border-radius: 12px;
    background: #f7f2f8;
    color: #796d7d;
    font-weight: 800;
}

.zooj-boost-payment-note {
    margin-top: 12px;
    color: #8b808e;
    font-size: 12px;
    text-align: center;
}

.zooj-boost-fairness strong {
    color: #4d3654;
}

.zooj-boost-fairness p {
    margin: 5px 0 0;
    color: #746778;
    font-size: 13px;
    line-height: 1.55;
}

.zooj-subscription-boost-feature {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.zooj-subscription-boost-icon {
    width: 24px;
    height: 24px;
    color: #6D4D68;
    flex: 0 0 auto;
}

.zooj-subscription-boost-note {
    padding-left: 31px !important;
    color: #7a6e7e !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

@media (max-width: 720px) {
    .zooj-boost-page {
        padding-top: 18px;
    }

    .zooj-boost-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 23px 20px;
        text-align: center;
    }

    .zooj-boost-orbit-wrap {
        width: 96px;
        height: 96px;
        margin: 0 auto;
        border-radius: 29px;
    }

    .zooj-boost-orbit-icon {
        width: 65px;
        height: 65px;
    }

    .zooj-boost-balance-grid,
    .zooj-boost-premium-grid,
    .zooj-boost-pack-grid {
        grid-template-columns: 1fr;
    }

    .zooj-boost-pack-grid article.popular {
        transform: none;
    }

    .zooj-boost-now-btn {
        grid-template-columns: 34px 1fr;
    }

    .zooj-boost-now-btn small {
        grid-column: 2;
        justify-self: start;
        margin-top: -7px;
    }
}


/* =========================================================
   ZOOJ THREE PROFILE PHOTOS + SWIPE V1
========================================================= */

.zooj-photo-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f4eff5;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.zooj-photo-track,
.zooj-photo-slide {
    width: 100%;
    height: 100%;
}

.zooj-photo-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.zooj-photo-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.zooj-photo-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zooj-photo-gallery-empty {
    display: grid;
    place-items: center;
}

.zooj-photo-placeholder {
    font-size: 52px;
    opacity: .55;
}

.zooj-photo-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(24, 17, 27, .48);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.zooj-photo-prev {
    left: 10px;
}

.zooj-photo-next {
    right: 10px;
}

.zooj-photo-dots {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 11px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
}

.zooj-photo-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.52);
    box-shadow: 0 1px 5px rgba(0,0,0,.18);
}

.zooj-photo-dot.is-active {
    width: 18px;
    border-radius: 999px;
    background: #fff;
}

.zooj-photo-count {
    position: absolute;
    z-index: 4;
    top: 10px;
    left: 10px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(24,17,27,.50);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.zooj-own-profile-gallery,
.zooj-member-profile-gallery,
.zooj-discover-photo-gallery {
    border-radius: inherit;
}

.profile-photo-container.zooj-profile-photo-gallery-wrap .zooj-photo-gallery,
.user-profile-photo.zooj-user-profile-gallery-wrap .zooj-photo-gallery {
    min-height: inherit;
}

.zooj-three-photo-manager {
    max-width: 880px;
}

.zooj-photo-db-note {
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid #e3d7e7;
    border-radius: 13px;
    background: #faf6fb;
    color: #695a6e;
    font-size: 13px;
    line-height: 1.5;
}

.zooj-photo-slot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0;
}

.zooj-photo-slot {
    padding: 12px;
    border: 1px solid #e7dde9;
    border-radius: 17px;
    background: #fff;
}

.zooj-photo-slot-title {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    color: #4b3a50;
}

.zooj-photo-slot-title strong {
    display: flex;
    align-items: center;
    gap: 7px;
}

.zooj-photo-slot-title span {
    padding: 3px 7px;
    border-radius: 999px;
    background: #f0e6f2;
    color: #6D4D68;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.zooj-photo-slot-preview {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 13px;
    background: #f5f0f6;
}

.zooj-photo-slot-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.zooj-photo-slot-empty {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    color: #8c7c90;
    border: 1px dashed #d8c9dc;
    border-radius: 13px;
}

.zooj-photo-slot-empty span {
    font-size: 36px;
    font-weight: 300;
}

.zooj-photo-slot-upload {
    margin-top: 10px;
}

.zooj-photo-slot-upload label {
    min-height: 40px;
    display: grid;
    place-items: center;
    width: 100%;
    border-radius: 11px;
    background: #6D4D68;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.zooj-photo-slot-upload input[type="file"] {
    display: none;
}

.zooj-photo-slot-delete {
    margin-top: 7px;
}

.zooj-photo-slot-delete button {
    width: 100%;
    min-height: 36px;
    border: 0;
    border-radius: 10px;
    background: #f7f2f8;
    color: #815b89;
    font-weight: 750;
    cursor: pointer;
}

.zooj-photo-manager-note {
    margin: 6px 0 20px;
    color: #827586;
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 720px) {
    .zooj-photo-slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .zooj-photo-slot {
        padding: 6px;
        border-radius: 12px;
    }

    .zooj-photo-slot-title {
        margin-bottom: 6px;
        font-size: 11px;
    }

    .zooj-photo-slot-title span {
        display: none;
    }

    .zooj-photo-slot-preview {
        border-radius: 9px;
    }

    .zooj-photo-slot-upload label {
        min-height: 34px;
        padding: 0 3px;
        font-size: 10px;
        text-align: center;
    }

    .zooj-photo-slot-delete button {
        min-height: 31px;
        font-size: 10px;
    }

    .zooj-photo-arrow {
        width: 31px;
        height: 31px;
        font-size: 24px;
    }
}


/* =========================================================
   ZOOJ FREE LAUNCH MODE V1
========================================================= */

.likes-chat-free-btn {
    display: grid;
    place-items: center;
    text-decoration: none;
    background: #f3eef7;
    color: #684771;
    border: 1px solid #e5d9e8;
}

.zooj-boost-free-week-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    padding: 17px;
    border: 1px solid #e8deeb;
    border-radius: 16px;
    background: linear-gradient(145deg, #fcf8fd, #fff);
}

.zooj-boost-free-week-card .zooj-boost-pack-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
}

.zooj-boost-free-week-card strong,
.zooj-boost-free-week-card span,
.zooj-boost-free-week-card small {
    display: block;
}

.zooj-boost-free-week-card strong {
    color: #4d3654;
    font-size: 16px;
}

.zooj-boost-free-week-card span {
    margin-top: 3px;
    color: #6f6174;
    font-size: 13px;
    font-weight: 700;
}

.zooj-boost-free-week-card small {
    margin-top: 3px;
    color: #918495;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .zooj-boost-free-week-card {
        align-items: flex-start;
    }
}


/* =========================================================
   ZOOJ ENGAGEMENT FINISH V1
========================================================= */
.zooj-message-receipt {
    margin-top: 4px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 1.2;
    color: #95889a;
    text-align: right;
}
.zooj-message-receipt[hidden] { display: none !important; }

.zooj-visitors-page {
    width: min(1080px, calc(100% - 28px));
    margin: 34px auto 90px;
}
.zooj-visitors-header { margin-bottom: 24px; }
.zooj-visitors-kicker {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    color: #8b668f;
}
.zooj-visitors-header h1 { margin: 0; color: #49364e; }
.zooj-visitors-header p { margin: 7px 0 0; color: #837786; }
.zooj-visitors-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.zooj-visitor-card {
    overflow: hidden;
    border: 1px solid #eadfeb;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(72,48,78,.07);
}
.zooj-visitor-photo-link { display: block; text-decoration: none; }
.zooj-visitor-gallery { aspect-ratio: 4 / 5; }
.zooj-visitor-info { padding: 14px; }
.zooj-visitor-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.zooj-visitor-title-row h2 { margin: 0; font-size: 18px; color: #4d3852; }
.zooj-visitor-title-row span,
.zooj-visitor-info p { color: #938797; font-size: 12px; }
.zooj-visitor-info p { margin: 6px 0 0; }
.zooj-visitor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}
.zooj-visitor-actions a {
    display: grid;
    min-height: 40px;
    place-items: center;
    border: 1px solid #e7dce9;
    border-radius: 12px;
    text-decoration: none;
    color: #654d6b;
    font-size: 13px;
    font-weight: 800;
}
.zooj-visitor-actions a.primary {
    border-color: #68465F;
    background: #68465F;
    color: #fff;
}
.zooj-visitors-empty {
    padding: 56px 20px;
    border: 1px dashed #dfd0e2;
    border-radius: 22px;
    text-align: center;
    background: #fdfafd;
}
.zooj-visitors-empty > div { font-size: 48px; }
.zooj-visitors-empty h2 { margin: 12px 0 5px; color: #4d3852; }
.zooj-visitors-empty p { margin: 0 auto 18px; color: #897d8c; }
.zooj-visitors-empty a {
    display: inline-grid;
    min-height: 42px;
    padding: 0 18px;
    place-items: center;
    border-radius: 13px;
    background: #68465F;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
}

.zooj-celebration-pulse {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 2px auto 8px;
}
.zooj-celebration-pulse span {
    display: inline-block;
    color: #7B5575;
    font-size: 30px;
    animation: zoojMatchHeartBeat 1.15s ease-in-out infinite;
}
.zooj-celebration-pulse span:nth-child(2) { font-size: 48px; animation-delay: .12s; }
.zooj-celebration-pulse span:nth-child(3) { animation-delay: .24s; }
@keyframes zoojMatchHeartBeat {
    0%,100% { opacity: .55; transform: scale(.88); }
    45% { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 820px) {
    .zooj-visitors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .zooj-visitors-page {
        width: min(100% - 20px, 520px);
        margin-top: 20px;
        padding-bottom: 76px;
    }
    .zooj-visitors-grid { grid-template-columns: 1fr; gap: 14px; }
    .zooj-visitor-card {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        border-radius: 17px;
    }
    .zooj-visitor-gallery { height: 100%; min-height: 154px; aspect-ratio: auto; }
    .zooj-visitor-actions { grid-template-columns: 1fr; }
    .zooj-message-receipt { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .zooj-celebration-pulse span { animation: none; }
}


/* =========================================================
   ZOOJ CHAT TYPING INDICATOR V1
========================================================= */
.zooj-typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 4px 14px 7px;
    color: #827586;
    font-size: 11px;
    line-height: 1;
}
.zooj-typing-indicator[hidden] { display: none !important; }

.zooj-typing-avatar-wrap {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f1eaf3;
}
.zooj-typing-avatar-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.zooj-typing-avatar-placeholder { font-size: 13px; }

.zooj-typing-bubble {
    min-width: 47px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 11px;
    border-radius: 15px 15px 15px 5px;
    background: #f0ebf2;
}
.zooj-typing-bubble i {
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 50%;
    background: #7B6878;
    animation: zoojTypingDot 1.05s infinite ease-in-out;
}
.zooj-typing-bubble i:nth-child(2) { animation-delay: .14s; }
.zooj-typing-bubble i:nth-child(3) { animation-delay: .28s; }

.zooj-typing-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes zoojTypingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: .42; }
    30% { transform: translateY(-4px); opacity: 1; }
}

@media (max-width: 720px) {
    .zooj-typing-indicator {
        min-height: 35px;
        padding: 3px 10px 6px;
        gap: 7px;
        font-size: 10px;
    }
    .zooj-typing-avatar-wrap {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
    }
    .zooj-typing-bubble {
        min-width: 44px;
        height: 27px;
        padding: 0 10px;
    }
    .zooj-typing-bubble i {
        width: 5.5px;
        height: 5.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zooj-typing-bubble i { animation: none; opacity: .8; }
}

/* DISCOVER DESKTOP PLACEHOLDER FIX */

.discover-page .profile-photo-container {
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.discover-page .zooj-discover-photo-gallery {
    width: 100%;
    height: 320px;
}

.discover-page .zooj-discover-photo-gallery.zooj-photo-gallery-empty {
    display: grid;
    place-items: center;
    background: #f4eff5;
}

.discover-page .zooj-discover-photo-gallery .zooj-photo-placeholder {
    display: block;
    font-size: 70px;
    line-height: 1;
    opacity: .55;
}

@media (max-width: 768px) {
    .discover-page .profile-photo-container,
    .discover-page .zooj-discover-photo-gallery {
        height: 285px;
    }
}

html body nav.navbar.zooj-desktop-navbar.zooj-guest-navbar a.logo.zooj-guest-logo {
    color: #6D3F67 !important;
}


/* =========================================================
   REPORT USER — FINAL RESPONSIVE FIX
   Scoped to .report-page only
========================================================= */

body .report-page {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 80px);
    margin: 0 !important;
    padding: 56px 20px 110px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

body .report-page .report-card {
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    padding: 40px !important;
    background: #FFFFFF !important;
    border: 1px solid #E9E1F0 !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 40px rgba(59, 23, 100, 0.09) !important;
    text-align: center !important;
}

body .report-page .report-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 16px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    background: #F3EAF8 !important;
    font-size: 30px !important;
    line-height: 1 !important;
}

body .report-page .report-card h1 {
    margin: 0 0 10px !important;
    color: #18131F !important;
    font-size: 34px !important;
    line-height: 1.2 !important;
}

body .report-page .report-card > p {
    max-width: 480px !important;
    margin: 0 auto 28px !important;
    color: #756D7D !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

body .report-page .report-form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: left !important;
}

body .report-page .report-form label {
    display: block !important;
    margin: 0 !important;
    color: #5A194F !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

body .report-page .report-form select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 42px 0 14px !important;
    border: 1px solid #DDD5E4 !important;
    border-radius: 12px !important;
    background-color: #FFFFFF !important;
    color: #302936 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    outline: none !important;
}

body .report-page .report-form select:focus {
    border-color: #6D3F67 !important;
    box-shadow: 0 0 0 3px rgba(109, 63, 103, 0.10) !important;
}

body .report-page .zooj-emergency-warning {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #F0D0D7 !important;
    border-left: 5px solid #80515C !important;
    border-radius: 12px !important;
    background: #FFF8F8 !important;
    color: #493C4F !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

body .report-page .zooj-emergency-warning[hidden] {
    display: none !important;
}

body .report-page .zooj-report-good-faith {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #EEE6F1 !important;
    border-radius: 12px !important;
    background: #FAF7FC !important;
    color: #756D7D !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    opacity: 1 !important;
}

body .report-page .error-message {
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 14px 16px !important;
    border: 1px solid #F1C4CC !important;
    border-radius: 12px !important;
    background: #FFF1F3 !important;
    color: #8A2435 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

body .report-page .report-submit-btn,
body .report-page .cancel-report-btn {
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 13px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
}

body .report-page .report-submit-btn {
    border: 1px solid #6D3F67 !important;
    background: #6D3F67 !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
}

body .report-page .report-submit-btn:hover {
    background: #593454 !important;
    border-color: #593454 !important;
}

body .report-page .cancel-report-btn {
    border: 1px solid #DDD5E4 !important;
    background: #FFFFFF !important;
    color: #6D3F67 !important;
}

body .report-page .cancel-report-btn:hover {
    background: #FAF7FC !important;
}

@media (min-width: 901px) {
    body .report-page {
        padding-top: 64px !important;
    }

    body .report-page .report-card {
        padding: 44px 46px 40px !important;
    }
}

@media (max-width: 768px) {
    body .report-page {
        min-height: calc(100vh - 64px) !important;
        padding: 24px 12px 100px !important;
    }

    body .report-page .report-card {
        max-width: none !important;
        padding: 26px 18px 22px !important;
        border-radius: 18px !important;
    }

    body .report-page .report-icon {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 14px !important;
        border-radius: 16px !important;
        font-size: 27px !important;
    }

    body .report-page .report-card h1 {
        font-size: 29px !important;
    }

    body .report-page .report-card > p {
        margin-bottom: 24px !important;
        font-size: 14px !important;
    }

    body .report-page .report-form {
        gap: 14px !important;
    }
}

@media (max-width: 380px) {
    body .report-page {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body .report-page .report-card {
        padding: 22px 14px 20px !important;
    }

    body .report-page .report-card h1 {
        font-size: 26px !important;
    }

    body .report-page .report-form select,
    body .report-page .report-submit-btn,
    body .report-page .cancel-report-btn {
        min-height: 48px !important;
    }
}

/* =========================================================
   ZOOJ CHAT DATE + SWIPE TIME + READ RECEIPT V1
   - Date separator appears once when the conversation day changes.
   - Message date/time stays hidden until the message is swiped.
========================================================= */

.messages-container {
    overflow-x: hidden;
}

.message-row {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible;
}

.message-row.my-message {
    align-items: flex-end;
}

.message-row.their-message {
    align-items: flex-start;
}

.message-bubble {
    position: relative;
    z-index: 2;
    touch-action: pan-y;
    will-change: transform;
    transition: transform 0.18s ease;
}

/* Hidden normally. chat.php changes opacity only while the bubble is swiped. */
.zooj-message-time {
    position: absolute;
    top: 50%;
    z-index: 1;
    max-width: 92px;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    color: #928699;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    transition: opacity 0.12s ease;
}

.my-message .zooj-message-time {
    right: 4px;
    text-align: right;
}

.their-message .zooj-message-time {
    left: 4px;
    text-align: left;
}

/* One separator per conversation day, not one per message. */
.zooj-date-separator {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 16px;
    color: #968B9B;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.zooj-date-separator::before,
.zooj-date-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E8E0ED;
}

.zooj-date-separator span {
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid #E8E0ED;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #827587;
}

.zooj-message-receipt {
    align-self: flex-end;
    margin-top: 4px;
    padding: 0 3px;
    color: #95889A;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
}

.zooj-message-receipt[hidden] {
    display: none !important;
}

@media (max-width: 600px) {
    .zooj-date-separator {
        margin: 17px 0 13px;
        font-size: 9px;
    }

    .zooj-message-time {
        max-width: 80px;
        font-size: 9px;
    }

    .zooj-message-receipt {
        font-size: 9px;
    }
}

/* =========================================================
   ZOOJ CHAT HEADER — COMPACT MOBILE V2
   Profile identity is the primary header action.
========================================================= */

@media (max-width: 600px) {

    .chat-header {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        grid-template-areas:
            "back profile archive"
            ". safety safety";
        column-gap: 9px;
        row-gap: 4px;
        min-height: 0;
        padding: 8px 10px 7px;
    }

    .chat-back-btn {
        grid-area: back;
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        align-self: center;
    }

    .chat-profile-link {
        grid-area: profile;
        min-width: 0;
        gap: 8px;
        overflow: hidden;
    }

    .chat-avatar,
    .chat-avatar-placeholder {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .chat-header-info {
        min-width: 0;
        display: block;
    }

    .chat-header-info h1 {
        margin: 0;
        overflow: hidden;
        font-size: 16px;
        line-height: 1.2;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .chat-connection-label {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        font-size: 9px;
        line-height: 1.2;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .chat-archive-btn {
        grid-area: archive;
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        align-self: center;
        margin-left: 0;
    }

    .zooj-chat-safety-actions {
        grid-area: safety;
        justify-self: end;
        margin: 0;
        gap: 14px;
    }

    .zooj-chat-report-btn,
    .zooj-chat-block-btn {
        min-height: 26px;
        padding: 0;
        font-size: 11px;
    }

    .zooj-chat-action-icon {
        width: 14px;
        font-size: 13px;
    }
}

@media (max-width: 380px) {
    .zooj-chat-safety-actions {
        gap: 10px;
    }

    .zooj-chat-report-btn,
    .zooj-chat-block-btn {
        font-size: 10px;
    }
}

/* =========================================================
   ZOOJ CHAT HEADER — COMPACT ACTION STACK V3
   Report + Block stay inside chat; archive/delete live in Messages.
========================================================= */

.zooj-chat-safety-actions {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
}

.zooj-chat-report-btn,
.zooj-chat-block-btn {
    min-height: 25px;
}

@media (max-width: 600px) {
    .chat-header {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        grid-template-areas: "back profile safety";
        column-gap: 9px;
        row-gap: 0;
        min-height: 0;
        padding: 8px 10px;
    }

    .chat-back-btn {
        grid-area: back;
    }

    .chat-profile-link {
        grid-area: profile;
    }

    .zooj-chat-safety-actions {
        grid-area: safety;
        align-self: center;
        justify-self: end;
        align-items: flex-start;
        gap: 0;
    }

    .zooj-chat-report-btn,
    .zooj-chat-block-btn {
        min-height: 23px;
        font-size: 10.5px;
    }

    .zooj-chat-action-icon {
        width: 13px;
        font-size: 12px;
    }
}


/* =========================================================
   ZOOJ MESSAGES SWIPE ACTIONS V1
   Swipe right => Archive
   Swipe left  => Delete
========================================================= */

.conversation-row {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.conversation-row .conversation-item {
    padding-right: 24px;
}

.zooj-conversation-swipe-surface {
    position: relative;
    z-index: 2;
    width: 100%;
    background: #FFFFFF;
    touch-action: pan-y;
    will-change: transform;
    transition: transform .18s ease;
}

.conversation-row.is-swiping .zooj-conversation-swipe-surface {
    transition: none;
}

.zooj-conversation-swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 88px;
    display: flex;
    align-items: stretch;
}

.zooj-conversation-swipe-archive {
    left: 0;
    background: #6D3F67;
}

.zooj-conversation-swipe-delete {
    right: 0;
    background: #B4234D;
}

.zooj-conversation-swipe-btn {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 5px;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.zooj-conversation-swipe-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zooj-conversation-swipe-btn:disabled {
    opacity: .55;
    cursor: wait;
}

.zooj-delete-conversation-modal-card {
    border-color: #E9DDE5;
}

.zooj-delete-conversation-icon {
    background: #FFF0F3;
}

.zooj-action-modal-actions button.is-danger {
    border-color: #B4234D;
    background: #B4234D;
    color: #FFFFFF;
}

.zooj-action-modal-actions button.is-danger:hover,
.zooj-action-modal-actions button.is-danger:focus-visible {
    background: #941D40;
    outline: none;
}

@media (max-width: 600px) {
    .conversation-row .conversation-item {
        padding-right: 15px;
    }

    .zooj-conversation-swipe-action {
        width: 82px;
    }

    .zooj-conversation-swipe-btn {
        font-size: 10px;
    }

    .zooj-conversation-swipe-btn svg {
        width: 19px;
        height: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zooj-conversation-swipe-surface {
        transition: none;
    }
}

/* =========================================================
   ZOOJ MESSAGES SWIPE — NATURAL MOTION V2
========================================================= */

.zooj-conversation-swipe-surface {
    transform: translate3d(0, 0, 0);
    transition: transform .24s cubic-bezier(.22,.72,.24,1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.conversation-row.is-swiping .zooj-conversation-swipe-surface {
    transition: none !important;
}

.zooj-conversation-swipe-surface img,
.zooj-conversation-swipe-surface a {
    -webkit-user-drag: none;
}

.zooj-conversation-swipe-action {
    width: 92px;
}

.zooj-conversation-swipe-btn {
    transition:
        background .16s ease,
        opacity .16s ease,
        transform .16s ease;
}

.zooj-conversation-swipe-btn:active {
    transform: scale(.96);
}

@media (max-width: 600px) {
    .zooj-conversation-swipe-action {
        width: 92px;
    }
}