/* ============================================================
   KITWICK — BECOME AN AFFILIATE
   Matches Kitwick Homepage Design System
   Light + Dark Mode
   ============================================================ */


/* ============================================================
   FONT
   Keep Font Awesome icons working
   ============================================================ */

.lhuk-affiliate-page {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}

.lhuk-affiliate-page h1,
.lhuk-affiliate-page h2,
.lhuk-affiliate-page h3,
.lhuk-affiliate-page h4,
.lhuk-affiliate-page p,
.lhuk-affiliate-page span,
.lhuk-affiliate-page a,
.lhuk-affiliate-page li,
.lhuk-affiliate-page button,
.lhuk-affiliate-page input,
.lhuk-affiliate-page textarea,
.lhuk-affiliate-page select {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}


/* ============================================================
   KITWICK AFFILIATE — FONT
   Keep the existing theme icon font untouched
   ============================================================ */

.lhuk-affiliate-page {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}


/* Text elements */

.lhuk-affiliate-page h1,
.lhuk-affiliate-page h2,
.lhuk-affiliate-page h3,
.lhuk-affiliate-page h4,
.lhuk-affiliate-page h5,
.lhuk-affiliate-page h6,
.lhuk-affiliate-page p,
.lhuk-affiliate-page a,
.lhuk-affiliate-page span,
.lhuk-affiliate-page li,
.lhuk-affiliate-page button,
.lhuk-affiliate-page input,
.lhuk-affiliate-page textarea,
.lhuk-affiliate-page select {

    font-family: "Poppins", -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}


/*
 * IMPORTANT:
 * Do NOT set font-family on .fa / .fas / .far / .fab.
 *
 * Kitwick/WHMCS already loads the correct Font Awesome
 * version globally. Allow its own stylesheet to control
 * the icon font.
 */


/* ============================================================
   02. AFFILIATE VARIABLES
   Matching homepage.css
   ============================================================ */

.lhuk-affiliate-page {

    --lhuk-bg: #f7f7fa;
    --lhuk-bg-soft: #f1f1f7;

    --lhuk-card: #ffffff;
    --lhuk-card-soft: #f3f2f8;

    --lhuk-text: #202341;
    --lhuk-text-secondary: #70758f;
    --lhuk-text-muted: #85899e;

    --lhuk-border: #d8d8e2;
    --lhuk-border-dark: #c9c8d7;

    --lhuk-purple: #7561d9;
    --lhuk-purple-light: #a99cff;

    --lhuk-primary: #25243c;

    --lhuk-container: 1160px;

    --lhuk-radius: 28px;
    --lhuk-radius-small: 18px;

    --lhuk-shadow: 0 20px 60px rgba(31, 32, 62, 0.06);

    width: 100%;

    position: relative;

    color: var(--lhuk-text);

    background: var(--lhuk-bg);

    overflow: hidden;
}


/* ============================================================
   03. DARK MODE
   Exactly matching homepage.css
   ============================================================ */

body.dark .lhuk-affiliate-page,
body.dark-mode .lhuk-affiliate-page,
body.theme-dark .lhuk-affiliate-page,
body[data-theme="dark"] .lhuk-affiliate-page,
html[data-theme="dark"] .lhuk-affiliate-page {

    --lhuk-bg: #151624;
    --lhuk-bg-soft: #1b1c2b;

    --lhuk-card: #222331;
    --lhuk-card-soft: #242536;

    --lhuk-text: #f0eff7;
    --lhuk-text-secondary: #a6a8bb;
    --lhuk-text-muted: #85889e;

    --lhuk-border: #3c3d50;
    --lhuk-border-dark: #4b4c61;

    --lhuk-primary: #f2f1f8;

    --lhuk-shadow: 0 20px 70px rgba(0, 0, 0, 0.20);
}


/* ============================================================
   04. WHMCS PAGE RESET
   ============================================================ */

#main-body:has(.lhuk-affiliate-page) {

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#main-body:has(.lhuk-affiliate-page) > .container {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

#main-body:has(.lhuk-affiliate-page) .row {

    margin-left: 0;
    margin-right: 0;
}


/* ============================================================
   05. SHARED CONTAINER
   Same as homepage
   ============================================================ */

.lhuk-affiliate-page .lhuk-home-container {

    width: min(
        calc(100% - 48px),
        var(--lhuk-container)
    );

    margin: 0 auto;
}


/* ============================================================
   06. GENERAL RESET
   ============================================================ */

.lhuk-affiliate-page *,
.lhuk-affiliate-page *::before,
.lhuk-affiliate-page *::after {

    box-sizing: border-box;
}

.lhuk-affiliate-page h1,
.lhuk-affiliate-page h2,
.lhuk-affiliate-page h3,
.lhuk-affiliate-page h4,
.lhuk-affiliate-page p {

    margin-top: 0;
}

.lhuk-affiliate-page a {

    box-shadow: none;
}


/* ============================================================
   07. HERO
   EXACT HOMEPAGE HERO SPACING
   ============================================================ */

.lhuk-affiliate-hero {

    position: relative;

    width: 100%;

    padding: 96px 0 90px;

    color: var(--lhuk-text);

    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(118, 98, 217, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(211, 64, 109, 0.07),
            transparent 32%
        ),
        var(--lhuk-bg);
}


/* ============================================================
   DARK HERO
   ============================================================ */

html[data-theme="dark"] .lhuk-affiliate-hero,
body.dark .lhuk-affiliate-hero,
body.dark-mode .lhuk-affiliate-hero,
body.theme-dark .lhuk-affiliate-hero,
body[data-theme="dark"] .lhuk-affiliate-hero {

    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(118, 98, 217, 0.15),
            transparent 35%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(211, 64, 109, 0.06),
            transparent 32%
        ),
        var(--lhuk-bg);
}


/* ============================================================
   08. HERO GRID
   EXACT HOMEPAGE VALUES
   ============================================================ */

.lhuk-affiliate-hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 80px;
}


/* ============================================================
   09. HERO CONTENT
   ============================================================ */

.lhuk-affiliate-hero-content {

    min-width: 0;
}

.lhuk-affiliate-hero-content h1 {

    max-width: 690px;

    margin: 0;

    color: var(--lhuk-text);

    font-size: 60px;

    line-height: 1.2;

    font-weight: 500;

    letter-spacing: -0.035em;
}

.lhuk-affiliate-hero-content h1 span {

    color: var(--lhuk-purple);
}


.lhuk-affiliate-hero-intro {

    max-width: 620px;

    margin: 32px 0 0;

    color: var(--lhuk-text-secondary);

    font-size: 17px;

    line-height: 1.75;

    font-weight: 400;
}


/* ============================================================
   10. EYEBROW
   Same as homepage
   ============================================================ */

.lhuk-affiliate-page .lhuk-eyebrow {

    display: inline-flex;

    align-items: center;

    margin: 0 0 20px;

    padding: 9px 16px;

    border: 0;

    border-radius: 999px;

    background: var(--lhuk-purple);

    color: #ffffff;

    font-size: 11px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


/* ============================================================
   11. HERO ACTIONS
   ============================================================ */

.lhuk-affiliate-page .lhuk-hero-actions {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 34px;
}


/* ============================================================
   12. BUTTONS
   EXACT HOMEPAGE STYLE
   ============================================================ */

.lhuk-affiliate-page .lhuk-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 25px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.01em;

    line-height: 1;

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.lhuk-affiliate-page .lhuk-btn:hover {

    transform: translateY(-2px);

    text-decoration: none !important;
}


/* Primary / outlined button */

.lhuk-affiliate-page .lhuk-btn-primary {

    color: var(--lhuk-purple) !important;

    background: transparent !important;

    border: 1px solid var(--lhuk-purple) !important;

    box-shadow: none !important;
}

.lhuk-affiliate-page .lhuk-btn-primary:hover {

    color: #ffffff !important;

    background: var(--lhuk-purple) !important;

    border-color: var(--lhuk-purple) !important;
}


/* Text link */

.lhuk-affiliate-page .lhuk-text-link {

    display: inline-flex;

    align-items: center;

    color: var(--lhuk-purple) !important;

    font-size: 14px;

    font-weight: 500;

    text-decoration: none !important;

    transition: opacity 0.2s ease;
}

.lhuk-affiliate-page .lhuk-text-link:hover {

    opacity: 0.7;

    text-decoration: none !important;
}


/* ============================================================
   13. HERO BENEFITS
   ============================================================ */

.lhuk-affiliate-hero-benefits {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 34px;
}

.lhuk-affiliate-hero-benefits span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--lhuk-text-muted);

    font-size: 12px;

    line-height: 1.5;
}

.lhuk-affiliate-hero-benefits i {

    color: var(--lhuk-purple);

    font-size: 12px;
}


/* ============================================================
   14. HERO VISUAL
   EXACT HOMEPAGE DIMENSIONS
   ============================================================ */

.lhuk-affiliate-hero-visual {

    position: relative;

    width: 100%;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: visible;
}


/* ============================================================
   15. AFFILIATE DASHBOARD VISUAL
   ============================================================ */

.lhuk-affiliate-dashboard-card {

    position: relative;

    width: 100%;

    max-width: 680px;

    padding: 30px;

    border: 1px solid var(--lhuk-border);

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(117, 97, 217, 0.08),
            transparent 35%
        ),
        var(--lhuk-card);

    box-shadow: var(--lhuk-shadow);

    transform: translateX(10px);
}


/* ============================================================
   DASHBOARD TOP
   ============================================================ */

.lhuk-affiliate-dashboard-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;
}

.lhuk-affiliate-dashboard-top span {

    display: block;

    margin-bottom: 8px;

    color: var(--lhuk-text-muted);

    font-size: 12px;
}

.lhuk-affiliate-dashboard-top strong {

    display: block;

    color: var(--lhuk-text);

    font-size: 28px;

    font-weight: 500;

    line-height: 1.2;
}

.lhuk-affiliate-dashboard-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 52px;

    border-radius: 18px;

    background: var(--lhuk-card-soft);

    color: var(--lhuk-purple);

    font-size: 18px;
}


/* ============================================================
   CHART
   ============================================================ */

.lhuk-affiliate-chart {

    height: 160px;

    display: flex;

    align-items: flex-end;

    gap: 10px;

    margin-top: 32px;

    padding: 20px 10px 0;

    border-bottom: 1px solid var(--lhuk-border);
}

.lhuk-affiliate-chart span {

    display: block;

    flex: 1;

    min-width: 0;

    border-radius: 8px 8px 3px 3px;

    background:
        linear-gradient(
            to top,
            var(--lhuk-purple),
            var(--lhuk-purple-light)
        );

    opacity: 0.85;
}


/* ============================================================
   DASHBOARD STATS
   ============================================================ */

.lhuk-affiliate-dashboard-stats {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 20px;
}

.lhuk-affiliate-dashboard-stats > div {

    padding: 19px;

    border: 1px solid var(--lhuk-border);

    border-radius: 18px;

    background: var(--lhuk-card-soft);
}

.lhuk-affiliate-dashboard-stats strong {

    display: block;

    color: var(--lhuk-text);

    font-size: 20px;

    font-weight: 500;
}

.lhuk-affiliate-dashboard-stats span {

    display: block;

    margin-top: 4px;

    color: var(--lhuk-text-muted);

    font-size: 11px;
}


/* ============================================================
   FLOATING CARD
   ============================================================ */

.lhuk-affiliate-floating-card {

    position: absolute;

    right: -25px;

    bottom: 70px;

    width: 260px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 18px;

    border: 1px solid var(--lhuk-border);

    border-radius: 20px;

    background: var(--lhuk-card);

    box-shadow: var(--lhuk-shadow);

    transform: rotate(-2deg);
}

.lhuk-affiliate-floating-card > i {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 42px;

    border-radius: 14px;

    background: var(--lhuk-card-soft);

    color: var(--lhuk-purple);
}

.lhuk-affiliate-floating-card strong {

    display: block;

    color: var(--lhuk-text);

    font-size: 12px;

    font-weight: 600;
}

.lhuk-affiliate-floating-card span {

    display: block;

    margin-top: 4px;

    color: var(--lhuk-text-muted);

    font-size: 10px;

    line-height: 1.5;
}


/* ============================================================
   16. SHARED SECTIONS
   Matching homepage section rhythm
   ============================================================ */

.lhuk-affiliate-how-section,
.lhuk-affiliate-commission-section,
.lhuk-affiliate-products-section,
.lhuk-affiliate-benefits-section,
.lhuk-affiliate-faq-section {

    width: 100%;

    color: var(--lhuk-text);
}


/* Main section backgrounds */

.lhuk-affiliate-how-section,
.lhuk-affiliate-products-section,
.lhuk-affiliate-faq-section {

    padding: 110px 0;

    background: var(--lhuk-bg);
}

.lhuk-affiliate-commission-section,
.lhuk-affiliate-benefits-section {

    padding: 70px 0 110px;

    background: var(--lhuk-bg);
}


/* ============================================================
   17. SECTION HEADING
   Matching homepage
   ============================================================ */

.lhuk-affiliate-page .lhuk-section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 44px;
}

.lhuk-affiliate-page .lhuk-section-heading h2 {

    margin: 0;

    color: var(--lhuk-text);

    font-size: clamp(32px, 3.5vw, 38px);

    line-height: 1.1;

    font-weight: 500;

    letter-spacing: -0.035em;
}

.lhuk-affiliate-page .lhuk-section-heading p {

    max-width: 570px;

    margin: 18px 0 0;

    color: var(--lhuk-text-secondary);

    font-size: 15px;

    line-height: 1.7;
}


/* ============================================================
   18. HOW IT WORKS
   Similar to homepage purpose cards
   ============================================================ */

.lhuk-affiliate-steps {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.lhuk-affiliate-step {

    min-height: 270px;

    display: flex;

    flex-direction: column;

    padding: 28px;

    border: 1px solid var(--lhuk-border);

    border-radius: 25px;

    background: var(--lhuk-card);

    color: var(--lhuk-text);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.lhuk-affiliate-step:hover {

    transform: translateY(-4px);

    border-color: var(--lhuk-purple);
}

.lhuk-affiliate-step-number {

    display: block;

    color: var(--lhuk-purple);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.08em;
}

.lhuk-affiliate-step-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 27px;

    border-radius: 18px;

    background: var(--lhuk-card-soft);

    color: var(--lhuk-purple);

    font-size: 18px;
}

.lhuk-affiliate-step h3 {

    margin: 24px 0 14px;

    color: var(--lhuk-text);

    font-size: 21px;

    line-height: 1.25;

    font-weight: 500;
}

.lhuk-affiliate-step p {

    margin: 0;

    color: var(--lhuk-text-secondary);

    font-size: 13px;

    line-height: 1.7;
}


/* ============================================================
   19. COMMISSION
   ============================================================ */

.lhuk-affiliate-commission-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.95fr);

    gap: 70px;
}


/* Commission card */

.lhuk-affiliate-commission-card {

    padding: 62px;

    border: 1px solid var(--lhuk-border);

    border-radius: 38px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(117, 97, 217, 0.09),
            transparent 45%
        ),
        var(--lhuk-card);

    box-shadow: var(--lhuk-shadow);
}

.lhuk-affiliate-commission-card h2 {

    max-width: 600px;

    margin: 0 0 25px;

    color: var(--lhuk-text);

    font-size: 38px;

    line-height: 1.08;

    font-weight: 500;

    letter-spacing: -0.04em;
}

.lhuk-affiliate-commission-card h2 strong {

    display: block;

    margin-top: 8px;

    color: var(--lhuk-purple);

    font-size: 50px;

    font-weight: 500;
}

.lhuk-affiliate-commission-card > p {

    max-width: 570px;

    margin: 0 0 28px;

    color: var(--lhuk-text-secondary);

    font-size: 15px;

    line-height: 1.8;
}

.lhuk-affiliate-commission-details {

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.lhuk-affiliate-commission-details div {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 19px 21px;

    border-radius: 20px;

    background: var(--lhuk-card-soft);

    color: var(--lhuk-text-secondary);

    font-size: 13px;

    line-height: 1.55;
}

.lhuk-affiliate-commission-details i {

    flex: 0 0 7px;

    margin-top: 6px;

    color: var(--lhuk-purple);
}

.lhuk-affiliate-commission-card small {

    display: block;

    margin-top: 25px;

    color: var(--lhuk-text-muted);

    font-size: 11px;

    line-height: 1.6;
}


/* ============================================================
   20. SERVICES
   ============================================================ */

.lhuk-affiliate-services-card {

    padding: 42px;

    border: 1px solid var(--lhuk-border);

    border-radius: 38px;

    background: var(--lhuk-card);

    box-shadow: var(--lhuk-shadow);
}

.lhuk-affiliate-services-card h2 {

    margin: 0 0 28px;

    color: var(--lhuk-text);

    font-size: 28px;

    line-height: 1.2;

    font-weight: 500;
}

.lhuk-affiliate-service-list {

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.lhuk-affiliate-service {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 19px 21px;

    border-radius: 20px;

    background: var(--lhuk-card-soft);
}

.lhuk-affiliate-service-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 42px;

    border-radius: 14px;

    background: var(--lhuk-bg);

    color: var(--lhuk-purple);
}

.lhuk-affiliate-service h3 {

    margin: 0;

    color: var(--lhuk-text);

    font-size: 14px;

    font-weight: 600;
}

.lhuk-affiliate-service p {

    margin: 4px 0 0;

    color: var(--lhuk-text-secondary);

    font-size: 12px;

    line-height: 1.55;
}

.lhuk-affiliate-service strong {

    display: block;

    margin-top: 7px;

    color: var(--lhuk-purple);

    font-size: 11px;
}


/* ============================================================
   21. PRODUCTS
   ============================================================ */

.lhuk-affiliate-product-group {

    margin-top: 40px;
}

.lhuk-affiliate-product-group + .lhuk-affiliate-product-group {

    margin-top: 58px;
}

.lhuk-affiliate-product-group-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 25px;
}

.lhuk-affiliate-product-group-heading h3 {

    margin: 0;

    color: var(--lhuk-text);

    font-size: 21px;

    font-weight: 500;
}

.lhuk-affiliate-product-group-heading span {

    color: var(--lhuk-text-muted);

    font-size: 12px;
}

.lhuk-affiliate-product-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.lhuk-affiliate-product-card {

    min-width: 0;

    display: flex;

    flex-direction: column;

    padding: 28px;

    border: 1px solid var(--lhuk-border);

    border-radius: 25px;

    background: var(--lhuk-card);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}

.lhuk-affiliate-product-card:hover {

    transform: translateY(-4px);

    border-color: var(--lhuk-purple);
}

.lhuk-affiliate-product-card h4 {

    margin: 0;

    color: var(--lhuk-text);

    font-size: 18px;

    font-weight: 500;
}

.lhuk-affiliate-product-card p {

    min-height: 45px;

    margin: 12px 0 0;

    color: var(--lhuk-text-secondary);

    font-size: 12px;

    line-height: 1.6;
}

.lhuk-affiliate-product-price {

    display: flex;

    align-items: baseline;

    gap: 5px;

    margin-top: auto;

    padding-top: 22px;
}

.lhuk-affiliate-product-price span {

    color: var(--lhuk-text-muted);

    font-size: 11px;
}

.lhuk-affiliate-product-price strong {

    color: var(--lhuk-purple);

    font-size: 23px;

    font-weight: 500;
}

.lhuk-affiliate-product-price small {

    color: var(--lhuk-text-muted);

    font-size: 11px;
}


/* ============================================================
   22. BENEFITS
   Similar to homepage purpose cards
   ============================================================ */

.lhuk-affiliate-benefits-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.lhuk-affiliate-benefit {

    min-height: 220px;

    padding: 28px;

    border: 1px solid var(--lhuk-border);

    border-radius: 25px;

    background: var(--lhuk-card);
}

.lhuk-affiliate-benefit-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 16px;

    background: var(--lhuk-card-soft);

    color: var(--lhuk-purple);

    font-size: 17px;
}

.lhuk-affiliate-benefit h3 {

    margin: 0 0 14px;

    color: var(--lhuk-text);

    font-size: 19px;

    line-height: 1.25;

    font-weight: 500;
}

.lhuk-affiliate-benefit p {

    margin: 0;

    color: var(--lhuk-text-secondary);

    font-size: 13px;

    line-height: 1.7;
}


/* ============================================================
   23. FAQ
   ============================================================ */

.lhuk-affiliate-faq-list {

    max-width: 900px;
}

.lhuk-affiliate-faq-list details {

    border-top: 1px solid var(--lhuk-border);
}

.lhuk-affiliate-faq-list details:last-child {

    border-bottom: 1px solid var(--lhuk-border);
}

.lhuk-affiliate-faq-list summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 22px 0;

    color: var(--lhuk-text);

    font-size: 15px;

    font-weight: 500;

    cursor: pointer;

    list-style: none;
}

.lhuk-affiliate-faq-list summary::-webkit-details-marker {

    display: none;
}

.lhuk-affiliate-faq-list summary span {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 30px;

    border: 1px solid var(--lhuk-border);

    border-radius: 50%;

    color: var(--lhuk-purple);

    font-size: 18px;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.lhuk-affiliate-faq-list details[open] summary span {

    transform: rotate(45deg);

    background: var(--lhuk-card-soft);
}

.lhuk-affiliate-faq-list details p {

    max-width: 760px;

    margin: -2px 0 24px;

    padding-right: 50px;

    color: var(--lhuk-text-secondary);

    font-size: 14px;

    line-height: 1.75;
}


/* ============================================================
   24. FINAL CTA
   Matching homepage final CTA style
   ============================================================ */

.lhuk-affiliate-cta-section {

    padding: 10px 0 75px;

    background: var(--lhuk-bg);
}

.lhuk-affiliate-cta-card {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding: 58px;

    border: 1px solid var(--lhuk-border);

    border-radius: 38px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(117, 97, 217, 0.09),
            transparent 45%
        ),
        var(--lhuk-card);

    box-shadow: var(--lhuk-shadow);
}

.lhuk-affiliate-cta-card h2 {

    max-width: 650px;

    margin: 0 0 20px;

    color: var(--lhuk-text);

    font-size: clamp(34px, 4vw, 38px);

    line-height: 1.08;

    font-weight: 500;

    letter-spacing: -0.04em;
}

.lhuk-affiliate-cta-card p {

    max-width: 590px;

    margin: 0;

    color: var(--lhuk-text-secondary);

    font-size: 15px;

    line-height: 1.8;
}

.lhuk-affiliate-cta-card .lhuk-btn {

    flex-shrink: 0;
}


/* ============================================================
   25. DESKTOP
   Same positioning as homepage
   ============================================================ */

@media (min-width: 1101px) {

    .lhuk-affiliate-hero-visual {

        min-height: 570px;

        margin-right: -25px;
    }

    .lhuk-affiliate-dashboard-card {

        transform: translateX(10px);
    }
}


/* ============================================================
   26. TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .lhuk-affiliate-page .lhuk-home-container {

        width: min(
            calc(100% - 40px),
            920px
        );
    }

    .lhuk-affiliate-hero-grid {

        gap: 45px;
    }

    .lhuk-affiliate-hero-content h1 {

        font-size: 52px;
    }

    .lhuk-affiliate-hero-visual {

        min-height: 460px;

        margin-top: 10px;
    }

    .lhuk-affiliate-dashboard-card {

        max-width: 600px;

        transform: none;
    }

    .lhuk-affiliate-steps {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .lhuk-affiliate-product-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .lhuk-affiliate-benefits-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .lhuk-affiliate-commission-grid {

        gap: 45px;
    }
}


/* ============================================================
   27. TABLET / SMALL LAPTOP
   ============================================================ */

@media (max-width: 900px) {

    .lhuk-affiliate-commission-grid {

        grid-template-columns: 1fr;
    }

    .lhuk-affiliate-commission-card,
    .lhuk-affiliate-services-card {

        padding: 45px;
    }

    .lhuk-affiliate-cta-card {

        padding: 45px;
    }
}


/* ============================================================
   28. MOBILE
   EXACT HOMEPAGE MOBILE RHYTHM
   ============================================================ */

@media (max-width: 768px) {

    .lhuk-affiliate-page .lhuk-home-container {

        width: calc(100% - 32px);
    }

    .lhuk-affiliate-hero {

        padding: 65px 0 70px;
    }

    .lhuk-affiliate-hero-grid {

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .lhuk-affiliate-hero-content h1 {

        font-size: clamp(42px, 12vw, 58px);
    }

    .lhuk-affiliate-hero-intro {

        font-size: 15px;
    }

    .lhuk-affiliate-page .lhuk-hero-actions {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

    .lhuk-affiliate-hero-benefits {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

        margin-top: 28px;
    }

    .lhuk-affiliate-hero-visual {

        min-height: 320px;

        margin-top: 20px;

        overflow: visible;
    }

    .lhuk-affiliate-dashboard-card {

        width: 100%;

        max-width: 580px;

        padding: 25px;

        transform: none;
    }

    .lhuk-affiliate-floating-card {

        right: -5px;

        bottom: 25px;

        width: 220px;
    }

    .lhuk-affiliate-how-section,
    .lhuk-affiliate-products-section,
    .lhuk-affiliate-faq-section {

        padding: 75px 0;
    }

    .lhuk-affiliate-commission-section,
    .lhuk-affiliate-benefits-section {

        padding: 30px 0 75px;
    }

    .lhuk-affiliate-page .lhuk-section-heading {

        display: block;

        margin-bottom: 30px;
    }

    .lhuk-affiliate-page .lhuk-section-heading h2 {

        font-size: 36px;
    }

    .lhuk-affiliate-steps {

        grid-template-columns: 1fr;
    }

    .lhuk-affiliate-step {

        min-height: 230px;
    }

    .lhuk-affiliate-product-grid {

        grid-template-columns: 1fr;
    }

    .lhuk-affiliate-benefits-grid {

        grid-template-columns: 1fr;
    }

    .lhuk-affiliate-benefit {

        min-height: auto;
    }

    .lhuk-affiliate-commission-card,
    .lhuk-affiliate-services-card {

        padding: 30px;

        border-radius: 28px;
    }

    .lhuk-affiliate-commission-card h2 {

        font-size: 36px;
    }

    .lhuk-affiliate-cta-section {

        padding: 10px 0 75px;
    }

    .lhuk-affiliate-cta-card {

        flex-direction: column;

        align-items: flex-start;

        padding: 35px 30px;

        border-radius: 28px;
    }

    .lhuk-affiliate-cta-card h2 {

        font-size: 36px;
    }
}


/* ============================================================
   29. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .lhuk-affiliate-page .lhuk-home-container {

        width: calc(100% - 30px);
    }

    .lhuk-affiliate-hero {

        padding: 60px 0 65px;
    }

    .lhuk-affiliate-hero-content h1 {

        font-size: 42px;
    }

    .lhuk-affiliate-hero-visual {

        min-height: 290px;
    }

    .lhuk-affiliate-dashboard-card {

        padding: 20px;

        border-radius: 24px;
    }

    .lhuk-affiliate-dashboard-stats {

        gap: 8px;
    }

    .lhuk-affiliate-dashboard-stats > div {

        padding: 14px;
    }

    .lhuk-affiliate-floating-card {

        width: 195px;

        right: -8px;

        bottom: 15px;
    }

    .lhuk-affiliate-page .lhuk-section-heading h2 {

        font-size: 32px;
    }

    .lhuk-affiliate-commission-card,
    .lhuk-affiliate-services-card {

        padding: 25px;
    }

    .lhuk-affiliate-commission-card h2 {

        font-size: 32px;
    }

    .lhuk-affiliate-commission-card h2 strong {

        font-size: 44px;
    }

    .lhuk-affiliate-cta-card {

        padding: 30px 25px;
    }

    .lhuk-affiliate-cta-card h2 {

        font-size: 32px;
    }

    .lhuk-affiliate-cta-card .lhuk-btn {

        width: 100%;
    }
}


/* ============================================================
   30. ACCESSIBILITY
   ============================================================ */

.lhuk-affiliate-page a:focus-visible,
.lhuk-affiliate-page summary:focus-visible {

    outline: 2px solid var(--lhuk-purple);

    outline-offset: 4px;
}


/* ============================================================
   31. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .lhuk-affiliate-page *,
    .lhuk-affiliate-page *::before,
    .lhuk-affiliate-page *::after {

        transition: none !important;

        animation: none !important;
    }
}

/* ============================================================
   32. AFFILIATES.PHP — KITWICK AFFILIATE DASHBOARD
   Uses the same affiliate.css as become-an-affiliate.tpl
   ============================================================ */

/*
 * The existing affiliate.css already styles the public
 * .lhuk-affiliate-page. The rules below are specifically for
 * the actual affiliates.tpl dashboard markup.
 *
 * IMPORTANT:
 * These rules are intentionally placed at the END of the file
 * so they override any earlier public-page rules that reuse
 * names such as .lhuk-affiliate-dashboard-card.
 */


/* ============================================================
   PAGE RESET
   ============================================================ */

#main-body:has(.lhuk-affiliate-page) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#main-body:has(.lhuk-affiliate-page) > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#main-body:has(.lhuk-affiliate-page) > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ============================================================
   DASHBOARD HEADER
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-dashboard-header {
    width: 100%;
    padding: 82px 0 52px;
    background: var(--lhuk-bg);
    color: var(--lhuk-text);
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-header h1 {
    margin: 8px 0 18px;
    color: var(--lhuk-text);
    font-size: 52px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-header p {
    max-width: 680px;
    margin: 0;
    color: var(--lhuk-text-secondary);
    font-size: 16px;
    line-height: 1.75;
}


/* ============================================================
   DASHBOARD CONTENT
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-dashboard-section {
    width: 100%;
    padding: 0 0 100px;
    background: var(--lhuk-bg);
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-section
.lhuk-home-container {
    width: min(calc(100% - 48px), 1160px);
    margin: 0 auto;
}


/* ============================================================
   SUCCESS MESSAGE
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-dashboard-alert {
    width: min(calc(100% - 48px), 1160px);
    margin: 30px auto 0;
    padding: 15px 18px;
    border: 1px solid rgba(117, 97, 217, 0.30);
    border-radius: 14px;
    background: rgba(117, 97, 217, 0.08);
    color: var(--lhuk-text);
    font-size: 13px;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-alert i {
    margin-right: 8px;
    color: var(--lhuk-purple);
}


/* ============================================================
   STATISTICS
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-stat {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 23px;
    border: 1px solid var(--lhuk-border);
    border-radius: 24px;
    background: var(--lhuk-card);
    box-shadow: var(--lhuk-shadow);
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    border-radius: 15px;
    background: var(--lhuk-card-soft);
    color: var(--lhuk-purple);
    font-size: 16px;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-stat strong {
    display: block;
    margin: 0;
    color: var(--lhuk-text);
    font-size: 25px;
    line-height: 1.2;
    font-weight: 500;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-stat span {
    display: block;
    margin-top: 5px;
    color: var(--lhuk-text-muted);
    font-size: 11px;
    line-height: 1.4;
}


/* ============================================================
   DASHBOARD CARDS
   ============================================================ */

/*
 * This selector intentionally comes AFTER the public affiliate
 * dashboard visual styles because the same class name is used
 * by both pages.
 */

.lhuk-affiliate-page .lhuk-affiliate-dashboard-section
.lhuk-affiliate-dashboard-card {
    width: 100%;
    max-width: none;
    margin-top: 18px;
    padding: 30px;
    border: 1px solid var(--lhuk-border);
    border-radius: 26px;
    background: var(--lhuk-card);
    box-shadow: var(--lhuk-shadow);
    transform: none;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-card-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    border-radius: 15px;
    background: var(--lhuk-card-soft);
    color: var(--lhuk-purple);
    font-size: 16px;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-card-heading h2 {
    margin: 0;
    color: var(--lhuk-text);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 500;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-card-heading p {
    margin: 5px 0 0;
    color: var(--lhuk-text-secondary);
    font-size: 12px;
    line-height: 1.55;
}


/* ============================================================
   REFERRAL LINK
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-referral-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lhuk-affiliate-page .lhuk-affiliate-referral-link .form-control {
    min-width: 0;
    flex: 1 1 auto;
    height: 48px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid var(--lhuk-border) !important;
    border-radius: 12px !important;
    background: var(--lhuk-bg-soft) !important;
    color: var(--lhuk-text) !important;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif !important;
    font-size: 12px;
    box-shadow: none !important;
}

.lhuk-affiliate-page .lhuk-affiliate-referral-link
.form-control:focus {
    border-color: var(--lhuk-purple) !important;
    box-shadow: 0 0 0 2px rgba(117, 97, 217, 0.10) !important;
}

.lhuk-affiliate-page .lhuk-affiliate-copy-button {
    height: 48px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 20px;
    border: 1px solid var(--lhuk-purple) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--lhuk-purple) !important;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.lhuk-affiliate-page .lhuk-affiliate-copy-button:hover {
    color: #ffffff !important;
    background: var(--lhuk-purple) !important;
    transform: translateY(-1px);
}


/* ============================================================
   COMMISSION SUMMARY
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-commission-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lhuk-affiliate-page .lhuk-affiliate-commission-summary > div {
    min-width: 0;
    padding: 21px;
    border: 1px solid var(--lhuk-border);
    border-radius: 18px;
    background: var(--lhuk-card-soft);
}

.lhuk-affiliate-page .lhuk-affiliate-commission-summary span {
    display: block;
    margin: 0 0 7px;
    color: var(--lhuk-text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.lhuk-affiliate-page .lhuk-affiliate-commission-summary strong {
    display: block;
    color: var(--lhuk-text);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
}

.lhuk-affiliate-page .lhuk-affiliate-commission-available {
    border-color: rgba(117, 97, 217, 0.30) !important;
}


/* ============================================================
   WITHDRAWAL CARD
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-withdraw-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    margin-top: 18px;
    padding: 27px 30px;
    border: 1px solid var(--lhuk-border);
    border-radius: 26px;
    background: var(--lhuk-card);
    box-shadow: var(--lhuk-shadow);
}

.lhuk-affiliate-page .lhuk-affiliate-withdraw-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    border-radius: 16px;
    background: var(--lhuk-card-soft);
    color: var(--lhuk-purple);
    font-size: 17px;
}

.lhuk-affiliate-page .lhuk-affiliate-withdraw-content h2 {
    margin: 0 0 6px;
    color: var(--lhuk-text);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
}

.lhuk-affiliate-page .lhuk-affiliate-withdraw-content p {
    margin: 0;
    color: var(--lhuk-text-secondary);
    font-size: 12px;
    line-height: 1.6;
}

.lhuk-affiliate-page .lhuk-affiliate-withdraw-action form {
    margin: 0;
}

.lhuk-affiliate-page .lhuk-affiliate-withdraw-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border: 1px solid var(--lhuk-purple) !important;
    border-radius: 999px !important;
    background: var(--lhuk-purple) !important;
    color: #ffffff !important;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.lhuk-affiliate-page .lhuk-affiliate-withdraw-button:hover:not(:disabled) {
    transform: translateY(-1px);
    opacity: 0.90;
}

.lhuk-affiliate-page .lhuk-affiliate-withdraw-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ============================================================
   ACTIVITY HEADING
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-dashboard-heading {
    margin: 70px 0 25px;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-heading
.lhuk-eyebrow {
    margin-bottom: 15px;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-heading h2 {
    margin: 0;
    color: var(--lhuk-text);
    font-size: 36px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-heading p {
    max-width: 650px;
    margin: 12px 0 0;
    color: var(--lhuk-text-secondary);
    font-size: 14px;
    line-height: 1.7;
}


/* ============================================================
   REFERRALS TABLE
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-dashboard-table {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--lhuk-border);
    border-radius: 24px;
    background: var(--lhuk-card);
    box-shadow: var(--lhuk-shadow);
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-table table {
    width: 100%;
    min-width: 700px;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse;
    background: transparent !important;
    color: var(--lhuk-text) !important;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-table
table thead th {
    padding: 16px 18px;
    border: 0 !important;
    border-bottom: 1px solid var(--lhuk-border) !important;
    background: var(--lhuk-card-soft) !important;
    color: var(--lhuk-text-muted) !important;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-table
table tbody td {
    padding: 17px 18px;
    border: 0 !important;
    border-bottom: 1px solid var(--lhuk-border) !important;
    background: transparent !important;
    color: var(--lhuk-text-secondary) !important;
    font-size: 12px;
    line-height: 1.5;
    vertical-align: middle;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-table
table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-table
table tbody tr:hover td {
    background: var(--lhuk-card-soft) !important;
}


/* ============================================================
   STATUS BADGES
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-dashboard-table
.label,
.lhuk-affiliate-page .lhuk-affiliate-dashboard-table
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
}


/* ============================================================
   TABLE LOADING
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-dashboard-loading {
    padding: 35px 20px;
    color: var(--lhuk-text-muted);
    font-size: 12px;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-loading p {
    margin: 0;
}

.lhuk-affiliate-page .lhuk-affiliate-dashboard-loading i {
    margin-right: 7px;
    color: var(--lhuk-purple);
}


/* ============================================================
   AFFILIATE CODE
   ============================================================ */

.lhuk-affiliate-page .lhuk-affiliate-code {
    padding: 20px;
    border: 1px solid var(--lhuk-border);
    border-radius: 16px;
    background: var(--lhuk-bg-soft);
    color: var(--lhuk-text-secondary);
    font-size: 12px;
    line-height: 1.7;
    overflow-x: auto;
}


/* ============================================================
   GENERIC WHMCS ELEMENTS INSIDE DASHBOARD
   ============================================================ */

.lhuk-affiliate-page .affiliate-dashboard-content
.panel,
.lhuk-affiliate-page .affiliate-dashboard-content
.card {
    border-color: var(--lhuk-border) !important;
    background: var(--lhuk-card) !important;
    color: var(--lhuk-text) !important;
}

.lhuk-affiliate-page .form-control {
    border-color: var(--lhuk-border) !important;
    background: var(--lhuk-bg-soft) !important;
    color: var(--lhuk-text) !important;
    box-shadow: none !important;
}

.lhuk-affiliate-page .form-control:focus {
    border-color: var(--lhuk-purple) !important;
    box-shadow: 0 0 0 2px rgba(117, 97, 217, 0.10) !important;
}


/* ============================================================
   DARK MODE — EXPLICIT DASHBOARD OVERRIDES
   ============================================================ */

html[data-theme="dark"] .lhuk-affiliate-page
.lhuk-affiliate-dashboard-header,
html[data-theme="dark"] .lhuk-affiliate-page
.lhuk-affiliate-dashboard-section {
    background: var(--lhuk-bg);
}

html[data-theme="dark"] .lhuk-affiliate-page
.lhuk-affiliate-dashboard-stat,
html[data-theme="dark"] .lhuk-affiliate-page
.lhuk-affiliate-dashboard-card,
html[data-theme="dark"] .lhuk-affiliate-page
.lhuk-affiliate-withdraw-card,
html[data-theme="dark"] .lhuk-affiliate-page
.lhuk-affiliate-dashboard-table {
    background: var(--lhuk-card);
}

html[data-theme="dark"] .lhuk-affiliate-page
.lhuk-affiliate-dashboard-table table thead th {
    background: var(--lhuk-card-soft) !important;
}

body.dark .lhuk-affiliate-page
.lhuk-affiliate-dashboard-header,
body.dark .lhuk-affiliate-page
.lhuk-affiliate-dashboard-section {
    background: var(--lhuk-bg);
}

body.dark .lhuk-affiliate-page
.lhuk-affiliate-dashboard-stat,
body.dark .lhuk-affiliate-page
.lhuk-affiliate-dashboard-card,
body.dark .lhuk-affiliate-page
.lhuk-affiliate-withdraw-card,
body.dark .lhuk-affiliate-page
.lhuk-affiliate-dashboard-table {
    background: var(--lhuk-card);
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 900px) {

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-header {
        padding: 68px 0 45px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-header h1 {
        font-size: 44px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-stats-grid {
        grid-template-columns: 1fr;
    }

    .lhuk-affiliate-page .lhuk-affiliate-withdraw-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .lhuk-affiliate-page .lhuk-affiliate-withdraw-action {
        grid-column: 1 / -1;
    }

    .lhuk-affiliate-page .lhuk-affiliate-withdraw-button {
        width: 100%;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-section
    .lhuk-home-container {
        width: calc(100% - 32px);
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-header {
        padding: 58px 0 38px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-header h1 {
        font-size: clamp(38px, 10vw, 46px);
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-header p {
        font-size: 14px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-section {
        padding-bottom: 70px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-stat {
        padding: 20px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-section
    .lhuk-affiliate-dashboard-card {
        padding: 22px;
        border-radius: 22px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-card-heading {
        align-items: flex-start;
    }

    .lhuk-affiliate-page .lhuk-affiliate-referral-link {
        flex-direction: column;
        align-items: stretch;
    }

    .lhuk-affiliate-page .lhuk-affiliate-copy-button {
        width: 100%;
    }

    .lhuk-affiliate-page .lhuk-affiliate-commission-summary {
        grid-template-columns: 1fr;
    }

    .lhuk-affiliate-page .lhuk-affiliate-withdraw-card {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-withdraw-icon {
        margin-bottom: -5px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-withdraw-action {
        grid-column: auto;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-heading {
        margin-top: 55px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-heading h2 {
        font-size: 32px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-table {
        border-radius: 20px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-table
    table {
        min-width: 700px;
    }
}


/* ============================================================
   RESPONSIVE — SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-section
    .lhuk-home-container {
        width: calc(100% - 30px);
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-header {
        padding: 50px 0 32px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-header h1 {
        font-size: 36px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-stat {
        gap: 13px;
        padding: 18px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-stat-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-stat strong {
        font-size: 22px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-section
    .lhuk-affiliate-dashboard-card {
        padding: 20px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-card-heading h2 {
        font-size: 17px;
    }

    .lhuk-affiliate-page .lhuk-affiliate-dashboard-heading h2 {
        font-size: 29px;
    }
}