/* ==========================================================================
   dp-theme.css — sitewide house skin (flatty, member side)
   --------------------------------------------------------------------------
   Loaded globally from header.twig, after the theme css, so it can layer the
   coral house system (#f06078, Manrope, airy white cards) over pages that
   don't ship their own scoped redesign. Page-specific redesigns (login,
   landing, users/search, events, homepage) already carry these values in
   their scoped <style> blocks — duplicate rules here resolve identically.
   ========================================================================== */

/* ---------- base ---------- */

body.site-page,
body.index-page,
body.mod-likeme {
    font-family: 'Manrope', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body.site-page,
body.mod-likeme {
    background: #f7f8fb;
    color: #24263a;
}

body.site-page h1,
body.site-page h2,
body.site-page h3 {
    font-family: inherit;
    font-weight: 800;
    color: #1c2333;
    letter-spacing: -.01em;
}
body.site-page .search-header h1.title,
body.site-page .content-block > h1,
body.site-page .contact-us-block h1,
body.site-page .content-block h1 {
    font-size: 28px;
    margin: 26px 0 18px;
}

/* ---------- nprogress (top loading bar) ---------- */

#nprogress .bar {
    background: linear-gradient(90deg, #ff8a68, #f06078 55%, #e0457a) !important;
    height: 3px;
}
#nprogress .peg {
    box-shadow: 0 0 10px #f06078, 0 0 5px #f06078 !important;
}
#nprogress .spinner-icon {
    border-top-color: #f06078 !important;
    border-left-color: #f06078 !important;
}

/* ---------- cookie banner ---------- */

.mod-cookie-policy {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 1200;
    width: min(720px, calc(100vw - 32px));
    background: #1d1f2e;
    color: #eceef6 !important;
    border-radius: 16px;
    padding: 16px 48px 16px 22px;
    box-shadow: 0 18px 44px -12px rgba(20, 16, 40, .55);
}
.mod-cookie-policy .container {
    width: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.mod-cookie-policy .row {
    margin: 0;
}
.mod-cookie-policy p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: inherit;
}
.mod-cookie-policy a {
    color: #ff9aa9;
    font-weight: 700;
    text-decoration: none;
}
.mod-cookie-policy a:hover {
    color: #ffc2cc;
}
.mod-cookie-policy .close-btn-cookie,
.mod-cookie-policy a.close-btn-cookie {
    position: absolute;
    top: 10px;
    right: 12px;
    left: auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .18s;
}
.mod-cookie-policy .close-btn-cookie i {
    color: #a9adc4;
}
.mod-cookie-policy .close-btn-cookie:hover {
    background: rgba(255, 255, 255, .1);
}
.mod-cookie-policy .close-btn-cookie:hover i {
    color: #fff;
}

/* ---------- footer ---------- */

body.site-page footer {
    margin-top: 48px;
    background: #fff;
    border-top: 1px solid #ecEEf5;
    padding: 34px 0 26px;
}
body.site-page footer .footer-menu .h_type_2,
body.site-page footer .footer-menu h4,
body.site-page footer .footer-menu .footer-menu-header {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9aa0b4;
    margin-bottom: 12px;
}
body.site-page footer .footer-menu a {
    color: #4c516a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    line-height: 2;
    transition: color .15s;
}
body.site-page footer .footer-menu a:hover {
    color: #f06078;
}
body.site-page footer .footer-info,
body.site-page footer .copyright {
    color: #9aa0b4;
    font-size: 13px;
}
body.site-page footer .footer-languages a {
    color: #6b7185;
}
body.site-page footer .footer-languages a:hover {
    color: #f06078;
}

/* ---------- buttons ---------- */

body.site-page .btn {
    border-radius: 11px;
    font-weight: 700;
    transition: transform .13s ease, box-shadow .18s ease, filter .18s ease,
                background .18s ease, color .18s ease, border-color .18s ease;
}
body.site-page .btn-primary,
body.site-page input[type="submit"].btn-primary {
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    border: 0;
    padding: 10px 26px;
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(240, 96, 120, .8);
}
body.site-page .btn-primary:hover,
body.site-page .btn-primary:focus {
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    filter: brightness(1.05);
    transform: translateY(-1px);
    color: #fff;
}
body.site-page .btn-default {
    background: #fff;
    border: 1.5px solid #e4e7f0;
    color: #4c516a;
}
body.site-page .btn-default:hover,
body.site-page .btn-default.active {
    border-color: #f06078;
    color: #f06078;
    background: #fff5f7;
    box-shadow: none;
}

/* segmented view switch (List / Gallery) used on search-style pages */
body.site-page .view-search-menu.btn-group {
    background: #fff;
    border: 1px solid #e9ecf3;
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 4px 14px -10px rgba(30, 20, 50, .35);
}
body.site-page .view-search-menu.btn-group .btn {
    border: 0;
    border-radius: 9px !important;
    background: transparent;
    color: #8a8fa5;
    font-size: 13px;
    box-shadow: none;
}
body.site-page .view-search-menu.btn-group .btn.active {
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    color: #fff;
}

/* ---------- forms ---------- */

body.site-page .form-control {
    border: 1.5px solid #e4e7f0;
    border-radius: 11px;
    box-shadow: none;
    min-height: 42px;
    padding: 9px 14px;
    font-size: 14px;
    color: #24263a;
    transition: border-color .16s, box-shadow .16s;
}
body.site-page textarea.form-control {
    min-height: 120px;
    resize: vertical;
}
body.site-page .form-control:focus {
    border-color: #f06078;
    box-shadow: 0 0 0 3px rgba(240, 96, 120, .14);
}
body.site-page .form-group > label,
body.site-page .form-group .tali {
    font-size: 13px;
    font-weight: 700;
    color: #55596e;
    margin-bottom: 6px;
}
body.site-page .pginfo.msg {
    color: #d63757;
    font-size: 12.5px;
}

/* ---------- contact us / tickets ---------- */

body.site-page .contact-us-form {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 18px;
    padding: 26px 28px 30px;
    box-shadow: 0 10px 30px -20px rgba(30, 20, 50, .35);
    max-width: 860px;
}
body.site-page .contact-us-form > p {
    color: #6b7185;
    font-size: 14px;
    margin-bottom: 18px;
}
body.site-page .contact-us-form .form-group {
    margin-bottom: 16px;
}
/* captcha strip */
body.site-page .contact-us-form img {
    border-radius: 10px;
    border: 1px solid #e4e7f0;
}

/* threaded admin messages (tickets) */
body.site-page .tickets_lists .media,
body.site-page .tickets_lists .list-item {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

/* ---------- static content pages (about / terms / privacy) ---------- */

body.site-page .info-content {
    padding-top: 8px;
}
body.site-page .info-content .account_menu {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 8px 24px -18px rgba(30, 20, 50, .35);
}
body.site-page .info-content .account_menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.site-page .info-content .account_menu li {
    border: 0;
    margin: 0 0 2px;
}
body.site-page .info-content .account_menu li a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    color: #4c516a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    transition: background .15s, color .15s;
}
body.site-page .info-content .account_menu li a:hover,
body.site-page .info-content .account_menu li a:focus {
    background: #fff5f7;
    color: #f06078;
}
body.site-page .info-content .account_menu li.active,
body.site-page .info-content .account_menu li.active .info-menu-inner {
    background: transparent;
}
body.site-page .info-content .account_menu li.active a,
body.site-page .info-content .account_menu li.active a:hover {
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    color: #fff;
}
body.site-page .info-content .account_menu .menu-arrow i {
    color: inherit;
    opacity: .65;
}
body.site-page .info-content .account_menu li.leaves a {
    padding-left: 26px;
    font-size: 13.5px;
}
body.site-page .info-content-block {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 18px;
    padding: 30px 34px 34px;
    box-shadow: 0 10px 30px -20px rgba(30, 20, 50, .35);
}
body.site-page .info-content-block h1 {
    margin-top: 0;
    font-size: 26px;
}
body.site-page .info-content-block.wysiwyg p,
body.site-page .info-content-block.wysiwyg li {
    font-size: 15px;
    line-height: 1.75;
    color: #3c405a;
}
body.site-page .info-content-block.wysiwyg img {
    max-width: 100%;
    border-radius: 12px;
}

/* ---------- sitemap ---------- */

body.site-page .sitemap {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 18px;
    padding: 26px 30px;
    box-shadow: 0 10px 30px -20px rgba(30, 20, 50, .35);
    margin: 20px 0;
}
body.site-page .sitemap a {
    color: #4c516a;
    font-weight: 600;
    text-decoration: none;
    line-height: 2.1;
}
body.site-page .sitemap a:hover {
    color: #f06078;
}
body.site-page .sitemap .page-header {
    border-bottom: 1px solid #eef0f4;
    margin: 0 0 14px;
    padding-bottom: 12px;
}

/* ---------- search-style pages (perfect match, nearest users) ---------- */

body.site-page .search-header {
    padding-top: 6px;
}
body.site-page .user-search .search-form,
body.site-page .nearest_users_map_form .panel {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    box-shadow: 0 8px 24px -18px rgba(30, 20, 50, .35);
    padding: 18px;
}
body.site-page .user-search .search-form .form-block {
    border: 0;
}
body.site-page .search-param-button a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 11px;
    background: #fff;
    border: 1.5px solid #e4e7f0;
    color: #4c516a;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
}
body.site-page .search-param-button a:hover {
    border-color: #f06078;
    color: #f06078;
    text-decoration: none;
}

/* results grid — same recipe as the redesigned Find People page; the gallery
   block markup (.dp-pcard) is shared by users/search, perfect_match and
   nearest_users, so the card skin lives here unscoped */
body.site-page .g-users-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 22px;
    margin: 0;
}
body.site-page .g-users-gallery::before,
body.site-page .g-users-gallery::after {
    content: none;
    display: none;
}
body.site-page .g-users-gallery__item {
    width: auto !important;
    max-width: none;
    float: none !important;
    padding: 0 !important;
    margin: 0;
}
body.site-page .g-users-gallery > .col-sm-12,
body.site-page .g-users-gallery > .clearfix {
    grid-column: 1 / -1;
}
body.site-page .g-users-gallery > .clearfix {
    display: none;
}

.dp-pcard {
    position: relative;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 26px -16px rgba(30, 20, 50, .32);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.dp-pcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 44px -20px rgba(240, 96, 120, .45);
}
.g-users-gallery__item.highlight .dp-pcard {
    box-shadow: 0 0 0 2px #f06078, 0 12px 30px -16px rgba(240, 96, 120, .5);
}
.dp-pcard__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f1f1f6;
}
.dp-pcard__photo > a {
    display: block;
    width: 100%;
    height: 100%;
}
.dp-pcard__photo div.baloon,
.dp-pcard__photo picture.great,
.dp-pcard__photo picture {
    display: block;
    width: 100%;
    height: 100%;
}
/* formatAvatar's legacy online dot also carries the size class ("great"),
   which blew it up to fill the photo; the card renders its own
   .dp-pcard__online dot, so the legacy icon is dead weight here */
.dp-pcard__photo .c-online-icon {
    display: none;
}
.dp-pcard__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s ease;
}
.dp-pcard:hover .dp-pcard__photo img {
    transform: scale(1.06);
}
.dp-pcard__photo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(transparent, rgba(20, 10, 25, .28));
    opacity: 0;
    transition: opacity .25s;
}
.dp-pcard:hover .dp-pcard__photo::after {
    opacity: 1;
}
.dp-pcard__online {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #39d98a;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .92);
    z-index: 3;
}
.dp-pcard__badge {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 3;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #3897f0;
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(56, 151, 240, .5);
}
.dp-pcard__actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 16px 12px 13px;
    background: linear-gradient(transparent, rgba(18, 8, 22, .6));
    transform: translateY(102%);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
}
.dp-pcard__actions a,
.dp-pcard__actions a:focus,
.dp-pcard__actions a:active {
    outline: 0 !important;
    border: 0 !important;
}
.dp-pcard:hover .dp-pcard__actions {
    transform: none;
    opacity: 1;
}
.dp-pcard__view {
    flex: 1 1 auto;
    height: 40px;
    padding: 0 14px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    color: #fff !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px -8px rgba(240, 96, 120, .85);
    transition: transform .15s, filter .2s;
}
.dp-pcard__view i {
    font-size: 12px;
}
.dp-pcard__view:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}
.dp-pcard__msg {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #fff;
    color: #f06078 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35);
    transition: transform .15s, background .18s, color .18s;
}
.dp-pcard__msg:hover {
    transform: translateY(-2px);
    background: #f06078;
    color: #fff !important;
}
.dp-pcard__info {
    padding: 13px 15px 15px;
}
.dp-pcard__name {
    font-size: 15px;
    font-weight: 700;
    color: #1e1e28;
    line-height: 1.25;
}
.dp-pcard__name a {
    color: inherit;
    text-decoration: none;
}
.dp-pcard__name a:hover {
    color: #f06078;
}
.dp-pcard__loc {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: #8f8f9c;
}
.dp-pcard__loc i {
    color: #f06078;
    margin-right: 2px;
    font-size: 11px;
}
@media (hover: none) {
    .dp-pcard__actions {
        transform: none;
        opacity: 1;
        background: linear-gradient(transparent, rgba(18, 8, 22, .5));
    }
}

/* pagination / load-more shared by the list pages */
body.site-page #pages_block_1,
body.site-page #pages_block_2 {
    text-align: center;
    margin: 28px 0 0;
}
body.site-page #pages_block_2 input[data-action="show-more"],
body.site-page #pages_block_1 input[data-action="show-previous"],
body.site-page .pagination a {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 12px 36px;
    border-radius: 14px;
    font-family: inherit;
    font-weight: 700;
    font-size: 14.5px;
    color: #f06078 !important;
    text-decoration: none;
    cursor: pointer;
    background: #fff;
    border: 1.6px solid #ffd3dc !important;
    box-shadow: 0 8px 22px -14px rgba(240, 96, 120, .6);
    transition: background .18s, border-color .18s, transform .12s;
}
body.site-page #pages_block_2 input[data-action="show-more"]:hover,
body.site-page #pages_block_1 input[data-action="show-previous"]:hover,
body.site-page .pagination a:hover {
    background: #fff5f7;
    border-color: #f06078 !important;
    transform: translateY(-2px);
}
body.site-page .pagination > .active > a,
body.site-page .pagination > .active > a:hover {
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    border-color: transparent !important;
    color: #fff !important;
}

/* ---------- LikeMe: liked you / matches / my guests ---------- */

.like_me {
    margin: 22px 0 10px;
}
.like_me__profiles-block {
    background: transparent;
    box-shadow: none;
}
.like_me__menu {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 8px 24px -18px rgba(30, 20, 50, .35);
    margin-right: 18px;
}
.like_me__menu__item {
    border: 0;
    margin-bottom: 4px;
}
.like_me__menu__item a {
    display: block;
    padding: 11px 15px;
    border-radius: 11px;
    color: #4c516a;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.like_me__menu__item a:hover {
    background: #fff5f7;
    color: #f06078;
}
.like_me__menu__item.active {
    background: transparent;
}
.like_me__menu__item.active a {
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(240, 96, 120, .8);
}
.like_me__border {
    border: 0;
    background: transparent;
}
.like_me__border h2 {
    font-size: 22px;
    margin: 4px 0 20px;
}
.like_me__profiles-block__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.like_me__profiles-block__items::before,
.like_me__profiles-block__items::after {
    content: none;
    display: none;
}
.like_me__profiles-block__items > [data-block="profile"] {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0;
}
.like_me__profiles-block__items > .text-center {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed #e4c9cf;
    border-radius: 16px;
    padding: 48px 20px;
    color: #8a8fa5;
    font-size: 15px;
    font-weight: 600;
}
.like_me__profiles-block__item {
    margin: 0;
}
.like_me__profiles-block__item .thumbnail {
    position: relative;
    border: 1px solid #eef0f4;
    border-radius: 18px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    box-shadow: 0 8px 26px -16px rgba(30, 20, 50, .32);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.like_me__profiles-block__item .thumbnail:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 42px -20px rgba(240, 96, 120, .45);
}
.like_me__profiles-block__item .thumbnail > a {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f1f1f6;
}
.like_me__profiles-block__item .thumbnail picture,
.like_me__profiles-block__item .thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.like_me__profiles-block__item_name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 14px 12px;
    background: linear-gradient(transparent, rgba(16, 8, 20, .72));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
.like_me__profiles-block__item .caption {
    padding: 10px;
    display: flex;
    justify-content: center;
    background: #fff;
}
.like_me__profiles-block__action {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 17px;
    color: #f06078;
    background: #fff0f3;
    transition: background .18s, color .18s, transform .13s;
}
.like_me__profiles-block__action:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    color: #fff;
}
.like_me__profiles-block__action.is_liked {
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    color: #fff;
}
.like_me__profiles-block__action a {
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* ---------- LikeMe game (swipe page) action dock ---------- */

/* The swipe game is a fullscreen experience, but its template renders the
   site footer as a white slab over the left panel — covering the Skip
   button. Drop it (and the page seam it leaves) on this page only. */
body:has(#likeme-game) footer,
body:has(#likeme-game) .logo-mobile-version {
    display: none;
}
body:has(#likeme-game) {
    background: #fff;
}

/* The shipped theme css renders these as white pills with white SVGs inside
   (invisible icons) hanging half off-screen at bottom:-100px. Rebuild them as
   a floating dock: airy circular buttons, coral Like, slate Skip. */
.like_me-block__actions {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    z-index: 1100;
}
.like_me-block__actions .btn,
.like_me-block__actions .btn.btn-default {
    width: 64px;
    height: 64px;
    padding: 0;
    margin: 0 !important;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 10px 26px -8px rgba(30, 20, 50, .4);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.like_me-block__actions .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -10px rgba(30, 20, 50, .45);
}
.like_me-block__actions .btn:active {
    transform: scale(.93);
}
.like_me-block__actions .btn svg {
    width: 24px;
    height: 24px;
    display: block;
}
.like_me-block__actions .btn-skip_like_me svg path {
    fill: #8a8fa5;
}
.like_me-block__actions .btn-skip_like_me:hover svg path {
    fill: #4c516a;
}
.like_me-block__actions .btn-like_me,
.like_me-block__actions .btn.btn-like_me {
    width: 78px;
    height: 78px;
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    box-shadow: 0 16px 34px -10px rgba(240, 96, 120, .8);
}
.like_me-block__actions .btn-like_me svg {
    width: 34px;
    height: 34px;
}
.like_me-block__actions .btn-like_me svg path,
.like_me-block__actions .btn-super_like_me svg path {
    fill: #fff;
}
.like_me-block__actions .btn-like_me:hover {
    filter: brightness(1.06);
}
.like_me-block__actions .btn-super_like_me,
.like_me-block__actions .btn.btn-super_like_me {
    background: #6C5CE7;
    box-shadow: 0 12px 28px -10px rgba(108, 92, 231, .7);
}
/* "start chatting" action on the match/congratulations screen — the legacy
   css paints every dock svg white, so this needs a colored circle too */
.like_me-block__actions .btn-action_like_me,
.like_me-block__actions .btn.btn-action_like_me {
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    box-shadow: 0 12px 28px -10px rgba(240, 96, 120, .75);
}
.like_me-block__actions .btn-action_like_me svg {
    width: 26px;
    height: 26px;
}
.like_me-block__actions .btn-action_like_me svg path {
    fill: #fff;
}
/* the congratulations/"it's a match" state reuses this container — give it a
   real surface again */
.like_me-block__actions.congratulation-block {
    background: rgba(255, 255, 255, .97);
    padding: 26px 34px;
    border-radius: 22px;
    box-shadow: 0 20px 50px -18px rgba(30, 20, 50, .4);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.like_me-block__actions.congratulation-block h1 {
    font-size: 26px;
    font-weight: 800;
    margin: 6px 0 4px;
}
.like_me-block__actions.congratulation-block h3 {
    font-size: 15px;
    font-weight: 600;
    color: #6b7185;
    margin: 0 0 8px;
}
@media (max-width: 767px) {
    .like_me-block__actions {
        bottom: 18px;
        gap: 14px;
    }
    .like_me-block__actions .btn,
    .like_me-block__actions .btn.btn-default {
        width: 56px;
        height: 56px;
        transform: none;
    }
    .like_me-block__actions .btn-like_me,
    .like_me-block__actions .btn.btn-like_me {
        width: 68px;
        height: 68px;
    }
}

/* "N matches to check out" pill (chat sidebar and likeme pages) */
.like_me_count_matches {
    background: #fff0f3 !important;
    border: 1px solid #ffd3dc;
    border-radius: 14px;
    color: #d63757 !important;
    font-weight: 700;
}
.like_me_count_matches a,
.like_me_count_matches .like_me_count_matches__link {
    color: #d63757 !important;
}
.like_me_count_matches i.fas.fa-heart {
    color: #f06078;
}
.like_me_count_matches svg path,
.like_me_count_matches svg {
    fill: #d63757;
}

/* ---------- navigation feedback (dp-ux.js) ---------- */

/* slim gradient bar that appears the instant the browser starts leaving */
.dp-navbar-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 99999;
    background: linear-gradient(90deg, #ff8a68, #f06078 55%, #e0457a);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 12px rgba(240, 96, 120, .55);
    transition: width 6s cubic-bezier(.08, .72, .18, 1);
}
.dp-navbar-progress.is-going {
    width: 88%;
}
/* the old page steps back politely instead of freezing */
html.dp-leaving body {
    opacity: .55;
    transition: opacity .5s ease .12s;
    pointer-events: none;
}

/* button spinner */
.dp-spin {
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 9px;
    animation: dp-rot .65s linear infinite;
}
.dp-spin--beside {
    border-color: rgba(240, 96, 120, .25);
    border-top-color: #f06078;
    margin: 0 0 0 12px;
    vertical-align: middle;
}
@keyframes dp-rot {
    to { transform: rotate(360deg); }
}
button.is-loading,
input.is-loading {
    pointer-events: none;
    opacity: .88;
}

@media (prefers-reduced-motion: reduce) {
    .dp-navbar-progress { transition: none; }
    .dp-navbar-progress.is-going { width: 45%; }
    html.dp-leaving body { transition: none; opacity: 1; }
    .dp-spin { animation-duration: 1.4s; }
}

/* ---------- character & polish ---------- */

/* faint ambient wash at the top of every page — barely there, but the page
   stops feeling like a flat grey sheet */
body.site-page {
    background-image:
        radial-gradient(1100px 420px at 88% -140px, rgba(240, 96, 120, .055), transparent 70%),
        radial-gradient(900px 380px at -8% -160px, rgba(108, 92, 231, .045), transparent 70%);
    background-repeat: no-repeat;
}

/* short gradient tick under page titles */
body.site-page .search-header h1.title::after,
body.site-page .contact-us-block h1::after,
body.site-page .info-content-block h1::after,
.like_me__border h2::after {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin-top: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ff8a68, #f06078 70%);
}

/* text selection + focus in brand colors */
::selection {
    background: #ffd9e0;
    color: #401a26;
}
body.site-page a:focus-visible,
body.site-page button:focus-visible,
body.site-page input:focus-visible,
body.site-page select:focus-visible {
    outline: 2px solid #f06078;
    outline-offset: 2px;
}

/* slim scrollbar (WebKit) */
body.site-page::-webkit-scrollbar {
    width: 10px;
}
body.site-page::-webkit-scrollbar-thumb {
    background: #d6d9e6;
    border-radius: 8px;
    border: 2px solid #f7f8fb;
}
body.site-page::-webkit-scrollbar-thumb:hover {
    background: #f06078;
}

/* pressing a button should feel like pressing a button */
body.site-page .btn:active,
.dp-btn:active {
    transform: translateY(0) scale(.985);
}

/* skip rendering the footer until it approaches the viewport */
body.site-page footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}

/* ---------- account / settings small lifts ---------- */

body.site-page .account_menu .list-group-item.active,
body.site-page .account_menu .list-group-item.active:hover {
    background: linear-gradient(135deg, #ff8a68, #f06078 55%, #e0457a);
    border-color: transparent;
    color: #fff;
}