/* VIP Members Area — custom styles layered over the theme */

/* ---------- Branding (house logo + two lines) ---------- */
.brand-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}
.brand-logo .brand-house {
    flex: 0 0 auto;
    color: #fff;
    display: inline-flex;
    align-items: center;
    font-size: 2rem;
    line-height: 1;
}
/* Keep the white house visible on light-mode surfaces */
body[data-sidebar="light"] .vertical-menu .brand-house { color: #5b626b; }
body[data-bs-theme="light"] .auth-card .brand-house { color: #5b626b; }
.brand-logo .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.brand-logo .brand-line1 {
    font-weight: 700;
    font-size: 1.3rem;
    white-space: nowrap;
}
.brand-logo .brand-line2 {
    font-size: .78rem;
    opacity: .85;
    white-space: nowrap;
}

/* Sidebar brand box: brand on the left, collapse button on the right.
   Height matches the topbar's .navbar-header (75px) so the logo/hamburger
   center vertically and line up across the sidebar and topbar — this is the
   height the theme derives from the logo's line-height:75px. */
.vertical-menu .navbar-brand-box {
    width: auto;
    height: 75px;
    padding: 0 1rem 0 1.25rem;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* ---------- Sidebar collapse / expand ---------- */
/* Toggle buttons (collapse lives in sidebar, expand lives in topbar) */
.sidebar-toggle-btn {
    border: 0;
    background: transparent;
    padding: .25rem .4rem;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .75;
}
.sidebar-toggle-btn:hover { opacity: 1; }

/* Collapsed = the theme's mini rail (data-sidebar-size="sm"), icons still visible.
   Collapse button lives in the sidebar (shown when expanded);
   expand button lives in the topbar (shown only while collapsed). */
#sidebar-expand { display: none; }
/* Center the menu glyph in the 75px header. The theme renders header buttons
   as flex; without explicit centering the icon stretches and the glyph rides
   high (its line box sits at the top of the stretched item). */
body[data-sidebar-size="sm"] #sidebar-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body[data-sidebar-size="sm"] #sidebar-collapse { display: none; }

/* Mini rail: show only the house icon in the brand box */
body[data-sidebar-size="sm"] .vertical-menu .navbar-brand-box {
    padding: 0;
    justify-content: center;
}
body[data-sidebar-size="sm"] .brand-text { display: none; }
body[data-sidebar-size="sm"] .footer { left: 70px; }
/* Brand text follows the sidebar's colour scheme */
body[data-sidebar="dark"]  .vertical-menu .brand-line1 { color: #f1f3f9; }
body[data-sidebar="dark"]  .vertical-menu .brand-line2 { color: #a6b0cf; }
body[data-sidebar="light"] .vertical-menu .brand-line1 { color: #343a40; }
body[data-sidebar="light"] .vertical-menu .brand-line2 { color: #7b8190; }

/* ---------- Account rep (far-left topbar) ---------- */
.account-rep {
    padding: 0 .5rem;
    line-height: 1.15;
}
.account-rep .rep-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.account-rep .rep-phone {
    font-weight: 700;
    font-size: .95rem;
}
/* Text follows the topbar's colour scheme */
body[data-topbar="dark"]  .account-rep .rep-label { color: rgba(255, 255, 255, .6); }
body[data-topbar="dark"]  .account-rep .rep-phone,
body[data-topbar="dark"]  .account-rep .rep-phone:hover { color: #fff; }
body[data-topbar="light"] .account-rep .rep-label { color: rgba(0, 0, 0, .5); }
body[data-topbar="light"] .account-rep .rep-phone,
body[data-topbar="light"] .account-rep .rep-phone:hover { color: #495057; }

/* ---------- User avatar initial ---------- */
.avatar-initial-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bs-primary, #3b76e1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .9rem;
}

/* ---------- Login page ---------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bs-secondary-bg, #eef0f7);
}
.auth-card {
    width: 100%;
    max-width: 430px;
    border: none;
}
.auth-card .brand-logo {
    justify-content: center;
}
.auth-card .brand-line1,
.auth-card .brand-line2 {
    color: var(--bs-body-color);
}

/* ---------- Welcome modal banners ---------- */
.welcome-banner-danger {
    background: #e0403f;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-radius: .4rem;
    padding: .6rem 1rem;
}
.welcome-banner-warning {
    display: inline-block;
    background: #ffe000;
    color: #1a1a1a;
    font-weight: 700;
    border-radius: .4rem;
    padding: .45rem 1rem;
}
.welcome-dial {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--bs-primary, #3b76e1);
}
.welcome-points li {
    max-width: 470px;
    margin: 0 auto .5rem;
    padding-left: .25rem;
}

/* ---------- Feature grid (icon cards) ---------- */
.feature-icon {
    width: 86px;
    height: 86px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59, 118, 225, .1);
    color: var(--bs-primary, #3b76e1);
    font-size: 2.7rem;
    line-height: 1;
}

/* ---------- Placeholder pages (video + skeleton content) ---------- */
.video-placeholder {
    width: 100%;
    height: 100%;
    background: var(--bs-tertiary-bg, #f1f3f9);
    border: 2px dashed var(--bs-border-color, #ced4da);
    border-radius: .5rem;
}

/* ---------- Legacy content compatibility ----------
   The step pages were ported verbatim from the old (Bootstrap 4 / AdminLTE)
   site. These shims make that markup render correctly under the BS5 theme. */

/* Full-width stacked buttons (BS4 .btn-block) */
.btn-block {
    display: block;
    width: 100%;
}
.btn-block + .btn-block {
    margin-top: .5rem;
}

/* Colored badges (BS4 .badge-*) */
.badge-primary   { background-color: var(--bs-primary)   !important; color: #fff; }
.badge-secondary { background-color: var(--bs-secondary) !important; color: #fff; }
.badge-success   { background-color: var(--bs-success)   !important; color: #fff; }
.badge-info      { background-color: var(--bs-info)      !important; color: #fff; }
.badge-warning   { background-color: var(--bs-warning)   !important; color: #212529; }
.badge-danger    { background-color: var(--bs-danger)    !important; color: #fff; }
.badge-dark      { background-color: var(--bs-dark)      !important; color: #fff; }

/* Font Awesome list utilities (not bundled in the theme's icons.css) */
.fa-ul {
    list-style-type: none;
    margin-left: 2.5em;
    padding-left: 0;
}
.fa-ul > li {
    position: relative;
}
.fa-li {
    position: absolute;
    left: -2em;
    width: 2em;
    text-align: center;
    line-height: inherit;
}

/* ---------- Page Builder (v3) ---------- */
/* Library cards: scaled-down live iframe thumbnails */
.tpl-card .tpl-thumb {
    height: 230px;
    overflow: hidden;
    position: relative;
    border-radius: .4rem .4rem 0 0;
    background: #10243f;
}
.tpl-card .tpl-thumb iframe {
    width: 1280px;
    height: 1150px;
    border: 0;
    transform: scale(0.24);
    transform-origin: 0 0;
    pointer-events: none;
}
.tpl-cat-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-weight: 600;
    backdrop-filter: blur(2px);
}

/* Editor layout */
.editor-panel { max-height: 76vh; overflow-y: auto; }
.editor-preview iframe {
    width: 100%;
    height: 72vh;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    background: #fff;
    transition: width .2s;
}
#html-source { font-size: .8rem; }

/* Affiliate network logo cards (step 4) */
.network-card {
    transition: transform .15s, box-shadow .15s;
}
/* Keep theme text colors inside the linked card (anchors tint everything). */
.network-card .card-title { color: var(--bs-heading-color, var(--bs-body-color)); }
.network-card .card-text { color: var(--bs-secondary-color); font-size: .85rem; }
.network-card .mp-num { font-weight: 800; font-size: 2rem; }
.network-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 25, 50, .18) !important;
}
.network-card img {
    max-height: 56px;
    width: auto;
    object-fit: contain;
}

/* AWeber-style highlighter chips (step 2) */
.hl-chip {
    position: relative;
    display: inline-block;
    font-weight: 900;
    font-size: 1.2rem;
    padding: .15rem .7rem;
    color: #1c2333;
    white-space: nowrap;
}
.hl-chip::before {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    top: 18%;
    bottom: 8%;
    background: var(--hl, #7ee3f2);
    border-radius: .35rem .9rem .4rem .8rem;
    transform: skew(-7deg) rotate(-1.5deg);
    opacity: .9;
}
.hl-chip > span { position: relative; }
body[data-bs-theme="dark"] .hl-chip { color: #16181c; }
/* Dark mode: expand the highlight to a full pill so the dark text always
   sits on the pastel background, never on the dark page. */
body[data-bs-theme="dark"] .hl-chip::before { top: 2%; bottom: 2%; opacity: 1; }

/* Traffic source brand tiles (step 5) */
.traffic-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    width: 92px;
}
.traffic-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    box-shadow: 0 8px 18px rgba(15, 25, 50, .18);
    transition: transform .15s;
}
.traffic-tile:hover .traffic-icon { transform: translateY(-4px) scale(1.06); }
.traffic-name { font-size: .8rem; font-weight: 600; }

/* Business Setup checklist (welcome page) */
.setup-item { cursor: pointer; }
.setup-item .setup-check { cursor: pointer; }
.setup-item.setup-done .setup-label { text-decoration: line-through; opacity: .55; }

/* Ebook tiles + reader (step 5) */
button.traffic-tile { border: 0; background: transparent; padding: 0; cursor: pointer; }
.traffic-ebook { position: relative; width: 104px; }
.traffic-icon-lg { width: 78px; height: 78px; font-size: 2.5rem; border-radius: 22px; }
.traffic-ebook:hover .traffic-icon { transform: translateY(-4px) scale(1.07); }
.traffic-icon-sm { width: 48px; height: 48px; font-size: 1.5rem; border-radius: 14px; box-shadow: 0 5px 12px rgba(15,25,50,.15); }
.traffic-tile-sm { width: 76px; opacity: .8; }
.traffic-tile-sm .traffic-name { font-size: .72rem; }
.ebook-badge { font-size: .58rem; letter-spacing: .04em; margin-top: -2px; }
.traffic-icon-xs { width: 34px; height: 34px; font-size: 1.15rem; border-radius: 9px; display: inline-flex;
    align-items: center; justify-content: center; color: #fff; }

.ebook-body { max-width: 760px; margin: 0 auto; text-align: left; line-height: 1.7; font-size: 1rem; }
.ebook-body .eb-cover { font-size: 1.9rem; font-weight: 900; text-align: center; margin: .5rem 0 .25rem; }
.ebook-body .eb-sub { text-align: center; font-size: 1.05rem; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.ebook-body .eb-kicker { text-align: center; font-style: italic; color: var(--bs-secondary-color);
    margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--bs-border-color); }
.ebook-body h1 { font-size: 1.4rem; font-weight: 800; margin: 1.8rem 0 .75rem; }
.ebook-body h2 { font-size: 1.15rem; font-weight: 800; margin: 1.4rem 0 .6rem; }
.ebook-body h3 { font-size: 1.02rem; font-weight: 700; margin: 1.1rem 0 .5rem; }
.ebook-body p { margin-bottom: .85rem; }
.ebook-body ul, .ebook-body ol { margin: 0 0 1rem 1.25rem; }
.ebook-body li { margin-bottom: .4rem; }
.ebook-body table { width: 100%; border: 1px solid var(--bs-border-color); border-radius: .4rem;
    margin: 1rem 0; border-collapse: separate; border-spacing: 0; overflow: hidden;
    background: var(--bs-tertiary-bg); }
.ebook-body td, .ebook-body th { padding: .75rem 1rem; vertical-align: top; }
.ebook-body td p:last-child { margin-bottom: 0; }

/* Personal Coach strategy-session card */
.coach-dial {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 900;
    color: var(--bs-primary, #3b76e1);
}
.coach-dial:hover { color: #1f58c7; }
.coach-burst {
    background:
        repeating-conic-gradient(from 0deg, rgba(123, 97, 255, .06) 0deg 10deg, transparent 10deg 20deg),
        var(--bs-tertiary-bg, #f4f2fb);
    border: 1px solid var(--bs-border-color);
}
.coach-points li {
    position: relative;
    padding: .45rem 0 .45rem 2.1rem;
    font-size: 1.05rem;
}
.coach-points li::before {
    content: "\27A1";
    position: absolute;
    left: 0;
    top: .45rem;
    font-size: 1.1rem;
}

/* Mobile (<992px): the theme hides the sidebar entirely; show the topbar
   hamburger and let it toggle the slide-over drawer (body.sidebar-enable). */
@media (max-width: 991.98px) {
    #sidebar-expand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* We show the (fixed) brand box in the drawer, so push the menu below it. */
    .vertical-menu .sidebar-menu-scroll {
        margin-top: 75px;
        height: calc(100% - 75px);
    }
    /* The mini-rail collapse button is meaningless in the drawer. */
    #sidebar-collapse { display: none; }
}