/* ==========================================================================
   XoXO Club - Premium black & gold theme
   --------------------------------------------------------------------------
   Loaded after the vendor stylesheet and after each page's inline <style>,
   so it is the last word on colour, surface and motion.
   ========================================================================== */

:root {
    /* Surfaces */
    --xo-black:      #08080A;
    --xo-bg:         #0C0C10;
    --xo-surface:    #15151B;
    --xo-surface-2:  #1D1D25;
    --xo-surface-3:  #26262F;

    /* Gold */
    --xo-gold:       #D4AF37;
    --xo-gold-light: #F2D272;
    --xo-gold-pale:  #FCF6BA;
    --xo-gold-deep:  #A67C00;
    --xo-gold-grad:  linear-gradient(135deg, #A67C00 0%, #D4AF37 22%, #FCF6BA 48%, #D4AF37 74%, #A67C00 100%);
    --xo-gold-soft:  rgba(212, 175, 55, 0.12);
    --xo-gold-line:  rgba(212, 175, 55, 0.22);

    /* Type */
    --xo-text:       #F5F5F7;
    --xo-muted:      #9B9BA6;
    --xo-dim:        #6B6B76;

    /* Depth */
    --xo-shadow-sm:  0 2px 10px rgba(0, 0, 0, 0.5);
    --xo-shadow:     0 10px 30px rgba(0, 0, 0, 0.6);
    --xo-shadow-gold:0 8px 28px rgba(212, 175, 55, 0.22);

    --xo-radius:     18px;
    --xo-ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */

html,
body,
body.bg-white,
body.header-large,
.page-wrapper,
.page-content {
    background: var(--xo-bg) !important;
    color: var(--xo-text);
}

body {
    -webkit-font-smoothing: antialiased;
}

/* A faint gold aura at the top of every screen. */
.page-wrapper::before {
    content: '';
    position: fixed;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
    width: 460px;
    height: 320px;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.14) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.page-content {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6,
.title, .name {
    color: var(--xo-text) !important;
}

p, span, li, label, small, .about, .text {
    color: var(--xo-muted);
}

a {
    color: var(--xo-gold);
}

a:hover,
a:focus {
    color: var(--xo-gold-light);
}

hr {
    border-color: var(--xo-gold-line);
}

::selection {
    background: rgba(212, 175, 55, 0.3);
    color: #fff;
}

/* ---------- Header ---------- */

.header,
.header.header-fixed,
header.header {
    background: rgba(10, 10, 13, 0.82) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--xo-gold-line) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.header .header-logo img,
.header-logo img {
    max-height: 42px;
    width: auto;
    filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.4));
}

.header svg,
.menu-toggler svg,
.back-btn svg {
    color: var(--xo-gold);
    stroke: var(--xo-gold);
}

.header .flaticon,
.filter-icon .flaticon {
    color: var(--xo-gold) !important;
}

/* ---------- Sidebar ---------- */

.sidebar,
.sidebar .inner-sidebar {
    background: linear-gradient(180deg, #101014 0%, #08080A 100%) !important;
    border-right: 1px solid var(--xo-gold-line);
}

.sidebar .author-box {
    border-bottom: 1px solid var(--xo-gold-line);
}

.sidebar .author-box .dz-media img {
    border: 2px solid var(--xo-gold);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.35);
}

.sidebar .nav-link {
    color: var(--xo-muted) !important;
    border-radius: 12px;
    transition: background 0.25s var(--xo-ease), color 0.25s var(--xo-ease);
}

.sidebar .nav-link .dz-icon svg {
    stroke: currentColor;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: var(--xo-gold-soft) !important;
    color: var(--xo-gold) !important;
}

.sidebar .app-info .name {
    background: var(--xo-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.dark-overlay {
    background: rgba(0, 0, 0, 0.72);
}

/* ---------- Bottom nav ---------- */

.menubar-area,
.menubar-area.footer-fixed {
    background: rgba(10, 10, 13, 0.92) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--xo-gold-line) !important;
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.55);
}

.menubar-area .nav-link {
    color: var(--xo-dim) !important;
    transition: transform 0.25s var(--xo-ease), color 0.25s var(--xo-ease);
}

.menubar-area .nav-link i {
    color: inherit !important;
}

.menubar-area .nav-link.active,
.menubar-area .nav-link:hover {
    color: var(--xo-gold) !important;
    transform: translateY(-3px);
}

.menubar-area .nav-link.active::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto 0;
    border-radius: 2px;
    background: var(--xo-gold-grad);
}

/* ---------- Cards & surfaces ---------- */

.card,
.dz-card,
.dz-media-card,
.profile-card,
.dz-subscribe-area,
.account-area,
.table-card,
.advert-card {
    background: var(--xo-surface) !important;
    border: 1px solid var(--xo-gold-line) !important;
    border-radius: var(--xo-radius) !important;
    box-shadow: var(--xo-shadow-sm);
    color: var(--xo-text);
}

/* Model cards are styled inline, so target their shape instead. */
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"] {
    background: var(--xo-surface) !important;
    border: 1px solid var(--xo-gold-line);
    box-shadow: var(--xo-shadow-sm) !important;
    transition: transform 0.35s var(--xo-ease), box-shadow 0.35s var(--xo-ease), border-color 0.35s var(--xo-ease);
}

[style*="background: white"]:hover,
[style*="background:#fff"]:hover,
[style*="background: #fff"]:hover {
    transform: translateY(-6px);
    border-color: var(--xo-gold);
    box-shadow: var(--xo-shadow-gold) !important;
}

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

.btn-primary,
.btn-gradient,
.advert-submit,
.rw-btn,
.info-wa,
.wallet-refer-btn,
.landing-login-btn,
.city-footer .btn {
    background: var(--xo-gold-grad) !important;
    background-size: 200% 100% !important;
    color: #16120A !important;
    border: 0 !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    box-shadow: var(--xo-shadow-gold) !important;
    transition: background-position 0.6s var(--xo-ease), transform 0.2s var(--xo-ease), box-shadow 0.3s var(--xo-ease);
}

.btn-primary:hover,
.btn-gradient:hover,
.advert-submit:hover,
.rw-btn:hover:not(:disabled),
.info-wa:hover,
.wallet-refer-btn:hover,
.landing-login-btn:hover,
.city-footer .btn:hover:not(:disabled) {
    background-position: 100% 0 !important;
    color: #16120A !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(212, 175, 55, 0.34) !important;
}

.btn-primary:active,
.btn-gradient:active,
.rw-btn:active {
    transform: translateY(0) scale(0.985);
}

.btn:disabled,
.rw-btn:disabled,
.city-footer .btn:disabled {
    background: var(--xo-surface-3) !important;
    color: var(--xo-dim) !important;
    box-shadow: none !important;
}

.btn-outline-primary,
.btn-light,
.btn-outline-secondary {
    background: transparent !important;
    color: var(--xo-gold) !important;
    border: 1px solid var(--xo-gold-line) !important;
}

.btn-outline-primary:hover,
.btn-light:hover,
.btn-outline-secondary:hover {
    background: var(--xo-gold-soft) !important;
    border-color: var(--xo-gold) !important;
    color: var(--xo-gold-light) !important;
}

/* WhatsApp keeps its own green - it is a recognised brand cue. */
.info-wa:not(.info-wa-off) {
    background: linear-gradient(135deg, #1EA855 0%, #25D366 100%) !important;
    color: #04180C !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.28) !important;
}

/* ---------- Forms ---------- */

.form-control,
.form-select,
input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea,
.rw-note,
.city-search-field input,
.landing-city-select {
    background: var(--xo-surface-2) !important;
    border: 1px solid var(--xo-gold-line) !important;
    color: var(--xo-text) !important;
    border-radius: 12px !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--xo-dim) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus,
.city-search-field input:focus {
    border-color: var(--xo-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16) !important;
    background: var(--xo-surface-2) !important;
    outline: none;
}

select option {
    background: var(--xo-surface-2);
    color: var(--xo-text);
}

/* ---------- Gold accents on custom components ---------- */

.rw-balance,
.landing-banner,
.wallet-refer-btn {
    box-shadow: var(--xo-shadow-gold);
}

.rw-balance {
    background: linear-gradient(135deg, #1A1508 0%, #2A2110 45%, #1A1508 100%) !important;
    border: 1px solid var(--xo-gold-line);
    position: relative;
    overflow: hidden;
}

.rw-balance::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(252, 246, 186, 0.16) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: xo-shimmer 5s var(--xo-ease) infinite;
}

.rw-balance-value,
.rw-stat-num,
.app-info-title,
.landing-cities-title,
.info-updated {
    background: var(--xo-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rw-stat,
.info-card,
.app-info-list,
.landing-faq-item,
.rw-list,
.rw-claim,
.city-list,
.landing-city-link {
    background: var(--xo-surface) !important;
    border-color: var(--xo-gold-line) !important;
    color: var(--xo-text);
}

.rw-row,
.city-option,
.app-info-row {
    border-color: var(--xo-gold-line) !important;
}

.app-info-row:active,
.city-option:hover,
.rw-row:hover {
    background: var(--xo-gold-soft) !important;
}

.app-info-icon,
.info-feature-icon,
.landing-city-pin,
.city-step {
    background: var(--xo-gold-soft) !important;
    color: var(--xo-gold) !important;
}

.app-info-label,
.city-option-name,
.rw-row-title,
.info-card h2,
.info-card h3,
.landing-faq-item summary {
    color: var(--xo-text) !important;
}

.app-info-chevron {
    color: var(--xo-gold) !important;
}

.city-option input:checked ~ .city-option-dot,
.landing-city-link.is-active,
.city-chip.is-active {
    background: var(--xo-gold) !important;
    border-color: var(--xo-gold) !important;
    color: #16120A !important;
}

.city-option input:checked ~ .city-option-name {
    color: var(--xo-gold) !important;
}

.landing-faq-item summary::after,
.landing-city-all {
    color: var(--xo-gold) !important;
}

.city-search,
.city-footer,
.landing-city-form {
    background: transparent !important;
}

.city-search {
    background: var(--xo-bg) !important;
}

.city-footer {
    background: rgba(10, 10, 13, 0.94) !important;
    border-top: 1px solid var(--xo-gold-line) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Status pills keep their meaning but sit on dark. */
.rw-badge-approved { background: rgba(16, 185, 129, 0.16) !important; color: #4ADE80 !important; }
.rw-badge-pending  { background: rgba(212, 175, 55, 0.16) !important; color: var(--xo-gold-light) !important; }
.rw-badge-claimed  { background: rgba(59, 130, 246, 0.16) !important; color: #7DB1FF !important; }
.rw-badge-rejected { background: rgba(239, 68, 68, 0.16) !important; color: #FCA5A5 !important; }

.rw-flash-ok  { background: rgba(16, 185, 129, 0.12) !important; border-color: rgba(16,185,129,0.3) !important; color: #6EE7B7 !important; }
.rw-flash-err { background: rgba(239, 68, 68, 0.12) !important; border-color: rgba(239,68,68,0.3) !important; color: #FCA5A5 !important; }

.info-wa-off {
    background: var(--xo-surface-3) !important;
    color: var(--xo-dim) !important;
}

/* ---------- Motion ---------- */

@keyframes xo-shimmer {
    0%   { transform: translateX(-100%); }
    55%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

@keyframes xo-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes xo-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.page-content > .container > *,
.row.g-3 > .col-6,
.info-card,
.rw-list,
.rw-stat,
.app-info-list,
.landing-faq-item {
    animation: xo-rise 0.5s var(--xo-ease) both;
}

/* Stagger the model grid so cards cascade in. */
.row.g-3 > .col-6:nth-child(1)  { animation-delay: 0.02s; }
.row.g-3 > .col-6:nth-child(2)  { animation-delay: 0.06s; }
.row.g-3 > .col-6:nth-child(3)  { animation-delay: 0.10s; }
.row.g-3 > .col-6:nth-child(4)  { animation-delay: 0.14s; }
.row.g-3 > .col-6:nth-child(5)  { animation-delay: 0.18s; }
.row.g-3 > .col-6:nth-child(6)  { animation-delay: 0.22s; }
.row.g-3 > .col-6:nth-child(n+7){ animation-delay: 0.26s; }

.header,
.menubar-area {
    animation: xo-fade 0.6s var(--xo-ease) both;
}

/* ---------- Modals & misc ---------- */

.modal-content {
    background: var(--xo-surface) !important;
    border: 1px solid var(--xo-gold-line) !important;
    box-shadow: var(--xo-shadow);
}

.modal-header,
.modal-footer {
    border-color: var(--xo-gold-line) !important;
}

.modal-title {
    color: var(--xo-gold) !important;
}

.btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}

.referral-code-box {
    background: var(--xo-surface-2) !important;
    border: 1px solid var(--xo-gold-line) !important;
}

.referral-code-box strong {
    background: var(--xo-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: 0.06em;
}

#preloader {
    background: var(--xo-black) !important;
}

.load-circle div {
    border-color: var(--xo-gold) transparent transparent transparent !important;
}

.alert {
    background: var(--xo-surface-2) !important;
    border: 1px solid var(--xo-gold-line) !important;
    color: var(--xo-text) !important;
}

.badge.bg-light-secondary,
.badge.bg-light-primary,
.badge.bg-light-info {
    background: var(--xo-gold-soft) !important;
    color: var(--xo-gold) !important;
}

.text-muted,
.advert-help,
.info-wa-note,
.rw-row-sub,
.rw-stat-lbl,
.landing-intro,
.city-head p {
    color: var(--xo-muted) !important;
}

/* Keep the feed advert readable on dark. */
.feed-ad-poster,
.bottom-nav-ad {
    background: var(--xo-surface) !important;
    border: 1px solid var(--xo-gold-line);
    box-shadow: var(--xo-shadow-sm);
}

/* ---------- Respect reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   Remaining light surfaces declared inside page <style> blocks.
   Listed explicitly because those rules sit in the same cascade layer.
   ========================================================================== */

.landing-banner,
.landing-cta,
.landing-city-link,
.city-page .city-list,
.city-page .city-search,
.wallet-page .app-info-list,
.info-page .info-card,
.rw .rw-stat,
.rw .rw-claim,
.rw .rw-list,
.app-info-list,
.city-search,
.city-list {
    background: var(--xo-surface) !important;
    border-color: var(--xo-gold-line) !important;
}

.city-search {
    /* Sticky strip must match the page, not the cards. */
    background: var(--xo-bg) !important;
    border-color: transparent !important;
}

.landing-cta p,
.info-hero p,
.city-head p,
.rw-withdraw-note,
.rw-claim-msg,
.rw-row-note {
    color: var(--xo-muted) !important;
}

.landing-cta {
    box-shadow: var(--xo-shadow) !important;
}

.info-hero h1,
.wallet-title,
.landing-section-title,
.city-head h3,
.landing-faq-title,
.info-feature-text h4 {
    color: var(--xo-text) !important;
}

/* Hero headline gets the gold treatment. */
.info-hero h1,
.landing-section-title {
    background: var(--xo-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rw-note,
.city-option,
.landing-faq-item {
    background: var(--xo-surface-2) !important;
}

.city-option-dot {
    border-color: var(--xo-dim) !important;
}

.rw-heading,
.city-label,
.landing-city-label,
.app-info-title {
    color: var(--xo-gold) !important;
    -webkit-text-fill-color: currentColor;
    background: none;
}

/* Registration step pill */
.city-step {
    border: 1px solid var(--xo-gold-line);
}

/* ==========================================================================
   Phone field (country code + number)
   --------------------------------------------------------------------------
   Replaces the theme's .input-group.dz-select, whose select was being taken
   over by the selectpicker plugin in custom.js and rendered on top of the
   number field. This is one bordered row with no plugin involved.
   ========================================================================== */

.xo-phone {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 58px;
    background: var(--xo-surface-2);
    border: 1px solid var(--xo-gold-line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s var(--xo-ease), box-shadow 0.25s var(--xo-ease);
}

.xo-phone:focus-within {
    border-color: var(--xo-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
}

.xo-phone-cc {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--xo-gold) !important;
    background: rgba(212, 175, 55, 0.06);
    border-right: 1px solid var(--xo-gold-line);
    white-space: nowrap;
    user-select: none;
}

.xo-phone-cc img {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.xo-phone-input,
input.xo-phone-input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--xo-text) !important;
    /* 16px keeps iOS from zooming the page on focus. */
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0 15px !important;
    outline: none !important;
}

.xo-phone-input::placeholder {
    color: var(--xo-dim) !important;
    letter-spacing: normal;
    font-weight: 500;
}

/* No spinner arrows, and none of the number-input quirks. */
.xo-phone-input::-webkit-outer-spin-button,
.xo-phone-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.xo-phone-input[type="number"] {
    -moz-appearance: textfield;
}

.xo-phone-hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--xo-dim);
}

@media (max-width: 360px) {
    .xo-phone-cc {
        padding: 0 11px;
        font-size: 15px;
    }
    .xo-phone-input {
        padding: 0 12px !important;
    }
}

/* ==========================================================================
   Fixed bottom action bars
   --------------------------------------------------------------------------
   The vendor theme pins .bottom-btn and .footer.fixed to bottom:0 but never
   reserves room for them, so on short screens the button lands on top of the
   last input. Used on 42 pages, so it is fixed here rather than per page.
   ========================================================================== */

.bottom-btn,
.footer.fixed,
.footer.fixed.bg-white {
    background: rgba(10, 10, 13, 0.94) !important;
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    border-top: 1px solid var(--xo-gold-line) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
    /* Horizontal padding lives here: an inner .container cannot win against
       this rule on the same element, which left buttons running edge to edge. */
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom)) !important;
    z-index: 40 !important;
}

.bottom-btn > .container,
.footer.fixed > .container,
.bottom-btn.container {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    padding-inline: 16px;
}

.bottom-btn .btn,
.footer.fixed .btn {
    width: 100%;
    min-height: 54px;
    border-radius: 14px !important;
    font-size: 16px;
    margin: 0 !important;
}

/* Reserve the bar's height at the end of the scrolling content so nothing
   can sit underneath it. :has() is supported by every current browser. */
.page-content:has(.bottom-btn),
.page-content:has(.footer.fixed),
.content-body:has(.bottom-btn),
.content-body:has(.footer.fixed),
body:has(> .footer.fixed) .page-content,
body:has(> form > .footer.fixed) .page-content,
.page-wrapper:has(.footer.fixed) .page-content,
.page-wrapper:has(.bottom-btn) .page-content {
    padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
}

/* Pages that also carry the bottom nav need room for both. */
.page-wrapper:has(.menubar-area):has(.footer.fixed) .page-content,
.page-wrapper:has(.menubar-area):has(.bottom-btn) .page-content {
    padding-bottom: calc(168px + env(safe-area-inset-bottom)) !important;
}

/* The auth card should not run flush into the bar either. */
.account-area {
    padding: 20px !important;
    margin-bottom: 14px;
}

.account-area .section-head {
    margin-bottom: 14px;
}

.account-area .section-head h3,
.account-area .section-head h2 {
    font-size: 21px;
    line-height: 1.3;
}

/* Give stacked form rows consistent breathing room - several pages relied on
   the old input-group margins that the redesign removed. */
.account-area form > .mb-3,
.account-area form > div + div {
    margin-bottom: 14px;
}

/* Fallback for browsers without :has(): a floor of clearance on the
   containers these bars always appear with. */
@supports not selector(:has(*)) {
    .page-content,
    .content-body {
        padding-bottom: calc(108px + env(safe-area-inset-bottom));
    }
}

/* Bars that hold more than one action stack them with a gap. */
.bottom-btn > .btn + .btn,
.footer.fixed > .container > .btn + .btn {
    margin-top: 10px !important;
}

.bottom-btn-terms {
    margin: 10px 0 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.6;
    color: var(--xo-dim) !important;
}

.bottom-btn-terms a {
    color: var(--xo-gold) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   .input-group fields (icon + input)
   --------------------------------------------------------------------------
   The vendor sets `.input-mini .form-control { background: transparent
   !important }` at a higher specificity than a bare .form-control rule, so
   these fields had no fill and read as invisible on the dark card. Style the
   GROUP as the field - same shape as .xo-phone - and let the parts sit
   transparent inside it.
   ========================================================================== */

.input-group.input-group-icon,
.input-group.input-mini,
.account-area .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 58px;
    background: var(--xo-surface-2) !important;
    border: 1px solid var(--xo-gold-line) !important;
    border-radius: 14px !important;
    overflow: hidden;
    transition: border-color 0.25s var(--xo-ease), box-shadow 0.25s var(--xo-ease);
}

.input-group.input-group-icon:focus-within,
.input-group.input-mini:focus-within,
.account-area .input-group:focus-within {
    border-color: var(--xo-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
}

/* The parts are now seams inside one field, not fields of their own. */
.input-group.input-group-icon .input-group-text,
.input-group.input-mini .input-group-text,
.account-area .input-group .input-group-text {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 4px 0 10px !important;
    color: var(--xo-gold) !important;
}

.input-group.input-group-icon .input-icon,
.input-group .input-icon {
    background: transparent !important;
    color: var(--xo-gold) !important;
}

.input-group .input-icon svg {
    stroke: var(--xo-gold);
    color: var(--xo-gold);
    opacity: 0.9;
}

.input-group .input-icon i {
    color: var(--xo-gold) !important;
    opacity: 1 !important;
}

.input-group.input-group-icon .form-control,
.input-group.input-mini .form-control,
.account-area .input-group .form-control,
.input-group.input-mini .input-group-text,
.dz-select .form-control {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--xo-text) !important;
    font-size: 16px !important;
    font-weight: 600;
    padding: 0 14px 0 6px !important;
    height: auto !important;
    outline: none !important;
}

.input-group .form-control::placeholder {
    color: var(--xo-dim) !important;
    font-weight: 500;
}

/* Stack fields with consistent spacing instead of relying on mt-3 utilities. */
.account-area .input-group + .input-group,
.account-area .xo-phone + .input-group,
.account-area .input-group + .xo-phone {
    margin-top: 14px;
}

/* ==========================================================================
   noUiSlider - gold
   The vendor renders the connect bar and handles in the theme's red primary,
   which fights the black & gold palette.
   ========================================================================== */

.noUi-target {
    background: var(--xo-surface-3) !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 5px !important;
    border-radius: 999px !important;
}

.noUi-connect {
    background: var(--xo-gold-grad) !important;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

.noUi-handle {
    width: 24px !important;
    height: 24px !important;
    right: -12px !important;
    top: -10px !important;
    border-radius: 50% !important;
    background: #15151B !important;
    border: 2px solid var(--xo-gold) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(212, 175, 55, 0.12) !important;
    cursor: grab;
}

.noUi-handle:active,
.noUi-handle:focus {
    outline: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 0 7px rgba(212, 175, 55, 0.22) !important;
}

/* Kill the default grip lines. */
.noUi-handle::before,
.noUi-handle::after {
    display: none !important;
}

.noUi-tooltip {
    background: #15151B !important;
    border: 1px solid var(--xo-gold-line) !important;
    color: var(--xo-gold) !important;
    font-weight: 700;
    border-radius: 8px !important;
}

/* ==========================================================================
   Profile: completion ring, avatar, bottom-nav active state
   The vendor paints these with --primary / --btn-gradient, which is red.
   ========================================================================== */

svg.radial-progress circle.complete,
svg.radial-progress:nth-of-type(6n+1) circle.complete,
svg.radial-progress:nth-of-type(6n+2) circle.complete,
svg.radial-progress:nth-of-type(6n+3) circle.complete,
svg.radial-progress:nth-of-type(6n+4) circle.complete,
svg.radial-progress:nth-of-type(6n+5) circle.complete,
svg.radial-progress:nth-of-type(6n+6) circle.complete {
    stroke: var(--xo-gold) !important;
    stroke-width: 4 !important;
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.6));
}

svg.radial-progress circle.incomplete {
    stroke: rgba(255, 255, 255, 0.14) !important;
    opacity: 1 !important;
}

svg.radial-progress .percentage {
    fill: var(--xo-gold) !important;
}

/* The avatar itself */
.main-profile .media.rounded-circle img,
.profile-area .main-profile img {
    border: 2px solid var(--xo-gold);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.3);
    object-fit: cover;
    background: var(--xo-surface-2);
}

/* Bottom nav: the active pill was a red gradient. */
.menubar-area .menubar-nav .nav-link.active {
    color: var(--xo-gold) !important;
}

.menubar-area .menubar-nav .nav-link.active i {
    color: #16120A !important;
    background: var(--xo-gold-grad) !important;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

/* Emoji tiles on the profile stat cards were a light pink circle. */
.card-icon {
    background: var(--xo-gold-soft) !important;
    border: 1px solid var(--xo-gold-line);
}

/* Tag pills (interests, languages) */
.dz-tag-list li,
.dz-tag-list .tag {
    background: var(--xo-surface-2) !important;
    border: 1px solid var(--xo-gold-line) !important;
    color: var(--xo-text) !important;
}

/* "Edit Profile" and other dark chips should read as actions. */
.main-profile .btn,
.profile-area .btn-dark,
.about-profile .btn {
    background: var(--xo-gold-grad) !important;
    color: #16120A !important;
    border: 0 !important;
    font-weight: 800 !important;
    box-shadow: var(--xo-shadow-gold) !important;
}

/* The bottom advert sat on a white card. */
.bottom-nav-ad {
    background: var(--xo-surface) !important;
    border: 1px solid var(--xo-gold-line);
}

/* Profile: section blocks (Interests, Languages) read as boxed headers with a
   divider. Make the heading a quiet gold label and let the pills breathe. */
.profile-area .dz-subscribe-area {
    padding: 14px 16px 16px !important;
}

.profile-area .dz-subscribe-area .title {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--xo-gold) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
}

.profile-area .dz-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}

.profile-area .dz-tag-list li {
    padding: 7px 14px !important;
    border-radius: 999px !important;
    font-size: 13px;
    font-weight: 600;
    background: var(--xo-surface-2) !important;
    border: 1px solid var(--xo-gold-line) !important;
    color: var(--xo-text) !important;
    margin: 0 !important;
}

/* Lifestyle stat cards */
.profile-area .profile-card {
    padding: 18px 12px !important;
    text-align: center;
}

.profile-area .profile-card h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 0 3px !important;
}

.profile-area .profile-card p strong {
    color: var(--xo-muted) !important;
    font-size: 13px !important;
}

.profile-area .card-icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 21px;
}