{% extends 'dating_app/base_dating.html' %}
{% load static %}

{% block title %}Local Dating Partner Profile Preview{% endblock %}

{% block content %}

<section class="dating-public-partner-page">

    <!-- HERO -->
    <section class="partner-preview-hero py-5">
        <div class="container text-center">
            <span class="section-mini-title">Local Dating Partner Portal</span>
            <h1 class="fw-bold mb-3 mt-3">Approved Public Local Dating Partner Profiles</h1>
            <p class="lead mb-0">
                Preview how approved public local dating partner profiles are presented inside the trusted Ensolanka dating partner network.
            </p>
        </div>
    </section>

    <section class="partner-preview-content pb-5">
        <div class="container">

            <!-- Access / CTA Box -->
            <div class="row g-4 mb-4">
                <div class="col-12">
                    <div class="detail-card">
                        <div class="row align-items-center g-3">
                            <div class="col-lg-8">
                                <h5 class="fw-bold mb-2">For Local Dating Partners in Sri Lanka</h5>

                                {% if is_public_limited_preview %}
                                    <p class="text-muted mb-0">
                                        Public visitors can preview approved public local dating partner profiles
                                        in a limited presentation. To better understand how profiles are presented
                                        to international guests and manage your own profile, sign up as a local dating partner.
                                    </p>
                                {% elif is_dating_partner_authenticated and not is_approved_dating_partner %}
                                    <p class="text-muted mb-0">
                                        You are signed in as a local dating partner. Your profile may still be under review.
                                        You can preview approved public profiles and understand how profiles are presented
                                        within the trusted dating partner process.
                                    </p>
                                {% else %}
                                    <p class="text-muted mb-0">
                                        You are viewing this page as an approved local dating partner.
                                        You can preview approved public local dating partner profiles,
                                        understand the profile presentation style,
                                        and manage your own dating profile from your dashboard.
                                    </p>
                                {% endif %}
                            </div>

                            <div class="col-lg-4 text-lg-end">
                                {% if dating_profile %}
                                    <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn dating-btn-dark">
                                        My Dating Dashboard
                                    </a>
                                {% else %}
                                    <a href="{% url 'dating_app:partner_register' %}" class="btn dating-btn-primary">
                                        Become a Local Dating Partner
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Limited Preview Notice -->
            {% if is_public_limited_preview %}
                <div class="row g-4 mb-4">
                    <div class="col-12">
                        <div class="alert dating-alert-warning rounded-4 mb-0">
                            <strong>Limited public preview:</strong>
                            Public visitors can browse approved public local dating partner profiles,
                            but profile presentation is limited. Sign up as a local dating partner
                            to better understand how profiles are shown within the trusted connection process.
                        </div>
                    </div>
                </div>
            {% endif %}

            <!-- Safety Notice -->
            <div class="row g-4 mb-4">
                <div class="col-12">
                    <div class="alert dating-alert-light rounded-4 mb-0">
                        <strong>Trust-focused platform:</strong>
                        Contact details are not exposed at the beginning. Guest interest, mutual interest,
                        confirmation, and dating arrangements are handled step by step to reduce fake profiles,
                        scams, and unsafe communication.
                    </div>
                </div>
            </div>

            <!-- Filter Box -->
            <div class="row g-4 mb-4">
                <div class="col-12">
                    <div class="detail-card">
                        <form method="get">
                            <div class="row g-3 align-items-end">

                                <div class="col-md-6 col-lg-3">
                                    <label class="form-label fw-semibold">Gender</label>
                                    <select name="gender" class="form-select">
                                        <option value="">All Genders</option>
                                        <option value="male" {% if selected_gender == 'male' %}selected{% endif %}>Male</option>
                                        <option value="female" {% if selected_gender == 'female' %}selected{% endif %}>Female</option>
                                        <option value="other" {% if selected_gender == 'other' %}selected{% endif %}>Other</option>
                                    </select>
                                </div>

                                <div class="col-md-6 col-lg-4">
                                    <label class="form-label fw-semibold">Relationship Goal</label>
                                    <select name="goal" class="form-select">
                                        <option value="">All Relationship Goals</option>
                                        <option value="marriage" {% if selected_goal == 'marriage' %}selected{% endif %}>Marriage</option>
                                        <option value="long_term" {% if selected_goal == 'long_term' %}selected{% endif %}>Long Term Relationship</option>
                                        <option value="friendship_first" {% if selected_goal == 'friendship_first' %}selected{% endif %}>Friendship First</option>
                                    </select>
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <label class="form-label fw-semibold">City</label>
                                    <input
                                        type="text"
                                        name="city"
                                        class="form-control"
                                        placeholder="Search by city"
                                        value="{{ selected_city }}"
                                    >
                                </div>

                                <div class="col-md-6 col-lg-2">
                                    <button class="btn dating-btn-dark w-100" type="submit">
                                        Filter
                                    </button>
                                </div>

                                <div class="col-12 d-flex flex-wrap gap-2">
                                    <a href="{% url 'dating_app:public_partner_list' %}" class="btn dating-btn-outline">
                                        Reset Filters
                                    </a>

                                    {% if dating_profile %}
                                        <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn dating-btn-outline-pink ms-md-auto">
                                            Manage My Profile
                                        </a>
                                    {% else %}
                                        <a href="{% url 'dating_app:partner_register' %}" class="btn dating-btn-primary ms-md-auto">
                                            Create My Dating Profile
                                        </a>
                                    {% endif %}
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Summary -->
            <div class="row mb-3">
                <div class="col-12 d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
                    <div>
                        <h5 class="fw-bold mb-1">
                            {% if is_public_limited_preview %}
                                Public Local Dating Partner Profile Preview
                            {% else %}
                                Available Public Local Dating Partner Profiles
                            {% endif %}
                        </h5>

                        {% if total_results > 0 %}
                            <p class="text-muted mb-0">
                                Showing {{ page_obj.start_index }}–{{ page_obj.end_index }} of {{ total_results }} profile{{ total_results|pluralize }}
                            </p>
                        {% else %}
                            <p class="text-muted mb-0">
                                No profiles found for the selected filters.
                            </p>
                        {% endif %}
                    </div>

                    {% if page_obj.paginator.num_pages > 1 %}
                        <div class="text-muted small">
                            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Profiles -->
            <div class="row g-4">
                {% for profile in profiles %}
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100 partner-profile-card">

                            <div class="partner-profile-image-box">
                                {% if profile.profile_photo %}
                                    <img
                                        src="{{ profile.profile_photo.url }}"
                                        class="card-img-top"
                                        alt="{% if show_full_profile_preview %}{{ profile.display_name|default:profile.full_name }}{% else %}Local dating partner profile{% endif %}"
                                    >
                                {% else %}
                                    <img
                                        src="{% static 'expat_life/images/default-profile.jpg' %}"
                                        class="card-img-top"
                                        alt="Profile"
                                    >
                                {% endif %}

                                <div class="partner-profile-badge">
                                    <i class="bi bi-eye-fill me-1"></i> Public
                                </div>
                            </div>

                            <div class="card-body p-4">

                                <div class="mb-2">
                                    {% if show_full_profile_preview %}
                                        <h5 class="fw-bold mb-1">
                                            {{ profile.display_name|default:profile.full_name }}
                                        </h5>
                                    {% else %}
                                        <h5 class="fw-bold mb-1">
                                            Local Partner Profile
                                        </h5>
                                    {% endif %}

                                    <p class="text-muted small mb-0">
                                        {% if profile.age %}
                                            {{ profile.age }} years
                                        {% endif %}

                                        {% if profile.city %}
                                            {% if profile.age %} | {% endif %}{{ profile.city }}
                                        {% endif %}
                                    </p>
                                </div>

                                <hr>

                                <ul class="list-unstyled small mb-3">
                                    {% if profile.gender %}
                                        <li class="mb-2">
                                            <i class="bi bi-person-fill me-2"></i>
                                            {{ profile.get_gender_display }}
                                        </li>
                                    {% endif %}

                                    {% if profile.relationship_goal %}
                                        <li class="mb-2">
                                            <i class="bi bi-heart-fill me-2"></i>
                                            {{ profile.get_relationship_goal_display }}
                                        </li>
                                    {% endif %}

                                    {% if show_full_profile_preview and profile.city %}
                                        <li class="mb-2">
                                            <i class="bi bi-geo-alt-fill me-2"></i>
                                            {{ profile.city }}
                                        </li>
                                    {% endif %}

                                    <li class="mb-2">
                                        <i class="bi bi-shield-check me-2"></i>
                                        Public profile
                                    </li>
                                </ul>

                                {% if show_full_profile_preview %}
                                    {% if profile.short_bio %}
                                        <p class="text-muted small mb-3">
                                            {{ profile.short_bio|truncatechars:120 }}
                                        </p>
                                    {% else %}
                                        <p class="text-muted small mb-3">
                                            Approved public local dating partner profile available inside the trusted partner network.
                                        </p>
                                    {% endif %}
                                {% else %}
                                    <p class="text-muted small mb-3">
                                        Public preview only. Sign up as a local dating partner to better understand
                                        how profiles are presented and how the trusted connection process works.
                                    </p>
                                {% endif %}

                                <div class="dating-card-note small mb-3">
                                    {% if show_full_profile_preview %}
                                        This is a dating-partner-side preview of a public profile.
                                        Contact details are still protected by the platform process.
                                    {% else %}
                                        More detailed preview access is available for signed-up local dating partners.
                                    {% endif %}
                                </div>

                                <div class="d-grid gap-2">
                                    {% if show_full_profile_preview %}
                                        <a href="{% url 'dating_app:public_partner_detail' profile.pk %}" class="btn dating-btn-dark">
                                            View Profile Preview
                                        </a>
                                    {% else %}
                                        <a href="{% url 'dating_app:partner_register' %}" class="btn dating-btn-outline-pink">
                                            Sign Up to View More
                                        </a>
                                    {% endif %}

                                    {% if dating_profile %}
                                        <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn dating-btn-outline">
                                            My Dating Dashboard
                                        </a>
                                    {% endif %}
                                </div>

                            </div>
                        </div>
                    </div>
                {% empty %}
                    <div class="col-12">
                        <div class="detail-card text-center">
                            <div class="empty-profile-icon mb-3">
                                <i class="bi bi-person-hearts"></i>
                            </div>

                            <h5 class="fw-bold mb-2">No profiles found</h5>
                            <p class="text-muted mb-4">
                                No approved public local dating partner profiles match the selected filters.
                            </p>

                            {% if dating_profile %}
                                <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn dating-btn-dark">
                                    Go to My Dating Dashboard
                                </a>
                            {% else %}
                                <a href="{% url 'dating_app:partner_register' %}" class="btn dating-btn-primary">
                                    Become a Local Dating Partner
                                </a>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>

            <!-- Pagination -->
            {% if page_obj.paginator.num_pages > 1 %}
                <div class="row mt-5">
                    <div class="col-12">
                        <nav aria-label="Partner profile pagination">
                            <ul class="pagination justify-content-center flex-wrap gap-1">

                                {% if page_obj.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link rounded-pill px-3"
                                           href="?{% if query_string %}{{ query_string }}&{% endif %}page=1">
                                            First
                                        </a>
                                    </li>

                                    <li class="page-item">
                                        <a class="page-link rounded-pill px-3"
                                           href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.previous_page_number }}">
                                            Previous
                                        </a>
                                    </li>
                                {% endif %}

                                {% for num in page_obj.paginator.page_range %}
                                    {% if num == page_obj.number %}
                                        <li class="page-item active">
                                            <span class="page-link rounded-pill px-3">{{ num }}</span>
                                        </li>
                                    {% elif num >= page_obj.number|add:'-2' and num <= page_obj.number|add:'2' %}
                                        <li class="page-item">
                                            <a class="page-link rounded-pill px-3"
                                               href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ num }}">
                                                {{ num }}
                                            </a>
                                        </li>
                                    {% endif %}
                                {% endfor %}

                                {% if page_obj.has_next %}
                                    <li class="page-item">
                                        <a class="page-link rounded-pill px-3"
                                           href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.next_page_number }}">
                                            Next
                                        </a>
                                    </li>

                                    <li class="page-item">
                                        <a class="page-link rounded-pill px-3"
                                           href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.paginator.num_pages }}">
                                            Last
                                        </a>
                                    </li>
                                {% endif %}

                            </ul>
                        </nav>
                    </div>
                </div>
            {% endif %}

        </div>
    </section>
</section>

<style>
    .dating-public-partner-page {
        --dating-deep: #2a0d1f;
        --dating-deeper: #1b0714;
        --dating-pink: #c2185b;
        --dating-pink-mid: #ff4d88;
        --dating-pink-soft: #fff1f6;
        --dating-gold: #ffc107;
        --dating-muted: #756a77;
        --dating-border: rgba(194, 24, 91, 0.12);
        --dating-shadow: 0 18px 45px rgba(42, 13, 31, 0.10);
        --dating-shadow-strong: 0 26px 70px rgba(42, 13, 31, 0.17);

        background: #fff8fb;
    }

    .dating-public-partner-page .partner-preview-hero {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 8% 18%, rgba(255, 193, 7, 0.18), transparent 30%),
            radial-gradient(circle at 85% 10%, rgba(255, 77, 136, 0.16), transparent 34%),
            linear-gradient(135deg, #2a0d1f 0%, #4b1235 50%, #c2185b 100%);
        color: #fff;
    }

    .dating-public-partner-page .partner-preview-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, rgba(42, 13, 31, 0.92), rgba(42, 13, 31, 0.60)),
            radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.10), transparent 35%);
        z-index: 0;
    }

    .dating-public-partner-page .partner-preview-hero::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -140px;
        top: -120px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.14);
        filter: blur(8px);
        z-index: 0;
    }

    .dating-public-partner-page .partner-preview-hero .container {
        position: relative;
        z-index: 2;
    }

    .dating-public-partner-page .partner-preview-hero h1 {
        color: #fff;
        letter-spacing: -0.035em;
        line-height: 1.05;
        text-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
    }

    .dating-public-partner-page .partner-preview-hero .lead {
        max-width: 850px;
        margin-left: auto;
        margin-right: auto;
        color: rgba(255, 255, 255, 0.82) !important;
    }

    .dating-public-partner-page .section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 7px 15px;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.16);
        color: #9b1b60;
        border: 1px solid rgba(255, 193, 7, 0.30);
        font-size: 0.78rem;
        font-weight: 900;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .dating-public-partner-page .partner-preview-hero .section-mini-title {
        background: rgba(255, 193, 7, 0.18);
        color: var(--dating-gold);
        border-color: rgba(255, 193, 7, 0.36);
        backdrop-filter: blur(10px);
    }

    .dating-public-partner-page .section-mini-title::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dating-gold);
        box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.14);
    }

    .dating-public-partner-page .partner-preview-content {
        position: relative;
        overflow: hidden;
        padding-top: 3rem;
        background:
            radial-gradient(circle at 8% 10%, rgba(255, 193, 7, 0.13), transparent 26%),
            radial-gradient(circle at 92% 15%, rgba(194, 24, 91, 0.10), transparent 30%),
            linear-gradient(180deg, #fff8fb 0%, #f9f2f7 100%);
    }

    .dating-public-partner-page .partner-preview-content::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -170px;
        top: 120px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.12);
        filter: blur(8px);
        z-index: 0;
    }

    .dating-public-partner-page .partner-preview-content::after {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        left: -180px;
        bottom: -180px;
        border-radius: 50%;
        background: rgba(194, 24, 91, 0.10);
        filter: blur(8px);
        z-index: 0;
    }

    .dating-public-partner-page .partner-preview-content .container {
        position: relative;
        z-index: 2;
    }

    .dating-public-partner-page .detail-card {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 92% 16%, rgba(255, 193, 7, 0.12), transparent 32%),
            linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
        border: 1px solid rgba(194, 24, 91, 0.10);
        border-radius: 30px;
        padding: 30px;
        box-shadow: var(--dating-shadow);
    }

    .dating-public-partner-page .detail-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 5px;
        background: linear-gradient(90deg, var(--dating-gold), var(--dating-pink-mid), var(--dating-pink));
    }

    .dating-public-partner-page .detail-card h5,
    .dating-public-partner-page h5 {
        color: var(--dating-deep);
        letter-spacing: -0.015em;
    }

    .dating-public-partner-page .text-muted {
        color: var(--dating-muted) !important;
    }

    .dating-public-partner-page .dating-alert-warning {
        background:
            linear-gradient(135deg, rgba(255, 193, 7, 0.18), rgba(255, 241, 246, 0.96));
        border: 1px solid rgba(255, 193, 7, 0.28);
        color: #5d3c03;
        box-shadow: 0 12px 28px rgba(120, 80, 10, 0.08);
    }

    .dating-public-partner-page .dating-alert-light {
        background:
            linear-gradient(135deg, #fff9fc 0%, #fffdf5 100%);
        border: 1px solid rgba(194, 24, 91, 0.12);
        color: #625564;
        box-shadow: 0 12px 28px rgba(42, 13, 31, 0.06);
    }

    /* Buttons - scoped only to this page */
    .dating-public-partner-page .dating-btn-primary,
    .dating-public-partner-page .dating-btn-dark,
    .dating-public-partner-page .dating-btn-outline,
    .dating-public-partner-page .dating-btn-outline-pink {
        border-radius: 999px;
        font-weight: 800;
        letter-spacing: 0.01em;
        transition: all 0.22s ease;
    }

    .dating-public-partner-page .dating-btn-primary:hover,
    .dating-public-partner-page .dating-btn-dark:hover,
    .dating-public-partner-page .dating-btn-outline:hover,
    .dating-public-partner-page .dating-btn-outline-pink:hover {
        transform: translateY(-2px);
    }

    .dating-public-partner-page .dating-btn-primary {
        background: linear-gradient(135deg, var(--dating-pink-mid), var(--dating-pink));
        border: none;
        color: #fff;
        box-shadow: 0 14px 28px rgba(194, 24, 91, 0.22);
        padding: 0.65rem 1.1rem;
    }

    .dating-public-partner-page .dating-btn-primary:hover {
        background: linear-gradient(135deg, #ff6b9d, #a4144c);
        color: #fff;
    }

    .dating-public-partner-page .dating-btn-dark {
        background: linear-gradient(135deg, var(--dating-deep), #5a153e);
        border: none;
        color: #fff;
        box-shadow: 0 14px 28px rgba(42, 13, 31, 0.24);
        padding: 0.65rem 1.1rem;
    }

    .dating-public-partner-page .dating-btn-dark:hover {
        background: linear-gradient(135deg, var(--dating-deeper), var(--dating-pink));
        color: #fff;
    }

    .dating-public-partner-page .dating-btn-outline,
    .dating-public-partner-page .dating-btn-outline-pink {
        background: #fff;
        padding: 0.65rem 1.1rem;
    }

    .dating-public-partner-page .dating-btn-outline {
        color: var(--dating-deep);
        border: 2px solid rgba(42, 13, 31, 0.18);
    }

    .dating-public-partner-page .dating-btn-outline:hover {
        background: var(--dating-deep);
        color: #fff;
        border-color: var(--dating-deep);
        box-shadow: 0 14px 28px rgba(42, 13, 31, 0.16);
    }

    .dating-public-partner-page .dating-btn-outline-pink {
        color: var(--dating-pink);
        border: 2px solid rgba(194, 24, 91, 0.32);
    }

    .dating-public-partner-page .dating-btn-outline-pink:hover {
        background: var(--dating-pink);
        color: #fff;
        border-color: var(--dating-pink);
        box-shadow: 0 14px 28px rgba(194, 24, 91, 0.18);
    }

    /* Form */
    .dating-public-partner-page .form-label {
        color: var(--dating-deep);
        font-size: 0.88rem;
    }

    .dating-public-partner-page .form-select,
    .dating-public-partner-page .form-control {
        border-radius: 16px;
        border: 1px solid rgba(42, 13, 31, 0.14);
        padding: 0.74rem 0.95rem;
        color: var(--dating-deep);
        background-color: #fff;
        box-shadow: 0 8px 18px rgba(42, 13, 31, 0.035);
    }

    .dating-public-partner-page .form-select:focus,
    .dating-public-partner-page .form-control:focus {
        border-color: rgba(194, 24, 91, 0.55);
        box-shadow: 0 0 0 0.22rem rgba(194, 24, 91, 0.12);
    }

    /* Profile Cards */
    .dating-public-partner-page .partner-profile-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(194, 24, 91, 0.10) !important;
        border-radius: 30px;
        background: linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
        box-shadow: var(--dating-shadow);
        transition: all 0.25s ease;
    }

    .dating-public-partner-page .partner-profile-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--dating-shadow-strong);
    }

    .dating-public-partner-page .partner-profile-image-box {
        position: relative;
        height: 280px;
        overflow: hidden;
        background:
            radial-gradient(circle at 50% 35%, rgba(255, 193, 7, 0.18), transparent 32%),
            linear-gradient(135deg, #fff1f6, #fff);
    }

    .dating-public-partner-page .partner-profile-image-box img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
    }

    .dating-public-partner-page .partner-profile-card:hover .partner-profile-image-box img {
        transform: scale(1.04);
    }

    .dating-public-partner-page .partner-profile-image-box::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 58%, rgba(42, 13, 31, 0.55) 100%);
        pointer-events: none;
    }

    .dating-public-partner-page .partner-profile-badge {
        position: absolute;
        left: 16px;
        bottom: 16px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        padding: 6px 11px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--dating-pink);
        font-size: 0.78rem;
        font-weight: 900;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
    }

    .dating-public-partner-page .partner-profile-card .card-body {
        background: linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
    }

    .dating-public-partner-page .partner-profile-card h5 {
        color: var(--dating-deep);
    }

    .dating-public-partner-page .partner-profile-card hr {
        border-color: rgba(194, 24, 91, 0.13);
        opacity: 1;
    }

    .dating-public-partner-page .partner-profile-card ul li {
        color: #554c58;
        font-weight: 600;
    }

    .dating-public-partner-page .partner-profile-card ul li i {
        color: var(--dating-pink);
    }

    .dating-public-partner-page .dating-card-note {
        border-radius: 18px;
        border: 1px solid rgba(194, 24, 91, 0.12);
        background:
            radial-gradient(circle at 90% 15%, rgba(255, 193, 7, 0.12), transparent 34%),
            linear-gradient(135deg, #fff9fc 0%, #fffdf5 100%);
        color: #625564;
        padding: 14px 15px;
    }

    .dating-public-partner-page .empty-profile-icon {
        width: 82px;
        height: 82px;
        border-radius: 26px;
        margin: 0 auto;
        background: var(--dating-pink-soft);
        color: var(--dating-pink);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.35rem;
        box-shadow: 0 16px 32px rgba(194, 24, 91, 0.10);
    }

    /* Pagination */
    .dating-public-partner-page .pagination {
        --bs-pagination-border-color: rgba(194, 24, 91, 0.16);
        --bs-pagination-color: var(--dating-deep);
        --bs-pagination-hover-color: #fff;
        --bs-pagination-hover-bg: var(--dating-pink);
        --bs-pagination-hover-border-color: var(--dating-pink);
        --bs-pagination-focus-box-shadow: 0 0 0 0.22rem rgba(194, 24, 91, 0.12);
        --bs-pagination-active-bg: var(--dating-pink);
        --bs-pagination-active-border-color: var(--dating-pink);
    }

    .dating-public-partner-page .page-link {
        font-weight: 800;
        background: #fff;
        box-shadow: 0 8px 18px rgba(42, 13, 31, 0.06);
    }

    .dating-public-partner-page .page-item.active .page-link {
        background: linear-gradient(135deg, var(--dating-pink-mid), var(--dating-pink));
        border-color: transparent;
        box-shadow: 0 12px 24px rgba(194, 24, 91, 0.22);
    }

    @media (max-width: 991.98px) {
        .dating-public-partner-page .partner-preview-hero h1 {
            font-size: 2.25rem;
        }

        .dating-public-partner-page .detail-card,
        .dating-public-partner-page .partner-profile-card {
            border-radius: 26px;
        }
    }

    @media (max-width: 767.98px) {
        .dating-public-partner-page .partner-preview-hero h1 {
            font-size: 1.95rem;
        }

        .dating-public-partner-page .detail-card {
            padding: 24px;
        }

        .dating-public-partner-page .partner-preview-content {
            padding-top: 2rem;
        }

        .dating-public-partner-page .partner-profile-image-box,
        .dating-public-partner-page .partner-profile-image-box img {
            height: 260px;
        }
    }

    @media (max-width: 420px) {
        .dating-public-partner-page .detail-card,
        .dating-public-partner-page .partner-profile-card {
            border-radius: 22px;
        }

        .dating-public-partner-page .detail-card {
            padding: 20px;
        }
    }
</style>

{% endblock %}