/* ==========================================================
   LOCALHOSTING UK
   OPTIONAL EXTRAS PAGE
   ========================================================== */


/* ==========================================================
   LIGHT MODE VARIABLES
   ========================================================== */

.lhuk-extras-page {

    --lhuk-bg: #ffffff;

    --lhuk-surface: #f3f3f8;
    --lhuk-surface-soft: #f7f7fa;

    --lhuk-text: #17182f;
    --lhuk-text-soft: #70758e;
    --lhuk-text-muted: #85899d;

    --lhuk-border: #d9d9e5;
    --lhuk-border-strong: #c8c8da;

    --lhuk-purple: #8064ed;
    --lhuk-purple-bright: #9278ff;

    --lhuk-purple-soft:
        rgba(128, 100, 237, .12);

    --lhuk-container: 1160px;


    position: relative;

    width: 100vw !important;

    max-width: none !important;

    left: 50%;

    margin-left: -50vw !important;

    margin-right: 0 !important;

    padding: 0 !important;

    background:
        var(--lhuk-bg);

    color:
        var(--lhuk-text);

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

    overflow: hidden;

    transition:
        background-color .25s ease,
        color .25s ease;
}


/* ==========================================================
   WHMCS CONTAINER OVERRIDES
   ========================================================== */

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

    padding-top: 0 !important;

    padding-bottom: 0 !important;

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


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

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;
}


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

    margin-left: 0 !important;

    margin-right: 0 !important;
}


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

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

    box-sizing: border-box;
}


.lhuk-extras-page h1,
.lhuk-extras-page h2,
.lhuk-extras-page p {

    margin-top: 0;
}


.lhuk-extras-page button {

    font-family: inherit;
}


.lhuk-extras-page a {

    box-shadow: none !important;
}


/* ==========================================================
   CONTENT CONTAINER
   ========================================================== */

.lhuk-extras-container {

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

    max-width:
        var(--lhuk-container);

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


/* ==========================================================
   MAIN
   ========================================================== */

.lhuk-extras-main {

    width: 100%;

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


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

.lhuk-extras-hero {

    padding:
        58px
        0
        36px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 16px;
}


/* ==========================================================
   OPTIONAL PILL
   ========================================================== */

.lhuk-extras-pill {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding:
        0
        14px;

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

    border-radius: 999px;

    background:
        transparent;

    color:
        var(--lhuk-purple);

    font-size: 11px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: .01em;
}


/* ==========================================================
   HERO TITLE
   ========================================================== */

.lhuk-extras-title {

    max-width: 780px;

    margin: 0;

    color:
        var(--lhuk-text);

    font-size:
        clamp(
            40px,
            4.4vw,
            52px
        );

    line-height: 1.07;

    font-weight: 500;

    letter-spacing: -.045em;
}


/* ==========================================================
   HERO INTRO
   ========================================================== */

.lhuk-extras-intro {

    max-width: 600px;

    margin: 0;

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

    font-size: 16px;

    line-height: 1.65;

    font-weight: 400;
}


/* ==========================================================
   CARD GRID
   ========================================================== */

.lhuk-extras-grid {

    display: grid;

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

    gap: 16px;

    padding:
        0
        0
        76px;
}


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

.lhuk-extra-card {

    min-width: 0;

    min-height: 330px;

    padding:
        25px
        24px
        23px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

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

    border-radius: 30px;

    background:
        var(--lhuk-surface);

    box-shadow:
        0 12px 35px
        rgba(
            31,
            32,
            62,
            .055
        );

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .25s ease;
}


/* ==========================================================
   CARD HOVER
   ========================================================== */

.lhuk-extra-card:hover {

    transform:
        translateY(-2px);

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

    box-shadow:
        0 18px 45px
        rgba(
            31,
            32,
            62,
            .10
        );
}


/* ==========================================================
   CARD TITLE
   ========================================================== */

.lhuk-extra-title {

    margin:
        0
        0
        8px;

    color:
        var(--lhuk-text);

    font-size: 16px;

    line-height: 1.3;

    font-weight: 500;

    letter-spacing: -.015em;
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.lhuk-extra-description {

    margin:
        0
        0
        10px;

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

    font-size: 13px;

    line-height: 1.6;

    font-weight: 400;
}


/* ==========================================================
   WHEN YOU'D WANT IT
   ========================================================== */

.lhuk-extra-when {

    margin: 0;

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

    font-size: 12px;

    line-height: 1.55;

    font-style: italic;
}


.lhuk-extra-when span {

    font-weight: 500;
}


/* ==========================================================
   PRICE
   ========================================================== */

.lhuk-extra-price {

    margin-top: auto;

    padding-top: 16px;

    color:
        var(--lhuk-purple);

    font-size: 17px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: -.015em;
}


/* ==========================================================
   ADD LATER BUTTON
   ========================================================== */

.lhuk-extra-button {

    width: 100%;

    margin-top: 17px;

    padding:
        7px
        14px;

    border: 0;

    border-radius: 999px;

    background:
        transparent;

    color:
        var(--lhuk-purple);

    font-size: 13px;

    line-height: 1.4;

    font-weight: 600;

    cursor: pointer;

    text-align: center;

    transition:
        background-color .2s ease,
        color .2s ease;
}


.lhuk-extra-button:hover {

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

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


.lhuk-extra-button:focus-visible {

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

    outline-offset: 3px;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html.dark .lhuk-extras-page,
html.dark-mode .lhuk-extras-page,
html.theme-dark .lhuk-extras-page,
html.mode-dark .lhuk-extras-page,
html.is-dark .lhuk-extras-page,
html[data-theme="dark"] .lhuk-extras-page,
html[data-color-scheme="dark"] .lhuk-extras-page,
html[data-color-mode="dark"] .lhuk-extras-page,
html[data-mode="dark"] .lhuk-extras-page,

body.dark .lhuk-extras-page,
body.dark-mode .lhuk-extras-page,
body.theme-dark .lhuk-extras-page,
body.mode-dark .lhuk-extras-page,
body.is-dark .lhuk-extras-page,
body[data-theme="dark"] .lhuk-extras-page,
body[data-color-scheme="dark"] .lhuk-extras-page,
body[data-color-mode="dark"] .lhuk-extras-page,
body[data-mode="dark"] .lhuk-extras-page,

.dark .lhuk-extras-page,
.dark-mode .lhuk-extras-page,
.theme-dark .lhuk-extras-page,
.mode-dark .lhuk-extras-page,
.is-dark .lhuk-extras-page,
[data-theme="dark"] .lhuk-extras-page,
[data-color-scheme="dark"] .lhuk-extras-page,
[data-color-mode="dark"] .lhuk-extras-page,
[data-mode="dark"] .lhuk-extras-page {

    --lhuk-bg: #141522;

    --lhuk-surface: #202330;

    --lhuk-surface-soft: #222532;

    --lhuk-text: #f3f2fa;

    --lhuk-text-soft: #989caf;

    --lhuk-text-muted: #85899e;

    --lhuk-border: #383b49;

    --lhuk-border-strong: #414452;

    --lhuk-purple: #9a7cff;

    --lhuk-purple-bright: #a78cff;

    --lhuk-purple-soft:
        rgba(
            154,
            124,
            255,
            .16
        );

    background:
        #141522;

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


/* ==========================================================
   DARK MODE — WHMCS BACKGROUND
   ========================================================== */

html.dark #main-body:has(.lhuk-extras-page),
html.dark-mode #main-body:has(.lhuk-extras-page),
html.theme-dark #main-body:has(.lhuk-extras-page),
html[data-theme="dark"] #main-body:has(.lhuk-extras-page),
html[data-mode="dark"] #main-body:has(.lhuk-extras-page),

body.dark #main-body:has(.lhuk-extras-page),
body.dark-mode #main-body:has(.lhuk-extras-page),
body.theme-dark #main-body:has(.lhuk-extras-page),
body[data-theme="dark"] #main-body:has(.lhuk-extras-page),
body[data-mode="dark"] #main-body:has(.lhuk-extras-page) {

    background:
        #141522 !important;
}


/* ==========================================================
   DARK CARDS
   ========================================================== */

html.dark .lhuk-extra-card,
html.dark-mode .lhuk-extra-card,
html.theme-dark .lhuk-extra-card,
html[data-theme="dark"] .lhuk-extra-card,
html[data-mode="dark"] .lhuk-extra-card,

body.dark .lhuk-extra-card,
body.dark-mode .lhuk-extra-card,
body.theme-dark .lhuk-extra-card,
body[data-theme="dark"] .lhuk-extra-card,
body[data-mode="dark"] .lhuk-extra-card,

.dark .lhuk-extra-card,
.dark-mode .lhuk-extra-card,
.theme-dark .lhuk-extra-card,
[data-theme="dark"] .lhuk-extra-card,
[data-mode="dark"] .lhuk-extra-card {

    background:
        #222532;

    border-color:
        #383b49;

    box-shadow:
        none;
}


/* ==========================================================
   DARK CARD HOVER
   ========================================================== */

html.dark .lhuk-extra-card:hover,
html.dark-mode .lhuk-extra-card:hover,
html.theme-dark .lhuk-extra-card:hover,
html[data-theme="dark"] .lhuk-extra-card:hover,
html[data-mode="dark"] .lhuk-extra-card:hover,

body.dark .lhuk-extra-card:hover,
body.dark-mode .lhuk-extra-card:hover,
body.theme-dark .lhuk-extra-card:hover,
body[data-theme="dark"] .lhuk-extra-card:hover,
body[data-mode="dark"] .lhuk-extra-card:hover,

.dark .lhuk-extra-card:hover,
.dark-mode .lhuk-extra-card:hover,
.theme-dark .lhuk-extra-card:hover,
[data-theme="dark"] .lhuk-extra-card:hover,
[data-mode="dark"] .lhuk-extra-card:hover {

    border-color:
        #8064ed;

    box-shadow:
        0 18px 42px
        rgba(
            0,
            0,
            0,
            .20
        );
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991px) {

    .lhuk-extras-container {

        width:
            min(
                760px,
                calc(100% - 36px)
            );
    }


    .lhuk-extras-hero {

        padding:
            55px
            0
            34px;
    }


    .lhuk-extras-title {

        font-size:
            clamp(
                42px,
                7vw,
                60px
            );
    }


    .lhuk-extras-grid {

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

        gap: 16px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .lhuk-extras-container {

        width:
            min(
                620px,
                calc(100% - 28px)
            );
    }


    .lhuk-extras-hero {

        padding:
            48px
            0
            30px;

        gap: 14px;
    }


    .lhuk-extras-pill {

        min-height: 31px;

        padding:
            0
            12px;

        font-size: 10px;
    }


    .lhuk-extras-title {

        max-width: 100%;

        font-size:
            clamp(
                38px,
                11vw,
                52px
            );

        line-height: 1.02;
    }


    .lhuk-extras-intro {

        font-size: 15px;

        line-height: 1.6;
    }


    .lhuk-extras-grid {

        grid-template-columns:
            1fr;

        gap: 14px;

        padding-bottom: 55px;
    }


    .lhuk-extra-card {

        min-height: 0;

        padding:
            23px
            21px
            21px;

        border-radius: 27px;
    }


    .lhuk-extra-title {

        font-size: 16px;
    }


    .lhuk-extra-description {

        font-size: 13px;
    }


    .lhuk-extra-when {

        font-size: 12px;
    }


    .lhuk-extra-price {

        padding-top: 18px;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    .lhuk-extras-page,
    .lhuk-extra-card,
    .lhuk-extra-button {

        transition: none;
    }


    .lhuk-extra-card:hover {

        transform: none;
    }

}