/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}
:root {
  --color-one: #ff944d;
  --color-one-dark: #ff944d;
  --color-one-rgb: 42, 134, 46;
  --color-two: #ffd900;
  --color-two-dark: #f2ce05;
  --color-two-rgb: 255, 217, 0;
  --color-three: #1372de;
  --color-three-dark: #1168cb;
  --color-three-rgb: 19, 114, 222;
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --font-bootstrap: bootstrap-icons;
  --font-remixicon: remixicon;
  --transition: all 0.3s;
  --color-four: #f0f7fd;
}

/* New Custom CSS added */
body, html {
    background-color: #FFF;
}
section#main-body, .main-area.fix {
    background-color: var(--white);
}
#order-standard_cart .domains-row .btn-group {
    width: auto;
}
#order-standard_cart .domains-row label {
    width: auto;
    margin-top: 11px !important;
}
.btn-primary, 
.btn-info,
#btnDomainContinue {
    background: var(--color-one);
    color: var(--color-white);
    border: none;
}
.btn-primary:hover, 
.btn-primary:focus-visible,
.btn-info:hover {
    background: var(--color-one-dark);
    color: var(--color-white);
    border: none;
}
#order-standard_cart .domain-checker-advanced .multiselect {
    background-color: #e5e5e5 !important;
}
#order-standard_cart .domain-checker-advanced .multiselect-container label {
    padding: 0 0 0 0px !important;
    margin: 0 !important;
}
.multiselect-container > li > a {
    padding: 5px !important;
}
body #order-standard_cart .domain-selection-options {
    border: 0px;
}
body #order-standard_cart .domain-selection-options .option {
    background-color: var(--bg);
    margin: 0 0 12px 0;
    border: 1px solid var(--border-muted);
    padding: 15px !important;
}
body #order-standard_cart .domain-selection-options .option label {
    margin: 0px;
}
body #order-standard_cart .cart-body .header-lined h1 {
    font-size: 22px;
}
#DomainSearchResults .primary-domain-header, .suggested-domains .card-header, .suggested-domains .panel-heading {
    padding: 0 0 10px 0 !important;
    border-bottom: 1px solid #cdcdcd !important;
    font-size: 16px;
    font-weight: 600;
}
#order-standard_cart .domain-lookup-primary-loader, #order-standard_cart .domain-lookup-primary-results {
    margin: 0px 0;
    text-align: center;
    border: 1px solid var(--tg-theme-primary);
    border-radius: 8px;
    padding: 15px;
    background: #f0f9f0;
}
.flex.flex-row.gap-4.items-start.justify-center.content-start.pt-10.pb-6.px-8.w-full.md\:w-2\/5.bg-muted {
    border-radius: 8px;
    margin: 20px 0;
}
.flex.flex-row.gap-4.items-start.justify-center.content-start.pt-10.pb-6.px-8.w-full.md\:w-2\/5.bg-muted {
    margin: 20px 0 30px 0px;
    border-radius: 8px;
    border: 1px solid color-mix(in oklab,var(--border-color-default) 50%,transparent);
}
body #order-standard_cart .product-info p:empty, body #order-standard_cart .product-info br {
  display: none;
}
body #order-standard_cart .product-info ul {
    padding: 10px 0px 0px 0px;
    margin: 0;
}
body #order-standard_cart .product-info {
    font-size: 14px;
}
#order-standard_cart {
    margin-bottom: 30px !important;
}
.btn-default {
    color: #333 !important;
    background-color: #fff !important;
    border-color: #ccc !important;
    border-radius: var(--rounding-md) !important;
}
body .primary-content .client-home-cards .card .card-body {
    padding: 5px;
}
body .primary-content .client-home-cards .card-header .btn {
    padding: 4px 8px !important;
    font-size: 12px;
}
.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child), .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.btn-group > .btn-group:not(:first-child) > .btn, .btn-group > .btn:nth-child(n+3), .btn-group > :not(.btn-check) + .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
body .primary-content .client-home-cards .card .list-group .list-group-item .text-last-updated {
    font-size: 11px;
    color: #888;
}
.client-home-cards .card-header {
    border-bottom: 1px solid var(--border-muted);
}
.client-home-cards .card-header .card-title.m-0 {
    font-size: 14px;
    line-height: 30px;
}
.tiles .row {
    gap: 20px 0;
}
.tiles .tile {
    padding: 20px 15px;
    border: 1px dashed #D2D2D2 !important;
    background-color: #f6f6f6;
    position: relative;
    border-radius: 5px;
}
.tiles .tile i {
    font-size: 28px;
    right: 15px;
    top: 20px;
    position: absolute;
    color: #9c9c9c;
}
.tiles .tile:hover i {
    font-size: 28px;
}
.tiles .tile .stat {
    margin-top: 0;
    font-family: var(--tg-theme-primary);
    color: var(--body-color);
    font-size: 35px;
    font-weight: 500;
}
.tiles .tile .title {
    text-transform: capitalize;
    font-weight: 500;
    font-size: 14px;
}
.tiles .tile:hover {
    background-color: #EBF0EB;
}
.tiles .tile:hover i {
    font-size: 28px;
}
.no-gutters > .col, .no-gutters > [class*="col-"] {
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
}
.dataTables_wrapper > .listtable {
    width: 100%;
    background: #FFF;
    padding: 20px 25px;
    box-shadow: 0px 0px 20px 0px rgba(59, 65, 87, 0.08);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow-x: auto;
    border: 1px solid rgba(76, 87, 125, 0.08);
}
table.table-list tbody td:first-of-type {
    font-size: 14px;
    font-weight: 500;
}
table.table-list tbody td {
    font-size: 14px;
    line-height: 19px;
    color: var(--body-color);
    font-family: var(--font-primary);
    font-weight: 500;
}
div.dataTables_wrapper div.dataTables_length select {
    width: 70px;
}
div.dataTables_wrapper div.dataTables_info {
    padding-top: 0.40em !important;
}
#alertOverdueInvoice {
    padding: 10px;
}
#alertOverdueInvoice .btn.btn-xs.btn-default {
    padding: 5px 12px;
    font-size: 13px;
    margin-top: -5px;
}
.primary-content .card.kb-category .card-body {
    padding: 20px;
}
.primary-content .card.kb-category .card-body .h5.m-0 {
    font-size: 16px;
}
.primary-content .card.kb-category .card-body .m-0.text-muted {
    font-size: 14px;
    color: #888 !important;
}
#btnKnowledgebaseSearch {
    padding: 0px 20px;
}
body .primary-content .card .card-body {
    padding: 20px;
}
body .primary-content .card .card-body .card-title.m-0 {
    font-size: 18px;
}
.list-group small {
    font-size: 12px;
    color: #888;
    padding: 0 0 0 25px;
    margin: 0;
}
body .primary-content .card .card-body h1 {
    font-size: 18px;
}
body .primary-content .card .card-body hr {
    border-bottom: 1px solid #c3c3c3;
    margin: 5px 0;
}
body .primary-content .card .card-body h4 {
    font-size: 15px;
    padding-top: 10px;
}
.announcements .announcement {
    border: 1px solid rgb(242, 242, 242);
    --bs-bg-opacity: 1;
    background-color: rgb(255, 255, 255) !important;
    border-radius: var(--bs-border-radius) !important;
    padding: 20px;
    margin: 0 0 20px 0;
}
.announcements .announcement article {
    margin-bottom: 1rem;
    padding: 0;
    background-color: transparent;
    border-left: 0px;
    font-size: 14px;
    color: #707070;
}
body .primary-content .card .card-body .py-5 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-top: 1px solid #dadada;
}
body .primary-content .card .card-body .py-5 p {
    font-size: 14px;
    color: #6c6c6c;
}
.affiliate-stat {
    background: #FFF;
    border: 1px solid #dadada;
    border-radius: var(--bs-border-radius) !important;
    font-size: 16px;
}
.affiliate-stat i {
    font-size: 32px;
}
.affiliate-stat span {
    font-size: 26px;
    font-weight: 600;
}
body #order-standard_cart .cart-body .products .product .product-desc ul {
    padding: 0;
}
body #order-standard_cart .cart-body .products .product .product-desc p:empty, 
body #order-standard_cart .cart-body .products .product .product-desc br {
  display: none;
}
body #order-standard_cart .cart-body .products .product footer {
    background-color: transparent;
    display: flow-root;
}
body #order-standard_cart .cart-body .products .product footer::after {
    position: relative;
    background-image: none;
    z-index: 0;
    content:none;
}
.dataTables_wrapper table.table-list thead th {
    border-bottom: 0;
    font-weight: 500;
    font-size: 13px;
}
table.table-list tbody td {
    font-size: 13px;
    line-height: 19px;
}
#order-standard_cart .font-size-24 {
    font-size: 16px !important;
}
a:hover {
    text-decoration: none;
}
.account-page .inner .card-title {
    font-size: 20px;
    font-weight: 600;
}
.account-page .inner .card-title small {
    font-size: 12px;
}
.account-page .inner label.form-check {
    color: #FFF;
}
.account-page .inner label.form-check a {
    color: #FFF;
    text-decoration: underline;
}
.banner.breadcrumb.one.pb-decrease .text-center.white.m-auto {
    font-size: 32px;
}
.banner.breadcrumb.one.pb-decrease .d-inline-block.bg-transparent.list-inline.py-0.pl-0.w-100.text-center.mt-3 li a,
.banner.breadcrumb.one.pb-decrease .d-inline-block.bg-transparent.list-inline.py-0.pl-0.w-100.text-center.mt-3 li {
    color: #FFF;
}

/* *****************************************************

    ** Oplinix colour system **

    Brand blue is the only accent; everything else is
    neutral. Tokens and rules: dev-tools/COLOR-SYSTEM.md

***************************************************** */

/* Site font: DM Sans (open licence: custom/fonts/dm-sans/OFL.txt), served from the theme's own
   folder in two character sets (the browser fetches Latin Extended only for text that needs it).
   The theme was designed around its old font's weight scale, where 500 is the normal text weight
   and 400 a lighter one; DM Sans Regular is given both, so text keeps its normal weight.
   600 to 900 are DM Sans's own SemiBold to Black. The cart and domain search apps take the same
   font in orderforms/hostavik_cart/css/hostavik-*-app.css; head.tpl preloads the two main files. */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 200 300;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-ext-300-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 200 300;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-300-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-ext-800-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-800-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-ext-900-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../custom/fonts/dm-sans/dm-sans-latin-900-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --font-primary: "DM Sans", var(--fallback-fonts);
    --font-secondary: "DM Sans", var(--fallback-fonts);
}

:root {
    --ox-n-0: #ffffff;
    --ox-n-25: #fafbfc;
    --ox-n-50: #f5f6f8;
    --ox-n-100: #eef0f3;
    --ox-n-200: #e4e7ec;
    --ox-n-300: #d0d5dd;
    --ox-n-400: #98a2b3;
    --ox-n-500: #667085;
    --ox-n-700: #344054;
    --ox-n-900: #101828;

    --ox-brand: #1a6cf5;
    --ox-brand-hover: #1558d0;
    --ox-brand-50: #eff4ff;
    --ox-brand-700: #1849a9;

    --ox-navy: #0d1628;
    --ox-navy-2: #16213a;

    --ox-card-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --ox-card-radius: 12px;

    /* Hosting Hub (custom/css/main.css) reads these as "r, g, b" */
    --color-primary: 26, 108, 245;
    --color-secondary: 26, 108, 245;

    /* Client area buttons (.btn-primary, .btn-info) */
    --color-one: var(--ox-brand);
    --color-one-dark: var(--ox-brand-hover);
    --color-one-rgb: 26, 108, 245;
}

/* Text */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ox-n-900);
}
p {
    color: var(--ox-n-700);
}
.section-heading p,
.feature-box a {
    color: var(--ox-n-500);
}

/* Header band: the one dark band per page */
.banner.one,
.sectionbg4,
.account-page {
    background: linear-gradient(90deg, var(--ox-navy), var(--ox-navy-2));
}

/* Taller hero on desktop (main.css: 150px 0 80px); title-only banners (.pb-decrease) keep their size */
@media (min-width: 992px) {
    .banner.one:not(.pb-decrease) {
        padding-top: 170px;
        padding-bottom: 130px;
    }
}
.nabbar-nav .mainmenu .has-droupdown.megamenu .submenu .tabmain section article::after {
    background-color: var(--ox-navy);
    box-shadow: none;
}
.nabbar-nav .mainmenu .has-droupdown.megamenu .submenu .tabmain input[name="sections"]:checked+label {
    color: var(--ox-brand) !important;
}

/* Buttons */
.btns.one:hover,
.btns.one:focus-visible,
.nabbar-nav .mainmenu li a.login:hover {
    background-color: var(--ox-brand-hover);
    color: #fff;
}

/* Neutral surfaces instead of pastel tints */
.sectionbg1,
.sectionbg2,
.sectionbg3,
.homepage-features.bg1,
.homepage-features.bg2,
.homepage-features.bg3,
.homepage-domain-search {
    background: var(--ox-n-50);
}
.homepage-features h4 {
    color: var(--ox-n-900);
}
.homepage-features p,
.homepage-features ul li {
    color: var(--ox-n-700);
}
.homepage-features ul li:before {
    color: var(--ox-brand);
}
.homepage-plan.bg-green,
.homepage-plan.bg-red,
.homepage-plan.bg-yellow,
.homepage-plan.bg-orange {
    background-color: var(--ox-n-0);
    border-color: var(--ox-n-200);
    border-radius: var(--ox-card-radius);
    box-shadow: var(--ox-card-shadow);
}
/* Plan card icons (homepage.tpl #Plans): the theme's drawings recoloured to the colour system
   (lines --ox-n-700, accent --ox-brand) as custom/images/plan-*.svg; the originals stay for other pages */
/* Plan cards: a soft gradient per card (user's choice), tinted corner fading to white so the
   text keeps full contrast. Cool hues only, so the blue icon accents sit well on every card. */
.homepage-plan.bg-green {
    background: linear-gradient(155deg, #dce8ff 0%, #f1f6ff 50%, #ffffff 100%);
    border-color: #cddcfb;
}
.homepage-plan.bg-red {
    background: linear-gradient(155deg, #e7e1ff 0%, #f5f2ff 50%, #ffffff 100%);
    border-color: #dcd4fa;
}
.homepage-plan.bg-yellow {
    background: linear-gradient(155deg, #d6f3ea 0%, #effbf7 50%, #ffffff 100%);
    border-color: #c4e8dc;
}
.homepage-plan.bg-orange {
    background: linear-gradient(155deg, #d6eefa 0%, #effaff 50%, #ffffff 100%);
    border-color: #c3e3f3;
}
.homepage-domain-search .domain-lists li {
    border-color: var(--ox-n-200);
}
/* No glow on the domain search boxes when they're clicked (Bootstrap adds one to .form-control) */
.homepage-domain-search .homepage-domain-form input[type="text"]:focus {
    box-shadow: none;
}
/* homepage.tpl nests a .row directly in a .row here, which shifts the search form left */
.homepage-domain-search .row > .row {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}
@media (max-width: 767px) {
    /* Lower domain search: keep the box and button on one line (main.css stacks them) */
    .homepage-domain-search .homepage-domain-form {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 24px 0;
    }
    .homepage-domain-search .homepage-domain-form input[type="text"] {
        flex: 1;
        min-width: 0;
        height: 48px;
        margin: 0;
        padding: 0 14px;
        font-size: 16px;
    }
    .homepage-domain-search .homepage-domain-form .submit {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0 20px;
    }
}
.homepage-domain-search .domain-lists li .price {
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
}
.accordion > li {
    border-color: var(--ox-n-200);
    box-shadow: var(--ox-card-shadow);
}

/* Dashed timeline connectors */
.section-timeline .vertical-timeline .timeline-items::before {
    background-image: linear-gradient(0deg, var(--ox-n-300), var(--ox-n-300) 50%, transparent 50%, transparent 100%);
}
.section-timeline .vertical-timeline .timeline-circle::before {
    background-image: linear-gradient(90deg, var(--ox-n-300), var(--ox-n-300) 50%, transparent 50%, transparent 100%);
}

/* Featured plan ribbon */
.plan-featured .plan-style-one:before {
    background: var(--ox-brand);
}

/* Footer: brand column (logo, blurb, social, payment cards), four link columns, quiet bottom bar */
.theme-footer {
    background-color: var(--ox-navy);
    padding: 80px 0 0;
}
.theme-footer .footer-info > p {
    max-width: 340px;
    margin-top: 28px;
    color: var(--ox-n-200);
    font-size: 16px;
    line-height: 1.75;
}
.theme-footer .footer-social .social-icon {
    gap: 14px;
    margin: 28px 0 0;
}
.theme-footer .footer-social .social-icon a {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    background: var(--ox-n-200);
    color: var(--ox-navy);
    font-size: 17px;
    transition: background-color .2s, color .2s;
}
.theme-footer .footer-social .social-icon a:hover {
    background: var(--ox-brand);
    color: #fff;
}
.theme-footer .footer-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.theme-footer .footer-payments i {
    display: block;
    color: var(--ox-n-200);
    font-size: 40px;
    line-height: 1;
}
@media (min-width: 992px) {
    /* Four equal link columns, so the headings start at even steps across the row. The first
       one starts where the legal links in the bottom bar start (.footer-bottom below). */
    .theme-footer .footer-links {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0 24px;
        margin: 0;
    }
    .theme-footer .footer-links > [class*="col-"] {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }
}
/* Link lists use .footer-menu (not the theme's .footer-list), so main.js doesn't
   collapse them into tap-to-open rows on phones */
.theme-footer .footer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.theme-footer .footer-menu + .footer-menu {
    margin-top: 36px;
}
.theme-footer .footer-menu li {
    margin: 0 0 14px;
}
.theme-footer .footer-menu .footer-menu-heading {
    margin-bottom: 20px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.theme-footer .footer-menu li a {
    color: var(--ox-n-300);
    font-size: 16px;
    line-height: 1.5;
    transition: color .2s;
}
.theme-footer .footer-menu li a:hover,
.theme-footer .footer-legal a:hover {
    color: #fff;
}
/* Bottom bar: copyright, then the six legal pages. On desktop they share one line: the
   copyright sits under the brand column and the legal links spread under the link columns,
   starting where the first column starts and ending at the page edge. */
.theme-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 40px;
    margin-top: 64px;
    padding: 24px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.theme-footer .copyright-info,
.theme-footer .footer-legal a {
    color: var(--ox-n-300);
    font-size: 14px;
}
.theme-footer .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 1200px) {
    .theme-footer .footer-bottom {
        display: grid;
        /* the brand column's share of the row (one third, plus the row's gutter) */
        grid-template-columns: calc(33.3333% + 8px) minmax(0, 1fr);
        gap: 0;
    }
    .theme-footer .footer-legal {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0 12px;
    }
    .theme-footer .footer-legal a {
        white-space: nowrap;
    }
}
/* The page is a little narrower here, so the line and the column headings need slightly
   smaller text to fit */
@media (min-width: 1200px) and (max-width: 1279px) {
    .theme-footer .copyright-info,
    .theme-footer .footer-legal a {
        font-size: 13px;
    }
    .theme-footer .footer-menu .footer-menu-heading {
        font-size: 16px;
    }
}
/* Site-use / cookies notice under the bottom bar */
.theme-footer .footer-bottom {
    padding-bottom: 24px;
}
.theme-footer .footer-notice {
    margin: 0;
    padding: 20px 0 32px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: var(--ox-n-400);
    font-size: 13px;
    line-height: 1.7;
}
.theme-footer .footer-notice a {
    color: var(--ox-n-300);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.theme-footer .footer-notice a:hover {
    color: #fff;
}
@media (max-width: 1199px) {
    /* The legal links take their own line, above the copyright */
    .theme-footer .footer-legal {
        order: -1;
        flex: 0 0 100%;
    }
}
@media (max-width: 991px) {
    .theme-footer .footer-bottom,
    .theme-footer .footer-legal {
        justify-content: center;
        text-align: center;
    }
    .theme-footer .footer-notice {
        text-align: center;
    }
}
/* Phones: two link columns, everything visible */
@media (max-width: 575px) {
    .theme-footer {
        padding-top: 56px;
    }
    .theme-footer .footer-menu + .footer-menu {
        margin-top: 28px;
    }
    .theme-footer .footer-menu li {
        margin-bottom: 10px;
    }
    .theme-footer .footer-menu .footer-menu-heading {
        margin-bottom: 14px;
    }
    .theme-footer .footer-menu li a {
        font-size: 15px;
    }
    .theme-footer .footer-bottom {
        margin-top: 48px;
    }
}

/* Logo: Hostavik wordmark (custom/images/hostavik-logo-white.png, 809x120) */
.header .main-header .navbar-brand img {
    height: 26px;
    max-height: none;
    width: auto;
}
@media (max-width: 500px) {
    .header .main-header .navbar-brand img {
        height: 22px;
    }
}
.theme-footer .footer-info > a.logo img {
    height: 32px;
    max-height: none;
    width: auto;
}

/* Header: one row fixed to the top: logo, menu, currency / account / cart (header.tpl).
   Transparent over the hero at the top of the page; solid once the page scrolls
   (footer.tpl toggles .is-scrolled) or while the phone menu is open. */
header.header {
    position: fixed;
    z-index: 1000;
    padding: 0;
    background-color: transparent;
    transition: background-color .25s ease, box-shadow .25s ease;
}
header.header.is-scrolled,
header.header:has(.nabbar-nav.active) {
    background-color: var(--ox-navy);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.header .main-header {
    gap: 24px;
    min-height: 72px;
}
.header .main-header .navbar-brand img {
    top: 0;
}
.header-icon {
    font-size: 24px;
    line-height: 1;
}
@media (min-width: 1200px) {
    .nabbar-nav {
        margin: 0 auto;
    }
    .nabbar-nav .mainmenu > li + li {
        margin-inline-start: 32px;
    }
    .nabbar-nav .mainmenu > li > a,
    .nabbar-nav .mainmenu .has-droupdown:hover > a {
        padding: 24px 0;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
    }
    .nabbar-nav .mainmenu a .dropdown-indicator {
        margin-inline-start: 4px;
        font-size: 18px;
    }
    .nabbar-nav .mainmenu .has-droupdown > a > i.dropdown-indicator {
        opacity: .8;
    }
    .nabbar-nav .mainmenu .has-droupdown .submenu {
        left: -14px;
        min-width: 220px;
        padding: 8px;
        list-style: none;
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
    }
}
.nabbar-nav .mainmenu .has-droupdown ul.submenu li a,
.header-dropdown-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--ox-n-700);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}
.nabbar-nav .mainmenu .has-droupdown ul.submenu li a:hover,
.header-dropdown-menu a:hover {
    background: var(--ox-n-50);
    color: var(--ox-n-900);
}
.header-actions {
    align-items: center;
    gap: 24px;
}
.header-dropdown {
    position: relative;
}
.header-dropdown > button,
.header-cart {
    display: flex;
    position: relative;
    align-items: center;
    gap: 2px;
    padding: 24px 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.header-dropdown > button .ri-arrow-down-s-line {
    font-size: 18px;
    opacity: .8;
}
.header-cart:hover {
    color: #fff;
}
.header-dropdown-menu {
    position: absolute;
    top: 100%;
    right: -8px;
    z-index: 99;
    min-width: 200px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.header-dropdown:hover .header-dropdown-menu,
.header-dropdown:focus-within .header-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.nav-mobiles .cart-item-count {
    position: relative;
    color: #fff;
}
.header-cart .count,
.nav-mobiles .cart-item-count .number {
    position: absolute;
    width: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.header-cart .count {
    top: 16px;
    right: -10px;
}
.nav-mobiles .cart-item-count .number {
    top: -6px;
    right: -10px;
}
@media (max-width: 1199px) {
    .header .main-header {
        min-height: 64px;
    }

    /* Mobile menu: a drawer that slides in from the right under the 64px header.
       main.js toggles .active on .nabbar-nav; tapping the dimmed area closes it. */
    .nabbar-nav {
        position: fixed;
        inset: 64px 0 0 0;
        width: auto;
        background: rgba(13, 22, 40, .55);
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }
    .nabbar-nav.active {
        opacity: 1;
        visibility: visible;
    }
    .nabbar-nav .mainmenu {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(340px, 86vw);
        margin: 0;
        padding: 12px 24px 32px;
        overflow-y: auto;
        background: #fff;
        transform: translateX(100%);
        transition: transform .3s ease;
    }
    .nabbar-nav.active .mainmenu {
        transform: none;
    }
    .nabbar-nav .mainmenu > li {
        border-bottom: 1px solid var(--ox-n-100);
    }
    .nabbar-nav .mainmenu > li > a {
        align-items: center;
        padding: 14px 0;
        color: var(--ox-n-900);
        font-size: 16px;
        font-weight: 600;
    }
    .nabbar-nav .mainmenu > li.has-droupdown > a.open {
        color: var(--ox-brand);
    }
    .nabbar-nav .mainmenu a .dropdown-indicator {
        font-size: 20px;
    }
    .nabbar-nav .mainmenu .has-droupdown .submenu {
        margin: 0 0 10px;
        padding: 0;
        list-style: none;
    }
    .nabbar-nav .mainmenu .has-droupdown ul.submenu li a {
        padding: 10px 12px;
    }
    /* Keep the page behind the open drawer from scrolling */
    body:has(.nabbar-nav.active) {
        overflow: hidden;
    }
}

/* Mega menu (header.tpl: li.has-mega > div.submenu.mega-panel, content from
   includes/ox-mega-product.tpl and includes/ox-mega-learn.tpl).
   Desktop: full-width navy panel on hover with Products | quick links | Learn More.
   Phones: the same content inside the side drawer, as a compact list. */
header.header:has(.has-mega:hover) {
    background-color: var(--ox-navy);
}
.mega-heading {
    margin-bottom: 18px;
    color: var(--ox-n-400);
    font-size: 14px;
    font-weight: 500;
}
.nabbar-nav .mainmenu .mega-panel a {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    white-space: normal;
}
.nabbar-nav .mainmenu .mega-panel .mega-product {
    align-items: flex-start;
    gap: 18px;
    margin: 0 -12px 6px;
    padding: 12px;
    border-radius: 12px;
    transition: background-color .2s;
}
.nabbar-nav .mainmenu .mega-panel .mega-product:hover {
    background: rgba(255, 255, 255, .05);
}
.mega-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    color: var(--ox-n-200);
    font-size: 24px;
    transition: background-color .2s, color .2s;
}
.mega-product:hover .mega-icon {
    background: var(--ox-brand);
    color: #fff;
}
.mega-product-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mega-product-title {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}
.mega-product-desc {
    color: var(--ox-n-400);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}
.mega-links {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nabbar-nav .mainmenu .mega-panel .mega-links a {
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: var(--ox-n-200);
}
.nabbar-nav .mainmenu .mega-panel .mega-links a:hover {
    color: #fff;
}
.mega-links a i {
    color: var(--ox-n-400);
    font-size: 18px;
    transition: transform .2s, color .2s;
}
.mega-links a:hover i {
    color: #fff;
    transform: translateX(3px);
}
.mega-links-note {
    margin-inline-start: auto;
    color: var(--ox-n-400);
    font-size: 14px;
}
.nabbar-nav .mainmenu .mega-panel .mega-more,
.nabbar-nav .mainmenu .mega-panel .mega-learn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ox-n-300);
    font-size: 15px;
}
.nabbar-nav .mainmenu .mega-panel .mega-more {
    margin-top: 16px;
}
.nabbar-nav .mainmenu .mega-panel .mega-learn-link {
    margin-top: 8px;
}
.nabbar-nav .mainmenu .mega-panel .mega-more:hover,
.nabbar-nav .mainmenu .mega-panel .mega-learn-link:hover {
    color: #fff;
}
.mega-learn-item + .mega-learn-item {
    margin-top: 26px;
}
.mega-learn-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}
@media (min-width: 1200px) {
    /* The panel spans the whole header, so the menu item and its row stop being positioning parents */
    .header .main-header,
    .nabbar-nav .mainmenu > li.has-mega {
        position: static;
    }
    .nabbar-nav .mainmenu > li + li {
        margin-inline-start: 0;
    }
    .nabbar-nav .mainmenu > li > a,
    .nabbar-nav .mainmenu .has-droupdown:hover > a {
        padding: 24px 16px;
    }
    .nabbar-nav .mainmenu > li.has-mega:hover > a {
        background: rgba(255, 255, 255, .08);
    }
    .nabbar-nav .mainmenu .has-droupdown .submenu.mega-panel,
    .nabbar-nav .mainmenu .has-droupdown:hover .submenu.mega-panel {
        top: 100%;
        right: 0;
        left: 0;
        min-width: 0;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, .06);
        border-radius: 0 0 16px 16px;
        background: var(--ox-navy);
        box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
        transform: translateY(8px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .nabbar-nav .mainmenu .has-droupdown:hover .submenu.mega-panel {
        transform: none;
    }
    .mega-inner {
        display: grid;
        grid-template-columns: 1.2fr 1fr .95fr;
        gap: 48px;
    }
    .mega-col {
        padding: 40px 0 44px;
    }
    .mega-aside {
        padding: 40px 40px 44px;
        background: var(--ox-navy-2);
    }
}
@media (max-width: 1199px) {
    /* main.js slides div.submenu open; hide it until then (main.css only hides ul.submenu) */
    .nabbar-nav .mainmenu > li.has-droupdown > .mega-panel {
        display: none;
    }
    .mega-inner {
        max-width: none;
        padding: 0;
    }
    .mega-aside,
    .mega-product-desc,
    .nabbar-nav .mainmenu .mega-panel .mega-more {
        display: none;
    }
    .mega-col + .mega-col {
        margin-top: 10px;
    }
    .mega-heading {
        margin: 6px 0 4px;
        color: var(--ox-n-500);
        font-size: 12px;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    .nabbar-nav .mainmenu .mega-panel .mega-product {
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 7px 0;
    }
    .nabbar-nav .mainmenu .mega-panel .mega-product:hover {
        background: none;
    }
    .mega-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: var(--ox-n-100);
        color: var(--ox-n-700);
        font-size: 18px;
    }
    .mega-product-title {
        color: var(--ox-n-900);
        font-size: 15px;
    }
    .nabbar-nav .mainmenu .mega-panel .mega-links a {
        padding: 8px 0;
        color: var(--ox-n-700);
        font-size: 15px;
    }
    .nabbar-nav .mainmenu .mega-panel .mega-links a:hover,
    .mega-links a:hover i {
        color: var(--ox-n-900);
    }
}

/* Home hero: full-screen photo, headline, domain search, TLD prices, on-page links.
   Photo: custom/images/home-hero.jpg (Pexels photo 5647299, free licence); replace the file to change it. */
.home-hero {
    --home-hero-photo: url(../custom/images/home-hero.jpg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: 72px 0 32px;
    background-color: var(--ox-navy);
    background-image: linear-gradient(rgba(13, 22, 40, .45), rgba(13, 22, 40, .7)), var(--home-hero-photo);
    background-position: center;
    background-size: cover;
}
.home-hero-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 48px;
    text-align: center;
}
.home-hero h1 {
    max-width: 900px;
    margin: 0;
    color: #fff;
    font-size: 64px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.home-hero-sub {
    margin: 20px 0 32px;
    color: var(--ox-n-200);
    font-size: 22px;
}
.home-hero-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 800px;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
}
.home-hero-search-prefix {
    padding: 0 0 0 16px;
    color: var(--ox-n-500);
    font-size: 17px;
}
.home-hero-search input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ox-n-900);
    font-size: 17px;
}
.home-hero-search input[type="text"]::placeholder {
    color: var(--ox-n-400);
}
.home-hero-search button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 7px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s;
}
.home-hero-search button:hover {
    background: var(--ox-brand-hover);
}
.home-hero-tlds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 48px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.home-hero-tlds .tld {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}
.home-hero-tlds .price {
    color: var(--ox-n-200);
    font-size: 16px;
}
.home-hero-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px 8px 8px 28px;
    border-radius: 10px;
    background: #fff;
}
.home-hero-nav-links {
    display: flex;
    gap: 8px 40px;
    overflow-x: auto;
    scrollbar-width: none;
}
.home-hero-nav-links::-webkit-scrollbar {
    display: none;
}
.home-hero-nav-links a {
    color: var(--ox-n-900);
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
}
.home-hero-nav-links a:hover {
    color: var(--ox-brand);
}
.home-hero-nav-btn {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 20px;
}
.home-hero-nav-btn:hover {
    background: var(--ox-brand-hover);
    color: #fff;
}
/* Keep sections reached from the hero links clear of the fixed header */
#Plans, #Why, #Domains, #Trust, #FAQ {
    scroll-margin-top: 80px;
}
@media (max-width: 991px) {
    .home-hero h1 {
        font-size: 44px;
    }
    .home-hero-sub {
        font-size: 18px;
    }
    .home-hero-tlds {
        gap: 8px 28px;
    }
    .home-hero-tlds .tld {
        font-size: 24px;
    }
}
@media (max-width: 575px) {
    .home-hero {
        padding: 96px 0 24px;
    }
    .home-hero h1 {
        font-size: 34px;
    }
    @media (max-width: 399px) {
        .home-hero h1 {
            font-size: 30px;
        }
    }
    /* Box and button stay on one line; the button shortens to "Search" (homepage.tpl) */
    .home-hero-search-prefix {
        display: none;
    }
    .home-hero-search input[type="text"] {
        height: 48px;
        padding: 0 10px;
        font-size: 16px;
    }
    .home-hero-search button {
        gap: 6px;
        height: 48px;
        padding: 0 16px;
    }
    .home-hero-nav {
        padding-left: 16px;
    }
    .home-hero-nav-links {
        gap: 24px;
    }
    .home-hero-nav-links a {
        font-size: 15px;
    }
}
/* Plan cards (includes/ox-plan-cards.tpl, used on the product pages' #Plans section).
   White cards on a light section, the featured plan as a dark card, a period switch above. */
#Plans:has(.ox-plans) {
    background: var(--ox-n-50);
}
.ox-cycle-tabs {
    display: flex;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin: -24px auto 32px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    background: #fff;
    scrollbar-width: none;
}
.ox-cycle-tabs button {
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ox-n-700);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}
.ox-cycle-tabs button[aria-selected="true"] {
    background: var(--ox-navy);
    color: #fff;
}
/* Only the pieces for the selected period show */
.ox-plans[data-active-cycle="monthly"] [data-cycle]:not([data-cycle="monthly"]),
.ox-plans[data-active-cycle="annually"] [data-cycle]:not([data-cycle="annually"]),
.ox-plans[data-active-cycle="biennially"] [data-cycle]:not([data-cycle="biennially"]),
.ox-plans[data-active-cycle="triennially"] [data-cycle]:not([data-cycle="triennially"]) {
    display: none;
}
/* Four plans per group: 4 across on desktop, 2 across on tablets / small laptops, 1 on phones */
.ox-plan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .ox-plan-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .ox-plan-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: none;
    }
}
.ox-plan {
    padding: 24px 24px 32px;
    border-radius: 24px;
    background: #fff;
}
.ox-plan-badges {
    display: flex;
    justify-content: flex-end;
    min-height: 24px;
}
.ox-plan-badge {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
    font-size: 12px;
    font-weight: 700;
}
.ox-plan-name {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    color: var(--ox-n-900);
    font-size: 20px;
    font-weight: 700;
}
.ox-plan-tagline {
    min-height: 44px;
    margin: 0 0 16px;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.45;
}
.ox-plan-was {
    min-height: 21px;
    color: var(--ox-n-500);
    font-size: 14px;
}
.ox-plan-price {
    margin-bottom: 20px;
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}
.ox-plan-price strong {
    font-size: 36px;
    font-weight: 800;
}
.ox-plan-price span {
    color: var(--ox-n-500);
    font-size: 16px;
    font-weight: 500;
}
.ox-plan-price-na {
    color: var(--ox-n-500);
    font-size: 15px;
    font-weight: 500;
}
.ox-plan-btn {
    display: block;
    padding: 12px 16px;
    border: 1.5px solid var(--ox-brand);
    border-radius: 10px;
    color: var(--ox-brand);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    transition: background-color .2s, border-color .2s, color .2s;
}
.ox-plan-btn:hover {
    background: var(--ox-brand-50);
    color: var(--ox-brand-hover);
}
.ox-plan-note {
    min-height: 40px;
    margin: 14px 0 0;
    color: var(--ox-n-500);
    font-size: 13px;
    line-height: 1.5;
}
.ox-plan-note strong {
    color: var(--ox-n-700);
}
.ox-plan-features {
    margin: 20px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--ox-n-200);
    list-style: none;
}
.ox-plan-features li {
    position: relative;
    padding-inline-start: 28px;
    color: var(--ox-n-700);
    font-size: 15px;
    line-height: 1.5;
}
.ox-plan-features li + li {
    margin-top: 12px;
}
.ox-plan-features li::before {
    content: "\eb7b";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--ox-brand);
    font-family: var(--font-remixicon);
    font-size: 18px;
    line-height: 1.3;
}
.ox-plan.is-featured {
    background: var(--ox-navy);
}
.ox-plan.is-featured .ox-plan-badge {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
.ox-plan.is-featured .ox-plan-name,
.ox-plan.is-featured .ox-plan-price,
.ox-plan.is-featured .ox-plan-note strong,
.ox-plan.is-featured .ox-plan-features li::before {
    color: #fff;
}
.ox-plan.is-featured .ox-plan-tagline,
.ox-plan.is-featured .ox-plan-features li {
    color: var(--ox-n-200);
}
.ox-plan.is-featured .ox-plan-was,
.ox-plan.is-featured .ox-plan-price span,
.ox-plan.is-featured .ox-plan-note {
    color: var(--ox-n-400);
}
.ox-plan.is-featured .ox-plan-btn {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
    color: #fff;
}
.ox-plan.is-featured .ox-plan-btn:hover {
    border-color: var(--ox-brand-hover);
    background: var(--ox-brand-hover);
}
.ox-plan.is-featured .ox-plan-features {
    border-top-color: rgba(255, 255, 255, .12);
}
.ox-plans-fineprint {
    margin: 28px 0 0;
    color: var(--ox-n-500);
    font-size: 13px;
    text-align: center;
}
@media (max-width: 575px) {
    /* Equal-width buttons across the screen so every period stays visible */
    .ox-cycle-tabs {
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        width: 100%;
        margin-top: -32px;
    }
    .ox-cycle-tabs button {
        padding: 9px 4px;
        font-size: 13px;
    }
}

/* FAQ (home, product and About Us pages): intro + help card on the left, question list on the right.
   The list keeps the theme's ul.accordion so main.js still opens and closes answers. */
.faq {
    background: #fff;
}
.ox-faq {
    display: grid;
    gap: 40px;
}
@media (min-width: 992px) {
    .ox-faq {
        grid-template-columns: 5fr 7fr;
        gap: 72px;
        align-items: start;
    }
    /* The intro stays in view while the questions scroll */
    .ox-faq-intro {
        position: sticky;
        top: 112px;
    }
}
.ox-faq-intro h2 {
    margin: 0 0 14px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}
.ox-faq-intro > p {
    margin: 0 0 32px;
    color: var(--ox-n-500);
    font-size: 17px;
    line-height: 1.6;
}
.ox-faq-help {
    display: flex;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: var(--ox-n-50);
}
.ox-faq-help-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    background: #fff;
    color: var(--ox-navy);
    font-size: 24px;
}
.ox-faq-help-title {
    color: var(--ox-n-900);
    font-size: 17px;
    font-weight: 700;
}
.ox-faq-help p {
    margin: 4px 0 12px;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.55;
}
.ox-faq-help-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ox-brand);
    font-size: 15px;
    font-weight: 600;
}
.ox-faq-help-link:hover {
    color: var(--ox-brand-hover);
}
.ox-faq-help-link i {
    transition: transform .2s;
}
.ox-faq-help-link:hover i {
    transform: translateX(3px);
}
/* Question list: rows with dividers instead of main.css's boxed two-column cards */
.ox-faq-list {
    display: block;
    border-top: 1px solid var(--ox-n-200);
}
.ox-faq-list > li {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--ox-n-200);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.ox-faq-list li > a {
    gap: 24px;
    padding: 24px 0;
    color: var(--ox-n-900);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}
.ox-faq-list li.active > a {
    padding-bottom: 12px;
}
.ox-faq-list li > a::after {
    content: "\ea13";
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ox-n-200);
    border-radius: 50%;
    color: var(--ox-n-700);
    font-family: var(--font-remixicon);
    font-size: 18px;
    transition: background-color .2s, border-color .2s, color .2s;
}
.ox-faq-list li:hover > a::after {
    border-color: var(--ox-n-400);
}
.ox-faq-list li.active > a::after {
    content: "\f1af";
    border-color: var(--ox-navy);
    background: var(--ox-navy);
    color: #fff;
}
.ox-faq-list li p {
    padding: 0 60px 24px 0;
    color: var(--ox-n-500);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}
.ox-faq-list li p a {
    color: var(--ox-brand);
    font-weight: 600;
}
.ox-faq-list li p a:hover {
    text-decoration: underline;
}
@media (max-width: 991px) {
    .ox-faq-intro h2 {
        font-size: 32px;
    }
}
@media (max-width: 575px) {
    .ox-faq-intro h2 {
        font-size: 28px;
    }
    .ox-faq-list li > a {
        padding: 20px 0;
        font-size: 16px;
    }
    .ox-faq-list li p {
        padding-right: 0;
        font-size: 15px;
    }
}

/* Auth pages (log in, register, password reset, log out): brand panel | form, without the site header
   and footer. Layout markup: header.tpl / footer.tpl; content: login.tpl, clientregister.tpl,
   password-reset-*.tpl. */
body:has(.ox-auth) {
    background: #fff;
}
.ox-auth {
    display: grid;
    grid-template-columns: minmax(380px, 40%) 1fr;
    min-height: 100vh;
}
.ox-auth-aside {
    display: flex;
    position: sticky;
    top: 0;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding: 40px 56px 56px;
    background-color: var(--ox-navy);
    background-image: linear-gradient(rgba(13, 22, 40, .72), rgba(13, 22, 40, .92)), url(../custom/images/home-hero.jpg);
    background-position: center;
    background-size: cover;
}
.ox-auth-logo img {
    width: auto;
    height: 30px;
}
.ox-auth-pitch h2 {
    max-width: 420px;
    margin: 0 0 28px;
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}
.ox-auth-pitch ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-auth-pitch li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--ox-n-200);
    font-size: 16px;
    line-height: 1.5;
}
.ox-auth-pitch li + li {
    margin-top: 14px;
}
.ox-auth-pitch li i {
    color: #fff;
    font-size: 20px;
    line-height: 1.2;
}
.ox-auth-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 28px 40px;
}
.ox-auth-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.ox-auth-logo-mobile {
    display: none;
}
.ox-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ox-n-500);
    font-size: 15px;
    font-weight: 500;
}
.ox-auth-back:hover {
    color: var(--ox-n-900);
}
.ox-auth-content {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}
.ox-auth-card {
    width: 100%;
    max-width: 420px;
}
.ox-auth-card-wide {
    max-width: 760px;
}
.ox-auth-title {
    margin: 0 0 8px;
    color: var(--ox-n-900);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}
.ox-auth-sub {
    margin: 0 0 28px;
    color: var(--ox-n-500);
    font-size: 16px;
    line-height: 1.6;
}
.ox-auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ox-auth-form .alert {
    margin: 0;
}
.ox-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
}
.ox-field-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.ox-field-row a {
    color: var(--ox-brand);
    font-size: 14px;
    font-weight: 600;
}
/* Our fields plus the WHMCS fields in the register form and the later reset steps */
.ox-field input,
.ox-auth-card .form-control,
.ox-auth-card .inputs {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ox-n-300);
    border-radius: 10px;
    background: #fff;
    color: var(--ox-n-900);
    font-size: 16px;
    transition: border-color .2s, box-shadow .2s;
}
.ox-auth-card textarea.form-control,
.ox-auth-card textarea.inputs {
    height: auto;
    padding: 12px 14px;
}
.ox-auth-card select.form-control,
.ox-auth-card select.inputs {
    padding-right: 36px;
}
.ox-field input:focus,
.ox-auth-card .form-control:focus,
.ox-auth-card .inputs:focus {
    border-color: var(--ox-brand);
    outline: 0;
    box-shadow: 0 0 0 2px rgba(26, 108, 245, .1);
}
.ox-password {
    position: relative;
}
.ox-password input,
.ox-auth-card .ox-password .inputs,
#order-standard_cart.ox-co .ox-password .form-control {
    padding-right: 52px;
}
.ox-password-toggle {
    display: flex;
    position: absolute;
    top: 50%;
    right: 6px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ox-n-500);
    font-size: 18px;
    transform: translateY(-50%);
}
.ox-password-toggle:hover {
    background: var(--ox-n-100);
    color: var(--ox-n-900);
}
.ox-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ox-n-700);
    font-size: 15px;
    cursor: pointer;
}
.ox-check input {
    width: 16px;
    height: 16px;
}
.ox-auth-submit {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 10px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    transition: background-color .2s;
}
.ox-auth-submit:hover {
    background: var(--ox-brand-hover);
}
.ox-auth-card .btn-primary {
    height: 50px;
    padding: 0 24px;
    border-radius: 10px;
    font-weight: 700;
}
.ox-auth-switch {
    margin: 24px 0 0;
    color: var(--ox-n-500);
    font-size: 15px;
    text-align: center;
}
.ox-auth-switch a {
    color: var(--ox-brand);
    font-weight: 600;
}
.ox-auth-switch a:hover {
    color: var(--ox-brand-hover);
}
.ox-auth-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
}
.ox-auth-legal a {
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-auth-legal a:hover {
    color: var(--ox-n-900);
}
/* clientregister.tpl puts sections straight into a .row; drop its gutters so every section,
   the captcha and the button line up with the card edges */
.ox-auth-card form > .row {
    margin-right: 0;
    margin-left: 0;
}
.ox-auth-card form > .row > * {
    padding-right: 0;
    padding-left: 0;
}
/* Register form sections (WHMCS .card blocks) */
.ox-auth-card .card {
    margin-bottom: 16px !important;
    border: 1px solid var(--ox-n-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}
.ox-auth-card .card-body {
    padding: 24px !important;
}
.ox-auth-card .card-title {
    margin-bottom: 16px;
    color: var(--ox-n-900);
    font-size: 18px;
    font-weight: 700;
}
@media (max-width: 991px) {
    .ox-auth {
        grid-template-columns: 1fr;
    }
    .ox-auth-aside {
        display: none;
    }
    .ox-auth-main {
        padding: 0 0 24px;
    }
    .ox-auth-topbar {
        justify-content: space-between;
        padding: 14px 20px;
        background: var(--ox-navy);
    }
    .ox-auth-logo-mobile {
        display: block;
    }
    .ox-auth-logo-mobile img {
        height: 24px;
    }
    .ox-auth-back {
        color: var(--ox-n-200);
    }
    .ox-auth-back:hover {
        color: #fff;
    }
    .ox-auth-content {
        align-items: flex-start;
        padding: 32px 20px;
    }
    .ox-auth-title {
        font-size: 28px;
    }
}

/* Promo card above the footer (footer.tpl, marketing pages): brand-tint text side | photo */
.ox-cta {
    padding: 56px 0 24px;
    background: #fff;
}
/* Nearly full width: 24px from the screen edges (main.css caps .container at 1250px with !important) */
.ox-cta .container {
    max-width: none !important;
    padding-right: 24px;
    padding-left: 24px;
}
.ox-cta-card {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    overflow: hidden;
    border-radius: 28px;
    background: var(--ox-brand-50);
}
.ox-cta-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 72px 56px;
}
.ox-cta-text h2 {
    max-width: 560px;
    margin: 0 0 24px;
    color: var(--ox-n-900);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.12;
}
.ox-cta-text p {
    max-width: 520px;
    margin: 0 0 36px;
    color: var(--ox-n-700);
    font-size: 18px;
    line-height: 1.6;
}
.ox-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 8px 8px 24px;
    border-radius: 999px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    transition: background-color .2s;
}
.ox-cta-btn:hover {
    background: var(--ox-brand-hover);
    color: #fff;
}
.ox-cta-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--ox-brand);
    font-size: 18px;
    transition: transform .2s;
}
.ox-cta-btn:hover .ox-cta-btn-icon {
    transform: translateX(3px);
}
.ox-cta-media {
    min-height: 420px;
}
.ox-cta-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 991px) {
    .ox-cta {
        padding: 40px 0 16px;
    }
    .ox-cta .container {
        padding-right: 12px;
        padding-left: 12px;
    }
    .ox-cta-card {
        grid-template-columns: 1fr;
    }
    .ox-cta-text {
        padding: 40px 28px;
    }
    .ox-cta-text h2 {
        font-size: 34px;
    }
    .ox-cta-text p {
        margin-bottom: 28px;
        font-size: 16px;
    }
    .ox-cta-media {
        min-height: 0;
        height: 280px;
    }
}

/* Register form details: phone country code, dropdowns, captcha, generate-password button
   (the phone field rules also apply to the checkout, .ox-co) */
.ox-auth-card .intl-tel-input,
.ox-co .intl-tel-input {
    display: block;
    width: 100%;
}
.ox-auth-card .intl-tel-input.separate-dial-code .selected-flag,
.ox-co .intl-tel-input.separate-dial-code .selected-flag {
    padding-left: 12px;
    border-right: 1px solid var(--ox-n-200);
    border-radius: 9px 0 0 9px;
    background: var(--ox-n-50);
}
.ox-auth-card .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag,
.ox-co .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag,
.ox-auth-card .intl-tel-input .selected-flag:focus,
.ox-co .intl-tel-input .selected-flag:focus {
    background: var(--ox-n-100);
    outline: 0;
}
.ox-auth-card .intl-tel-input.separate-dial-code .selected-dial-code,
.ox-co .intl-tel-input.separate-dial-code .selected-dial-code {
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 500;
}
.ox-auth-card .intl-tel-input .selected-flag .iti-arrow,
.ox-co .intl-tel-input .selected-flag .iti-arrow {
    right: 10px;
    border-top-color: var(--ox-n-500);
}
/* Country-code box widths by dial-code length (nexus: 70-94px), plus room for the padding and divider */
.ox-auth-card .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag,
.ox-co .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag { width: 86px; }
.ox-auth-card .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag,
.ox-co .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag { width: 94px; }
.ox-auth-card .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag,
.ox-co .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag { width: 102px; }
.ox-auth-card .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag,
.ox-co .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag { width: 110px; }
.ox-auth-card .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input,
.ox-co .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input { padding-left: 100px; }
.ox-auth-card .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,
.ox-co .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input { padding-left: 108px; }
.ox-auth-card .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input,
.ox-co .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input { padding-left: 116px; }
.ox-auth-card .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input,
.ox-co .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input { padding-left: 124px; }
.ox-auth-card .intl-tel-input .country-list,
.ox-co .intl-tel-input .country-list {
    width: min(280px, calc(100vw - 48px));
    max-height: 260px;
    margin: 6px 0 0 -1px;
    padding: 6px 0;
    border: 1px solid var(--ox-n-200);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .04);
    overflow-y: auto;
    white-space: normal;
}
.ox-auth-card .intl-tel-input .country-list .country,
.ox-co .intl-tel-input .country-list .country {
    padding: 8px 14px;
    color: var(--ox-n-700);
    font-size: 15px;
}
.ox-auth-card .intl-tel-input .country-list .country.highlight,
.ox-co .intl-tel-input .country-list .country.highlight {
    background: var(--ox-n-50);
}
.ox-auth-card .intl-tel-input .country-list .divider,
.ox-co .intl-tel-input .country-list .divider {
    margin: 4px 0;
    border-bottom-color: var(--ox-n-200);
}
/* Every dropdown: same box as the text fields, one chevron */
.ox-auth-card select.inputs,
.ox-auth-card select.form-control,
.ox-auth-card .custom-select {
    padding-right: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
    -webkit-appearance: none;
    appearance: none;
}
.ox-auth-card .inputs::placeholder,
.ox-auth-card .form-control::placeholder {
    color: var(--ox-n-400);
}
/* nexus sizes it with #default-captcha-domainchecker #inputCaptcha (100px, small radius) */
.ox-auth-card #default-captcha-domainchecker #inputCaptcha,
.ox-auth-card #inputCaptcha {
    width: 160px;
    border-radius: 10px;
}
.ox-auth-card .generate-password {
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ox-n-300);
    border-radius: 8px;
    background: #fff;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
}
.ox-auth-card .generate-password:hover {
    border-color: var(--ox-n-400);
    background: var(--ox-n-50);
}

/* Domain page (domain-search.tpl): price cards, features, transfer strip (hero = .home-hero) */
/* Hero photo for this page: custom/images/domain-hero.jpg (Pexels photo 3872394, free licence).
   On desktop it's enlarged a little and anchored right, so the person on the left sits clear of the search bar. */
.home-hero.ox-hero-domain {
    --home-hero-photo: url(../custom/images/domain-hero.jpg);
    background-position: 20% center;
}
@media (min-width: 992px) {
    .home-hero.ox-hero-domain {
        background-position: right center;
        background-size: 125% auto;
    }
}
.ox-domain-prices {
    background: var(--ox-n-50);
}
.ox-tld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.ox-tld {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px;
    border-radius: 20px;
    background: #fff;
}
.ox-tld-logo {
    display: flex;
    align-items: center;
    height: 40px;
}
.ox-tld-logo img {
    width: auto;
    max-width: 140px;
    max-height: 36px;
}
.ox-tld-logo span {
    color: var(--ox-n-900);
    font-size: 28px;
    font-weight: 800;
}
.ox-tld-price {
    color: var(--ox-n-900);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}
.ox-tld-price strong {
    font-size: 32px;
    font-weight: 800;
}
.ox-tld-price span {
    color: var(--ox-n-500);
    font-size: 15px;
    font-weight: 500;
}
.ox-tld-btn {
    width: 100%;
    margin-top: 4px;
    padding: 11px 16px;
    border: 1.5px solid var(--ox-brand);
    border-radius: 10px;
    color: var(--ox-brand);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    transition: background-color .2s;
}
.ox-tld-btn:hover {
    background: var(--ox-brand-50);
    color: var(--ox-brand-hover);
}
.ox-domain-allprices {
    margin: 28px 0 0;
    text-align: center;
}
.ox-domain-allprices a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ox-brand);
    font-weight: 600;
}
.ox-domain-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.ox-domain-feature {
    padding: 28px;
    border: 1px solid var(--ox-n-200);
    border-radius: 20px;
    background: #fff;
}
.ox-domain-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--ox-n-100);
    color: var(--ox-navy);
    font-size: 24px;
}
.ox-domain-feature h3 {
    margin: 0 0 8px;
    color: var(--ox-n-900);
    font-size: 19px;
    font-weight: 700;
}
.ox-domain-feature p {
    margin: 0;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.6;
}
.ox-domain-transfer-wrap {
    padding: 0 0 24px;
}
.ox-domain-transfer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 36px 40px;
    border-radius: 24px;
    background: var(--ox-navy);
}
.ox-domain-transfer h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}
.ox-domain-transfer p {
    max-width: 620px;
    margin: 0;
    color: var(--ox-n-300);
    font-size: 16px;
}
.ox-domain-transfer-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 10px;
    background: #fff;
    color: var(--ox-navy);
    font-weight: 700;
    transition: background-color .2s;
}
.ox-domain-transfer-btn:hover {
    background: var(--ox-n-100);
    color: var(--ox-navy);
}
@media (max-width: 991px) {
    .ox-domain-features {
        grid-template-columns: repeat(2, 1fr);
    }
    .ox-domain-transfer {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }
}
@media (max-width: 575px) {
    .ox-domain-features {
        grid-template-columns: 1fr;
    }
}

/* Trust section (includes/ox-trust.tpl): dark band, heading, sideways-scrolling cards (real
   testimonials first, then our promises), and the "one account" block with a photo. */
.ox-proof {
    padding: 88px 0 96px;
    overflow: hidden;
    background: var(--ox-navy);
}
.ox-proof-title {
    max-width: 720px;
    margin: 0 auto 14px;
    color: #fff;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}
.ox-proof-sub {
    max-width: 560px;
    margin: 0 auto 48px;
    color: var(--ox-n-300);
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
}
/* Cards scroll right to left forever; the track holds three identical groups and moves by one group */
.ox-marquee {
    overflow: hidden;
}
.ox-marquee-track {
    display: flex;
    width: max-content;
    animation: ox-marquee 70s linear infinite;
}
.ox-marquee:hover .ox-marquee-track {
    animation-play-state: paused;
}
.ox-marquee-group {
    display: flex;
    gap: 16px;
    padding-right: 16px;
}
@keyframes ox-marquee {
    to { transform: translateX(calc(-100% / 3)); }
}
@media (prefers-reduced-motion: reduce) {
    .ox-marquee {
        overflow-x: auto;
    }
    .ox-marquee-track {
        animation: none;
    }
    .ox-marquee-group[aria-hidden="true"] {
        display: none;
    }
}
.ox-proof-card {
    display: flex;
    position: relative;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    width: 400px;
    min-height: 196px;
    margin: 0;
    padding: 28px 24px 24px;
    border-radius: 10px;
    background: #fff;
}
.ox-proof-card blockquote,
.ox-proof-card p {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 16px;
    line-height: 1.55;
}
.ox-proof-card figcaption,
.ox-proof-by {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ox-proof-card strong {
    display: block;
    color: var(--ox-n-900);
    font-size: 14px;
    font-weight: 600;
}
.ox-proof-card small {
    display: block;
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-proof-avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 700;
    object-fit: cover;
}
.ox-proof-avatar.is-brand {
    background: var(--ox-brand);
    color: #fff;
}
.ox-proof-avatar.is-icon {
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 18px;
}
.ox-proof-example {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ox-n-100);
    color: var(--ox-n-500);
    font-size: 11px;
    font-weight: 700;
}
.ox-proof-feedback {
    margin: 28px 0 0;
    text-align: center;
}
.ox-proof-feedback a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ox-n-300);
    font-size: 15px;
    font-weight: 500;
}
.ox-proof-feedback a:hover {
    color: #fff;
}
/* "Everything in one account": photo with an account card | heading, checklist, button */
.ox-account {
    display: grid;
    align-items: center;
    gap: 56px;
    margin-top: 96px;
}
@media (min-width: 992px) {
    .ox-account {
        grid-template-columns: 1fr 1fr;
        gap: 72px;
    }
}
.ox-account-media {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 0 40px 40px;
}
.ox-account-shape {
    position: absolute;
    inset: 56px 56px 0 0;
    border-radius: 24px;
    background: linear-gradient(135deg, #bcd4ff, var(--ox-brand-50));
    transform: rotate(-6deg);
}
.ox-account-photo {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 14 / 15;
    border-radius: 20px;
    object-fit: cover;
}
.ox-account-card {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 250px;
    padding: 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .14);
}
.ox-account-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--ox-n-900);
    font-size: 14px;
    font-weight: 700;
}
.ox-account-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--ox-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}
.ox-account-row {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 8px 10px;
    border: 1px solid var(--ox-n-200);
    border-radius: 8px;
    color: var(--ox-n-700);
    font-size: 13px;
}
.ox-account-row + .ox-account-row {
    margin-top: 6px;
}
.ox-account-row i {
    color: var(--ox-n-500);
    font-size: 15px;
}
.ox-account-pill {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 11px;
    font-weight: 700;
}
.ox-account-pill.is-ok {
    background: #ecfdf3;
    color: #067647;
}
.ox-account-text h2 {
    max-width: 460px;
    margin: 0 0 24px;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.15;
}
.ox-account-text ul {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}
.ox-account-text li {
    display: flex;
    gap: 10px;
    color: var(--ox-n-200);
    font-size: 16px;
    line-height: 1.5;
}
.ox-account-text li + li {
    margin-top: 12px;
}
.ox-account-text li i {
    color: #fff;
    font-size: 18px;
    line-height: 1.35;
}
.ox-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 10px;
    background: var(--ox-brand);
    color: #fff;
    font-weight: 700;
    transition: background-color .2s;
}
.ox-account-btn:hover {
    background: var(--ox-brand-hover);
    color: #fff;
}
@media (max-width: 991px) {
    .ox-proof {
        padding: 64px 0 72px;
    }
    .ox-proof-title {
        font-size: 34px;
    }
    .ox-account {
        margin-top: 72px;
    }
    .ox-account-text h2 {
        font-size: 32px;
    }
}
@media (max-width: 575px) {
    .ox-proof-title {
        font-size: 28px;
    }
    .ox-proof-card {
        width: 300px;
    }
    .ox-account-media {
        padding: 0 0 32px 16px;
    }
    .ox-account-card {
        width: 236px;
        padding: 12px;
    }
}

/* Essentials (includes/ox-essentials.tpl): four animated cards; on desktop the hovered or focused
   card widens and shows its description. Below 992px the cards scroll sideways. The looping scenes are
   driven by the script in the template (state classes); photos drift with a slow camera move. */
.ox-ess {
    padding: 88px 0;
    background: #fff;
}
/* Wider than the theme's 1250px content width (main.css sets it with !important), so the cards
   fill more of large screens */
.ox-ess .container {
    max-width: 1400px !important;
    padding-right: 24px;
    padding-left: 24px;
}
.ox-ess-title {
    margin: 0 0 48px;
    color: var(--ox-n-900);
    font-size: 44px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
}
.ox-ess-row {
    display: flex;
    gap: 24px;
}
.ox-ess-card {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    color: var(--ox-n-900);
    transition: flex-grow .45s cubic-bezier(.2, .7, .2, 1);
}
.ox-ess-card:hover,
.ox-ess-card:focus-visible {
    color: var(--ox-n-900);
}
.ox-ess-card:focus-visible {
    outline: 0;
}
.ox-ess-card:focus-visible .ox-ess-media {
    box-shadow: 0 0 0 3px var(--ox-brand);
}
.ox-ess-media {
    position: relative;
    height: 480px;
    overflow: hidden;
    border-radius: 20px;
    background: #d6e4ff;
}
.ox-ess-card h3 {
    margin: 24px 0 0;
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 600;
}
.ox-ess-card p {
    margin: 8px 0 0;
    color: var(--ox-n-500);
    font-size: 16px;
    line-height: 1.5;
}
.ox-ess-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Slow camera move on every photo */
.ox-ess-kenburns {
    animation: ox-kenburns 16s ease-in-out infinite alternate;
}
@keyframes ox-kenburns {
    from { transform: scale(1.02) translate(0, 0); }
    to { transform: scale(1.14) translate(-2%, -2%); }
}
.ox-ess-arrow {
    display: flex;
    position: absolute;
    z-index: 3;
    top: 16px;
    right: 16px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--ox-n-900);
    font-size: 20px;
}
.ox-ess-badge {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 26px;
}
/* Soft block pattern, gently shifting */
.ox-ess-tiles {
    background: #dbe7ff;
}
.ox-ess-tile {
    position: absolute;
    background: #c7d9ff;
    animation: ox-tile 9s ease-in-out infinite alternate;
}
.ox-ess-tile.is-a { top: 0; left: 0; width: 34%; height: 100%; opacity: .55; }
.ox-ess-tile.is-b { top: 0; left: 34%; width: 33%; height: 22%; background: #bcd2ff; animation-delay: -3s; }
.ox-ess-tile.is-c { top: 0; left: 34%; width: 40%; height: 18%; background: #a9c5ff; animation-delay: -5s; }
@keyframes ox-tile {
    to { transform: translateY(14px); opacity: .8; }
}

/* Hosting: browser window loads, "live" toast pops up */
.ox-ess-window {
    position: absolute;
    top: 64px;
    right: -1px;
    bottom: -1px;
    left: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 16px 0 0 0;
    background: #eef3ff;
}
.ox-ess-window-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
}
.ox-ess-window-bar i {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}
.ox-ess-window-url {
    margin-left: 10px;
    padding: 2px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--ox-n-500);
    font-size: 12px;
    white-space: nowrap;
}
.ox-ess-progress {
    position: absolute;
    top: 36px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--ox-brand);
    transform-origin: left;
    animation: ox-progress 7s ease-in-out infinite;
}
@keyframes ox-progress {
    0% { transform: scaleX(0); opacity: 1; }
    25% { transform: scaleX(1); opacity: 1; }
    32%, 100% { transform: scaleX(1); opacity: 0; }
}
.ox-ess-window-body {
    position: absolute;
    top: 39px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
.ox-ess-window-body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 30%;
}
.ox-ess-toast {
    display: flex;
    position: absolute;
    bottom: 24px;
    left: 18px;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .12);
    animation: ox-toast 7s ease-in-out infinite;
}
@keyframes ox-toast {
    0%, 28% { opacity: 0; transform: translateY(24px); }
    36%, 86% { opacity: 1; transform: none; }
    94%, 100% { opacity: 0; transform: translateY(12px); }
}
.ox-ess-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #12b76a;
    box-shadow: 0 0 0 0 rgba(18, 183, 106, .5);
    animation: ox-pulse 1.6s ease-out infinite;
}
@keyframes ox-pulse {
    to { box-shadow: 0 0 0 10px rgba(18, 183, 106, 0); }
}

/* Domains: search bar types a name, button spins, "available" result slides in */
.ox-ess-search {
    position: absolute;
    top: 40%;
    left: 16px;
    width: 400px;
    animation: ox-float 6s ease-in-out infinite;
}
@keyframes ox-float {
    50% { transform: translateY(-8px); }
}
.ox-ess-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    border-radius: 12px;
    background: #fff;
    color: var(--ox-n-900);
    font-size: 17px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .14);
}
.ox-ess-search-bar > i {
    color: var(--ox-n-500);
    font-size: 18px;
}
.ox-ess-typed {
    white-space: nowrap;
}
.ox-ess-caret {
    width: 2px;
    height: 20px;
    margin-left: -6px;
    background: var(--ox-brand);
    animation: ox-caret 1s steps(1) infinite;
}
@keyframes ox-caret {
    50% { opacity: 0; }
}
.ox-ess-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    height: 38px;
    margin-left: auto;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.ox-ess-search-btn i {
    display: none;
    font-size: 18px;
    animation: ox-spin .8s linear infinite;
}
.is-searching .ox-ess-search-btn span {
    display: none;
}
.is-searching .ox-ess-search-btn i {
    display: block;
}
@keyframes ox-spin {
    to { transform: rotate(360deg); }
}
.ox-ess-result {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    color: var(--ox-n-700);
    font-size: 15px;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .12);
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    transition: opacity .35s ease, transform .35s ease;
}
.is-found .ox-ess-result {
    opacity: 1;
    transform: none;
}
.ox-ess-result > i {
    color: #12b76a;
    font-size: 22px;
}
.ox-ess-result b {
    color: var(--ox-n-900);
}
.ox-ess-result em {
    margin-left: auto;
    color: var(--ox-brand);
    font-style: normal;
    font-weight: 700;
}

/* Business email: steps m1 (sender) > m2 (recipients) > subject typed > m3 (picture) > m4 (sent) */
.ox-ess-mail {
    position: absolute;
    top: 88px;
    right: -1px;
    bottom: -1px;
    left: 56px;
    padding: 18px 0 0 18px;
    border-radius: 16px 0 0 0;
    background: #eef3ff;
    color: var(--ox-n-900);
    font-size: 14px;
    transition: opacity .5s ease;
}
.ox-ess-mail.m-out {
    opacity: 0;
}
.ox-ess-mail-head {
    margin-bottom: 18px;
    font-weight: 700;
}
.ox-ess-mail-from {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    margin: 0 0 16px -40px;
    padding: 8px 22px 8px 8px;
    border-radius: 999px;
    background: #fff;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .06);
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity .45s ease, transform .45s ease;
}
.m1 .ox-ess-mail-from {
    opacity: 1;
    transform: none;
}
.ox-ess-mail-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ox-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.ox-ess-mail-row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 46px;
    border-bottom: 1px solid #d6e2fb;
    color: var(--ox-n-500);
    white-space: nowrap;
}
.ox-ess-mail-row > span {
    min-width: 72px;
}
.ox-ess-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid #c3d5fb;
    border-radius: 999px;
    color: var(--ox-n-700);
    font-style: normal;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.m2 .ox-ess-chip {
    opacity: 1;
    transform: none;
}
.ox-ess-subject {
    color: var(--ox-n-700);
    font-weight: 500;
}
.ox-ess-mail-img {
    display: block;
    width: 100%;
    height: 150px;
    margin-top: 18px;
    border-radius: 12px 0 0 0;
    object-fit: cover;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .5s ease, transform .5s ease;
}
.m3 .ox-ess-mail-img {
    opacity: 1;
    transform: none;
}
.ox-ess-sent {
    display: flex;
    position: absolute;
    top: 12px;
    right: 16px;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .35s ease, transform .35s ease;
}
.m4 .ox-ess-sent {
    opacity: 1;
    transform: none;
}

/* Website security: address typed, padlock locks (s1), secure chip slides in (s2) */
.ox-ess-secure {
    position: absolute;
    top: 9%;
    left: 8%;
    transition: opacity .4s ease;
    animation: ox-float 6s ease-in-out infinite;
}
.ox-ess-secure.s-out {
    opacity: 0;
}
.ox-ess-urlbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 28px 10px 10px;
    border-radius: 14px 0 0 14px;
    background: rgba(255, 255, 255, .94);
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 500;
    white-space: nowrap;
}
.ox-ess-lock {
    position: relative;
    background: var(--ox-n-400);
    transition: background-color .35s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.ox-ess-lock i {
    position: absolute;
    transition: opacity .25s ease;
}
.ox-ess-lock .ri-lock-line {
    opacity: 0;
}
.s1 .ox-ess-lock {
    background: #12b76a;
    transform: scale(1.08);
}
.s1 .ox-ess-lock .ri-lock-unlock-line {
    opacity: 0;
}
.s1 .ox-ess-lock .ri-lock-line {
    opacity: 1;
}
.ox-ess-https {
    color: var(--ox-n-400);
    transition: color .35s ease;
}
.s1 .ox-ess-https {
    color: #067647;
}
.ox-ess-secure-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .35s ease, transform .35s ease;
}
.ox-ess-secure-chip i {
    font-size: 18px;
}
.s2 .ox-ess-secure-chip {
    opacity: 1;
    transform: none;
}

/* Still frame until the card plays (the template script adds .is-playing on hover, focus or, on
   touch screens, when the card is swiped into view) */
.ox-ess-card:not(.is-playing) .ox-ess-media * {
    animation-play-state: paused !important;
}
.ox-ess-card:not(.is-playing) .ox-ess-progress {
    opacity: 0;
}
.ox-ess-card:not(.is-playing) .ox-ess-toast {
    animation: none;
    opacity: 1;
    transform: none;
}
.ox-ess-card:not(.is-playing) .ox-ess-caret {
    opacity: 0;
}
/* Desktop: grow the card under the mouse, show its arrow and description */
@media (min-width: 992px) {
    .ox-ess-card:hover,
    .ox-ess-card:focus-visible {
        flex-grow: 1.75;
    }
    .ox-ess-arrow {
        opacity: 0;
        transform: scale(.8);
        transition: opacity .3s, transform .3s;
    }
    .ox-ess-card:hover .ox-ess-arrow,
    .ox-ess-card:focus-visible .ox-ess-arrow {
        opacity: 1;
        transform: none;
    }
    .ox-ess-card p {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .35s ease, opacity .25s ease;
    }
    .ox-ess-card:hover p,
    .ox-ess-card:focus-visible p {
        max-height: 60px;
        opacity: 1;
    }
}
/* Smaller screens: swipe through the cards */
@media (max-width: 991px) {
    .ox-ess {
        padding: 64px 0;
    }
    .ox-ess-title {
        margin-bottom: 32px;
        font-size: 32px;
    }
    .ox-ess-row {
        gap: 16px;
        margin: 0 -12px;
        padding: 0 12px 8px;
        overflow-x: auto;
        scroll-padding-left: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .ox-ess-row::-webkit-scrollbar {
        display: none;
    }
    .ox-ess-card {
        flex: 0 0 300px;
        scroll-snap-align: start;
    }
    .ox-ess-media {
        height: 380px;
    }
    .ox-ess-search {
        right: 16px;
        width: auto;
    }
    .ox-ess-result {
        gap: 6px;
        padding: 10px 12px;
        font-size: 13px;
    }
    .ox-ess-result > i {
        font-size: 18px;
    }
    .ox-ess-search-bar,
    .ox-ess-urlbar {
        font-size: 16px;
    }
    .ox-ess-secure {
        left: 8%;
    }
}
@media (max-width: 575px) {
    .ox-ess-title {
        font-size: 28px;
    }
    .ox-ess-card {
        flex-basis: 82%;
    }
    /* Narrow phones: the price drops under the domain name */
    .ox-ess-result {
        flex-wrap: wrap;
    }
    .ox-ess-result em {
        flex-basis: 100%;
        margin-left: 24px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ox-ess-card,
    .ox-ess-arrow,
    .ox-ess-card p,
    .ox-ess-kenburns,
    .ox-ess-tile,
    .ox-ess-search,
    .ox-ess-secure,
    .ox-ess-live-dot,
    .ox-ess-caret {
        transition: none;
        animation: none;
    }
    .ox-ess-progress {
        display: none;
    }
    .ox-ess-toast {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* "The Power of Advanced Web Hosting" visuals (homepage.tpl #Why): photo filling the card with a
   small interface panel on top, replacing the theme's line illustrations */
.homepage-features.ox-why-media {
    position: relative;
    min-height: 400px;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    background: var(--ox-n-100);
}
.ox-why-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.ox-why-media:hover .ox-why-photo {
    transform: scale(1.03);
}
.ox-why-ui {
    position: absolute;
    left: 24px;
    bottom: 24px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    color: var(--ox-n-900);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .12);
}
.ox-why-ui-label {
    color: var(--ox-n-500);
    font-size: 13px;
    font-weight: 500;
}
.ox-why-ui-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}
/* Speed panel: top-left, over the wall in why-speed.jpg, so the laptop stays visible */
.ox-why-perf {
    display: flex;
    top: 24px;
    bottom: auto;
    align-items: center;
    gap: 14px;
}
.ox-why-ring {
    position: relative;
    width: 52px;
    height: 52px;
}
.ox-why-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ox-why-ring circle {
    fill: none;
    stroke: var(--ox-n-200);
    stroke-width: 5;
}
.ox-why-ring circle.is-fill {
    stroke: #12b76a;
    stroke-dasharray: 125.7;
    stroke-dashoffset: 12;
    stroke-linecap: round;
}
.ox-why-ring i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #12b76a;
    font-size: 20px;
}
.ox-why-spark {
    width: 96px;
    height: 32px;
    margin-left: 8px;
}
.ox-why-spark polyline {
    fill: none;
    stroke: var(--ox-brand);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
/* Security status rows */
.ox-why-status {
    width: 270px;
    padding: 10px;
}
.ox-why-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.ox-why-status-row + .ox-why-status-row {
    border-top: 1px solid var(--ox-n-100);
}
.ox-why-status-row i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 16px;
}
.ox-why-pill {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 12px;
    font-weight: 700;
}
/* Growth panel */
.ox-why-growth {
    right: 24px;
    left: auto;
    width: 230px;
}
.ox-why-growth-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.ox-why-growth-head i {
    color: #12b76a;
    font-size: 18px;
}
.ox-why-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 64px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ox-n-100);
}
.ox-why-bars i {
    flex: 1;
    border-radius: 4px 4px 2px 2px;
    background: #c7d9ff;
}
.ox-why-bars i:last-child {
    background: var(--ox-brand);
}
.ox-why-apps {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.ox-why-apps span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--ox-n-200);
    border-radius: 9px;
    color: var(--ox-n-700);
    font-size: 17px;
}
@media (max-width: 575px) {
    .homepage-features.ox-why-media {
        min-height: 320px;
    }
    .ox-why-ui {
        left: 16px;
        bottom: 16px;
    }
    /* Compact, bottom-right over his shirt, clear of his face and the laptop */
    .ox-why-perf {
        right: 12px;
        bottom: 12px;
        left: auto;
        top: auto;
        gap: 10px;
        padding: 12px 14px;
    }
    .ox-why-perf .ox-why-spark {
        display: none;
    }
    .ox-why-perf .ox-why-ring {
        width: 42px;
        height: 42px;
    }
    .ox-why-growth {
        right: 12px;
        bottom: 12px;
        left: auto;
        width: 168px;
        padding: 12px;
    }
    .ox-why-growth .ox-why-bars {
        height: 44px;
    }
    .ox-why-growth .ox-why-apps span {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    .ox-why-growth .ox-why-apps {
        gap: 6px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ox-why-photo {
        transition: none;
    }
}

/* Home domain section (homepage.tpl #Domains): the theme's layout (heading, search, extension logos
   with prices) upgraded: one rounded search bar, and logo cards with price and a register link */
.ox-hd-search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 760px;
    margin: 40px auto 0;
    padding: 6px;
    border: 1px solid var(--ox-n-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: border-color .2s;
}
.ox-hd-search:focus-within {
    border-color: var(--ox-brand);
}
.ox-hd-search-icon {
    padding-left: 12px;
    color: var(--ox-n-400);
    font-size: 20px;
}
.ox-hd-search input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 52px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ox-n-900);
    font-size: 17px;
}
.ox-hd-search input[type="text"]::placeholder {
    color: var(--ox-n-400);
}
.ox-hd-search button {
    height: 52px;
    padding: 0 30px;
    border: 0;
    border-radius: 10px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    transition: background-color .2s;
}
.ox-hd-search button:hover {
    background: var(--ox-brand-hover);
}
.ox-hd-tlds {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 960px;
    margin: 32px auto 0;
    padding: 0;
    list-style: none;
}
.ox-hd-tld {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 28px 16px 22px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    color: var(--ox-n-900);
    text-align: center;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ox-hd-tld:hover {
    border-color: var(--ox-brand);
    color: var(--ox-n-900);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .08);
    transform: translateY(-4px);
}
.ox-hd-tag {
    position: absolute;
    top: -11px;
    left: 50%;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transform: translateX(-50%);
}
.ox-hd-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
}
.ox-hd-logo img {
    width: auto;
    max-width: 150px;
    max-height: 40px;
}
.ox-hd-logo.is-round img {
    max-height: 48px;
}
.ox-hd-price {
    color: var(--ox-n-500);
    font-size: 15px;
}
.ox-hd-price strong {
    color: var(--ox-n-900);
    font-size: 26px;
    font-weight: 800;
}
.ox-hd-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
    font-size: 14px;
    font-weight: 600;
    transition: background-color .2s, color .2s;
}
.ox-hd-tld:hover .ox-hd-go {
    background: var(--ox-brand);
    color: #fff;
}
.ox-hd-go i {
    transition: transform .2s;
}
.ox-hd-tld:hover .ox-hd-go i {
    transform: translateX(3px);
}
.ox-hd-all {
    margin: 28px 0 0;
    text-align: center;
}
.ox-hd-all a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ox-brand);
    font-weight: 600;
}
@media (max-width: 767px) {
    .ox-hd-tlds {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }
    .ox-hd-search button {
        padding: 0 20px;
    }
    .ox-hd-logo img {
        max-width: 110px;
        max-height: 34px;
    }
    .ox-hd-logo.is-round img {
        max-height: 44px;
    }
    .ox-hd-search input[type="text"] {
        font-size: 16px;
    }
}
@media (max-width: 400px) {
    .ox-hd-search-icon {
        display: none;
    }
    .ox-hd-search input[type="text"] {
        padding-left: 10px;
    }
}

/* Hosting banner (includes/ox-promo-hosting.tpl): warm sunset gradient with the text on the left,
   the photo on the right half fading into it (on phones the photo is a band at the top), headline with
   the live starting price, the cheapest plan's features, Pricing / Learn More buttons */
.ox-promo {
    display: flex;
    position: relative;
    align-items: center;
    min-height: 600px;
    padding: 88px 0;
    overflow: hidden;
    background: linear-gradient(105deg, #1a0c04 0%, #2e1206 40%, #6b2a0c 72%, #b5571f 100%);
}
.ox-promo-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    background-image:
        linear-gradient(180deg, rgba(232, 128, 44, .34), rgba(110, 38, 10, .46)),
        url(../custom/images/promo-hosting.jpg);
    background-position: center, 40% 30%;
    background-size: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .6) 22%, #000 48%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .6) 22%, #000 48%);
}
.ox-promo .container {
    position: relative;
    z-index: 1;
    width: 100%;
}
.ox-promo-text {
    max-width: 640px;
}
.ox-promo-text h2 {
    margin: 0 0 32px;
    color: #fff;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.01em;
}
.ox-promo-text h2 strong {
    font-weight: 800;
}
.ox-promo-list {
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}
.ox-promo-list li {
    position: relative;
    padding-left: 30px;
    color: #fff;
    font-size: 17px;
    line-height: 1.5;
}
.ox-promo-list li + li {
    margin-top: 12px;
}
.ox-promo-list li::before {
    content: "\eb7b";
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-family: var(--font-remixicon);
    font-size: 19px;
    line-height: 1.3;
}
/* Keep the banner short: show the first five features */
.ox-promo-list li:nth-child(n+6) {
    display: none;
}
.ox-promo-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.ox-promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    height: 54px;
    padding: 0 28px;
    border: 1.5px solid #fff;
    border-radius: 6px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    transition: background-color .2s, color .2s;
}
.ox-promo-btn:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.ox-promo-btn.is-solid {
    background: #fff;
    color: var(--ox-n-900);
}
.ox-promo-btn.is-solid:hover {
    background: var(--ox-n-100);
    color: var(--ox-n-900);
}
@media (max-width: 991px) {
    /* Photo becomes a band across the top, fading into the gradient below */
    .ox-promo {
        display: block;
        min-height: 0;
        padding: 300px 0 64px;
        background: linear-gradient(180deg, #2e1206 0%, #1a0c04 100%);
    }
    .ox-promo-photo {
        bottom: auto;
        width: 100%;
        height: 380px;
        background-position: center, center 25%;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
    .ox-promo-text h2 {
        font-size: 40px;
    }
}
@media (max-width: 575px) {
    .ox-promo {
        padding: 262px 0 56px;
    }
    .ox-promo-photo {
        height: 320px;
    }
    .ox-promo-text h2 {
        font-size: 32px;
    }
    .ox-promo-list li {
        font-size: 16px;
    }
    .ox-promo-btn {
        flex: 1;
        min-width: 0;
    }
}

/* Photo + interface panel ("media card"), used for product page visuals (e.g. vps-server.tpl):
   rounded photo with a small white panel showing the section's topic */
.ox-media {
    position: relative;
    max-width: 540px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    background: var(--ox-n-100);
    aspect-ratio: 5 / 4;
}
.ox-media.is-hero {
    border: 1px solid rgba(255, 255, 255, .1);
}
.ox-media-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.ox-media:hover .ox-media-photo {
    transform: scale(1.03);
}
.ox-media-panel {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 280px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    color: var(--ox-n-900);
    text-align: left;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .14);
}
.ox-mp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.ox-mp-head b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
.ox-mp-head small {
    display: block;
    color: var(--ox-n-500);
    font-size: 12px;
}
.ox-mp-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 18px;
}
.ox-mp-pill {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.ox-mp-pill.is-ok {
    background: #ecfdf3;
    color: #067647;
}
.ox-mp-title {
    margin: 0 0 6px 4px;
    font-size: 14px;
    font-weight: 700;
}
.ox-mp-meter {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: var(--ox-n-500);
    font-size: 12px;
}
.ox-mp-meter i {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ox-brand) var(--v), var(--ox-n-100) var(--v));
}
.ox-mp-meter em {
    color: var(--ox-n-700);
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}
.ox-mp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.ox-mp-row + .ox-mp-row {
    border-top: 1px solid var(--ox-n-100);
}
.ox-mp-row > i {
    color: var(--ox-brand);
    font-size: 17px;
}
.ox-mp-row > i.is-ok {
    color: #12b76a;
}
.ox-mp-row > span:last-child {
    margin-left: auto;
    color: var(--ox-n-500);
    font-weight: 500;
}
.ox-mp-row > .ox-mp-pill:last-child {
    color: #067647;
    font-weight: 700;
}
.ox-mp-row .is-spin {
    animation: ox-spin 1s linear infinite;
}
.ox-mp-progress {
    height: 6px;
    margin: 4px 6px 4px;
    border-radius: 3px;
    background: var(--ox-n-100);
    overflow: hidden;
}
.ox-mp-progress i {
    display: block;
    width: var(--v);
    height: 100%;
    border-radius: 3px;
    background: var(--ox-brand);
}
.ox-mp-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.ox-mp-actions span {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 0;
    border: 1px solid var(--ox-n-200);
    border-radius: 8px;
    color: var(--ox-n-700);
    font-size: 12px;
    font-weight: 600;
}
.ox-mp-actions span.is-active {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
    color: #fff;
}
.ox-media-panel.is-right {
    right: 20px;
    left: auto;
}
.ox-media-panel.is-chat p {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px 12px 12px 4px;
    background: var(--ox-n-50);
    color: var(--ox-n-700);
    font-size: 13px;
    line-height: 1.5;
}
@media (max-width: 575px) {
    .ox-media-panel {
        bottom: 12px;
        left: 12px;
        width: 240px;
        padding: 12px;
    }
    .ox-media-panel.is-right {
        right: 12px;
        left: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ox-media-photo {
        transition: none;
    }
    .ox-mp-row .is-spin {
        animation: none;
    }
}

/* Media card variants and feature icon tiles (shared-hosting.tpl and other product pages) */
.ox-media.is-tall {
    aspect-ratio: 4 / 5;
}
/* Feature cards (main.css .features-4): modern icon tile instead of the line illustrations */
.features-4 .icon.ox-icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 28px;
    transition: background-color .2s, color .2s;
}
.features-4:hover .icon.ox-icon-tile {
    background: var(--ox-brand);
    color: #fff;
}
.features-4.big .icon.ox-icon-tile {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    margin-bottom: 0;
    border-radius: 24px;
    font-size: 44px;
}
.features-4 {
    border-color: var(--ox-n-200);
    border-radius: 16px;
}
.features-4:hover {
    box-shadow: 0 8px 20px rgba(16, 24, 40, .08);
}
@media (max-width: 767px) {
    .features-4.big .icon.ox-icon-tile {
        width: 56px;
        height: 56px;
        margin-bottom: 20px;
        border-radius: 14px;
        font-size: 28px;
    }
}

/* Product hero (includes/ox-product-hero.tpl): dark glow background, text on the left, browser window
   with a sample customer site and two floating cards on the right */
.ox-phero {
    position: relative;
    overflow: hidden;
    padding: 150px 0 110px;
    background: #070b1a;
}
.ox-phero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 60% at 72% 62%, rgba(26, 108, 245, .32), transparent 70%),
        radial-gradient(ellipse 40% 45% at 88% 92%, rgba(99, 70, 235, .32), transparent 70%),
        radial-gradient(ellipse 50% 40% at 15% 105%, rgba(26, 108, 245, .16), transparent 70%);
    pointer-events: none;
}
.ox-phero .container {
    position: relative;
}
.ox-phero-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: 56px;
}
.ox-phero-eyebrow {
    margin-bottom: 18px;
    color: var(--ox-n-200);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
}
.ox-phero h1 {
    margin: 0 0 24px;
    color: #fff;
    font-size: 60px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.01em;
}
.ox-phero-sub {
    margin: 0 0 22px;
    color: var(--ox-n-200);
    font-size: 21px;
    line-height: 1.45;
}
.ox-phero-points {
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
}
.ox-phero-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 18px;
}
.ox-phero-points li + li {
    margin-top: 10px;
}
.ox-phero-points i {
    color: #fff;
    font-size: 22px;
}
.ox-phero-btn {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0 30px;
    border-radius: 8px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    transition: background-color .2s;
}
.ox-phero-btn:hover {
    background: var(--ox-brand-hover);
    color: #fff;
}
.ox-phero-price {
    margin: 22px 0 0;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
}
.ox-phero-price small {
    color: var(--ox-n-400);
    font-size: 14px;
    font-weight: 500;
}
/* Browser window */
.ox-phero-visual {
    position: relative;
    padding: 36px 28px 64px 24px;
}
.ox-phero-browser {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.ox-phero-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ox-phero-dots {
    display: flex;
    gap: 7px;
}
.ox-phero-dots i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
}
.ox-phero-url {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
}
.ox-phero-url i {
    color: #34d399;
    font-size: 15px;
}
.ox-phero-caret {
    width: 1.5px;
    height: 18px;
    background: #fff;
    animation: ox-caret 1s steps(1) infinite;
}
.ox-phero-site {
    display: grid;
    grid-template-columns: 1fr 42%;
    align-items: center;
    gap: 24px;
    padding: 40px 32px 44px;
}
.ox-phero-site-brand {
    margin-bottom: 14px;
    color: var(--ox-n-300);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
}
.ox-phero-site-title {
    margin-bottom: 12px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}
.ox-phero-site-sub {
    margin-bottom: 20px;
    color: var(--ox-n-300);
    font-size: 15px;
}
.ox-phero-site-btn {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--ox-n-900);
    font-size: 14px;
    font-weight: 700;
}
.ox-phero-skel {
    display: block;
    height: 9px;
    margin-top: 26px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .12);
}
.ox-phero-skel.is-short {
    width: 60%;
    margin-top: 14px;
}
.ox-phero-site-photo {
    width: 100%;
    height: 250px;
    border-radius: 14px;
    object-fit: cover;
}
/* Floating cards */
.ox-phero-card {
    position: absolute;
    padding: 18px 22px;
    border-radius: 16px;
    background: #fff;
    color: var(--ox-n-900);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
    animation: ox-float 6s ease-in-out infinite;
}
.ox-phero-card b {
    display: block;
    font-size: 16px;
    font-weight: 600;
}
.ox-phero-card.is-ring {
    top: 0;
    right: 0;
    text-align: center;
}
.ox-phero-ring {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    margin: 0 auto 10px;
    color: #12b76a;
    font-size: 34px;
}
.ox-phero-ring svg {
    position: absolute;
    inset: 0;
}
.ox-phero-ring circle {
    fill: none;
    stroke: #12b76a;
    stroke-width: 4;
}
.ox-phero-card.is-stat {
    bottom: 12px;
    left: 0;
    min-width: 240px;
    animation-delay: -3s;
}
.ox-phero-stat {
    margin-bottom: 2px;
    line-height: 1.1;
}
.ox-phero-stat strong {
    font-size: 38px;
    font-weight: 700;
}
.ox-phero-stat span {
    color: var(--ox-n-500);
    font-size: 18px;
}
@media (max-width: 1199px) {
    .ox-phero h1 {
        font-size: 48px;
    }
    .ox-phero-site-title {
        font-size: 24px;
    }
}
@media (max-width: 991px) {
    .ox-phero {
        padding: 120px 0 72px;
    }
    .ox-phero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ox-phero h1 {
        font-size: 40px;
    }
    .ox-phero-sub {
        font-size: 18px;
    }
    .ox-phero-visual {
        max-width: 620px;
    }
}
@media (max-width: 575px) {
    .ox-phero h1 {
        font-size: 32px;
    }
    .ox-phero-points li {
        font-size: 16px;
    }
    .ox-phero-visual {
        padding: 24px 0 52px;
    }
    .ox-phero-site {
        grid-template-columns: 1fr 38%;
        gap: 14px;
        padding: 24px 18px 28px;
    }
    .ox-phero-site-title {
        font-size: 18px;
    }
    .ox-phero-site-sub,
    .ox-phero-skel {
        display: none;
    }
    .ox-phero-site-photo {
        height: 150px;
    }
    .ox-phero-url {
        font-size: 14px;
    }
    .ox-phero-card {
        padding: 12px 14px;
    }
    .ox-phero-card b {
        font-size: 13px;
    }
    .ox-phero-ring {
        width: 58px;
        height: 58px;
        margin-bottom: 6px;
        font-size: 22px;
    }
    .ox-phero-card.is-stat {
        min-width: 0;
    }
    .ox-phero-stat strong {
        font-size: 26px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ox-phero-card,
    .ox-phero-caret {
        animation: none;
    }
}

/* Product hero point tooltips (includes/ox-product-hero.tpl): picture + explanation on hover,
   tap or keyboard focus; to the right of the point on desktop, below it on smaller screens */
/* Tooltips open above the browser visual and its floating cards */
.ox-phero-text {
    position: relative;
    z-index: 5;
}
.ox-tip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: help;
    outline: 0;
}
.ox-tip-label {
    border-bottom: 1px dashed rgba(255, 255, 255, .45);
}
.ox-tip-wrap:focus-visible .ox-tip-label {
    border-bottom-color: #fff;
}
.ox-tip {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: calc(100% + 16px);
    width: 300px;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transform: translate(-6px, -50%);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
}
.ox-tip-wrap:hover .ox-tip,
.ox-tip-wrap:focus .ox-tip,
.ox-tip-wrap:focus-within .ox-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}
.ox-tip img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
}
.ox-tip-body {
    display: block;
    padding: 14px 16px 16px;
    color: var(--ox-n-500);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    white-space: normal;
}
.ox-tip-body b {
    display: block;
    margin-bottom: 4px;
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 700;
}
@media (max-width: 1199px) {
    .ox-tip {
        top: calc(100% + 10px);
        left: 0;
        transform: translateY(-6px);
    }
    .ox-tip-wrap:hover .ox-tip,
    .ox-tip-wrap:focus .ox-tip,
    .ox-tip-wrap:focus-within .ox-tip {
        transform: none;
    }
}
@media (max-width: 575px) {
    .ox-tip {
        left: -32px;
        width: min(300px, calc(100vw - 24px));
    }
}
@media (prefers-reduced-motion: reduce) {
    .ox-tip {
        transition: none;
    }
}

/* Order header and footer (header.tpl / footer.tpl when $inShoppingCart): logo, steps, secure checkout */
.ox-oheader {
    background: var(--ox-navy);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ox-oheader-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
}
.ox-oheader-logo img {
    width: auto;
    height: 24px;
}
.ox-osteps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.ox-osteps li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ox-n-400);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.ox-osteps li + li::before {
    content: "";
    width: 36px;
    height: 1px;
    margin-right: 8px;
    background: rgba(255, 255, 255, .18);
}
.ox-osteps-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    font-size: 13px;
}
.ox-osteps li.is-current {
    color: #fff;
}
.ox-osteps li.is-current .ox-osteps-num {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
    color: #fff;
}
.ox-osteps li.is-done {
    color: var(--ox-n-200);
}
.ox-osteps li.is-done .ox-osteps-num {
    border-color: #12b76a;
    background: #12b76a;
    color: #fff;
}
.ox-osteps li.is-done + li::before,
.ox-osteps li.is-current::before {
    background: rgba(255, 255, 255, .45);
}
.ox-oheader-meta {
    display: flex;
    align-items: center;
    gap: 20px;
}
.ox-oheader-secure,
.ox-oheader-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ox-n-200);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.ox-oheader-secure i {
    color: #34d399;
}
.ox-oheader-help:hover {
    color: #fff;
}
.ox-ofooter {
    padding: 24px 0;
    border-top: 1px solid var(--ox-n-200);
    background: #fff;
}
.ox-ofooter-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
}
.ox-ofooter-copy {
    color: var(--ox-n-500);
    font-size: 14px;
}
.ox-ofooter-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-ofooter-links a {
    color: var(--ox-n-500);
    font-size: 14px;
}
.ox-ofooter-links a:hover {
    color: var(--ox-n-900);
}
.ox-ofooter-pay {
    display: flex;
    gap: 8px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}
.ox-ofooter-pay i {
    color: var(--ox-n-400);
    font-size: 28px;
}
@media (max-width: 991px) {
    .ox-osteps-label {
        display: none;
    }
    .ox-osteps li.is-current .ox-osteps-label {
        display: inline;
    }
    .ox-osteps li + li::before {
        width: 16px;
    }
    .ox-oheader-secure {
        display: none;
    }
}
@media (max-width: 575px) {
    .ox-oheader-inner {
        flex-wrap: wrap;
        gap: 10px 16px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .ox-osteps {
        order: 3;
        width: 100%;
        justify-content: space-between;
    }
    .ox-osteps li + li::before {
        flex: 1;
        width: auto;
        min-width: 10px;
    }
    .ox-osteps li {
        flex: 1;
    }
    .ox-osteps li:first-child {
        flex: 0 0 auto;
    }
    .ox-oheader-help span {
        display: none;
    }
    .ox-ofooter-pay {
        margin-left: 0;
    }
}

/* Order form: product configuration step (orderforms/hostavik_cart/configureproduct.tpl) */
body:has(.ox-conf) section#main-body {
    padding: 40px 0 72px;
    background: var(--ox-n-50);
}
.ox-conf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
    gap: 32px;
}
.ox-conf-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: var(--ox-n-500);
    font-size: 14px;
    font-weight: 600;
}
.ox-conf-back:hover {
    color: var(--ox-n-900);
}
#order-standard_cart .ox-conf-title {
    margin: 0 0 8px;
    color: var(--ox-n-900);
    font-size: 34px;
    font-weight: 700;
}
.ox-conf-lead {
    margin: 0 0 28px;
    color: var(--ox-n-500);
    font-size: 16px;
}
.ox-conf-card {
    margin-bottom: 20px;
    padding: 28px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: #fff;
}
#order-standard_cart .ox-conf-h2 {
    margin: 0 0 20px;
    color: var(--ox-n-900);
    font-size: 19px;
    font-weight: 700;
}
.ox-conf-muted {
    color: var(--ox-n-500);
}
.ox-conf-product-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ox-conf-product-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 24px;
}
.ox-conf-product-group {
    color: var(--ox-n-500);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ox-conf-product-name {
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}
.ox-conf-change {
    margin-left: auto;
    color: var(--ox-brand);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.ox-conf-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
    margin: 22px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--ox-n-100);
    list-style: none;
}
.ox-conf-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--ox-n-700);
    font-size: 15px;
}
.ox-conf-features i {
    color: #12b76a;
    font-size: 18px;
    line-height: 1.2;
}
/* Billing period cards */
.ox-cycles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.ox-cycle {
    position: relative;
    margin: 0;
    cursor: pointer;
}
/* Zero-size (still keyboard accessible) so standard_cart's "focus the first visible input" skips it */
.ox-cycle input {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.ox-cycle-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px;
    border: 1.5px solid var(--ox-n-200);
    border-radius: 14px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.ox-cycle:hover .ox-cycle-box {
    border-color: var(--ox-n-400);
}
.ox-cycle input:checked + .ox-cycle-box {
    border-color: var(--ox-brand);
    background: var(--ox-brand-50);
    box-shadow: 0 0 0 1px var(--ox-brand);
}
.ox-cycle input:focus-visible + .ox-cycle-box {
    outline: 3px solid rgba(26, 108, 245, .35);
    outline-offset: 2px;
}
.ox-cycle-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.ox-cycle-name {
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 700;
}
.ox-cycle-save {
    padding: 2px 8px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.ox-cycle-price {
    margin-top: 6px;
    color: var(--ox-n-900);
    font-size: 15px;
}
.ox-cycle-price strong {
    font-size: 24px;
    font-weight: 800;
}
.ox-cycle-billed {
    color: var(--ox-n-500);
    font-size: 13px;
}
/* Server details */
.ox-conf-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
}
.ox-conf-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
}
.ox-conf-field small {
    display: block;
    margin-top: 6px;
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-conf .form-control {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ox-n-300);
    border-radius: 10px;
    color: var(--ox-n-900);
    font-size: 16px;
    box-shadow: none;
}
.ox-conf .form-control:focus {
    border-color: var(--ox-brand);
    box-shadow: 0 0 0 2px rgba(26, 108, 245, .1);
}
.ox-conf-password {
    position: relative;
}
.ox-conf-password .form-control {
    padding-right: 52px;
}
/* Summary column */
/* Starts level with the plan card and scrolls with the page (as on the cart) */
.ox-conf-side {
    min-width: 0;
}
.ox-conf-summary {
    padding: 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: #fff;
}
#order-standard_cart .ox-conf-summary .order-summary {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
#order-standard_cart .ox-conf-summary .order-summary h2.ox-conf-summary-title {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ox-n-900);
    font-size: 19px;
    font-weight: 700;
    text-align: left;
}
#order-standard_cart .ox-conf-summary .order-summary #producttotal {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ox-n-700);
    font-size: 14px;
}
#order-standard_cart .ox-conf-summary .loader {
    top: 20px;
    right: 20px;
    color: var(--ox-n-400);
}
#order-standard_cart .ox-conf-summary .product-name {
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 700;
}
#order-standard_cart .ox-conf-summary .product-group {
    color: var(--ox-n-500);
    font-style: normal;
}
#order-standard_cart .ox-conf-summary .total-due-today {
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--ox-n-200);
    text-align: left;
}
#order-standard_cart .ox-conf-summary .total-due-today .amt {
    color: var(--ox-n-900);
    font-size: 30px;
    font-weight: 800;
}
#order-standard_cart .ox-conf-summary .total-due-today span:not(.amt) {
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-conf-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    margin-top: 20px;
    border: 0;
    border-radius: 12px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    transition: background-color .2s;
}
.ox-conf-continue:hover {
    background: var(--ox-brand-hover);
}
#order-standard_cart .ox-conf-summary .summary-totals {
    margin: 12px 0;
    padding: 12px 0;
    border-color: var(--ox-n-200);
}
#order-standard_cart .ox-conf-summary .clearfix {
    padding: 2px 0;
}
.ox-conf-trust {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.ox-conf-trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-conf-trust li + li {
    margin-top: 6px;
}
.ox-conf-trust i {
    color: var(--ox-n-700);
    font-size: 16px;
}
.ox-conf-help {
    margin: 16px 4px 0;
    color: var(--ox-n-500);
    font-size: 14px;
}
.ox-conf-help i {
    margin-right: 6px;
    color: var(--ox-brand);
}
.ox-conf-help a {
    color: var(--ox-brand);
    font-weight: 600;
}
@media (max-width: 1199px) {
    .ox-conf-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
    .ox-cycles {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 991px) {
    .ox-conf-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .ox-conf-side {
        position: static;
    }
}
@media (max-width: 575px) {
    body:has(.ox-conf) section#main-body {
        padding-top: 24px;
    }
    #order-standard_cart .ox-conf-title {
        font-size: 28px;
    }
    .ox-conf-card {
        padding: 20px;
    }
    .ox-conf-features,
    .ox-conf-fields {
        grid-template-columns: 1fr;
    }
    .ox-cycles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .ox-cycle-top {
        flex-wrap: wrap;
    }
    .ox-cycle-box {
        padding: 12px;
    }
    .ox-cycle-price strong {
        font-size: 20px;
    }
}

/* Order form: domain step for hosting plans (orderforms/hostavik_cart/configureproductdomain.tpl) */
body:has(.ox-dstep) section#main-body {
    padding: 40px 0 72px;
    background: var(--ox-n-50);
}
.ox-dstep-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 32px;
}
#order-standard_cart.ox-dstep .domain-selection-options {
    display: grid;
    gap: 12px;
    margin: 0;
}
/* Option cards (the radios keep iCheck: standard_cart's script listens for its ifChecked event) */
#order-standard_cart .domain-selection-options .option.ox-dopt {
    margin: 0;
    padding: 0 !important;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
#order-standard_cart .domain-selection-options .option.ox-dopt:hover {
    border-color: var(--ox-n-400);
}
#order-standard_cart .domain-selection-options .option.ox-dopt.option-selected,
#order-standard_cart .domain-selection-options .option.ox-dopt:has(input[name="domainoption"]:checked) {
    border-color: var(--ox-brand);
    background: #fff;
    box-shadow: 0 0 0 1px var(--ox-brand);
}
#order-standard_cart .ox-dopt > label {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 18px 20px;
    font-weight: 400;
    cursor: pointer;
}
#order-standard_cart .ox-dopt .iradio_square-blue {
    flex: 0 0 auto;
    order: 3;
    width: 22px;
    height: 22px;
    margin: 0 0 0 auto;
    border: 2px solid var(--ox-n-300);
    border-radius: 50%;
    background: #fff;
    filter: none;
    transition: border-color .2s, box-shadow .2s;
}
#order-standard_cart .ox-dopt .iradio_square-blue.hover {
    border-color: var(--ox-n-400);
}
#order-standard_cart .ox-dopt .iradio_square-blue.checked {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
    box-shadow: inset 0 0 0 4px #fff;
}
#order-standard_cart .ox-dopt .iradio_square-blue.disabled {
    opacity: .6;
}
.ox-dopt-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 21px;
    transition: background-color .2s, color .2s;
}
.ox-dopt.option-selected .ox-dopt-icon,
.ox-dopt:has(input[name="domainoption"]:checked) .ox-dopt-icon {
    background: var(--ox-brand-50);
    color: var(--ox-brand);
}
.ox-dopt-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ox-dopt-text b {
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 700;
}
.ox-dopt-text small {
    color: var(--ox-n-500);
    font-size: 14px;
}
#order-standard_cart.ox-dstep .domain-input-group {
    margin: 0;
    padding: 0 20px 20px;
}
/* Search box: www. | name | .tld | button */
.ox-dsearch {
    display: flex;
    align-items: stretch;
    height: 56px;
    border: 1px solid var(--ox-n-300);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.ox-dsearch:focus-within {
    border-color: var(--ox-brand);
    box-shadow: 0 0 0 2px rgba(26, 108, 245, .1);
}
.ox-dsearch-prefix {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 4px 0 16px;
    color: var(--ox-n-500);
    font-size: 16px;
}
#order-standard_cart .ox-dsearch .form-control {
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ox-n-900);
    font-size: 16px;
    box-shadow: none;
}
#order-standard_cart .ox-dsearch .ox-dsearch-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px 0 4px;
}
#order-standard_cart .ox-dsearch select.ox-dsearch-field {
    padding-left: 16px;
}
#order-standard_cart .ox-dsearch .ox-dsearch-tld {
    flex: 0 0 auto;
    width: 116px;
    padding: 0 12px;
    border-left: 1px solid var(--ox-n-200);
    font-weight: 600;
}
.ox-dsearch-btn {
    flex: 0 0 auto;
    min-width: 112px;
    margin: 6px;
    padding: 0 22px;
    border: 0;
    border-radius: 9px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    transition: background-color .2s;
}
.ox-dsearch-btn:hover {
    background: var(--ox-brand-hover);
}
.ox-dsearch-btn[disabled],
.ox-dsearch-btn.disabled {
    opacity: .65;
    cursor: wait;
}
.ox-dsearch-prefix .ri-search-line {
    font-size: 19px;
}
/* AI search (WHMCS Domains lookup provider): one line plus a hint and the filters */
.ox-dsearch-hint {
    margin: 8px 2px 0;
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-dsearch-btn .fa-sparkles {
    margin-left: 6px;
}
#order-standard_cart.ox-dstep .ox-dsearch-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
}
#order-standard_cart.ox-dstep .domain-checker-advanced .ox-dsearch-filters .multiselect {
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--ox-n-300) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--ox-n-700) !important;
    font-size: 13px;
    font-weight: 600;
}
#order-standard_cart.ox-dstep .domain-checker-advanced .ox-dsearch-filters .multiselect-container {
    padding: 6px;
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(13, 22, 40, .08);
}
#order-standard_cart.ox-dstep .domain-checker-advanced label.ox-dsearch-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 4px !important;
    color: var(--ox-n-700);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
#order-standard_cart.ox-dstep .domain-checker-advanced label.ox-dsearch-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--ox-brand);
}
.ox-dstep-note {
    margin: 14px 4px 0;
    color: var(--ox-n-500);
    font-size: 13px;
}
/* Results */
#order-standard_cart.ox-dstep #DomainSearchResults {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
}
#order-standard_cart.ox-dstep #DomainSearchResults .primary-domain-header {
    display: inline-block;
    margin: 0 0 4px;
    padding: 4px 12px !important;
    border: 0 !important;
    border-radius: 999px;
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
    font-size: 13px;
    font-weight: 700;
}
#order-standard_cart.ox-dstep .domain-lookup-primary-loader,
#order-standard_cart.ox-dstep .domain-lookup-primary-results {
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left;
}
#order-standard_cart.ox-dstep .domain-checker-result-headline,
#order-standard_cart.ox-dstep .domain-lookup-primary-results .headline {
    margin: 8px 0;
    font-size: 22px;
    font-weight: 700;
}
#order-standard_cart.ox-dstep .domain-checker-available {
    color: #067647;
}
#order-standard_cart.ox-dstep .domain-checker-unavailable,
#order-standard_cart.ox-dstep .domain-checker-invalid {
    color: #b42318;
}
#order-standard_cart.ox-dstep .domain-lookup-primary-results .domain-price {
    color: var(--ox-n-700);
    font-size: 16px;
}
#order-standard_cart.ox-dstep .domain-lookup-primary-results .domain-price .price {
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 800;
}
#order-standard_cart.ox-dstep .transfer-eligible,
#order-standard_cart.ox-dstep .transfer-not-eligible {
    margin: 12px 0 0;
    padding: 18px;
    border: 0;
    border-radius: 12px;
}
#order-standard_cart.ox-dstep .transfer-eligible {
    background: #ecfdf3;
}
#order-standard_cart.ox-dstep .suggested-domains {
    margin-top: 20px;
    border: 1px solid var(--ox-n-200);
    border-radius: 14px;
    overflow: hidden;
}
#order-standard_cart.ox-dstep .suggested-domains .panel-heading {
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--ox-n-200) !important;
    background: var(--ox-n-50);
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 700;
}
#order-standard_cart.ox-dstep .suggested-domains .list-group {
    margin: 0;
}
#order-standard_cart.ox-dstep .suggested-domains .list-group-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 18px;
    border: 0;
    border-top: 1px solid var(--ox-n-100);
    border-radius: 0;
    color: var(--ox-n-900);
    font-size: 16px;
}
#order-standard_cart.ox-dstep .suggested-domains .list-group-item:first-child {
    border-top: 0;
}
#order-standard_cart.ox-dstep .suggested-domains .extension {
    font-weight: 700;
}
#order-standard_cart.ox-dstep .suggested-domains .actions {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
#order-standard_cart.ox-dstep .suggested-domains .price {
    color: var(--ox-n-900);
    font-weight: 700;
}
#order-standard_cart.ox-dstep .btn-add-to-cart {
    min-width: 0;
    padding: 8px 16px;
    border: 1px solid var(--ox-brand);
    border-radius: 9px;
    background: #fff;
    color: var(--ox-brand);
    font-size: 14px;
    font-weight: 700;
}
#order-standard_cart.ox-dstep .btn-add-to-cart:hover,
#order-standard_cart.ox-dstep .btn-add-to-cart.checkout {
    background: var(--ox-brand);
    color: #fff;
}
#order-standard_cart.ox-dstep .suggested-domains .panel-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--ox-n-100);
    background: #fff;
}
#order-standard_cart.ox-dstep .domain-suggestions-warning {
    padding: 0 18px 12px;
    color: var(--ox-n-500);
    font-size: 12px;
}
#order-standard_cart.ox-dstep .domain-suggestions-warning p {
    margin: 0;
}
/* Continue: jQuery .show() makes it inline-block, so it is laid out without flex */
.ox-dstep-actions {
    margin-top: 20px;
    text-align: right;
}
#order-standard_cart.ox-dstep #btnDomainContinue {
    display: inline-block;
    width: auto;
    min-width: 260px;
    height: 54px;
    margin: 0;
    padding: 0 32px;
    line-height: 54px;
    text-align: center;
}
#order-standard_cart.ox-dstep #btnDomainContinue.w-hidden {
    display: none;
}
#order-standard_cart.ox-dstep #btnDomainContinue i {
    margin-left: 8px;
    vertical-align: -2px;
}
/* Plan column */
/* Starts level with the first option and scrolls with the page (as on the cart) */
.ox-dstep-side {
    min-width: 0;
}
.ox-dstep-side-label {
    margin-bottom: 14px;
    color: var(--ox-n-500);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ox-dstep-side .ox-conf-product-name {
    font-size: 20px;
}
.ox-dstep-side .ox-conf-features.is-single {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
}
.ox-dstep-side .ox-conf-features li {
    font-size: 14px;
}
.ox-dstep-next {
    display: flex;
    gap: 8px;
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ox-n-50);
    color: var(--ox-n-600, var(--ox-n-500));
    font-size: 13px;
}
.ox-dstep-next i {
    color: var(--ox-brand);
    font-size: 16px;
    line-height: 1.2;
}
.ox-dstep-change {
    display: inline-block;
    margin-top: 14px;
    color: var(--ox-brand);
    font-size: 14px;
    font-weight: 600;
}
@media (max-width: 1199px) {
    .ox-dstep-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}
@media (max-width: 991px) {
    .ox-dstep-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .ox-dstep-side {
        position: static;
    }
}
@media (max-width: 575px) {
    body:has(.ox-dstep) section#main-body {
        padding-top: 24px;
    }
    #order-standard_cart.ox-dstep .ox-conf-title {
        font-size: 28px;
    }
    #order-standard_cart .ox-dopt > label {
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    .ox-dopt-icon {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }
    #order-standard_cart.ox-dstep .domain-input-group {
        padding: 0 16px 16px;
    }
    /* One row on phones too: hide the prefix and narrow the extension and button */
    .ox-dsearch {
        height: 52px;
    }
    .ox-dsearch-prefix {
        display: none;
    }
    #order-standard_cart .ox-dsearch .ox-dsearch-field {
        padding-left: 14px;
    }
    #order-standard_cart .ox-dsearch .ox-dsearch-tld {
        width: 84px;
        padding: 0 8px;
    }
    .ox-dsearch-btn {
        min-width: 0;
        margin: 5px;
        padding: 0 16px;
        font-size: 15px;
    }
    #order-standard_cart.ox-dstep #DomainSearchResults {
        padding: 18px;
    }
    #order-standard_cart.ox-dstep .suggested-domains .actions {
        width: 100%;
        justify-content: flex-start;
        margin: 8px 0 0;
    }
    .ox-dstep-actions {
        text-align: center;
    }
    #order-standard_cart.ox-dstep #btnDomainContinue {
        width: 100%;
        min-width: 0;
    }
}

/* Order form: cart (orderforms/hostavik_cart/viewcart.tpl). The cart itself is styled inside its
   Shadow DOM by orderforms/hostavik_cart/css/hostavik-cart-app.css */
body:has(.ox-cart) section#main-body {
    padding: 40px 0 72px;
    background: var(--ox-n-50);
}
body:has(.ox-cart) section#main-body .primary-content p {
    display: none;
}
#order-standard_cart.ox-cart {
    margin-bottom: 0 !important;
    padding: 0;
}
/* Hidden until the Hostavik styles are in, so the cart doesn't flash in the default look */
.ox-cart #nexus-root:not(.is-styled) {
    visibility: hidden;
}
@media (max-width: 575px) {
    body:has(.ox-cart) section#main-body {
        padding-top: 24px;
    }
}

/* Order form: checkout (orderforms/hostavik_cart/checkout.tpl) */
body:has(.ox-co) section#main-body {
    padding: 40px 0 72px;
    background: var(--ox-n-50);
}
/* A little narrower than the page, centred */
#order-standard_cart.ox-co {
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
}
.ox-co-top {
    margin-bottom: 24px;
}
.ox-co-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}
#order-standard_cart.ox-co .ox-conf-lead {
    margin: 0;
}
#order-standard_cart .ox-co-switch-btn {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--ox-n-300);
    border-radius: 999px;
    background: #fff;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 500;
    transition: border-color .2s;
}
#order-standard_cart .ox-co-switch-btn.w-hidden {
    display: none;
}
#order-standard_cart .ox-co-switch-btn:hover {
    border-color: var(--ox-brand);
}
#order-standard_cart .ox-co-switch-btn i {
    margin-right: 8px;
    color: var(--ox-brand);
    font-size: 17px;
    vertical-align: -3px;
}
#order-standard_cart .ox-co-switch-btn b {
    color: var(--ox-brand);
    font-weight: 700;
}
.ox-co-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 32px;
}
.ox-co-main,
.ox-co-side {
    min-width: 0;
}
#order-standard_cart.ox-co .checkout-error-feedback {
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid #fecdca;
    border-radius: 14px;
    background: #fef3f2;
    color: #b42318;
}
#order-standard_cart.ox-co .checkout-error-feedback ul {
    margin: 6px 0 0;
    padding-left: 18px;
}
/* Section cards */
.ox-co-card {
    margin-bottom: 20px;
    padding: 28px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: #fff;
}
#order-standard_cart .ox-co-h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
    color: var(--ox-n-900);
    font-size: 19px;
    font-weight: 700;
}
.ox-co-h2-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 19px;
}
.ox-co-optional {
    color: var(--ox-n-400);
    font-weight: 400;
}
#order-standard_cart .ox-co-note {
    margin: -10px 0 18px;
    color: var(--ox-n-500);
    font-size: 14px;
}
/* Fields: 6-column grid (half, third or full width) */
.ox-co-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px 20px;
}
.ox-co-fields-gap {
    margin-top: 18px;
}
#order-standard_cart .ox-co-field {
    grid-column: span 3;
    min-width: 0;
    margin: 0;
}
#order-standard_cart .ox-co-field.is-full {
    grid-column: 1 / -1;
}
#order-standard_cart .ox-co-field.is-third {
    grid-column: span 2;
}
#order-standard_cart .ox-co-field > label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
}
#order-standard_cart.ox-co .form-control {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ox-n-300);
    border-radius: 10px;
    background-color: #fff;
    color: var(--ox-n-900);
    font-size: 16px;
    box-shadow: none;
}
#order-standard_cart.ox-co .form-control:focus {
    border-color: var(--ox-brand);
    box-shadow: 0 0 0 2px rgba(26, 108, 245, .1);
}
#order-standard_cart.ox-co .form-control::placeholder {
    color: var(--ox-n-400);
}
#order-standard_cart.ox-co textarea.form-control {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
}
#order-standard_cart.ox-co select.form-control {
    padding-right: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
    -webkit-appearance: none;
    appearance: none;
}
#order-standard_cart.ox-co .input-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}
#order-standard_cart.ox-co .input-group > .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
#order-standard_cart.ox-co .input-group-btn,
#order-standard_cart.ox-co .input-group-append {
    display: flex;
    width: auto;
    margin: 0;
}
#order-standard_cart.ox-co .input-group .btn {
    height: 48px;
    margin: 0 !important;
    padding: 0 16px;
    border-left: 0 !important;
    border-radius: 0 10px 10px 0 !important;
}
.ox-co .intl-tel-input {
    display: block;
    width: 100%;
}
/* Room for the country code box (the field rule above would otherwise override it) */
#order-standard_cart.ox-co .intl-tel-input.iti-sdc-2 input { padding-left: 100px; }
#order-standard_cart.ox-co .intl-tel-input.iti-sdc-3 input { padding-left: 108px; }
#order-standard_cart.ox-co .intl-tel-input.iti-sdc-4 input { padding-left: 116px; }
#order-standard_cart.ox-co .intl-tel-input.iti-sdc-5 input { padding-left: 124px; }
/* Radios and checkboxes (iCheck): the theme greys them with a filter */
#order-standard_cart.ox-co .iradio_square-blue,
#order-standard_cart.ox-co .icheckbox_square-blue {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ox-n-300);
    border-radius: 50%;
    background: #fff;
    filter: none;
    transition: border-color .2s, box-shadow .2s;
}
#order-standard_cart.ox-co .icheckbox_square-blue {
    border-radius: 6px;
}
#order-standard_cart.ox-co .iradio_square-blue.hover,
#order-standard_cart.ox-co .icheckbox_square-blue.hover {
    border-color: var(--ox-n-400);
}
#order-standard_cart.ox-co .iradio_square-blue.checked {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
    box-shadow: inset 0 0 0 4px #fff;
}
#order-standard_cart.ox-co .icheckbox_square-blue.checked {
    border-color: var(--ox-brand);
    background: var(--ox-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center / 14px;
}
/* Sign in */
.ox-co-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 20px;
}
#order-standard_cart .ox-co-btn {
    min-width: 140px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: var(--ox-brand);
    font-size: 16px;
    font-weight: 700;
}
#order-standard_cart .ox-co-btn:hover {
    background: var(--ox-brand-hover);
}
.ox-co-link {
    color: var(--ox-brand);
    font-size: 14px;
    font-weight: 600;
}
/* Linked accounts / existing account choice */
#order-standard_cart.ox-co .account-select-container .account {
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1.5px solid var(--ox-n-200);
    border-radius: 14px;
    background: #fff;
}
#order-standard_cart.ox-co .account-select-container .account.active {
    border-color: var(--ox-brand);
    background: var(--ox-brand-50);
}
/* Password */
#order-standard_cart.ox-co .password-strength-meter {
    padding-top: 4px;
}
#order-standard_cart.ox-co .password-strength-meter .progress {
    height: 8px;
    margin: 0 0 6px;
    border-radius: 999px;
    background: var(--ox-n-100);
}
#order-standard_cart.ox-co .password-strength-meter p {
    margin: 0;
    text-align: left;
}
#order-standard_cart .ox-co-generate {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}
#order-standard_cart .ox-co-generate .generate-password {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px !important;
    font-size: 14px;
    font-weight: 600;
}
/* Payment */
.ox-co-due {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 20px;
    padding: 16px 20px;
    border-radius: 14px;
    background: var(--ox-n-50);
    color: var(--ox-n-700);
    font-size: 15px;
    font-weight: 600;
}
.ox-co-due strong {
    color: var(--ox-n-900);
    font-size: 24px;
    font-weight: 800;
}
#order-standard_cart.ox-co .apply-credit-container {
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid var(--ox-n-200);
    border-radius: 14px;
}
#order-standard_cart.ox-co .apply-credit-container label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0;
    font-weight: 500;
}
#order-standard_cart.ox-co #paymentGatewaysContainer {
    margin: 0;
}
.ox-co-gateways {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}
#order-standard_cart .ox-co-gateway {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1.5px solid var(--ox-n-200);
    border-radius: 14px;
    background: #fff;
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
#order-standard_cart .ox-co-gateway:hover {
    border-color: var(--ox-n-400);
}
#order-standard_cart .ox-co-gateway.is-selected {
    border-color: var(--ox-brand);
    background: var(--ox-brand-50);
    box-shadow: 0 0 0 1px var(--ox-brand);
}
#order-standard_cart .ox-co-gateway .iradio_square-blue {
    order: 3;
    margin-left: auto;
}
.ox-co-gateway-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 19px;
}
.ox-co-gateway.is-selected .ox-co-gateway-icon {
    background: #fff;
    color: var(--ox-brand);
}
#order-standard_cart.ox-co #paymentGatewayInput:not(:empty) {
    margin-top: 20px;
}
#order-standard_cart.ox-co #creditCardInputFields {
    margin-top: 20px;
    padding: 22px;
    border: 1px solid var(--ox-n-200);
    border-radius: 14px;
    background: var(--ox-n-25);
}
#order-standard_cart.ox-co .ox-co-newcard {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
#order-standard_cart.ox-co .ox-co-newcard label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-weight: 600;
}
#order-standard_cart.ox-co #newCardSaveSettings .ox-co-fields {
    margin-top: 18px;
}
#order-standard_cart .ox-co-switch-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 28px;
}
#order-standard_cart.ox-co .field-help-text {
    display: block;
    margin-top: 6px;
    color: var(--ox-n-500);
    font-size: 13px;
}
/* Finish: mailing list, terms, button */
#order-standard_cart.ox-co .marketing-email-optin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--ox-n-100);
}
#order-standard_cart.ox-co .marketing-email-optin h3 {
    margin: 0 0 4px;
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 700;
}
#order-standard_cart.ox-co .marketing-email-optin p {
    margin: 0;
    color: var(--ox-n-500);
    font-size: 14px;
}
.ox-co-tos {
    margin: 0 0 18px;
}
#order-standard_cart .ox-co-tos label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0;
    color: var(--ox-n-700);
    font-size: 15px;
}
#order-standard_cart .ox-co-tos a {
    color: var(--ox-brand);
    font-weight: 600;
}
#order-standard_cart .ox-co-submit {
    height: 56px;
    margin-top: 0;
    font-size: 18px;
}
.ox-co-secure {
    display: flex;
    gap: 8px;
    margin: 16px 0 0;
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-co-secure i {
    color: var(--ox-n-700);
    font-size: 16px;
    line-height: 1.2;
}
/* Order summary */
.ox-co-sum-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
#order-standard_cart .ox-co-sum-title {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 19px;
    font-weight: 700;
}
.ox-co-items {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-co-items li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--ox-n-100);
}
.ox-co-items li:first-child {
    padding-top: 0;
    border-top: 0;
}
.ox-co-items li.is-sub {
    padding-left: 14px;
}
.ox-co-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ox-co-item-text b {
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.ox-co-item-text small {
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-co-item-price {
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}
.ox-co-totals {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ox-n-200);
}
.ox-co-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    color: var(--ox-n-700);
    font-size: 15px;
}
.ox-co-row.is-discount {
    color: #067647;
}
.ox-co-row.is-total {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--ox-n-200);
    color: var(--ox-n-900);
    font-weight: 700;
}
.ox-co-row.is-total strong {
    font-size: 26px;
    font-weight: 800;
    white-space: nowrap;
}
.ox-co-taxnote {
    margin: 6px 0 0;
    color: var(--ox-n-500);
    font-size: 12px;
}
.ox-co-renews {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-co-renews ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}
@media (max-width: 1199px) {
    .ox-co-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}
@media (max-width: 991px) {
    /* Stacked: the summary goes first so customers see what they are buying */
    .ox-co-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .ox-co-side {
        order: -1;
    }
}
@media (max-width: 575px) {
    body:has(.ox-co) section#main-body {
        padding-top: 24px;
    }
    #order-standard_cart.ox-co .ox-conf-title {
        font-size: 28px;
    }
    .ox-co-card {
        padding: 20px;
    }
    #order-standard_cart .ox-co-h2 {
        font-size: 17px;
    }
    .ox-co-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }
    #order-standard_cart .ox-co-field,
    #order-standard_cart .ox-co-field.is-third {
        grid-column: 1 / -1;
    }
    /* Postcode and country stay side by side */
    #order-standard_cart .ox-co-field.is-pair {
        grid-column: span 1;
    }
    #order-standard_cart .ox-co-generate {
        justify-content: flex-start;
    }
    .ox-co-gateways {
        grid-template-columns: minmax(0, 1fr);
    }
    #order-standard_cart.ox-co #creditCardInputFields {
        padding: 16px;
    }
    #order-standard_cart.ox-co .marketing-email-optin {
        flex-direction: column;
        align-items: flex-start;
    }
    #order-standard_cart .ox-co-switch-field {
        padding-top: 0;
    }
}

/* Order form: remove-item dialog on standard_cart pages (domain and service renewals). Same look as the
   cart's "Confirm Deletion" dialog (orderforms/hostavik_cart/css/hostavik-cart-app.css) */
body:has(#order-standard_cart .modal-remove-item.show) .modal-backdrop.show {
    background: var(--ox-navy);
    opacity: .45;
}
#order-standard_cart .modal-remove-item .modal-dialog {
    display: flex;
    align-items: center;
    max-width: 400px;
    min-height: calc(100% - 3.5rem);
    margin: 1.75rem auto;
    padding: 0 16px;
}
#order-standard_cart .modal-remove-item .modal-content {
    position: relative;
    width: 100%;
    padding: 32px 28px 28px;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
    text-align: center;
}
#order-standard_cart .modal-remove-item .modal-header,
#order-standard_cart .modal-remove-item .modal-body,
#order-standard_cart .modal-remove-item .modal-footer {
    padding: 0;
    border: 0;
}
#order-standard_cart .modal-remove-item .modal-title {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
#order-standard_cart .modal-remove-item .modal-title::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fef3f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d92d20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") no-repeat center / 26px;
}
#order-standard_cart .modal-remove-item .modal-title > i {
    display: none;
}
#order-standard_cart .modal-remove-item .modal-title .close {
    position: absolute;
    top: 12px;
    right: 14px;
    float: none;
    margin: 0;
    padding: 4px 8px;
    color: var(--ox-n-400);
    font-size: 26px;
    font-weight: 400;
    opacity: 1;
    text-shadow: none;
}
#order-standard_cart .modal-remove-item .modal-body {
    padding-top: 8px;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.5;
}
/* standard_cart's stylesheet loads after this one and adds 45px below the buttons */
#order-standard_cart .modal-remove-item .modal-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 24px 0 0 !important;
}
#order-standard_cart .modal-remove-item .modal-footer .btn {
    min-height: 48px;
    margin: 0;
    border-radius: 12px !important;
    font-size: 16px;
    font-weight: 700;
}
#order-standard_cart .modal-remove-item .modal-footer .btn-default {
    border: 1px solid var(--ox-n-300) !important;
    background: #fff !important;
    color: var(--ox-n-700) !important;
}
#order-standard_cart .modal-remove-item .modal-footer .btn-default:hover {
    background: var(--ox-n-50) !important;
}
#order-standard_cart .modal-remove-item .modal-footer .btn-primary {
    border: 1px solid #d92d20;
    background: #d92d20;
    color: #fff;
}
#order-standard_cart .modal-remove-item .modal-footer .btn-primary:hover {
    border-color: #b42318;
    background: #b42318;
}

/* Client dashboard (includes/ox-dashboard-header.tpl, ox-dashboard-footer.tpl): navy sidebar,
   white top bar with notifications / cart / account, page title, slim footer. Phones: the sidebar
   slides in from the menu button. */
.ox-dash {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    min-height: 100vh;
    background: linear-gradient(to right, var(--ox-navy) 264px, var(--ox-n-50) 264px);
}
/* Sidebar */
.ox-dside {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 22px 14px 18px;
    background: var(--ox-navy);
    color: #c3cbd9;
    overflow-y: auto;
}
.ox-dside-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 24px;
}
.ox-dside-logo img {
    display: block;
    width: auto;
    height: 26px;
}
.ox-dside-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 20px;
}
.ox-dnav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-dnav > ul > li + li {
    margin-top: 4px;
}
.ox-dnav a,
.ox-dnav-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #c3cbd9;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    transition: background-color .2s, color .2s;
}
.ox-dnav a > i,
.ox-dnav-toggle > i:first-child {
    width: 20px;
    font-size: 19px;
    text-align: center;
}
.ox-dnav a:hover,
.ox-dnav-toggle:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}
.ox-dnav a.is-active {
    background: var(--ox-brand);
    color: #fff;
}
.ox-dnav-toggle.is-active {
    color: #fff;
}
.ox-dnav-caret {
    margin-left: auto;
    font-size: 18px;
    transition: transform .2s;
}
.ox-dnav-group.is-open .ox-dnav-caret {
    transform: rotate(180deg);
}
.ox-dnav .ox-dnav-sub {
    display: none;
    padding: 4px 0 6px 44px;
}
.ox-dnav-group.is-open > .ox-dnav-sub {
    display: block;
}
.ox-dnav-sub li + li {
    margin-top: 2px;
}
.ox-dnav .ox-dnav-sub a {
    padding: 8px 12px;
    color: #98a3b7;
    font-size: 14px;
    font-weight: 500;
}
.ox-dnav .ox-dnav-sub a:hover {
    color: #fff;
}
.ox-dnav .ox-dnav-sub a.is-current {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 600;
}
.ox-dside-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.ox-dside-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border-radius: 11px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    transition: background-color .2s;
}
.ox-dside-order:hover {
    background: var(--ox-brand-hover);
    color: #fff;
}
.ox-dside-site {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: #98a3b7;
    font-size: 14px;
    font-weight: 500;
}
.ox-dside-site:hover {
    color: #fff;
}
.ox-dside-backdrop {
    display: none;
}
/* Main column */
.ox-dmain {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ox-dmain .container {
    max-width: 1320px !important;
    padding-right: 32px;
    padding-left: 32px;
}
/* Top bar */
.ox-dtop {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 68px;
    padding: 0 32px;
    border-bottom: 1px solid var(--ox-n-200);
    background: #fff;
}
.ox-dtop .ox-dtop-menu,
.ox-dtop-logo {
    display: none;
}
.ox-dtop-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.ox-dtop-icon,
.ox-dtop-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ox-n-700);
    font-size: 21px;
    transition: background-color .2s;
}
.ox-dtop-icon:hover,
.ox-dtop-menu:hover,
.ox-dd.is-open > .ox-dtop-icon {
    background: var(--ox-n-100);
    color: var(--ox-n-900);
}
.ox-dtop-badge {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}
.ox-dtop-account {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin-left: 8px;
    padding: 0 12px 0 4px;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    background: #fff;
    color: var(--ox-n-900);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .2s;
}
.ox-dtop-account:hover,
.ox-dd.is-open > .ox-dtop-account {
    border-color: var(--ox-n-300);
}
.ox-dtop-account > i {
    color: var(--ox-n-500);
    font-size: 18px;
}
.ox-dtop-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ox-avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}
.ox-avatar.is-lg {
    width: 44px;
    height: 44px;
    font-size: 15px;
}
/* Top bar menus (notifications, account) */
.ox-dd {
    position: relative;
}
.ox-dd-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 70;
    width: 290px;
    padding: 8px;
    border: 1px solid var(--ox-n-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .06);
}
.ox-dd.is-open > .ox-dd-menu {
    display: block;
}
.ox-dd-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-dd-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 500;
}
.ox-dd-menu a:hover {
    background: var(--ox-n-50);
    color: var(--ox-n-900);
}
.ox-dd-menu a > i {
    color: var(--ox-n-500);
    font-size: 17px;
}
.ox-dd-menu a.is-logout,
.ox-dd-menu a.is-logout > i {
    color: #b42318;
}
.ox-dd-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--ox-n-100);
}
.ox-dd-title {
    padding: 8px 10px 10px;
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 700;
}
.ox-daccount-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    padding: 8px 10px 14px;
    border-bottom: 1px solid var(--ox-n-100);
}
.ox-daccount-head b {
    display: block;
    color: var(--ox-n-900);
    font-size: 15px;
}
.ox-daccount-head small {
    display: block;
    color: var(--ox-n-500);
    font-size: 13px;
    overflow-wrap: anywhere;
}
.ox-dnotif {
    width: 340px;
}
.ox-dnotif a {
    align-items: flex-start;
}
.ox-dnotif a > i {
    margin-top: 1px;
}
.ox-dnotif a.is-danger > i {
    color: #d92d20;
}
.ox-dnotif a.is-warning > i {
    color: #dc6803;
}
.ox-dnotif a.is-info > i {
    color: var(--ox-brand);
}
.ox-dnotif a.is-success > i {
    color: #12b76a;
}
.ox-dnotif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 10px 22px;
    color: var(--ox-n-500);
    font-size: 14px;
    text-align: center;
}
.ox-dnotif-empty i {
    color: var(--ox-n-400);
    font-size: 26px;
}
/* Page title */
.ox-dhead {
    padding: 28px 0 0;
}
.ox-dcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 6px;
    padding: 0;
    color: var(--ox-n-500);
    font-size: 13px;
    list-style: none;
}
.ox-dcrumb li + li::before {
    content: "/";
    margin-right: 6px;
    color: var(--ox-n-300);
}
.ox-dcrumb a {
    color: var(--ox-n-500);
}
.ox-dcrumb a:hover {
    color: var(--ox-brand);
}
.ox-dhead-title {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}
.ox-dhead-sub {
    margin: 4px 0 0;
    color: var(--ox-n-500);
}
body:has(.ox-dash) section#main-body {
    padding: 24px 0 48px;
    background: transparent;
}
/* Footer */
.ox-dfooter {
    margin-top: auto;
    border-top: 1px solid var(--ox-n-200);
    background: #fff;
}
.ox-dfooter-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-top: 18px;
    padding-bottom: 18px;
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-dfooter ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-dfooter a {
    color: var(--ox-n-500);
}
.ox-dfooter a:hover {
    color: var(--ox-n-900);
}
@media (max-width: 991px) {
    .ox-dash {
        grid-template-columns: minmax(0, 1fr);
        background: var(--ox-n-50);
    }
    .ox-dside {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 80;
        width: 280px;
        max-width: 86vw;
        height: auto;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .ox-dash.is-side-open .ox-dside {
        transform: none;
    }
    .ox-dash.is-side-open .ox-dside-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 75;
        background: rgba(13, 22, 40, .45);
    }
    .ox-dside-close {
        display: flex;
    }
    html.ox-dash-locked {
        overflow: hidden;
    }
    .ox-dtop {
        height: 62px;
        padding: 0 16px;
    }
    .ox-dtop .ox-dtop-menu {
        display: flex;
        margin-left: -6px;
    }
    /* The white logo turns dark on the white bar */
    .ox-dtop-logo {
        display: block;
    }
    .ox-dtop-logo img {
        display: block;
        width: auto;
        height: 22px;
        filter: brightness(0);
    }
    .ox-dmain .container {
        padding-right: 20px;
        padding-left: 20px;
    }
}
@media (max-width: 575px) {
    .ox-dtop-name,
    .ox-dtop-account > i {
        display: none;
    }
    .ox-dtop-account {
        padding: 0 4px;
        border: 0;
    }
    /* Menus span the screen width under the bar */
    .ox-dd-menu {
        position: fixed;
        top: 70px;
        right: 12px;
        left: 12px;
        width: auto;
    }
    .ox-dhead {
        padding-top: 20px;
    }
    .ox-dhead-title {
        font-size: 24px;
    }
    body:has(.ox-dash) section#main-body {
        padding-top: 18px;
    }
    .ox-dmain .container {
        padding-right: 16px;
        padding-left: 16px;
    }
    .ox-dfooter-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Client dashboard: balance in the top bar (includes/ox-dashboard-header.tpl) */
.ox-dtop-balance {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin-right: 8px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    background: var(--ox-n-50);
}
.ox-dtop-balance > i {
    color: var(--ox-brand);
    font-size: 19px;
}
.ox-dtop-balance-text {
    display: flex;
    flex-direction: column;
    padding-right: 8px;
    line-height: 1.15;
}
.ox-dtop-balance-text small {
    color: var(--ox-n-500);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ox-dtop-balance-text b {
    color: var(--ox-n-900);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.ox-dtop-topup {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ox-brand);
    color: #fff;
    font-size: 18px;
    transition: background-color .2s;
}
.ox-dtop-topup:hover {
    background: var(--ox-brand-hover);
    color: #fff;
}

/* Dashboard home (clientareahome.tpl) */
.ox-hbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s, border-color .2s, color .2s;
}
.ox-hbtn i {
    font-size: 17px;
}
.ox-hbtn.is-light {
    background: #fff;
    color: var(--ox-navy);
}
.ox-hbtn.is-light:hover {
    background: var(--ox-brand-50);
    color: var(--ox-navy);
}
.ox-hbtn.is-ghost {
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}
.ox-hbtn.is-ghost:hover {
    border-color: #fff;
    color: #fff;
}
.ox-hbtn.is-primary {
    background: var(--ox-brand);
    color: #fff;
}
.ox-hbtn.is-primary:hover {
    background: var(--ox-brand-hover);
    color: #fff;
}
.ox-hbtn.is-outline {
    border-color: var(--ox-n-300);
    background: #fff;
    color: var(--ox-n-700);
}
.ox-hbtn.is-outline:hover {
    border-color: var(--ox-n-400);
    color: var(--ox-n-900);
}
.ox-home-top {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.ox-balance,
.ox-due,
.ox-quick {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 18px;
}
.ox-balance {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #16213a 0%, #0d1628 55%, #10306b 100%);
    color: #c3cbd9;
}
.ox-balance::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 108, 245, .45) 0%, rgba(26, 108, 245, 0) 70%);
    pointer-events: none;
}
.ox-balance-label,
.ox-due-label,
.ox-quick-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
}
.ox-balance-icon,
.ox-due-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 18px;
}
.ox-balance-icon {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
.ox-balance-amount {
    position: relative;
    margin: 16px 0 6px;
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
}
.ox-balance-note {
    position: relative;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
}
.ox-balance-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}
.ox-balance.is-compact {
    padding: 22px;
}
.ox-balance.is-compact .ox-balance-amount {
    margin-bottom: 0;
    font-size: 30px;
}
.ox-due,
.ox-quick {
    border: 1px solid var(--ox-n-200);
    background: #fff;
}
.ox-due-label,
.ox-quick-label {
    color: var(--ox-n-700);
}
.ox-due-icon {
    background: #fffaeb;
    color: #dc6803;
}
.ox-due.is-overdue .ox-due-icon {
    background: #fef3f2;
    color: #d92d20;
}
.ox-due-amount {
    margin: 16px 0 6px;
    color: var(--ox-n-900);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}
.ox-due-amount.is-clear {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
}
.ox-due-amount.is-clear i {
    color: #12b76a;
    font-size: 26px;
}
.ox-due-note {
    margin: 0 0 20px;
    color: var(--ox-n-500);
    font-size: 14px;
}
.ox-due-note b {
    color: #d92d20;
}
.ox-due .ox-hbtn {
    align-self: flex-start;
    margin-top: auto;
}
.ox-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}
.ox-quick-grid a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    color: var(--ox-n-900);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color .2s, background-color .2s;
}
.ox-quick-grid a:hover {
    border-color: var(--ox-brand);
    background: var(--ox-brand-50);
    color: var(--ox-n-900);
}
.ox-quick-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 18px;
}
.ox-home-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.ox-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    color: var(--ox-n-900);
    transition: border-color .2s;
}
.ox-stat:hover {
    border-color: var(--ox-n-300);
    color: var(--ox-n-900);
}
.ox-stat-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 21px;
}
.ox-stat-icon.is-blue {
    background: var(--ox-brand-50);
    color: var(--ox-brand);
}
.ox-stat-icon.is-green {
    background: #ecfdf3;
    color: #079455;
}
.ox-stat-icon.is-purple {
    background: #f4f3ff;
    color: #6938ef;
}
.ox-stat-icon.is-amber {
    background: #fffaeb;
    color: #dc6803;
}
.ox-stat-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ox-stat-text b {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}
.ox-stat-text small {
    color: var(--ox-n-500);
    font-size: 13px;
    font-weight: 500;
}
.ox-stat-go {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--ox-n-400);
    font-size: 16px;
    transition: color .2s;
}
.ox-stat:hover .ox-stat-go {
    color: var(--ox-brand);
}
.ox-home-addon {
    margin-bottom: 20px;
}
/* Client dashboard: add-ons page (addon-products.tpl). A grid of add-on products, then a row
   that links to the add-ons for the customer's own services. */
.ox-addons-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.ox-addon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    color: var(--ox-n-700);
    transition: border-color .2s;
}
.ox-addon:hover {
    border-color: var(--ox-brand);
    color: var(--ox-n-700);
}
.ox-addon-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 21px;
}
/* The product's own logo: one height for all, whatever the logo's shape */
.ox-addon-logo {
    display: flex;
    align-items: center;
    height: 46px;
}
.ox-addon-logo img {
    max-width: 170px;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
}
.ox-addon-name {
    margin-top: 14px;
    color: var(--ox-n-900);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.ox-addon-text {
    margin-top: 6px;
    color: var(--ox-n-500);
    font-size: 14px;
    line-height: 1.55;
}
.ox-addon-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 16px;
    color: var(--ox-brand);
    font-size: 14px;
    font-weight: 700;
}
.ox-addons-mine {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
}
.ox-addons-mine > div {
    flex: 1;
    min-width: 0;
}
.ox-addons-mine b {
    display: block;
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 700;
}
.ox-addons-mine p {
    margin: 2px 0 0;
    color: var(--ox-n-500);
    font-size: 14px;
}
@media (max-width: 1199px) {
    .ox-addons-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .ox-addons-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .ox-addons-mine {
        flex-wrap: wrap;
    }
    .ox-addons-mine .ox-hbtn {
        width: 100%;
    }
}
/* MarketConnect's promo block ("Recommended for you"): its heading row has the class "header",
   and the theme's rule for the site header (main.css: .header, absolute at the top) lifted it
   out of the block and onto the cards above. Keep it in place, above its banner. */
.promo-container .header {
    position: static;
    z-index: auto;
    width: auto;
    padding: 0 0 12px;
}
.promo-container .header h3 {
    margin: 0;
    line-height: 32px;
}
/* WHMCS home panels */
.ox-home-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}
.ox-home-panels .card {
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
}
.ox-home-panels .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ox-n-100);
    background: #fff;
}
.ox-home-panels .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 700;
}
.ox-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 15px;
}
.ox-home-panels .card-title .badge {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
    font-size: 12px;
}
.ox-panel-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    color: var(--ox-n-700);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.ox-panel-btn:hover {
    border-color: var(--ox-brand);
    color: var(--ox-brand);
}
.ox-home-panels .card-body {
    padding: 18px 20px;
    color: var(--ox-n-700);
    font-size: 14px;
}
.ox-home-panels .card-body p:last-child {
    margin-bottom: 0;
}
.ox-home-panels .card-body a:not(.btn) {
    color: var(--ox-brand);
    font-weight: 600;
}
.ox-home-panels .list-group-item {
    padding: 14px 20px;
    border: 0;
    border-top: 1px solid var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 14px;
}
.ox-home-panels .list-group-item:first-child {
    border-top: 0;
}
.ox-home-panels .list-group-item-action:hover {
    background: var(--ox-n-50);
}
.ox-home-panels .card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--ox-n-100);
    background: #fff;
    font-size: 13px;
}
.ox-home-panels .card-footer:empty {
    display: none;
}
.ox-home-panels .card-footer a {
    color: var(--ox-brand);
    font-weight: 600;
}
.ox-home-panels .input-group .form-control {
    height: 44px;
    border: 1px solid var(--ox-n-300);
    border-radius: 10px 0 0 10px;
    box-shadow: none;
}
.ox-home-panels .input-group .btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 0 !important;
    font-weight: 700;
}
.ox-home-panels .input-group .btn:last-child {
    border-radius: 0 10px 10px 0 !important;
}
.ox-home-panels .input-group .btn-primary,
.ox-home-panels .input-group .btn-success {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
    color: #fff;
}
.ox-home-panels .input-group .btn-primary:hover,
.ox-home-panels .input-group .btn-success:hover {
    border-color: var(--ox-brand-hover);
    background: var(--ox-brand-hover);
}
.ox-home-panels .input-group .btn-default {
    border-left: 0 !important;
}
@media (max-width: 1199px) {
    .ox-home-top {
        grid-template-columns: 1fr 1fr;
    }
    .ox-quick {
        grid-column: 1 / -1;
    }
    .ox-quick-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .ox-home-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .ox-home-top,
    .ox-home-cols {
        grid-template-columns: minmax(0, 1fr);
    }
    .ox-home-cols {
        gap: 0;
    }
    .ox-quick-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ox-dtop-balance {
        display: none;
    }
}
@media (max-width: 575px) {
    .ox-balance,
    .ox-due,
    .ox-quick {
        padding: 20px;
    }
    .ox-balance-amount {
        font-size: 30px;
    }
    .ox-home-stats {
        gap: 12px;
    }
    .ox-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 16px;
    }
    .ox-home-panels .card-header {
        flex-wrap: wrap;
    }
}

/* Top up (clientareaaddfunds.tpl) */
.ox-topup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 24px;
    max-width: 980px;
}
.ox-topup-card {
    padding: 28px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: #fff;
}
.ox-topup-title {
    margin: 0 0 6px;
    color: var(--ox-n-900);
    font-size: 21px;
    font-weight: 700;
}
.ox-topup-lead {
    margin: 0 0 24px;
    color: var(--ox-n-500);
    font-size: 15px;
}
.ox-topup-label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
}
.ox-topup-amount {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 16px;
    border: 1px solid var(--ox-n-300);
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.ox-topup-amount:focus-within {
    border-color: var(--ox-brand);
    box-shadow: 0 0 0 2px rgba(26, 108, 245, .1);
}
.ox-topup-affix {
    color: var(--ox-n-500);
    font-size: 22px;
    font-weight: 700;
}
.ox-topup-affix.is-code {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
}
.ox-topup-amount input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    border: 0;
    background: none;
    color: var(--ox-n-900);
    font-size: 26px;
    font-weight: 800;
    outline: 0;
}
.ox-topup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.ox-topup-chip {
    min-width: 72px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--ox-n-300);
    border-radius: 999px;
    background: #fff;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 700;
    transition: border-color .2s, background-color .2s, color .2s;
}
.ox-topup-chip:hover {
    border-color: var(--ox-brand);
    color: var(--ox-brand);
}
.ox-topup-chip.is-active {
    border-color: var(--ox-brand);
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
}
.ox-topup-hint {
    margin: 10px 0 0;
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-topup-methods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
}
.ox-topup-methods legend {
    grid-column: 1 / -1;
    float: left;
    width: 100%;
}
.ox-topup-method {
    position: relative;
    margin: 0;
    cursor: pointer;
}
.ox-topup-method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ox-topup-method-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1.5px solid var(--ox-n-200);
    border-radius: 12px;
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 600;
    transition: border-color .2s, background-color .2s;
}
.ox-topup-method-box i {
    color: var(--ox-n-500);
    font-size: 20px;
}
.ox-topup-method input:checked + .ox-topup-method-box {
    border-color: var(--ox-brand);
    background: var(--ox-brand-50);
}
.ox-topup-method input:checked + .ox-topup-method-box i {
    color: var(--ox-brand);
}
.ox-topup-method input:focus-visible + .ox-topup-method-box {
    outline: 3px solid rgba(26, 108, 245, .3);
    outline-offset: 2px;
}
.ox-topup-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    margin-top: 26px;
    border: 0;
    border-radius: 12px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    transition: background-color .2s;
}
.ox-topup-submit:hover {
    background: var(--ox-brand-hover);
}
.ox-topup-submit[disabled] {
    background: var(--ox-n-300);
    cursor: not-allowed;
}
.ox-topup-small {
    margin: 12px 0 0;
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-topup-limits {
    margin: 16px 0 0;
    padding: 6px 20px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    list-style: none;
}
.ox-topup-limits li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    color: var(--ox-n-500);
    font-size: 14px;
}
.ox-topup-limits li + li {
    border-top: 1px solid var(--ox-n-100);
}
.ox-topup-limits b {
    color: var(--ox-n-900);
    white-space: nowrap;
}
@media (max-width: 991px) {
    .ox-topup {
        grid-template-columns: minmax(0, 1fr);
    }
    .ox-topup-side {
        order: -1;
    }
}
@media (max-width: 575px) {
    .ox-topup-card {
        padding: 20px;
    }
}

/* SSL: why buy (ssl-certificates.tpl): one wide navy card + four cards, each with a small
   interface-style visual instead of an icon */
.ox-ssl-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}
.ox-sslc {
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 20px;
    background: #fff;
    transition: border-color .2s, transform .2s;
}
.ox-sslc:hover {
    border-color: var(--ox-n-300);
    transform: translateY(-2px);
}
.ox-sslc-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
    padding: 24px;
    border-bottom: 1px solid var(--ox-n-100);
    background: linear-gradient(180deg, var(--ox-brand-50) 0%, #fff 100%);
}
.ox-sslc-visual.is-photo {
    padding: 0;
    background: var(--ox-n-100);
}
.ox-sslc-visual.is-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
.ox-sslc-body {
    padding: 24px;
}
.ox-ssl .ox-sslc-body h3 {
    margin: 0 0 8px;
    color: var(--ox-n-900);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
.ox-ssl .ox-sslc-body p {
    margin: 0;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.6;
}
/* Wide card */
.ox-sslc.is-wide {
    flex-direction: row;
    grid-column: span 4;
    border: 0;
    background: linear-gradient(135deg, #16213a 0%, #0d1628 55%, #10306b 100%);
}
.ox-sslc.is-wide .ox-sslc-body {
    display: flex;
    flex: 1 1 46%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 40px;
}
.ox-sslc.is-wide .ox-sslc-visual {
    flex: 1 1 54%;
    height: auto;
    min-height: 300px;
    padding: 32px 32px 32px 0;
    border: 0;
    background: none;
}
.ox-ssl .ox-sslc.is-wide h3 {
    color: #fff;
    font-size: 28px;
}
.ox-ssl .ox-sslc.is-wide p {
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
}
.ox-sslc-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
/* Visual 1: browser with a value being encrypted */
.ox-sslv-browser {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 380px;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    color: var(--ox-n-900);
}
.ox-sslv-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 9px;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    background: var(--ox-n-50);
    font-size: 13px;
    white-space: nowrap;
}
.ox-sslv-lock {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d1fadf;
    color: #079455;
    font-size: 12px;
}
.ox-sslv-url {
    overflow: hidden;
    color: var(--ox-n-700);
    text-overflow: ellipsis;
}
.ox-sslv-url b {
    color: #079455;
    font-weight: 700;
}
.ox-sslv-secure {
    margin-left: auto;
    color: #079455;
    font-size: 12px;
    font-weight: 700;
}
.ox-sslv-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--ox-n-200);
    border-radius: 10px;
}
.ox-sslv-field small {
    color: var(--ox-n-500);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ox-sslv-field span {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.ox-sslv-field.is-cipher {
    border-color: var(--ox-navy);
    background: var(--ox-navy);
}
.ox-sslv-field.is-cipher small {
    color: #98a3b7;
}
.ox-sslv-field.is-cipher span {
    color: #8ab4ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}
.ox-sslv-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ox-brand);
    font-size: 12px;
    font-weight: 700;
}
.ox-sslv-step i {
    font-size: 14px;
}
.ox-sslv-step::before,
.ox-sslv-step::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--ox-n-200);
}
/* Chips */
.ox-sslv-chip {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--ox-n-900);
    font-size: 13px;
    font-weight: 700;
}
.ox-sslv-chip i {
    color: #079455;
}
.ox-sslv-chip.is-inline {
    position: static;
    border: 1px solid var(--ox-n-200);
}
/* Visuals 3 and 4: search result, certificate */
.ox-sslv-stack {
    display: grid;
    gap: 8px;
    width: 100%;
    max-width: 290px;
}
.ox-sslv-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    background: #fff;
    color: var(--ox-n-700);
    font-size: 13px;
}
.ox-sslv-search i {
    color: var(--ox-n-400);
    font-size: 15px;
}
.ox-sslv-result {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    background: #fff;
}
.ox-sslv-result-url {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #079455;
    font-size: 12px;
    font-weight: 600;
}
.ox-sslv-result b {
    color: var(--ox-brand-700);
    font-size: 15px;
}
.ox-sslv-line {
    height: 7px;
    border-radius: 999px;
    background: var(--ox-n-100);
}
.ox-sslv-line.is-short {
    width: 62%;
}
.ox-sslv-trend {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 11px;
    font-weight: 700;
}
.ox-sslv-cert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    background: #fff;
}
.ox-sslv-seal {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 19px;
}
.ox-sslv-cert-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ox-sslv-cert-text small {
    color: var(--ox-n-500);
    font-size: 11px;
}
.ox-sslv-cert-text b {
    overflow: hidden;
    color: var(--ox-n-900);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ox-sslv-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 11px;
    font-weight: 700;
}
.ox-sslv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--ox-n-200);
    border-radius: 10px;
    background: #fff;
    color: var(--ox-n-500);
    font-size: 12px;
}
.ox-sslv-row b {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ox-n-900);
}
.ox-sslv-row b.is-ok {
    color: #067647;
}
/* Visual 5: 30-day ring */
.ox-sslv-refund {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.ox-sslv-ring {
    position: relative;
    width: 108px;
    height: 108px;
}
.ox-sslv-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ox-sslv-ring circle {
    fill: #fff;
    stroke: var(--ox-n-200);
    stroke-width: 9;
}
.ox-sslv-ring circle.is-fill {
    fill: none;
    stroke: var(--ox-brand);
    stroke-dasharray: 327;
    stroke-dashoffset: 82;
    stroke-linecap: round;
}
.ox-sslv-ring span {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.ox-sslv-ring b {
    color: var(--ox-n-900);
    font-size: 32px;
    font-weight: 800;
}
.ox-sslv-ring small {
    margin-top: 3px;
    color: var(--ox-n-500);
    font-size: 12px;
    font-weight: 600;
}
@media (max-width: 1199px) {
    .ox-sslc {
        grid-column: span 3;
    }
    .ox-sslc.is-wide {
        grid-column: 1 / -1;
    }
}
@media (max-width: 767px) {
    .ox-sslc,
    .ox-sslc.is-wide {
        grid-column: 1 / -1;
    }
    .ox-sslc.is-wide {
        flex-direction: column;
    }
    .ox-sslc.is-wide .ox-sslc-body {
        padding: 28px 24px 8px;
    }
    .ox-sslc.is-wide .ox-sslc-visual {
        min-height: 0;
        padding: 20px 24px 28px;
    }
    .ox-ssl .ox-sslc.is-wide h3 {
        font-size: 24px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ox-sslc {
        transition: none;
    }
    .ox-sslc:hover {
        transform: none;
    }
}

/* Section illustrations that also show on phones and tablets (ssl-certificates.tpl): scaled down,
   with space between the picture and the text when the columns stack */
.ox-figure img {
    width: auto;
    max-width: min(100%, 400px);
    height: auto;
}
@media (max-width: 991px) {
    .ox-figure img {
        max-width: min(100%, 320px);
    }
    .ox-figure.is-above {
        margin-bottom: 28px;
    }
    .ox-figure.is-below {
        margin-top: 28px;
    }
}
@media (max-width: 575px) {
    .ox-figure img {
        max-width: min(100%, 260px);
    }
}

/* Transfer page (transfer-domain.tpl): hint under the search, steps, checklist, fact cards.
   The hero, price cards, feature grid, band and FAQ reuse the home / domain page styles. */
.ox-transfer-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
}
.ox-transfer-hint i {
    font-size: 17px;
}
.ox-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-step {
    position: relative;
    padding: 28px 24px 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: #fff;
}
/* Dashed link to the next step */
.ox-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 51px;
    right: -21px;
    width: 20px;
    border-top: 2px dashed var(--ox-n-300);
}
.ox-step-num {
    position: absolute;
    top: 18px;
    right: 22px;
    color: var(--ox-n-200);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
}
.ox-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 22px;
}
.ox-step h3,
.ox-tfact h3 {
    margin: 0 0 8px;
    color: var(--ox-n-900);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.ox-step p,
.ox-tfact p {
    margin: 0;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.6;
}
.ox-tcheck {
    display: grid;
    gap: 14px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.ox-tcheck li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--ox-n-700);
    font-size: 16px;
    line-height: 1.55;
}
.ox-tcheck li > i {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: #d1fadf;
    color: #079455;
    font-size: 15px;
}
.ox-tcheck b {
    color: var(--ox-n-900);
}
.ox-tfacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.ox-tfact {
    padding: 28px;
    border-radius: 18px;
    background: var(--ox-n-50);
}
.ox-tfact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border: 1px solid var(--ox-n-200);
    border-radius: 13px;
    background: #fff;
    color: var(--ox-brand);
    font-size: 21px;
}
@media (max-width: 991px) {
    .ox-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ox-step:not(:last-child)::after {
        display: none;
    }
    .ox-tfacts {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 575px) {
    .ox-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .ox-transfer-hint {
        align-items: flex-start;
        font-size: 14px;
        text-align: left;
    }
    .ox-tfact {
        padding: 22px;
    }
}

/* Order form: transfer a domain (orderforms/hostavik_cart/domaintransfer.tpl) */
body:has(.ox-xfer) section#main-body {
    padding: 40px 0 72px;
    background: var(--ox-n-50);
}
#order-standard_cart.ox-xfer {
    max-width: 1040px;
    margin-right: auto;
    margin-left: auto;
}
.ox-xfer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 32px;
}
.ox-xfer-main,
.ox-xfer-side {
    min-width: 0;
}
.ox-xfer-card {
    display: grid;
    gap: 22px;
    margin: 0;
}
#order-standard_cart .ox-xfer-field > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
    padding: 0;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
}
.ox-xfer-help {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ox-brand);
    font-size: 13px;
    font-weight: 600;
    cursor: help;
}
.ox-xfer-input {
    position: relative;
}
/* z-index: the theme positions inputs, which would otherwise paint over the icon */
.ox-xfer-input > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    color: var(--ox-n-400);
    font-size: 19px;
    pointer-events: none;
    transform: translateY(-50%);
}
#order-standard_cart.ox-xfer .form-control {
    height: 52px;
    padding: 0 14px;
    border: 1px solid var(--ox-n-300);
    border-radius: 10px;
    background-color: #fff;
    color: var(--ox-n-900);
    font-size: 16px;
    box-shadow: none;
}
#order-standard_cart.ox-xfer .ox-xfer-input .form-control {
    padding-left: 46px;
}
#order-standard_cart.ox-xfer .form-control:focus {
    border-color: var(--ox-brand);
    box-shadow: 0 0 0 2px rgba(26, 108, 245, .1);
}
#order-standard_cart.ox-xfer .form-control::placeholder {
    color: var(--ox-n-400);
}
.ox-xfer-note {
    display: block;
    margin-top: 6px;
    color: var(--ox-n-500);
    font-size: 13px;
}
/* WHMCS's 3-second "not registered" flash is replaced by #oxNotRegistered */
#order-standard_cart.ox-xfer #transferUnavailable {
    display: none !important;
}
/* Lasting messages: not registered (with a Register button), invalid name */
.ox-xfer-msg {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #fedf89;
    border-radius: 14px;
    background: #fffaeb;
}
.ox-xfer-msg.w-hidden {
    display: none;
}
.ox-xfer-msg.is-error {
    border-color: #fecdca;
    background: #fef3f2;
}
.ox-xfer-msg-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fef0c7;
    color: #dc6803;
    font-size: 20px;
}
.ox-xfer-msg.is-error .ox-xfer-msg-icon {
    background: #fee4e2;
    color: #d92d20;
}
.ox-xfer-msg-body {
    min-width: 0;
}
.ox-xfer-msg-body b {
    display: block;
    color: var(--ox-n-900);
    font-size: 16px;
    overflow-wrap: anywhere;
}
.ox-xfer-msg-body p {
    margin: 4px 0 0;
    color: var(--ox-n-700);
    font-size: 14px;
    line-height: 1.55;
}
.ox-xfer-msg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    margin-top: 12px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    transition: background-color .2s;
}
.ox-xfer-msg-btn:hover {
    background: var(--ox-brand-hover);
    color: #fff;
}
.ox-xfer-msg-btn i {
    font-size: 17px;
}
#order-standard_cart.ox-xfer .captcha-container {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    background: var(--ox-n-50);
    text-align: left;
}
#order-standard_cart.ox-xfer .default-captcha {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
#order-standard_cart.ox-xfer .default-captcha p {
    margin: 0 0 10px;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}
#order-standard_cart.ox-xfer .default-captcha > div {
    display: flex;
    align-items: center;
    gap: 12px;
}
#order-standard_cart.ox-xfer .default-captcha img {
    height: 44px;
    border: 1px solid var(--ox-n-200);
    border-radius: 8px;
}
#order-standard_cart.ox-xfer #inputCaptcha {
    display: block;
    flex: 0 0 150px;
    width: 150px;
    max-width: none;
    height: 44px;
    margin: 0;
    letter-spacing: .12em;
}
#order-standard_cart.ox-xfer #btnTransferDomain {
    margin-top: 0;
}
.ox-xfer-extend {
    position: relative;
    margin: 0;
    padding-left: 26px;
    color: var(--ox-n-700);
    font-size: 14px;
}
.ox-xfer-extend i {
    position: absolute;
    top: 1px;
    left: 0;
    color: #079455;
    font-size: 17px;
}
.ox-xfer-extend small {
    display: block;
    margin-top: 2px;
    color: var(--ox-n-500);
    font-size: 12px;
}
.ox-xfer-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-xfer-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ox-xfer-list li > i {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 18px;
}
.ox-xfer-list li > span {
    color: var(--ox-n-500);
    font-size: 14px;
    line-height: 1.5;
}
.ox-xfer-list b {
    display: block;
    color: var(--ox-n-900);
    font-size: 15px;
}
@media (max-width: 991px) {
    .ox-xfer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}
@media (max-width: 575px) {
    body:has(.ox-xfer) section#main-body {
        padding-top: 24px;
    }
    #order-standard_cart.ox-xfer .ox-conf-title {
        font-size: 28px;
    }
    /* Captcha: the input drops under the picture when there is no room beside it */
    #order-standard_cart.ox-xfer .default-captcha > div {
        flex-wrap: wrap;
    }
    #order-standard_cart.ox-xfer #inputCaptcha {
        flex: 1 1 120px;
        width: auto;
    }
}

/* Order form: domain configuration (orderforms/hostavik_cart/configuredomains.tpl) */
body:has(.ox-dcfg) section#main-body {
    padding: 40px 0 72px;
    background: var(--ox-n-50);
}
#order-standard_cart.ox-dcfg {
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
}
.ox-dcfg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 32px;
}
.ox-dcfg-main,
.ox-dcfg-side {
    min-width: 0;
}
#order-standard_cart.ox-dcfg .ox-dcfg-errors {
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid #fecdca;
    border-radius: 14px;
    background: #fef3f2;
    color: #b42318;
}
.ox-dcfg-domain-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
}
.ox-dcfg-domain-title {
    flex: 1 1 200px;
    min-width: 0;
}
.ox-dcfg-domain-name {
    color: var(--ox-n-900);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.ox-dcfg-domain-meta {
    color: var(--ox-n-500);
    font-size: 14px;
}
.ox-dcfg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}
.ox-dcfg-chip.is-ok {
    background: #ecfdf3;
    color: #067647;
}
.ox-dcfg-chip.is-add {
    background: #fffaeb;
    color: #b54708;
    transition: background-color .2s;
}
.ox-dcfg-chip.is-add:hover {
    background: #fef0c7;
    color: #b54708;
}
.ox-dcfg-field {
    min-width: 0;
    margin-top: 20px;
}
#order-standard_cart .ox-dcfg-field > label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
}
#order-standard_cart.ox-dcfg .form-control,
#order-standard_cart.ox-dcfg .ox-dcfg-extra input[type="text"],
#order-standard_cart.ox-dcfg .ox-dcfg-extra select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ox-n-300);
    border-radius: 10px;
    background-color: #fff;
    color: var(--ox-n-900);
    font-size: 16px;
    box-shadow: none;
}
#order-standard_cart.ox-dcfg .ox-xfer-input .form-control {
    padding-left: 46px;
}
#order-standard_cart.ox-dcfg .form-control:focus,
#order-standard_cart.ox-dcfg .ox-dcfg-extra input[type="text"]:focus,
#order-standard_cart.ox-dcfg .ox-dcfg-extra select:focus {
    border-color: var(--ox-brand);
    outline: 0;
    box-shadow: 0 0 0 2px rgba(26, 108, 245, .1);
}
.ox-dcfg-sub {
    margin: 26px 0 12px;
    color: var(--ox-n-500);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
#order-standard_cart .ox-dcfg-note {
    margin: -10px 0 4px;
    color: var(--ox-n-500);
    font-size: 14px;
}
/* Add-on cards (standard_cart's script toggles .panel-addon-selected and rewrites .panel-add) */
.ox-dcfg-addons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
#order-standard_cart.ox-dcfg .panel-addon {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1.5px solid var(--ox-n-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
#order-standard_cart.ox-dcfg .panel-addon:hover {
    border-color: var(--ox-n-400);
}
#order-standard_cart.ox-dcfg .panel-addon.panel-addon-selected {
    border-color: var(--ox-brand);
    background: var(--ox-brand-50);
    box-shadow: 0 0 0 1px var(--ox-brand);
}
#order-standard_cart.ox-dcfg .panel-addon .panel-body {
    flex: 1 1 auto;
    padding: 16px 16px 10px;
    color: var(--ox-n-500);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}
#order-standard_cart.ox-dcfg .panel-addon .panel-body label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    padding: 0;
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.ox-dcfg-addon-desc {
    display: block;
}
#order-standard_cart.ox-dcfg .icheckbox_square-blue {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 2px solid var(--ox-n-300);
    border-radius: 6px;
    background: #fff;
    filter: none;
}
#order-standard_cart.ox-dcfg .icheckbox_square-blue.checked {
    border-color: var(--ox-brand);
    background: var(--ox-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center / 14px;
}
#order-standard_cart.ox-dcfg .panel-addon .panel-price {
    padding: 0 16px 12px;
    background: none;
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}
#order-standard_cart.ox-dcfg .panel-addon .panel-add {
    margin: 0 16px 16px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}
#order-standard_cart.ox-dcfg .panel-addon.panel-addon-selected .panel-add {
    background: var(--ox-brand);
    color: #fff;
}
.ox-dcfg-extra,
.ox-dcfg-ns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}
.ox-dcfg-ns .ox-dcfg-field {
    margin-top: 16px;
}
/* Side card */
.ox-dcfg-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-dcfg-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ox-dcfg-list li > i {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 18px;
}
.ox-dcfg-list li > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ox-dcfg-list b {
    color: var(--ox-n-900);
    font-size: 15px;
    overflow-wrap: anywhere;
}
.ox-dcfg-list small {
    color: var(--ox-n-500);
    font-size: 13px;
}
@media (max-width: 991px) {
    .ox-dcfg-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}
@media (max-width: 575px) {
    body:has(.ox-dcfg) section#main-body {
        padding-top: 24px;
    }
    #order-standard_cart.ox-dcfg .ox-conf-title {
        font-size: 28px;
    }
    .ox-dcfg-extra,
    .ox-dcfg-ns {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Domain offers (domain-promos.tpl)
   ========================================================================== */
.ox-domain-offers {
    background: #fff;
}
.ox-domain-offers .ox-tld {
    border: 1px solid var(--ox-n-200);
}
.ox-tld.is-sale {
    position: relative;
    border-color: var(--ox-brand);
}
.ox-tld-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
}
.ox-notice {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 640px;
    margin: 0 auto;
    padding: 22px 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: var(--ox-n-50);
}
.ox-notice-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    color: var(--ox-brand);
    font-size: 22px;
}
.ox-notice b {
    display: block;
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 700;
}
.ox-notice p {
    margin: 2px 0 0;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.5;
}
.ox-domain-transfer-wrap.ox-domain-transfer-gap {
    padding: 72px 0;
}
@media (max-width: 767px) {
    .ox-domain-transfer-wrap.ox-domain-transfer-gap {
        padding: 48px 0;
    }
}

/* ==========================================================================
   Page header: the plain navy title band on pages without a photo hero
   (contact.tpl, privacy-policy.tpl, legal-agreement.tpl). It sits under the fixed site
   header, so its top padding includes the header's height.
   ========================================================================== */
.ox-pagehead {
    padding: 136px 0 56px;
    background: var(--ox-navy);
    text-align: center;
}
.ox-pagehead h1 {
    margin: 0;
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
}
.ox-pagehead p {
    max-width: 620px;
    margin: 12px auto 0;
    color: rgba(255, 255, 255, .72);
    font-size: 17px;
    line-height: 1.6;
}
@media (max-width: 767px) {
    .ox-pagehead {
        padding: 112px 0 40px;
    }
    .ox-pagehead h1 {
        font-size: 32px;
    }
    .ox-pagehead p {
        font-size: 16px;
    }
}

/* ==========================================================================
   Legal pages (Terms & Conditions, Terms of Use, Privacy Policy, Cookie Policy, Security
   Statement, Vulnerability Disclosure Policy; layout: includes/ox-legal-open.tpl).
   A breadcrumb, then a tinted "On this page" box beside the text. The box stays in view while
   the text scrolls. Sections (h3) are numbered by CSS, in the text and in the box.
   ========================================================================== */
.ox-legal {
    padding: 28px 0 88px;
    background: #fff;
}
.ox-legal-crumbs {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 28px;
    padding: 0;
    color: var(--ox-n-500);
    font-size: 14px;
    line-height: 1.5;
    list-style: none;
}
.ox-legal-crumbs li + li::before {
    content: "/";
    margin: 0 10px;
    color: var(--ox-n-400);
}
.ox-legal-crumbs a {
    color: var(--ox-brand);
    font-weight: 500;
}
.ox-legal-crumbs a:hover {
    color: var(--ox-brand-hover);
    text-decoration: underline;
}
.ox-legal-crumbs [aria-current] {
    color: var(--ox-n-900);
}
.ox-legal-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* "On this page" box */
/* (top: the site header stays fixed at the top of the window while scrolling, about 75px tall) */
.ox-legal-rail {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    padding: 24px;
    overflow-y: auto;
    border-radius: 12px;
    background: var(--ox-n-50);
}
.ox-legal-rail-toggle {
    display: none;
}
.ox-legal-rail-title {
    display: block;
    margin-bottom: 12px;
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}
.ox-legal-rail ol,
.ox-legal-rail ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-legal-rail li + li {
    margin-top: 9px;
}
.ox-legal-rail a {
    display: block;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    transition: color .15s;
}
.ox-legal-rail a:hover {
    color: var(--ox-brand);
}
.ox-legal-toc {
    counter-reset: ox-legal-toc;
}
.ox-legal-toc li {
    counter-increment: ox-legal-toc;
}
.ox-legal-toc a::before {
    content: counter(ox-legal-toc) ". ";
}
.ox-legal-rail nav + nav {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--ox-n-200);
}
/* A page in parts (h2): each part's title, then its own list, with a line between parts */
.ox-legal-rail a.ox-legal-toc-part {
    margin-bottom: 10px;
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 700;
}
.ox-legal-toc + a.ox-legal-toc-part {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ox-n-200);
}

/* The text */
.ox-legal-body {
    max-width: 820px;
    counter-reset: ox-legal-section;
}
.ox-legal-body .ox-legal-date {
    display: inline-block;
    margin: 0 0 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
/* Part of a page; the section numbers start again after it */
.ox-legal-body h2 {
    margin: 56px 0 4px;
    padding-top: 28px;
    border-top: 1px solid var(--ox-n-200);
    color: var(--ox-n-900);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    counter-reset: ox-legal-section;
    scroll-margin-top: 80px;
}
.ox-legal-body h2 + h3 {
    margin-top: 24px;
}
.ox-legal-body h3 {
    margin: 36px 0 12px;
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    counter-increment: ox-legal-section;
    /* a jump from the "On this page" box lands just below the fixed site header */
    scroll-margin-top: 100px;
}
.ox-legal-body h3::before {
    content: counter(ox-legal-section) ". ";
}
.ox-legal-body .ox-legal-date + h3 {
    margin-top: 20px;
}
/* Sub-heading inside a section (not numbered, not listed in the box) */
.ox-legal-body h4 {
    margin: 22px 0 8px;
    color: var(--ox-n-900);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}
.ox-legal-body p,
.ox-legal-body li {
    color: var(--ox-n-700);
    font-size: 16px;
    line-height: 1.75;
}
.ox-legal-body p {
    margin: 0 0 14px;
}
.ox-legal-body ul,
.ox-legal-body ol {
    margin: 0 0 16px;
    padding-left: 22px;
}
/* (set on the items: the theme switches list markers off on every li) */
.ox-legal-body ul > li {
    list-style: disc;
}
.ox-legal-body ol > li {
    list-style: decimal;
}
.ox-legal-body ol[type="a"] > li {
    list-style: lower-alpha;
}
.ox-legal-body li > ol,
.ox-legal-body li > ul {
    margin: 8px 0 4px;
}
.ox-legal-body strong {
    color: var(--ox-n-900);
    font-weight: 700;
}
.ox-legal-body li {
    margin-bottom: 6px;
}
.ox-legal-body a {
    color: var(--ox-brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ox-legal-body a:hover {
    color: var(--ox-brand-hover);
}
/* The company's contact details (includes/ox-legal-contact.tpl) */
.ox-legal-body ul.ox-legal-contact {
    margin: 4px 0 16px;
    padding: 18px 20px;
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    background: var(--ox-n-50);
}
.ox-legal-body ul.ox-legal-contact > li {
    margin: 0;
    list-style: none;
    overflow-wrap: anywhere;
}
.ox-legal-body ul.ox-legal-contact > li + li {
    margin-top: 4px;
}
/* The cookie table */
.ox-legal-table {
    margin: 0 0 16px;
    overflow-x: auto;
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
}
.ox-legal-table table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}
.ox-legal-table th,
.ox-legal-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ox-n-200);
    color: var(--ox-n-700);
    font-size: 15px;
    line-height: 1.55;
    text-align: left;
    vertical-align: top;
}
.ox-legal-table th {
    background: var(--ox-n-50);
    color: var(--ox-n-900);
    font-weight: 700;
    white-space: nowrap;
}
.ox-legal-table tr:last-child td {
    border-bottom: 0;
}
@media (max-width: 1199px) {
    .ox-legal-layout {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 32px;
    }
}
/* Tablets and phones: the box sits above the text, closed until its button is pressed */
@media (max-width: 991px) {
    .ox-legal {
        padding: 20px 0 64px;
    }
    .ox-legal-crumbs {
        margin-bottom: 18px;
    }
    .ox-legal-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .ox-legal-rail {
        position: static;
        max-height: none;
        padding: 0;
        overflow: visible;
    }
    .ox-legal-rail-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 18px;
        border: 0;
        border-radius: 12px;
        background: none;
        color: var(--ox-n-900);
        font-size: 16px;
        font-weight: 700;
        text-align: left;
    }
    .ox-legal-rail-toggle i {
        color: var(--ox-n-500);
        font-size: 22px;
        font-weight: 400;
        transition: transform .2s;
    }
    .ox-legal-rail.is-open .ox-legal-rail-toggle i {
        transform: rotate(180deg);
    }
    .ox-legal-rail-body {
        display: none;
        padding: 4px 18px 18px;
    }
    .ox-legal-rail.is-open .ox-legal-rail-body {
        display: block;
    }
    /* the button already says "On this page" */
    .ox-legal-rail [data-ox-legal-toc] .ox-legal-rail-title {
        display: none;
    }
    .ox-legal-body h3 {
        margin-top: 30px;
        font-size: 20px;
        scroll-margin-top: 84px;
    }
    .ox-legal-body h2 {
        margin-top: 44px;
        font-size: 24px;
        scroll-margin-top: 64px;
    }
}

/* ==========================================================================
   Contact page (contact.tpl)
   ========================================================================== */
.ox-contact {
    padding: 56px 0 88px;
    background: var(--ox-n-50);
}
.ox-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
}
.ox-contact-card {
    padding: 32px;
    border: 1px solid var(--ox-n-200);
    border-radius: 20px;
    background: #fff;
}
.ox-contact-card h2 {
    margin: 0 0 22px;
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 700;
}
.ox-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ox-contact-field {
    margin-bottom: 16px;
}
.ox-contact-field label {
    display: block;
    margin: 0 0 6px;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
}
.ox-contact .ox-contact-field .form-control {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ox-n-300);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    color: var(--ox-n-900);
    font-size: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.ox-contact .ox-contact-field textarea.form-control {
    height: auto;
    min-height: 160px;
    padding: 12px 14px;
    line-height: 1.6;
    resize: vertical;
}
.ox-contact .ox-contact-field .form-control:focus {
    border-color: var(--ox-brand);
    box-shadow: 0 0 0 2px rgba(26, 108, 245, .1);
    outline: 0;
}
.ox-contact-captcha {
    margin: 4px 0 18px;
}
.ox-contact-captcha .row {
    justify-content: flex-start !important;
    margin: 0;
}
.ox-contact-captcha .row > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.ox-contact-captcha p {
    margin: 0 0 8px;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
}
.ox-contact-captcha #inputCaptchaImage {
    height: 44px;
    border: 1px solid var(--ox-n-200);
    border-radius: 8px;
}
.ox-contact .ox-contact-captcha #inputCaptcha {
    display: inline-block;
    width: 140px;
    height: 44px;
    margin-left: 8px;
    padding: 0 12px;
    border: 1px solid var(--ox-n-300);
    border-radius: 10px;
    box-shadow: none;
    font-size: 16px;
    vertical-align: middle;
}
.ox-contact .ox-contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 180px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: var(--ox-brand);
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.ox-contact .ox-contact-submit:hover,
.ox-contact .ox-contact-submit:focus {
    background: var(--ox-brand-hover);
    color: #fff;
}
.ox-contact-sent {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid #abefc6;
    border-radius: 14px;
    background: #ecfdf3;
}
.ox-contact-sent > span {
    color: #079455;
    font-size: 26px;
    line-height: 1;
}
.ox-contact-sent b {
    display: block;
    color: #085d3a;
    font-size: 16px;
    font-weight: 700;
}
.ox-contact-sent p {
    margin: 2px 0 0;
    color: #067647;
    font-size: 15px;
}
.ox-contact-errors {
    margin: 0 0 18px;
    padding: 14px 18px;
    border: 1px solid #fecdca;
    border-radius: 12px;
    background: #fef3f2;
    color: #b42318;
    font-size: 15px;
}
.ox-contact-errors ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}
.ox-contact-side {
    display: grid;
    gap: 12px;
}
.ox-contact-way {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    color: var(--ox-n-500);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color .15s;
}
.ox-contact-way:hover {
    border-color: var(--ox-brand);
    color: var(--ox-n-500);
}
.ox-contact-way > span:nth-child(2) {
    flex: 1;
    min-width: 0;
}
.ox-contact-way b {
    display: block;
    margin-bottom: 2px;
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 700;
}
.ox-contact-way-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 22px;
}
.ox-contact-way > i {
    flex: none;
    color: var(--ox-n-400);
    font-size: 20px;
    transition: color .15s, transform .15s;
}
.ox-contact-way:hover > i {
    color: var(--ox-brand);
    transform: translateX(2px);
}
@media (max-width: 991px) {
    .ox-contact-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575px) {
    .ox-contact {
        padding: 32px 0 56px;
    }
    .ox-contact-card {
        padding: 22px 18px;
    }
    .ox-contact-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ox-contact .ox-contact-submit {
        width: 100%;
    }
    .ox-contact .ox-contact-captcha #inputCaptcha {
        width: 120px;
    }
}
.ox-contact-captcha,
.ox-contact-captcha .text-center {
    text-align: left !important;
}
.ox-contact-captcha p {
    max-width: 460px;
    font-weight: 500;
    line-height: 1.5;
}

/* ==========================================================================
   Order form: plan listing (orderforms/hostavik_cart/products.tpl)
   A white band with the title and the product groups as tabs, then the open group's plans
   in one row that slides sideways (the "All" view shows them as a grid instead).
   ========================================================================== */
.ox-store [hidden] {
    display: none !important;
}
.ox-store-head {
    position: relative;
    margin-bottom: 32px;
    padding-top: 44px;
}
/* The band runs the full width of the window; section#main-body clips what sticks out */
.ox-store-head::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    border-bottom: 1px solid var(--ox-n-200);
    background: #fff;
}
.ox-store-head > * {
    position: relative;
}
.ox-store-head .ox-conf-lead {
    margin-bottom: 20px;
}
.ox-store-head:not(:has(.ox-store-tabs)) {
    padding-bottom: 12px;
}

/* Product groups: one row of tabs; it scrolls sideways when the groups don't fit */
.ox-store-tabs {
    position: relative;
}
.ox-store-tabs-list {
    position: relative;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ox-store-tabs-list::-webkit-scrollbar {
    display: none;
}
.ox-store-tabs-list a {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 13px;
    border-bottom: 2px solid transparent;
    color: var(--ox-n-700);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.ox-store-tabs-list a i {
    color: var(--ox-n-400);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    transition: color .15s;
}
.ox-store-tabs-list a:hover,
.ox-store-tabs-list a:hover i {
    color: var(--ox-brand);
}
.ox-store-tabs-list a.is-current {
    border-bottom-color: var(--ox-brand);
    color: var(--ox-brand);
}
.ox-store-tabs-list a.is-current i {
    color: inherit;
}
.ox-store-tabs-arrow {
    position: absolute;
    top: 0;
    bottom: 2px;
    z-index: 1;
    width: 56px;
    padding: 0;
    border: 0;
    color: var(--ox-n-700);
    font-size: 24px;
    line-height: 1;
}
.ox-store-tabs-arrow:hover {
    color: var(--ox-brand);
}
.ox-store-tabs-arrow.is-prev {
    left: 0;
    background: linear-gradient(90deg, #fff 55%, rgba(255, 255, 255, 0));
    text-align: left;
}
.ox-store-tabs-arrow.is-next {
    right: 0;
    background: linear-gradient(270deg, #fff 55%, rgba(255, 255, 255, 0));
    text-align: right;
}
.ox-store-alert {
    max-width: 720px;
    margin: 0 0 24px;
    border-radius: 12px;
}

/* Group name, then the Slider / All switch on the left and the pager on the right */
.ox-store-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
    margin-bottom: 20px;
}
.ox-store-bar-title {
    flex: 0 0 100%;
}
#order-standard_cart .ox-store-group {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 700;
}
.ox-store-bar-title p {
    margin: 4px 0 0;
    color: var(--ox-n-500);
    font-size: 15px;
}
.ox-store-view {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    background: #fff;
}
.ox-store-view button {
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
.ox-store-view button[aria-pressed="true"] {
    background: var(--ox-brand);
    color: #fff;
}
.ox-store-pager {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--ox-n-700);
    font-size: 15px;
    font-weight: 600;
}
.ox-store-pager span {
    min-width: 40px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.ox-store-pager button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ox-n-200);
    border-radius: 50%;
    background: #fff;
    color: var(--ox-n-700);
    font-size: 20px;
    line-height: 1;
    transition: border-color .15s, color .15s;
}
.ox-store-pager button:hover:not(:disabled) {
    border-color: var(--ox-brand);
    color: var(--ox-brand);
}
.ox-store-pager button:disabled {
    opacity: .4;
    cursor: default;
}

/* The row of plans. --ox-store-cols = how many plans are in view at once.
   (.ox-store-plans in the selector: standard_cart's own ".products" margin loads later.) */
#order-standard_cart .ox-store-plans .ox-store-track {
    --ox-store-cols: 4;
    --ox-store-gap: 16px;
    position: relative;
    display: flex;
    gap: var(--ox-store-gap);
    margin: 0;
    padding-bottom: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.ox-store-track::-webkit-scrollbar {
    display: none;
}
.ox-store-plans[data-view="all"] .ox-store-track {
    flex-wrap: wrap;
    overflow: visible;
}
/* Dragging with the mouse (script in products.tpl): no snapping until the pointer lets go */
.ox-store-track.is-slidable {
    cursor: grab;
}
#order-standard_cart .ox-store-plans .ox-store-track.is-dragging,
.ox-store-tabs-list.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
}
.ox-store-track.is-dragging a,
.ox-store-tabs-list.is-dragging a {
    cursor: grabbing;
}
@media (prefers-reduced-motion: no-preference) {
    .ox-store-track,
    .ox-store-tabs-list {
        scroll-behavior: smooth;
    }
}
.ox-splan {
    display: flex;
    flex: 0 0 calc((100% - (var(--ox-store-cols) - 1) * var(--ox-store-gap)) / var(--ox-store-cols));
    flex-direction: column;
    min-width: 0;
    padding: 28px 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .03);
    scroll-snap-align: start;
}
.ox-splan.is-featured {
    border-color: var(--ox-brand);
}
/* The labels get their own line on every card, so the names stay level */
.ox-splan-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
    margin-bottom: 10px;
}
#order-standard_cart .ox-splan-name {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
.ox-splan-flag {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
.ox-splan-flag.is-stock {
    background: var(--ox-n-100);
    color: var(--ox-n-700);
}
/* "Most popular": a discount badge (percent sign in a seal) before the words */
.ox-splan-flag.is-popular {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-left: 8px;
}
.ox-splan-flag.is-popular::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M15 15h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M15 15h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Room for two lines, so prices and buttons line up across the row */
.ox-splan-tagline {
    min-height: 44px;
    margin: 6px 0 0;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.45;
}
.ox-splan-desc {
    min-height: 72px;
    margin: 12px 0 0;
    color: var(--ox-n-700);
    font-size: 15px;
    line-height: 1.6;
}
.ox-splan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 6px;
    min-height: 40px;
    margin-top: 20px;
    color: var(--ox-n-900);
    line-height: 1;
}
.ox-splan-price strong {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.01em;
}
/* A price WHMCS reports as text ("$5.99 USD") */
.ox-splan-price strong.is-text {
    padding-top: 6px;
    font-size: 28px;
}
.ox-splan-cur {
    padding-top: 5px;
    font-size: 22px;
    font-weight: 600;
}
.ox-splan-per {
    padding-top: 6px;
    color: var(--ox-n-500);
    font-size: 14px;
    font-weight: 500;
}
.ox-splan-from {
    flex: 0 0 100%;
    margin-bottom: 6px;
    color: var(--ox-n-500);
    font-size: 13px;
    font-weight: 500;
}
.ox-splan-save {
    margin-top: 12px;
    color: var(--ox-n-500);
    font-size: 13px;
    line-height: 1.5;
}
.has-save .ox-splan-save {
    min-height: 28px;
}
.ox-splan-save span {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    background: #fef0c7;
    color: #93370d;
    font-size: 12px;
    font-weight: 700;
}
#order-standard_cart .ox-splan-btn {
    display: block;
    margin-top: 20px;
    padding: 13px 16px;
    border: 1.5px solid var(--ox-brand);
    border-radius: 10px;
    color: var(--ox-brand);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    transition: background-color .2s, border-color .2s, color .2s;
}
#order-standard_cart .ox-splan-btn:hover {
    background: var(--ox-brand-50);
    color: var(--ox-brand-hover);
}
#order-standard_cart .ox-splan.is-featured .ox-splan-btn {
    background: var(--ox-brand);
    color: #fff;
}
#order-standard_cart .ox-splan.is-featured .ox-splan-btn:hover {
    border-color: var(--ox-brand-hover);
    background: var(--ox-brand-hover);
}
.ox-splan-features {
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--ox-n-200);
    list-style: none;
}
.ox-splan-features li {
    position: relative;
    padding-inline-start: 26px;
    color: var(--ox-n-700);
    font-size: 15px;
    line-height: 1.5;
}
.ox-splan-features li + li {
    margin-top: 10px;
}
.ox-splan-features li::before {
    content: "\eb7b";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--ox-brand);
    font-family: var(--font-remixicon);
    font-size: 17px;
    line-height: 1.35;
}
.ox-splan-features b {
    color: var(--ox-n-900);
    font-weight: 700;
}
.ox-store-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 20px;
    margin: 32px 0 0;
    color: var(--ox-n-500);
    font-size: 15px;
}
.ox-store-more a {
    color: var(--ox-brand);
    font-weight: 600;
}
.ox-store-more a:hover {
    color: var(--ox-brand-hover);
    text-decoration: underline;
}
.ox-store-help {
    margin-top: 12px;
    text-align: center;
}
@media (max-width: 1199px) {
    #order-standard_cart .ox-store-plans .ox-store-track {
        --ox-store-cols: 3;
    }
}
@media (max-width: 991px) {
    #order-standard_cart .ox-store-plans .ox-store-track {
        --ox-store-cols: 2;
    }
}
@media (max-width: 599px) {
    .ox-store-head {
        margin-bottom: 24px;
        padding-top: 28px;
    }
    .ox-store-tabs-list a {
        padding: 12px 12px 11px;
        font-size: 14px;
    }
    .ox-store-tabs-arrow {
        width: 44px;
    }
    #order-standard_cart .ox-store-group {
        font-size: 20px;
    }
    /* One plan in view with the edge of the next one showing, so it reads as a slider.
       The row reaches the screen edges (the page's side padding moves inside it). */
    #order-standard_cart .ox-store-plans .ox-store-track {
        --ox-store-cols: 1;
        --ox-store-gap: 12px;
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5);
        padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) 4px;
        scroll-padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5);
    }
    .ox-store-plans[data-view="slider"] .ox-splan {
        flex-basis: 84%;
    }
    .ox-splan {
        padding: 24px 20px;
    }
}

/* ==========================================================================
   Order form: complete (orderforms/hostavik_cart/complete.tpl)
   One centred card: tick, order number, payment status, next actions.
   ========================================================================== */
#order-standard_cart.ox-done {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
}
.ox-done-card {
    padding: 40px 40px 36px;
    border: 1px solid var(--ox-n-200);
    border-radius: 24px;
    background: #fff;
    text-align: center;
}
.ox-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #ecfdf3;
    color: #079455;
    font-size: 34px;
}
.ox-done-card .ox-conf-lead {
    max-width: 440px;
    margin-right: auto;
    margin-left: auto;
}
#order-standard_cart.ox-done .ox-done-number {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 10px;
    margin: 22px 0 0;
    padding: 12px 22px;
    border: 1px dashed var(--ox-n-300);
    border-radius: 14px;
    background: var(--ox-n-50);
    color: var(--ox-n-500);
    font-size: 15px;
    font-weight: 500;
}
#order-standard_cart.ox-done .ox-done-number span {
    display: inline;
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
}
.ox-done-status {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: var(--ox-n-50);
    text-align: left;
}
.ox-done-status-icon {
    flex: none;
    color: var(--ox-n-500);
    font-size: 24px;
    line-height: 1;
}
.ox-done-status-body {
    flex: 1;
    min-width: 0;
}
.ox-done-status-body b {
    display: block;
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}
.ox-done-status-body p {
    margin: 2px 0 0;
    color: var(--ox-n-700);
    font-size: 15px;
    line-height: 1.55;
}
.ox-done-status.is-due {
    border-color: #fedf89;
    background: #fffaeb;
}
.ox-done-status.is-due .ox-done-status-icon {
    color: #dc6803;
}
.ox-done-status.is-paid {
    border-color: #abefc6;
    background: #ecfdf3;
}
.ox-done-status.is-paid .ox-done-status-icon {
    color: #079455;
}
.ox-done-status.is-error {
    border-color: #fecdca;
    background: #fef3f2;
}
.ox-done-status.is-error .ox-done-status-icon {
    color: var(--ox-danger, #d92d20);
}
.ox-done-status.is-info .ox-done-status-icon {
    color: var(--ox-brand);
}
#order-standard_cart .ox-done-pay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--ox-navy);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
#order-standard_cart .ox-done-pay:hover {
    background: var(--ox-navy-2);
    color: #fff;
}
.ox-done-card .order-confirmation-addon-output {
    margin-top: 22px;
    text-align: left;
}
.ox-done-note {
    margin: 24px 0 0;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.6;
}
.ox-done-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    margin-top: 24px;
}
#order-standard_cart .ox-done-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0 26px;
    border-radius: 10px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
#order-standard_cart .ox-done-btn:hover {
    background: var(--ox-brand-hover);
    color: #fff;
}
#order-standard_cart .ox-done-link {
    color: var(--ox-brand);
    font-size: 15px;
    font-weight: 600;
}
#order-standard_cart .ox-done-link:hover {
    color: var(--ox-brand-hover);
    text-decoration: underline;
}
.ox-done-more {
    margin-top: 32px;
}
@media (max-width: 575px) {
    .ox-done-card {
        padding: 28px 18px 26px;
        border-radius: 20px;
    }
    .ox-done-status {
        padding: 16px;
    }
    #order-standard_cart .ox-done-btn {
        width: 100%;
    }
}

/* Plan listing and order complete sit on the same light page as the other order steps */
body:has(.ox-store) section#main-body,
body:has(.ox-done) section#main-body {
    padding: 48px 0 72px;
    background: var(--ox-n-50);
}
/* The plan listing starts with its white band, right under the header */
body:has(.ox-store) section#main-body {
    padding-top: 0;
    overflow-x: hidden;
    overflow-x: clip;
}
@media (max-width: 767px) {
    body:has(.ox-store) section#main-body,
    body:has(.ox-done) section#main-body {
        padding: 28px 0 48px;
    }
    body:has(.ox-store) section#main-body {
        padding-top: 0;
    }
}

/* ==========================================================================
   Client area content: WHMCS's own pages (#main-body.ox-wh, set in header.tpl), both
   inside the dashboard and, for visitors, under the site header (.is-guest).
   One shared style: side panels, cards, tables, forms, buttons, status labels, alerts,
   tabs and pagination. Page-specific pieces follow at the end.
   ========================================================================== */
#main-body.ox-wh {
    color: var(--ox-n-700);
    font-size: 15px;
    line-height: 1.6;
}
/* Low-priority defaults (:where), so the dashboard home and top-up pages keep their own styles */
:where(#main-body.ox-wh .primary-content) :where(h2, h3, h4) {
    color: var(--ox-n-900);
    font-weight: 700;
}
:where(#main-body.ox-wh .primary-content) :where(h2) {
    font-size: 22px;
}
:where(#main-body.ox-wh .primary-content) :where(h3) {
    font-size: 18px;
}
:where(#main-body.ox-wh .primary-content) :where(h4) {
    font-size: 16px;
}
#main-body.ox-wh .text-muted {
    color: var(--ox-n-500) !important;
}

/* --- Side panels (filters, page actions, section menus) ---
   The Billing and Support menus repeat the dashboard's own menu, so they are not shown;
   a side column left with nothing in it gives its space to the page. */
#main-body.ox-wh .card-sidebar[menuItemName="Billing"],
#main-body.ox-wh .card-sidebar[menuItemName="Support"] {
    display: none;
}
@media (min-width: 992px) {
    /* (> div > .row: only the page's own side column, never a column inside the page's content) */
    #main-body.ox-wh > div > .row > .col-lg-4:not(:has(.card-sidebar:not([menuItemName="Billing"]):not([menuItemName="Support"]))) {
        display: none;
    }
    #main-body.ox-wh > div > .row > .col-lg-4:not(:has(.card-sidebar:not([menuItemName="Billing"]):not([menuItemName="Support"]))) + .primary-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
#main-body.ox-wh .card-sidebar {
    margin-bottom: 16px !important;
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
}
#main-body.ox-wh .card-sidebar > .card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ox-n-100);
    background: #fff;
}
#main-body.ox-wh .card-sidebar .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ox-n-500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
}
#main-body.ox-wh .card-sidebar .card-title > i:first-child {
    display: none;
}
#main-body.ox-wh .card-sidebar .card-title .card-minimise {
    margin-left: auto;
    color: var(--ox-n-400);
    font-size: 12px;
}
#main-body.ox-wh .card-sidebar .card-body {
    padding: 16px 18px;
    color: var(--ox-n-700);
    font-size: 15px;
    line-height: 1.55;
}
#main-body.ox-wh .card-sidebar .card-footer {
    padding: 4px 18px 12px;
    border-top: 0;
    background: #fff;
}
#main-body.ox-wh .card-sidebar .card-footer > .btn {
    margin: 0 6px 6px 0;
}
#main-body.ox-wh .card-sidebar .card-footer .row {
    margin: 0 -4px 4px;
}
#main-body.ox-wh .card-sidebar .card-footer .row > [class*="col-"] {
    padding: 0 4px;
}
#main-body.ox-wh .card-sidebar .list-group {
    padding: 6px;
}
#main-body.ox-wh .card-sidebar .list-group-item {
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ox-n-700);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color .15s, color .15s;
}
#main-body.ox-wh .card-sidebar a.list-group-item:hover {
    background: var(--ox-n-50);
    color: var(--ox-n-900);
}
#main-body.ox-wh .card-sidebar .list-group-item.active {
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
    font-weight: 600;
}
#main-body.ox-wh .card-sidebar .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
#main-body.ox-wh .card-sidebar .sidebar-menu-item-label {
    flex: 1;
    min-width: 0;
}
#main-body.ox-wh .card-sidebar .sidebar-menu-item-icon,
#main-body.ox-wh .card-sidebar .list-group-item > i {
    color: var(--ox-n-400);
    font-size: 14px;
}
#main-body.ox-wh .card-sidebar .list-group-item.active .sidebar-menu-item-icon,
#main-body.ox-wh .card-sidebar .list-group-item.active > i {
    color: var(--ox-brand);
}
#main-body.ox-wh .card-sidebar .badge {
    min-width: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 12px;
    font-weight: 600;
}
#main-body.ox-wh .card-sidebar .list-group-item.active .badge {
    background: #fff;
    color: var(--ox-brand-700);
}

/* --- Cards --- */
#main-body.ox-wh .primary-content .card,
#main-body.ox-wh .primary-content .well {
    margin-bottom: 16px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
}
#main-body.ox-wh .primary-content .well {
    padding: 20px 24px;
}
#main-body.ox-wh .primary-content .card-body {
    padding: 24px;
}
#main-body.ox-wh .primary-content .card-body.extra-padding {
    padding: 28px;
}
#main-body.ox-wh .primary-content .card-title {
    margin-bottom: 18px;
    color: var(--ox-n-900);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}
#main-body.ox-wh .primary-content .card > .card-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--ox-n-100);
    border-radius: 16px 16px 0 0;
    background: #fff;
    color: var(--ox-n-900);
    font-weight: 700;
}
#main-body.ox-wh .primary-content .card > .card-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--ox-n-100);
    border-radius: 0 0 16px 16px;
    background: var(--ox-n-50);
}

/* --- Buttons --- */
#main-body.ox-wh .btn,
body:has(#main-body.ox-wh) .modal .btn {
    padding: 10px 18px;
    border-radius: 10px;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color .15s, border-color .15s, color .15s;
}
#main-body.ox-wh .btn-sm,
#main-body.ox-wh .btn-group-sm > .btn,
body:has(#main-body.ox-wh) .modal .btn-sm {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
}
#main-body.ox-wh .btn-xs {
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 12px;
}
#main-body.ox-wh .btn-lg {
    padding: 13px 24px;
    font-size: 16px;
}
#main-body.ox-wh .btn-primary,
body:has(#main-body.ox-wh) .modal .btn-primary {
    border-color: var(--ox-brand) !important;
    background: var(--ox-brand) !important;
    color: #fff !important;
}
#main-body.ox-wh .btn-primary:hover,
#main-body.ox-wh .btn-primary:focus,
body:has(#main-body.ox-wh) .modal .btn-primary:hover {
    border-color: var(--ox-brand-hover) !important;
    background: var(--ox-brand-hover) !important;
}
#main-body.ox-wh .btn-default,
#main-body.ox-wh .btn-secondary,
#main-body.ox-wh .btn-light,
body:has(#main-body.ox-wh) .modal .btn-default,
body:has(#main-body.ox-wh) .modal .btn-secondary {
    border: 1px solid var(--ox-n-300) !important;
    background: #fff !important;
    color: var(--ox-n-700) !important;
}
#main-body.ox-wh .btn-default:hover,
#main-body.ox-wh .btn-secondary:hover,
#main-body.ox-wh .btn-light:hover,
body:has(#main-body.ox-wh) .modal .btn-default:hover,
body:has(#main-body.ox-wh) .modal .btn-secondary:hover {
    border-color: var(--ox-n-400) !important;
    background: var(--ox-n-50) !important;
    color: var(--ox-n-900) !important;
}
#main-body.ox-wh .btn-success {
    border-color: #079455;
    background: #079455;
    color: #fff;
}
#main-body.ox-wh .btn-success:hover {
    border-color: #067647;
    background: #067647;
    color: #fff;
}
#main-body.ox-wh .btn-danger,
body:has(#main-body.ox-wh) .modal .btn-danger {
    border-color: #d92d20;
    background: #d92d20;
    color: #fff;
}
#main-body.ox-wh .btn-danger:hover,
body:has(#main-body.ox-wh) .modal .btn-danger:hover {
    border-color: #b42318;
    background: #b42318;
    color: #fff;
}
#main-body.ox-wh .btn-info {
    border-color: var(--ox-navy);
    background: var(--ox-navy);
    color: #fff;
}
#main-body.ox-wh .btn-info:hover {
    border-color: var(--ox-navy-2);
    background: var(--ox-navy-2);
    color: #fff;
}
#main-body.ox-wh .btn-warning {
    border-color: #f79009;
    background: #f79009;
    color: #fff;
}
#main-body.ox-wh .btn-link {
    padding-right: 4px;
    padding-left: 4px;
    color: var(--ox-brand);
}
#main-body.ox-wh .btn.disabled,
#main-body.ox-wh .btn:disabled {
    opacity: .55;
}
#main-body.ox-wh .btn > i,
#main-body.ox-wh .btn > .fas,
#main-body.ox-wh .btn > .far {
    margin-right: 4px;
}

/* --- Forms --- */
#main-body.ox-wh label,
body:has(#main-body.ox-wh) .modal label {
    margin-bottom: 6px;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
}
#main-body.ox-wh :where(.form-control, .custom-select),
body:has(#main-body.ox-wh) .modal :where(.form-control, .custom-select) {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--ox-n-300);
    border-radius: 10px;
    background-color: #fff;
    box-shadow: none;
    color: var(--ox-n-900);
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
#main-body.ox-wh :where(.custom-select),
body:has(#main-body.ox-wh) .modal :where(.custom-select) {
    padding-right: 36px;
}
#main-body.ox-wh :where(textarea.form-control),
body:has(#main-body.ox-wh) .modal :where(textarea.form-control) {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
    line-height: 1.6;
}
#main-body.ox-wh :where(select[multiple].form-control) {
    height: auto;
    padding: 8px;
}
#main-body.ox-wh :where(.form-control-sm, .custom-select-sm) {
    height: 40px;
    font-size: 14px;
}
#main-body.ox-wh :where(.form-control-lg, .input-group-lg > .form-control) {
    height: 52px;
    font-size: 16px;
}
#main-body.ox-wh .form-control:focus,
#main-body.ox-wh .custom-select:focus,
body:has(#main-body.ox-wh) .modal .form-control:focus {
    border-color: var(--ox-brand);
    box-shadow: 0 0 0 2px rgba(26, 108, 245, .1);
    outline: 0;
}
#main-body.ox-wh .form-control::placeholder {
    color: var(--ox-n-400);
}
#main-body.ox-wh .form-control:disabled,
#main-body.ox-wh .form-control[readonly] {
    background-color: var(--ox-n-50);
    color: var(--ox-n-500);
}
#main-body.ox-wh .form-group {
    margin-bottom: 18px;
}
#main-body.ox-wh .form-text,
#main-body.ox-wh .field-help-text {
    margin-top: 6px;
    color: var(--ox-n-500);
    font-size: 13px;
}
#main-body.ox-wh .form-check {
    padding-left: 0;
}
#main-body.ox-wh .form-check-label,
#main-body.ox-wh .form-check label {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    color: var(--ox-n-700);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
#main-body.ox-wh .form-check-input,
#main-body.ox-wh .form-check input[type="checkbox"],
#main-body.ox-wh .form-check input[type="radio"] {
    position: static;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--ox-brand);
}
#main-body.ox-wh .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#main-body.ox-wh .input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#main-body.ox-wh .input-group-append > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#main-body.ox-wh .input-group-prepend > .btn,
#main-body.ox-wh .input-group-prepend > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#main-body.ox-wh .input-group-text {
    border-color: var(--ox-n-300);
    border-radius: 10px;
    background: var(--ox-n-50);
    color: var(--ox-n-500);
}
/* Phone number with country code (same look as the register form and checkout) */
#main-body.ox-wh .intl-tel-input {
    display: block;
    width: 100%;
}
#main-body.ox-wh .intl-tel-input.separate-dial-code .selected-flag {
    padding-left: 12px;
    border-right: 1px solid var(--ox-n-200);
    border-radius: 9px 0 0 9px;
    background: var(--ox-n-50);
}
#main-body.ox-wh .intl-tel-input.separate-dial-code .selected-dial-code {
    color: var(--ox-n-900);
    font-size: 15px;
    font-weight: 500;
}
#main-body.ox-wh .intl-tel-input .selected-flag .iti-arrow {
    right: 10px;
    border-top-color: var(--ox-n-500);
}
#main-body.ox-wh .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag { width: 86px; }
#main-body.ox-wh .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag { width: 94px; }
#main-body.ox-wh .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag { width: 102px; }
#main-body.ox-wh .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag { width: 110px; }
#main-body.ox-wh .intl-tel-input.iti-sdc-2 input { padding-left: 100px; }
#main-body.ox-wh .intl-tel-input.iti-sdc-3 input { padding-left: 108px; }
#main-body.ox-wh .intl-tel-input.iti-sdc-4 input { padding-left: 116px; }
#main-body.ox-wh .intl-tel-input.iti-sdc-5 input { padding-left: 124px; }
#main-body.ox-wh .intl-tel-input .country-list {
    width: min(280px, calc(100vw - 48px));
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .04);
    white-space: normal;
}
/* Yes / No switch */
#main-body.ox-wh .bootstrap-switch {
    border-color: var(--ox-n-300);
    border-radius: 999px;
}
#main-body.ox-wh .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
#main-body.ox-wh .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background: var(--ox-brand);
    color: #fff;
}

/* --- Tables and lists --- */
#main-body.ox-wh .table-container {
    padding: 0;
    border: 0;
    background: none;
}
#main-body.ox-wh .dataTables_wrapper .listtable {
    position: relative;
    margin-bottom: 14px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
}
#main-body.ox-wh .dataTables_wrapper .dataTables_info {
    float: none;
    padding: 22px 22px 20px !important;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ox-n-500);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}
#main-body.ox-wh .dataTables_wrapper .dataTables_filter {
    position: absolute;
    top: 10px;
    right: 16px;
    float: none;
    margin: 0;
    padding: 0;
}
#main-body.ox-wh .dataTables_wrapper .dataTables_filter label {
    margin: 0;
}
#main-body.ox-wh .dataTables_wrapper .dataTables_filter input {
    width: 240px;
    height: 40px;
    margin: 0;
    padding-left: 38px;
    border-radius: 10px;
    background-color: var(--ox-n-50);
    border-color: var(--ox-n-200);
}
#main-body.ox-wh .table {
    width: 100% !important;
    margin: 0;
    border: 0;
    color: var(--ox-n-700);
    font-size: 15px;
}
#main-body.ox-wh .table thead th {
    padding: 11px 16px;
    border: 0;
    border-top: 1px solid var(--ox-n-100);
    border-bottom: 1px solid var(--ox-n-100);
    background-color: var(--ox-n-50);
    color: var(--ox-n-500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
#main-body.ox-wh .table tbody td {
    padding: 16px;
    border: 0;
    border-top: 1px solid var(--ox-n-100);
    background: none;
    text-align: left;
    vertical-align: middle;
}
#main-body.ox-wh .table tbody tr:first-child td {
    border-top: 0;
}
#main-body.ox-wh .table-list tbody tr:hover td {
    background: var(--ox-n-50);
    cursor: pointer;
}
#main-body.ox-wh .table-striped tbody tr:nth-of-type(odd) {
    background: none;
}
#main-body.ox-wh .table td strong,
#main-body.ox-wh .table td b {
    color: var(--ox-n-900);
    font-weight: 600;
}
#main-body.ox-wh .table td.dataTables_empty {
    padding: 44px 16px;
    color: var(--ox-n-500);
    text-align: center;
    cursor: default;
}
#main-body.ox-wh .table-list tbody tr:hover td.dataTables_empty {
    background: none;
}
#main-body.ox-wh .dataTables_wrapper .dataTables_length {
    float: left;
    margin: 0;
    padding: 0;
    color: var(--ox-n-500);
    font-size: 14px;
}
#main-body.ox-wh .dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ox-n-500);
    font-weight: 500;
}
#main-body.ox-wh .dataTables_wrapper .dataTables_length select {
    width: 76px;
    height: 38px;
}
#main-body.ox-wh .dataTables_wrapper .dataTables_paginate {
    float: right;
    margin: 0;
    padding: 0;
}
#main-body.ox-wh .pagination {
    gap: 4px;
    margin: 0;
}
#main-body.ox-wh .pagination .page-link {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--ox-n-200);
    border-radius: 10px !important;
    background: #fff;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
}
#main-body.ox-wh .pagination .page-item.active .page-link {
    border-color: var(--ox-navy);
    background: var(--ox-navy);
    color: #fff;
}
#main-body.ox-wh .pagination .page-item.disabled .page-link {
    background: none;
    color: var(--ox-n-400);
}
#main-body.ox-wh .list-group-item {
    border-color: var(--ox-n-100);
    color: var(--ox-n-700);
}

/* --- Status labels --- */
#main-body.ox-wh .label,
#main-body.ox-wh span.status {
    display: inline-block;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
}
#main-body.ox-wh .status-active,
#main-body.ox-wh .status-paid,
#main-body.ox-wh .status-completed,
#main-body.ox-wh .status-accepted,
#main-body.ox-wh .status-answered,
#main-body.ox-wh .status-delivered,
#main-body.ox-wh .label-success {
    background: #dcfae6 !important;
    color: #067647 !important;
}
#main-body.ox-wh .status-pending,
#main-body.ox-wh .status-pending-transfer,
#main-body.ox-wh .status-pending-registration,
#main-body.ox-wh .status-suspended,
#main-body.ox-wh .status-on-hold,
#main-body.ox-wh .status-in-progress,
#main-body.ox-wh .status-grace,
#main-body.ox-wh .status-draft,
#main-body.ox-wh .status-payment-pending,
#main-body.ox-wh .label-warning {
    background: #fef0c7 !important;
    color: #b54708 !important;
}
#main-body.ox-wh .status-unpaid,
#main-body.ox-wh .status-overdue,
#main-body.ox-wh .status-fraud,
#main-body.ox-wh .status-redemption,
#main-body.ox-wh .status-collections,
#main-body.ox-wh .status-lost,
#main-body.ox-wh .status-dead,
#main-body.ox-wh .label-danger {
    background: #fee4e2 !important;
    color: #b42318 !important;
}
#main-body.ox-wh .status-open,
#main-body.ox-wh .status-customer-reply,
#main-body.ox-wh .status-refunded,
#main-body.ox-wh .label-info,
#main-body.ox-wh .label-primary {
    background: var(--ox-brand-50) !important;
    color: var(--ox-brand-700) !important;
}
#main-body.ox-wh .status-terminated,
#main-body.ox-wh .status-cancelled,
#main-body.ox-wh .status-expired,
#main-body.ox-wh .status-closed,
#main-body.ox-wh .status-transferred-away,
#main-body.ox-wh .label-default {
    background: var(--ox-n-100) !important;
    color: var(--ox-n-700) !important;
}
#main-body.ox-wh .badge {
    border-radius: 999px;
    font-weight: 600;
}

/* --- Alerts --- */
#main-body.ox-wh .alert {
    margin-bottom: 16px;
    padding: 14px 18px;
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    background: var(--ox-n-50);
    color: var(--ox-n-700);
    font-size: 15px;
    line-height: 1.55;
}
#main-body.ox-wh .alert-info {
    border-color: #b2ccff;
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
}
#main-body.ox-wh .alert-success {
    border-color: #abefc6;
    background: #ecfdf3;
    color: #067647;
}
#main-body.ox-wh .alert-warning {
    border-color: #fedf89;
    background: #fffaeb;
    color: #b54708;
}
#main-body.ox-wh .alert-danger {
    border-color: #fecdca;
    background: #fef3f2;
    color: #b42318;
}
#main-body.ox-wh .alert a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* --- Tabs --- */
#main-body.ox-wh .nav-tabs {
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--ox-n-200);
}
#main-body.ox-wh .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--ox-n-500);
    font-size: 15px;
    font-weight: 600;
}
#main-body.ox-wh .nav-tabs .nav-link:hover {
    color: var(--ox-n-900);
}
#main-body.ox-wh .nav-tabs .nav-link.active {
    border-bottom-color: var(--ox-brand);
    color: var(--ox-brand);
}

/* --- Menus and dialogs --- */
#main-body.ox-wh .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .08);
}
#main-body.ox-wh .dropdown-item {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 500;
}
#main-body.ox-wh .dropdown-item:hover {
    background: var(--ox-n-50);
    color: var(--ox-n-900);
}
body:has(#main-body.ox-wh) .modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .16);
}
body:has(#main-body.ox-wh) .modal .modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--ox-n-100);
    background: #fff !important;
    color: var(--ox-n-900) !important;
}
body:has(#main-body.ox-wh) .modal .modal-title {
    color: var(--ox-n-900);
    font-size: 18px;
    font-weight: 700;
}
body:has(#main-body.ox-wh) .modal .modal-header .close {
    color: var(--ox-n-500);
    opacity: 1;
    text-shadow: none;
}
body:has(#main-body.ox-wh) .modal .modal-body {
    padding: 22px;
    color: var(--ox-n-700);
}
body:has(#main-body.ox-wh) .modal .modal-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--ox-n-100);
    background: var(--ox-n-50);
}
#main-body.ox-wh .progress {
    height: 8px;
    border-radius: 999px;
    background: var(--ox-n-100);
}
#main-body.ox-wh hr {
    border-color: var(--ox-n-100);
}

@media (max-width: 767px) {
    #main-body.ox-wh .primary-content .card-body,
    #main-body.ox-wh .primary-content .card-body.extra-padding {
        padding: 18px;
    }
    #main-body.ox-wh .dataTables_wrapper .dataTables_filter {
        position: relative;
        top: auto;
        right: auto;
        margin: 14px 14px 0;
    }
    /* Wide tables scroll sideways inside their card */
    #main-body.ox-wh .dataTables_wrapper .listtable > .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    #main-body.ox-wh .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }
    #main-body.ox-wh .dataTables_wrapper .dataTables_filter label {
        display: block;
    }
    #main-body.ox-wh .dataTables_wrapper .dataTables_info {
        padding: 12px 16px !important;
    }
    #main-body.ox-wh .dataTables_wrapper .dataTables_length,
    #main-body.ox-wh .dataTables_wrapper .dataTables_paginate {
        float: none;
    }
    #main-body.ox-wh .dataTables_wrapper .dataTables_paginate {
        margin-bottom: 12px;
    }
    #main-body.ox-wh .pagination {
        flex-wrap: wrap;
    }
}

/* --- Client area: page-specific pieces --- */
/* Dropdowns built as select.form-control get the same arrow as the others */
#main-body.ox-wh select.form-control:not([multiple]):not([size]),
body:has(#main-body.ox-wh) .modal select.form-control:not([multiple]):not([size]) {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}
/* File upload row */
#main-body.ox-wh .custom-file,
#main-body.ox-wh .custom-file-input {
    height: 46px;
}
#main-body.ox-wh .custom-file-label {
    height: 46px;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid var(--ox-n-300);
    border-radius: 10px;
    color: var(--ox-n-500);
    font-size: 15px;
    font-weight: 500;
    line-height: 44px;
}
#main-body.ox-wh .custom-file-label::after {
    height: 44px;
    padding: 0 16px;
    border-left: 1px solid var(--ox-n-300);
    border-radius: 0 9px 9px 0;
    background: var(--ox-n-50);
    color: var(--ox-n-700);
    font-weight: 600;
    line-height: 44px;
}
#main-body.ox-wh .input-group > .custom-file:not(:last-child) .custom-file-label,
#main-body.ox-wh .input-group > .custom-file:not(:last-child) .custom-file-label::after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* Message editor (tickets) */
#main-body.ox-wh .md-editor {
    overflow: hidden;
    border: 1px solid var(--ox-n-300);
    border-radius: 12px;
}
#main-body.ox-wh .md-editor > .md-header {
    padding: 8px;
    border-bottom: 1px solid var(--ox-n-200);
    background: var(--ox-n-50) !important;
}
#main-body.ox-wh .md-editor .btn {
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 13px;
}
#main-body.ox-wh .md-editor .btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#main-body.ox-wh .md-editor .btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#main-body.ox-wh .md-editor > textarea,
#main-body.ox-wh .md-editor .md-input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
#main-body.ox-wh .md-editor > .md-footer {
    padding: 6px 12px;
    border-top: 1px solid var(--ox-n-200);
    background: var(--ox-n-50);
    color: var(--ox-n-500);
    font-size: 12px;
}
/* Labels that carry their own colour (ticket statuses set in the admin area) keep it, with white text */
#main-body.ox-wh .label[style*="background"] {
    color: #fff;
}
/* Ticket conversation */
#main-body.ox-wh .ticket-reply {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 14px;
    background: #fff;
}
#main-body.ox-wh .ticket-reply .posted-by {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--ox-n-100);
    border-radius: 0;
    background: var(--ox-n-50);
    color: var(--ox-n-500);
    font-size: 14px;
}
#main-body.ox-wh .ticket-reply.staff .posted-by {
    background: var(--ox-brand-50);
}
#main-body.ox-wh .ticket-reply .posted-by-name {
    color: var(--ox-n-900);
    font-weight: 700;
}
#main-body.ox-wh .ticket-reply .message {
    padding: 16px;
    color: var(--ox-n-700);
}
/* Field labels written as small headings (domain overview, service details) */
#main-body.ox-wh .card-body .row > [class*="col-"] > h5 {
    margin: 0 0 2px;
    color: var(--ox-n-500);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
#main-body.ox-wh .card-body .row > [class*="col-"] > h5 + * {
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 500;
}
/* Service details */
#main-body.ox-wh .product-details .product-status {
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
}
#main-body.ox-wh .product-details .product-icon {
    padding: 28px 16px 22px;
    border-radius: 0;
    background: var(--ox-n-50);
    font-size: 32px;
    line-height: 1.2;
}
#main-body.ox-wh .product-details .product-icon .fa-circle {
    color: var(--ox-brand);
}
#main-body.ox-wh .product-details .product-icon h3 {
    margin: 16px 0 2px;
    font-size: 20px;
    line-height: 1.3;
}
#main-body.ox-wh .product-details .product-icon h4 {
    margin: 0;
    color: var(--ox-n-500);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}
#main-body.ox-wh .product-status-text {
    padding: 9px;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
}
#main-body.ox-wh .product-status-active .product-status-text {
    background: #dcfae6;
    color: #067647;
}
#main-body.ox-wh .product-status-pending .product-status-text,
#main-body.ox-wh .product-status-suspended .product-status-text {
    background: #fef0c7;
    color: #b54708;
}
#main-body.ox-wh .product-status-fraud .product-status-text {
    background: #fee4e2;
    color: #b42318;
}
#main-body.ox-wh .product-actions-wrapper .btn {
    margin-bottom: 8px;
}
#main-body.ox-wh .product-actions-wrapper .btn-danger {
    border-color: #fecdca;
    background: #fff;
    color: #b42318;
}
#main-body.ox-wh .product-actions-wrapper .btn-danger:hover {
    background: #fef3f2;
    color: #b42318;
}
#main-body.ox-wh .product-details .col-md-6.text-center h4 {
    margin: 14px 0 2px;
    color: var(--ox-n-500);
    font-size: 13px;
    font-weight: 600;
}
#main-body.ox-wh .product-details .col-md-6.text-center h4:first-child {
    margin-top: 4px;
}
#main-body.ox-wh .product-details-tab-container {
    padding: 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
}
#main-body.ox-wh .responsive-tabs-sm-connector {
    display: none;
}
/* Announcements and knowledgebase */
#main-body.ox-wh .announcements .announcement {
    margin-bottom: 16px;
    padding: 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
}
#main-body.ox-wh .announcements .announcement h1 {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 700;
}
#main-body.ox-wh .announcements .announcement h1 a {
    color: var(--ox-n-900);
}
#main-body.ox-wh .announcements .announcement article {
    padding: 14px 16px;
    border-left: 3px solid var(--ox-n-200);
    border-radius: 0 10px 10px 0;
    background: var(--ox-n-50);
}
#main-body.ox-wh .kb-search .form-control {
    height: 52px;
}
#main-body.ox-wh .kb-search .btn {
    padding: 0 22px;
}
/* Two-factor sign-in button keeps the plain look */
#main-body.ox-wh .btn.btn-success.open-modal.twofa-config-link.enable {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
    color: #fff;
}
/* Plain tables that are not inside a list card (users, email history) */
#main-body.ox-wh .primary-content > .table,
#main-body.ox-wh .primary-content .table-responsive {
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
}
@media (max-width: 767px) {
    #main-body.ox-wh .primary-content .card-body > .table,
    #main-body.ox-wh .primary-content > .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* Buttons WHMCS marks as hidden stay hidden (the theme's Bootstrap .btn rule was un-hiding them);
   scripts that reveal them with an inline style still win */
.btn.w-hidden {
    display: none;
}
#main-body.ox-wh .form-check-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
}
#main-body.ox-wh .form-check-inline label,
#main-body.ox-wh label.form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-weight: 500;
}
#main-body.ox-wh .form-check-inline input[type="radio"],
#main-body.ox-wh .form-check-inline input[type="checkbox"] {
    margin: 0 8px 0 0;
}
#main-body.ox-wh .badge-info,
#main-body.ox-wh .badge-primary {
    padding: 4px 10px;
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
    font-size: 12px;
}
@media (max-width: 767.98px) {
    #main-body.ox-wh .dataTables_wrapper .dataTables_filter {
        width: auto;
    }
    /* Tabs stay a single scrolling row with an underline, not a stacked box */
    #main-body.ox-wh .nav-tabs.responsive-tabs-sm {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        border: 0;
        border-bottom: 1px solid var(--ox-n-200);
        border-radius: 0;
        background: none;
        scrollbar-width: none;
    }
    #main-body.ox-wh .nav-tabs.responsive-tabs-sm .nav-item {
        width: auto;
        margin: 0;
        border-bottom: 0 !important;
        white-space: nowrap;
    }
    #main-body.ox-wh .nav-tabs.responsive-tabs-sm .nav-item a {
        padding: 10px 14px !important;
        border-bottom: 2px solid transparent !important;
        background: none !important;
    }
    #main-body.ox-wh .nav-tabs.responsive-tabs-sm .nav-item a.active {
        border-bottom-color: var(--ox-brand) !important;
    }
    /* Label / value rows read as one left-aligned column */
    #main-body.ox-wh .product-details-tab-container .row > .text-right,
    #main-body.ox-wh .product-details-tab-container .row > .text-left {
        text-align: left !important;
    }
    #main-body.ox-wh .product-details-tab-container .row > .text-right {
        color: var(--ox-n-500);
        font-size: 13px;
    }
    #main-body.ox-wh .product-details-tab-container .row > .text-left {
        margin-bottom: 10px;
    }
    #main-body.ox-wh .product-details-tab-container {
        padding: 18px;
        text-align: left;
    }
}

/* Article text (knowledgebase, announcements): lists keep their bullets */
#main-body.ox-wh .card-body ul:not([class]),
#main-body.ox-wh .announcement ul:not([class]) {
    margin: 0 0 14px;
    padding-left: 22px;
    list-style: disc;
}
#main-body.ox-wh .card-body ol:not([class]),
#main-body.ox-wh .announcement ol:not([class]) {
    margin: 0 0 14px;
    padding-left: 22px;
    list-style: decimal;
}
#main-body.ox-wh .card-body h1 {
    margin-bottom: 6px;
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}
/* Under the site header: light page, room above and below */
#main-body.ox-wh.is-guest {
    padding: 40px 0 80px;
    background: var(--ox-n-50);
}
.ox-pagehead-crumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
}
.ox-pagehead-crumbs li + li::before {
    margin-right: 8px;
    content: "/";
    color: rgba(255, 255, 255, .35);
}
.ox-pagehead-crumbs a {
    color: rgba(255, 255, 255, .8);
}
.ox-pagehead-crumbs a:hover {
    color: #fff;
}
@media (max-width: 767px) {
    #main-body.ox-wh.is-guest {
        padding: 24px 0 56px;
    }
}
/* Error pages bring their own container; keep its row inside the page */
#main-body.ox-wh > div:not(.container) > .row {
    margin-right: 0;
    margin-left: 0;
}
#main-body.ox-wh .tld-filters .badge {
    margin: 0 4px 6px 0;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--ox-n-200);
    color: var(--ox-n-700);
    font-size: 13px;
}
#main-body.ox-wh .tld-filters .badge.badge-success {
    border-color: var(--ox-brand);
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
}

/* ==========================================================================
   Order form: the remaining stock pages (product add-ons, domain and service renewals,
   and any other standard_cart page without its own template in hostavik_cart).
   They are recognised by #order-standard_cart having no class of its own. Light touch:
   no categories column, the order pages' light background, cards and buttons to match.
   ========================================================================== */
body:has(#order-standard_cart:not([class])) section#main-body {
    padding: 40px 0 72px;
    background: var(--ox-n-50);
}
#order-standard_cart:not([class]) {
    max-width: 1040px;
    margin-right: auto;
    margin-left: auto;
}
#order-standard_cart:not([class]) .cart-sidebar,
#order-standard_cart:not([class]) .sidebar-collapsed {
    display: none;
}
#order-standard_cart:not([class]) .cart-body {
    float: none;
    width: 100%;
}
#order-standard_cart:not([class]) .header-lined {
    margin: 0 0 20px;
    border: 0;
}
#order-standard_cart:not([class]) .header-lined h1 {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--ox-n-900);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
}
#order-standard_cart:not([class]) .domain-renewal,
#order-standard_cart:not([class]) .service-renewal,
#order-standard_cart:not([class]) .order-summary,
#order-standard_cart:not([class]) .panel-addon,
#order-standard_cart:not([class]) .panel.card {
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
}
#order-standard_cart:not([class]) .domain-renewal,
#order-standard_cart:not([class]) .service-renewal {
    margin-bottom: 12px;
    padding: 20px;
}
#order-standard_cart:not([class]) .domain-renewal h3,
#order-standard_cart:not([class]) .service-renewal h3 {
    color: var(--ox-n-900);
    font-size: 18px;
    font-weight: 700;
}
#order-standard_cart:not([class]) .order-summary {
    border-bottom-width: 1px;
}
#order-standard_cart:not([class]) .order-summary h2 {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ox-n-100);
    background: #fff;
    color: var(--ox-n-900);
    font-size: 18px;
    font-weight: 700;
    text-align: left;
}
#order-standard_cart:not([class]) .order-summary .summary-container {
    padding: 16px 20px 20px;
    border-radius: 0;
    background: #fff;
}
#order-standard_cart:not([class]) .order-summary .total-due-today .amt {
    color: var(--ox-n-900);
    font-size: 28px;
    font-weight: 800;
}
#order-standard_cart:not([class]) .form-control,
#order-standard_cart:not([class]) select.form-control {
    height: 46px;
    border: 1px solid var(--ox-n-300);
    border-radius: 10px;
    box-shadow: none;
    color: var(--ox-n-900);
    font-size: 15px;
}
#order-standard_cart:not([class]) .btn {
    padding: 10px 18px;
    border-radius: 10px;
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
}
#order-standard_cart:not([class]) .btn-primary,
#order-standard_cart:not([class]) .btn-success {
    border-color: var(--ox-brand) !important;
    background: var(--ox-brand) !important;
    color: #fff !important;
}
#order-standard_cart:not([class]) .btn-primary:hover,
#order-standard_cart:not([class]) .btn-success:hover {
    border-color: var(--ox-brand-hover) !important;
    background: var(--ox-brand-hover) !important;
}
#order-standard_cart:not([class]) .btn-lg {
    padding: 13px 24px;
    font-size: 16px;
}
#order-standard_cart:not([class]) .alert {
    border-radius: 12px;
}
#order-standard_cart:not([class]) .label,
#order-standard_cart:not([class]) .domain-renewal .label {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
@media (max-width: 767px) {
    #order-standard_cart:not([class]) > .row,
    #order-standard_cart:not([class]) .cart-body > .row {
        margin-right: 0;
        margin-left: 0;
    }
    #order-standard_cart:not([class]) .secondary-cart-body,
    #order-standard_cart:not([class]) .secondary-cart-sidebar {
        float: none;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
    #order-standard_cart:not([class]) .header-lined h1 {
        font-size: 26px;
    }
}
#order-standard_cart:not([class]) .domain-renewals,
#order-standard_cart:not([class]) .service-renewals {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
body:has(#order-standard_cart:not([class])) section#main-body {
    min-height: calc(100vh - 160px);
}

/* ==========================================================================
   Product pages: shared pieces added with the last clip-art sections
   ========================================================================== */
/* Icon tile in the other feature-card types (main.css .features-3, .free-ad-ons, .features-5) */
.features-3 .icon.ox-icon-tile,
.free-ad-ons .icon.ox-icon-tile,
.features-5 .icon.ox-icon-tile {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 28px;
}
.features-3 .icon.ox-icon-tile,
.free-ad-ons .icon.ox-icon-tile {
    margin-bottom: 18px;
}
.free-ad-ons .icon.ox-icon-tile {
    margin-right: auto;
    margin-left: auto;
}
.features-5.white .icon.ox-icon-tile {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
/* A photo or visual column that also shows on phones: space when the columns stack */
@media (max-width: 991px) {
    .ox-media-col {
        margin-top: 32px;
    }
    .row > .ox-media-col:first-child {
        margin-top: 0;
        margin-bottom: 32px;
    }
}
.ox-media.is-fill {
    height: 100%;
    min-height: 320px;
    max-width: none;
    aspect-ratio: auto;
}
.ox-figure.is-wide img {
    max-width: min(100%, 500px);
}
/* Interface visual drawn in CSS (sitelock.tpl, codeguard.tpl): a small card on a tinted panel */
.ox-vis {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 540px;
    min-height: 380px;
    margin: 0 auto;
    padding: 32px 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--ox-brand-50), #fff 70%);
    border: 1px solid var(--ox-n-200);
}
.sectionbg4 .ox-vis {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .06);
}
.ox-vis-card {
    width: 100%;
    max-width: 360px;
    padding: 18px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
    color: var(--ox-n-900);
    text-align: left;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
}
.ox-vis-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ox-n-100);
}
.ox-vis-head b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}
.ox-vis-head small {
    display: block;
    color: var(--ox-n-500);
    font-size: 13px;
}
.ox-vis-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 20px;
}
.ox-vis-pill {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.ox-vis-pill.is-ok {
    background: #dcfae6;
    color: #067647;
}
.ox-vis-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 500;
}
.ox-vis-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.ox-vis-row > i {
    color: var(--ox-n-400);
    font-size: 18px;
}
.ox-vis-row > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--ox-n-500);
    font-size: 13px;
    white-space: nowrap;
}
.ox-vis-row > span i {
    color: #079455;
    font-size: 16px;
}
.ox-vis-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px;
    border-radius: 10px;
    background: var(--ox-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
@media (max-width: 575px) {
    .ox-vis {
        min-height: 0;
        padding: 20px 14px;
    }
}
/* One-click apps (shared-hosting.tpl, reseller-hosting.tpl) */
.ox-apps {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-apps li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 16px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
}
.ox-apps img {
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
}
@media (max-width: 1199px) {
    .ox-apps {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 575px) {
    .ox-apps {
        grid-template-columns: repeat(2, 1fr);
    }
    .ox-apps li {
        height: 80px;
    }
    .ox-apps li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}
/* Feature cards of the older types get the same card look as .features-4 */
.features-3,
.free-ad-ons {
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: #fff;
}

/* ==========================================================================
   Domain price table (domain-promos.tpl): search and filters above a card with one row
   per extension. On phones each row becomes a small card with labelled prices.
   ========================================================================== */
.ox-dprice {
    background: #fff;
}
.ox-dprice-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: end;
    max-width: 1040px;
    margin: 0 auto 40px;
}
.ox-dprice-field {
    position: relative;
    display: block;
    margin: 0;
}
.ox-dprice-field > span {
    display: block;
    margin: 0 0 8px 2px;
    color: var(--ox-n-900);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}
.ox-dprice-field input,
.ox-dprice-field select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ox-n-300);
    border-radius: 12px;
    background-color: #fff;
    box-shadow: none;
    color: var(--ox-n-900);
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
.ox-dprice-field.is-search > i {
    position: absolute;
    bottom: 13px;
    left: 14px;
    z-index: 2;
    color: var(--ox-n-500);
    font-size: 20px;
    line-height: 22px;
    pointer-events: none;
}
.ox-dprice-field.is-search input {
    padding-left: 44px;
}
.ox-dprice-field input::placeholder {
    color: var(--ox-n-500);
}
.ox-dprice-field input::-webkit-search-cancel-button {
    cursor: pointer;
}
.ox-dprice-field select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23101828' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.ox-dprice-field input:focus,
.ox-dprice-field select:focus {
    border-color: var(--ox-brand);
    box-shadow: 0 0 0 2px rgba(26, 108, 245, .1);
    outline: 0;
}
.ox-dprice-card {
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 20px;
    background: #fff;
}
.ox-dprice-table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: none;
}
.ox-dprice-table[hidden],
.ox-dprice-table tr[hidden],
.ox-dprice-empty[hidden],
.ox-dprice-more[hidden] {
    display: none !important;
}
.ox-dprice-table th,
.ox-dprice-table td {
    padding: 22px 20px;
    border: 0;
    background: none;
    text-align: left;
    vertical-align: middle;
}
.ox-dprice-table th:first-child,
.ox-dprice-table td:first-child {
    padding-left: 40px;
}
.ox-dprice-table th:last-child,
.ox-dprice-table td:last-child {
    padding-right: 40px;
}
.ox-dprice-table thead th {
    padding-top: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ox-n-200);
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}
.ox-dprice-table tbody td {
    color: var(--ox-n-900);
    font-size: 16px;
    line-height: 1.4;
}
.ox-dprice-table tbody tr.is-alt td {
    background: var(--ox-n-50);
}
.ox-dprice-table td small {
    display: block;
    margin-top: 4px;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 400;
}
.ox-dprice-ext a {
    color: var(--ox-brand);
    font-size: 15px;
    font-weight: 700;
}
.ox-dprice-ext a:hover {
    color: var(--ox-brand-hover);
    text-decoration: underline;
}
.ox-dprice-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 1px;
}
.ox-dprice-table td span {
    color: var(--ox-n-700);
    font-size: 14px;
}
.ox-dprice-first s {
    margin-right: 6px;
    color: var(--ox-n-500);
    font-size: 14px;
}
.ox-dprice-first b {
    font-size: 17px;
    font-weight: 800;
}
.ox-dprice-table td .ox-dprice-none {
    color: var(--ox-n-400);
    font-size: 16px;
}
.ox-dprice-empty {
    margin: 0;
    padding: 48px 24px;
    color: var(--ox-n-500);
    font-size: 15px;
    text-align: center;
}
.ox-dprice-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 20px;
    border: 0;
    border-top: 1px solid var(--ox-n-100);
    background: none;
    color: var(--ox-brand);
    font-size: 15px;
    font-weight: 700;
}
.ox-dprice-more:hover {
    background: var(--ox-n-50);
    color: var(--ox-brand-hover);
}
.ox-dprice-more i {
    font-size: 20px;
}
@media (max-width: 991px) {
    .ox-dprice-table th,
    .ox-dprice-table td {
        padding: 18px 12px;
    }
    .ox-dprice-table th:first-child,
    .ox-dprice-table td:first-child {
        padding-left: 20px;
    }
    .ox-dprice-table th:last-child,
    .ox-dprice-table td:last-child {
        padding-right: 20px;
    }
}
@media (max-width: 767px) {
    .ox-dprice-filters {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 24px;
    }
    .ox-dprice-field.is-search {
        grid-column: 1 / -1;
    }
    /* Each row becomes a card: the extension on top, then the type and the three prices with labels */
    .ox-dprice-table,
    .ox-dprice-table tbody {
        display: block;
    }
    .ox-dprice-table thead {
        display: none;
    }
    .ox-dprice-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 12px;
        padding: 18px 18px 20px;
        border-top: 1px solid var(--ox-n-100);
    }
    .ox-dprice-table tbody tr:first-child {
        border-top: 0;
    }
    .ox-dprice-table tbody tr.is-alt {
        background: var(--ox-n-50);
    }
    .ox-dprice-table tbody tr.is-alt td {
        background: none;
    }
    .ox-dprice-table tbody td,
    .ox-dprice-table td:first-child,
    .ox-dprice-table td:last-child {
        display: block;
        padding: 0;
        font-size: 15px;
    }
    .ox-dprice-table td.ox-dprice-ext {
        grid-column: 1 / -1;
    }
    .ox-dprice-table td[data-label]::before {
        display: block;
        margin-bottom: 3px;
        content: attr(data-label);
        color: var(--ox-n-500);
        font-size: 12px;
        font-weight: 600;
    }
    .ox-dprice-table td[data-label="Type"] small {
        display: inline;
        margin: 0 0 0 6px;
    }
}
/* Fixed column widths, so the columns stay put while the table is filtered */
@media (min-width: 768px) {
    .ox-dprice-table {
        table-layout: fixed;
    }
    .ox-dprice-table th:nth-child(1) { width: 38%; }
    .ox-dprice-table th:nth-child(2) { width: 14%; }
    .ox-dprice-table th:nth-child(3) { width: 21%; }
    .ox-dprice-table th:nth-child(4) { width: 14%; }
    .ox-dprice-table th:nth-child(5) { width: 13%; }
}

/* ==========================================================================
   Order form: register a domain (orderforms/hostavik_cart/domainregister.tpl)
   The search is WHMCS's Nexus app; its own look is set in
   orderforms/hostavik_cart/css/hostavik-domain-app.css. This is only the page around it.
   ========================================================================== */
body:has(.ox-dreg) section#main-body {
    padding: 40px 0 72px;
    background: var(--ox-n-50);
}
#order-standard_cart.ox-dreg {
    max-width: 1040px;
    min-height: 60vh;
    margin-right: auto;
    margin-left: auto;
}
/* Shown once its stylesheet has loaded, so the unstyled app never flashes */
.ox-dreg #nexus-root:not(.is-styled) {
    visibility: hidden;
}
@media (max-width: 575px) {
    body:has(.ox-dreg) section#main-body {
        padding-top: 24px;
    }
}

/* ==========================================================================
   Add-on product pages (WHMCS MarketConnect store pages: SSL Certificates, SiteLock,
   CodeGuard, 360 Monitoring, NordVPN, E-mail Services, Weebly, Professional Email, SocialBee).
   The pages themselves are WHMCS's own templates and styles (templates/nexus/store/<service>/
   index.tpl, templates/nexus/css/store.css); this section makes them sit correctly under the
   site header and title band and brings their type, colours and buttons in line with the site.
   ========================================================================== */

/* --- Fit: things on these pages that clash with the site's layout --- */

/* Blocks named "header" inside a page (the Professional Email banner, the 360 Monitoring price
   table rows) were caught by the theme's rule for the site header (main.css: .header, absolute
   at the top of the window) */
.landing-page .header {
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    width: auto;
}
.landing-page.threesixtymonitoring .header {
    padding: 0;
}
/* SocialBee's template makes the page body its own scrolling box (overflow-x on html and body),
   which breaks the window's scroll position and the sticky site header */
html:has(.social-bee),
body:has(.social-bee) {
    overflow-x: visible;
}
body:has(.social-bee) {
    overflow-x: clip;
}
@media (max-width: 767px) {
    /* Website Builder: the row of billing periods is wider than a phone; let it wrap */
    #main-body .landing-page.weebly .pricing .btn-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    #main-body .landing-page.weebly .pricing .btn-group > .btn {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 8px !important;
    }
    /* Professional Email: logo and comparison table are wider than a phone */
    #main-body .landing-page.ox .header .logo-img {
        max-width: 100%;
        height: auto;
    }
    #main-body .landing-page.ox .pricing [class*="col-"] {
        overflow-x: auto;
    }
}

/* --- Look: shared pieces. "#main-body" in the selectors: store.css loads after this file --- */

/* Full-width white pages, straight under the title band */
#main-body.ox-wh:has(.landing-page),
#main-body.ox-wh:has(.social-bee) {
    padding: 0;
    background: #fff;
}
#main-body:has(.landing-page) > div > .row,
#main-body:has(.social-bee) > div > .row {
    margin-right: 0;
    margin-left: 0;
}
#main-body:has(.landing-page) .primary-content,
#main-body:has(.social-bee) .primary-content {
    padding-right: 0;
    padding-left: 0;
}
/* Type: the site's font and weights instead of the thin headings */
#main-body .landing-page {
    color: var(--ox-n-700);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}
#main-body .landing-page :is(h1, h2, h3, h4, h5, h6, p, li, td, th, a, label, button, input, select) {
    font-family: inherit;
}
#main-body .landing-page :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
    letter-spacing: -.01em;
}
#main-body .landing-page :is(.hero, .content-block, .feature) h2 {
    font-size: 32px;
    line-height: 1.25;
}
#main-body .landing-page :is(.hero, .content-block) h3 {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
}
#main-body .landing-page :is(.content-block, .feature) :is(p, li) {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
}
/* Banner at the top of a page: logo, headline, one line under it */
#main-body .landing-page .hero {
    padding: 56px 0 44px;
    color: var(--ox-n-700);
}
#main-body .landing-page .hero .logo-container img {
    max-height: 72px;
    padding-bottom: 0;
    margin-bottom: 22px;
}
#main-body .landing-page .hero h2 {
    max-width: 820px;
    margin: 0 auto 12px;
    color: var(--ox-n-900);
    font-size: 38px;
    line-height: 1.2;
}
#main-body .landing-page .hero h3 {
    max-width: 760px;
    margin: 0 auto;
    color: var(--ox-n-500);
    font-weight: 400;
}
/* The page's own menu (Overview, Pricing, FAQ...): a quiet row of links */
#main-body .landing-page .navbar {
    border-top: 1px solid var(--ox-n-200);
    border-bottom: 1px solid var(--ox-n-200);
    background: #fff !important;
}
#main-body .landing-page .navbar .navbar-brand {
    display: none;
}
#main-body .landing-page .navbar .navbar-nav {
    justify-content: center;
    width: auto;
    gap: 4px;
}
#main-body .landing-page .navbar .navbar-nav > li {
    width: auto;
}
#main-body .landing-page .navbar .navbar-nav > li > a {
    padding: 14px 18px;
    border: 0;
    color: var(--ox-n-700);
    font-size: 15px;
    font-weight: 600;
}
#main-body .landing-page .navbar .navbar-nav > li > a:hover {
    color: var(--ox-brand);
}
/* Sections */
#main-body .landing-page .content-block {
    margin: 0;
    padding: 64px 0;
}
#main-body .landing-page .content-block h2 {
    color: var(--ox-n-900);
}
#main-body .landing-page :is(.light-grey-bg, .features, .faq, .faqs) {
    background-color: var(--ox-n-50);
}
/* Buttons: the site's blue button; grey ones become outline buttons */
#main-body .landing-page .btn {
    border-radius: 10px;
    box-shadow: none;
    font-weight: 700;
    text-shadow: none;
    transition: background-color .2s, border-color .2s, color .2s;
}
#main-body .landing-page :is(.btn-primary, .btn-success, .btn-buy, .btn-order-now, .btn-signup, .order-btn, .btn-pricing-scroll, .btn-get-nord, .btn-get-annually, .plan .btn, .item .btn) {
    border: 1px solid var(--ox-brand);
    background: var(--ox-brand) !important;
    color: #fff !important;
}
#main-body .landing-page :is(.btn-primary, .btn-success, .btn-buy, .btn-order-now, .btn-signup, .order-btn, .btn-pricing-scroll, .btn-get-nord, .btn-get-annually, .plan .btn, .item .btn):hover {
    border-color: var(--ox-brand-hover);
    background: var(--ox-brand-hover) !important;
}
#main-body .landing-page :is(.btn-default, .btn-learn-more, .btn-get-monthly) {
    border: 1px solid var(--ox-n-300);
    background: #fff !important;
    color: var(--ox-n-900) !important;
}
#main-body .landing-page :is(.btn-default, .btn-learn-more, .btn-get-monthly):hover {
    border-color: var(--ox-brand);
    color: var(--ox-brand) !important;
}
/* Dark bands: the site's navy, white text */
#main-body .landing-page.ssl :is(.validation-levels, .competitive-upgrade-promo, .certificate-options),
#main-body .landing-page.sitelock :is(.plans, .emergency),
#main-body .landing-page.mail-services :is(.product-options, .get-started),
#main-body .landing-page.ox .header {
    background-color: var(--ox-navy);
}
#main-body .landing-page.ssl :is(.validation-levels, .competitive-upgrade-promo) > .container > :is(h2, h3, h4, p),
#main-body .landing-page.sitelock :is(.plans, .emergency) > .container > :is(h2, h3, p),
#main-body .landing-page.mail-services .get-started :is(h2, h3, h4, p, label, span) {
    color: #fff;
}
/* A Bootstrap accordion that is also the page container: the theme's own ".accordion" rule
   (its FAQ lists, main.css) took away the container's centring */
#main-body .landing-page .container.accordion {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

/* --- Look: page by page --- */

/* SSL Certificates */
#main-body .landing-page.ssl .validation-levels {
    padding: 48px 0 40px;
}
#main-body .landing-page.ssl .validation-levels .item {
    border-radius: 16px;
    color: var(--ox-n-700);
}
#main-body .landing-page.ssl .validation-levels .item h4 {
    color: var(--ox-n-900);
    font-size: 18px;
}
#main-body .landing-page.ssl .validation-levels .item .btn {
    padding: 10px 28px;
}
#main-body .landing-page.ssl .validation-levels a:not(.btn) {
    color: #fff;
}
/* The checklist: icon and text side by side (the icons were floated, which staggered the lines) */
#main-body .landing-page.ssl .what-is-ssl ul {
    margin: 20px 0;
    padding: 0;
    list-style: none;
}
#main-body .landing-page.ssl .what-is-ssl ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px !important;
}
#main-body .landing-page.ssl .what-is-ssl ul li :is(.fas, .far) {
    flex: none;
    float: none;
    margin: 3px 0 0;
    color: var(--ox-brand);
    font-size: 18px;
}
#main-body .landing-page.ssl .standout-1 {
    background-color: var(--ox-navy-2);
}
#main-body .landing-page.ssl .detailed-info {
    background-color: var(--ox-n-50);
}
#main-body .landing-page.ssl .detailed-info .card {
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    box-shadow: none;
}
#main-body .landing-page.ssl .detailed-info .card + .card {
    margin-top: 12px;
}
#main-body .landing-page.ssl .detailed-info .card-header {
    padding: 16px 20px;
    border: 0;
    background-color: #fff;
    color: var(--ox-n-900);
}
#main-body .landing-page.ssl .detailed-info .card-header h4 {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 17px;
}

/* SiteLock */
#main-body .landing-page.sitelock .plan-comparison > div {
    display: flex;
    margin-bottom: 24px;
}
#main-body .landing-page.sitelock .plans .plan {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}
#main-body .landing-page.sitelock .plans .plan .header {
    padding: 20px;
    background-color: var(--ox-brand-50);
    color: var(--ox-n-700);
}
#main-body .landing-page.sitelock .plans .plan .header h4 {
    margin: 0 0 6px;
    color: var(--ox-n-900);
    font-size: 19px;
}
#main-body .landing-page.sitelock .plans .plan .header p {
    margin: 0;
    color: var(--ox-n-500);
    font-size: 14px;
    line-height: 1.5;
}
#main-body .landing-page.sitelock .plans .plan ul {
    flex: 1;
}
#main-body .landing-page.sitelock .plans .plan ul li {
    font-size: 14px;
}
#main-body .landing-page.sitelock .features :is(.fas, .far, .fab),
#main-body .landing-page.sitelock .features i {
    color: var(--ox-brand);
}

/* E-mail Services */
#main-body .landing-page.mail-services .product-options .item {
    border-radius: 16px;
    background-color: #fff;
}
#main-body .landing-page.mail-services .product-options :is(.icon, .price) {
    color: var(--ox-brand);
}
#main-body .landing-page.mail-services .product-options h4 {
    color: var(--ox-n-900);
    font-size: 18px;
}
#main-body .landing-page.mail-services .benefits {
    border-radius: 12px;
    background: var(--ox-brand-50);
}

/* Professional Email */
#main-body .landing-page.ox .stand-out {
    background-color: var(--ox-n-50);
    color: var(--ox-n-700);
}
#main-body .landing-page.ox :is(.stand-out, .features, .pricing, .faqs) :is(h2, h3, h4) {
    color: var(--ox-n-900);
}
#main-body .landing-page.ox :is(.features, .pricing, .faqs) {
    padding: 56px 0;
}
#main-body .landing-page.ox .faqs {
    background-color: var(--ox-n-50);
}
#main-body .landing-page.ox .pricing th {
    background-color: var(--ox-navy);
}
#main-body .landing-page.ox .pricing th.feature {
    background-color: var(--ox-brand);
}
#main-body .landing-page.ox .pricing table tr:nth-child(even) td:first-child {
    background-color: var(--ox-n-50);
}

/* SiteLock: the "Website hacked?" band is dark now, so its list needs light text */
#main-body .landing-page.sitelock .emergency {
    color: #c3cbd9;
}
#main-body .landing-page.sitelock .emergency .feature-wrapper h4 {
    color: #fff;
    font-size: 18px;
}
#main-body .landing-page.sitelock .emergency .feature-wrapper p {
    color: #c3cbd9;
}
#main-body .landing-page.sitelock .emergency .price {
    color: #fff;
}

/* 360 Monitoring: questions as plain headings instead of blue capital links */
#main-body .landing-page.threesixtymonitoring .section-faq .btn-link {
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
}
#main-body .landing-page.threesixtymonitoring .section-faq .card {
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    box-shadow: none;
}

/* NordVPN: the two prices */
#main-body .landing-page.nordvpn .pricing .billing-cycle {
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 700;
}
#main-body .landing-page.nordvpn .pricing .billing-price {
    color: var(--ox-n-700);
    font-size: 18px;
    font-weight: 600;
}
#main-body .landing-page.nordvpn h1 {
    color: var(--ox-n-900);
}

/* Smaller screens: the page's own menu becomes one row that scrolls sideways (it was a stray
   menu button with the links stacked under it), and headings and spacing come down a size */
@media (max-width: 991px) {
    #main-body .landing-page .navbar .navbar-toggler {
        display: none;
    }
    #main-body .landing-page .navbar .navbar-collapse {
        display: block !important;
        overflow-x: auto;
        scrollbar-width: none;
    }
    #main-body .landing-page .navbar .navbar-collapse::-webkit-scrollbar {
        display: none;
    }
    #main-body .landing-page .navbar .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    #main-body .landing-page .navbar .navbar-nav > li > a {
        padding: 12px 14px;
        white-space: nowrap;
    }
}
@media (max-width: 575px) {
    #main-body .landing-page .hero {
        padding: 40px 0 32px;
    }
    #main-body .landing-page .hero h2 {
        font-size: 28px;
    }
    #main-body .landing-page :is(.hero, .content-block, .feature) h2 {
        font-size: 26px;
    }
    #main-body .landing-page .content-block {
        padding: 44px 0;
    }
}