/* Colors follow the cyan and violet lights in the existing background. */
.user-page-section-background {
    background-image: url("../assets/bg.webp") !important;
    background-position: top center !important;
    background-size: 300px auto !important;
    background-repeat: repeat !important;
}

.neon-theme {
    --theme-background: #0b1016;
    --theme-surface: #121c26;
    --theme-surface-raised: #1b2b38;
    --theme-text: #edf7fa;
    --theme-muted: #c2d1da;
    --theme-cyan: #79f4e5;
    --theme-violet: #b9abff;
    --theme-border: rgba(121, 244, 229, 0.3);
    background-color: var(--theme-background);
    color: var(--theme-text);
    color-scheme: dark;
    font-family: "Montserrat", sans-serif;
    accent-color: var(--theme-cyan);
}

.neon-theme ::selection {
    background: var(--theme-cyan);
    color: var(--theme-background);
}

#userWrapper .user-info .username,
#userWrapper .preview-header-component,
#userWrapper .preview-text-block-component {
    color: #c0fff4 !important;
    text-shadow: 0 2px 8px #050a10, 0 0 24px rgba(121, 244, 229, 0.2);
}

#userWrapper .user-info .preview-user-description__component {
    color: var(--theme-muted);
}

#userWrapper .description-wrapper {
    padding: 14px 16px;
    border: 1px solid rgba(121, 244, 229, 0.16);
    border-radius: 12px;
    background: rgba(11, 16, 22, 0.9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

#userWrapper .description-wrapper p {
    color: var(--theme-muted);
}

#userWrapper .description-wrapper a,
#userWrapper .footer-link,
#userWrapper .cookies-wrapper #ot-sdk-btn.ot-sdk-show-settings {
    color: var(--theme-cyan) !important;
}

#userWrapper .description-wrapper a:hover {
    color: var(--theme-violet) !important;
}

#userWrapper .preview-link-wrapper,
#userWrapper .preview-lock-link-wrapper {
    color: var(--theme-text);
    background: linear-gradient(115deg, #123038 0%, #15232f 58%, #27233d 100%);
    border: 1px solid rgba(121, 244, 229, 0.65);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px rgba(255, 255, 255, 0.06);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

#userWrapper .preview-link-wrapper .name,
#userWrapper .preview-lock-link-wrapper .name {
    color: var(--theme-text);
    font-weight: 600;
    letter-spacing: 0.25px;
}

#userWrapper .preview-link-wrapper:hover,
#userWrapper .preview-lock-link-wrapper:hover {
    background: linear-gradient(115deg, #18424a 0%, #1a303e 58%, #332e4e 100%);
    border-color: var(--theme-cyan);
    box-shadow: 0 0 20px rgba(121, 244, 229, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
}

#userWrapper .preview-link-wrapper:active,
#userWrapper .preview-lock-link-wrapper:active {
    border-color: var(--theme-violet);
    box-shadow: 0 0 16px rgba(185, 171, 255, 0.2);
}

/* Soften the existing shine without covering the button label. */
#userWrapper .preview-link-wrapper.blink::before,
#userWrapper .preview-lock-link-wrapper.blink::before {
    background: linear-gradient(90deg, transparent, rgba(121, 244, 229, 0.2), transparent);
    opacity: 0.35;
    pointer-events: none;
}

#userWrapper .preview-share-icon__component,
#userWrapper .preview-share-icon__component svg,
#userWrapper .shevron-icon__component svg,
#userWrapper .phone-thumbnail svg,
#userWrapper .up-down-icon svg,
#userWrapper .preview-social-links__component .social-link-item__component {
    color: var(--theme-cyan);
    fill: var(--theme-cyan);
}

#userWrapper .preview-share-icon__component:hover svg {
    fill: var(--theme-violet);
}

#userWrapper .preview-signup-generator__component,
#userWrapper .preview-signup-generator-terms__component,
#userWrapper .preview-anonymous-messages__component,
#userWrapper .preview-commerce-link-item__component,
#userWrapper .preview-location-item__component,
#userWrapper .preview-menu-item__component,
#userWrapper .common-expanded-block,
#userWrapper .common-expanded-locked-block__component,
#userWrapper .preview-image-sliders-list__component :is(.youtube-gallery, .slider-grid, .instagram-gallery),
#userWrapper .shortcut {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

.neon-theme .dropdown-popup .popup-window,
.neon-theme .modal.report-abuse-modal__component,
.neon-theme .signup-form__component .signup-form-wrapper,
.neon-theme .notification__popup .notification__wrapper {
    background: var(--theme-surface);
    color: var(--theme-text);
    border: 1px solid var(--theme-border);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}

.neon-theme .dropdown-popup :is(.dropdown-title, .popup-share-title, .popup-share-title p),
.neon-theme .modal :is(h4, .success, .helper),
.neon-theme .signup-form__component :is(h2, h3, p, label),
.neon-theme .notification__popup .notication-text {
    color: var(--theme-text);
}

.neon-theme .dropdown-popup .title-link,
.neon-theme .modal a,
.neon-theme .signup-form__component a {
    color: var(--theme-cyan);
}

/* Light, cool surfaces keep the existing dark image icons readable. */
.neon-theme .dropdown-popup .field-share-link,
.neon-theme .dropdown-popup .share-item {
    background: #dcefeb;
    border-color: #b2d8d2;
    color: #153d42;
}

.neon-theme .dropdown-popup .field-share-link .link-text,
.neon-theme .dropdown-popup .share-item .social-title {
    color: #153d42;
}

.neon-theme .dropdown-popup .share-item:hover {
    background: #b8e8df;
}

.neon-theme .dropdown-popup .close-btn-wrapper {
    background: #dcefeb;
    border-radius: 50%;
}

.neon-theme .btn-wrapper .primary-blue-btn,
.neon-theme .dropdown-popup button[type="submit"],
.neon-theme .modal .modal-section-action-btn .send {
    color: #0b242a;
    background: linear-gradient(110deg, #79f4e5, #8bd9f0);
    border: 1px solid #79f4e5;
    font-weight: 600;
}

.neon-theme .btn-wrapper .primary-blue-btn:hover,
.neon-theme .dropdown-popup button[type="submit"]:hover {
    color: #0b242a;
    background: #a6fff2;
}

.neon-theme .btn-wrapper .secondary-blue-btn,
.neon-theme .modal .modal-section-button {
    color: var(--theme-text);
    background: var(--theme-surface-raised);
    border: 1px solid var(--theme-border);
}

.neon-theme .btn-wrapper .secondary-blue-btn:hover,
.neon-theme .modal .modal-section-button:hover {
    color: var(--theme-cyan);
    background: #233947;
    border-color: var(--theme-cyan);
}

.neon-theme :is(.dropdown-popup, .modal, .signup-form__component) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    color: var(--theme-text);
    background: var(--theme-background);
    border-color: var(--theme-border);
    caret-color: var(--theme-cyan);
}

.neon-theme :is(input, textarea)::placeholder {
    color: #9bb2c1;
}

.neon-theme :is(.dropdown-popup, .modal) :is(.error, label.error) {
    color: #ffb4b4;
}

.neon-theme :is(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--theme-cyan);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    #userWrapper .preview-link-wrapper,
    #userWrapper .preview-lock-link-wrapper {
        transition: none;
    }

    #userWrapper .preview-link-wrapper.blink::before,
    #userWrapper .preview-lock-link-wrapper.blink::before {
        animation: none;
        display: none;
    }
}