/* LinkCollider theme
   Blue and gold, matched to the logo. Loaded after the Unify styles. */

:root {
    --lc-ink: #172033;
    --lc-muted: #5c6b80;
    --lc-line: #e6ebf3;
    --lc-bg: #f4f6fb;
    --lc-surface: #ffffff;
    --lc-blue: #1f6fd6;
    --lc-blue-deep: #1457c0;
    --lc-blue-soft: #e8f1fd;
    --lc-gold: #e2a30a;
    --lc-gold-soft: #fff6dc;
    --lc-danger: #d64545;
    --lc-shadow: 0 12px 32px rgba(23, 32, 51, 0.08);
    --lc-radius: 18px;
    --lc-font: "Plus Jakarta Sans", "Open Sans", sans-serif;
}

body,
button,
input,
select,
textarea {
    font-family: var(--lc-font);
    color: var(--lc-ink);
}

body,
.wrapper {
    background: var(--lc-bg);
}

h1, h2, h3, h4, h5, h6,
.h2-style {
    font-family: var(--lc-font);
    color: var(--lc-ink);
    letter-spacing: -0.02em;
}

a {
    color: var(--lc-blue);
}

a:hover,
a:focus {
    color: var(--lc-blue-deep);
}

.color-green,
a.color-green,
a.color-green:hover {
    color: var(--lc-blue) !important;
}

.panel-green {
    border-color: var(--lc-line);
}

.panel-green > .panel-heading {
    background: var(--lc-blue);
    border-color: var(--lc-blue);
    color: #fff;
}

/* Header */
.lc-header.header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.2) blur(12px);
    box-shadow: 0 1px 0 var(--lc-line);
}

.lc-header .navbar {
    margin: 0;
    min-height: 0;
    border: 0;
    background: transparent;
}

.lc-header .navbar-brand {
    float: left;
    height: auto;
    margin: 0 !important;
    padding: 14px 8px 14px 0;
}

.lc-header #logo-header {
    width: auto;
    height: 40px;
}

.lc-header .navbar-toggle,
.lc-header .navbar-default .navbar-toggle,
.lc-header .navbar-default .navbar-toggle:hover,
.lc-header .navbar-default .navbar-toggle:focus {
    margin-top: 16px;
    border: 0;
    border-radius: 12px;
    background: var(--lc-blue-soft);
}

.lc-header .navbar-toggle .fa {
    color: var(--lc-ink);
}

@media (min-width: 1101px) {
    .lc-header .navbar-collapse.collapse {
        display: flex !important;
        align-items: center;
        overflow: visible !important;
        height: auto !important;
        padding: 0;
    }

    .lc-header .navbar-nav {
        float: none !important;
        border-bottom: 0 !important;
        margin: 0;
    }

    .lc-header .lc-nav-main {
        display: flex;
        align-items: center;
    }

    .lc-header .lc-nav-account {
        display: flex;
        align-items: center;
        margin-left: auto;
    }
}

.lc-header .navbar-default .navbar-nav > li > a {
    padding: 24px 12px;
    color: var(--lc-muted);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    white-space: nowrap;
    background: transparent;
    transition: color 0.18s ease;
}

.lc-header .navbar-default .navbar-nav > li > a:hover,
.lc-header .navbar-default .navbar-nav > li > a:focus,
.lc-header .navbar-default .navbar-nav > .open > a,
.lc-header .navbar-default .navbar-nav > .active > a,
.lc-header .navbar-default .navbar-nav > .active > a:hover,
.lc-header .navbar-default .navbar-nav > .active > a:focus {
    color: var(--lc-ink);
    background: transparent;
}

.lc-header .navbar-default .navbar-nav > .active > a {
    box-shadow: inset 0 -2px 0 var(--lc-blue);
}

.lc-header .dropdown-menu {
    margin-top: 0;
    padding: 8px;
    border: 1px solid var(--lc-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(23, 32, 51, 0.12);
}

.lc-header .dropdown-menu > li > a {
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--lc-ink);
    font-size: 14px;
    font-weight: 500;
    white-space: normal;
}

.lc-header .lc-nav-main .dropdown-menu {
    min-width: 292px;
}

.lc-header .lc-nav-main .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.lc-header .lc-nav-main .dropdown-menu > li > a > i {
    flex: 0 0 18px;
    width: 18px !important;
    max-width: 18px;
    height: 14px;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    left: auto !important;
    object-fit: contain;
    background-position: center;
    background-size: 14px;
    color: var(--lc-muted);
    text-align: center;
    line-height: 14px;
}

.lc-header .dropdown-header {
    padding: 8px 12px 4px;
    color: var(--lc-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lc-header .dropdown-menu .label {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
    vertical-align: middle;
    flex: none;
}

.lc-header .dropdown-menu .label-green,
.lc-header .dropdown-menu .label-blue {
    background: var(--lc-blue-soft);
    color: var(--lc-blue-deep);
}

.lc-header .dropdown-menu .label-red {
    background: #fdecec;
    color: var(--lc-danger);
}

.lc-header .dropdown-menu .label-yellow {
    background: var(--lc-gold-soft);
    color: #8a6200;
}

@media (min-width: 768px) {
    .lc-header .dropdown-menu li > a:hover,
    .lc-header .dropdown-menu li > a:focus,
    .lc-header .dropdown-menu .active > a {
        background: var(--lc-blue-soft) !important;
        color: var(--lc-blue-deep) !important;
    }
}

@media (min-width: 1101px) {
    .lc-header .dropdown-menu {
        display: block;
        min-width: 240px;
        max-height: 70vh;
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }

    .lc-header .dropdown.open > .dropdown-menu {
        display: block;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .lc-header .navbar-right .dropdown-menu {
        right: 0;
        left: auto;
    }
}

/* Open menus on hover only with a mouse. Touch screens use tap, because
   hover "sticks" after a tap and the menu can't be closed. */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
    .lc-header .dropdown:hover > .dropdown-menu {
        display: block;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

@media (max-width: 1100px) {
    .lc-header .navbar-toggle {
        display: block;
    }

    .lc-header .navbar-header {
        float: none;
    }

    .lc-header .navbar-collapse.collapse {
        display: none !important;
        height: auto !important;
    }

    .lc-header .navbar-collapse.collapse.in {
        display: block !important;
        /* The header sticks to the top, so a tall open menu has to scroll inside itself */
        max-height: calc(100vh - 76px);
        max-height: calc(100dvh - 76px);
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: #fff;
    }

    .lc-header .navbar-nav,
    .lc-header .lc-nav-main,
    .lc-header .lc-nav-account,
    .lc-header .navbar-nav > li {
        float: none !important;
        display: block;
        width: auto;
        margin: 0;
    }

    .lc-header .navbar-default .navbar-nav > li > a,
    .lc-header .navbar-default .navbar-nav > li a {
        border-bottom: 0;
        padding: 12px 4px;
        font-size: 16px;
    }

    .lc-header .navbar-default .navbar-nav > .active > a,
    .lc-header .navbar-default .navbar-nav > .active > a:hover {
        color: var(--lc-blue-deep);
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .lc-header .dropdown.open > .dropdown-menu,
    .lc-header .navbar-nav .open > .dropdown-menu {
        display: block;
        position: static;
        float: none;
    }

    .lc-header .navbar-collapse.collapse.in {
        background: #fff;
    }

    .lc-header .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        min-width: 0;
        box-shadow: none;
        border: 0;
        background: transparent;
    }

    .lc-header .lc-nav-main .dropdown-menu {
        width: min(420px, 100%);
        margin-left: 12px;
        padding-left: 0;
    }

    .lc-header .lc-nav-main .dropdown-menu > li > a {
        white-space: normal;
        padding: 10px 12px;
    }
}

/* Dropdown arrow: one small chevron, sitting inline after the label (the base theme pins it to the top corner) */
.lc-header .navbar-nav > .dropdown > a.dropdown-toggle::after {
    position: static;
    display: inline-block;
    top: auto;
    right: auto;
    left: auto;
    margin-left: 7px;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    color: var(--lc-muted);
    transition: transform 0.18s ease;
}

.lc-header .navbar-nav > .dropdown.open > a.dropdown-toggle::after {
    transform: rotate(180deg);
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
    .lc-header .navbar-nav > .dropdown:hover > a.dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

/* Points menu in the header */
.lc-header .navbar-default .navbar-nav > li > a.lc-points-pill,
.lc-header .navbar-default .navbar-nav > li > a.lc-points-pill:hover,
.lc-header .navbar-default .navbar-nav > li > a.lc-points-pill:focus {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 16px 8px;
    padding: 8px 12px !important;
    border-radius: 999px;
    background: var(--lc-gold-soft);
    color: #7a5600 !important;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
}

.lc-header .navbar-default .navbar-nav > li > a.lc-points-pill:hover,
.lc-header .navbar-default .navbar-nav > li > a.lc-points-pill:focus,
.lc-header .navbar-default .navbar-nav > .open > a.lc-points-pill {
    background: #ffe8a3;
}

.lc-points-pill::after {
    color: #7a5600 !important;
}

.lc-points-star {
    color: var(--lc-gold);
    font-size: 14px;
}

.lc-points-unit {
    font-weight: 600;
    font-size: 12px;
}

.lc-points-pill .rpoints-total.animated {
    animation: lc-token-pop 0.55s cubic-bezier(.2, .8, .2, 1);
}

.lc-header .dropdown-menu.lc-points-menu {
    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 90px);
    padding: 14px;
}

.lc-points-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 2px 10px;
    border-bottom: 1px solid var(--lc-line);
}

.lc-points-head strong {
    color: var(--lc-ink);
    font-size: 15px;
}

.lc-points-head span {
    color: var(--lc-muted);
    font-size: 12px;
}

.lc-points-list {
    margin: 6px 0 0;
    padding: 0;
}

.lc-header .lc-points-list > li > a.lc-pt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 10px;
}

.lc-pt-icon {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    background: var(--lc-blue-soft);
    color: var(--lc-blue-deep);
    font-size: 14px;
}

.lc-pt-icon .lc-icon {
    width: 13px;
    height: 13px;
}

.lc-pt-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.lc-pt-name {
    overflow: hidden;
    color: var(--lc-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-pt-meter {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px !important;
    background: #edf1f7;
}

.lc-pt-meter i {
    display: block;
    height: 100%;
    border-radius: 999px !important;
    background: var(--lc-blue);
}

.lc-pt-n {
    flex: 0 0 auto;
    min-width: 36px;
    color: var(--lc-ink);
    font-size: 15px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lc-pt-row.is-empty .lc-pt-n {
    color: var(--lc-danger);
}

.lc-pt-row.is-empty .lc-pt-icon {
    background: #f1f3f7;
    color: #8a96a8;
}

.lc-pt-row.is-full .lc-pt-meter i {
    background: var(--lc-gold);
}

.lc-points-note {
    margin: 6px 2px 0;
    color: var(--lc-muted);
    font-size: 12px;
}

.lc-pt-warn {
    color: var(--lc-danger);
    font-weight: 600;
}

.lc-points-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 2px 0;
    border-top: 1px solid var(--lc-line);
}

.lc-points-tokens {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lc-ink);
    font-size: 14px;
}

.lc-points-tokens small {
    margin-left: auto;
    color: var(--lc-muted);
    font-size: 12px;
}

.lc-points-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.lc-header .dropdown-menu .lc-points-foot .btn-u {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 10px;
    color: #fff !important;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

/* Convert is the secondary action: soft blue, so Earn points (free) leads */
.lc-header .dropdown-menu .lc-points-foot .btn-u.lc-points-convert,
.lc-header .dropdown-menu .lc-points-foot .btn-u.lc-points-convert:hover,
.lc-header .dropdown-menu .lc-points-foot .btn-u.lc-points-convert:focus {
    background: var(--lc-blue-soft) !important;
    color: var(--lc-blue-deep) !important;
    box-shadow: none;
}

.lc-header .dropdown-menu .lc-points-foot .btn-u.lc-points-convert:hover,
.lc-header .dropdown-menu .lc-points-foot .btn-u.lc-points-convert:focus {
    background: #d6e6fb !important;
}

@media (max-width: 1100px) {
    .lc-header .lc-nav-account .dropdown-menu.lc-points-menu {
        width: min(420px, 100%);
        margin-left: 4px;
        padding: 12px 4px;
    }

    .lc-header .navbar-default .navbar-nav > li > a.lc-points-pill {
        margin: 8px 0;
    }
}

.lc-account-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.lc-member {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--lc-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.lc-member-premium {
    background: var(--lc-blue-soft);
    color: var(--lc-blue-deep);
}

.lc-member-gold {
    background: var(--lc-gold-soft);
    color: #8a6200;
}

.lc-account-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    color: var(--lc-ink);
    font-size: 14px;
    font-weight: 600;
}

.lc-account-stat a {
    font-size: 13px;
    font-weight: 600;
}

.lc-level-help {
    color: var(--lc-muted);
    cursor: pointer;
}

.lc-level-help:hover,
.lc-level-help:focus {
    color: var(--lc-blue);
}

.popover {
    z-index: 2000;
}

.lc-header .navbar-default .navbar-nav > li > a.lc-register,
.lc-header .navbar-default .navbar-nav > li > a.lc-register:hover,
.lc-header .navbar-default .navbar-nav > li > a.lc-register:focus {
    display: inline-block;
    width: auto;
    margin: 12px 12px 16px;
    padding: 10px 16px !important;
    border-radius: 999px;
    background: var(--lc-blue);
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(31, 111, 214, 0.24);
    transition: transform 0.18s ease, background 0.18s ease;
}

.lc-header .navbar-default .navbar-nav > li > a.lc-register:hover,
.lc-header .navbar-default .navbar-nav > li > a.lc-register:focus {
    background: var(--lc-blue-deep);
    color: #fff !important;
    transform: translateY(-1px);
}

/* Buttons, forms, links */
.btn-u {
    border: 0;
    border-radius: 999px !important;
    background: var(--lc-blue) !important;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(31, 111, 214, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-u:hover,
.btn-u:focus {
    background: var(--lc-blue-deep) !important;
    color: #fff;
    transform: translateY(-1px);
}

.btn-u-red,
.btn-u-red:hover,
.btn-u-red:focus {
    background: #e25b4a !important;
    box-shadow: 0 8px 18px rgba(226, 91, 74, 0.22);
}

.btn-u-red:hover,
.btn-u-red:focus {
    background: #c94838 !important;
}

.btn-u-yellow,
.btn-u-yellow:hover {
    background: var(--lc-gold) !important;
    color: #1a2332 !important;
    box-shadow: none;
}

.btn-u-default,
.btn-u-default:hover,
.btn-u-default:focus {
    background: #eef2f7 !important;
    color: var(--lc-ink) !important;
    box-shadow: none;
}

.form-control {
    height: 44px;
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control:focus {
    border-color: var(--lc-blue);
    box-shadow: 0 0 0 4px rgba(31, 111, 214, 0.14);
}

.input-group-addon {
    border-color: #d9e0ea;
    border-radius: 12px;
    background: #f7f9fc;
    color: var(--lc-muted);
}

textarea.form-control {
    height: auto;
}

/* Page chrome */
.breadcrumbs {
    padding: 28px 0 0;
    border: 0 !important;
    background: transparent !important;
}

.breadcrumbs.lc-page-intro {
    padding: 36px 0 32px;
}

.breadcrumbs h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
}

.lc-page-intro h1 {
    float: none !important;
    margin: 0 0 18px;
    line-height: 1.25;
}

.lc-page-intro p {
    margin: 0;
    max-width: 68ch;
    color: var(--lc-muted);
    font-size: 16px;
    line-height: 1.7;
}

.content .headline,
.headline {
    border: 0;
    background: transparent;
}

.content .headline h1,
.content .headline h2,
.headline h2,
.headline .h2-style {
    border: 0;
    background: none;
    color: var(--lc-ink);
    font-weight: 700;
}

.container.content,
.container-fluid.content {
    animation: lc-rise 0.45s ease both;
}

.pagination > li > a,
.pagination > li > span {
    margin: 0 3px;
    border: 0;
    border-radius: 10px !important;
    color: var(--lc-ink);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background: var(--lc-blue);
    border-color: var(--lc-blue);
}

/* Cards shared by dashboard, activities, and FAQ */
.magazine-sb-social,
.content .post-container.funny-boxes,
.content-boxes-v2 .boxes,
.reg-page,
.pricing {
    border: 1px solid var(--lc-line) !important;
    border-radius: var(--lc-radius) !important;
    background: var(--lc-surface);
    box-shadow: var(--lc-shadow) !important;
}

.magazine-sb-social {
    padding: 18px 18px 8px;
    margin-bottom: 16px;
}

.magazine-sb-social .alert {
    border: 0;
    border-radius: 14px;
    background: #f7f9fc;
    color: var(--lc-ink);
}

.magazine-sb-social .headline h2 {
    margin-top: 0;
    font-size: 16px;
}

.content .post-container.funny-boxes,
.content-boxes-v2 .boxes {
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.content .post-container.funny-boxes:hover,
.content-boxes-v2 .boxes:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(23, 32, 51, 0.12) !important;
}

.content .post-container.funny-boxes p a {
    color: var(--lc-blue);
}

.content .post-container.funny-boxes p a:hover,
.content .post-container.funny-boxes p a:focus {
    color: var(--lc-blue-deep);
}

.content-boxes-v2 .boxes .heading-sm {
    font-weight: 700;
}

.content #activity-wizard.bs-wizard {
    margin-bottom: 22px;
    padding: 8px 0 4px;
}

.content #activity-wizard .bs-wizard-stepnum {
    color: var(--lc-ink);
    font-weight: 700;
}

.content #activity-wizard .bs-wizard-info {
    color: var(--lc-muted);
}

.content #activity-wizard .bs-wizard-step > .bs-wizard-dot {
    background: var(--lc-blue-soft);
}

.content #activity-wizard .bs-wizard-step > .bs-wizard-dot:after,
.content #activity-wizard .bs-wizard-step.complete > .progress > .progress-bar {
    background: var(--lc-blue);
}

.panel-group .panel {
    overflow: hidden;
    border: 1px solid var(--lc-line);
    border-radius: 14px !important;
    box-shadow: none;
}

.panel-group .panel + .panel {
    margin-top: 10px;
}

.panel-default > .panel-heading {
    border: 0;
    background: #fff;
}

.panel-title {
    font-size: 16px;
    font-weight: 600;
}

.panel-title a,
.panel-title a:hover {
    color: var(--lc-ink);
}

.panel-body {
    color: var(--lc-muted);
    border-top: 1px solid var(--lc-line) !important;
}

/* Pricing */
.pricing {
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.pricing:hover {
    transform: translateY(-4px);
}

.pricing-head h3,
h3.premium,
h3.gold {
    background: var(--lc-blue) !important;
    color: #fff;
}

h3.gold {
    background: var(--lc-gold) !important;
    color: #1a2332 !important;
}

.pricing-content li {
    border-color: var(--lc-line);
}

/* Login and register cards */
.reg-page {
    padding: 32px !important;
    color: var(--lc-ink);
}

#rewardToken-container {
    border: 1px solid var(--lc-line) !important;
    border-radius: 14px;
    background: var(--lc-bg);
    padding: 14px 16px !important;
}

.reg-header {
    border-bottom: 1px solid var(--lc-line);
    text-align: center;
}

.reg-header h1 {
    font-size: 28px;
    font-weight: 700;
}

/* Dialogs and toasts */
.modal-content {
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(17, 24, 39, 0.28);
    overflow: hidden;
}

.modal-header {
    padding: 22px 24px 0;
    border: 0;
    background: #fff;
}

.modal-header h4,
.modal-header h2,
.modal-title {
    font-size: 22px;
    font-weight: 700;
    text-align: left;
}

.modal-body {
    padding: 16px 24px 24px;
}

.modal-header .close {
    margin-top: 2px;
    font-size: 28px;
    font-weight: 400;
    opacity: 0.45;
}

.modal-dialog {
    width: calc(100% - 32px);
    max-width: 560px;
    margin: 28px auto;
}

.modal-body iframe,
.lcvid {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.modal.fade .modal-dialog {
    transform: translateY(16px) scale(0.98);
    transition: transform 0.28s ease;
}

.modal.in .modal-dialog {
    transform: none;
}

#alert-addedToken,
#alert-addedPoint,
#alert-newActivities,
#alert-liveNewActivities,
#alert-errorMsg {
    right: 20px;
    bottom: auto;
    top: 84px;
    max-width: 360px;
    padding: 14px 16px;
    border: 0;
    border-radius: 16px !important;
    background: var(--lc-ink);
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 16px 40px rgba(23, 32, 51, 0.28);
}

#alert-addedToken .color-yellow,
#alert-addedPoint .color-yellow,
#alert-liveNewActivities .color-yellow {
    color: #f5c451;
}

#alert-addedToken.animated,
#alert-addedPoint.animated,
#alert-newActivities.animated,
#alert-liveNewActivities.animated,
#alert-errorMsg.animated {
    animation: lc-toast-in 0.5s cubic-bezier(.2, .8, .2, 1);
}

#alert-errorMsg {
    background: #3d1d24;
}

#floating-badges,
.lc-help {
    position: fixed;
    z-index: 999;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
    max-width: none;
    margin: 0;
}

.lc-help-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    margin: 0;
    padding: 0 16px 0 14px;
    border: 1px solid var(--lc-line);
    border-radius: 999px;
    background: #fff;
    color: var(--lc-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    list-style: none;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(23, 32, 51, 0.16);
}

.lc-help-toggle::-webkit-details-marker {
    display: none;
}

.lc-help-toggle .fa {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lc-blue-soft);
    color: var(--lc-blue);
    font-size: 13px;
    line-height: 22px;
    text-align: center;
}

#floating-badges a {
    min-width: 0;
    margin: 0;
    font-size: 14px;
}

.lc-help-menu {
    min-width: 230px;
    padding: 8px;
    border: 1px solid var(--lc-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(23, 32, 51, 0.16);
}

.lc-help-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--lc-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.lc-help-menu a:hover,
.lc-help-menu a:focus {
    background: var(--lc-bg);
    color: var(--lc-blue-deep);
    text-decoration: none;
}

.lc-help-menu a i {
    width: 16px;
    color: var(--lc-muted);
    text-align: center;
}

.lc-help-menu .lc-help-sale {
    background: var(--lc-gold-soft);
    color: #8a6200;
}

.lc-help-menu .lc-help-sale i {
    color: #8a6200;
}

.lc-choice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lc-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--lc-line);
    border-radius: 14px;
    background: #fff;
    color: var(--lc-ink);
    text-decoration: none;
}

.lc-choice:hover,
.lc-choice:focus {
    border-color: #c5d8f6;
    background: var(--lc-blue-soft);
    color: var(--lc-ink);
    text-decoration: none;
}

.lc-choice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--lc-bg);
    color: var(--lc-blue);
    font-size: 18px;
}

.lc-choice-icon .lc-icon {
    width: 16px;
    height: 16px;
}

.lc-choice-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.lc-choice-copy strong {
    font-size: 15px;
    font-weight: 700;
}

.lc-choice-copy small {
    color: var(--lc-muted);
    font-size: 13px;
}

.lc-choice-badge {
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--lc-blue-soft);
    color: var(--lc-blue-deep);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.lc-choice-badge-low {
    background: #fdecec;
    color: var(--lc-danger);
}

.lc-choice-note {
    margin: 14px 0 0;
    color: var(--lc-muted);
    font-size: 14px;
    text-align: center;
}

#modal-post .modal-dialog,
#modal-collecttokens .modal-dialog {
    max-width: 480px;
}

/* Footer */
.footer,
.copyright {
    background: #141b2d;
    color: #c9d2e3;
}

.footer {
    margin-top: 48px;
    padding: 36px 0 20px;
}

.footer p,
.footer a,
.copyright p,
.copyright a {
    color: #c9d2e3;
    font-size: 14px;
}

.footer a:hover,
.copyright a:hover {
    color: #fff;
}

.footer .headline,
.footer .h2-style,
.footer h2,
.footer h3,
.footer h4 {
    color: #fff;
    border: 0;
}

.lc-copyline {
    margin: 0 0 8px;
}

.lc-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.lc-legal a {
    margin: 0;
    color: #9eb0c9;
}

/* Homepage, Unify v2 */
.u-header {
    box-shadow: 0 1px 0 var(--lc-line);
}

.u-header #logo-header {
    width: auto !important;
    height: 44px;
}

.g-bg-primary,
.g-bg-primary--hover:hover,
.u-block-hover:hover .g-bg-primary--hover {
    background-color: var(--lc-blue) !important;
}

.g-color-primary,
.g-color-primary--hover:hover {
    color: var(--lc-blue) !important;
}

.u-btn-outline-primary,
.btn-outline-primary {
    color: #fff !important;
    background: var(--lc-blue) !important;
    border-color: var(--lc-blue) !important;
    border-radius: 999px !important;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(31, 111, 214, 0.24);
    transition: transform 0.18s ease, background 0.18s ease;
}

.u-btn-outline-primary:hover,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background: var(--lc-blue-deep) !important;
    border-color: var(--lc-blue-deep) !important;
    transform: translateY(-1px);
}

.lc-home-feature {
    height: 100%;
    padding: 22px 22px 6px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--lc-shadow);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    animation: lc-rise 0.55s ease both;
}

.lc-home-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(23, 32, 51, 0.1);
}

.lc-home-features .col-lg-4:nth-child(2) .lc-home-feature { animation-delay: 0.08s; }
.lc-home-features .col-lg-4:nth-child(3) .lc-home-feature { animation-delay: 0.16s; }

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

@keyframes lc-toast-in {
    0% { opacity: 0; transform: translateY(-12px) scale(0.96); }
    70% { opacity: 1; transform: translateY(2px) scale(1.02); }
    100% { opacity: 1; transform: none; }
}

@keyframes lc-token-pop {
    0% { transform: translateY(-4px) scale(0.86); }
    60% { transform: translateY(0) scale(1.12); }
    100% { transform: none; }
}

.lc-share-wrap {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

.lc-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.lc-share a,
.lc-share button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--lc-line);
    border-radius: 999px;
    background: #fff;
    color: var(--lc-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.lc-share a:hover,
.lc-share a:focus,
.lc-share button:hover,
.lc-share button:focus,
.lc-share .is-copied {
    background: var(--lc-blue-soft);
    border-color: transparent;
    color: var(--lc-blue-deep);
    text-decoration: none;
}

.lc-share .fa-x,
.lc-share .lc-icon {
    width: 12px;
    height: 12px;
    margin: 0;
}

.lc-footer .lc-share {
    margin-top: 16px;
}

.lc-earn {
    max-width: 1040px;
}

.lc-earn-hero h1 {
    margin: 8px 0 12px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
}

.lc-earn-hero p,
.lc-earn-note {
    max-width: 68ch;
    color: var(--lc-muted);
    font-size: 16px;
    line-height: 1.7;
}

.lc-earn-rates {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.lc-earn-rate,
.lc-earn-card,
.lc-link-card {
    border: 1px solid var(--lc-line);
    border-radius: 18px;
    background: #fff;
}

.lc-earn-rate {
    padding: 16px 16px 14px;
}

.lc-earn-rate span,
.lc-earn-label {
    display: block;
    color: var(--lc-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lc-earn-rate strong {
    display: block;
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.1;
}

.lc-earn-rate small {
    display: block;
    margin-top: 6px;
    color: var(--lc-muted);
    font-size: 13px;
    line-height: 1.4;
}

.lc-earn-card,
.lc-link-card {
    margin: 16px 0;
    padding: 20px;
}

.lc-earn-card h2,
.lc-link-card h2,
.lc-earn h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
}

.lc-earn-linkrow {
    display: flex;
    gap: 8px;
    margin: 14px 0;
}

.lc-earn-linkrow input,
.lc-earn-field {
    width: 100%;
    height: 46px;
    border: 1px solid var(--lc-line);
    border-radius: 12px;
    background: var(--lc-bg);
    color: var(--lc-ink);
    font-size: 15px;
}

.lc-earn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
}

.lc-earn-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
}

.lc-banner {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--lc-line);
}

.lc-banner img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.lc-banner code,
.lc-earn code {
    display: block;
    white-space: normal;
    word-break: break-word;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--lc-bg);
    color: var(--lc-ink);
}

.lc-link-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lc-link-card header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    align-items: flex-start;
}

.lc-link-card header > div {
    flex: 1 1 220px;
    min-width: 0;
}

.lc-link-card header > a {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    word-break: normal;
    font-weight: 700;
}

.lc-link-card a {
    word-break: break-all;
}

.lc-link-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}

.lc-link-stats div {
    padding: 10px;
    border-radius: 12px;
    background: var(--lc-bg);
}

.lc-link-stats strong {
    display: block;
    margin-top: 4px;
    font-size: 16px;
}

.lc-link-card.is-blocked {
    border-color: #f3c2c2;
    background: #fff8f8;
}

.lc-earn-ok {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #e8f1fd;
    color: var(--lc-blue-deep);
    font-weight: 700;
}

@media (max-width: 900px) {
    .lc-earn-rates,
    .lc-link-stats {
        grid-template-columns: 1fr 1fr;
    }

    .lc-earn-grid,
    .lc-banner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .lc-earn-rates,
    .lc-link-stats {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .container.content,
    .container-fluid.content,
    .lc-home-feature,
    .lc-help-toggle,
    .lc-points-pill .rpoints-total.animated,
    #alert-addedToken.animated,
    #alert-addedPoint.animated,
    #alert-newActivities.animated,
    #alert-liveNewActivities.animated,
    #alert-errorMsg.animated {
        animation: none;
    }
}

/* Mobile: comfortable tap targets and full-width form actions */
@media (max-width: 767px) {
    .btn-u,
    .btn-u-lg {
        min-height: 44px;
    }

    .reg-page .form-control {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS from zooming in on focus */
    }

    .reg-page button[type="submit"].btn-u,
    .reg-page .btn-u-lg[type="submit"] {
        display: block;
        width: 100%;
    }
}

/* Stacked mobile menu: only tap opens a submenu (overrides the theme's hover rule) */
@media (max-width: 1100px) {
    .lc-header .navbar-nav > li.dropdown:not(.open):hover > .dropdown-menu {
        display: none;
    }
}

@media (hover: none), (pointer: coarse) {
    .lc-header .navbar-nav > li.dropdown:not(.open):hover > .dropdown-menu {
        display: none;
    }
}

/* Top-level header links (including My pages, FAQ, Sign in) share one padding.
   The base theme gives plain links and dropdown links different padding, and a green underline. */
.lc-header.header .navbar-default .navbar-nav.lc-nav-main > li > a,
.lc-header.header .navbar-default .navbar-nav.lc-nav-account > #menu-login > a {
    padding: 24px 12px;
    border: 0;
    line-height: 1.42857143;
}

@media (max-width: 1100px) {
    .lc-header.header .navbar-default .navbar-nav.lc-nav-main > li > a,
    .lc-header.header .navbar-default .navbar-nav.lc-nav-account > #menu-login > a {
        padding: 12px 4px;
    }
}

/* Token icon: a drawn coin, so it scales with the text and needs no image.
   Size it with --s (defaults to the text size). */
.lc-token-icon {
    position: relative;
    display: inline-block;
    flex: none;
    width: var(--s, 1.1em);
    height: var(--s, 1.1em);
    border-radius: 50% !important;
    background: radial-gradient(circle at 32% 26%, #fff0a8 0%, #f7c531 42%, #dc9f0c 100%);
    box-shadow: 0 0 0 1px #b8820a, 0 1px 2px rgba(122, 86, 0, 0.35);
    vertical-align: middle;
}

.lc-token-icon::before {
    content: "";
    position: absolute;
    inset: 18%;
    border: calc(var(--s, 1.1em) * 0.07) solid rgba(150, 98, 0, 0.55);
    border-radius: 50% !important;
}

.lc-token-icon::after {
    content: "T";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(122, 78, 0, 0.9);
    font-family: var(--lc-font);
    font-size: calc(var(--s, 1.1em) * 0.5);
    font-weight: 800;
    line-height: 1;
}

/* X and TikTok logos, drawn as masks so they scale with the text and take its colour */
.lc-icon {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--lc-icon) center / contain no-repeat;
    mask: var(--lc-icon) center / contain no-repeat;
    vertical-align: -0.125em;
}

.lc-icon-lg {
    width: 0.95em;
    height: 0.95em;
    margin-right: 6px;
    vertical-align: -0.08em;
}

.lc-icon-x {
    --lc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
}

.lc-icon-tiktok {
    --lc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}

/* Page limit popup */
.lc-limit .modal-dialog {
    max-width: 480px;
}

.lc-limit .modal-content {
    position: relative;
    padding-bottom: 6px;
    overflow: hidden;
    border: 0;
    border-radius: 22px !important;
    box-shadow: 0 24px 60px rgba(23, 32, 51, 0.28);
}

.lc-limit-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    background: rgba(23, 32, 51, 0.06);
    font-size: 22px;
    line-height: 30px;
    opacity: 1;
    text-shadow: none;
}

.lc-limit-hero {
    padding: 32px 28px 16px;
    background: linear-gradient(180deg, var(--lc-blue-soft) 0%, #fff 100%);
    text-align: center;
}

.lc-limit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
    border-radius: 50% !important;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31, 111, 214, 0.25);
    color: var(--lc-blue);
    font-size: 26px;
}

.lc-limit-hero h2 {
    margin: 0 0 8px;
    color: var(--lc-ink);
    font-size: 23px;
    font-weight: 800;
}

.lc-limit-hero p {
    max-width: 380px;
    margin: 0 auto;
    color: var(--lc-muted);
    font-size: 14px;
    line-height: 1.55;
}

.lc-limit-plan {
    margin: 4px 24px 0;
    padding: 18px;
    border: 1px solid #c9d9f0;
    border-radius: 16px !important;
    background: #f4f8fe;
}

.lc-limit-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 10px;
}

.lc-limit-plan-head strong {
    color: var(--lc-ink);
    font-size: 16px;
    font-weight: 800;
}

.lc-limit-plan-head span {
    padding: 3px 10px;
    border-radius: 99px !important;
    background: var(--lc-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.lc-limit-plan ul {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.lc-limit-plan li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
    color: #2b3850;
    font-size: 14px;
    line-height: 1.45;
}

.lc-limit-plan li .fa {
    flex: none;
    margin-top: 3px;
    color: #2e9e5b;
    font-size: 12px;
}

.lc-limit-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    font-size: 15px;
}

.lc-limit-foot {
    padding: 14px 24px 10px;
    text-align: center;
}

.lc-limit-foot p {
    margin: 0 0 4px;
    color: var(--lc-muted);
    font-size: 13px;
}

.lc-limit-foot .lc-link-btn {
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: var(--lc-blue-deep);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.lc-limit-foot .lc-link-btn:hover {
    text-decoration: underline;
}

/* Submit proof: green, so it stands apart from the blue Follow and Skip buttons */
.btn-u.lc-proof-btn {
    background: #168a57 !important;
    box-shadow: 0 8px 18px rgba(22, 138, 87, 0.28);
}

.btn-u.lc-proof-btn:hover,
.btn-u.lc-proof-btn:focus {
    background: #0f7345 !important;
    box-shadow: 0 10px 22px rgba(22, 138, 87, 0.34);
}

.btn-u.lc-proof-btn .fa {
    margin-right: 4px;
}

.lc-proof-word {
    color: #168a57;
    font-weight: 700;
}

/* ==========================================================================
   Dialogs: one look for every popup
   ========================================================================== */
.modal-content {
    border-radius: 22px !important;
}

.modal-header {
    position: relative;
}

.modal-header .close,
.lc-dlg-close {
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    text-align: center;
    line-height: 32px;
    text-shadow: none;
    transition: background 0.18s ease, opacity 0.18s ease;
}

.modal-header .close:hover,
.modal-header .close:focus,
.lc-dlg-close:hover,
.lc-dlg-close:focus {
    background: rgba(23, 32, 51, 0.07);
    opacity: 0.8;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 6px 24px 22px;
    border-top: 0;
    background: #fff;
}

.modal-footer .btn + .btn,
.modal-footer .btn-u + .btn-u {
    margin-left: 0;
}

/* Icon badge in front of a title, like "Recent Referrals" */
.modal-title > .fa:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 50% !important;
    background: var(--lc-blue-soft);
    color: var(--lc-blue);
    font-size: 15px;
    vertical-align: middle;
}

/* Message dialogs (error, info, confirm) */
.bootstrap-dialog .modal-header {
    padding: 26px 58px 0 24px;
    border: 0;
    background: #fff !important;
    text-align: left;
}

.bootstrap-dialog .bootstrap-dialog-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bootstrap-dialog .bootstrap-dialog-header::before {
    content: "\f06a";
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50% !important;
    background: #fde9e9;
    color: var(--lc-danger);
    font: normal 22px/1 FontAwesome;
}

.bootstrap-dialog.type-warning .bootstrap-dialog-header::before {
    content: "\f071";
    background: var(--lc-gold-soft);
    color: #b57f00;
    font-size: 20px;
}

.bootstrap-dialog.type-success .bootstrap-dialog-header::before {
    content: "\f058";
    background: #e6f6ee;
    color: #168a57;
}

.bootstrap-dialog.type-info .bootstrap-dialog-header::before,
.bootstrap-dialog.type-primary .bootstrap-dialog-header::before,
.bootstrap-dialog.type-default .bootstrap-dialog-header::before {
    content: "\f05a";
    background: var(--lc-blue-soft);
    color: var(--lc-blue);
}

.bootstrap-dialog .bootstrap-dialog-title,
.bootstrap-dialog.type-default .bootstrap-dialog-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--lc-ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
}

.bootstrap-dialog .bootstrap-dialog-close-button {
    position: absolute;
    top: 14px;
    right: 16px;
    float: none;
    opacity: 1;
}

.bootstrap-dialog .bootstrap-dialog-close-button .close {
    color: var(--lc-ink);
    font-size: 26px;
    font-weight: 400;
    opacity: 0.5;
    text-shadow: none;
}

.bootstrap-dialog .modal-body {
    padding: 14px 24px 8px;
}

.bootstrap-dialog .bootstrap-dialog-message {
    color: #2b3850;
    font-size: 15px;
    line-height: 1.6;
}

.bootstrap-dialog .modal-footer {
    padding: 14px 24px 24px;
    border: 0;
}

.bootstrap-dialog .bootstrap-dialog-footer,
.bootstrap-dialog .bootstrap-dialog-footer-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

.bootstrap-dialog .modal-footer .btn-u-lg,
.bootstrap-dialog .modal-footer .btn-u {
    min-width: 96px;
    padding: 10px 22px;
}

/* Building blocks for custom popups */
.lc-dlg .modal-dialog {
    max-width: 480px;
}

.lc-dlg .modal-content {
    position: relative;
}

.lc-dlg-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    padding: 0;
    border: 0;
    background: rgba(23, 32, 51, 0.05);
    color: var(--lc-ink);
    font-size: 22px;
    opacity: 1;
}

.lc-dlg-hero {
    padding: 36px 28px 6px;
    text-align: center;
}

.lc-dlg-ico {
    --ico-bg: var(--lc-blue-soft);
    --ico-fg: var(--lc-blue);
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 14px;
    border-radius: 50% !important;
    background: var(--ico-bg);
    color: var(--ico-fg);
    font-size: 26px;
}

.lc-dlg-ico.is-gold {
    --ico-bg: var(--lc-gold-soft);
    --ico-fg: #b57f00;
}

.lc-dlg-ico.is-green {
    --ico-bg: #e6f6ee;
    --ico-fg: #168a57;
}

.lc-dlg-ico.is-red {
    --ico-bg: #fde9e9;
    --ico-fg: var(--lc-danger);
}

.lc-dlg-hero h2 {
    margin: 0 0 8px;
    color: var(--lc-ink);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.lc-dlg-hero p {
    max-width: 390px;
    margin: 0 auto;
    color: var(--lc-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

.lc-dlg-hero p a {
    font-weight: 700;
}

.lc-dlg-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 22px 24px 26px;
}

.lc-dlg-actions.is-end {
    justify-content: flex-end;
}

.lc-dlg-actions .btn-u {
    min-width: 120px;
}

/* Popups with a form */
.lc-dlg-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 26px 60px 0 24px;
}

.lc-dlg-top .lc-dlg-ico {
    width: 46px;
    height: 46px;
    margin: 0;
    font-size: 20px;
}

.lc-dlg-top h2 {
    margin: 2px 0 4px;
    color: var(--lc-ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
}

.lc-dlg-top p {
    margin: 0;
    color: var(--lc-muted);
    font-size: 14px;
    line-height: 1.5;
}

.lc-dlg-form {
    padding: 20px 24px 0;
    margin: 0;
}

.lc-dlg-form .form-group {
    margin-bottom: 16px;
}

.lc-dlg-form label {
    margin-bottom: 6px;
    color: var(--lc-ink);
    font-size: 13.5px;
    font-weight: 700;
}

.lc-dlg-form .form-control {
    height: 46px;
    border-radius: 12px !important;
}

.lc-dlg-hint {
    display: block;
    margin-top: 6px;
    color: var(--lc-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.lc-dlg-form .lc-dlg-actions {
    padding: 8px 0 24px;
}

.lc-dlg-form .lc-dlg-actions .btn-u {
    min-width: 110px;
}

/* Share popups */
.lc-dlg-share {
    padding: 8px 24px 0;
}

.lc-dlg-share .lc-share-wrap {
    margin: 0;
}

.lc-dlg-note {
    margin: 14px 24px 0;
    color: var(--lc-muted);
    font-size: 13px;
    text-align: center;
}

/* Lists inside popups (referrals, commissions) */
.modal .table {
    margin-bottom: 14px;
}

.modal .table-bordered,
.modal .table-bordered > thead > tr > th,
.modal .table-bordered > tbody > tr > td {
    border-right: 0;
    border-left: 0;
}

.modal .table > thead > tr > th {
    padding: 10px 12px;
    border-top: 0;
    border-bottom: 1px solid var(--lc-line);
    background: var(--lc-bg);
    color: var(--lc-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.modal .table > tbody > tr > td {
    padding: 12px;
    border-color: var(--lc-line);
    color: #2b3850;
    font-size: 14px;
    vertical-align: middle;
}

.modal-body .table-wrap {
    overflow-x: auto;
}

.lc-dlg-empty {
    margin: 0;
    padding: 18px 8px;
    color: var(--lc-muted);
    text-align: center;
}

.lc-dlg-empty .fa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 50% !important;
    background: var(--lc-blue-soft);
    color: var(--lc-blue);
    font-size: 22px;
}

.lc-dlg-empty strong {
    display: block;
    color: var(--lc-ink);
    font-size: 16px;
}

.lc-dlg-empty span {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
}

/* Guide popups: numbered steps */
.lc-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.lc-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    color: #2b3850;
    font-size: 14.5px;
    line-height: 1.6;
}

.lc-steps-n {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 50% !important;
    background: var(--lc-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.lc-steps .btn-u {
    margin: 0 2px;
    padding: 4px 14px;
    font-size: 13px;
}

.lc-steps img,
.lc-card-shot {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 12px;
    border: 1px solid var(--lc-line);
    border-radius: 14px !important;
}

#modal-creditCard .modal-body img {
    border: 1px solid var(--lc-line);
    border-radius: 14px !important;
}

#modal-creditCard .modal-body p,
#modal-help .modal-body p {
    color: #2b3850;
    font-size: 14.5px;
    line-height: 1.6;
}

@media (max-width: 480px) {
    .lc-dlg-actions .btn-u,
    .lc-dlg-form .lc-dlg-actions .btn-u {
        flex: 1 1 100%;
    }

    .lc-dlg-top {
        padding-right: 52px;
    }

    .bootstrap-dialog .modal-footer .btn-u {
        flex: 1 1 100%;
    }
}

.lc-dlg.lc-dlg-wide .modal-dialog {
    max-width: 560px;
}

.lc-dlg-media {
    padding: 18px 24px 24px;
}

.lc-dlg-media .lcvid-container {
    overflow: hidden;
    border-radius: 14px !important;
    background: #000;
}

.lc-dlg-media iframe {
    display: block;
}

.lc-dlg-share .lc-share-wrap {
    padding: 0;
}

/* ==========================================================================
   Toasts: short confirmations after a change
   ========================================================================== */
#lc-toasts {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: calc(100% - 32px);
    max-width: 440px;
    transform: translateX(-50%);
    pointer-events: none;
}

.lc-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 10px 12px 14px;
    border-radius: 16px !important;
    background: var(--lc-ink);
    color: #fff;
    box-shadow: 0 16px 40px rgba(23, 32, 51, 0.32);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}

.lc-toast.is-in {
    opacity: 1;
    transform: none;
}

.lc-toast-ico {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    background: #1f9d63;
    color: #fff;
    font-size: 13px;
}

.lc-toast.is-error .lc-toast-ico {
    background: var(--lc-danger);
}

.lc-toast.is-info .lc-toast-ico {
    background: var(--lc-blue);
}

.lc-toast-body {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

.lc-toast-body strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
}

.lc-toast-body span {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.lc-toast-act,
.lc-toast-x {
    flex: none;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.lc-toast-act {
    padding: 6px 10px;
    border-radius: 99px !important;
    color: #9cc4ff;
    font-size: 13.5px;
    font-weight: 700;
}

.lc-toast-act:hover,
.lc-toast-act:focus {
    background: rgba(255, 255, 255, 0.1);
}

.lc-toast-x {
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    font-size: 20px;
    line-height: 26px;
    opacity: 0.6;
}

.lc-toast-x:hover,
.lc-toast-x:focus {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* The control that was just changed flashes softly so the eye finds it */
.lc-flash {
    animation: lc-flash 1.4s ease-out;
}

@keyframes lc-flash {
    0% { background-color: #dff3e8; }
    100% { background-color: transparent; }
}

@media (max-width: 767px) {
    /* Keep clear of the Help button in the corner */
    #lc-toasts {
        bottom: 84px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lc-toast {
        transition: none;
        transform: none;
    }

    .lc-flash {
        animation: none;
    }
}

/* Activity cards: no point badge; Premium/Gold tag sits inline before the title */
.content-boxes-v2 .boxes .lc-card-tier .badge-paid {
    position: static;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

/* ==========================================================================
   "Meet Points" welcome-back: slim banner + modal for members with tokens but 0 points
   ========================================================================== */
.lc-pi-banner {
    border-bottom: 1px solid #f0dca0;
    background: linear-gradient(90deg, var(--lc-gold-soft) 0%, #fffaf0 55%, var(--lc-blue-soft) 100%);
}

.lc-pi-banner[hidden],
.lc-pi[hidden] {
    display: none !important;
}

.lc-pi-banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.lc-pi-banner-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    background: #fff;
    box-shadow: 0 0 0 1px #f0dca0;
    color: var(--lc-gold);
    font-size: 15px;
}

.lc-pi-banner-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--lc-ink);
    font-size: 14px;
    line-height: 1.4;
}

.lc-pi-banner-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
}

.lc-pi-banner .btn-u.lc-pi-banner-cta {
    padding: 7px 16px;
    font-size: 13.5px;
    line-height: 1.3;
    white-space: nowrap;
}

.lc-pi-banner-how {
    padding: 6px 8px;
    border: 0;
    border-radius: 8px !important;
    background: transparent;
    color: var(--lc-blue-deep);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.lc-pi-banner-how:hover,
.lc-pi-banner-how:focus {
    background: rgba(31, 111, 214, 0.1);
}

.lc-pi-banner-close {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50% !important;
    background: transparent;
    color: var(--lc-muted);
    font-size: 22px;
    line-height: 28px;
    cursor: pointer;
}

.lc-pi-banner-close:hover,
.lc-pi-banner-close:focus {
    background: rgba(23, 32, 51, 0.08);
    color: var(--lc-ink);
}

.lc-pi-banner a:focus-visible,
.lc-pi-banner button:focus-visible,
.lc-pi button:focus-visible,
.lc-pi a:focus-visible {
    outline: 2px solid var(--lc-blue);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .lc-pi-banner-inner {
        flex-wrap: wrap;
        gap: 6px 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .lc-pi-banner-text {
        flex: 1 1 calc(100% - 80px);
        font-size: 13.5px;
    }

    .lc-pi-banner-actions {
        flex: 1 1 100%;
    }

    .lc-pi-banner .btn-u.lc-pi-banner-cta {
        flex: 1 1 auto;
        text-align: center;
    }

    .lc-pi-banner-close {
        position: absolute;
        top: 8px;
        right: 10px;
    }

    .lc-pi-banner {
        position: relative;
    }
}

/* Modal */
.lc-pi .modal-dialog {
    max-width: 500px;
}

.lc-pi .modal-content {
    position: relative;
    overflow: hidden;
    border: 0;
    box-shadow: 0 24px 60px rgba(23, 32, 51, 0.28);
}

.lc-pi-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    background: rgba(23, 32, 51, 0.06);
    font-size: 22px;
    line-height: 30px;
    opacity: 1;
    text-shadow: none;
}

.lc-pi-hero {
    position: relative;
    padding: 30px 28px 16px;
    background: radial-gradient(120% 90% at 50% 0%, var(--lc-gold-soft) 0%, #fff 70%);
    text-align: center;
}

.lc-pi-badge {
    position: absolute;
    top: 16px;
    left: 18px;
    padding: 3px 10px;
    border-radius: 99px !important;
    background: var(--lc-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lc-pi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border-radius: 50% !important;
    background: #fff;
    box-shadow: 0 6px 18px rgba(226, 163, 10, 0.35), 0 0 0 1px #f3dfa2;
    color: var(--lc-gold);
    font-size: 28px;
}

.lc-pi-hero h2 {
    margin: 0 0 8px;
    color: var(--lc-ink);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.25;
}

.lc-pi-hero p {
    max-width: 400px;
    margin: 0 auto;
    color: var(--lc-muted);
    font-size: 14px;
    line-height: 1.55;
}

.lc-pi-balance {
    margin: 4px 24px 0;
    padding: 16px 16px 14px;
    border: 1px solid #c9d9f0;
    border-radius: 16px !important;
    background: #f4f8fe;
    text-align: center;
}

.lc-pi-balance-label {
    margin: 0 0 10px;
    color: var(--lc-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lc-pi-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.lc-pi-side {
    display: flex;
    flex: 0 1 140px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 1px 0 var(--lc-line), 0 6px 16px rgba(23, 32, 51, 0.06);
}

.lc-pi-side strong {
    color: var(--lc-ink);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.lc-pi-side small {
    color: var(--lc-muted);
    font-size: 12px;
    font-weight: 600;
}

.lc-pi-side.is-points strong {
    color: #8a6200;
}

.lc-pi-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50% !important;
    background: var(--lc-gold-soft);
    color: var(--lc-gold);
    font-size: 20px;
}

.lc-pi-arrow {
    color: var(--lc-blue);
    font-size: 22px;
}

.lc-pi-rate {
    margin: 12px 0 0;
    color: #2b3850;
    font-size: 13px;
    line-height: 1.5;
}

.lc-pi-steps {
    margin: 14px 24px 0;
    padding: 0;
    list-style: none;
}

.lc-pi-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
}

.lc-pi-steps li + li {
    border-top: 1px solid var(--lc-line);
}

.lc-pi-step-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px !important;
    background: var(--lc-blue-soft);
    color: var(--lc-blue);
    font-size: 15px;
}

.lc-pi-steps strong {
    display: block;
    color: var(--lc-ink);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
}

.lc-pi-steps li span:not(.lc-pi-step-icon) {
    display: block;
    margin-top: 1px;
    color: var(--lc-muted);
    font-size: 13px;
    line-height: 1.5;
}

.lc-pi-foot {
    padding: 14px 24px 14px;
    text-align: center;
}

.lc-pi-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    font-size: 15px;
}

.lc-pi-later {
    margin-top: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px !important;
    background: transparent;
    color: var(--lc-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.lc-pi-later:hover,
.lc-pi-later:focus {
    color: var(--lc-ink);
    text-decoration: underline;
}

@media (max-width: 480px) {
    .lc-pi-hero {
        padding: 28px 18px 14px;
    }

    .lc-pi-hero h2 {
        font-size: 21px;
    }

    .lc-pi-balance,
    .lc-pi-steps {
        margin-right: 16px;
        margin-left: 16px;
    }

    .lc-pi-flow {
        gap: 10px;
    }

    .lc-pi-foot {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .lc-pi.in .lc-pi-icon {
        animation: lc-pi-pop 0.6s cubic-bezier(.2, .8, .3, 1.3) 0.15s both;
    }

    .lc-pi.in .lc-pi-arrow {
        animation: lc-pi-nudge 1.6s ease-in-out 0.6s infinite;
    }

    .lc-pi-banner:not([hidden]) {
        animation: lc-pi-slide 0.35s ease both;
    }
}

@keyframes lc-pi-pop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes lc-pi-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

@keyframes lc-pi-slide {
    0% { transform: translateY(-8px); opacity: 0; }
    100% { transform: none; opacity: 1; }
}

/* Admin "sign in as member" test mode: always-visible way back to the admin console */
.lc-imp {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 2100;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(560px, calc(100vw - 96px));
    padding: 10px 10px 10px 14px;
    border-radius: 16px !important;
    background: #172033;
    box-shadow: 0 12px 34px rgba(23, 32, 51, 0.38);
    color: #e8edf6;
    font-size: 13px;
    line-height: 1.4;
}

.lc-imp-icon {
    flex: none;
    color: #f7c531;
    font-size: 18px;
}

.lc-imp-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.lc-imp-text strong {
    color: #fff;
}

.lc-imp-text b {
    color: #ffe58a;
}

.lc-imp .lc-imp-back,
.lc-imp .lc-imp-back:hover,
.lc-imp .lc-imp-back:focus {
    flex: none;
    padding: 8px 14px;
    border-radius: 999px !important;
    background: #fff;
    color: #172033;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.lc-imp .lc-imp-back:hover,
.lc-imp .lc-imp-back:focus {
    background: #ffe58a;
}

.lc-imp .lc-imp-back:focus-visible {
    outline: 2px solid #7db5ff;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .lc-imp {
        right: 84px;
        bottom: 12px;
        left: 12px;
        max-width: none;
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .lc-imp-text {
        flex: 1 1 calc(100% - 30px);
    }

    .lc-imp .lc-imp-back {
        flex: 1 1 100%;
        text-align: center;
    }
}