/*
 * Dilli Rishtey - shared brand stylesheet.
 * Loaded on every page (public, member, admin) after the Bootstrap 5 CDN
 * stylesheet, so these rules override Bootstrap's defaults.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Nunito:wght@400;600;700&display=swap');

:root {
    --brand-primary: #E0187A;
    --brand-primary-dark: #B8135F;
    --brand-accent: #E8872B;
    --brand-accent-dark: #C46E1E;
    --brand-dark: #2B2B2B;
    --brand-soft-bg: #FDE7EF;
    --brand-heart: #E53935;
    --brand-heart-dark: #C62828;

    --brand-font-heading: 'Playfair Display', Georgia, serif;
    --brand-font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Re-point Bootstrap 5.3's own variables at the brand colours, so
       components that reference var(--bs-primary) etc. directly (nav-pills
       active state, list groups, form validation, ...) pick these up too. */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 224, 24, 122;
    --bs-link-color: var(--brand-primary);
    --bs-link-color-rgb: 224, 24, 122;
    --bs-link-hover-color: var(--brand-primary-dark);
    --bs-link-hover-color-rgb: 184, 19, 95;
    --bs-dark: var(--brand-dark);
    --bs-dark-rgb: 43, 43, 43;
    --bs-danger: var(--brand-heart);
    --bs-danger-rgb: 229, 57, 53;
    /* Bootstrap 5.3.3 hardcodes these two rather than deriving them from
       --bs-primary, so they need pointing at the brand colour explicitly. */
    --bs-progress-bar-bg: var(--brand-primary);
    --bs-dropdown-link-active-bg: var(--brand-primary);

    --member-header-height: 88px;
}

/* -----------------------------------------------------------------------
 * Typography
 * --------------------------------------------------------------------- */

body {
    font-family: var(--brand-font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--brand-font-heading);
    font-weight: 600;
    color: var(--brand-dark);
}

/* -----------------------------------------------------------------------
 * Links
 * --------------------------------------------------------------------- */

a {
    color: var(--brand-primary);
}

a:hover,
a:focus {
    color: var(--brand-primary-dark);
}

/* -----------------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------------- */

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

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: #fff;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.25rem rgba(224, 24, 122, 0.35);
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

/* Warm-red "heart" button, for Send Interest style actions */
.btn-heart {
    background-color: var(--brand-heart);
    border-color: var(--brand-heart);
    color: #fff;
}

.btn-heart:hover,
.btn-heart:focus,
.btn-heart:active {
    background-color: var(--brand-heart-dark);
    border-color: var(--brand-heart-dark);
    color: #fff;
}

.btn-heart:focus,
.btn-heart.focus {
    box-shadow: 0 0 0 0.25rem rgba(229, 57, 53, 0.35);
}

/* -----------------------------------------------------------------------
 * Badges
 * --------------------------------------------------------------------- */

.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--brand-primary) !important;
}

.badge.bg-danger,
.badge.text-bg-danger {
    background-color: var(--brand-heart) !important;
}

.badge.bg-accent,
.badge.text-bg-accent,
.bg-accent {
    background-color: var(--brand-accent) !important;
    color: #fff;
}

.text-accent {
    color: var(--brand-accent) !important;
}

.text-primary {
    color: var(--brand-primary) !important;
}

/* -----------------------------------------------------------------------
 * Info alerts (member area) - blush instead of Bootstrap's default blue
 * --------------------------------------------------------------------- */

.alert-info {
    background-color: var(--brand-soft-bg);
    color: var(--brand-dark);
    border: none;
    border-left: 4px solid var(--brand-primary);
}

/* -----------------------------------------------------------------------
 * Section "Edit" links (own-profile view)
 * --------------------------------------------------------------------- */

.edit-section-link {
    font-size: .8rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.edit-section-link:hover,
.edit-section-link:focus {
    color: var(--brand-primary-dark);
    text-decoration: underline;
}

/* -----------------------------------------------------------------------
 * Progress bars
 * --------------------------------------------------------------------- */

.progress-bar {
    background-color: var(--brand-primary);
}

/* -----------------------------------------------------------------------
 * Dropdown menus (e.g. "My Account")
 * --------------------------------------------------------------------- */

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--brand-soft-bg);
    color: var(--brand-primary-dark);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-primary);
    color: #fff;
}

/* -----------------------------------------------------------------------
 * Form focus states
 * --------------------------------------------------------------------- */

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(224, 24, 122, 0.25);
}

.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(224, 24, 122, 0.25);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* -----------------------------------------------------------------------
 * Charcoal surfaces (header / footer / sidebar)
 * --------------------------------------------------------------------- */

.bg-dark {
    background-color: var(--brand-dark) !important;
}

/* -----------------------------------------------------------------------
 * Soft background utility (sections / cards)
 * --------------------------------------------------------------------- */

.bg-brand-soft {
    background-color: var(--brand-soft-bg) !important;
}

/* -----------------------------------------------------------------------
 * Shared brand logo sizing (used in public + member headers)
 * --------------------------------------------------------------------- */

.brand-logo {
    display: block;
    height: var(--logo-h, 32px);
    width: auto;
}

/* Wrap the logo image to size this box to the logo's own rendered width
   (the image is the only width-determining child), so the tagline below
   can be positioned as a percentage of the LOGO itself - which keeps it
   correctly aligned under the wordmark's letters at any size. --logo-h
   drives both the image and (via the tagline's own font-size formula)
   the tagline together, as one unit. */
.brand-logo-wrap {
    position: relative;
    display: inline-block;
    /* Without this, a flex-column parent with no align-items set (e.g.
       .auth-side-panel) stretches this to the parent's full width by
       flexbox's own default, which would throw off the percentage-based
       tagline alignment below. */
    align-self: flex-start;
    max-width: max-content;
    /* Bootstrap's own .navbar-brand carries ~5px top/bottom padding, which
       (when this class is combined with it, as in the header/topbar) would
       make this box taller than the logo image itself and throw off the
       tagline's percentage-based vertical position below. Zeroed here so
       the wrapper's height always exactly matches the image's. */
    padding: 0;
    --logo-h: 32px;
}

@media (min-width: 768px) {
    .brand-logo-wrap {
        --logo-h: 42px;
    }
}

/* Brand tagline - "Ab Shaadi Huyi Asaan!" shown directly under the logo as
   real text everywhere (never baked into the logo image itself), so it's
   identical site-wide and stays crisp at any size. Centred under the
   wordmark (left:50% + translateX(-50%), independent of box width) in a
   box a little narrower than the logo (90%) - text-align:center then
   centres the text itself within that box too.
   `top` targets the glyph ink's true bottom edge, not the image's own box:
   in the source SVG (viewBox 0 0 718 175) the glyphs run from y=50.4 to
   y=155.3, i.e. 155.3/175 = 88.74% - so the 1px margin-top below can never
   actually touch the strokes. font-size is logo-height x 0.28 (tuned so
   the text reads clearly without wrapping) so the logo and tagline scale
   together as one unit at any size. */
.brand-tagline {
    position: absolute;
    top: 88.8%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    margin-top: 1px;
    font-family: var(--brand-font-body);
    font-size: calc(var(--logo-h) * 0.28);
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}

.brand-tagline-on-dark {
    color: rgba(232, 135, 43, .8);
}

/* Brand pink (--brand-primary, the heart's colour) only measures 3.9:1
   against the soft pink hero/background (#FDE7EF) - below the 4.5:1
   WCAG AA minimum for small text. --brand-primary-dark (already an
   existing token, used elsewhere for hover states) is the same hue,
   darkened, and clears 5.4:1 against that background (6.4:1 on white). */
.brand-tagline-on-light {
    color: var(--brand-primary-dark);
}

/* -----------------------------------------------------------------------
 * Member area: top bar (logo + avatar + name + "My Account" dropdown)
 * --------------------------------------------------------------------- */

.member-topbar {
    background-color: var(--brand-dark);
    min-height: var(--member-header-height);
    padding-top: .5rem;
    padding-bottom: .5rem;
    position: relative;
}

/* Thin brand gradient line along the bottom edge of the header */
.member-topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(to right, var(--brand-primary), var(--brand-accent));
}

.member-topbar .member-account-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}

.member-topbar .member-account-btn:hover,
.member-topbar .member-account-btn:focus {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}

.member-topbar .member-name-text {
    color: #fff;
    font-weight: 600;
}

.member-avatar {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.member-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.member-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-primary);
    color: #fff;
    font-family: var(--brand-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Hamburger toggle, left of the logo, mobile only */
.member-topbar-toggler {
    padding: .25rem .5rem;
    border-color: rgba(255, 255, 255, .35);
}

.member-topbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .2);
}

/* Mobile: the avatar itself is the "My Account" dropdown trigger - no
   separate button chrome, just the circle with a small pink focus/hover ring */
.member-avatar-btn {
    background: transparent;
    border: none;
    padding: 2px;
    border-radius: 50%;
    line-height: 0;
}

.member-avatar-btn::after {
    display: none;
}

.member-avatar-btn:hover,
.member-avatar-btn:focus {
    background: rgba(255, 255, 255, .12);
}

/* Public links at the bottom of the mobile sidebar drawer */
.app-sidebar-divider {
    border: none;
    border-top: 1px solid rgba(43, 43, 43, .08);
    opacity: 1;
}

/* Keep the existing fixed left sidebar clear of the new top bar on desktop */
@media (min-width: 768px) {
    .app-sidebar {
        top: var(--member-header-height) !important;
    }
}

/* -----------------------------------------------------------------------
 * Member area: left sidebar (white theme)
 * --------------------------------------------------------------------- */

.app-sidebar {
    background-color: #fff !important;
    border-right: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 2px 0 8px rgba(0, 0, 0, .04);
}

.app-sidebar .nav-link {
    color: var(--brand-dark) !important;
    border-radius: 50rem !important;
}

.app-sidebar .nav-link .bi {
    color: var(--brand-primary);
    width: 1.1em;
}

.app-sidebar .nav-link:hover {
    background-color: var(--brand-soft-bg) !important;
    color: var(--brand-primary-dark) !important;
}

.app-sidebar .nav-link.active {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

.app-sidebar .nav-link.active .bi {
    color: #fff;
}

/* -----------------------------------------------------------------------
 * Header nav links (public header + member header's Home/About/Contact) -
 * white text, pink on hover, pink underline on the current page.
 * --------------------------------------------------------------------- */

.public-header {
    border-bottom: 3px solid var(--brand-primary);
}

.public-header .nav-link,
.member-topbar-nav .nav-link {
    color: rgba(255, 255, 255, .85);
    text-underline-offset: 6px;
}

.public-header .nav-link:hover,
.public-header .nav-link:focus,
.member-topbar-nav .nav-link:hover,
.member-topbar-nav .nav-link:focus {
    color: var(--brand-primary);
}

.public-header .nav-link.active,
.member-topbar-nav .nav-link.active {
    color: var(--brand-primary);
    text-decoration: underline;
    text-decoration-color: var(--brand-primary);
}

.member-topbar-nav {
    gap: .25rem;
}

/* Pill-shaped header CTAs */
.public-header .btn.rounded-pill {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

/* -----------------------------------------------------------------------
 * Homepage: hero trust ticks
 * --------------------------------------------------------------------- */

.hero-ticks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.hero-ticks span {
    font-size: .85rem;
    color: #555;
}

.hero-ticks i {
    color: var(--brand-primary);
    margin-right: 4px;
}

/* -----------------------------------------------------------------------
 * Homepage: section eyebrow label (small caps label above a heading)
 * --------------------------------------------------------------------- */

.section-eyebrow {
    display: block;
    text-align: center;
    color: var(--brand-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Large faded step number on the "How It Works" cards */
.step-card {
    position: relative;
}

.step-number-large {
    font-family: var(--brand-font-heading);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--brand-dark);
    opacity: .1;
    line-height: 1;
    margin-bottom: 4px;
}

/* -----------------------------------------------------------------------
 * Homepage: launch offer button + closing CTA section
 * --------------------------------------------------------------------- */

.launch-offer-banner .btn-join-free {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    font-size: .85rem;
    padding: 6px 18px;
    margin-top: 10px;
}

.launch-offer-banner .btn-join-free:hover,
.launch-offer-banner .btn-join-free:focus {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

.closing-cta-section {
    background: var(--brand-soft-bg);
    text-align: center;
}

/* -----------------------------------------------------------------------
 * Footer columns
 * --------------------------------------------------------------------- */

.public-footer .footer-col-title {
    color: var(--brand-accent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
}

.public-footer .footer-tagline {
    max-width: 280px;
}

/* "Powered by CodeTaj" credit badge - a self-contained pill (dark green,
   gold border). Two placements share this same pill style:
   - .credit-floating (public pages + member area): fixed, bottom-centre.
   - .app-footer (admin panel only): inline, in-flow at the foot of the page. */
.credit-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    background: #1B4D2E;
    border: 1px solid #E8B84A;
    border-radius: 50rem;
    padding: 3px 12px;
    transition: border-color .15s ease;
}

.credit-link:hover,
.credit-link:focus {
    border-color: #F5D27A;
}

.credit-powered {
    color: #fff;
}

.credit-brand {
    color: #E8B84A;
    font-weight: 700;
}

/* Floating badge (public pages + member area) - fixed to the bottom centre
   of the viewport, always visible without scrolling. Sits above normal
   content but below Bootstrap's dropdown (1000), offcanvas (1045) and
   modal (1055) layers so it never blocks them. */
.credit-floating {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 900;
}

@media (max-width: 575.98px) {
    .credit-floating {
        bottom: 10px;
    }

    .credit-floating .credit-link {
        font-size: .64rem;
        padding: 2px 10px;
    }
}

/* Reserve room at the bottom of any page that has the floating badge, so
   scrolling to the very end never hides content/buttons behind it. */
body:has(.credit-floating) {
    padding-bottom: 64px;
}

@media (max-width: 575.98px) {
    body:has(.credit-floating) {
        padding-bottom: 52px;
    }
}

/* Admin app footer - slim centered line at the bottom of the main content
   area (not floating; unchanged from before). */
.app-footer {
    text-align: center;
    padding: 18px 0 4px;
    margin-top: 32px;
    border-top: 1px solid rgba(43, 43, 43, .06);
}

/* -----------------------------------------------------------------------
 * Auth pages (Login / Signup) - two-column card on desktop
 * --------------------------------------------------------------------- */

.auth-page {
    background: var(--brand-soft-bg);
    padding: 48px 0;
    flex: 1 0 auto;
}

.auth-shell {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(43, 43, 43, .12);
    background: #fff;
}

.auth-side-panel {
    background: linear-gradient(160deg, var(--brand-dark) 0%, #1a1a1a 100%);
    color: #fff;
    padding: 48px 40px;
}

.auth-side-logo {
    --logo-h: 42px;
    margin-bottom: 24px;
}

.auth-side-welcome {
    font-family: var(--brand-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 24px;
    line-height: 1.4;
}

.auth-trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.auth-trust-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 14px;
}

.auth-trust-list li:last-child {
    margin-bottom: 0;
}

.auth-trust-list i {
    color: var(--brand-accent);
    font-size: 1.1rem;
}

.auth-form-col {
    padding: 48px 40px;
}

.auth-mobile-logo {
    --logo-h: 36px;
}

.auth-card h1 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
}

.auth-footer-link {
    text-align: center;
    margin-top: 1.25rem;
    font-size: .9rem;
}

/* Forgot Password success state - green check above the "Check Your
   Email" heading, in place of the form. */
.auth-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e6f4ea;
    color: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 16px;
}

@media (max-width: 991.98px) {
    .auth-form-col {
        padding: 32px 24px;
    }
}

/* Signup only: keep the left panel's content pinned in view while the
   (taller, two-column) form scrolls. Scoped to .auth-side-sticky, which only
   signup.php uses, so the login page's centered panel is untouched. */
@media (min-width: 992px) {
    .auth-side-sticky {
        position: sticky;
        top: 32px;
    }
}

/* -----------------------------------------------------------------------
 * Alerts - heart red for errors
 * --------------------------------------------------------------------- */

.alert-danger {
    background-color: #FDECEA;
    color: var(--brand-heart-dark);
    border: none;
    border-left: 4px solid var(--brand-heart);
}

/* -----------------------------------------------------------------------
 * Profile completion wizard (7 steps + photo upload)
 * --------------------------------------------------------------------- */

.wizard-page-wrap {
    max-width: 820px;
    margin: 40px auto;
    padding: 0 16px;
}

.wizard-card {
    background: #fff;
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(43, 43, 43, .12);
}

@media (max-width: 575.98px) {
    .wizard-card {
        padding: 24px 18px;
    }
}

.wizard-card-heading {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.wizard-card-helper {
    color: #6c757d;
    font-size: .9rem;
    margin-bottom: 24px;
}

/* Desktop / tablet numbered stepper */
.wizard-stepper {
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 8px;
}

.wizard-step {
    flex: 1;
    position: relative;
    text-align: center;
    padding: 0 4px;
}

.wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #e5e5e5;
    z-index: 0;
}

.wizard-step-done:not(:last-child)::after {
    background: var(--brand-primary);
}

.wizard-step-circle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
    background: #fff;
    border: 2px solid #e5e5e5;
    color: #adb5bd;
    margin-bottom: 6px;
}

.wizard-step-done .wizard-step-circle {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.wizard-step-current .wizard-step-circle {
    background: #fff;
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(224, 24, 122, .15);
}

.wizard-step-label {
    display: block;
    font-size: .65rem;
    line-height: 1.2;
    color: #adb5bd;
}

.wizard-step-done .wizard-step-label {
    color: var(--brand-dark);
}

.wizard-step-current .wizard-step-label {
    color: var(--brand-primary);
    font-weight: 700;
}

@media (min-width: 992px) {
    .wizard-step-label {
        font-size: .75rem;
    }
}

/* Mobile compact progress */
.wizard-progress-mobile {
    margin-bottom: 16px;
}

/* Action buttons */
.wizard-actions .btn {
    min-width: 140px;
}

/* Photo upload dropzone */
.photo-dropzone {
    background: var(--brand-soft-bg);
    border: 2px dashed var(--brand-primary);
    border-radius: 16px;
    padding: 28px 20px;
}

.photo-dropzone-avatar {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(43, 43, 43, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.photo-dropzone-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}

.photo-dropzone-placeholder-icon {
    font-size: 2.5rem;
    color: var(--brand-primary);
    opacity: .55;
}

.photo-dropzone-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    border: 2px solid #fff;
    z-index: 2;
}

.photo-dropzone input[type="file"] {
    max-width: 320px;
    margin: 0 auto;
}

/* -----------------------------------------------------------------------
 * Member Dashboard
 * --------------------------------------------------------------------- */

.dashboard-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

.dashboard-card {
    background: #fff;
    border: none;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(43, 43, 43, .1);
}

.dashboard-card .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(43, 43, 43, .08);
    font-weight: 700;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

/* Welcome card */
.welcome-card {
    padding: 28px;
    text-align: center;
}

@media (min-width: 768px) {
    .welcome-card {
        padding: 32px 40px;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 28px;
    }
}

.welcome-photo,
.welcome-photo-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .welcome-photo,
    .welcome-photo-placeholder {
        margin: 0;
    }
}

.welcome-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-soft-bg);
    color: var(--brand-primary);
}

.welcome-card-body {
    flex: 1;
}

.welcome-heading {
    font-size: 1.6rem;
    margin-bottom: 4px;
}

.welcome-helper {
    color: #6c757d;
    font-size: .9rem;
    margin-bottom: 12px;
}

.welcome-progress-wrap {
    max-width: 360px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .welcome-progress-wrap {
        margin: 0;
    }
}

/* Quick actions */
.quick-action-card {
    background: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(43, 43, 43, .08);
    padding: 20px;
    height: 100%;
    text-decoration: none;
    display: block;
    transition: transform .15s ease, box-shadow .15s ease;
}

.quick-action-card:hover,
.quick-action-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(43, 43, 43, .14);
}

.quick-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-soft-bg);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.quick-action-title {
    color: var(--brand-dark);
    font-weight: 700;
    margin-bottom: 2px;
}

.quick-action-text {
    color: #6c757d;
    font-size: .85rem;
    margin-bottom: 0;
}

/* Discover / shortlist / blocked photo circles */
.dashboard-photo-lg,
.dashboard-photo-lg-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
}

.dashboard-photo-lg-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-soft-bg);
    color: var(--brand-primary);
}

.dashboard-photo-sm,
.dashboard-photo-sm-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.dashboard-photo-sm-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-soft-bg);
    color: var(--brand-primary);
}

/* -----------------------------------------------------------------------
 * Signup activity toast ("X Created Profile From Y", bottom-right).
 * Compact on every screen size so it never sits over a page's buttons.
 * --------------------------------------------------------------------- */

.signup-toast {
    position: fixed;
    bottom: 16px;
    right: 16px;
    max-width: 280px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: 8px 26px 8px 10px;
    z-index: 1050;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    font-size: 0.75rem;
}

.signup-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.signup-toast-body {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.signup-toast-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup-toast-avatar svg {
    display: block;
}

.signup-toast-content {
    /* Flex items default to min-width:auto, which lets long names/cities
       force this box (and the fixed-width toast around it) wider than
       max-width instead of wrapping - override it so 280px is a hard cap. */
    min-width: 0;
}

.signup-toast-text {
    line-height: 1.3;
    font-weight: 400;
    overflow-wrap: break-word;
}

.signup-toast-text strong {
    font-weight: 700;
}

.signup-toast-time {
    font-size: 0.68rem;
    margin-top: 2px;
}

.signup-toast-close {
    position: absolute;
    top: 5px;
    right: 8px;
    border: none;
    background: none;
    font-size: 1rem;
    line-height: 1;
    color: #adb5bd;
    cursor: pointer;
    padding: 0;
}

.signup-toast-close:hover {
    color: #495057;
}

@media (max-width: 480px) {
    .signup-toast {
        right: 10px;
        /* Cleared above the floating "Powered by CodeTaj" badge (see
           .credit-floating) so the two never touch on narrow screens. */
        bottom: 54px;
        max-width: 190px;
        padding: 7px 20px 7px 9px;
        font-size: 0.68rem;
    }

    .signup-toast-avatar {
        width: 18px;
        height: 18px;
    }

    .signup-toast-time {
        font-size: 0.62rem;
    }

    .signup-toast-close {
        top: 4px;
        right: 6px;
        font-size: 0.85rem;
    }
}

/* Extra-compact variant: profile wizard's "edit one section from
   /my-profile" flow. Placed after the mobile media query above so it wins
   at every width, including mobile. */
.signup-toast-compact {
    max-width: 240px;
    padding: 6px 20px 6px 8px;
    font-size: 0.68rem;
}

.signup-toast-compact .signup-toast-avatar {
    width: 18px;
    height: 18px;
}

.signup-toast-compact .signup-toast-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.signup-toast-compact .signup-toast-time {
    font-size: 0.6rem;
    margin-top: 1px;
}

.signup-toast-compact .signup-toast-close {
    top: 3px;
    right: 6px;
    font-size: 0.8rem;
}

/* -----------------------------------------------------------------------
 * Wizard "edit from /my-profile" flow: reserve extra space at the bottom
 * so the Save/Update button never ends up under the compact popup above.
 * --------------------------------------------------------------------- */

.wizard-page-wrap--toast-clear {
    padding-bottom: 100px;
}

/* -----------------------------------------------------------------------
 * Admin panel
 * --------------------------------------------------------------------- */

/* Small "Admin" badge next to the logo in the admin header */
.admin-topbar-badge {
    display: inline-block;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 50rem;
    vertical-align: middle;
}

/* Stat cards (dashboard, payments) - icon + big number + label */
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

@media (max-width: 575.98px) {
    .admin-stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 359.98px) {
    .admin-stat-grid {
        grid-template-columns: 1fr;
    }
}

.admin-stat-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(43, 43, 43, .08);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.admin-stat-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-soft-bg);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.admin-stat-text {
    min-width: 0;
}

.admin-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--brand-dark);
    font-family: var(--brand-font-body);
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.15;
}

.admin-stat-label {
    color: #6c757d;
    font-size: .78rem;
    line-height: 1.2;
}

/* Tables - charcoal header row, blush zebra rows, rounded pill action buttons.
   Bootstrap paints an opaque background directly on every <th>/<td> cell
   (.table > :not(caption) > * > *), which sits on top of and hides any
   background-color set only on the ancestor <thead> - so the charcoal fill
   has to be set on the header cells themselves, not just the row/thead. */
.admin-table thead {
    background-color: var(--brand-dark);
}

.admin-table thead th {
    background-color: var(--brand-dark);
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--brand-dark);
    white-space: nowrap;
}

.admin-table tbody tr:nth-child(even) {
    background-color: var(--brand-soft-bg);
}

.table .btn {
    border-radius: 50rem;
}

/* Slightly more rounded, pill-leaning status badges everywhere */
.badge {
    border-radius: 50rem;
}

.badge.bg-warning {
    background-color: var(--brand-accent) !important;
    color: #fff !important;
}

/* Admin login: single centered card (no trust side-panel) */
.admin-login-card {
    max-width: 420px;
    margin: 0 auto;
}

/* Outline/solid warning buttons re-pointed at the brand saffron accent -
   Bootstrap's own --bs-warning is untouched elsewhere (only .badge.bg-warning
   was re-pointed above), so this is scoped to buttons only. */
.btn-outline-warning {
    color: var(--brand-accent);
    border-color: var(--brand-accent);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}

.btn-warning {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--brand-accent-dark);
    border-color: var(--brand-accent-dark);
    color: #fff;
}

/* Admin member view/edit cards - a plain .dashboard-card has none of
   Bootstrap's --bs-card-spacer-x/y custom properties (they only exist on
   .card), so .card-header/.card-body padding silently resolves to 0. Pages
   that need real card content have both classes (.dashboard-card.card) and
   get explicit padding here instead of relying on Bootstrap's defaults. */
.dashboard-card.card .card-header {
    padding: 14px 20px;
}

.dashboard-card.card .card-body {
    padding: 20px;
}

/* Chart.js canvases need a parent with a fixed, non-flex-driven size - with
   maintainAspectRatio:false, an unconstrained Bootstrap flex column (no
   min-width: 0 by default) lets the canvas's own resize-observer feedback
   loop grow it past the card edge instead of shrinking at narrow widths. */
.chart-canvas-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    min-width: 0;
}

/* Member view page - label/value detail rows, stacked on mobile */
.admin-detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
}

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

.admin-detail-label {
    color: #6c757d;
    font-size: .85rem;
}

.admin-detail-value {
    color: var(--brand-dark);
    font-weight: 600;
}

@media (min-width: 576px) {
    .admin-detail-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
}

/* Member edit form - section sub-headings and bottom Save/Cancel bar */
.admin-form-section-title {
    font-family: var(--brand-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--brand-dark);
    margin: 24px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(43, 43, 43, .08);
}

.admin-form-section-title.mt-0 {
    margin-top: 0;
}

.admin-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(43, 43, 43, .08);
}

@media (max-width: 575.98px) {
    .admin-form-actions {
        flex-direction: column-reverse;
    }

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

/* Account Settings - pending/awaiting-verification change request status,
   stacked on its own lines so the badge never overlaps the requested value. */
.account-change-status {
    text-align: right;
}

.account-change-line {
    font-size: .85rem;
    color: #6c757d;
}

.account-change-value {
    color: var(--brand-dark);
    font-weight: 600;
}

.account-change-badge {
    display: inline-block;
    margin-top: 4px;
}

.account-change-actions {
    margin-top: 4px;
}

@media (max-width: 575.98px) {
    .account-change-status {
        text-align: left;
    }
}

/* Admin Settings - toggle rows: label/help text on the left (wraps freely),
   switch pinned to the right. Overrides Bootstrap's default float-based
   .form-switch layout (switch-left/label-right), which otherwise has no
   safeguard against a long label pushing the switch past the card edge. */
.admin-setting-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.admin-setting-text {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-setting-switch {
    flex: 0 0 auto;
    margin-top: 2px;
    padding-left: 0;
    min-height: 0;
}

.admin-setting-switch .form-check-input {
    float: none;
    margin-left: 0;
}

/* Admin sidebar - nav item icon + label as separate flex children, so a
   wrapped long label (e.g. "Content (Religion/Caste)") aligns its second
   line with the text start instead of under the icon. */
.admin-nav-label-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.admin-nav-label-group .bi {
    flex: 0 0 auto;
    margin-top: 2px;
    line-height: 1.3;
}

.admin-nav-label-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

/* Member sidebar - same fix as .admin-nav-label-group above (icon + label
   as separate flex children so a wrapped long label, e.g. "Who Viewed My
   Profile", aligns its second line with the text start instead of under
   the icon). Kept as its own member-scoped class rather than reusing the
   admin one, so the two sidebars stay independently stylable. */
.member-nav-label-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.member-nav-label-group .bi {
    flex: 0 0 auto;
    margin-top: 2px;
    line-height: 1.3;
}

.member-nav-label-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

/* Contact Us - Google's reCAPTCHA v2 checkbox widget renders at a fixed
   304x78px and doesn't reflow on its own. .content-card's 40px padding
   leaves too little room for it below ~420px, so it's scaled down there;
   the wrapper's height is scaled to match so it doesn't leave extra blank
   space below the shrunk widget. */
@media (max-width: 420px) {
    .contact-recaptcha-wrap {
        transform: scale(0.85);
        transform-origin: 0 0;
        width: 258px;
        height: 67px;
    }
}