/* BEGIN HOSTPLUS SERVICE RENEWALS */


/* ==========================================================
   HOSTPLUS SERVICE RENEWALS
========================================================== */

#order-standard_cart.hp-renewals-page {

    --hp-renew-navy:
        #082f5d;

    --hp-renew-blue:
        #0f5794;

    --hp-renew-orange:
        #f57c0a;

    --hp-renew-orange-dark:
        #dc6900;

    --hp-renew-bg:
        #f4f7fb;

    --hp-renew-border:
        #dfe7ef;

    --hp-renew-muted:
        #77889a;

    color:
        #314a64;
}


/* ==========================================================
   GLOBAL PAGE
========================================================== */

body:has(.hp-renewals-page)
#main-body {

    background:
        #f4f7fb !important;

    padding-top:
        22px !important;

    padding-bottom:
        32px !important;
}


body:has(.hp-renewals-page)
#main-body > .container {

    max-width:
        1380px !important;
}


/* ==========================================================
   TOP HEADING
========================================================== */

.hp-renewals-page-heading {

    position:
        relative;

    min-height:
        110px;

    margin-bottom:
        21px;

    padding:
        21px 24px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfdff
        );

    border:
        1px solid var(--hp-renew-border);

    border-radius:
        17px;

    box-shadow:
        0 9px 28px
        rgba(8,42,77,.055);
}


.hp-renewals-page-heading-icon {

    flex:
        0 0 52px;

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #ff9a20,
            #f47700
        );

    border-radius:
        15px;

    font-size:
        22px;

    box-shadow:
        0 9px 20px
        rgba(244,119,0,.19);
}


.hp-renewals-page-heading-copy {

    min-width:
        0;

    flex:
        1 1 auto;
}


.hp-renewals-page-heading h1 {

    margin:
        0 0 5px !important;

    color:
        var(--hp-renew-navy);

    font-size:
        27px !important;

    line-height:
        1.2;

    font-weight:
        800;

    letter-spacing:
        -.35px;
}


.hp-renewals-page-heading p {

    margin:
        0;

    color:
        #7b8c9f;

    font-size:
        11.5px;
}


/* ==========================================================
   TOP TOOLS
========================================================== */

.hp-renewals-tools {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;
}


.hp-renewals-filter-button {

    min-height:
        41px;

    padding:
        8px 13px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #35526f !important;

    background:
        #f7fafd !important;

    border:
        1px solid #d8e3ed !important;

    border-radius:
        9px !important;

    font-size:
        10.5px;

    font-weight:
        700;

    box-shadow:
        none !important;
}


.hp-renewals-filter-button:hover {

    color:
        #0b4f86 !important;

    background:
        #fff !important;

    border-color:
        #aac5dc !important;
}


.hp-renewals-search {

    position:
        relative;

    width:
        235px;
}


.hp-renewals-search > i {

    position:
        absolute;

    z-index:
        4;

    left:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #67819a;

    pointer-events:
        none;
}


.hp-renewals-search input {

    height:
        41px !important;

    padding-left:
        39px !important;

    background:
        #f8fafc !important;

    border:
        1px solid #d9e3ec !important;

    border-radius:
        9px !important;

    font-size:
        10.5px !important;

    box-shadow:
        none !important;
}


/* ==========================================================
   MAIN TWO-COLUMN AREA
========================================================== */

.hp-renewals-layout {

    align-items:
        flex-start;
}


.hp-renewals-page
.secondary-cart-body {

    width:
        67%;

    flex:
        0 0 67%;

    max-width:
        67%;

    padding-right:
        11px;
}


.hp-renewals-page
.secondary-cart-sidebar {

    width:
        33%;

    flex:
        0 0 33%;

    max-width:
        33%;

    padding-left:
        11px;
}


/* ==========================================================
   SERVICE LIST CARD
========================================================== */

.hp-renewals-list-card {

    overflow:
        hidden;

    background:
        #fff;

    border:
        1px solid var(--hp-renew-border);

    border-radius:
        17px;

    box-shadow:
        0 9px 28px
        rgba(8,42,77,.055);
}


.hp-renewals-list-header {

    min-height:
        95px;

    padding:
        20px 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid #edf1f5;
}


.hp-renewals-eyebrow {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--hp-renew-orange);

    font-size:
        8.5px;

    font-weight:
        850;

    letter-spacing:
        1.25px;
}


.hp-renewals-list-header h2 {

    margin:
        0 0 4px;

    color:
        var(--hp-renew-navy);

    font-size:
        20px;

    font-weight:
        800;
}


.hp-renewals-list-header p {

    margin:
        0;

    color:
        #8291a2;

    font-size:
        10.5px;
}


.hp-renewals-count {

    flex:
        0 0 auto;

    min-width:
        58px;

    height:
        39px;

    padding:
        0 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    color:
        #17629e;

    background:
        #edf6fd;

    border:
        1px solid #d9ebf8;

    border-radius:
        10px;

    font-size:
        11px;

    font-weight:
        800;
}


.hp-renewals-showing {

    padding:
        10px 22px;

    color:
        #75869a;

    background:
        #fbfcfe;

    border-bottom:
        1px solid #edf1f5;

    font-size:
        10px;
}


.hp-renewals-showing a {

    margin-left:
        4px;

    color:
        #126eb5;

    font-weight:
        700;
}


/* ==========================================================
   RENEWAL ITEM
========================================================== */

.hp-renewal-item {

    position:
        relative;

    margin:
        0 !important;

    padding:
        20px 22px !important;

    background:
        #fff !important;

    border:
        0 !important;

    border-bottom:
        1px solid #edf1f5 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;
}


.hp-renewal-item:last-child {

    border-bottom:
        0 !important;
}


.hp-renewal-item-main {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;
}


.hp-renewal-service-icon {

    flex:
        0 0 43px;

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #0d639f;

    background:
        #edf6fd;

    border:
        1px solid #d8ebf8;

    border-radius:
        12px;

    font-size:
        17px;
}


.hp-renewal-service-copy {

    min-width:
        0;

    flex:
        1 1 auto;
}


.hp-renewal-title-line {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        15px;
}


.hp-renewal-title-line h3 {

    margin:
        0 0 3px !important;

    color:
        #102f54;

    font-size:
        15px !important;

    line-height:
        1.3;

    font-weight:
        800;
}


.hp-renewal-domain {

    color:
        #1471b8;

    font-size:
        10.5px;

    font-weight:
        650;
}


.hp-renewal-domain i {

    margin-right:
        5px;

    color:
        #7c9ab4;
}


/* ==========================================================
   RENEWAL BADGES
========================================================== */

.hp-renewal-badge {

    min-height:
        25px;

    padding:
        5px 9px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    border-radius:
        999px;

    font-size:
        8.5px;

    font-weight:
        800;

    white-space:
        nowrap;
}


.hp-renewal-badge-warning {

    color:
        #976000;

    background:
        #fff2cf;

    border:
        1px solid #f7dda4;
}


.hp-renewal-badge-muted {

    color:
        #647689;

    background:
        #edf1f5;

    border:
        1px solid #dde4eb;
}


/* ==========================================================
   RENEWAL DETAILS
========================================================== */

.hp-renewal-details {

    margin-top:
        15px;

    display:
        grid;

    grid-template-columns:
        minmax(150px, .7fr)
        minmax(250px, 1.5fr);

    gap:
        10px;
}


.hp-renewal-detail {

    padding:
        10px 12px;

    background:
        #f8fafc;

    border:
        1px solid #edf1f5;

    border-radius:
        9px;
}


.hp-renewal-detail > span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #8a98a8;

    font-size:
        8.5px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .35px;
}


.hp-renewal-detail strong {

    display:
        block;

    color:
        #314e6a;

    font-size:
        10px;

    line-height:
        1.45;

    font-weight:
        700;
}


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

.hp-renewal-item-action {

    margin-top:
        14px;

    display:
        flex;

    justify-content:
        flex-end;
}


.hp-renewal-add-btn {

    min-height:
        39px;

    padding:
        8px 14px !important;

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #ff9720,
            #f47700
        ) !important;

    border:
        0 !important;

    border-radius:
        9px !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    box-shadow:
        0 7px 16px
        rgba(244,119,0,.17) !important;
}


.hp-renewal-add-btn .to-add,

.hp-renewal-add-btn .added {

    align-items:
        center;

    gap:
        7px;
}


.hp-renewal-add-btn .to-add {

    display:
        inline-flex;
}


.hp-renewal-add-btn .added {

    display:
        none;

    color:
        #fff !important;
}


.hp-renewal-button-arrow {

    margin-left:
        3px;
}


/* ==========================================================
   NON-RENEWABLE
========================================================== */

.hp-renewal-ineligible {

    margin-top:
        13px;

    padding:
        9px 11px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        7px;

    color:
        #7b6570;

    background:
        #fff4f4;

    border:
        1px solid #f7dddd;

    border-radius:
        8px;

    font-size:
        9.5px;

    line-height:
        1.45;
}


/* ==========================================================
   ADDONS
========================================================== */

.hp-addon-renewals {

    margin:
        18px 0 0 57px !important;

    padding:
        15px !important;

    background:
        #f9fbfd;

    border:
        1px solid #e8eef4;

    border-radius:
        11px;
}


.hp-addon-renewals > h4 {

    margin:
        0 0 10px !important;

    color:
        #405b75;

    font-size:
        11px !important;

    font-weight:
        800;
}


/* ==========================================================
   ORDER SUMMARY
========================================================== */

.hp-renewals-summary-card {

    overflow:
        hidden;

    background:
        #fff;

    border:
        1px solid var(--hp-renew-border);

    border-radius:
        17px;

    box-shadow:
        0 9px 28px
        rgba(8,42,77,.065);
}


.hp-renewals-summary-card
.order-summary {

    position:
        relative;

    padding:
        21px 21px 16px !important;

    background:
        #fff !important;

    border:
        0 !important;
}


.hp-renewals-summary-heading {

    padding-bottom:
        17px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    border-bottom:
        1px solid #edf1f5;
}


.hp-renewals-summary-icon {

    flex:
        0 0 40px;

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #f47700;

    background:
        #fff1e1;

    border:
        1px solid #ffe0b9;

    border-radius:
        11px;

    font-size:
        17px;
}


.hp-renewals-summary-heading span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #f47700;

    font-size:
        7.5px;

    font-weight:
        850;

    letter-spacing:
        1.1px;
}


.hp-renewals-summary-heading h2 {

    margin:
        0 !important;

    color:
        #0c315b;

    font-size:
        16px !important;

    line-height:
        1.2;

    font-weight:
        800;
}


/* Dynamic WHMCS total */

.hp-renewals-summary-card
#producttotal {

    padding-top:
        15px;
}


.hp-renewals-summary-card
.summary-container {

    color:
        #53687d;
}


.hp-renewals-summary-card
.summary-container .subtotal,

.hp-renewals-summary-card
.summary-container .total {

    border-color:
        #edf1f5 !important;
}


.hp-renewals-cart-action {

    padding:
        0 21px 21px;
}


.hp-renewals-cart-btn {

    width:
        100%;

    min-height:
        46px;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #ff9820,
            #f47700
        ) !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    font-size:
        11px !important;

    font-weight:
        850 !important;

    box-shadow:
        0 9px 20px
        rgba(244,119,0,.20) !important;
}


.hp-renewals-cart-btn:hover {

    color:
        #fff !important;

    transform:
        translateY(-1px);
}


/* ==========================================================
   LOADER
========================================================== */

.hp-renewals-summary-card
#orderSummaryLoader {

    color:
        #f47700 !important;
}


/* ==========================================================
   SIDEBAR
========================================================== */

.hp-renewals-page
.cart-sidebar {

    padding-right:
        17px;
}


.hp-renewals-page
.cart-sidebar .panel,

.hp-renewals-page
.cart-sidebar .card {

    overflow:
        hidden;

    margin-bottom:
        15px;

    background:
        #fff;

    border:
        1px solid #dfe7ef !important;

    border-radius:
        14px !important;

    box-shadow:
        0 7px 21px
        rgba(8,42,77,.05);
}


.hp-renewals-page
.cart-sidebar .panel-heading,

.hp-renewals-page
.cart-sidebar .card-header {

    padding:
        12px 14px !important;

    color:
        #173b5f;

    background:
        #fff !important;

    border-bottom:
        1px solid #edf1f5 !important;

    font-size:
        11.5px;

    font-weight:
        800;
}


.hp-renewals-page
.cart-sidebar a {

    color:
        #536a80;
}


.hp-renewals-page
.cart-sidebar a:hover {

    color:
        #f47700;
}


/* ==========================================================
   EMPTY
========================================================== */

.hp-renewals-empty {

    padding:
        45px 25px;

    text-align:
        center;

    background:
        #fff;

    border:
        1px solid #dfe7ef;

    border-radius:
        17px;

    box-shadow:
        0 9px 28px
        rgba(8,42,77,.05);
}


.hp-renewals-empty-icon {

    width:
        58px;

    height:
        58px;

    margin:
        0 auto 13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #f47700;

    background:
        #fff1e1;

    border-radius:
        16px;

    font-size:
        23px;
}


.hp-renewals-empty h3 {

    margin:
        0 0 6px;

    color:
        #0a315c;

    font-size:
        19px;

    font-weight:
        800;
}


.hp-renewals-empty p {

    margin:
        0 0 16px;

    color:
        #7c8da0;

    font-size:
        11px;
}


/* ==========================================================
   FOOTER GAP
========================================================== */

body:has(.hp-renewals-page)
.hp-mega-footer {

    margin-top:
        20px !important;
}


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

@media (max-width: 991.98px) {

    .hp-renewals-page-heading {

        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }


    .hp-renewals-tools {

        width:
            100%;

        justify-content:
            flex-start;

        padding-left:
            67px;
    }


    .hp-renewals-page
    .secondary-cart-body,

    .hp-renewals-page
    .secondary-cart-sidebar {

        width:
            100%;

        flex:
            0 0 100%;

        max-width:
            100%;

        padding-left:
            0;

        padding-right:
            0;
    }


    .hp-renewals-summary-column {

        margin-top:
            18px;
    }

}


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

@media (max-width: 767.98px) {

    .hp-renewals-page-heading {

        padding:
            17px;

        border-radius:
            14px;
    }


    .hp-renewals-page-heading-icon {

        flex-basis:
            44px;

        width:
            44px;

        height:
            44px;

        border-radius:
            12px;

        font-size:
            18px;
    }


    .hp-renewals-page-heading h1 {

        font-size:
            20px !important;
    }


    .hp-renewals-page-heading p {

        font-size:
            10px;
    }


    .hp-renewals-tools {

        padding-left:
            0;

        display:
            block;
    }


    .hp-renewals-filter-button {

        width:
            100%;

        justify-content:
            center;
    }


    .hp-renewals-search {

        width:
            100%;

        margin-top:
            9px;
    }


    .hp-renewals-list-header {

        padding:
            17px;
    }


    .hp-renewal-item {

        padding:
            17px !important;
    }


    .hp-renewal-title-line {

        display:
            block;
    }


    .hp-renewal-status {

        margin-top:
            8px;
    }


    .hp-renewal-details {

        grid-template-columns:
            1fr;
    }


    .hp-renewal-item-action {

        justify-content:
            stretch;
    }


    .hp-renewal-add-btn {

        width:
            100%;
    }


    .hp-addon-renewals {

        margin-left:
            0 !important;
    }

}


/* END HOSTPLUS SERVICE RENEWALS */


/* BEGIN HOSTPLUS MODERN PRODUCTS */


/* ==========================================================
   HOSTPLUS ORDER PRODUCTS
========================================================== */

#order-hostplus-products {

    --hp-navy:
        #082f5d;

    --hp-blue:
        #0e5a97;

    --hp-orange:
        #f57c0a;

    --hp-border:
        #dfe7ef;

    --hp-bg:
        #f4f7fb;

    color:
        #314b65;
}


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

body:has(#order-hostplus-products)
#main-body {

    padding-top:
        22px !important;

    padding-bottom:
        34px !important;

    background:
        #f4f7fb !important;
}


body:has(#order-hostplus-products)
#main-body > .container {

    max-width:
        1390px !important;
}


/* ==========================================================
   MAIN FLEX LAYOUT
========================================================== */

.hp-product-selection-layout {

    display:
        flex !important;

    align-items:
        flex-start;

    flex-wrap:
        nowrap !important;

    margin:
        0 !important;

    left:
        auto !important;
}


.hp-products-sidebar {

    flex:
        0 0 235px;

    width:
        235px !important;

    max-width:
        235px !important;

    padding:
        0 17px 0 0 !important;
}


.hp-products-main {

    flex:
        1 1 auto;

    min-width:
        0;

    width:
        auto !important;
}


/* ==========================================================
   SIDEBAR
========================================================== */

.hp-products-sidebar .panel,
.hp-products-sidebar .card {

    overflow:
        hidden;

    margin-bottom:
        15px;

    background:
        #fff;

    border:
        1px solid #dfe7ef !important;

    border-radius:
        14px !important;

    box-shadow:
        0 7px 21px
        rgba(8,42,77,.05);
}


.hp-products-sidebar .panel-heading,
.hp-products-sidebar .card-header {

    padding:
        12px 14px !important;

    color:
        #153a5f !important;

    background:
        #fff !important;

    border-bottom:
        1px solid #edf1f5 !important;

    font-size:
        11.5px;

    font-weight:
        800;
}


.hp-products-sidebar a {

    color:
        #526a80 !important;
}


.hp-products-sidebar a:hover,
.hp-products-sidebar a.active {

    color:
        #f47700 !important;
}


/* ==========================================================
   PAGE HEADING
========================================================== */

.hp-products-page-heading {

    min-height:
        112px;

    margin-bottom:
        20px;

    padding:
        21px 24px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fbfdff
        );

    border:
        1px solid #dfe7ef;

    border-radius:
        17px;

    box-shadow:
        0 9px 28px
        rgba(8,42,77,.055);
}


.hp-products-page-heading-icon {

    flex:
        0 0 52px;

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #ff9920,
            #f47700
        );

    border-radius:
        15px;

    box-shadow:
        0 9px 20px
        rgba(244,119,0,.19);

    font-size:
        22px;
}


.hp-products-page-heading-copy {

    min-width:
        0;

    flex:
        1 1 auto;
}


.hp-products-eyebrow {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #f47700;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        1.2px;
}


.hp-products-page-heading h1 {

    margin:
        0 0 4px !important;

    color:
        #082f5d !important;

    font-size:
        27px !important;

    line-height:
        1.2;

    font-weight:
        800 !important;

    letter-spacing:
        -.35px;
}


.hp-products-page-heading p {

    margin:
        0;

    color:
        #7f8fa1;

    font-size:
        11px;

    line-height:
        1.45;
}


.hp-products-heading-badge {

    flex:
        0 0 auto;

    min-height:
        39px;

    padding:
        0 13px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #3b607f;

    background:
        #f5faff;

    border:
        1px solid #d9e7f2;

    border-radius:
        9px;

    font-size:
        9.5px;

    font-weight:
        750;
}


/* ==========================================================
   PRODUCT GRID
========================================================== */

.hp-products-grid {

    display:
        grid !important;

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

    gap:
        17px;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


/* Center a single final card on 4-column layouts */

.hp-products-grid
.hp-product-card:last-child:nth-child(4n + 1) {

    grid-column:
        2 / span 2;

    width:
        calc(50% - 8px);

    justify-self:
        center;
}


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

.hp-product-card {

    position:
        relative;

    overflow:
        hidden;

    min-width:
        0;

    background:
        #fff;

    border:
        1px solid #dde6ef;

    border-radius:
        16px;

    box-shadow:
        0 8px 24px
        rgba(8,42,77,.055);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


.hp-product-card:hover {

    transform:
        translateY(-3px);

    border-color:
        #c7d8e6;

    box-shadow:
        0 14px 32px
        rgba(8,42,77,.09);
}


.hp-product-card-featured {

    border:
        2px solid #f5820b;

    box-shadow:
        0 13px 32px
        rgba(244,119,0,.12);
}


/* ==========================================================
   FEATURED BADGE
========================================================== */

.hp-product-featured-badge {

    position:
        absolute;

    z-index:
        5;

    top:
        12px;

    right:
        12px;

    min-height:
        25px;

    padding:
        5px 8px;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #fff;

    background:
        #f5820b;

    border-radius:
        999px;

    font-size:
        7px;

    font-weight:
        850;

    letter-spacing:
        .5px;
}


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

.hp-product-card-top {

    padding:
        20px 18px 17px;

    background:
        linear-gradient(
            180deg,
            #f7fbff 0%,
            #ffffff 78%
        );

    border-bottom:
        1px solid #edf1f5;
}


.hp-product-card-featured
.hp-product-card-top {

    background:
        linear-gradient(
            180deg,
            #fff8ef 0%,
            #ffffff 78%
        );
}


.hp-product-icon {

    width:
        46px;

    height:
        46px;

    margin-bottom:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #0c5e9c,
            #083d71
        );

    border-radius:
        13px;

    font-size:
        19px;

    box-shadow:
        0 8px 18px
        rgba(8,61,113,.15);
}


.hp-product-card-featured
.hp-product-icon {

    background:
        linear-gradient(
            135deg,
            #ff9821,
            #f47700
        );

    box-shadow:
        0 8px 18px
        rgba(244,119,0,.19);
}


.hp-product-type {

    min-height:
        12px;

    margin-bottom:
        4px;

    color:
        #f47700;

    font-size:
        7px;

    font-weight:
        850;

    letter-spacing:
        .75px;

    text-transform:
        uppercase;
}


.hp-product-card h2 {

    min-height:
        44px;

    margin:
        0 0 3px !important;

    color:
        #0a315d !important;

    font-size:
        16px !important;

    line-height:
        1.2;

    font-weight:
        800 !important;
}


.hp-product-tagline {

    min-height:
        27px;

    margin:
        0 !important;

    color:
        #8b99a8;

    font-size:
        9.5px;

    line-height:
        1.4;
}


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

.hp-product-price {

    min-height:
        72px;

    margin-top:
        16px;

    padding-top:
        14px;

    border-top:
        1px solid #edf1f5;

    color:
        #0b315d;
}


.hp-product-price
.hp-price-prefix {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #8594a5;

    font-size:
        8px;
}


.hp-product-price strong {

    display:
        block;

    color:
        #082f5d;

    font-size:
        22px;

    line-height:
        1.15;

    font-weight:
        850;

    letter-spacing:
        -.45px;
}


.hp-product-price
.hp-price-cycle {

    display:
        block;

    margin-top:
        2px;

    color:
        #8c9aa9;

    font-size:
        8.5px;
}


.hp-product-price small {

    display:
        block;

    margin-top:
        5px;

    color:
        #9ba6b2;

    font-size:
        8px;
}


/* ==========================================================
   CTA
========================================================== */

.hp-product-action {

    margin-top:
        13px;
}


.hp-product-order-button {

    width:
        100%;

    min-height:
        42px;

    padding:
        9px 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        #0b3f70 !important;

    background:
        #fff;

    border:
        1px solid #b8cfe2;

    border-radius:
        9px;

    font-size:
        10px;

    font-weight:
        800;

    text-decoration:
        none !important;

    transition:
        background .16s ease,
        color .16s ease,
        border-color .16s ease;
}


.hp-product-order-button:hover {

    color:
        #fff !important;

    background:
        #0b548d;

    border-color:
        #0b548d;
}


.hp-product-card-featured
.hp-product-order-button {

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #ff9720,
            #f47700
        );

    border-color:
        #f47700;

    box-shadow:
        0 7px 17px
        rgba(244,119,0,.17);
}


.hp-product-unavailable {

    color:
        #8a98a5 !important;

    background:
        #eef2f5;

    border-color:
        #e0e6eb;

    cursor:
        default;
}


/* ==========================================================
   FEATURES
========================================================== */

.hp-product-features {

    padding:
        16px 18px 19px;
}


.hp-product-feature {

    min-height:
        28px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    color:
        #526a80;

    font-size:
        9.5px;

    line-height:
        1.4;
}


.hp-product-check {

    flex:
        0 0 16px;

    width:
        16px;

    height:
        16px;

    margin-top:
        1px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #fff;

    background:
        #41b95e;

    border-radius:
        50%;

    font-size:
        7px;
}


.hp-product-description {

    color:
        #596e82;

    font-size:
        9.5px;

    line-height:
        1.6;
}


/* ==========================================================
   INCLUDED WITH PLANS
========================================================== */

.hp-products-included {

    margin-top:
        21px;

    padding:
        20px 22px;

    background:
        #fff;

    border:
        1px solid #dfe7ef;

    border-radius:
        16px;

    box-shadow:
        0 8px 24px
        rgba(8,42,77,.05);
}


.hp-products-included header {

    margin-bottom:
        15px;
}


.hp-products-included header > span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #f47700;

    font-size:
        7.5px;

    font-weight:
        850;

    letter-spacing:
        1px;
}


.hp-products-included h2 {

    margin:
        0 !important;

    color:
        #0a315d;

    font-size:
        17px;

    font-weight:
        800;
}


.hp-products-included-grid {

    display:
        grid;

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

    gap:
        9px;
}


.hp-products-included-item {

    min-height:
        38px;

    padding:
        8px 10px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #4f687e;

    background:
        #f8fafc;

    border:
        1px solid #edf1f5;

    border-radius:
        8px;

    font-size:
        9.5px;
}


.hp-products-included-item > span {

    width:
        17px;

    height:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #fff;

    background:
        #42b95e;

    border-radius:
        50%;

    font-size:
        7px;
}


/* ==========================================================
   MENU TOGGLE
========================================================== */

.hp-products-menu-toggle {

    margin-bottom:
        12px;

    color:
        #174d78 !important;

    background:
        #fff !important;

    border:
        1px solid #d7e3ec !important;

    border-radius:
        8px !important;

    font-size:
        10px;
}


/* ==========================================================
   REMOVE OLD PREMIUM COMPARISON VISUALS
========================================================== */

#order-hostplus-products
#order-premium_comparison {

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;
}


#order-hostplus-products
.price-table-container,

#order-hostplus-products
.main-container {

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;
}


/* ==========================================================
   FOOTER
========================================================== */

body:has(#order-hostplus-products)
.hp-mega-footer {

    margin-top:
        20px !important;
}


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

@media (max-width: 1199.98px) {

    .hp-products-grid {

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


    .hp-products-grid
    .hp-product-card:last-child:nth-child(4n + 1) {

        grid-column:
            auto;

        width:
            auto;

        justify-self:
            stretch;
    }

}


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

@media (max-width: 991.98px) {

    .hp-product-selection-layout {

        display:
            block !important;
    }


    .hp-products-sidebar {

        width:
            100% !important;

        max-width:
            none !important;

        padding:
            0 0 15px !important;
    }


    .hp-products-page-heading {

        flex-wrap:
            wrap;
    }


    .hp-products-heading-badge {

        margin-left:
            67px;
    }


    .hp-products-grid {

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


    .hp-products-included-grid {

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

}


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

@media (max-width: 767.98px) {

    .hp-products-page-heading {

        min-height:
            0;

        padding:
            17px;

        border-radius:
            14px;
    }


    .hp-products-page-heading-icon {

        flex-basis:
            44px;

        width:
            44px;

        height:
            44px;

        border-radius:
            12px;

        font-size:
            18px;
    }


    .hp-products-page-heading h1 {

        font-size:
            20px !important;
    }


    .hp-products-page-heading p {

        font-size:
            10px;
    }


    .hp-products-heading-badge {

        width:
            100%;

        margin:
            0;

        justify-content:
            center;
    }


    .hp-products-grid {

        grid-template-columns:
            1fr;

        gap:
            13px;
    }


    .hp-product-card h2 {

        min-height:
            0;
    }


    .hp-product-tagline {

        min-height:
            0;
    }


    .hp-products-included-grid {

        grid-template-columns:
            1fr;
    }

}


/* END HOSTPLUS MODERN PRODUCTS */


/* BEGIN HOSTPLUS PRODUCTS 3COL */


/* ==========================================================
   DESKTOP
   3 cards first row + 2 centered second row
========================================================== */

@media (min-width: 1200px) {

    #order-hostplus-products
    .hp-products-grid {

        display:
            grid !important;

        grid-template-columns:
            repeat(6, minmax(0, 1fr)) !important;

        gap:
            18px !important;
    }


    /*
     * Each card occupies 2 of the 6 grid columns.
     * Result: 3 equal cards per row.
     */

    #order-hostplus-products
    .hp-product-card {

        grid-column:
            span 2 !important;

        width:
            auto !important;

        min-width:
            0 !important;

        justify-self:
            stretch !important;
    }


    /*
     * Five products:
     * center the final two cards.
     */

    #order-hostplus-products
    .hp-product-card:nth-last-child(2):nth-child(3n + 1) {

        grid-column:
            2 / span 2 !important;
    }


    #order-hostplus-products
    .hp-product-card:last-child:nth-child(3n + 2) {

        grid-column:
            4 / span 2 !important;
    }


    /*
     * Disable the previous special last-card rule.
     */

    #order-hostplus-products
    .hp-products-grid
    .hp-product-card:last-child:nth-child(4n + 1) {

        width:
            auto !important;

        justify-self:
            stretch !important;
    }

}


/* ==========================================================
   CARD WIDTH / READABILITY
========================================================== */

@media (min-width: 1200px) {

    #order-hostplus-products
    .hp-product-card-top {

        padding:
            21px 20px 18px !important;
    }


    #order-hostplus-products
    .hp-product-card h2 {

        min-height:
            0 !important;

        font-size:
            17px !important;
    }


    #order-hostplus-products
    .hp-product-price strong {

        font-size:
            23px !important;
    }


    #order-hostplus-products
    .hp-product-features {

        padding:
            17px 20px 21px !important;
    }


    #order-hostplus-products
    .hp-product-feature {

        min-height:
            28px !important;

        font-size:
            9.5px !important;
    }

}


/* ==========================================================
   TABLET
   2 cards per row
========================================================== */

@media (min-width: 768px) and (max-width: 1199.98px) {

    #order-hostplus-products
    .hp-products-grid {

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

        gap:
            15px !important;
    }


    #order-hostplus-products
    .hp-product-card {

        grid-column:
            auto !important;

        width:
            auto !important;
    }

}


/* ==========================================================
   MOBILE
   1 card per row
========================================================== */

@media (max-width: 767.98px) {

    #order-hostplus-products
    .hp-products-grid {

        grid-template-columns:
            1fr !important;

        gap:
            13px !important;
    }


    #order-hostplus-products
    .hp-product-card {

        grid-column:
            auto !important;

        width:
            100% !important;

        max-width:
            520px;

        margin-left:
            auto;

        margin-right:
            auto;
    }

}


/* END HOSTPLUS PRODUCTS 3COL */


/* BEGIN HOSTPLUS PRODUCTS NO SIDEBAR */


/* Legacy menu/toggle must never appear */

#order-hostplus-products
#btnShowSidebar,

#order-hostplus-products
.product-selection-sidebar,

#order-hostplus-products
.hp-products-menu-toggle {

    display:
        none !important;
}


/* Full-width product area */

#order-hostplus-products
.hp-product-selection-layout {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    left:
        0 !important;

    position:
        static !important;
}


#order-hostplus-products
.hp-products-main {

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 auto !important;

    padding:
        0 !important;
}


/* Keep content nicely centered */

#order-hostplus-products {

    width:
        100%;

    max-width:
        1280px;

    margin:
        0 auto;
}


/* ==========================================================
   DESKTOP
   3 + 2 centered
========================================================== */

@media (min-width: 1200px) {

    #order-hostplus-products
    .hp-products-grid {

        grid-template-columns:
            repeat(6, minmax(0, 1fr)) !important;

        gap:
            18px !important;
    }


    #order-hostplus-products
    .hp-product-card {

        grid-column:
            span 2 !important;

        width:
            auto !important;

        justify-self:
            stretch !important;
    }


    /*
     * 5 cards:
     * cards 4 and 5 centered on second row
     */

    #order-hostplus-products
    .hp-product-card:nth-child(4) {

        grid-column:
            2 / span 2 !important;
    }


    #order-hostplus-products
    .hp-product-card:nth-child(5) {

        grid-column:
            4 / span 2 !important;
    }

}


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

@media (min-width: 768px) and (max-width: 1199.98px) {

    #order-hostplus-products
    .hp-products-grid {

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


    #order-hostplus-products
    .hp-product-card {

        grid-column:
            auto !important;
    }

}


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

@media (max-width: 767.98px) {

    #order-hostplus-products {

        max-width:
            none;
    }


    #order-hostplus-products
    .hp-products-grid {

        grid-template-columns:
            1fr !important;
    }


    #order-hostplus-products
    .hp-product-card {

        grid-column:
            auto !important;

        width:
            100% !important;
    }

}


/* END HOSTPLUS PRODUCTS NO SIDEBAR */


/* BEGIN HOSTPLUS PRODUCTS COMPACT CARDS */


/* ==========================================================
   COMPACT CARD HEADER

   [ icon ]  PACKAGE GROUP
             Plus GR2
========================================================== */

#order-hostplus-products
.hp-product-card-top {

    display:
        grid !important;

    grid-template-columns:
        42px minmax(0, 1fr) !important;

    grid-template-rows:
        auto auto auto auto !important;

    column-gap:
        11px !important;

    row-gap:
        0 !important;

    padding:
        16px 17px 14px !important;
}


/* Cloud icon */

#order-hostplus-products
.hp-product-icon {

    grid-column:
        1 !important;

    grid-row:
        1 / span 2 !important;

    align-self:
        center !important;

    width:
        38px !important;

    height:
        38px !important;

    margin:
        0 !important;

    border-radius:
        10px !important;

    font-size:
        15px !important;
}


/* "Πακέτα φιλοξενίας Plus GR" */

#order-hostplus-products
.hp-product-type {

    grid-column:
        2 !important;

    grid-row:
        1 !important;

    align-self:
        end !important;

    min-height:
        0 !important;

    margin:
        0 0 2px !important;

    color:
        #f47700 !important;

    font-size:
        6.8px !important;

    line-height:
        1.25 !important;

    font-weight:
        850 !important;

    letter-spacing:
        .55px !important;

    white-space:
        normal !important;
}


/* Plus GR1 / GR2 / GR3... */

#order-hostplus-products
.hp-product-card h2 {

    grid-column:
        2 !important;

    grid-row:
        2 !important;

    align-self:
        start !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    color:
        #082f5d !important;

    font-size:
        15px !important;

    line-height:
        1.12 !important;

    font-weight:
        850 !important;
}


/* Optional tagline */

#order-hostplus-products
.hp-product-tagline {

    grid-column:
        1 / -1 !important;

    grid-row:
        3 !important;

    min-height:
        0 !important;

    margin:
        7px 0 0 !important;

    font-size:
        8px !important;

    line-height:
        1.3 !important;
}


/* ==========================================================
   PRICE - LESS EMPTY SPACE
========================================================== */

#order-hostplus-products
.hp-product-price {

    grid-column:
        1 / -1 !important;

    grid-row:
        4 !important;

    min-height:
        0 !important;

    margin:
        12px 0 0 !important;

    padding:
        11px 0 0 !important;

    border-top:
        1px solid #edf1f5 !important;
}


#order-hostplus-products
.hp-product-price strong {

    font-size:
        20px !important;

    line-height:
        1.1 !important;
}


/* ==========================================================
   ORDER BUTTON
========================================================== */

#order-hostplus-products
.hp-product-action {

    grid-column:
        1 / -1 !important;

    margin:
        11px 0 0 !important;
}


#order-hostplus-products
.hp-product-order-button {

    min-height:
        38px !important;

    padding:
        7px 10px !important;
}


/* ==========================================================
   FEATURES - COMPACT VERTICAL RHYTHM
========================================================== */

#order-hostplus-products
.hp-product-features {

    padding:
        13px 17px 15px !important;
}


#order-hostplus-products
.hp-product-feature {

    min-height:
        23px !important;

    margin:
        0 !important;

    gap:
        7px !important;

    font-size:
        8.5px !important;

    line-height:
        1.25 !important;
}


#order-hostplus-products
.hp-product-check {

    flex:
        0 0 14px !important;

    width:
        14px !important;

    height:
        14px !important;

    margin-top:
        0 !important;

    font-size:
        6px !important;
}


/* ==========================================================
   FEATURED BADGE ALSO SMALLER
========================================================== */

#order-hostplus-products
.hp-product-featured-badge {

    top:
        8px !important;

    right:
        8px !important;

    min-height:
        21px !important;

    padding:
        4px 7px !important;

    font-size:
        6.5px !important;
}


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

@media (max-width: 767.98px) {

    #order-hostplus-products
    .hp-product-card-top {

        grid-template-columns:
            39px minmax(0, 1fr) !important;

        column-gap:
            10px !important;

        padding:
            15px !important;
    }


    #order-hostplus-products
    .hp-product-icon {

        width:
            36px !important;

        height:
            36px !important;
    }


    #order-hostplus-products
    .hp-product-card h2 {

        font-size:
            14px !important;
    }

}


/* END HOSTPLUS PRODUCTS COMPACT CARDS */


/* BEGIN HOSTPLUS FEATURES CLEAN V5 */


/*
 ============================================================
 HOSTPLUS PRODUCT FEATURES V5

 Uses unique class names intentionally.
 No dependency on the old hp-product-feature rules.
 ============================================================
*/


/* Feature list container */

#order-hostplus-products
.hp-v5-feature-list {

    display:
        block !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        13px 18px 15px !important;
}


/* One feature */

#order-hostplus-products
.hp-v5-feature-row {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 0 3px 0 !important;

    padding:
        0 !important;

    gap:
        0 !important;

    color:
        #536b80 !important;

    font-size:
        12px !important;

    font-weight:
        400 !important;

    line-height:
        1.18 !important;
}


/* No space after final feature */

#order-hostplus-products
.hp-v5-feature-row:last-child {

    margin-bottom:
        0 !important;
}


/* Actual text */

#order-hostplus-products
.hp-v5-feature-row > span:last-child {

    display:
        block !important;

    flex:
        1 1 auto !important;

    width:
        auto !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        inherit !important;

    font-size:
        12px !important;

    font-weight:
        400 !important;

    line-height:
        1.18 !important;
}


/*
 * Keep feature list clean:
 * no icon taking vertical/horizontal space.
 */

#order-hostplus-products
.hp-v5-feature-check {

    display:
        none !important;
}


/* Mobile */

@media (max-width: 767.98px) {

    #order-hostplus-products
    .hp-v5-feature-list {

        padding:
            13px 15px 15px !important;
    }


    #order-hostplus-products
    .hp-v5-feature-row,

    #order-hostplus-products
    .hp-v5-feature-row > span:last-child {

        font-size:
            12.5px !important;

        line-height:
            1.2 !important;
    }


    #order-hostplus-products
    .hp-v5-feature-row {

        margin-bottom:
            4px !important;
    }

}


/* END HOSTPLUS FEATURES CLEAN V5 */