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

    ** 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: var(--ox-surface);
}
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: var(--ox-surface) !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: var(--ox-surface);
    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: var(--ox-surface);
    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: #f8fafd;
    --ox-n-50: #f2f5fb;
    --ox-n-100: #e9eef7;
    --ox-n-200: #dde4f0;
    --ox-n-300: #c5cfe0;
    --ox-n-400: #8792ab;
    --ox-n-500: #4f5c7a;
    --ox-n-700: #24304d;
    --ox-n-900: #0a1433;

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

    --ox-navy: #06174d;
    --ox-navy-2: #0c2565;
    --ox-surface: #fff;
    --ox-blue-deep: #031242;
    --ox-blue-mid: #011c70;
    --ox-blue-end: #083698;
    --ox-blue-raised: #0a2266;
    --ox-blue-band: linear-gradient(180deg, #031242 0%, #011c70 55%, #083698 100%);

    --ox-card-shadow: 0 1px 2px rgba(10, 20, 51, .06);
    --ox-card-radius: 12px;

    /* The base theme (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,
.account-page {
    background: var(--ox-blue-band);
}
.sectionbg4 {
    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 {
    padding: 80px 0 0;
    background-color: var(--ox-blue-deep);
    background-image: linear-gradient(180deg, var(--ox-blue-deep) 0%, var(--ox-blue-mid) 100%);
}
.theme-footer .footer-info > p {
    max-width: 340px;
    margin-top: 28px;
    color: #fff;
    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: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 17px;
    transition: background-color .2s, color .2s;
}
.theme-footer .footer-social .social-icon a:hover {
    border-color: #fff;
    background: var(--ox-surface);
    color: var(--ox-blue-deep);
}
.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: #fff;
    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: #fff;
    font-size: 16px;
    line-height: 1.5;
    transition: color .2s;
}
.theme-footer .footer-menu li a:hover,
.theme-footer .footer-legal a:hover {
    color: #9ccbff;
}
/* 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, .14);
}
.theme-footer .copyright-info,
.theme-footer .footer-legal a {
    color: #fff;
    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 max(0px, calc(50% - 290px)) 32px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
    text-wrap: balance;
}
.theme-footer .footer-notice a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.theme-footer .footer-notice a:hover {
    color: #9ccbff;
}
@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;
    }
}
/* 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-blue-deep);
    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: var(--ox-surface);
    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(3, 18, 66, .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: var(--ox-surface);
        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-blue-deep);
}
.mega-heading {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .7);
    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: #fff;
    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: rgba(255, 255, 255, .78);
    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: #fff;
}
.nabbar-nav .mainmenu .mega-panel .mega-links a:hover {
    color: #fff;
}
.mega-links a i {
    color: rgba(255, 255, 255, .7);
    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: rgba(255, 255, 255, .7);
    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: rgba(255, 255, 255, .88);
    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-blue-deep);
        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-blue-raised);
    }
}
@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-v2.jpg (Unsplash, free licence); replace the file to change it.
   (The log-in and register pages still use home-hero.jpg, in "Auth pages" below.) */
.home-hero {
    --home-hero-photo: url(../custom/images/home-hero-v2.jpg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: 72px 0 32px;
    background-color: var(--ox-blue-deep);
    background-image: linear-gradient(rgba(3, 18, 66, .5), rgba(3, 18, 66, .74)), var(--home-hero-photo);
    /* Left of centre, so the woman in home-hero-v2.jpg stays in view on narrow phone screens */
    background-position: 22% 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: #fff;
    font-size: 22px;
}
.home-hero-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 800px;
    padding: 6px;
    border-radius: 10px;
    background: var(--ox-surface);
}
.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: #fff;
    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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
}
.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: dark blue band with the title over a large glowing circle on the left and the questions on the
   right. The list keeps the theme's ul.accordion so main.js still opens and closes answers. */
.ox-faq-band {
    position: relative;
    overflow: hidden;
    padding: 110px 0 120px;
    background: var(--ox-blue-band);
    isolation: isolate;
}
.ox-faq-band::before {
    position: absolute;
    z-index: -1;
    top: calc(26% - 800px);
    right: calc(50% + 90px);
    width: 1600px;
    height: 1600px;
    border-radius: 50%;
    background: radial-gradient(circle at 78% 88%, #b9dbfd 0%, #7dbff9 6%, #3b95ea 14%, #1f78dc 24%, #0f5cc0 34%, #0a3f94 44%, #062a6b 54%, #041d52 64%);
    content: "";
    pointer-events: none;
}
.ox-faq {
    display: grid;
    gap: 40px;
}
@media (min-width: 992px) {
    .ox-faq {
        grid-template-columns: 5fr 7fr;
        gap: 72px;
        align-items: start;
    }
    .ox-faq-intro {
        padding-top: 96px;
    }
}
.ox-faq-intro h2 {
    max-width: 440px;
    margin: 0;
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
}
.ox-faq-list {
    display: block;
}
.ox-faq-list > li {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.ox-faq-list li > a {
    gap: 32px;
    padding: 26px 0;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
}
.ox-faq-list li > a:hover {
    color: #fff;
}
.ox-faq-list li.active > a {
    padding-bottom: 12px;
}
.ox-faq-list li > a::after {
    content: "\ea13";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1.5px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-remixicon);
    font-size: 16px;
    transition: background-color .2s, color .2s;
}
.ox-faq-list li:hover > a::after {
    background: rgba(255, 255, 255, .14);
}
.ox-faq-list li.active > a::after {
    content: "\f1af";
    border-color: #fff;
    background: var(--ox-surface);
    color: #031242;
}
.ox-faq-list li p {
    padding: 0 60px 26px 0;
    background: none;
    color: rgba(255, 255, 255, .74);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}
.ox-faq-list li p a {
    color: #9ccbff;
    font-weight: 600;
    text-decoration: none;
}
.ox-faq-list li p a:hover {
    color: #fff;
    text-decoration: underline;
}
@media (max-width: 1199px) {
    .ox-faq-intro h2 {
        font-size: 40px;
    }
}
@media (max-width: 991px) {
    .ox-faq-band {
        padding: 72px 0 80px;
    }
    .ox-faq-band::before {
        top: -420px;
        right: auto;
        left: -330px;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle at 78% 88%, #2f86e6 0%, #1a6fd6 20%, #0b52b0 42%, #06317d 58%, #041d52 74%);
    }
    .ox-faq {
        gap: 56px;
    }
    .ox-faq-intro h2 {
        font-size: 34px;
    }
}
@media (max-width: 575px) {
    .ox-faq-intro h2 {
        font-size: 30px;
    }
    .ox-faq-list li > a {
        gap: 20px;
        padding: 20px 0;
        font-size: 16.5px;
    }
    .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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
    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;
    }
}

/* 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: var(--ox-surface);
    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-v2.jpg (Unsplash, free licence).
   The woman sits on the right, clear of the headline; anchored right so phones still show her. */
.home-hero.ox-hero-domain {
    --home-hero-photo: url(../custom/images/domain-hero-v2.jpg);
    background-position: 75% center;
}
@media (min-width: 992px) {
    .home-hero.ox-hero-domain {
        background-position: right center;
    }
}
.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: var(--ox-surface);
}
.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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
}
/* 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: var(--ox-surface);
    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: var(--ox-surface);
}
.ox-ess-window-url {
    margin-left: 10px;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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 plain wall in why-speed-v2.jpg, clear of the man and his laptop */
.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: var(--ox-surface);
    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: var(--ox-surface);
    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-v2.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: var(--ox-surface);
    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: var(--ox-blue-band);
}
.ox-phero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 60% at 72% 62%, rgba(59, 149, 234, .28), transparent 70%),
        radial-gradient(ellipse 40% 45% at 88% 92%, rgba(125, 191, 249, .16), transparent 70%),
        radial-gradient(ellipse 50% 40% at 15% 105%, rgba(59, 149, 234, .14), 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: #fff;
    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: #fff;
    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: rgba(255, 255, 255, .78);
    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: var(--ox-surface);
    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: rgba(255, 255, 255, .82);
    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: rgba(255, 255, 255, .82);
    font-size: 15px;
}
.ox-phero-site-btn {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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-blue-deep);
    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: #fff;
    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: var(--ox-surface);
}
.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: var(--ox-surface);
}
#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: var(--ox-surface);
    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: var(--ox-surface);
}
#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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface) !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: var(--ox-surface);
}
#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: var(--ox-surface);
    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: var(--ox-surface);
}
#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: var(--ox-surface);
    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: var(--ox-surface);
}
#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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
}
#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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface) !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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
}
.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;
    }
    .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: var(--ox-surface);
    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: var(--ox-surface);
    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, #0c2565 0%, #06174d 55%, #0f3a8f 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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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, #0c2565 0%, #06174d 55%, #0f3a8f 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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
}
.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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
}
/* 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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
}
.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: var(--ox-surface);
    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-blue-band);
    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, .88);
    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: var(--ox-surface);
}
.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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
}
.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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    box-shadow: none;
}
#main-body.ox-wh .card-sidebar > .card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ox-n-100);
    background: var(--ox-surface);
}
#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: var(--ox-surface);
}
#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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface) !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: var(--ox-surface);
    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: var(--ox-surface);
}
#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: var(--ox-surface);
    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: var(--ox-surface) !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: var(--ox-surface);
}
#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: var(--ox-surface);
}
#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: var(--ox-surface);
    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: var(--ox-surface);
}
#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: var(--ox-surface);
}
#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: var(--ox-surface);
}
@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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
    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: var(--ox-surface);
}
#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: var(--ox-surface);
    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: var(--ox-surface);
}

/* ==========================================================================
   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: var(--ox-surface);
}
.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: var(--ox-surface);
    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: var(--ox-surface);
}
.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: var(--ox-surface);
}
#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: var(--ox-surface) !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: var(--ox-surface) !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: var(--ox-surface);
    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: var(--ox-surface);
}
#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;
    }
}

/* Website design page (website-design.tpl): 3 plan cards (2 products + custom quote), business
   types, devices illustration and quote banner. Plan cards reuse "Plan cards" above. */
.ox-plan-grid.ox-wd-plans {
    max-width: 480px;
}
@media (min-width: 768px) {
    .ox-plan-grid.ox-wd-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 960px;
    }
    .ox-wd-plans .ox-plan.is-custom {
        grid-column: 1 / -1;
    }
}
@media (min-width: 1200px) {
    .ox-plan-grid.ox-wd-plans {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 1120px;
    }
    .ox-wd-plans .ox-plan.is-custom {
        grid-column: auto;
    }
    .ox-plan-grid.ox-wd-plans.is-few {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
    }
}
/* The plans sit on a white section here, so the white card needs an edge */
.ox-wd-plans .ox-plan:not(.is-featured):not(.is-custom) {
    border: 1px solid var(--ox-n-200);
}
.ox-plan.is-custom {
    border: 1px solid #cddcfb;
    background: linear-gradient(160deg, var(--ox-brand-50) 0%, #fff 55%);
}
.ox-plan-price.ox-wd-quote {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}
.ox-wd-lead {
    margin: 14px 0 24px;
    color: var(--ox-n-500);
    font-size: 17px;
    line-height: 1.65;
}
.ox-wd-types {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}
@media (min-width: 576px) {
    .ox-wd-types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 992px) {
    .ox-wd-types {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.ox-wd-type {
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: var(--ox-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.ox-wd-type img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.ox-wd-type-body {
    padding: 18px 20px 22px;
}
.ox-wd-type h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--ox-n-900);
    font-size: 18px;
    font-weight: 700;
}
.ox-wd-type h3 i {
    color: var(--ox-brand);
    font-size: 20px;
}
.ox-wd-type p {
    margin: 0;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.55;
}
.ox-wd-types-more {
    margin: 28px 0 0;
    color: var(--ox-n-500);
    font-size: 15px;
    text-align: center;
}
.ox-wd-types-more a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ox-brand);
    font-weight: 700;
}
.ox-wd-devices {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
}
.ox-wd-cta-wrap {
    padding: 8px 0 72px;
}
.ox-wd-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 40px 44px;
    border-radius: 24px;
    background: radial-gradient(circle at 85% 20%, rgba(26, 108, 245, .35), transparent 55%), var(--ox-navy);
    color: #fff;
}
.ox-wd-cta h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}
.ox-wd-cta p {
    margin: 0;
    color: var(--ox-n-300);
    font-size: 16px;
    line-height: 1.6;
}
.ox-wd-cta-btns {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 12px;
}
.ox-wd-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border: 1.5px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    transition: background-color .2s, border-color .2s;
}
.ox-wd-cta-btn:hover {
    border-color: #fff;
    color: #fff;
}
.ox-wd-cta-btn.is-primary {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
}
.ox-wd-cta-btn.is-primary:hover {
    border-color: var(--ox-brand-hover);
    background: var(--ox-brand-hover);
}
@media (max-width: 767px) {
    .ox-wd-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 22px;
    }
    .ox-wd-cta h2 {
        font-size: 24px;
    }
}
/* Website design showcase: two rows of sample designs (script in website-design.tpl) */
.ox-wd-show {
    overflow: hidden;
}
.ox-wd-hl {
    color: var(--ox-brand);
}
.ox-wd-marquee {
    padding: 4px 0;
    overflow-x: auto;
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.ox-wd-marquee.is-js {
    overflow: hidden;
}
.ox-wd-marquee.is-dragging {
    cursor: grabbing;
}
.ox-wd-marquee + .ox-wd-marquee {
    margin-top: 20px;
}
.ox-wd-track {
    display: flex;
    width: max-content;
    will-change: transform;
}
/* Spacing as a margin on each card (not gap), so half the track is exactly one set and the loop is seamless */
.ox-wd-shot {
    flex: 0 0 auto;
    width: 480px;
    margin: 0 20px 0 0;
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 14px;
    background: var(--ox-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.ox-wd-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    pointer-events: none;
}
.ox-wd-show-note {
    margin: 22px 0 0;
    color: var(--ox-n-500);
    font-size: 13px;
    text-align: center;
}
@media (max-width: 767px) {
    .ox-wd-shot {
        width: 300px;
        margin-right: 14px;
    }
    .ox-wd-marquee + .ox-wd-marquee {
        margin-top: 14px;
    }
}

/* Domain lookup (domain-lookup.tpl, custom/js/domain-lookup.js): hero with search, summary card
   with screenshot, and result cards. */
.ox-lk-hero {
    padding-bottom: 96px;
}
.ox-lk-hero-inner {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.ox-lk-hero h1 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
}
.ox-lk-sub {
    max-width: 680px;
    margin: 0 auto 28px;
    color: var(--ox-n-300);
    font-size: 18px;
    line-height: 1.6;
}
.ox-lk-form {
    margin: 0 auto;
}
.ox-lk-form .home-hero-search-prefix i {
    font-size: 20px;
}
.ox-lk-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--ox-n-400);
    font-size: 14px;
}
.ox-lk-examples button {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.ox-lk-examples button:hover {
    background: rgba(255, 255, 255, .14);
}
.ox-lk-results-wrap {
    padding: 48px 0 72px;
    background: var(--ox-n-50);
    scroll-margin-top: 80px;
}
.ox-lk-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 32px;
    align-items: start;
    margin-bottom: 24px;
    padding: 28px;
    border: 1px solid var(--ox-n-200);
    border-radius: 20px;
    background: var(--ox-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.ox-lk-summary.is-single {
    grid-template-columns: minmax(0, 1fr);
}
.ox-lk-sum-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.ox-lk-sum-head h2 {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.ox-lk-fav {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: contain;
}
.ox-lk-fav.is-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 18px;
}
.ox-lk-site-title {
    margin: 16px 0 4px;
    color: var(--ox-n-900);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}
.ox-lk-site-desc {
    margin: 0;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.55;
}
.ox-lk-avail {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid #abefc6;
    border-radius: 14px;
    background: #ecfdf3;
    color: #05603a;
}
.ox-lk-avail > i {
    color: #079455;
    font-size: 24px;
}
.ox-lk-avail b {
    display: block;
    font-size: 16px;
}
.ox-lk-avail span {
    font-size: 14px;
}
.ox-lk-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}
.ox-lk-fact {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ox-n-50);
}
.ox-lk-fact span {
    display: block;
    margin-bottom: 2px;
    color: var(--ox-n-500);
    font-size: 12px;
}
.ox-lk-fact b {
    display: block;
    color: var(--ox-n-900);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.ox-lk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.ox-lk-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px solid var(--ox-brand);
    border-radius: 10px;
    color: var(--ox-brand);
    font-size: 14px;
    font-weight: 600;
}
.ox-lk-btn:hover {
    background: var(--ox-brand-50);
    color: var(--ox-brand-hover);
}
.ox-lk-btn.is-primary {
    background: var(--ox-brand);
    color: #fff;
}
.ox-lk-btn.is-primary:hover {
    border-color: var(--ox-brand-hover);
    background: var(--ox-brand-hover);
    color: #fff;
}
.ox-lk-btn.is-ghost {
    border-color: var(--ox-n-300);
    color: var(--ox-n-700);
}
.ox-lk-shot {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ox-n-200);
    border-radius: 14px;
    background: var(--ox-surface);
}
.ox-lk-shot-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--ox-n-200);
    background: var(--ox-n-50);
}
.ox-lk-shot-dots {
    display: flex;
    gap: 5px;
}
.ox-lk-shot-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ox-n-300);
}
.ox-lk-shot-url {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 10px;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    background: var(--ox-surface);
    color: var(--ox-n-500);
    font-size: 12px;
}
.ox-lk-shot-url span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ox-lk-shot-view {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ox-n-100);
}
.ox-lk-shot-view .ox-lk-skel {
    position: absolute;
    inset: 0;
}
.ox-lk-shot-view .ox-lk-skel span {
    width: 100% !important;
    height: 100%;
    margin: 0;
    border-radius: 0;
}
.ox-lk-shot-holder,
.ox-lk-shot-view img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ox-lk-shot-view img {
    object-fit: cover;
    object-position: top;
}
.ox-lk-shot-wait,
.ox-lk-shot-none {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    padding: 20px;
    color: var(--ox-n-500);
    font-size: 14px;
    text-align: center;
}
.ox-lk-shot-none i {
    font-size: 26px;
}
.ox-lk-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid var(--ox-n-200);
    border-top-color: var(--ox-brand);
    border-radius: 50%;
    animation: ox-lk-spin .8s linear infinite;
}
@keyframes ox-lk-spin {
    to { transform: rotate(360deg); }
}
.ox-lk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
.ox-lk-card {
    min-width: 0;
    padding: 22px 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: var(--ox-surface);
}
.ox-lk-card.is-wide {
    grid-column: 1 / -1;
}
.ox-lk-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.ox-lk-card-icon {
    display: inline-flex;
    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-lk-card-head h3 {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 18px;
    font-weight: 700;
}
.ox-lk-rows {
    margin: 0;
}
.ox-lk-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ox-n-100);
}
.ox-lk-row:last-child {
    border-bottom: 0;
}
.ox-lk-row dt {
    color: var(--ox-n-500);
    font-size: 14px;
    font-weight: 500;
}
.ox-lk-row dd {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 14.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.ox-lk-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.ox-lk-pill.is-ok { background: #ecfdf3; color: #067647; }
.ox-lk-pill.is-info { background: var(--ox-brand-50); color: var(--ox-brand-700); }
.ox-lk-pill.is-warn { background: #fffaeb; color: #b54708; }
.ox-lk-pill.is-muted { background: var(--ox-n-100); color: var(--ox-n-700); }
.ox-lk-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.ox-lk-note i {
    margin-top: 1px;
    font-size: 17px;
}
.ox-lk-note.is-info { background: var(--ox-brand-50); color: var(--ox-n-700); }
.ox-lk-note.is-warn { background: #fffaeb; color: #93370d; }
.ox-lk-note.is-ok { background: #ecfdf3; color: #05603a; }
.ox-lk-skel span {
    display: block;
    height: 12px;
    margin: 12px 0;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--ox-n-100) 25%, var(--ox-n-200) 50%, var(--ox-n-100) 75%);
    background-size: 200% 100%;
    animation: ox-lk-shimmer 1.4s linear infinite;
}
@keyframes ox-lk-shimmer {
    to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ox-lk-skel span,
    .ox-lk-spinner {
        animation: none;
    }
}
.ox-lk-sub-title {
    margin: 18px 0 8px;
    color: var(--ox-n-500);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ox-lk-statuses,
.ox-lk-list,
.ox-lk-chain,
.ox-lk-checks,
.ox-lk-names {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-lk-statuses li {
    display: grid;
    justify-items: start;
    gap: 3px;
    padding: 8px 0;
}
.ox-lk-statuses li span:not(.ox-lk-pill) {
    color: var(--ox-n-500);
    font-size: 13.5px;
    line-height: 1.45;
}
.ox-lk-ips {
    display: grid;
    gap: 12px;
    margin-bottom: 8px;
}
.ox-lk-ip {
    padding: 10px 14px 4px;
    border: 1px solid var(--ox-n-200);
    border-radius: 14px;
}
.ox-lk-ip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
}
.ox-lk-ip-head b,
.ox-lk-mono,
.ox-lk-names li,
.ox-lk-raw pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ox-lk-ip-head b {
    color: var(--ox-n-900);
    font-size: 15px;
    overflow-wrap: anywhere;
}
.ox-lk-ip .ox-lk-row {
    grid-template-columns: 110px minmax(0, 1fr);
}
.ox-lk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.ox-lk-table-wrap {
    overflow-x: auto;
}
.ox-lk-table {
    width: 100%;
    border-collapse: collapse;
}
.ox-lk-table th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ox-n-200);
    color: var(--ox-n-500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}
.ox-lk-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--ox-n-100);
    color: var(--ox-n-900);
    font-size: 13.5px;
    vertical-align: top;
}
.ox-lk-val {
    min-width: 220px;
    word-break: break-all;
}
.ox-lk-ttl {
    color: var(--ox-n-500);
    white-space: nowrap;
}
.ox-lk-chain li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 13.5px;
    word-break: break-all;
}
.ox-lk-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
}
.ox-lk-checks li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ox-n-700);
    font-size: 14px;
}
.ox-lk-checks li.is-on i { color: #079455; }
.ox-lk-checks li.is-off { color: var(--ox-n-500); }
.ox-lk-checks li.is-off i { color: var(--ox-n-400); }
.ox-lk-names {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ox-lk-names li {
    padding: 3px 8px;
    border: 1px solid var(--ox-n-200);
    border-radius: 8px;
    background: var(--ox-n-50);
    color: var(--ox-n-700);
    font-size: 12.5px;
}
.ox-lk-names li.is-more {
    background: var(--ox-brand-50);
    color: var(--ox-brand-700);
}
.ox-lk-raw summary {
    color: var(--ox-brand);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.ox-lk-raw pre {
    max-height: 440px;
    margin: 12px 0 0;
    padding: 16px;
    overflow: auto;
    border-radius: 12px;
    background: var(--ox-navy);
    color: var(--ox-n-200);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.ox-lk-invalid {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid #fedf89;
    border-radius: 14px;
    background: #fffaeb;
    color: #93370d;
    font-size: 15px;
}
.ox-lk-invalid i {
    font-size: 20px;
}
@media (max-width: 991px) {
    .ox-lk-summary,
    .ox-lk-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .ox-lk-summary .ox-lk-shot {
        order: -1;
    }
}
@media (max-width: 575px) {
    .ox-lk-hero h1 {
        font-size: 36px;
    }
    .ox-lk-sub {
        font-size: 16px;
    }
    .ox-lk-summary {
        padding: 18px;
    }
    .ox-lk-sum-head h2 {
        font-size: 24px;
    }
    .ox-lk-facts,
    .ox-lk-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ox-lk-card {
        padding: 18px;
    }
    .ox-lk-row,
    .ox-lk-ip .ox-lk-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}
/* Domain lookup, phones: DNS records as stacked blocks instead of a wide table */
@media (max-width: 575px) {
    .ox-lk-table thead {
        display: none;
    }
    .ox-lk-table,
    .ox-lk-table tbody {
        display: block;
    }
    .ox-lk-table tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 4px 10px;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid var(--ox-n-100);
    }
    .ox-lk-table td {
        padding: 0;
        border: 0;
    }
    .ox-lk-table td.ox-lk-val {
        grid-column: 1 / -1;
        min-width: 0;
        font-size: 12.5px;
    }
    .ox-lk-table td:nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ox-lk-table td.ox-lk-ttl {
        grid-row: 1;
        grid-column: 3;
        font-size: 12px;
    }
}

/* Plan feature tooltips (custom/js/plan-tips.js): dotted underline under the feature, explanation
   card above it on hover, keyboard focus or tap */
.ox-ptip {
    position: relative;
    cursor: help;
    outline: 0;
}
.ox-ptip-label {
    border-bottom: 1.5px dashed var(--ox-n-300);
    transition: border-color .15s;
}
.ox-ptip:hover .ox-ptip-label,
.ox-ptip:focus-visible .ox-ptip-label,
.ox-ptip.is-open .ox-ptip-label {
    border-bottom-color: var(--ox-brand);
}
.ox-plan.is-featured .ox-ptip-label {
    border-bottom-color: rgba(255, 255, 255, .35);
}
.ox-plan.is-featured .ox-ptip:hover .ox-ptip-label,
.ox-plan.is-featured .ox-ptip:focus-visible .ox-ptip-label,
.ox-plan.is-featured .ox-ptip.is-open .ox-ptip-label {
    border-bottom-color: #fff;
}
.ox-ptip-bubble {
    position: absolute;
    z-index: 30;
    bottom: calc(100% + 10px);
    left: -12px;
    width: 260px;
    padding: 12px 14px 13px;
    border: 1px solid var(--ox-n-200);
    border-radius: 12px;
    background: var(--ox-surface);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
    color: var(--ox-n-500);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
}
/* Small pointer under the card */
.ox-ptip-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 22px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-right: 1px solid var(--ox-n-200);
    border-bottom: 1px solid var(--ox-n-200);
    background: var(--ox-surface);
    transform: rotate(45deg);
}
.ox-ptip-bubble b {
    display: block;
    margin-bottom: 3px;
    color: var(--ox-n-900);
    font-size: 14px;
    font-weight: 700;
}
.ox-ptip:hover .ox-ptip-bubble,
.ox-ptip:focus-visible .ox-ptip-bubble,
.ox-ptip.is-open .ox-ptip-bubble {
    opacity: 1;
    visibility: visible;
    transform: none;
}
/* The featured (dark) card's own text colour must not leak into the white card */
.ox-plan.is-featured .ox-ptip-bubble {
    color: var(--ox-n-500);
}
@media (max-width: 575px) {
    .ox-ptip-bubble {
        width: min(260px, calc(100vw - 72px));
    }
}
@media (prefers-reduced-motion: reduce) {
    .ox-ptip-bubble {
        transition: none;
    }
}

/* Domain extension pages (domain-extension.tpl, domain-extensions.tpl) */
.ox-tld-hero {
    padding-bottom: 96px;
}
.ox-tld-hero-mark {
    position: absolute;
    right: -2%;
    bottom: -60px;
    color: rgba(255, 255, 255, .035);
    font-size: clamp(160px, 22vw, 340px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}
.ox-tld-hero-inner {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.ox-tld-hero h1 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
}
.ox-tld-hero h1 span {
    color: #7fb0ff;
}
.ox-tld-sub {
    max-width: 680px;
    margin: 0 auto 28px;
    color: var(--ox-n-300);
    font-size: 18px;
    line-height: 1.6;
}
.ox-tld-crumbs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 18px;
    color: var(--ox-n-400);
    font-size: 13px;
}
.ox-tld-crumbs a {
    color: var(--ox-n-300);
}
.ox-tld-crumbs a:hover {
    color: #fff;
}
.ox-tld-preview {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(247, 144, 9, .14);
    color: #fec84b;
    font-size: 13.5px;
}
.ox-tld-form {
    margin: 0 auto;
}
.ox-tld-suffix {
    flex: none;
    padding: 0 14px 0 4px;
    color: var(--ox-brand);
    font-size: 18px;
    font-weight: 700;
}
.ox-tld-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.ox-tld-chips li {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: var(--ox-n-300);
    font-size: 14px;
}
.ox-tld-chips b {
    color: #fff;
}
.ox-tx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 18px;
    border: 1.5px solid var(--ox-n-300);
    border-radius: 10px;
    color: var(--ox-n-900);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .15s, background-color .15s, color .15s;
}
.ox-tx-btn:hover {
    border-color: var(--ox-brand);
    color: var(--ox-brand);
}
.ox-tx-btn.is-primary {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
    color: #fff;
}
.ox-tx-btn.is-primary:hover {
    border-color: var(--ox-brand-hover);
    background: var(--ox-brand-hover);
    color: #fff;
}
.ox-tld-results-wrap {
    padding: 44px 0 64px;
    background: var(--ox-n-50);
    scroll-margin-top: 80px;
}
.ox-tr-main {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 20px;
    background: var(--ox-surface);
}
.ox-tr-main.is-available {
    border-color: #abefc6;
    background: linear-gradient(110deg, #ecfdf3 0%, #fff 55%);
}
.ox-tr-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--ox-n-100);
    color: var(--ox-n-500);
    font-size: 28px;
}
.ox-tr-main.is-available .ox-tr-icon { background: #d1fadf; color: #079455; }
.ox-tr-main.is-registered .ox-tr-icon,
.ox-tr-main.is-reserved .ox-tr-icon { background: #fee4e2; color: #d92d20; }
.ox-tr-main-text {
    flex: 1;
    min-width: 0;
}
.ox-tr-main-name {
    display: block;
    color: var(--ox-n-900);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.ox-tr-main-name span,
.ox-tr-name span {
    color: var(--ox-brand);
}
.ox-tr-main.is-registered .ox-tr-main-name,
.ox-tr-main.is-reserved .ox-tr-main-name {
    color: var(--ox-n-700);
}
.ox-tr-main-text p {
    margin: 4px 0 0;
    color: var(--ox-n-500);
    font-size: 15px;
}
.ox-tr-main.is-available .ox-tr-main-text p {
    color: #067647;
    font-weight: 600;
}
.ox-tr-main-buy {
    display: flex;
    flex: none;
    align-items: center;
    gap: 18px;
}
.ox-tr-main-price {
    color: var(--ox-n-900);
    font-size: 26px;
    font-weight: 800;
    white-space: nowrap;
}
.ox-tr-main-price small {
    color: var(--ox-n-500);
    font-size: 14px;
    font-weight: 500;
}
.ox-tr-main-buy .ox-tx-btn {
    padding: 13px 22px;
    font-size: 15.5px;
}
.ox-tr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 34px 0 14px;
}
.ox-tr-head h3 {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 20px;
    font-weight: 700;
}
.ox-tr-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    background: var(--ox-surface);
}
.ox-tr-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ox-tr-tabs button[aria-selected="true"] {
    background: var(--ox-navy);
    color: #fff;
}
.ox-tr-count {
    min-width: 18px;
    color: inherit;
    font-size: 12px;
    opacity: .7;
}
.ox-tr-count:empty {
    display: none;
}
.ox-tr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.ox-tr-grid[data-show="available"] .ox-tr-card:not(.is-available),
.ox-tr-grid[data-show="taken"] .ox-tr-card:not(.is-registered):not(.is-reserved) {
    display: none;
}
.ox-tr-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--ox-n-200);
    border-radius: 14px;
    background: var(--ox-surface);
    transition: border-color .15s;
}
.ox-tr-card.is-available:not(.is-unsold):hover {
    border-color: var(--ox-brand);
}
.ox-tr-card.is-registered,
.ox-tr-card.is-reserved {
    background: #fafbfc;
}
.ox-tr-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.ox-tr-name {
    color: var(--ox-n-900);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.ox-tr-card.is-registered .ox-tr-name,
.ox-tr-card.is-reserved .ox-tr-name {
    color: var(--ox-n-500);
}
.ox-tr-card.is-registered .ox-tr-name span,
.ox-tr-card.is-reserved .ox-tr-name span {
    color: var(--ox-n-400);
}
.ox-tr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--ox-n-500);
    font-size: 13px;
    line-height: 1.3;
}
.ox-tr-pill {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.ox-tr-pill.is-ok { background: #dcfae6; color: #067647; }
.ox-tr-pill.is-req { background: #fef0c7; color: #b54708; }
.ox-tr-pill.is-taken { background: var(--ox-n-100); color: var(--ox-n-500); }
.ox-tr-price {
    color: var(--ox-n-900);
    font-size: 14.5px;
    font-weight: 800;
}
.ox-tr-price small {
    color: var(--ox-n-500);
    font-size: 12px;
    font-weight: 500;
}
.ox-tr-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--ox-n-300);
    border-radius: 10px;
    color: var(--ox-n-900);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .15s, background-color .15s, color .15s;
}
.ox-tr-btn:hover {
    border-color: var(--ox-brand);
    color: var(--ox-brand);
}
.ox-tr-btn.is-primary {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
    color: #fff;
}
.ox-tr-btn.is-primary:hover {
    border-color: var(--ox-brand-hover);
    background: var(--ox-brand-hover);
    color: #fff;
}
.ox-tr-skel {
    display: block;
    width: 55%;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--ox-n-100) 25%, var(--ox-n-200) 50%, var(--ox-n-100) 75%);
    background-size: 200% 100%;
    animation: ox-lk-shimmer 1.4s linear infinite;
}
.ox-tr-skel.is-btn {
    flex: none;
    width: 96px;
    height: 36px;
    border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
    .ox-tr-skel { animation: none; }
}
@media (max-width: 1199px) {
    .ox-tr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .ox-tr-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 575px) {
    .ox-tr-main {
        flex-wrap: wrap;
        padding: 18px;
    }
    .ox-tr-icon {
        width: 46px;
        height: 46px;
        font-size: 24px;
    }
    .ox-tr-main-name {
        font-size: 22px;
    }
    .ox-tr-main-buy {
        flex: 1 1 100%;
        justify-content: space-between;
    }
    .ox-tr-main-buy .ox-tx-btn {
        flex: 1;
    }
    .ox-tr-tabs {
        width: 100%;
    }
    .ox-tr-tabs button {
        flex: 1;
        justify-content: center;
        padding: 7px 8px;
    }
}
.ox-tld-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #fedf89;
    border-radius: 14px;
    background: #fffaeb;
    color: #93370d;
}
.ox-tld-lead {
    margin: 14px 0 22px;
    color: var(--ox-n-500);
    font-size: 17px;
    line-height: 1.65;
}
.ox-tld-about,
.ox-tld-rules {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 48px;
    align-items: center;
}
.ox-tld-about h2,
.ox-tld-rules h2 {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}
.ox-tld-facts {
    padding: 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: var(--ox-surface);
}
.ox-tld-facts-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--ox-n-500);
    font-size: 15px;
}
.ox-tld-facts-head span {
    color: var(--ox-brand);
    font-size: 26px;
    font-weight: 800;
}
.ox-tld-facts dl {
    margin: 0;
}
.ox-tld-facts dl div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ox-n-100);
}
.ox-tld-facts dl div:last-child {
    border-bottom: 0;
}
.ox-tld-facts dt {
    flex: none;
    color: var(--ox-n-500);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.ox-tld-facts dd {
    margin: 0;
    color: var(--ox-n-900);
    font-size: 14.5px;
    font-weight: 600;
    text-align: right;
}
.ox-tld-facts-note {
    margin: 0 0 18px;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.6;
}

/* Expanding cards: the open card widens and shows its text; stacked on phones */
.ox-fcards {
    display: flex;
    gap: 14px;
    height: 440px;
}
.ox-fcard {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border-radius: 20px;
    background: var(--ox-navy);
    transition: flex .55s cubic-bezier(.2, .8, .2, 1);
}
.ox-fcard.is-open {
    flex: 3.2;
}
.ox-fcard-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.ox-fcard.is-open .ox-fcard-btn {
    cursor: default;
}
.ox-fcard-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 22, 40, .2) 0%, rgba(13, 22, 40, .35) 45%, rgba(13, 22, 40, .9) 100%);
}
.ox-fcard-btn:focus-visible {
    outline: 3px solid #7fb0ff;
    outline-offset: -3px;
}
.ox-fcard-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform .8s ease;
}
.ox-fcard.is-open .ox-fcard-img {
    transform: scale(1);
}
.ox-fcard-num,
.ox-fcard-icon,
.ox-fcard-title {
    position: absolute;
    z-index: 1;
}
.ox-fcard-num {
    top: 20px;
    left: 22px;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
}
.ox-fcard-icon {
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    font-size: 20px;
}
.ox-fcard-title {
    right: 22px;
    bottom: 22px;
    left: 22px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    transition: opacity .25s;
}
.ox-fcard.is-open .ox-fcard-title {
    opacity: 0;
}
.ox-fcard-body {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px;
    color: #fff;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.ox-fcard.is-open .ox-fcard-body {
    opacity: 1;
    transform: none;
    transition-delay: .25s;
}
.ox-fcard-body h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}
.ox-fcard-body p {
    max-width: 460px;
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
    line-height: 1.6;
}
@media (max-width: 767px) {
    .ox-fcards {
        flex-direction: column;
        height: auto;
    }
    .ox-fcard {
        flex: none;
        height: 92px;
        transition: height .45s cubic-bezier(.2, .8, .2, 1);
    }
    .ox-fcard.is-open {
        flex: none;
        height: 340px;
    }
    .ox-fcard-title {
        right: 70px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        font-size: 17px;
    }
    .ox-fcard-num {
        display: none;
    }
    .ox-fcard-icon {
        top: 25px;
    }
    .ox-fcard-body {
        padding: 22px;
    }
    .ox-fcard-body h3 {
        font-size: 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ox-fcard,
    .ox-fcard-img,
    .ox-fcard-body {
        transition: none;
    }
}

.ox-tx-prices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto;
}
.ox-tx-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: var(--ox-surface);
}
.ox-tx-price.is-main {
    border-color: #cddcfb;
    background: var(--ox-brand-50);
}
.ox-tx-price-name {
    color: var(--ox-n-500);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ox-tx-price-num {
    margin: 8px 0 6px;
    color: var(--ox-n-900);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
}
.ox-tx-price-num small {
    color: var(--ox-n-500);
    font-size: 16px;
    font-weight: 500;
}
.ox-tx-price p {
    flex: 1;
    margin: 0 0 18px;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.55;
}
.ox-tld-rules-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: var(--ox-surface);
}
.ox-tld-rules-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 22px;
}
.ox-tld-rules-card b {
    color: var(--ox-n-900);
    font-size: 19px;
}
.ox-tld-rules-card p {
    margin: 6px 0 18px;
    color: var(--ox-n-500);
    font-size: 15px;
    line-height: 1.55;
}
.ox-tx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}
.ox-tld-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    border: 1px solid var(--ox-n-200);
    border-radius: 16px;
    background: var(--ox-surface);
    transition: border-color .15s, transform .15s;
}
.ox-tld-card:hover {
    border-color: var(--ox-brand);
    transform: translateY(-2px);
}
.ox-tld-card[hidden] {
    display: none;
}
.ox-tld-card-ext {
    color: var(--ox-n-900);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
}
.ox-tld-card-label {
    color: var(--ox-n-500);
    font-size: 13.5px;
}
.ox-tld-card-price {
    margin-top: 10px;
    color: var(--ox-n-900);
    font-size: 20px;
    font-weight: 700;
}
.ox-tld-card-price small {
    color: var(--ox-n-500);
    font-size: 13px;
    font-weight: 500;
}
.ox-tld-card-renew {
    color: var(--ox-n-500);
    font-size: 12.5px;
}
.ox-tld-card-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    color: var(--ox-brand);
    font-size: 14px;
    font-weight: 600;
}
.ox-tld-all {
    margin: 26px 0 0;
    text-align: center;
}
.ox-tld-all a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ox-brand);
    font-weight: 700;
}
.ox-tld-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 26px;
}
.ox-tld-filter button {
    padding: 8px 16px;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    background: var(--ox-surface);
    color: var(--ox-n-700);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ox-tld-filter button[aria-selected="true"] {
    border-color: var(--ox-navy);
    background: var(--ox-navy);
    color: #fff;
}
.ox-tld-empty {
    grid-column: 1 / -1;
    color: var(--ox-n-500);
    text-align: center;
}
@media (max-width: 991px) {
    .ox-tld-about,
    .ox-tld-rules {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .ox-tx-prices {
        grid-template-columns: minmax(0, 1fr);
        max-width: 480px;
    }
}
@media (max-width: 575px) {
    .ox-tld-hero h1 {
        font-size: 34px;
    }
    .ox-tld-sub {
        font-size: 16px;
    }
    .ox-tld-suffix {
        padding-right: 8px;
        font-size: 15px;
    }
    .ox-tld-about h2,
    .ox-tld-rules h2 {
        font-size: 27px;
    }
    .ox-tx-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .ox-tld-card {
        padding: 16px;
    }
    .ox-tld-card-ext {
        font-size: 22px;
    }
}

/* Sitemap page (site-map.tpl) */
.ox-smap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.ox-smap-group,
.ox-smap-ext {
    padding: 22px 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: var(--ox-surface);
}
.ox-smap h2,
.ox-smap-ext h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--ox-n-900);
    font-size: 18px;
    font-weight: 700;
}
.ox-smap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 17px;
}
.ox-smap ul,
.ox-smap-ext ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-smap li + li {
    margin-top: 8px;
}
.ox-smap a,
.ox-smap-ext a {
    color: var(--ox-n-700);
    font-size: 15px;
}
.ox-smap a:hover,
.ox-smap-ext a:hover {
    color: var(--ox-brand);
}
.ox-smap-ext {
    margin-top: 18px;
}
.ox-smap-ext ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ox-smap-ext li a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    font-size: 14px;
}
.ox-smap-xml {
    margin: 24px 0 0;
    color: var(--ox-n-500);
    font-size: 14px;
    text-align: center;
}
.ox-smap-xml a {
    color: var(--ox-brand);
    font-weight: 600;
}
@media (max-width: 991px) {
    .ox-smap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .ox-smap {
        grid-template-columns: minmax(0, 1fr);
    }
}
.theme-footer .copyright-info a {
    color: inherit;
}
.theme-footer .copyright-info a:hover {
    color: #9ccbff;
}
.theme-footer .footer-sep {
    margin: 0 8px;
    opacity: .5;
}

/* Domain tips (domain-extension.tpl): numbered accordion with an illustration per tip */
.ox-tips {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.ox-tip-item + .ox-tip-item {
    margin-top: 10px;
}
.ox-tip-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 10px 22px 10px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ox-n-900);
    text-align: left;
    cursor: pointer;
    transition: background-color .2s;
}
.ox-tip-btn:hover {
    background: var(--ox-n-50);
}
.ox-tip-btn:focus-visible {
    outline: 2px solid var(--ox-brand);
    outline-offset: 2px;
}
.ox-tip-item.is-open .ox-tip-btn {
    background: linear-gradient(90deg, #cfe0ff 0%, #fdf3e3 55%, #f1ddf7 100%);
}
.ox-tip-num {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eef2fb;
    color: var(--ox-n-500);
    font-size: 16px;
    font-weight: 700;
}
.ox-tip-item.is-open .ox-tip-num {
    background: var(--ox-navy);
    color: #fff;
}
.ox-tip-title {
    flex: 1;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}
.ox-tip-item.is-open .ox-tip-title {
    font-weight: 700;
}
.ox-tip-chev {
    flex: none;
    font-size: 22px;
    transition: transform .25s;
}
.ox-tip-item.is-open .ox-tip-chev {
    transform: rotate(180deg);
}
.ox-tip-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}
.ox-tip-inner {
    min-height: 0;
    overflow: hidden;
}
.ox-tip-panel p {
    margin: 0;
    padding: 0 26px 0 70px;
    color: var(--ox-n-700);
    font-size: 16px;
    line-height: 1.65;
}
.ox-tip-item.is-open .ox-tip-panel {
    grid-template-rows: 1fr;
}
.ox-tip-item.is-open .ox-tip-panel p {
    padding-top: 14px;
    padding-bottom: 6px;
}
.ox-tips-art {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    aspect-ratio: 4 / 3;
}
.ox-tips-pic {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .4s ease, transform .4s ease;
}
.ox-tips-pic.is-on {
    opacity: 1;
    transform: none;
}
.ox-tips-pic svg {
    display: block;
    width: 100%;
    height: 100%;
}
@media (max-width: 991px) {
    .ox-tips {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .ox-tip-inner .ox-tips-art {
        margin: 18px 0 8px;
    }
    .ox-tips-side[hidden] {
        display: none;
    }
}
@media (max-width: 575px) {
    .ox-tip-btn {
        gap: 12px;
        padding: 8px 16px 8px 8px;
    }
    .ox-tip-title {
        font-size: 15px;
    }
    .ox-tip-num {
        width: 36px;
        height: 36px;
        font-size: 13.5px;
    }
    .ox-tip-panel p {
        padding-left: 18px;
        padding-right: 12px;
        font-size: 15px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ox-tip-panel,
    .ox-tips-pic,
    .ox-tip-chev {
        transition: none;
    }
}

/* Contact band above the footer */
.ox-ask {
    padding: 80px 0;
    background: radial-gradient(ellipse 50% 110% at 50% 0%, #c7deff 0%, rgba(199, 222, 255, 0) 100%), #ebf2ff;
}
.ox-ask-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    max-width: 1050px;
    margin: 0 auto;
}
.ox-ask h2 {
    max-width: 530px;
    margin: 0;
    color: #031243;
    font-size: 31px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
}
.ox-ask-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 13px 26px 13px 32px;
    border-radius: 999px;
    background: #031243;
    color: #fff;
    font-size: 19px;
    font-weight: 500;
    line-height: 25px;
    transition: background-color .2s;
}
.ox-ask-btn i {
    font-size: 22px;
    transition: transform .2s;
}
.ox-ask-btn:hover {
    background: var(--ox-brand);
    color: #fff;
}
.ox-ask-btn:hover i {
    transform: translateX(3px);
}
@media (max-width: 767px) {
    .ox-ask {
        padding: 56px 0;
    }
    .ox-ask-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .ox-ask h2 {
        font-size: 23px;
    }
    .ox-ask-btn {
        font-size: 17px;
    }
}

/* LiteSpeed pages */
@media (min-width: 1200px) {
    .ox-plan-grid.is-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 1120px;
    }
}
.ox-lsv-body {
    padding: 22px 24px 26px;
}
.ox-lsv-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}
.ox-lsv-label {
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}
.ox-lsv-switch {
    display: inline-flex;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font-size: 13px;
    font-weight: 600;
}
.ox-lsv-switch span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .55);
}
.ox-lsv-switch .is-on {
    background: var(--ox-surface);
    color: var(--ox-navy);
}
.ox-lsv-switch .is-on i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #12b76a;
}
.ox-lsv-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-lsv-rows li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}
.ox-lsv-rows li > i {
    color: rgba(255, 255, 255, .55);
    font-size: 18px;
}
.ox-lsv-val {
    margin-left: auto;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    white-space: nowrap;
}
.ox-lsv-pill {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.ox-lsv-pill.is-ok {
    background: rgba(18, 183, 106, .18);
    color: #6ce9a6;
}
.ox-lsv-graph {
    margin-top: 18px;
}
.ox-lsv-graph-label {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
}
.ox-lsv-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 72px;
}
.ox-lsv-bars i {
    flex: 1;
    height: var(--h);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #5b9bff, rgba(91, 155, 255, .3));
}
.ox-lsf {
    padding: 8px 28px;
    border: 1px solid var(--ox-n-200);
    border-radius: 20px;
    background: var(--ox-surface);
}
.ox-lsf-row {
    padding: 24px 0 26px;
}
.ox-lsf-row + .ox-lsf-row {
    border-top: 1px solid var(--ox-n-200);
}
.ox-lsf-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--ox-n-900);
    font-size: 17px;
    font-weight: 700;
}
.ox-lsf-title span {
    color: var(--ox-n-500);
    font-size: 14px;
    font-weight: 500;
}
.ox-lsf-row.is-fast .ox-lsf-title span {
    color: #067647;
    font-weight: 600;
}
.ox-lsf-path {
    display: flex;
    position: relative;
    justify-content: space-between;
}
.ox-lsf-path::before {
    position: absolute;
    top: 26px;
    right: 38px;
    left: 38px;
    border-top: 2px dashed var(--ox-n-300);
    content: "";
}
.ox-lsf-row.is-fast .ox-lsf-path::before {
    border-top: 2px solid var(--ox-brand);
}
.ox-lsf-node {
    position: relative;
    width: 76px;
    color: var(--ox-n-700);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}
.ox-lsf-node i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 8px;
    border: 1.5px solid var(--ox-n-200);
    border-radius: 50%;
    background: var(--ox-surface);
    color: var(--ox-n-700);
    font-size: 22px;
}
.ox-lsf-node.is-cache i {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
    color: #fff;
}
.ox-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 920px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.ox-chips li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid var(--ox-n-200);
    border-radius: 999px;
    background: var(--ox-surface);
    color: var(--ox-n-900);
    font-size: 15.5px;
    font-weight: 600;
}
.ox-chips li i {
    color: var(--ox-brand);
    font-size: 20px;
}
.ox-lsc {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.ox-lsc-card {
    padding: 28px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: var(--ox-surface);
}
.ox-lsc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--ox-brand-50);
    color: var(--ox-brand);
    font-size: 24px;
}
.ox-lsc-card h3 {
    margin: 0 0 10px;
    color: var(--ox-n-900);
    font-size: 19px;
    font-weight: 700;
}
.ox-lsc-card p {
    margin: 0;
    color: var(--ox-n-700);
    font-size: 15.5px;
    line-height: 1.6;
}
.ox-lsc-card b {
    color: var(--ox-n-900);
    font-weight: 600;
}
.ox-lsc-note {
    display: flex;
    gap: 10px;
    max-width: 820px;
    margin: 28px auto 0;
    color: var(--ox-n-700);
    font-size: 15px;
    line-height: 1.6;
}
.ox-lsc-note i {
    flex: none;
    color: var(--ox-brand);
    font-size: 20px;
    line-height: 1.2;
}
@media (max-width: 991px) {
    .ox-lsc {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 575px) {
    .ox-lsv-body {
        padding: 18px 16px 20px;
    }
    .ox-lsv-val {
        display: none;
    }
    .ox-lsv-rows li > .ox-lsv-pill {
        margin-left: auto;
    }
    .ox-lsf {
        padding: 4px 18px;
    }
    .ox-lsf-title {
        flex-direction: column;
        gap: 2px;
    }
    .ox-lsf-node {
        width: 64px;
        font-size: 12.5px;
    }
    .ox-lsf-path::before {
        right: 32px;
        left: 32px;
    }
    .ox-chips li {
        padding: 10px 16px;
        font-size: 14.5px;
    }
}

/* Announcement strip above the site header (header.tpl; text from includes/hooks/hostavik_topbar.php).
   It scrolls away with the page and the fixed header slides up into its place (footer.tpl sets --ox-hdr-top). */
.ox-topbar {
    position: relative;
    z-index: 1001;
    background: #111325;
}
.ox-topbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}
.ox-topbar a:hover {
    color: #fff;
}
.ox-topbar a i {
    flex: none;
    font-size: 18px;
    transition: transform .2s;
}
.ox-topbar a:hover i {
    transform: translateX(4px);
}
body:has(.ox-topbar) {
    --ox-hdr-top: 44px;
}
header.header {
    top: var(--ox-hdr-top, 0px);
}
@media (max-width: 1199px) {
    header.header .nabbar-nav {
        inset: calc(64px + var(--ox-hdr-top, 0px)) 0 0 0;
    }
}
@media (max-width: 575px) {
    .ox-topbar a {
        min-height: 40px;
        padding: 9px 14px;
        font-size: 13.5px;
    }
}

/* Home hero and scroll story (homepage.tpl, custom/js/home-sky.js): silhouettes in a blue spotlight;
   scrolling zooms into each person in turn and opens their blue close-up with a message. Without
   JavaScript, or with reduced motion, the hero and the three messages simply stack. */
.ox-sky {
    position: relative;
    background: #000;
    color: #fff;
}
.ox-sky.is-live {
    height: calc(100vh + var(--ox-sky-scenes, 3) * 140vh);
}
.ox-sky-stage {
    position: relative;
    overflow: hidden;
    background: #000;
}
.ox-sky.is-live .ox-sky-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
}
.ox-sky-bg,
.ox-sky-people,
.ox-sky-dim {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    height: 100svh;
    pointer-events: none;
}
.ox-sky-bg {
    background: radial-gradient(ellipse 40% 62% at 50% 40%, #0542fe 0%, #0436e4 18%, #03229a 38%, #020b3d 62%, #000 86%);
}
.ox-sky-people {
    will-change: transform;
}
.ox-sky-person {
    position: absolute;
    bottom: 0;
    width: auto;
    max-width: none;
    animation: ox-sky-rise 1.3s cubic-bezier(.22, 1, .36, 1) backwards;
}
.ox-sky-person.is-1 {
    left: 17%;
    height: 86%;
}
.ox-sky-person.is-2 {
    left: 1%;
    height: 44%;
    animation-delay: .12s;
}
.ox-sky-person.is-3 {
    right: 3%;
    height: 104%;
    animation-delay: .24s;
}
.ox-sky-dim {
    background: #010126;
    opacity: 0;
}
.ox-sky-hero {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 130px 0 190px;
}
.ox-sky.is-live .ox-sky-hero {
    position: absolute;
    inset: 0;
    will-change: transform, opacity;
}
.ox-sky-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.ox-sky-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(40px, 6vw, 86px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.025em;
    text-shadow: 0 2px 32px rgba(0, 0, 0, .3);
}
.ox-sky-sub {
    margin: 0 0 30px;
    color: #fff;
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.5;
}
.ox-sky-mode {
    display: inline-flex;
    margin-bottom: 26px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(20, 20, 22, .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.ox-sky-mode button {
    padding: 9px 20px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: rgba(255, 255, 255, .75);
    font-size: 16px;
    font-weight: 600;
    transition: background-color .2s, color .2s;
}
.ox-sky-mode button[aria-selected="true"] {
    background: #0c0c0e;
    color: #fff;
}
.ox-sky-search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(100%, 680px);
    padding: 7px 7px 7px 24px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(22, 23, 25, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: border-color .2s, box-shadow .2s;
}
.ox-sky-search:focus-within {
    border-color: rgba(71, 91, 255, .8);
    box-shadow: 0 0 0 4px rgba(71, 91, 255, .22);
}
.ox-sky-search > i {
    color: rgba(255, 255, 255, .7);
    font-size: 22px;
}
.ox-sky-search input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 18px;
    outline: none;
}
.ox-sky-search input[type="text"]::placeholder {
    color: rgba(255, 255, 255, .55);
}
.ox-sky-search button {
    flex: none;
    height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: #475bff;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: background-color .2s;
}
.ox-sky-search button:hover {
    background: #3346f0;
}
.ox-sky-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}
.ox-sky-chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(28, 28, 32, .8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.ox-sky-chips i {
    color: rgba(255, 255, 255, .85);
    font-size: 18px;
}
.ox-sky-card {
    position: absolute;
    right: 16px;
    bottom: calc(24px + var(--ox-hdr-top, 0px));
    left: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 680px;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    background: rgba(22, 23, 24, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #fff;
    transition: border-color .2s;
}
.ox-sky-card:hover {
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.ox-sky-card-art {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2a3cff, #0a0f6b);
    font-size: 32px;
}
.ox-sky-card-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    text-align: left;
}
.ox-sky-card-label {
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
}
.ox-sky-card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.ox-sky-card-desc {
    color: rgba(255, 255, 255, .62);
    font-size: 14.5px;
    line-height: 1.45;
}
.ox-sky-card-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s, color .2s;
}
.ox-sky-card:hover .ox-sky-card-btn {
    background: var(--ox-surface);
    color: #0c0c0e;
}
.ox-sky-scene {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    background: #010133;
}
.ox-sky.is-live .ox-sky-scene {
    position: absolute;
    z-index: 3;
    inset: 0;
    opacity: 0;
    visibility: hidden;
}
.ox-sky-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}
.ox-sky-scene::after {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(1, 1, 51, .5), rgba(1, 1, 51, .2) 70%, rgba(1, 1, 51, .55));
    content: "";
}
.ox-sky-copy {
    position: relative;
    z-index: 1;
    text-align: center;
    will-change: transform, opacity;
}
.ox-sky-copy h2 {
    max-width: 920px;
    margin: 0 auto 22px;
    color: #fff;
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
}
.ox-sky-copy p {
    max-width: 760px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .8);
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.55;
}
@keyframes ox-sky-appear {
    from {
        opacity: 0;
        transform: translateY(26px);
        filter: blur(10px);
    }
}
@keyframes ox-sky-rise {
    from {
        opacity: 0;
        transform: translateY(70px);
    }
}
.ox-appear {
    animation: ox-sky-appear .95s cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: var(--d, 0s);
}
@media (prefers-reduced-motion: reduce) {
    .ox-appear,
    .ox-sky-person {
        animation: none;
    }
}
@media (max-width: 991px) {
    .ox-sky-person.is-1 {
        left: 2%;
        height: 64%;
    }
    .ox-sky-person.is-2 {
        left: 30%;
        height: 32%;
    }
    .ox-sky-person.is-3 {
        right: -18%;
        height: 84%;
    }
    .ox-sky-hero {
        padding: 120px 0 170px;
    }
}
@media (max-width: 575px) {
    .ox-sky-hero {
        padding: 110px 0 150px;
    }
    .ox-sky-hero h1 {
        text-wrap: balance;
    }
    .ox-sky-hero h1 br {
        display: none;
    }
    .ox-sky-sub {
        margin-bottom: 24px;
    }
    .ox-sky-mode button {
        padding: 8px 18px;
        font-size: 15px;
    }
    .ox-sky-search {
        gap: 8px;
        padding: 5px 5px 5px 16px;
    }
    .ox-sky-search > i {
        display: none;
    }
    .ox-sky-search input[type="text"] {
        height: 44px;
        font-size: 16px;
    }
    .ox-sky-search button {
        height: 44px;
        padding: 0 18px;
    }
    .ox-sky-chips li {
        padding: 8px 13px;
        font-size: 14px;
    }
    .ox-sky-card {
        gap: 14px;
        padding: 10px;
        border-radius: 20px;
    }
    .ox-sky-card-art {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        font-size: 24px;
    }
    .ox-sky-card-desc,
    .ox-sky-card-label {
        display: none;
    }
    .ox-sky-card-title {
        font-size: 15.5px;
    }
    .ox-sky-card-btn {
        padding: 9px 14px;
        font-size: 14px;
    }
}
@media (max-height: 720px) and (min-width: 576px) {
    .ox-sky-card {
        display: none;
    }
    .ox-sky-hero {
        padding-bottom: 90px;
    }
}

/* Dark mode: html[data-theme="dark"], set before the page draws (header.tpl) and switched by the
   header button (custom/js/theme-toggle.js). Surfaces, cards and text follow the colour tokens.
   Heroes, the home story, the FAQ band and the footer look the same in both modes, so they keep the
   light token values. */
html {
    color-scheme: light;
}
html[data-theme="dark"] {
    color-scheme: dark;
    --ox-surface: #0f1729;
    --ox-n-0: #0f1729;
    --ox-n-25: #0d1526;
    --ox-n-50: #0b1222;
    --ox-n-100: #17213a;
    --ox-n-200: #223050;
    --ox-n-300: #304064;
    --ox-n-400: #66748f;
    --ox-n-500: #9ca7bc;
    --ox-n-700: #cfd6e3;
    --ox-n-900: #f2f5fa;
    --ox-brand-50: rgba(26, 108, 245, .16);
    --ox-brand-700: #8fb6ff;
    --white: #0f1729;
}
html[data-theme="dark"] :is(.ox-phero, .home-hero, .ox-sky, .ox-pagehead, .banner.one, .ox-faq-band, .theme-footer, .ox-auth-aside,
    .ox-proof, .ox-plan.is-featured, .ox-domain-transfer, .sectionbg4, .ox-fcard, .ox-wd-cta, .ox-promo, .ox-dside, .ox-balance,
    .ox-sslc.is-wide, .ox-lk-raw, .ox-oheader, .ox-media-panel, .ox-why-ui, .ox-ess-media, .ox-tip, .ox-sslv-browser,
    .promo-container) {
    color-scheme: light;
    --ox-surface: #fff;
    --ox-n-0: #ffffff;
    --ox-n-25: #f8fafd;
    --ox-n-50: #f2f5fb;
    --ox-n-100: #e9eef7;
    --ox-n-200: #dde4f0;
    --ox-n-300: #c5cfe0;
    --ox-n-400: #8792ab;
    --ox-n-500: #4f5c7a;
    --ox-n-700: #24304d;
    --ox-n-900: #0a1433;
    --ox-brand-50: #eff4ff;
    --ox-brand-700: #1849a9;
    --white: #fff;
}
html[data-theme="dark"] body {
    background-color: var(--ox-surface);
    color: var(--ox-n-700);
}
html[data-theme="dark"] .ox-plan.is-featured {
    border-color: #2f5bff;
    background: linear-gradient(160deg, #0b2a8f 0%, #031242 100%);
}
html[data-theme="dark"] :is(.ox-cycle-tabs, .ox-tr-tabs) button[aria-selected="true"],
html[data-theme="dark"] .ox-tld-filter button[aria-selected="true"],
html[data-theme="dark"] .ox-tip-item.is-open .ox-tip-num {
    border-color: var(--ox-brand);
    background: var(--ox-brand);
    color: #fff;
}
html[data-theme="dark"] :is(.ox-fcard, .ox-proof, .ox-domain-transfer, .sectionbg4, .ox-wd-cta, .ox-lk-raw pre) {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .ox-ask {
    background: radial-gradient(ellipse 50% 110% at 50% 0%, rgba(59, 149, 234, .32) 0%, rgba(59, 149, 234, 0) 100%), #0b1430;
}
html[data-theme="dark"] .ox-ask h2 {
    color: #fff;
}
html[data-theme="dark"] .ox-ask-btn {
    background: #fff;
    color: #031243;
}
html[data-theme="dark"] .ox-ask-btn:hover {
    background: var(--ox-brand);
    color: #fff;
}
html[data-theme="dark"] :is(.features-4, .feature-box, .features-2, .free-ad-ons, .accordion > li:not(.ox-faq-list > li), .ulcollapse li, .plan-style-one,
    .domain-pricing-table, .domain-search-form, .contact .info, .homepage-domain-search .domain-lists li, .btns.two,
    .just-one-click .swiper-just-one-click .inner) {
    border-color: var(--ox-n-200);
    background: var(--ox-surface);
}
html[data-theme="dark"] :is(.homepage-domain-search .homepage-domain-form input[type="text"], .contact form :is(input, textarea)) {
    border-color: var(--ox-n-200);
    background: var(--ox-n-25);
    color: var(--ox-n-900);
}
html[data-theme="dark"] .ox-hd-logo {
    width: fit-content;
    height: 52px;
    margin: 0 auto;
    padding: 6px 14px;
    border-radius: 12px;
    background: #fff;
}
html[data-theme="dark"] :is(.ox-media-photo, .ox-why-photo, .ox-ess-photo) {
    filter: brightness(.9);
}

/* Theme switch in the headers */
.ox-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 18px;
    transition: background-color .2s, border-color .2s;
}
.ox-theme-toggle:hover {
    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .14);
}
.ox-theme-toggle .ri-sun-line,
html[data-theme="dark"] .ox-theme-toggle .ri-moon-line {
    display: none;
}
html[data-theme="dark"] .ox-theme-toggle .ri-sun-line {
    display: inline;
}
.ox-theme-toggle.ox-dtop-icon {
    border-color: var(--ox-n-200);
    background: none;
    color: var(--ox-n-700);
}
.nav-mobiles .ox-theme-toggle {
    width: 36px;
    height: 36px;
    margin-right: 6px;
    font-size: 17px;
}
/* The domain search app (WHMCS's Nexus app in its own Shadow DOM) has fixed light styling of its
   own, so in dark mode it sits on a light panel with the light colour values */
html[data-theme="dark"] #order-standard_cart.ox-dreg #nexus-root {
    color-scheme: light;
    padding: 28px;
    border-radius: 24px;
    background: #fff;
    --ox-surface: #fff;
    --ox-n-0: #ffffff;
    --ox-n-25: #f8fafd;
    --ox-n-50: #f2f5fb;
    --ox-n-100: #e9eef7;
    --ox-n-200: #dde4f0;
    --ox-n-300: #c5cfe0;
    --ox-n-400: #8792ab;
    --ox-n-500: #4f5c7a;
    --ox-n-700: #24304d;
    --ox-n-900: #0a1433;
}
html[data-theme="dark"] #order-standard_cart .domain-selection-options {
    background: transparent;
}

/* Framer-style motion (custom/js/ox-motion.js): content fades, sharpens and rises into place as it
   scrolls into view, artwork cards drift, photos move with a light parallax, and soft glows sit
   behind the photo panels. Reduced motion turns it all off. */
.ox-reveal {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 28px, 0) scale(.985);
    transition: opacity .9s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--ox-rd, 0s);
}
.ox-reveal.is-in {
    opacity: 1;
    filter: none;
    transform: none;
}
@keyframes ox-drift {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -9px; }
}
.ox-media-panel,
.ox-why-ui {
    animation: ox-drift 7s ease-in-out infinite;
}
.ox-media-col:nth-of-type(2n) .ox-media-panel,
.homepage-features:nth-child(2n) .ox-why-ui {
    animation-delay: -3.5s;
}
.ox-media-col {
    position: relative;
    isolation: isolate;
}
.ox-media-col::before,
.ox-media-col::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.ox-media-col::before {
    top: 6%;
    right: 2%;
    width: 46%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(26, 108, 245, .28), rgba(26, 108, 245, 0) 70%);
    filter: blur(10px);
    animation: ox-drift 9s ease-in-out infinite;
}
.ox-media-col::after {
    bottom: 4%;
    left: 4%;
    width: 22%;
    aspect-ratio: 1;
    border: 1.5px solid rgba(26, 108, 245, .22);
    animation: ox-drift 11s ease-in-out -4s infinite;
}
.ox-media-photo,
.ox-why-photo,
.ox-ess-photo {
    will-change: translate;
}
@media (prefers-reduced-motion: reduce) {
    .ox-reveal {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }
    .ox-media-panel,
    .ox-why-ui,
    .ox-media-col::before,
    .ox-media-col::after {
        animation: none;
    }
}
.ox-chips.is-logos li {
    gap: 11px;
    min-height: 54px;
    padding: 10px 22px 10px 16px;
    background: #fff;
    color: #101828;
}
.ox-chips.is-logos li img {
    width: 26px;
    height: 26px;
}
.ox-chips.is-logos li.is-wordmark {
    padding: 10px 22px;
}
.ox-chips.is-logos li.is-wordmark img {
    width: auto;
    height: 26px;
}
html[data-theme="dark"] .ox-chips.is-logos li {
    border-color: transparent;
}
@media (max-width: 575px) {
    .ox-chips.is-logos li {
        min-height: 46px;
        padding: 8px 16px 8px 12px;
    }
    .ox-chips.is-logos li img,
    .ox-chips.is-logos li.is-wordmark img {
        height: 22px;
    }
    .ox-chips.is-logos li img {
        width: 22px;
    }
}

/* Server Management hero panel (includes/ox-hero-admin.tpl) */
.ox-adm-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #6ce9a6;
    box-shadow: 0 0 0 0 rgba(108, 233, 166, .6);
    animation: ox-adm-pulse 2s ease-out infinite;
}
@keyframes ox-adm-pulse {
    70% { box-shadow: 0 0 0 7px rgba(108, 233, 166, 0); }
    100% { box-shadow: 0 0 0 0 rgba(108, 233, 166, 0); }
}
.ox-adm-meters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 6px;
}
.ox-adm-meter {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 6px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    font-size: 13px;
}
.ox-adm-meter span {
    color: rgba(255, 255, 255, .65);
}
.ox-adm-meter b {
    color: #fff;
    font-weight: 700;
}
.ox-adm-meter i {
    grid-column: 1 / -1;
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}
.ox-adm-meter i::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--v);
    border-radius: inherit;
    background: linear-gradient(90deg, #5b9bff, #8fb6ff);
    content: "";
}
@media (max-width: 575px) {
    .ox-adm-meters {
        gap: 6px;
    }
    .ox-adm-meter {
        padding: 10px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ox-adm-dot {
        animation: none;
    }
}

/* Email audience pages (email-for-small-teams, email-for-growing-companies, google-workspace-for-teams) */
.ox-inbox-apps {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.ox-inbox-apps span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
}
.ox-inbox-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ox-inbox-me {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9bff, #1a6cf5);
    color: #fff;
    font-weight: 700;
}
.ox-inbox-who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    color: #fff;
}
.ox-inbox-who b {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ox-inbox-who small {
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
}
.ox-inbox-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-inbox-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
}
.ox-inbox-list li.is-new {
    background: rgba(91, 155, 255, .12);
}
.ox-inbox-av {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.ox-inbox-msg {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    color: #fff;
}
.ox-inbox-msg b,
.ox-inbox-msg small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ox-inbox-msg b {
    font-size: 14px;
    font-weight: 600;
}
.ox-inbox-msg small {
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
}
.ox-inbox-meta {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
}
.ox-inbox-meta em {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .9);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}
.ox-gw-apps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.ox-gw-app {
    padding: 24px;
    border: 1px solid var(--ox-n-200);
    border-radius: 18px;
    background: var(--ox-surface);
    transition: border-color .2s, transform .2s;
}
.ox-gw-app:hover {
    border-color: var(--ox-brand);
    transform: translateY(-3px);
}
.ox-gw-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    background: #fff;
}
.ox-gw-app h3 {
    margin: 0 0 8px;
    color: var(--ox-n-900);
    font-size: 18px;
    font-weight: 700;
}
.ox-gw-app p {
    margin: 0;
    color: var(--ox-n-700);
    font-size: 15px;
    line-height: 1.55;
}
.ox-mp-icon img {
    display: block;
}
.ox-cmp {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 940px;
    margin: 0 auto;
}
.ox-cmp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px;
    border: 1px solid var(--ox-n-200);
    border-radius: 22px;
    background: var(--ox-surface);
}
.ox-cmp-card.is-pick {
    border: 2px solid var(--ox-brand);
}
.ox-cmp-tag {
    position: absolute;
    top: -13px;
    left: 32px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--ox-brand);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}
.ox-cmp-card h3 {
    margin: 0 0 8px;
    color: var(--ox-n-900);
    font-size: 22px;
    font-weight: 700;
}
.ox-cmp-card > p {
    margin: 0 0 18px;
    color: var(--ox-n-700);
    font-size: 15.5px;
    line-height: 1.6;
}
.ox-cmp-card .ox-tcheck {
    flex: 1;
    margin-bottom: 24px;
}
.ox-cmp-card .ox-tx-btn {
    align-self: flex-start;
}
.ox-cmp-table {
    max-width: 980px;
    margin: 0 auto;
    overflow-x: auto;
    border: 1px solid var(--ox-n-200);
    border-radius: 20px;
    background: var(--ox-surface);
}
.ox-cmp-table table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    table-layout: fixed;
}
.ox-cmp-table thead th:first-child {
    width: 28%;
}
.ox-cmp-table th,
.ox-cmp-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ox-n-100);
    color: var(--ox-n-700);
    font-size: 15px;
    text-align: center;
}
.ox-cmp-table thead th {
    color: var(--ox-n-900);
    font-size: 16px;
    font-weight: 700;
}
.ox-cmp-table tbody th {
    color: var(--ox-n-900);
    font-weight: 600;
    text-align: left;
}
.ox-cmp-table tbody tr:last-child > * {
    border-bottom: 0;
}
.ox-cmp-table .is-pick {
    background: var(--ox-brand-50);
}
.ox-cmp-table thead .is-pick {
    color: var(--ox-brand);
}
.ox-cmp-table .ri-check-line {
    color: #12b76a;
    font-size: 20px;
}
.ox-cmp-table .ri-close-line {
    color: var(--ox-n-400);
    font-size: 20px;
}
.ox-cmp-note {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 980px;
    margin: 18px auto 0;
    color: var(--ox-n-500);
    font-size: 14px;
    text-align: center;
}
.ox-cmp-note i {
    color: var(--ox-brand);
    font-size: 18px;
}
@media (max-width: 1199px) {
    .ox-gw-apps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .ox-cmp {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 575px) {
    .ox-gw-apps {
        grid-template-columns: minmax(0, 1fr);
    }
    .ox-cmp-card {
        padding: 26px 22px;
    }
    .ox-inbox-meta {
        display: none;
    }
}
.ox-phero-text,
.ox-phero-visual {
    min-width: 0;
}

/* SiteLock page: red security accent (sitelock.tpl <main class="ox-sec">, hero tone="red").
   Buttons, prices and plan cards keep the brand blue. */
.ox-sec,
.ox-phero.is-red {
    --ox-red: #d92d20;
    --ox-red-600: #b42318;
    --ox-red-25: #fffbfa;
    --ox-red-50: #fef3f2;
    --ox-red-100: #fee4e2;
    --ox-red-200: #fecdca;
}
html[data-theme="dark"] .ox-sec {
    --ox-red: #f97066;
    --ox-red-25: rgba(240, 68, 56, .05);
    --ox-red-50: rgba(240, 68, 56, .14);
    --ox-red-100: rgba(240, 68, 56, .22);
    --ox-red-200: rgba(240, 68, 56, .36);
}
.ox-phero.is-red::before {
    background:
        radial-gradient(ellipse 45% 55% at 82% 30%, rgba(240, 68, 56, .26), transparent 70%),
        radial-gradient(ellipse 55% 60% at 72% 62%, rgba(59, 149, 234, .24), transparent 70%),
        radial-gradient(ellipse 50% 40% at 15% 105%, rgba(240, 68, 56, .12), transparent 70%);
}
.ox-phero.is-red .ox-phero-ring {
    color: #d92d20;
}
.ox-phero.is-red .ox-phero-ring circle {
    stroke: #d92d20;
}
.ox-sec .features-4 .icon.ox-icon-tile,
.ox-sec .features-3 .icon.ox-icon-tile,
.ox-sec .free-ad-ons .icon.ox-icon-tile {
    background: linear-gradient(135deg, #f97066 0%, #e5372a 45%, #b42318 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    color: #fff;
}
.ox-sec .features-4:hover .icon.ox-icon-tile {
    background: linear-gradient(135deg, #e5372a 0%, #912018 100%);
    color: #fff;
}
.ox-sec .features-5.white .icon.ox-icon-tile {
    background: linear-gradient(135deg, #f04438, #b42318);
    box-shadow: 0 0 0 6px rgba(240, 68, 56, .14);
    color: #fff;
}
.ox-sec .features-3,
.ox-sec .features-4 {
    transition: border-color .2s;
}
.ox-sec .features-3:hover,
.ox-sec .features-4:hover {
    border-color: var(--ox-red-200);
}
.ox-sec .ox-sec-tint {
    background: linear-gradient(180deg, var(--ox-red-25) 0%, var(--ox-red-50) 100%);
}
.ox-sec .free-ad-ons {
    position: relative;
    overflow: hidden;
    border-color: var(--ox-red-100);
    transition: border-color .2s, transform .2s;
}
.ox-sec .free-ad-ons::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #f04438, #f79009);
    content: "";
}
.ox-sec .free-ad-ons:hover {
    border-color: var(--ox-red-200);
    transform: translateY(-3px);
}
.ox-sec-threats-band {
    background: var(--ox-surface);
}
.ox-sec-threats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ox-sec-threats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 16px 22px;
    border: 1px solid var(--ox-red-100);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--ox-red-50) 0%, var(--ox-surface) 70%);
    text-align: center;
}
.ox-sec-threat-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--ox-red);
    color: #fff;
    font-size: 26px;
}
.ox-sec-threat-icon::after {
    position: absolute;
    inset: -6px;
    border: 2px solid var(--ox-red-200);
    border-radius: 50%;
    content: "";
    animation: ox-sec-pulse 2.6s ease-out infinite;
}
.ox-sec-threats li:nth-child(2n) .ox-sec-threat-icon::after {
    animation-delay: -1.3s;
}
@keyframes ox-sec-pulse {
    0% { opacity: .9; transform: scale(.92); }
    70%, 100% { opacity: 0; transform: scale(1.25); }
}
.ox-sec-threats b {
    color: var(--ox-n-900);
    font-size: 16.5px;
    font-weight: 700;
}
.ox-sec-threats small {
    color: var(--ox-n-500);
    font-size: 13.5px;
    line-height: 1.45;
}
.ox-sec .ox-vis {
    position: relative;
}
.ox-vis-row.is-alert {
    margin: 4px -10px 0;
    padding: 11px 10px;
    border-bottom: 0;
    border-radius: 10px;
    background: #fef3f2;
    color: #b42318;
    font-weight: 600;
}
.ox-vis-row.is-alert > i {
    color: #d92d20;
}
.ox-vis-pill.is-danger,
.ox-mp-pill.is-danger {
    background: #fee4e2;
    color: #b42318;
}
.ox-mp-icon.is-danger {
    background: #fee4e2;
    color: #d92d20;
}
.ox-mp-row > i.is-danger {
    color: #d92d20;
}
.ox-sec-float {
    position: absolute;
    right: 28px;
    bottom: -24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 12px 12px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    color: #101828;
    animation: ox-drift 6s ease-in-out infinite;
}
.ox-sec-float-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f04438, #b42318);
    color: #fff;
    font-size: 20px;
}
.ox-sec-float b {
    display: block;
    font-size: 14px;
}
.ox-sec-float small {
    color: #667085;
    font-size: 12.5px;
}
@media (max-width: 1199px) {
    .ox-sec-threats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .ox-sec-threats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .ox-sec-threats li {
        padding: 20px 12px 18px;
    }
    .ox-sec-float {
        right: 12px;
        bottom: -26px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ox-sec-threat-icon::after,
    .ox-sec-float {
        animation: none;
    }
}

/* Sharper body text: one ink colour for running text (Bootstrap's grey and the old theme's greys no
   longer leak through), tighter section headings */
body {
    --bs-body-color: var(--ox-n-700);
    color: var(--ox-n-700);
}
.list-dot-two li,
.ulcollapse li p,
.ox-wh .primary-content {
    color: var(--ox-n-700);
}
.section-heading h2 {
    letter-spacing: -.02em;
}
.section-heading p {
    color: var(--ox-n-500);
    font-size: 17px;
}
.features-4 .icon.ox-icon-tile,
.features-3 .icon.ox-icon-tile,
.free-ad-ons .icon.ox-icon-tile,
.features-5:not(.white) .icon.ox-icon-tile,
.ox-lsc-icon,
.ox-step-icon {
    background: linear-gradient(135deg, #3a86ff 0%, #1a6cf5 45%, #0f4fd1 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    color: #fff;
}
.features-4:hover .icon.ox-icon-tile {
    background: linear-gradient(135deg, #1a6cf5 0%, #0b3fae 100%);
    color: #fff;
}
.features-4 h4,
.features-3 h4,
.free-ad-ons h4 {
    letter-spacing: -.01em;
}

/* Logo: all-white in light mode, white wordmark with the blue icon in dark mode */
html[data-theme="dark"] .ox-logo-light,
html:not([data-theme="dark"]) .ox-logo-dark {
    display: none !important;
}