/* Panchratna Core — site styles (moved from the panchratna-vivah child theme). */

/* Capitalize the first letter of all text displayed on the site. Scoped to
   the actual first letter only (::first-letter), not every word, so
   multi-word phrases don't get Title Cased. Doesn't touch form control
   values (inputs/textareas/selects) — ::first-letter can't target those;
   that half is handled live, as the member types, in assets/js/custom.js. */
body *::first-letter {
    text-transform: uppercase;
}

/* Always reserve space for the vertical scrollbar, so switching to a
   taller section (e.g. the Lifestyle/Kundali profile tabs, whose content
   is tall enough to push the page past the viewport height where the
   other tabs weren't) doesn't add a scrollbar that visibly narrows the
   page's content width. No-op on browsers that don't support the
   property yet. */
/* ==================================================
   Panchratna Admin frontend dashboard ([panchratna_dashboard])
   Built on Bootstrap (already loaded sitewide). Light, airy SaaS-admin
   layout — full-height white sidebar, white topbar with search, light
   gray canvas, white rounded cards. Uses only the site's own established
   brand colors (maroon #5c0919 / coral #ff6d59, same as pv-btn-maroon
   and the focus-state color used everywhere else in this theme) —
   deliberately no separate blue/purple palette for the dashboard.
   ================================================== */
.pv-dash {
    --pv-dash-accent: #5c0919;
    --pv-dash-accent-dark: #420510;
    --pv-dash-accent-soft: color-mix(in srgb, #5c0919 9%, #fff);
    --pv-dash-coral: #ff6d59;
    --pv-dash-coral-soft: color-mix(in srgb, #ff6d59 12%, #fff);
    --pv-dash-ink: #1f2430;
    --pv-dash-muted: #8a8f9c;
    --pv-dash-border: #ebedf1;
    --pv-dash-canvas: #f6f7fb;
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
    background: var(--pv-dash-canvas);
    color: var(--pv-dash-ink);
    font-size: 0.93rem;
}

.pv-dash *,
.pv-dash *::before,
.pv-dash *::after {
    box-sizing: border-box;
}

.pv-dash-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.pv-dash-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex: 0 0 248px;
    height: 100vh;
    flex-direction: column;
    border-right: 1px solid var(--pv-dash-border);
    background: #fff;
}

/* height (not min-height) matches .pv-dash-header's own box height
   exactly, so the sidebar/header divider lines stay aligned regardless of
   which one's content is naturally taller (the header's bell/avatar chip
   is taller than this row's own content, so min-height alone left this
   row shorter — a fixed height clamps both to the same number instead). */
.pv-dash-brand {
    display: flex;
    box-sizing: border-box;
    height: 68px;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--pv-dash-border);
}

ul.nav.nav-tabs.pv-dash-tabs {
    margin: 20px 0;
}

.pv-dash-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--pv-dash-accent);
    color: #fff;
    font-size: 0.95rem;
}

.pv-dash-brand-logo {
    flex: 0 0 auto;
    max-width: 90px;
    height: 28px;
    width: auto;
    object-fit: contain;
}

.pv-dash-brand-name {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pv-dash-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 22px 10px;
    list-style: none;
    overflow-y: auto;
}

.pv-dash-nav-item {
    margin: 0;
}

/* !important on color: Astra's global link color rule also targets
   plain <a> tags with !important, so a plain override here loses to it. */
.pv-dash-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 10px;
    color: var(--pv-dash-muted) !important;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.pv-dash-nav-link i {
    width: 16px;
    color: var(--pv-dash-muted);
    text-align: center;
    font-size: 0.85rem;
    transition: color 0.15s ease;
}

.pv-dash-nav-link:hover {
    background: var(--pv-dash-canvas);
    color: var(--pv-dash-ink) !important;
}

.pv-dash-nav-link.active {
    background: var(--pv-dash-accent-soft);
    color: var(--pv-dash-accent-dark) !important;
}

.pv-dash-nav-link.active i {
    color: var(--pv-dash-accent);
}

.pv-dash-sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--pv-dash-border);
    color: var(--pv-dash-muted);
    font-size: 0.72rem;
}

/* ---------- Topbar + content column ---------- */
.pv-dash-content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
}

.pv-dash-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    box-sizing: border-box;
    height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px clamp(16px, 2.5vw, 32px);
    border-bottom: 1px solid var(--pv-dash-border);
    background: #fff;
}

.pv-dash-header-right {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
}

.pv-dash-header-right-full {
    margin-left: auto;
}

.pv-dash-header-bell {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--pv-dash-canvas);
    color: var(--pv-dash-ink);
    font-size: 0.9rem;
}

.pv-dash-header-bell:hover {
    background: var(--pv-dash-accent-soft);
    color: var(--pv-dash-accent-dark);
}

.pv-dash-header-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--pv-dash-coral);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

.pv-dash-header-user {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 6px;
    border: none;
    border-radius: 999px;
    background: var(--pv-dash-canvas);
    color: var(--pv-dash-ink);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.pv-dash-header-user:hover,
.pv-dash-header-user[aria-expanded="true"] {
    background: var(--pv-dash-accent-soft);
}

.pv-dash-header-user-caret {
    color: var(--pv-dash-muted);
    font-size: 0.62rem;
}

.pv-dash-header-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pv-dash-accent);
    color: #fff;
    font-size: 0.78rem;
}

.pv-dash-header-user-menu {
    min-width: 170px;
    margin-top: 10px !important;
    padding: 6px;
    border: 1px solid var(--pv-dash-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.1);
}

.pv-dash-header-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--pv-dash-ink);
    font-size: 0.85rem;
    font-weight: 600;
}

.pv-dash-header-user-menu .dropdown-item i {
    width: 14px;
    color: var(--pv-dash-muted);
    text-align: center;
}

.pv-dash-header-user-menu .dropdown-item:hover,
.pv-dash-header-user-menu .dropdown-item:focus {
    background: var(--pv-dash-coral-soft);
    color: var(--pv-dash-coral);
}

.pv-dash-header-user-menu .dropdown-item:hover i,
.pv-dash-header-user-menu .dropdown-item:focus i {
    color: var(--pv-dash-coral);
}

.pv-dash-main {
    flex: 1 1 auto;
    padding: 24px clamp(16px, 2.5vw, 32px) 48px;
}

/* ---------- Page header ---------- */
/* !important on display/padding/background: Bootstrap's own .breadcrumb
   sets these with equal selector specificity and loads after style.css
   (see functions.php), so a plain override here was losing to Bootstrap's
   flex/zero-padding/transparent defaults — the pill stretched full width
   with no padding instead of wrapping its content. */
.pv-dash-breadcrumb {
    display: inline-flex !important;
    align-items: center;
    margin-bottom: 16px;
    padding: 7px 14px !important;
    border: 1px solid var(--pv-dash-border);
    border-radius: 999px;
    background: #fff;
    font-size: 0.78rem;
}

.pv-dash-breadcrumb .breadcrumb-item+.breadcrumb-item {
    padding-left: 8px;
}

.pv-dash-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    padding-right: 8px;
    color: var(--pv-dash-border);
    content: "/";
}

.pv-dash-breadcrumb .breadcrumb-item,
.pv-dash-breadcrumb .breadcrumb-item a {
    color: var(--pv-dash-muted);
    font-weight: 500;
}

.pv-dash-breadcrumb .breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.pv-dash-breadcrumb .breadcrumb-item a:hover {
    color: var(--pv-dash-accent);
}

.pv-dash-breadcrumb .breadcrumb-item a i {
    font-size: 0.72rem;
}

.pv-dash-breadcrumb .breadcrumb-item.active {
    color: var(--pv-dash-ink);
    font-weight: 700;
}

.pv-dash-page-header {
    margin-bottom: 26px;
    padding-bottom: 0;
    border-bottom: none;
}

.pv-dash-title {
    margin: 0;
    color: var(--pv-dash-ink);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.pv-dash-page-subtitle {
    margin: 4px 0 0;
    color: var(--pv-dash-muted);
    font-size: 0.86rem;
}

.pv-dash-subheading {
    margin: 26px 0 12px;
    padding-bottom: 0;
    border-bottom: none;
    color: var(--pv-dash-ink);
    font-size: 1rem;
    font-weight: 700;
}

/* ---------- Stat cards ---------- */
.pv-dash-stat-card {
    border: 1px solid var(--pv-dash-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.pv-dash-stat-card--highlight {
    border-color: var(--pv-dash-coral);
    border-left: 4px solid var(--pv-dash-coral);
    background: var(--pv-dash-coral-soft);
}

.pv-dash-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.pv-dash-stat-label {
    color: var(--pv-dash-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.pv-dash-stat-icon {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 0.82rem;
}

.pv-dash-stat-icon--blue,
.pv-dash-stat-icon--purple {
    background: var(--pv-dash-accent-soft);
    color: var(--pv-dash-accent);
}

.pv-dash-stat-icon--green,
.pv-dash-stat-icon--amber,
.pv-dash-stat-icon--revenue {
    background: var(--pv-dash-coral-soft);
    color: var(--pv-dash-coral);
}

.pv-dash-stat-value {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.1;
}

.pv-dash-stat-sublabel {
    margin-top: 6px;
    color: var(--pv-dash-muted);
    font-size: 0.74rem;
}

.pv-dash-stats-compact {
    margin-bottom: 24px;
}

/* ---------- Overview panels: alerts + caste breakdown chart ---------- */
.pv-dash-panel {
    border: 1px solid var(--pv-dash-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.pv-dash-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.pv-dash-panel-title {
    margin: 0;
    color: var(--pv-dash-ink);
    font-size: 0.98rem;
    font-weight: 700;
}

.pv-dash-panel-link {
    color: var(--pv-dash-accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.pv-dash-panel-link:hover {
    color: var(--pv-dash-accent-dark);
    text-decoration: underline;
}

.pv-dash-alert-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-dash-alert-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--pv-dash-border);
    border-radius: 10px;
    background: var(--pv-dash-canvas);
}

.pv-dash-alert-badge {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.pv-dash-alert-badge--high {
    background: #fdeeec;
    color: #b42318;
}

.pv-dash-alert-badge--medium {
    background: #fef3e4;
    color: #b25e09;
}

.pv-dash-alert-badge--low {
    background: var(--pv-dash-accent-soft);
    color: var(--pv-dash-accent-dark);
}

.pv-dash-alert-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--pv-dash-ink);
    font-size: 0.85rem;
}

.pv-dash-alert-view {
    flex: 0 0 auto;
    color: var(--pv-dash-accent);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.pv-dash-alert-view:hover {
    color: var(--pv-dash-accent-dark);
    text-decoration: underline;
}

.pv-dash-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pv-dash-bar-row {
    display: grid;
    grid-template-columns: 90px 1fr 40px;
    align-items: center;
    gap: 10px;
}

.pv-dash-bar-label {
    overflow: hidden;
    color: var(--pv-dash-ink);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pv-dash-bar-track {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: var(--pv-dash-canvas);
    overflow: hidden;
}

.pv-dash-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--pv-dash-accent);
}

.pv-dash-bar-value {
    color: var(--pv-dash-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
}

/* ---------- Filters, tabs, tables ---------- */
.pv-dash-filter-bar {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid var(--pv-dash-border);
    border-radius: 12px;
    background: #fff;
}

/* Reports tab's multi-field filter form — labelled grid instead of the
   single-row search-bar layout the other tabs use. */
.pv-dash-filter-bar-grid .form-label {
    margin-bottom: 4px;
    color: var(--pv-dash-muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.pv-dash-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.pv-dash-tabs {
    margin-bottom: 18px;
    border-bottom: none !important;
    gap: 6px;
}

/* !important throughout: Bootstrap's own .nav-tabs .nav-link is a
   "folder tab" style (partial border-radius, -1px margin-bottom to
   overlap the pane border below it) with equal selector specificity to
   this rule, and it loads after style.css (see functions.php) — a plain
   override here was losing to it, producing pointed notches instead of
   clean pills. */
.pv-dash-tabs .nav-link {
    margin-bottom: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    padding: 7px 16px;
    background: #fff !important;
    color: var(--pv-dash-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.pv-dash-tabs .nav-link.active {
    border-color: var(--pv-dash-border) !important;
    background: var(--pv-dash-accent-soft) !important;
    color: var(--pv-dash-accent-dark);
}

.pv-dash-table-wrap {
    overflow: hidden;
    border: 1px solid var(--pv-dash-border);
    border-radius: 14px;
    background: #fff;
}

.pv-dash-table thead {
    background: #fafbfc;
}

.pv-dash-table th {
    padding: 14px 18px;
    color: var(--pv-dash-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--pv-dash-border);
}

.pv-dash-table td {
    padding: 15px 18px;
    border-top: 1px solid var(--pv-dash-border);
    vertical-align: middle;
    font-size: 0.86rem;
    line-height: 1.4;
}

.pv-dash-table tbody tr:nth-child(even) {
    background: #fcfcfd;
}

.pv-dash-table tbody tr:hover {
    background: var(--pv-dash-accent-soft);
}

.pv-dash-actions {
    white-space: nowrap;
}

.pv-dash-id-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--pv-dash-canvas);
    color: var(--pv-dash-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.pv-dash-subtext {
    margin-top: 2px;
    color: var(--pv-dash-muted);
    font-size: 0.74rem;
}

.pv-dash-note {
    color: var(--pv-dash-muted);
    font-size: 0.82rem;
    border-top: 1px solid var(--pv-dash-border);
}

.pv-dash-alert {
    border-radius: 12px;
}

.pv-dash-link {
    display: inline-block;
    margin-right: 8px;
    padding: 5px 13px;
    border: 1px solid var(--pv-dash-border);
    border-radius: 999px;
    background: #fff;
    color: var(--pv-dash-ink);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.pv-dash-link:hover {
    border-color: var(--pv-dash-accent);
    color: var(--pv-dash-accent-dark);
}

.pv-dash-link-solid {
    border-color: var(--pv-dash-accent);
    background: var(--pv-dash-accent);
    color: #fff;
    font-weight: 700;
}

.pv-dash-link-solid:hover {
    border-color: var(--pv-dash-accent-dark);
    background: var(--pv-dash-accent-dark);
    color: #fff;
}

.pv-dash-link-danger {
    border-color: #fbd5d0;
    background: #fdeeec;
    color: #b42318;
}

.pv-dash-link-danger:hover {
    border-color: #b42318;
    background: #b42318;
    color: #fff;
}

.pv-dash-order-status {
    max-width: 170px;
    border-radius: 8px;
}

.pv-dash-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

/* margin: 0 !important — Bootstrap's own .page-item:not(:first-child)
   .page-link rule sets a -1px margin-left (to collapse/overlap borders
   between buttons) with higher specificity than a plain override here,
   which made every button except the first sit closer together than the
   gap before it. Spacing instead comes entirely from the flex gap above,
   so it's uniform between every pair including the first. */
.pv-dash-pagination .page-link {
    border: 1px solid var(--pv-dash-border);
    border-radius: 9px !important;
    margin: 0 !important;
    color: var(--pv-dash-ink);
    font-size: 0.82rem;
}

.pv-dash-pagination .page-item.active .page-link {
    border-color: var(--pv-dash-accent);
    background: var(--pv-dash-accent);
}

.pv-dash-pagination .page-item.disabled .page-link {
    border-color: transparent;
    color: var(--pv-dash-muted);
    background: transparent;
    box-shadow: none;
}

.pv-dash-page-ellipsis .page-link {
    padding-left: 6px;
    padding-right: 6px;
}

.pv-dash-page-arrow .page-link {
    font-weight: 700;
}

/* Bootstrap primary/focus colors, scoped to the dashboard only. */
.pv-dash .btn.pv-dash-btn-primary {
    border-color: var(--pv-dash-accent);
    border-radius: 9px;
    background: var(--pv-dash-accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

.pv-dash .btn.pv-dash-btn-primary:hover {
    border-color: var(--pv-dash-accent-dark);
    background: var(--pv-dash-accent-dark);
    color: #fff;
}

.pv-dash .form-control,
.pv-dash .form-select {
    border-color: var(--pv-dash-border);
    border-radius: 9px;
    font-size: 0.86rem;
}

.pv-dash .form-control:focus,
.pv-dash .form-select:focus {
    border-color: var(--pv-dash-accent);
    box-shadow: 0 0 0 0.2rem rgba(92, 9, 25, 0.14);
}

.pv-dash .badge {
    font-weight: 600;
}

/* ---------- "Edit Account" popup: membership/order info panel ---------- */
.pv-dash-modal-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.pv-dash-modal-info-col {
    padding: 16px;
    border: 1px solid var(--pv-dash-border);
    border-radius: 12px;
    background: var(--pv-dash-canvas);
}

.pv-dash-modal-info-col h6 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--pv-dash-ink);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pv-dash-modal-info-icon {
    display: flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--pv-dash-accent-soft);
    color: var(--pv-dash-accent);
    font-size: 0.7rem;
}

.pv-dash-modal-info-col dl {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

.pv-dash-modal-info-col dl>div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.pv-dash-modal-info-col dt {
    color: var(--pv-dash-muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.pv-dash-modal-info-col dd {
    margin: 0;
    color: var(--pv-dash-ink);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
}

.pv-dash-modal-info-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
    padding: 10px 0;
    color: var(--pv-dash-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
}

.pv-dash-modal-info-empty i {
    font-size: 1.1rem;
    opacity: 0.6;
}

.pv-dash-modal-info-col.is-empty dl {
    display: none;
}

.pv-dash-modal-info-col.is-empty .pv-dash-modal-info-empty {
    display: flex;
}

@media (max-width: 575.98px) {
    .pv-dash-modal-info {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .pv-dash-shell {
        flex-direction: column;
    }

    .pv-dash-sidebar {
        position: static;
        height: auto;
        flex: 1 1 auto;
    }

    .pv-dash-nav {
        flex-direction: row;
        flex-wrap: wrap;
        overflow-y: visible;
    }

    .pv-dash-nav-link {
        flex: 1 1 auto;
        justify-content: center;
    }

    .pv-dash-sidebar-footer {
        display: none;
    }

    .pv-dash-header-username {
        display: none;
    }
}

/* ---------- Parcel Addresses tab ---------- */
.pv-dash-parcel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.pv-dash-parcel-block {
    padding: 16px;
    border: 1px solid var(--pv-dash-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.pv-dash-parcel-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--pv-dash-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.pv-dash-parcel-block h3 {
    margin: 0 0 8px;
    color: var(--pv-dash-ink);
    font-size: 1.05rem;
    font-weight: 700;
}

.pv-dash-parcel-address {
    min-height: 40px;
    margin: 0 0 10px;
    color: var(--pv-dash-ink);
    font-size: 0.85rem;
    line-height: 1.45;
}

.pv-dash-parcel-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 8px;
    color: var(--pv-dash-ink);
    font-size: 0.8rem;
}

.pv-dash-parcel-email {
    color: var(--pv-dash-muted);
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

@media print {

    .pv-dash-sidebar,
    .pv-dash-header,
    .pv-dash-breadcrumb,
    .pv-dash-page-header,
    .pv-dash-no-print {
        display: none !important;
    }

    .pv-dash-parcel-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pv-dash-parcel-block {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* ---------- Company Branches tab ---------- */
.pv-dash-branch-image {
    height: 150px;
    margin: -1px -1px 0;
    border-radius: 14px 14px 0 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.pv-dash-branch-name {
    margin: 0;
    color: var(--pv-dash-ink);
    font-size: 1.05rem;
    font-weight: 700;
}

html {
    scrollbar-gutter: stable;
}

/* Site-wide input focus color. !important is needed here because
   style.css is enqueued before bootstrap-css (see functions.php), so
   Bootstrap's own .form-control:focus/.form-select:focus rules would
   otherwise win on source order despite equal specificity. */
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-style: solid !important;
    border-color: #ff6d59 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 109, 89, 0.15) !important;
}

/* Password show/hide toggle, added to every password field site-wide by
   assets/js/custom.js (including the User Registration & Membership
   plugin's own forms, whose markup we don't control). */
.pv-password-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.pv-password-wrap input {
    width: 100%;
    padding-right: 42px !important;
}

.pv-password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #6b7280;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.pv-password-toggle:hover,
.pv-password-toggle:focus {
    color: #ff6d59;
}

/* Shared profile card, used everywhere a profile is listed (View All
   Records' own .pv-card markup, duplicated here so the same classes and
   look are available to every profile-listing shortcode too: wishlist,
   recently viewed, contact access, reverse activity). */
.pv-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #f3ddd0;
    border-radius: 16px;
    overflow: hidden;
    background: #fffdfa;
    box-shadow: 0 12px 26px rgba(95, 28, 2, 0.09);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 28px rgba(95, 28, 2, 0.14);
}

.pv-card-image-wrap {
    position: relative;
    height: 400px;
    background: #f5ebdf;
}

.pv-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #c98a63;
    font-size: 4rem;
}

.pv-card-id {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 10px;
    background: rgba(45, 16, 2, 0.85);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.pv-card-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    width: 40px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: #f2765a;
    box-shadow: 0 6px 14px rgba(242, 118, 90, 0.45);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.pv-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.pv-card-name {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    color: #5f1c02;
}

.pv-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pv-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    color: #7d2e12;
    background: #fbe8dc;
    border: 1px solid #f5d3be;
}

.pv-card-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #6c412d;
}

.pv-card-row strong {
    color: #4f250f;
}

.pv-card-hobbies {
    margin: 0;
    font-size: 13px;
    color: #7a523e;
    line-height: 1.4;
}

.pv-card-link {
    margin-top: auto;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #b64f25;
    color: #b64f25;
    background: #fff;
}

.pv-card-link:hover {
    background: #b64f25;
    color: #fff;
}

/* Recently viewed profile cards ([recently_viewed_profiles]) */
.pv-recently-viewed-profiles {
    margin: 32px 0;
}

.pv-recently-viewed-title {
    color: var(--ast-global-color-1);
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
    font-weight: 800;
}

.pv-recently-viewed-count {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--ast-global-color-0);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.pv-recently-viewed-empty {
    color: #64748b;
}

.pv-recently-viewed-note {
    flex-wrap: wrap;
    color: #64748b;
    font-size: 0.95rem;
}

.pv-recently-viewed-upgrade {
    flex: 0 0 auto;
}

/* Wishlist (shortlisted) profile cards ([wishlist_profiles]) */
.pv-wishlist-profiles {
    margin: 32px 0;
}

.pv-wishlist-empty {
    color: #64748b;
}

/* Shortlist/wishlist toggle button on the profile header (not the card's
   own .pv-card-remove-btn, which keeps its coral styling regardless). */
.pv-wishlist-toggle-btn.active {
    background: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: #fff;
}

/* Company branches ([company_branches]) */
.pv-company-branches {
    margin: 32px 0;
}

.pv-branch-card {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ast-global-color-1) 14%, #fff);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ast-global-color-1) 12%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pv-branch-card:hover {
    box-shadow: 0 12px 26px color-mix(in srgb, var(--ast-global-color-1) 20%, transparent);
    transform: translateY(-4px);
}

.pv-branch-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ast-global-color-0);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pv-branch-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.pv-branch-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-branch-body {
    padding: 20px 22px;
}

.pv-branch-name {
    margin-bottom: 10px;
    color: var(--ast-global-color-1);
    font-size: 1.1rem;
    font-weight: 700;
}

.pv-branch-address,
.pv-branch-contact,
.pv-branch-hours {
    margin-bottom: 8px;
    font-size: 0.88rem;
}

.pv-branch-map-link {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    color: var(--ast-global-color-0);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.pv-branch-map-link:hover {
    text-decoration: underline;
}

.pv-branches-empty {
    color: #64748b;
}

/* ==================================================
   Membership plan pricing cards  ([membership_plans])
   ================================================== */
.pv-plans {
    max-width: 1120px;
    margin: 56px auto;
    padding: 0 16px;
    color: #1e293b;
}

.pv-plans__heading {
    margin: 0 auto 40px;
    text-align: center;
}

.pv-plans__heading h2 {
    display: inline-block;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 3px solid #2f80b8;
    color: #2f80b8;
    font-size: clamp(22px, 3.4vw, 32px);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pv-plans__heading p {
    margin: 14px 0 0;
    color: #667085;
    font-size: 15px;
}

.pv-plans__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    align-items: start;
}

/* --- card shell --- */
.pv-plan {
    --pv-plan-accent: #4361ee;
    --pv-plan-accent-dark: color-mix(in srgb, var(--pv-plan-accent) 82%, #000);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e6e8ec;
    border-radius: 6px;
    background: #ffffff;
}

.pv-plan__bar {
    display: block;
    height: 12px;
    background: var(--pv-plan-accent);
}

.pv-plan__name {
    margin: 0;
    padding: 20px 16px;
    border-bottom: 1px solid #eef0f3;
    color: var(--pv-plan-accent);
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- price block with the downward notch --- */
.pv-plan__price-box {
    position: relative;
    padding: 26px 16px 36px;
    background: var(--pv-plan-accent);
    color: #ffffff;
    text-align: center;
    min-height: 180px;
}

.pv-plan__price-box::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #ffffff;
}

.pv-plan__from {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.95;
}

.pv-plan__price {
    display: block;
    font-size: 2.7rem;
    font-weight: 800;
    line-height: 1;
}

.pv-plan__price .woocommerce-Price-amount,
.pv-plan__price .amount {
    color: #ffffff;
}

.pv-plan__price del {
    display: block;
    margin-bottom: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    opacity: 0.6;
}

.pv-plan__price ins {
    text-decoration: none;
}

.pv-plan__price-note {
    display: block;
    margin-top: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* --- features --- */
.pv-plan__features {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-plan__feature {
    padding: 16px 18px;
    border-bottom: 1px solid #eef0f3;
    color: #344054;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.pv-plan__feature:first-child {
    padding-top: 24px;
}

.pv-plan__feature.is-excluded {
    color: #667085;
    text-decoration: line-through;
}

/* --- call to action --- */
.pv-plan__cta-row {
    padding: 22px 16px 26px;
    text-align: center;
}

.pv-plan__cta.btn {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--pv-plan-accent);
    --bs-btn-border-color: var(--pv-plan-accent);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--pv-plan-accent-dark);
    --bs-btn-hover-border-color: var(--pv-plan-accent-dark);
    --bs-btn-active-bg: var(--pv-plan-accent-dark);
    --bs-btn-active-border-color: var(--pv-plan-accent-dark);
    padding: 10px 26px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
}

/* --- featured plan is raised and emphasised --- */
.pv-plan--featured {
    border-color: var(--pv-plan-accent);
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.16);
}

@media (min-width: 992px) {
    .pv-plan--featured {
        margin-top: -16px;
        margin-bottom: -16px;
    }

    .pv-plan--featured .pv-plan__price-box {
        padding-top: 34px;
        padding-bottom: 44px;
    }

    .pv-plan--featured .pv-plan__cta-row {
        padding-bottom: 34px;
    }
}

.pv-plans__empty {
    max-width: 1120px;
    margin: 40px auto;
    padding: 0 16px;
    color: #64748b;
    text-align: center;
}

a,
a:focus,
a:hover,
a:visited {
    text-decoration: none !important;
}

#user-registration-form-314 {
    width: 100% !important;
    max-width: 100% !important;
}

form.register {
    display: grid;
    grid-template-columns: 50% 50%;
}

div[data-row-id="3"] {
    grid-column: 1/ -1;
}

.ur-form-row {
    padding: 15px;
    margin: 10px;
    border: 1px solid #f8f1f1;
    border-radius: 10px;
}

.title-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    /* padding: 0 10px; */
    padding-bottom: 10px;
    margin: 0 0px 20px 10px;
    border-bottom: 1px solid #f8f1f1;
    width: 100%;
}

h3.ur-form-row-title {
    margin: 0;
}

.title-wrapper i {
    width: 40px;
    background: #ff6c5930;
    border-radius: 50%;
    color: #ff6d59;
    font-size: 18px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

h3.ur-form-row-title {
    margin: 0;
}

.ur-frontend-form .ur-form-row {
    flex-wrap: wrap;
}

h3.ur-form-row-title {
    font-size: 18px;
    text-transform: uppercase;
    color: #000000;
}

div#gender_field ul {
    display: flex;
    gap: 20px;
}

.ur-button-container {
    margin: 0 auto;
    grid-column: 1 / -1;
}

button.btn.button.ur-submit-button.submit {
    width: 220px !important;
    background: #ff6d59 !important;
    border: none !important;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    background: #f5f5f5;
    border-radius: 0 0 10px 10px;
}

.user-frontend-form {
    width: 100%;
    /* margin: 50px auto; */
}

.form-header {
    background: #fff;
    /* border-radius: 10px 10px 0 0; */
}

/* ==================================================
   Step progress — a connected stepper on desktop,
   collapsing to a compact label + progress bar on
   small screens (see the mobile block further down).
   ================================================== */
.progress-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 24px 30px 18px;
}

.step-heading {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 6px;
    text-align: center;
    color: #9aa0a6;
    cursor: pointer;
}

/* Connector line running behind each circle, joining it to the previous one */
.step-heading:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 19px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
}

.step-heading i {
    position: relative;
    z-index: 1;
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e5e7eb;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b0b5ba;
    font-size: 15px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.step-heading span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.3;
    max-width: 110px;
}

.step-heading.active,
.step-heading:has(~ .step-heading.active) {
    color: #ff6d59;
}

.step-heading.active i,
.step-heading:has(~ .step-heading.active) i {
    background: #ff6d59;
    border-color: #ff6d59;
    color: #fff;
}

.step-heading.active i {
    box-shadow: 0 0 0 4px #ff6d5926;
}

.step-heading.active::before,
.step-heading:has(~ .step-heading.active)::before {
    background: #ff6d59;
}

/* Compact mobile stand-in — hidden on desktop, shown below the mobile
   breakpoint in place of the full icon row (see style.css's mobile block). */
.pv-step-counter {
    display: none;
}

a.next-btn,
a.prev-btn {
    background: #ff6d59;
    border-radius: 50%;
    padding: 10px;
    width: 50px;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    color: #fff;
    font-size: 22px;
}

a.next-btn span,
a.prev-btn span {
    display: none;
    padding: 0 5px;
    font-size: 14px;
}

a.next-btn:hover span,
a.prev-btn:hover span {
    display: block;
}

a.next-btn:hover,
a.prev-btn:hover {
    width: 100px;
    border-radius: 15px;
}

.prev-btn-wrapper {
    display: flex;
    justify-content: flex-start;
    min-width: 150px;
}

.next-btn-wrapper {
    display: flex;
    justify-content: flex-end;
    min-width: 150px;
}


.form-body {
    padding: 50px;
    min-height: 70vh;
    background: #f9fafb;
}

.user-details-container {
    width: auto;
    margin: 0px auto;
    padding: 50px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #f3f4f6;
}

/* Profile Pictures Styles */
.profile-picture {
    width: 250px;
    height: 350px;
    background: #f9fafb;
    border: 2px dashed #efe7eb;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.profile-picture:hover,
.profile-picture.active {
    border-color: #ff6d59b8;
    background-color: #ff6d591c;
}

.profile-picture:hover i {
    font-size: 40px;
    color: #ff6d59;
}

.profile-picture i {
    font-size: 40px;
    display: none;
}

.media-menu-item {
    color: gray;
}

.has-image i {
    display: none;
}

.has-image:hover i {
    display: block;
}

.profile-picture-wrapper.extra-pictures {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 50px;
    justify-content: space-between;
}

.remove-image {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    background: #ff4d4f;
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    z-index: 9;
}

/* User registration styles */
.user-frontend-form .column-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.user-frontend-form .inner-section {
    padding: 40px 20px 20px 20px;
    border-radius: 10px;
    border: 1px solid #f8f1f1;
}

section.inner-section h4 {
    margin-top: -52px;
    padding: 0 5px;
    margin-left: -5px;
    background: #ffffff;
    font-size: 20px;
    color: #ff6d59;
    width: fit-content;
}

.required {
    color: red;
    margin-left: 2px;
}

.mt-20 {
    margin-top: 20px;
}

.inner-content {
    padding: 20px 0px;
}

.inner-content label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

.column-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.column-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

input[type=time] {
    height: 40px;
    width: 100%;
}

input[type="time"] {
    font-size: 16px;
    width: 100%;
    padding: 12px 16px;
    color: var(--ast-form-input-text, #475569);
    border: 1px solid var(--ast-border-color);
    border-radius: 4px;
    background: var(--ast-comment-inputs-background);
    box-shadow: none;
    box-sizing: border-box;
    transition: all .2s linear;
}

.inner-section:not(:first-child) {
    margin-top: 50px;
}

.pk-astrology-text-center {
    display: none;
}

.hobbies-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hobbies-interests label {
    font-weight: 400;
    margin: 0;
}

.profile-filters-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
}

.profile-filters-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.profile-filters-card__header h3 {
    margin: 0;
    font-size: 20px;
    color: #111827;
}

.profile-filters-card__header a {
    color: #ff6d59;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.profile-filter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-filter-form input,
.profile-filter-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #374151;
}

.profile-filter-form input:focus,
.profile-filter-form select:focus {
    border-color: #ff6d59;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 109, 89, 0.15);
}

.profile-filter-submit {
    border: none;
    background: #ff6d59;
    color: #fff;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.view-records-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
}

.view-records-topbar h2 {
    margin: 0 0 4px 0;
    font-size: 24px;
    color: #111827;
}

.view-records-topbar p {
    margin: 0;
    color: #6b7280;
}

.view-records-badge {
    background: #ff6c5930;
    color: #ff6d59;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.view-records-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.profile-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.profile-card__image {
    height: 220px;
    background: #f9fafb;
}

.profile-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    font-size: 1rem;
}

.profile-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.profile-card__top h5 {
    margin: 0;
    font-size: 18px;
    color: #111827;
}

.profile-card__top span {
    display: inline-block;
    background: #ff6c5930;
    color: #ff6d59;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.profile-card__meta {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.profile-card__details {
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: #374151;
}

.profile-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #ff6d59;
    color: #ff6d59;
    background: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.profile-card__link:hover {
    background: #ff6d59;
    color: #fff;
}

/* ==================================================
   View all records / match listing styles
   ================================================== */
.profile-filters-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
}

.profile-filters-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.profile-filters-card__header h3 {
    margin: 0;
    font-size: 20px;
    color: #111827;
}

.profile-filters-card__header a {
    color: #ff6d59;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.profile-filter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-filter-form input,
.profile-filter-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #374151;
}

.profile-filter-form input:focus,
.profile-filter-form select:focus {
    border-color: #ff6d59;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 109, 89, 0.15);
}

.profile-filter-submit {
    border: none;
    background: #ff6d59;
    color: #fff;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.view-records-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
}

.view-records-topbar h2 {
    margin: 0 0 4px 0;
    font-size: 24px;
    color: #111827;
}

.view-records-topbar p {
    margin: 0;
    color: #6b7280;
}

.view-records-badge {
    background: #ff6c5930;
    color: #ff6d59;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.view-records-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.profile-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.profile-card__image {
    height: 350px;
    background: #f9fafb;
}

.profile-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    font-size: 1rem;
}

.profile-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.profile-card__top h5 {
    margin: 0;
    font-size: 18px;
    color: #111827;
}

.profile-card__top span {
    display: inline-block;
    background: #ff6c5930;
    color: #ff6d59;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.profile-card__meta {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.profile-card__details {
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: #374151;
}

.profile-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #ff6d59;
    color: #ff6d59;
    background: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.profile-card__link:hover {
    background: #ff6d59;
    color: #fff;
}

/* Responsive styles */
@media only screen and (max-width: 768px) {
    form.register {
        grid-template-columns: 100%;
    }

    .user-registration.ur-frontend-form {
        padding: 10px !important;
        margin: 10px 0;
    }

    .ur-frontend-form .ur-form-row .ur-form-grid {
        padding: 0 !important;
    }

    .title-wrapper {
        margin: 0 0px 20px 0px;
    }

    .profile-filters-card {
        position: static;
        top: auto;
    }

    .view-records-grid {
        grid-template-columns: 1fr;
    }

    .ur-form-row {
        margin-bottom: 15px !important;
    }

    .ur-frontend-form .ur-form-row .ur-form-grid {
        margin-bottom: 10px !important;
    }

    h3.ur-form-row-title {
        font-size: 16px;
    }

    /* User-details responsive styles */
    .form-header {
        padding: 20px 20px 16px;
    }

    /* The full connected-circle stepper doesn't have room for 6 steps on a
       phone screen — swap it for a compact "Step X of Y" label + slim
       progress bar instead (kept in sync by showStep() in custom.js). */
    .progress-wrapper {
        display: none;
    }

    .pv-step-counter {
        display: block;
    }

    .pv-step-counter-label {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #2d2d2d;
        margin-bottom: 4px;
    }

    .pv-step-counter-count {
        display: block;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #ff6d59;
        margin-bottom: 10px;
    }

    .pv-step-progress-track {
        width: 100%;
        height: 6px;
        border-radius: 999px;
        background: #f0e2da;
        overflow: hidden;
    }

    .pv-step-progress-fill {
        height: 100%;
        width: 0%;
        border-radius: 999px;
        background: #ff6d59;
        transition: width 0.25s ease;
    }

    .form-body,
    .user-details-container {
        padding: 40px 20px;
        width: 100%;
    }

    .profile-picture-wrapper.extra-pictures {
        gap: 20px;
        grid-template-columns: repeat(8, auto);
        overflow-y: scroll;
        padding: 20px 0;
    }

    .form-footer {
        padding: 20px 20px;
    }

    .prev-btn-wrapper,
    .next-btn-wrapper {
        min-width: auto;
    }

    .user-frontend-form .inner-section {
        padding: 0;
        border: none;
    }

    section.inner-section h4 {
        margin-top: 0;
        padding: 0;
        margin-left: 0;
        background: none;
    }

    .user-frontend-form .column-2,
    .user-frontend-form .column-4,
    .user-frontend-form .column-3 {
        grid-template-columns: 100%;
        gap: 0;
    }

    .user-frontend-form .form-group {
        margin-bottom: 20px;
    }

    .inner-section:not(:first-child) {
        margin-top: 0;
    }

    .column-4,
    .column-3 {
        margin-bottom: 0;
    }
}

.ast-builder-layout-element.site-header-focus-item.ast-header-button-4 {
    display: flex;
    margin-right: 10px;
}

.profile-menu .menu-link {
    gap: 5px;
}

.profile-menu .menu-item-membership-plan {
    margin: 8px 12px 10px;
    padding: 0;
}

.profile-menu .pv-membership-menu-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, #c59b3a 35%, #fff);
    border-radius: 10px;
    background: linear-gradient(135deg, #fffaf0, #f8edcf);
    color: #5c0919;
    line-height: 1.25;
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.profile-menu .pv-membership-menu-card:hover {
    border-color: #c59b3a;
    box-shadow: 0 2px 10px rgba(197, 155, 58, 0.35);
}

.profile-menu .pv-membership-menu-arrow {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.7rem;
    color: #c59b3a;
}

.profile-menu .pv-membership-menu-icon {
    display: inline-flex;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #c59b3a;
    color: #fff;
    font-size: 0.8rem;
}

.profile-menu .pv-membership-menu-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.profile-menu .pv-membership-menu-label {
    color: #8b6a22;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.profile-menu .pv-membership-menu-plan {
    overflow: hidden;
    color: #5c0919;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .profile-menu .pv-membership-menu-card {
        min-width: 0;
    }
}

/* ==================================================
   Professional multi-select ( .pv-multiselect )
   ================================================== */
.pv-ms-native {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pv-ms {
    position: relative;
    width: 100%;
}

.pv-ms__control {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 7px 40px 7px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pv-ms__control:focus {
    border-color: #ff6d59;
    box-shadow: 0 0 0 3px rgba(255, 109, 89, 0.15);
    outline: none;
}

.pv-ms__control.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.pv-ms__values {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.pv-ms__placeholder {
    color: #9ca3af;
    font-size: 14px;
}

.pv-ms__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: rgba(255, 109, 89, 0.12);
    color: #b23b2b;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

.pv-ms__chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(178, 59, 43, 0.18);
    color: #b23b2b;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.pv-ms__chip-x:hover {
    background: #b23b2b;
    color: #fff;
}

.pv-ms__caret {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.15s ease;
    pointer-events: none;
}

.pv-ms.is-open .pv-ms__caret {
    transform: translateY(-35%) rotate(225deg);
}

.pv-ms__panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

.pv-ms__search {
    width: 100%;
    height: 38px;
    margin-bottom: 6px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
}

.pv-ms__search:focus {
    border-color: #ff6d59;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 109, 89, 0.15);
}

.pv-ms__list {
    max-height: 240px;
    overflow-y: auto;
}

.pv-ms__option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 10px;
    border-radius: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    cursor: pointer;
}

.pv-ms__option:hover {
    background: #f8fafc;
}

.pv-ms__option input {
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
    accent-color: #ff6d59;
    flex-shrink: 0;
}

.pv-ms__option:has(input:checked) {
    background: rgba(255, 109, 89, 0.08);
    color: #b23b2b;
    font-weight: 600;
}

/* ---------- Generate Kundali step (Prokerala API result) ---------- */
.pv-kundli-help {
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 0.85rem;
}

.pv-kundli-help-error {
    color: #dc3545;
    font-weight: 600;
}

.pv-kundli-autocomplete-wrap {
    position: relative;
}

.pv-kundli-autocomplete-list {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 6px;
    list-style: none;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
    max-height: 260px;
    overflow-y: auto;
}

.pv-kundli-autocomplete-item {
    padding: 9px 12px;
    border-radius: 7px;
    color: #1f2430;
    font-size: 0.88rem;
    cursor: pointer;
}

.pv-kundli-autocomplete-item:hover {
    background: #fff3ef;
    color: #ff6d59;
}

.pv-kundli-result {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.pv-kundli-section {
    padding: 16px;
    border: 1px solid #ebedf1;
    border-radius: 12px;
    background: #fafbfc;
}

.pv-kundli-section h5 {
    margin: 0 0 10px;
    color: #5c0919;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: capitalize;
}

.pv-kundli-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-kundli-list .pv-kundli-list {
    margin: 6px 0 6px 14px;
    padding-left: 10px;
    border-left: 2px solid #ebedf1;
}

.pv-kundli-list>li {
    margin-bottom: 6px;
    color: #1f2430;
    font-size: 0.85rem;
    line-height: 1.5;
}

.pv-kundli-list>li strong {
    color: #374151;
}

/* ---------- User Registration plugin form: radio field focus/accent ---------- */
/* Scoped to .user-registration (every UR plugin form on the site, not just
   the Gender field) since there was no branded styling for radio inputs
   anywhere — they were falling back to the browser's plain default blue
   fill/focus ring, clashing with the site's coral/maroon palette. */
.user-registration input[type="radio"] {
    accent-color: #ff6d59;
}

.user-registration input[type="radio"]:focus-visible {
    outline: 2px solid #ff6d59;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(255, 109, 89, 0.22);
}

/* "Profile created by" field (registration form, row data-row-id="6") —
   full width instead of the plugin's own narrower default. Also covers a
   Select2-style wrapper (data-allow_clear="true" on this field usually
   means the plugin enhances it with one) since that renders its own box
   with its own width, independent of the underlying <select>. */
.ur-form-row[data-row-id="6"] .ur-form-grid,
#profile_created_by_field,
#profile_created_by_field .ur-field-item,
#profile_created_by {
    width: 100% !important;
}

#profile_created_by_field .select2,
#profile_created_by_field .select2-container,
#profile_created_by_field .select2-selection {
    width: 100% !important;
}