/**
 * WHMCS Bootstrap Override Sheet
 *
 * These styles override Bootstrap's defaults.
 *
 * @author    WHMCS Limited <development@whmcs.com>
 * @copyright Copyright (c) WHMCS Limited 2005-2016
 * @license   http://www.whmcs.com/license/
 */

body,
input,
button,
select,
textarea {
  font-family: "Open Sans", Verdana, Tahoma, serif;
  color: #333333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.container-fluid.without-padding {
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}

.navbar-main {
    margin-bottom: 0;
    background-color: #0e5077;
    border: 0;
    min-height: 38px;
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
}
.navbar-main li.account {
    background-color: #043d5f;
}

.navbar-main .navbar-nav > li > a {
    color: #fff;
}

.navbar-main .navbar-nav > li > a {
    padding-top: 9px;
    padding-bottom: 9px;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    color: #eee;
    background-color: #043d5f;
}

#main-menu .navbar-nav {
    margin-left: -15px;
    margin-right: -15px;
}

.navbar-main .dropdown-menu {
    padding: 3px 0;
    border-top: 0;
    border-radius: 0;
}
.navbar-main .navbar-nav .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:focus,
.navbar-main .navbar-nav .dropdown-menu > .active > a,
.navbar-main .navbar-nav .dropdown-menu > .active > a:hover,
.navbar-main .navbar-nav .dropdown-menu > .active > a:focus,
.navbar-main .navbar-nav .dropdown-menu > .open > a,
.navbar-main .navbar-nav .dropdown-menu > .open > a:hover,
.navbar-main .navbar-nav .dropdown-menu > .open > a:focus {
    color: #333;
    background-color: #eee;
}

@media (max-width: 767px) {
    .navbar-main .navbar-nav .open .dropdown-menu > li > a {
        color: #ddd;
    }
    .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover {
        color: #fff;
    }
}

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
        margin-bottom: 10px;
    }
}

.panel {
  font-size: 0.9em;
}

.list-group {
  font-size: 0.9em;
}
.list-group-item {
    border-color: #f5f5f5;
}
.list-group-item .badge {
    background-color: transparent;
    color: #666;
}
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background-color: #465054;
    border-color: #465054;
}


.pagination {
    font-size: 0.8em;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    color: white;
    background-color: #006687;
    border-color: #006687;
}

.navbar-main .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    text-decoration: none;
    color: #fff;
    background-color: #006687;
}

.label {
    border-radius: 0;
}

input[type='file'].form-control {
    height: inherit;
    margin-bottom: 5px;
}

.list-group-item {
    padding: 7px 15px;
}
.panel-body {
    padding: 10px 15px;
}

/*
 * We use a larger font-size than the bootstrap default, which requires an increase
 * in the top offset to maintain correct alignment in form control feedback.
 */
.has-feedback label ~ .form-control-feedback {
    top: 27px !important;
}

.list-group-item > i.fa.fa-circle-o {
    color: #808080;
}

/*
 * Language strings which are too long to fit into buttons should be "chopped off" inside the div
 * of that button, instead of "overflowing" outside of the button.  CORE-9272
 */
.btn {
    overflow: hidden;
}

/* =========================================================
   MODERN HOSTING UI
   Elmrooj Hosting
   ========================================================= */

/* ---------- Global ---------- */

:root {
    --hosting-primary: #2563eb;
    --hosting-primary-dark: #1d4ed8;
    --hosting-primary-light: #eff6ff;
    --hosting-dark: #0f172a;
    --hosting-text: #1e293b;
    --hosting-muted: #64748b;
    --hosting-border: #e2e8f0;
    --hosting-bg: #f8fafc;
    --hosting-white: #ffffff;
    --hosting-success: #16a34a;
    --hosting-danger: #dc2626;
    --hosting-radius: 12px;
}

body {
    background: var(--hosting-bg);
    color: var(--hosting-text);
    font-family: "Open Sans", Verdana, Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--hosting-primary);
    transition: color .2s ease;
}

a:hover,
a:focus {
    color: var(--hosting-primary-dark);
}


/* ---------- Main Navbar ---------- */

.navbar-main {
    background: var(--hosting-dark) !important;
    border: 0 !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .12);
    min-height: 54px;
}

.navbar-main .navbar-nav > li > a {
    color: #e2e8f0 !important;
    padding-top: 17px;
    padding-bottom: 17px;
    font-weight: 600;
    transition: all .2s ease;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    color: #fff !important;
    background: rgba(37, 99, 235, .85) !important;
}

.navbar-main li.account {
    background: #172033 !important;
}


/* ---------- Dropdowns ---------- */

.navbar-main .dropdown-menu {
    margin-top: 0;
    padding: 8px 0;
    background: #fff;
    border: 1px solid var(--hosting-border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}

.navbar-main .dropdown-menu > li > a {
    padding: 10px 18px;
    color: var(--hosting-text);
    font-weight: 500;
    transition: all .15s ease;
}

.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .dropdown-menu > li > a:focus {
    color: var(--hosting-primary-dark) !important;
    background: var(--hosting-primary-light) !important;
}


/* ---------- Main Content ---------- */

#main-body {
    background: var(--hosting-bg);
}

.container,
.container-fluid {
    position: relative;
}


/* ---------- Panels ---------- */

.panel {
    background: var(--hosting-white);
    border: 1px solid var(--hosting-border);
    border-radius: var(--hosting-radius);
    box-shadow: 0 4px 16px rgba(15, 23, 42, .05);
    overflow: hidden;
}

.panel-heading {
    background: #fff;
    border-bottom: 1px solid var(--hosting-border);
    padding: 15px 18px;
    font-weight: 700;
    color: var(--hosting-dark);
}

.panel-footer {
    background: #fff;
    border-top: 1px solid var(--hosting-border);
}


/* ---------- Buttons ---------- */

.btn {
    border-radius: 8px;
    font-weight: 600;
    transition: all .2s ease;
    box-shadow: none;
}

.btn-primary {
    background: var(--hosting-primary);
    border-color: var(--hosting-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--hosting-primary-dark) !important;
    border-color: var(--hosting-primary-dark) !important;
    transform: translateY(-1px);
}

.btn-success {
    border-radius: 8px;
}

.btn-danger {
    border-radius: 8px;
}


/* ---------- Form Controls ---------- */

.form-control {
    height: 42px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: none;
    color: var(--hosting-text);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus {
    border-color: var(--hosting-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}


/* ---------- Tables ---------- */

.table {
    background: #fff;
}

.table > thead > tr > th {
    background: #f8fafc;
    color: #475569;
    border-bottom: 1px solid var(--hosting-border);
    font-weight: 700;
}

.table > tbody > tr > td {
    border-color: #eef2f7;
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    background: #f8fbff;
}


/* ---------- List Groups ---------- */

.list-group {
    background: #fff;
}

.list-group-item {
    border-color: var(--hosting-border);
    padding: 12px 16px;
    background: #fff;
}

.list-group-item:hover {
    background: #f8fafc;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background: var(--hosting-primary);
    border-color: var(--hosting-primary);
}


/* ---------- Alerts ---------- */

.alert {
    border-radius: 10px;
    border-width: 1px;
}

.alert-success {
    color: #166534;
}

.alert-danger {
    color: #991b1b;
}


/* ---------- Badges / Labels ---------- */

.label,
.badge {
    border-radius: 6px;
    font-weight: 600;
}

.label-primary {
    background: var(--hosting-primary);
}


/* ---------- Cards ---------- */

.card,
.product,
.product-card,
.plan-card {
    border-radius: var(--hosting-radius);
}


/* ---------- Pagination ---------- */

.pagination > li > a,
.pagination > li > span {
    border-radius: 7px !important;
    margin: 0 2px;
    border-color: var(--hosting-border);
    color: var(--hosting-text);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background: var(--hosting-primary);
    border-color: var(--hosting-primary);
}


/* ---------- Mobile ---------- */

@media (max-width: 767px) {

    .navbar-main .navbar-nav > li > a {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .panel {
        border-radius: 10px;
    }

    .btn {
        border-radius: 7px;
    }

    .form-control {
        height: 44px;
    }
}


/* =========================================================
   EL MROOJ HOST - FULL MODERN COLOR SYSTEM
   ========================================================= */

:root {
    --elm-primary: #2563eb;
    --elm-primary-dark: #1d4ed8;
    --elm-navy: #0f172a;
    --elm-navy-2: #172554;
    --elm-blue-light: #eff6ff;
    --elm-bg: #f8fafc;
    --elm-card: #ffffff;
    --elm-border: #e2e8f0;
    --elm-text: #1e293b;
    --elm-muted: #64748b;
    --elm-success: #16a34a;
    --elm-danger: #dc2626;
    --elm-warning: #d97706;
}

/* ================= BODY ================= */

html,
body {
    background: var(--elm-bg) !important;
    color: var(--elm-text) !important;
}

body {
    font-family: "Open Sans", Arial, sans-serif !important;
}

/* ================= NAVBAR ================= */

.navbar-main,
.navbar-main .navbar {
    background: var(--elm-navy) !important;
    border: 0 !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .18) !important;
}

.navbar-main .navbar-nav > li > a,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > li > a:hover {
    color: #ffffff !important;
    background: transparent !important;
}

.navbar-main .navbar-nav > li.active > a,
.navbar-main .navbar-nav > li.open > a {
    background: var(--elm-primary) !important;
    color: #ffffff !important;
}

.navbar-main .navbar-brand,
.navbar-main .navbar-brand:hover {
    color: #ffffff !important;
}

/* ================= NAV DROPDOWN ================= */

.navbar-main .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid var(--elm-border) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .15) !important;
}

.navbar-main .dropdown-menu > li > a {
    color: var(--elm-text) !important;
    background: #ffffff !important;
}

.navbar-main .dropdown-menu > li > a:hover {
    color: var(--elm-primary) !important;
    background: var(--elm-blue-light) !important;
}

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

.main-content,
section.main-content,
.container {
    color: var(--elm-text);
}

.page-header h1,
.page-header h2,
h1,
h2,
h3,
h4,
h5 {
    color: var(--elm-navy) !important;
}

/* ================= LINKS ================= */

a {
    color: var(--elm-primary);
}

a:hover,
a:focus {
    color: var(--elm-primary-dark);
}

/* ================= PANELS / CARDS ================= */

.panel,
.card,
.well,
.panel-default {
    background: var(--elm-card) !important;
    border: 1px solid var(--elm-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, .07) !important;
}

.panel-heading,
.card-header {
    background: #ffffff !important;
    color: var(--elm-navy) !important;
    border-bottom: 1px solid var(--elm-border) !important;
    font-weight: 700 !important;
}

/* ================= DASHBOARD SERVICE BOX ================= */

.tiles .tile,
.client-home-panels .panel,
.client-home-panels .panel-body {
    background: #ffffff !important;
}

.client-home-panels .panel:hover {
    box-shadow: 0 8px 25px rgba(37, 99, 235, .12) !important;
}

/* ================= BUTTONS ================= */

.btn-primary,
.btn-info,
.btn-success {
    background: var(--elm-primary) !important;
    border-color: var(--elm-primary) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
}

.btn-primary:hover,
.btn-info:hover,
.btn-success:hover {
    background: var(--elm-primary-dark) !important;
    border-color: var(--elm-primary-dark) !important;
}

.btn-default {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: var(--elm-text) !important;
}

.btn-default:hover {
    background: var(--elm-blue-light) !important;
    border-color: var(--elm-primary) !important;
    color: var(--elm-primary) !important;
}

.btn-danger {
    background: var(--elm-danger) !important;
    border-color: var(--elm-danger) !important;
    color: #ffffff !important;
}

/* ================= FORMS ================= */

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: var(--elm-text) !important;
    border-radius: 6px !important;
}

.form-control:focus {
    border-color: var(--elm-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}

/* ================= TABLES ================= */

.table {
    background: #ffffff !important;
    color: var(--elm-text) !important;
}

.table > thead > tr > th {
    background: var(--elm-navy) !important;
    color: #ffffff !important;
    border-color: var(--elm-navy) !important;
}

.table > tbody > tr > td {
    border-color: var(--elm-border) !important;
}

.table > tbody > tr:hover {
    background: var(--elm-blue-light) !important;
}

/* ================= LIST GROUP ================= */

.list-group-item {
    background: #ffffff !important;
    color: var(--elm-text) !important;
    border-color: var(--elm-border) !important;
}

.list-group-item:hover {
    background: var(--elm-blue-light) !important;
    color: var(--elm-primary) !important;
}

/* ================= ALERTS ================= */

.alert {
    border-radius: 7px !important;
}

.alert-success {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

.alert-danger {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.alert-warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.alert-info {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

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

.label-primary,
.badge-primary {
    background: var(--elm-primary) !important;
    color: #ffffff !important;
}

.label-success,
.badge-success {
    background: var(--elm-success) !important;
    color: #ffffff !important;
}

.label-danger,
.badge-danger {
    background: var(--elm-danger) !important;
    color: #ffffff !important;
}

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

.sidebar,
.sidebar-secondary,
.sidebar-primary {
    color: var(--elm-text) !important;
}

.sidebar .panel,
.sidebar .well {
    background: #ffffff !important;
}

.sidebar a {
    color: var(--elm-text) !important;
}

.sidebar a:hover {
    color: var(--elm-primary) !important;
}

/* ================= BREADCRUMB ================= */

.breadcrumb {
    background: transparent !important;
    color: var(--elm-muted) !important;
}

.breadcrumb > li + li:before {
    color: #94a3b8 !important;
}

/* ================= PAGINATION ================= */

.pagination > li > a,
.pagination > li > span {
    color: var(--elm-primary) !important;
    background: #ffffff !important;
    border-color: var(--elm-border) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--elm-primary) !important;
    border-color: var(--elm-primary) !important;
    color: #ffffff !important;
}

/* ================= PRODUCT PRICES ================= */

.price,
.pricing,
.product-price,
.product-price .price {
    color: var(--elm-primary) !important;
}

/* ================= STORE PRODUCTS ================= */

.product,
.product-box,
.package,
.package-box {
    background: #ffffff !important;
    border: 1px solid var(--elm-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .08) !important;
}

.product:hover,
.product-box:hover,
.package:hover,
.package-box:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 10px 30px rgba(37, 99, 235, .14) !important;
}

/* ================= TOP VERIFICATION BAR ================= */

.alert-danger.verifyemail,
.verifyemail {
    background: #dc2626 !important;
    color: #ffffff !important;
}

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

footer,
.footer {
    background: var(--elm-navy) !important;
    color: #cbd5e1 !important;
}

footer a,
.footer a {
    color: #ffffff !important;
}

footer a:hover,
.footer a:hover {
    color: #93c5fd !important;
}

/* ================= HR ================= */

hr {
    border-color: var(--elm-border) !important;
}

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

@media (max-width: 767px) {
    .navbar-main {
        background: var(--elm-navy) !important;
    }

    .panel,
    .card,
    .product,
    .product-box {
        border-radius: 7px !important;
    }
}


/* ===== FORCE FULL PAGE BACKGROUND ===== */

html,
body,
#main-body,
.main-body,
.main-content,
.content-wrapper,
.page-container,
section,
.container-fluid {
    background-color: #f1f5f9 !important;
}

/* المنطقة الرئيسية بين الـ Navbar والـ Footer */
#main-body {
    min-height: calc(100vh - 100px) !important;
}

/* إزالة أي خلفية بيضاء من الحاويات الداخلية */
.main-content > .container,
.main-content > .container-fluid {
    background: transparent !important;
}

/* Dashboard area */
.client-home-panels,
.client-home-panels > div,
.client-home-panels .row {
    background: transparent !important;
}

/* Sidebar */
.sidebar,
.sidebar-primary,
.sidebar-secondary {
    background: transparent !important;
}

/* Store pages */
.store,
.store-page,
.product-group,
.products {
    background: transparent !important;
}


/* =========================================================
   ELMROOJ HOST - FINAL MODERN THEME
   ========================================================= */

:root {
    --elm-navy: #0f172a;
    --elm-navy-light: #1e293b;
    --elm-blue: #2563eb;
    --elm-blue-dark: #1d4ed8;
    --elm-blue-soft: #eff6ff;
    --elm-bg: #f1f5f9;
    --elm-white: #ffffff;
    --elm-border: #dbe3ee;
    --elm-text: #172033;
    --elm-muted: #64748b;
}

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

html,
body {
    background: #f1f5f9 !important;
    color: #172033 !important;
}

body {
    font-family: "Open Sans", Arial, sans-serif !important;
}

/* Main page wrapper */
#main-body,
#main-body .container,
.main-content {
    background: transparent !important;
}

/* =========================================================
   NAVBAR
   ========================================================= */

/* Main navigation */
.navbar-main,
.navbar-main .navbar,
.navbar {
    background: #0f172a !important;
    border: none !important;
    box-shadow: 0 3px 14px rgba(15,23,42,.20) !important;
}

/* Navbar links */
.navbar-main a,
.navbar a {
    color: #ffffff !important;
}

.navbar-main a:hover,
.navbar a:hover {
    color: #93c5fd !important;
}

/* Active/open navigation */
.navbar-main .active > a,
.navbar-main .open > a,
.navbar-main .active > a:hover,
.navbar-main .open > a:hover {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* Dropdown */
.navbar-main .dropdown-menu,
.navbar .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #dbe3ee !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.18) !important;
}

.navbar-main .dropdown-menu a,
.navbar .dropdown-menu a {
    color: #172033 !important;
}

.navbar-main .dropdown-menu a:hover,
.navbar .dropdown-menu a:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}

/* =========================================================
   EMAIL VERIFICATION BAR
   ========================================================= */

.alert-danger,
.verifyemail {
    border: none !important;
}

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

.page-header,
.pageheader {
    border-bottom: 1px solid #dbe3ee !important;
}

.page-header h1,
.pageheader h1 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

.breadcrumb {
    background: transparent !important;
    color: #64748b !important;
}

.breadcrumb a {
    color: #2563eb !important;
}

/* =========================================================
   DASHBOARD TILES
   ========================================================= */

#tiles {
    background: transparent !important;
}

#tiles .tile {
    background: #ffffff !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(15,23,42,.07) !important;
}

#tiles .tile:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 8px 24px rgba(37,99,235,.12) !important;
}

#tiles .tile .tile-icon,
#tiles .tile i {
    color: #2563eb !important;
}

#tiles .tile .tile-number,
#tiles .tile .number {
    color: #2563eb !important;
}

/* =========================================================
   DASHBOARD PANELS
   ========================================================= */

.client-home-panels {
    background: transparent !important;
}

.client-home-panels .panel {
    background: #ffffff !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 16px rgba(15,23,42,.07) !important;
    overflow: hidden !important;
}

.client-home-panels .panel-heading {
    background: #ffffff !important;
    border-bottom: 1px solid #dbe3ee !important;
    color: #0f172a !important;
}

.client-home-panels .panel-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.client-home-panels .panel-body {
    background: #ffffff !important;
}

.client-home-panels .panel-footer {
    background: #f8fafc !important;
    border-top: 1px solid #dbe3ee !important;
}

/* =========================================================
   ACTIVE PRODUCTS / SERVICES
   ========================================================= */

.panel-services .panel-heading {
    background: #0f172a !important;
    color: #ffffff !important;
}

.panel-services .panel-title,
.panel-services .panel-heading a {
    color: #ffffff !important;
}

.panel-services .panel-body {
    background: #ffffff !important;
}

/* Service links */
.panel-services a {
    color: #2563eb !important;
}

.panel-services a:hover {
    color: #1d4ed8 !important;
}

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

.card-sidebar,
.panel-sidebar {
    background: #ffffff !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;
    overflow: hidden !important;
}

.card-sidebar .panel-heading,
.panel-sidebar .panel-heading {
    background: #ffffff !important;
    border-bottom: 1px solid #dbe3ee !important;
}

.card-sidebar .panel-title,
.panel-sidebar .panel-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.card-sidebar .panel-body,
.panel-sidebar .panel-body {
    background: #ffffff !important;
}

/* Sidebar links */
.card-sidebar a,
.panel-sidebar a {
    color: #334155 !important;
}

.card-sidebar a:hover,
.panel-sidebar a:hover {
    color: #2563eb !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary,
.btn-info,
.btn-success {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    border-radius: 6px !important;
}

.btn-primary:hover,
.btn-info:hover,
.btn-success:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

.btn-default {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #172033 !important;
    border-radius: 6px !important;
}

.btn-default:hover {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
}

/* =========================================================
   FORM INPUTS
   ========================================================= */

.form-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #172033 !important;
    border-radius: 6px !important;
}

.form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}

/* =========================================================
   STORE / PRODUCT CARDS
   ========================================================= */

.product,
.product-box,
.package,
.package-box,
.product-group {
    background: #ffffff !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 18px rgba(15,23,42,.07) !important;
}

.product:hover,
.product-box:hover,
.package:hover,
.package-box:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 10px 28px rgba(37,99,235,.13) !important;
}

.product .price,
.product-box .price,
.package .price,
.package-box .price {
    color: #2563eb !important;
}

/* Order Now */
.product .btn-primary,
.product-box .btn-primary,
.package .btn-primary,
.package-box .btn-primary {
    background: #2563eb !important;
    border-color: #2563eb !important;
}

/* =========================================================
   TABLES
   ========================================================= */

.table {
    background: #ffffff !important;
    color: #172033 !important;
}

.table > thead > tr > th {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
}

.table > tbody > tr > td {
    border-color: #e2e8f0 !important;
}

.table > tbody > tr:hover {
    background: #eff6ff !important;
}

/* =========================================================
   ALERTS
   ========================================================= */

.alert-info {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

.alert-success {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

.alert-warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.alert-danger {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

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

.label-primary,
.badge-primary {
    background: #2563eb !important;
}

.label-success,
.badge-success {
    background: #16a34a !important;
}

.label-danger,
.badge-danger {
    background: #dc2626 !important;
}

/* =========================================================
   SEARCH BOX
   ========================================================= */

.kb-search,
.knowledgebase-search,
#knowledgebase-search {
    background: #ffffff !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 8px !important;
}

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

footer,
.footer {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

footer a,
.footer a {
    color: #ffffff !important;
}

footer a:hover,
.footer a:hover {
    color: #93c5fd !important;
}

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

@media (max-width: 767px) {

    .navbar,
    .navbar-main {
        background: #0f172a !important;
    }

    .client-home-panels .panel,
    .card-sidebar,
    .panel-sidebar {
        border-radius: 7px !important;
    }

}


/* =========================================================
   ELMROOJ HOST - NAVY / ROYAL BLUE / CYAN
   ========================================================= */

:root {
    --elm-navy: #111827;
    --elm-navy-2: #1f2937;
    --elm-blue: #3b82f6;
    --elm-blue-dark: #2563eb;
    --elm-cyan: #06b6d4;
    --elm-green: #10b981;
    --elm-red: #ef4444;
    --elm-orange: #f59e0b;
    --elm-bg: #f8fafc;
    --elm-card: #ffffff;
    --elm-border: #e5e7eb;
    --elm-heading: #111827;
    --elm-text: #475569;
    --elm-muted: #94a3b8;
}

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

html,
body {
    background: #f8fafc !important;
    color: #475569 !important;
}

#main-body {
    background: #f8fafc !important;
}

/* =========================
   NAVBAR
   ========================= */

.navbar-main,
.navbar-main .navbar,
.navbar {
    background: #111827 !important;
    border: 0 !important;
    box-shadow: 0 2px 12px rgba(17,24,39,.20) !important;
}

.navbar-main .navbar-brand,
.navbar-main .navbar-brand:hover,
.navbar-main a,
.navbar-main .navbar-nav > li > a {
    color: #ffffff !important;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li.open > a,
.navbar-main .navbar-nav > li.active > a {
    background: #1f2937 !important;
    color: #ffffff !important;
}

/* small cyan accent */
.navbar-main .navbar-nav > li.active > a {
    box-shadow: inset 0 -3px 0 #06b6d4 !important;
}

/* =========================
   NAV DROPDOWN
   ========================= */

.navbar-main .dropdown-menu,
.navbar .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 15px 35px rgba(17,24,39,.16) !important;
}

.navbar-main .dropdown-menu a,
.navbar .dropdown-menu a {
    background: #ffffff !important;
    color: #334155 !important;
}

.navbar-main .dropdown-menu a:hover,
.navbar .dropdown-menu a:hover {
    background: #f0f9ff !important;
    color: #2563eb !important;
}

/* =========================
   HEADINGS
   ========================= */

h1,
h2,
h3,
h4,
h5,
h6,
.page-header h1,
.pageheader h1 {
    color: #111827 !important;
}

/* =========================
   LINKS
   ========================= */

a {
    color: #2563eb;
}

a:hover,
a:focus {
    color: #06b6d4;
}

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

.card-sidebar,
.panel-sidebar {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 3px 12px rgba(15,23,42,.05) !important;
}

.card-sidebar .panel-heading,
.panel-sidebar .panel-heading {
    background: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.card-sidebar .panel-title,
.panel-sidebar .panel-title {
    color: #111827 !important;
}

.card-sidebar a:hover,
.panel-sidebar a:hover {
    color: #2563eb !important;
}

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

.client-home-panels .panel {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 16px rgba(15,23,42,.055) !important;
}

.client-home-panels .panel-heading {
    background: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.client-home-panels .panel-title {
    color: #111827 !important;
}

/* Active services - navy header */
.client-home-panels .panel-services .panel-heading {
    background: #111827 !important;
    border-color: #111827 !important;
}

.client-home-panels .panel-services .panel-heading *,
.client-home-panels .panel-services .panel-heading a {
    color: #ffffff !important;
}

/* =========================
   SERVICE TILE
   ========================= */

#tiles .tile {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 15px rgba(15,23,42,.05) !important;
}

#tiles .tile:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 8px 25px rgba(59,130,246,.12) !important;
}

#tiles .tile i {
    color: #3b82f6 !important;
}

#tiles .tile .tile-number,
#tiles .tile .number {
    color: #3b82f6 !important;
}

/* =========================
   PRIMARY BUTTON
   ========================= */

.btn-primary,
.btn-info,
.btn-success {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-info:hover,
.btn-success:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
}

/* =========================
   SECONDARY BUTTON
   ========================= */

.btn-default {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #334155 !important;
}

.btn-default:hover {
    background: #f0f9ff !important;
    border-color: #93c5fd !important;
    color: #2563eb !important;
}

/* =========================
   ACTIVE STATUS
   ========================= */

.label-success,
.badge-success {
    background: #10b981 !important;
}

/* =========================
   FORM
   ========================= */

.form-control {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #334155 !important;
}

.form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.10) !important;
}

/* =========================
   SEARCH
   ========================= */

.kb-search,
.knowledgebase-search,
#knowledgebase-search {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* =========================
   VERIFICATION BAR
   ========================= */

/* softer red instead of aggressive pure red */
.verifyemail,
.alert-danger.verifyemail {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* =========================
   PRODUCT / STORE CARDS
   ========================= */

.product,
.product-box,
.package,
.package-box {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 5px 18px rgba(15,23,42,.06) !important;
}

.product:hover,
.product-box:hover,
.package:hover,
.package-box:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 10px 28px rgba(59,130,246,.12) !important;
}

/* Prices */
.product .price,
.product-box .price,
.package .price,
.package-box .price {
    color: #2563eb !important;
}

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

.table > thead > tr > th {
    background: #111827 !important;
    color: #ffffff !important;
}

.table > tbody > tr:hover {
    background: #f0f9ff !important;
}

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

footer,
.footer {
    background: #111827 !important;
    color: #cbd5e1 !important;
}

footer a,
.footer a {
    color: #ffffff !important;
}

footer a:hover,
.footer a:hover {
    color: #06b6d4 !important;
}

/* =========================
   SEPARATORS
   ========================= */

hr {
    border-color: #e5e7eb !important;
}


/* =========================================================
   ELMROOJ HOST
   PREMIUM HOSTING DASHBOARD UI
   ========================================================= */

/* ---------- GLOBAL LAYOUT ---------- */

html,
body {
    background: #f6f8fc !important;
}

body {
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    color: #475569 !important;
}

/* Give the portal more breathing room */
#main-body {
    background: #f6f8fc !important;
    padding-top: 30px !important;
    padding-bottom: 50px !important;
}

#main-body > .container {
    max-width: 1250px !important;
}

/* ---------- NAVBAR ---------- */

.navbar-main,
.navbar-main .navbar {
    min-height: 64px !important;
    background: #111827 !important;
    box-shadow: 0 4px 18px rgba(15,23,42,.16) !important;
}

.navbar-main .navbar-nav > li > a {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    font-weight: 600 !important;
}

.navbar-main .navbar-brand {
    font-size: 18px !important;
    font-weight: 800 !important;
}

/* ---------- PAGE HEADER ---------- */

.page-header,
.pageheader {
    margin-bottom: 25px !important;
    border: 0 !important;
}

.page-header h1,
.pageheader h1 {
    font-size: 30px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: -.5px !important;
    color: #111827 !important;
}

.breadcrumb {
    margin-top: 7px !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
}

/* ---------- SIDEBAR ---------- */

.card-sidebar,
.panel-sidebar {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 18px rgba(15,23,42,.055) !important;
    margin-bottom: 18px !important;
    overflow: hidden !important;
}

.card-sidebar .panel-heading,
.panel-sidebar .panel-heading {
    padding: 15px 17px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.card-sidebar .panel-title,
.panel-sidebar .panel-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.card-sidebar .panel-body,
.panel-sidebar .panel-body {
    padding: 16px !important;
}

/* ---------- ALL PANELS ---------- */

.panel {
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 18px rgba(15,23,42,.055) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.panel-heading {
    padding: 16px 18px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.panel-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.panel-body {
    padding: 18px !important;
}

/* ---------- PRODUCT / SERVICE HEADER ---------- */

/* Managing product page */
#main-body h1 {
    color: #111827 !important;
}

/* ---------- CPANEL SERVICE CARD ---------- */

/* Make the service overview feel like a dashboard */
.client-home-panels .panel,
.panel-services {
    border-radius: 14px !important;
}

/* ---------- SERVICE STATUS ---------- */

.label-success,
.badge-success {
    padding: 5px 10px !important;
    border-radius: 20px !important;
    background: #10b981 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* ---------- BUTTONS ---------- */

.btn {
    border-radius: 7px !important;
    font-weight: 600 !important;
    transition: all .18s ease !important;
}

.btn-primary,
.btn-info {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 3px 8px rgba(59,130,246,.18) !important;
}

.btn-primary:hover,
.btn-info:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
    transform: translateY(-1px);
}

.btn-default {
    background: #ffffff !important;
    border-color: #d7dee8 !important;
}

.btn-danger {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}

/* ---------- FORMS ---------- */

.form-control {
    min-height: 40px !important;
    border-radius: 7px !important;
    border: 1px solid #d8dee8 !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.10) !important;
}

/* ---------- TABLES ---------- */

.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
}

.table > thead > tr > th {
    padding: 12px 14px !important;
    background: #f8fafc !important;
    color: #334155 !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.table > tbody > tr > td {
    padding: 12px 14px !important;
    border-color: #eef2f7 !important;
    vertical-align: middle !important;
}

.table > tbody > tr:hover {
    background: #f8fbff !important;
}

/* ---------- LINKS ---------- */

a {
    color: #2563eb;
    font-weight: 500;
}

a:hover {
    color: #06b6d4;
    text-decoration: none !important;
}

/* ---------- PRODUCT DETAIL ELEMENTS ---------- */

/* cPanel / usage blocks */
.progress {
    height: 9px !important;
    border-radius: 20px !important;
    background: #e8edf4 !important;
    box-shadow: none !important;
}

.progress-bar {
    border-radius: 20px !important;
    background: #3b82f6 !important;
}

/* ---------- WORDPRESS SECTION ---------- */

[id*="wordpress"],
[class*="wordpress"] {
    border-radius: 10px !important;
}

/* ---------- EMAIL SECTION ---------- */

[id*="email"],
[class*="email"] {
    border-radius: 10px !important;
}

/* ---------- DOMAIN / SEARCH BOX ---------- */

.domainchecker,
.domain-search,
.domain-search-box {
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    box-shadow: 0 4px 18px rgba(15,23,42,.05) !important;
}

/* ---------- SEARCH ---------- */

input[type="search"],
input[placeholder*="question"],
input[placeholder*="search"] {
    border-radius: 8px !important;
}

/* ---------- ALERT ---------- */

.alert {
    border-radius: 9px !important;
}

/* ---------- FOOTER ---------- */

footer,
.footer {
    margin-top: 50px !important;
    background: #111827 !important;
    color: #94a3b8 !important;
}

/* =========================================================
   PREMIUM PRODUCT PAGE
   ========================================================= */

/* Make columns less cramped */
.row {
    --bs-gutter-x: 24px;
}

/* Cards used throughout product management */
.panel,
.card,
.well {
    transition: box-shadow .18s ease, border-color .18s ease;
}

.panel:hover,
.card:hover {
    border-color: #dbe5f1 !important;
}

/* Headings inside service page */
#main-body h2 {
    font-size: 20px !important;
    font-weight: 750 !important;
    color: #111827 !important;
}

#main-body h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

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

@media (max-width: 991px) {

    #main-body {
        padding-top: 20px !important;
    }

    .page-header h1,
    .pageheader h1 {
        font-size: 25px !important;
    }

}

@media (max-width: 767px) {

    .navbar-main,
    .navbar-main .navbar {
        min-height: 56px !important;
    }

    .panel,
    .card,
    .card-sidebar,
    .panel-sidebar {
        border-radius: 9px !important;
    }

    .panel-body {
        padding: 15px !important;
    }

}


/* =========================================================
   ELMROOJ HOST - WIDE DESKTOP LAYOUT
   ========================================================= */

/* Main WHMCS container */
#main-body > .container,
#main-body .container {
    width: 94% !important;
    max-width: 1450px !important;
}

/* Give the main content more usable width */
#main-body {
    width: 100% !important;
}

/* Page content */
#main-body .row {
    margin-left: -12px !important;
    margin-right: -12px !important;
}

/* Sidebar breathing room */
#main-body .sidebar {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Main content breathing room */
#main-body .main-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Product/service cards use available width */
#main-body .panel,
#main-body .card {
    width: 100%;
}

/* Product management top area */
#main-body .product-details,
#main-body .service-details {
    width: 100%;
}

/* Keep content centered on very large screens */
@media (min-width: 1500px) {
    #main-body > .container,
    #main-body .container {
        width: 92% !important;
        max-width: 1500px !important;
    }
}

/* Tablet */
@media (max-width: 991px) {
    #main-body > .container,
    #main-body .container {
        width: 94% !important;
        max-width: none !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #main-body > .container,
    #main-body .container {
        width: 96% !important;
    }
}


/* =========================================================
   ELMROOJ HOST
   MANAGING SERVICE - SECTION SPACING
   ========================================================= */

/* Main product page spacing */
#main-body .main-content {
    padding-bottom: 40px !important;
}

/* -----------------------------------------
   TOP SERVICE INFORMATION
   ----------------------------------------- */

#main-body .main-content > .row:first-of-type {
    margin-bottom: 28px !important;
}

/* Top cards */
#main-body .main-content .panel,
#main-body .main-content .card {
    margin-bottom: 24px !important;
}

/* -----------------------------------------
   WORDPRESS SITES SECTION
   ----------------------------------------- */

#main-body .main-content [class*="wordpress"],
#main-body .main-content [id*="wordpress"] {
    margin-bottom: 22px !important;
}

/* WordPress header card */
#main-body .main-content .wp-sites,
#main-body .main-content .wordpress-sites {
    margin-top: 26px !important;
    margin-bottom: 24px !important;
}

/* -----------------------------------------
   WEBSITE PREVIEW CARD
   ----------------------------------------- */

#main-body .main-content .card,
#main-body .main-content .panel {
    border-radius: 12px !important;
}

/* -----------------------------------------
   WORDPRESS MANAGEMENT
   ----------------------------------------- */

#main-body .main-content form {
    margin-bottom: 18px !important;
}

/* -----------------------------------------
   EMAIL SECTION
   ----------------------------------------- */

/* Separate email area from WordPress */
#main-body .main-content h2,
#main-body .main-content h3 {
    margin-top: 28px !important;
    margin-bottom: 14px !important;
}

/* -----------------------------------------
   EMAIL CREATE AREA
   ----------------------------------------- */

#main-body .main-content table {
    margin-top: 12px !important;
    margin-bottom: 22px !important;
}

/* -----------------------------------------
   BILLING SECTION
   ----------------------------------------- */

#main-body .main-content .nav-tabs {
    margin-top: 24px !important;
}

#main-body .main-content .tab-content {
    margin-bottom: 25px !important;
}

/* -----------------------------------------
   VISUAL SEPARATORS
   ----------------------------------------- */

#main-body .main-content hr {
    margin-top: 26px !important;
    margin-bottom: 26px !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* -----------------------------------------
   SECTION TITLE
   ----------------------------------------- */

#main-body .main-content h3 {
    font-weight: 750 !important;
    color: #111827 !important;
}

/* -----------------------------------------
   EMAIL ACCOUNT ROWS
   ----------------------------------------- */

#main-body .main-content .table tbody tr {
    transition: background .15s ease;
}

#main-body .main-content .table tbody tr:hover {
    background: #f8fbff !important;
}

/* -----------------------------------------
   BUTTON GROUPS
   ----------------------------------------- */

#main-body .main-content .btn-group {
    gap: 5px !important;
}

/* -----------------------------------------
   DOMAIN / BILLING CARD
   ----------------------------------------- */

#main-body .main-content .panel-footer {
    padding: 14px 18px !important;
}

/* -----------------------------------------
   LARGE SCREEN
   ----------------------------------------- */

@media (min-width: 1200px) {

    #main-body .main-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

}

/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width: 767px) {

    #main-body .main-content .panel,
    #main-body .main-content .card {
        margin-bottom: 16px !important;
    }

    #main-body .main-content h2,
    #main-body .main-content h3 {
        margin-top: 20px !important;
    }

}



/* =========================================================
   ELMROOJ NAVBAR - MODERN HOVER DROPDOWNS
   ========================================================= */

@media (min-width: 992px) {

    /* Main navbar items */
    .navbar-nav > .nav-item {
        position: relative !important;
    }

    .navbar-nav > .nav-item > .nav-link {
        position: relative !important;
        transition:
            color .22s ease,
            background-color .22s ease,
            transform .22s ease !important;
        border-radius: 7px !important;
    }

    /* Hover effect */
    .navbar-nav > .nav-item:hover > .nav-link,
    .navbar-nav > .nav-item > .nav-link:hover {
        color: #4da3ff !important;
        background: rgba(255,255,255,.07) !important;
        transform: translateY(-1px) !important;
    }

    /* Small animated line */
    .navbar-nav > .nav-item > .nav-link::after {
        content: "" !important;
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 3px !important;
        height: 2px !important;
        background: #4da3ff !important;
        border-radius: 10px !important;

        transform: scaleX(0) !important;
        transform-origin: center !important;
        transition: transform .22s ease !important;
    }

    .navbar-nav > .nav-item:hover > .nav-link::after,
    .navbar-nav > .nav-item > .nav-link:hover::after {
        transform: scaleX(1) !important;
    }


    /* -----------------------------------------------------
       DROPDOWN
       ----------------------------------------------------- */

    .navbar-nav .dropdown-menu {
        display: block !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform:
            translateY(8px)
            scale(.98) !important;

        transform-origin: top center !important;

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease !important;

        pointer-events: none !important;

        margin-top: 7px !important;

        min-width: 205px !important;

        padding: 7px !important;

        background: #ffffff !important;

        border: 1px solid #e1e8f1 !important;
        border-radius: 10px !important;

        box-shadow:
            0 12px 35px rgba(15, 35, 65, .16),
            0 2px 8px rgba(15, 35, 65, .06) !important;

        z-index: 99999 !important;
    }


    /* OPEN ON HOVER */
    .navbar-nav .dropdown:hover > .dropdown-menu,
    .navbar-nav .dropdown.show:hover > .dropdown-menu,
    .navbar-nav .dropdown:focus-within > .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;

        transform:
            translateY(0)
            scale(1) !important;

        pointer-events: auto !important;
    }


    /* Dropdown items */
    .navbar-nav .dropdown-menu .dropdown-item {
        position: relative !important;

        padding: 9px 12px !important;

        border-radius: 7px !important;

        color: #26364d !important;

        font-size: 13px !important;
        font-weight: 500 !important;

        transition:
            background-color .16s ease,
            color .16s ease,
            padding-left .16s ease,
            transform .16s ease !important;
    }


    /* Dropdown item hover */
    .navbar-nav .dropdown-menu .dropdown-item:hover,
    .navbar-nav .dropdown-menu .dropdown-item:focus {
        color: #1677ff !important;

        background: #f1f6ff !important;

        padding-left: 16px !important;

        transform: translateX(2px) !important;
    }


    /* Arrow animation */
    .navbar-nav > .dropdown > .dropdown-toggle::after {
        transition: transform .2s ease !important;
    }

    .navbar-nav > .dropdown:hover > .dropdown-toggle::after {
        transform: rotate(180deg) !important;
    }


    /* Keep dropdown attached visually to navbar */
    .navbar-nav .dropdown-menu::before {
        content: "" !important;

        position: absolute !important;

        top: -6px !important;
        left: 20px !important;

        width: 11px !important;
        height: 11px !important;

        background: #ffffff !important;

        border-left: 1px solid #e1e8f1 !important;
        border-top: 1px solid #e1e8f1 !important;

        transform: rotate(45deg) !important;
    }
}


/* =========================================================
   NAVBAR MOBILE
   Keep normal Bootstrap click behavior
   ========================================================= */

@media (max-width: 991px) {

    .navbar-nav .dropdown-menu {
        display: none;
    }

    .navbar-nav .dropdown.show > .dropdown-menu {
        display: block;
    }
}

/* =========================================================
   MAZEN HOSTING STORE - FULL WIDTH SIDEBAR + PRICING
   ========================================================= */

/* Make the hosting store use the full browser width */
#order-standard_cart {
    width: 100vw !important;
    max-width: 100vw !important;
    
    padding: 0 14px !important;
}

/* Main row */
#order-standard_cart > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* LEFT SIDEBAR */
#order-standard_cart > .row > .sidebar,
#order-standard_cart > .row > [class*="col-lg-3"]:has(.sidebar) {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    padding: 0 10px 0 0 !important;
    margin: 0 !important;
}

/* MAIN CONTENT */
#order-standard_cart > .row > .main-content {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 10px 0 20px !important;
    min-width: 0 !important;
}

/* Pricing grid */
#order-standard_cart .mazen-hosting-pricing {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 25px 0 0 !important;
}

/* Four equal cards */
#order-standard_cart .mazen-hosting-pricing > [class*="col-xl-3"] {
    flex: 1 1 25% !important;
    width: 25% !important;
    max-width: 25% !important;
    padding: 8px !important;
}

/* Cards */
#order-standard_cart .mazen-pricing-card {
    min-height: 640px !important;
    height: 100% !important;
    border-radius: 10px !important;
}

/* Card inner spacing */
#order-standard_cart .mazen-card-inner {
    padding: 28px 22px 24px !important;
}

/* Plan title */
#order-standard_cart .mazen-plan-name {
    font-size: 23px !important;
    margin-bottom: 8px !important;
}

/* Description */
#order-standard_cart .mazen-plan-description {
    min-height: 44px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Price */
#order-standard_cart .mazen-price-value {
    font-size: 32px !important;
}

/* Order button */
#order-standard_cart .mazen-order-btn {
    height: 48px !important;
    margin-bottom: 24px !important;
}

/* Features */
#order-standard_cart .mazen-feature {
    font-size: 14px !important;
    margin-bottom: 13px !important;
}

/* Sidebar cards */
#order-standard_cart .sidebar .panel,
#order-standard_cart .sidebar .panel-default,
#order-standard_cart .sidebar .card {
    border-radius: 10px !important;
    margin-bottom: 18px !important;
}

/* Sidebar stays at very left */
#order-standard_cart .sidebar {
    position: relative !important;
    left: 0 !important;
}

/* Hide horizontal overflow */
body {
    overflow-x: hidden;
}

/* Desktop */
@media (min-width: 1200px) {

    #order-standard_cart > .row > [class*="col-lg-3"]:has(.sidebar) {
        flex-basis: 280px !important;
    }

    #order-standard_cart > .row > .main-content {
        padding-left: 18px !important;
        padding-right: 8px !important;
    }

}

/* Tablet */
@media (max-width: 1199px) {

    #order-standard_cart > .row {
        flex-wrap: wrap !important;
    }

    #order-standard_cart > .row > [class*="col-lg-3"]:has(.sidebar) {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    #order-standard_cart > .row > .main-content {
        width: 100% !important;
        padding: 0 !important;
    }

    #order-standard_cart .mazen-hosting-pricing {
        flex-wrap: wrap !important;
    }

    #order-standard_cart .mazen-hosting-pricing > [class*="col-xl-3"] {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

}

/* Mobile */
@media (max-width: 767px) {

    #order-standard_cart {
        padding: 0 10px !important;
    }

    #order-standard_cart .mazen-hosting-pricing > [class*="col-xl-3"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #order-standard_cart .mazen-pricing-card {
        min-height: auto !important;
    }

}


/* =========================================================
   MAZEN HOSTING STORE - FULL WIDTH SIDEBAR + PRICING
   ========================================================= */

/* Make the hosting store use the full browser width */
#order-standard_cart {
    width: 100vw !important;
    max-width: 100vw !important;
    
    padding: 0 14px !important;
}

/* Main row */
#order-standard_cart > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* LEFT SIDEBAR */
#order-standard_cart > .row > .sidebar,
#order-standard_cart > .row > [class*="col-lg-3"]:has(.sidebar) {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    padding: 0 10px 0 0 !important;
    margin: 0 !important;
}

/* MAIN CONTENT */
#order-standard_cart > .row > .main-content {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 10px 0 20px !important;
    min-width: 0 !important;
}

/* Pricing grid */
#order-standard_cart .mazen-hosting-pricing {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 25px 0 0 !important;
}

/* Four equal cards */
#order-standard_cart .mazen-hosting-pricing > [class*="col-xl-3"] {
    flex: 1 1 25% !important;
    width: 25% !important;
    max-width: 25% !important;
    padding: 8px !important;
}

/* Cards */
#order-standard_cart .mazen-pricing-card {
    min-height: 640px !important;
    height: 100% !important;
    border-radius: 10px !important;
}

/* Card inner spacing */
#order-standard_cart .mazen-card-inner {
    padding: 28px 22px 24px !important;
}

/* Plan title */
#order-standard_cart .mazen-plan-name {
    font-size: 23px !important;
    margin-bottom: 8px !important;
}

/* Description */
#order-standard_cart .mazen-plan-description {
    min-height: 44px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Price */
#order-standard_cart .mazen-price-value {
    font-size: 32px !important;
}

/* Order button */
#order-standard_cart .mazen-order-btn {
    height: 48px !important;
    margin-bottom: 24px !important;
}

/* Features */
#order-standard_cart .mazen-feature {
    font-size: 14px !important;
    margin-bottom: 13px !important;
}

/* Sidebar cards */
#order-standard_cart .sidebar .panel,
#order-standard_cart .sidebar .panel-default,
#order-standard_cart .sidebar .card {
    border-radius: 10px !important;
    margin-bottom: 18px !important;
}

/* Sidebar stays at very left */
#order-standard_cart .sidebar {
    position: relative !important;
    left: 0 !important;
}

/* Hide horizontal overflow */
body {
    overflow-x: hidden;
}

/* Desktop */
@media (min-width: 1200px) {

    #order-standard_cart > .row > [class*="col-lg-3"]:has(.sidebar) {
        flex-basis: 280px !important;
    }

    #order-standard_cart > .row > .main-content {
        padding-left: 18px !important;
        padding-right: 8px !important;
    }

}

/* Tablet */
@media (max-width: 1199px) {

    #order-standard_cart > .row {
        flex-wrap: wrap !important;
    }

    #order-standard_cart > .row > [class*="col-lg-3"]:has(.sidebar) {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    #order-standard_cart > .row > .main-content {
        width: 100% !important;
        padding: 0 !important;
    }

    #order-standard_cart .mazen-hosting-pricing {
        flex-wrap: wrap !important;
    }

    #order-standard_cart .mazen-hosting-pricing > [class*="col-xl-3"] {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

}

/* Mobile */
@media (max-width: 767px) {

    #order-standard_cart {
        padding: 0 10px !important;
    }

    #order-standard_cart .mazen-hosting-pricing > [class*="col-xl-3"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #order-standard_cart .mazen-pricing-card {
        min-height: auto !important;
    }

}


/* =========================================================
   MAZEN - HOSTING PRICING POLISH
   ========================================================= */

/* Store background */
#order-standard_cart {
    padding-top: 8px !important;
}

/* Main title */
#order-standard_cart .header-lined {
    margin: 0 0 28px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid #e5eaf1 !important;
}

#order-standard_cart .header-lined h1 {
    margin: 0 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -.6px !important;
}

/* Sidebar */
#order-standard_cart .sidebar {
    width: 100% !important;
}

#order-standard_cart .sidebar .panel {
    border: 1px solid #e3e8ef !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(20,35,60,.055) !important;
    overflow: hidden !important;
    background: #fff !important;
}

#order-standard_cart .sidebar .panel-heading {
    padding: 15px 16px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    background: #fff !important;
    border-bottom: 1px solid #edf0f4 !important;
}

#order-standard_cart .sidebar .list-group-item {
    padding: 9px 15px !important;
    border: 0 !important;
    font-size: 12px !important;
    transition: all .18s ease !important;
}

#order-standard_cart .sidebar .list-group-item:hover {
    padding-left: 19px !important;
    background: #f6f9ff !important;
}

/* Pricing grid */
#order-standard_cart .mazen-hosting-pricing {
    margin: 0 -6px !important;
}

#order-standard_cart .mazen-hosting-pricing > [class*="col-xl-3"] {
    padding: 6px !important;
}

/* Cards */
#order-standard_cart .mazen-pricing-card {
    min-height: 610px !important;
    border: 1px solid #dfe5ed !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(20,35,60,.07) !important;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}

#order-standard_cart .mazen-pricing-card:hover {
    transform: translateY(-6px) !important;
    border-color: #cbd9ed !important;
    box-shadow: 0 14px 32px rgba(20,35,60,.12) !important;
}

/* Popular card */
#order-standard_cart .mazen-pricing-card.mazen-popular {
    border: 2px solid #2f80ed !important;
}

/* Card content */
#order-standard_cart .mazen-card-inner {
    padding: 25px 20px 22px !important;
}

/* Plan title */
#order-standard_cart .mazen-plan-name {
    margin: 0 0 9px !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #172033 !important;
}

/* Description */
#order-standard_cart .mazen-plan-description {
    min-height: 48px !important;
    margin: 0 0 17px !important;
    color: #697586 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Price area */
#order-standard_cart .mazen-price {
    min-height: 55px !important;
    margin-bottom: 18px !important;
}

#order-standard_cart .mazen-price-value {
    font-size: 31px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -.8px !important;
}

#order-standard_cart .mazen-cycle {
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Order button */
#order-standard_cart .mazen-order-btn {
    height: 46px !important;
    min-height: 46px !important;
    margin-bottom: 20px !important;
    border: 0 !important;
    border-radius: 7px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(47,128,237,.16) !important;
    transition: all .2s ease !important;
}

#order-standard_cart .mazen-order-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 16px rgba(47,128,237,.22) !important;
}

/* Feature section */
#order-standard_cart .mazen-features {
    padding-top: 17px !important;
    border-top: 1px solid #edf0f4 !important;
}

#order-standard_cart .mazen-feature {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    margin-bottom: 11px !important;
    color: #334155 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

#order-standard_cart .mazen-feature i {
    width: 17px !important;
    flex: 0 0 17px !important;
    margin-top: 2px !important;
    font-size: 12px !important;
    color: #2f80ed !important;
}

/* Always included */
#order-standard_cart .mazen-included-title {
    margin: 19px 0 14px !important;
    padding-top: 16px !important;
    border-top: 1px solid #edf0f4 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .8px !important;
    color: #172033 !important;
}

/* Popular badge */
#order-standard_cart .mazen-popular-badge {
    padding: 7px 10px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .7px !important;
}

/* Make cards equal height */
#order-standard_cart .mazen-hosting-pricing > [class*="col-xl-3"] {
    display: flex !important;
}

#order-standard_cart .mazen-pricing-card {
    width: 100% !important;
}

/* =========================================================
   DESKTOP - MORE SPACE FOR PRODUCTS
   ========================================================= */

@media (min-width: 1200px) {

    #order-standard_cart > .row > [class*="col-lg-3"]:has(.sidebar) {
        flex: 0 0 250px !important;
        width: 250px !important;
        max-width: 250px !important;
    }

    #order-standard_cart > .row > .main-content {
        padding-left: 16px !important;
        padding-right: 4px !important;
    }

}

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

@media (max-width: 1199px) {

    #order-standard_cart .mazen-pricing-card {
        min-height: 590px !important;
    }

}

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

@media (max-width: 767px) {

    #order-standard_cart .header-lined h1 {
        font-size: 26px !important;
    }

    #order-standard_cart .mazen-card-inner {
        padding: 24px 20px !important;
    }

    #order-standard_cart .mazen-price-value {
        font-size: 29px !important;
    }

}



/* =========================================================
   MAZEN PROGRESSIVE PLAN FEATURES
   ========================================================= */

.mazen-feature.mazen-upgrade {
    font-weight: 600 !important;
}

.mazen-feature.mazen-upgrade i {
    font-weight: 900 !important;
}

.mazen-feature strong {
    font-weight: 700 !important;
}

/* Business - Most Popular */
.mazen-pricing-card.mazen-popular {
    border: 2px solid #2f80ed !important;
    box-shadow: 0 8px 26px rgba(47,128,237,.14) !important;
}

/* Premium cards */
.mazen-pricing-card:hover {
    box-shadow: 0 16px 34px rgba(20,35,60,.13) !important;
}

/* Keep feature spacing compact */
.mazen-features .mazen-feature {
    margin-bottom: 10px !important;
}

/* Professional / Enterprise longer feature lists */
.mazen-pricing-card {
    min-height: 650px !important;
}

/* Strong upgrade features */
.mazen-feature.mazen-upgrade span {
    font-weight: 600 !important;
}

/* Better badge */
.mazen-popular-badge {
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
}

@media (max-width: 767px) {
    .mazen-pricing-card {
        min-height: auto !important;
    }
}

/* Pricing card */
.mazen-pricing-card {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #dfe5ee !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.07) !important;
    padding: 30px 26px 26px !important;
    min-height: 0 !important;
    height: auto !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}

/* Hover */
.mazen-pricing-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12) !important;
    border-color: #cbd5e1 !important;
}

/* Plan title */
.mazen-pricing-card h4 {
    color: #111827 !important;
    font-size: 21px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.2px !important;
}

/* Description */
.mazen-pricing-card .desc {
    color: #64748b !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    min-height: 43px !important;
    margin-bottom: 14px !important;
}

/* Price */
.mazen-pricing-card .cost {
    color: #e53935 !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
}

/* Currency */
.mazen-pricing-card .currency {
    color: #e53935 !important;
}

/* Billing cycle */
.mazen-pricing-card .cycle {
    color: #2563eb !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
}

/* Price section */
.mazen-pricing-card [id$="-price"] {
    margin: 8px 0 20px !important;
}

/* Order button */
.mazen-pricing-card .btn-primary {
    background: #347ff0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    min-height: 48px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 5px 12px rgba(52,127,240,.18) !important;
    transition: all .2s ease !important;
}

.mazen-pricing-card .btn-primary:hover {
    background: #2563eb !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px rgba(37,99,235,.25) !important;
}

/* Divider */
.mazen-pricing-card .mazen-features {
    border-top: 1px solid #e8edf3 !important;
    margin-top: 20px !important;
    padding-top: 18px !important;
}

/* Features */
.mazen-pricing-card .mazen-feature {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin: 0 0 11px !important;
}

/* Feature icon */
.mazen-pricing-card .mazen-feature i {
    width: 17px !important;
    min-width: 17px !important;
    color: #347ff0 !important;
    font-size: 13px !important;
    margin-top: 3px !important;
}

/* Strong upgrade features */
.mazen-pricing-card .mazen-feature.mazen-upgrade {
    color: #1e293b !important;
}

.mazen-pricing-card .mazen-feature.mazen-upgrade i {
    color: #2563eb !important;
}

.mazen-pricing-card .mazen-feature strong {
    font-weight: 700 !important;
}

/* Show More button */
.mazen-show-more {
    display: block !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 10px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 7px !important;
    color: #2563eb !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
}

.mazen-show-more:hover {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

/* Hide extra features */
.mazen-features.mazen-collapsed .mazen-feature:nth-child(n+8) {
    display: none !important;
}

/* =========================================================
   PLAN BADGES
   ========================================================= */

/* Business - Most Popular */
.cros-pricing-container > div:nth-child(2) .mazen-pricing-card {
    border-color: #3b82f6 !important;
    box-shadow: 0 8px 25px rgba(59,130,246,.13) !important;
}

.cros-pricing-container > div:nth-child(2) .mazen-pricing-card::before {
    content: "MOST POPULAR";
    position: absolute;
    top: 0;
    right: 22px;
    transform: translateY(-50%);
    background: #2563eb;
    color: #ffffff;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
}

/* Professional */
.cros-pricing-container > div:nth-child(3) .mazen-pricing-card::before {
    content: "ADVANCED";
    position: absolute;
    top: 0;
    right: 22px;
    transform: translateY(-50%);
    background: #6366f1;
    color: #ffffff;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
}

/* Enterprise */
.cros-pricing-container > div:nth-child(4) .mazen-pricing-card::before {
    content: "ULTIMATE";
    position: absolute;
    top: 0;
    right: 22px;
    transform: translateY(-50%);
    background: #111827;
    color: #ffffff;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
}

/* Keep badges from covering title */
.cros-pricing-container > div:nth-child(2) .mazen-pricing-card,
.cros-pricing-container > div:nth-child(3) .mazen-pricing-card,
.cros-pricing-container > div:nth-child(4) .mazen-pricing-card {
    padding-top: 34px !important;
}

/* =========================================================
   DESKTOP WIDTH / SPACING
   ========================================================= */

@media (min-width: 1200px) {

    .cros-pricing-container {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .cros-pricing-container > div {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

}

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

@media (max-width: 1199px) {

    .mazen-pricing-card {
        margin-bottom: 18px !important;
    }

}

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

@media (max-width: 767px) {

    .mazen-pricing-card {
        padding: 25px 21px !important;
    }

    .mazen-pricing-card h4 {
        font-size: 20px !important;
    }

    .mazen-pricing-card .cost {
        font-size: 31px !important;
    }

    .mazen-pricing-card .desc {
        min-height: auto !important;
    }

}

/* Price */
.mazen-pricing-card .cost {
    font-size: 32px !important;
    line-height: 1 !important;
}

/* Price spacing */
.mazen-pricing-card [id$="-price"] {
    margin: 7px 0 17px !important;
}

/* Button */
.mazen-pricing-card .btn-primary {
    min-height: 45px !important;
    font-size: 14px !important;
}

/* Feature container */
.mazen-pricing-card .mazen-features {
    margin-top: 17px !important;
    padding-top: 15px !important;
}

/* Features */
.mazen-pricing-card .mazen-feature {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-bottom: 9px !important;
    gap: 9px !important;
}

/* =========================================================
   SHOW ONLY FIRST 5
   ========================================================= */

.mazen-features.mazen-collapsed .mazen-feature:nth-child(n+6) {
    display: none !important;
}

/* =========================================================
   SHOW MORE
   ========================================================= */

.mazen-show-more {
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding: 8px 12px !important;

    background: #f8fafc !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 7px !important;

    color: #2563eb !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    cursor: pointer !important;
    transition: all .2s ease !important;
}

.mazen-show-more:hover {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
}

.mazen-show-more i {
    margin-right: 5px !important;
}

/* =========================================================
   ALWAYS INCLUDED
   ========================================================= */

.mazen-pricing-card .mazen-always-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
    margin: 17px 0 12px !important;
}

/* =========================================================
   MAKE CARDS MORE COMPACT
   ========================================================= */

.mazen-pricing-card {
    padding: 25px 22px 22px !important;
    border-radius: 11px !important;
}

/* Desktop */
@media (min-width: 1200px) {

    .mazen-pricing-card {
        min-height: 620px !important;
    }

}

/* Mobile */
@media (max-width: 767px) {

    .mazen-pricing-card {
        padding: 23px 19px !important;
        min-height: auto !important;
    }

    .mazen-pricing-card .cost {
        font-size: 29px !important;
    }

}


/* Description */
.mazen-pricing-card .desc {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #64748b !important;
    max-width: 95% !important;
}

/* Price */
.mazen-pricing-card .cost {
    font-size: 30px !important;
    font-weight: 800 !important;
}

/* Features */
.mazen-pricing-card .mazen-feature {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
}

/* =========================================================
   HIDE FEATURES AFTER NUMBER 5
   ========================================================= */

.mazen-pricing-card .mazen-features.mazen-collapsed
.mazen-feature:nth-of-type(n+6) {
    display: none !important;
}

/* Backup selector in case structure uses li */
.mazen-pricing-card .mazen-features.mazen-collapsed
li:nth-of-type(n+6) {
    display: none !important;
}

/* =========================================================
   SHOW MORE BUTTON
   ========================================================= */

.mazen-pricing-card .mazen-show-more {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 36px !important;

    margin-top: 12px !important;

    background: #f8fafc !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 7px !important;

    color: #2563eb !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    cursor: pointer !important;
}

.mazen-pricing-card .mazen-show-more:hover {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
}

/* =========================================================
   ALWAYS INCLUDED
   ========================================================= */

.mazen-pricing-card .mazen-always-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}

/* Mobile */
@media(max-width:767px) {
    .mazen-pricing-card {
        padding: 20px 17px !important;
    }
}


/* Compact description */
.mazen-pricing-card .desc {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #64748b !important;
}


/* Card */
.mazen-pricing-card {
    border-radius: 12px !important;
}


/* Price */
.mazen-pricing-card .cost {
    font-size: 30px !important;
    font-weight: 800 !important;
}


/* Features */
.mazen-pricing-card .plan-features {
    margin-top: 18px;
}

.mazen-pricing-card .plan-features li {
    margin-bottom: 9px;
    line-height: 1.45;
}

/* Keep cards visually clean */
.mazen-pricing-card {
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.mazen-pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(20, 40, 70, .09);
}

/* Better title */
.mazen-pricing-card h4 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* Better description */
.mazen-pricing-card .desc {
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
}

/* Price */
.mazen-pricing-card .cost {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Order button */
.mazen-pricing-card .btn-primary {
    min-height: 44px;
    border-radius: 7px;
    font-weight: 700;
    transition: all .2s ease;
}

.mazen-pricing-card .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(40, 120, 238, .20);
}

/* END MAZEN FINAL PRICING CARDS */


/* =========================================================
   MAZEN FINAL PRICING CARDS
   ========================================================= */

.mazen-pricing-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    padding: 30px 26px 24px;
    margin-bottom: 25px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    height: auto;
    min-height: 620px;
}

.mazen-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .10);
    border-color: #cbd7e8;
}

.mazen-card-header h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

.mazen-plan-description {
    min-height: 38px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.mazen-price {
    min-height: 62px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 17px;
}

.mazen-price .cost {
    color: #e53935;
    font-size: 31px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.6px;
}

.mazen-price .cycle {
    color: #287cf0;
    font-size: 12px;
    font-weight: 700;
}

.mazen-price .from {
    color: #64748b;
    font-size: 11px;
}

.mazen-order-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 7px !important;
    background: #347ff0 !important;
    border-color: #347ff0 !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 5px 12px rgba(52,127,240,.18);
    transition: all .2s ease;
}

.mazen-order-btn:hover {
    background: #236fe0 !important;
    border-color: #236fe0 !important;
    transform: translateY(-1px);
}

.mazen-features-wrapper {
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid #e7ebf0;
}

.mazen-plan-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mazen-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 11px !important;
    padding: 0 !important;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.mazen-plan-features li i {
    width: 15px;
    min-width: 15px;
    margin-top: 2px;
    color: #287cf0;
    text-align: center;
    font-size: 12px;
}

.mazen-plan-features li span {
    display: block;
}

.mazen-visible-feature {
    display: flex !important;
}

.mazen-hidden-feature {
    display: none !important;
}

.mazen-pricing-card.mazen-expanded .mazen-hidden-feature {
    display: flex !important;
}

.mazen-show-more {
    width: 100%;
    height: 38px;
    margin-top: 12px;
    padding: 0 12px;
    border: 1px solid #d6dfeb;
    border-radius: 6px;
    background: #f8fafc;
    color: #287cf0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .2s ease;
}

.mazen-show-more:hover {
    background: #eef5ff;
    border-color: #b9cfee;
}

.mazen-show-more i {
    font-size: 10px;
    transition: transform .2s ease;
}

.mazen-pricing-card.mazen-expanded .mazen-show-more i {
    transform: rotate(180deg);
}

.mazen-free-domain {
    margin-top: 12px;
    font-size: 12px;
    color: #64748b;
}

.mazen-popular {
    border-color: #287cf0;
    box-shadow: 0 8px 28px rgba(40,124,240,.12);
}

@media (max-width: 1199px) {
    .mazen-pricing-card {
        min-height: 0;
    }
}

@media (max-width: 767px) {
    .mazen-pricing-card {
        padding: 24px 20px;
    }

    .mazen-price .cost {
        font-size: 28px;
    }
}


/* =========================================================
   MAZEN SHOW MORE JAVASCRIPT SUPPORT
   ========================================================= */





/* MAZEN FINAL HOSTING CARDS */

.mazen-plan-col {
    margin-bottom: 24px;
}

.mazen-hosting-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e4eaf2;
    border-radius: 16px !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
    overflow: hidden !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.mazen-hosting-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .11);
}

.mazen-popular-card {
    border: 2px solid #2f80ed !important;
    box-shadow: 0 12px 35px rgba(47, 128, 237, .15);
}

.mazen-card-inner {
    padding: 28px 26px 24px;
}

.mazen-popular-badge {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(90deg, #2878e8, #3b82f6);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1px;
}

.mazen-plan-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    min-height: 72px;
}

.mazen-plan-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #edf5ff;
    color: #2878e8;
    font-size: 22px;
}

.mazen-plan-title-wrap {
    flex: 1;
}

.mazen-plan-title {
    margin: 2px 0 7px !important;
    color: #071a45 !important;
    font-size: 22px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
}

.mazen-plan-description {
    color: #66758f;
    font-size: 13px;
    line-height: 1.55;
    min-height: 20px;
}

.mazen-plan-price {
    margin-top: 24px;
    margin-bottom: 20px;
    min-height: 50px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
}

.mazen-price-number {
    color: #ef3d3d;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.8px;
}

.mazen-price-cycle {
    color: #2878e8;
    font-size: 13px;
    font-weight: 700;
}

.mazen-setup-fee {
    width: 100%;
    color: #7a879b;
    font-size: 11px;
}

.mazen-order-btn {
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #2878e8, #3b82f6) !important;
    box-shadow: 0 6px 15px rgba(47, 128, 237, .18);
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all .2s ease;
}

.mazen-order-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 20px rgba(47, 128, 237, .25);
}

.mazen-order-btn i {
    margin-right: 7px;
}

.mazen-divider {
    height: 1px;
    background: #e8edf4;
    margin: 22px 0 15px;
}

.mazen-feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mazen-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 11px !important;
    padding: 0 !important;
    color: #50627e;
    font-size: 13px;
    line-height: 1.45;
}

.mazen-feature-list li i {
    width: 16px;
    min-width: 16px;
    margin-top: 2px;
    color: #2878e8;
    text-align: center;
}

.mazen-feature-list li span {
    flex: 1;
}

.mazen-extra-feature {
    display: none !important;
}

.mazen-hosting-card.mazen-expanded .mazen-extra-feature {
    display: flex !important;
    animation: mazenFeatureIn .2s ease;
}

@keyframes mazenFeatureIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mazen-show-more {
    width: 100%;
    height: 42px;
    margin-top: 7px;
    border: 1px solid #d7e1ee !important;
    border-radius: 8px !important;
    background: #f8fbff !important;
    color: #2878e8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all .2s ease;
}

.mazen-show-more:hover {
    background: #edf5ff !important;
    border-color: #9fc3f7 !important;
}

.mazen-show-more i {
    margin-left: 5px;
    font-size: 10px;
}

.mazen-expanded .mazen-show-more {
    margin-top: 12px;
}

@media (max-width: 1199px) {

    .mazen-card-inner {
        padding: 24px 21px 22px;
    }

    .mazen-price-number {
        font-size: 28px;
    }

}

@media (max-width: 991px) {

    .mazen-plan-col {
        margin-bottom: 20px;
    }

}

@media (max-width: 575px) {

    .mazen-card-inner {
        padding: 22px 19px;
    }

    .mazen-plan-title {
        font-size: 20px !important;
    }

    .mazen-price-number {
        font-size: 27px;
    }

}


/* =========================================================
   MAZEN FINAL HOSTING PRICING CARDS
   ========================================================= */

.cros-pricing-container {
    margin-left: -7px;
    margin-right: -7px;
    align-items: stretch;
}

.cros-pricing-container > [class*="col-"] {
    padding-left: 7px;
    padding-right: 7px;
    display: flex;
}

.mazen-hosting-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 620px;
    background: #ffffff !important;
    border: 1px solid #e4e9f2 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(20, 40, 80, 0.07) !important;
    overflow: hidden;
    transition: all .25s ease;
}

.mazen-hosting-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(20, 40, 80, 0.12) !important;
}

.mazen-card-inner {
    padding: 30px 26px 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mazen-popular {
    border: 2px solid #3182f6 !important;
    box-shadow: 0 12px 35px rgba(49, 130, 246, .15) !important;
}

.mazen-popular-badge {
    height: 38px;
    margin: -30px -26px 27px;
    background: #3182f6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
}

.mazen-plan-header {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 92px;
}

.mazen-plan-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.mazen-blue {
    color: #2f80ed;
    background: #edf5ff;
}

.mazen-purple {
    color: #8359e8;
    background: #f3efff;
}

.mazen-green {
    color: #18a05e;
    background: #edf9f2;
}

.mazen-orange {
    color: #f19a38;
    background: #fff5e9;
}

.mazen-plan-title h3 {
    margin: 0 0 7px !important;
    color: #07133d !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.1;
}

.mazen-plan-title p {
    margin: 0 !important;
    color: #6b7b99 !important;
    font-size: 12px !important;
    line-height: 1.55;
}

.mazen-price {
    margin: 27px 0 24px;
    min-height: 43px;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.mazen-price-main {
    color: #ef3e3e !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    line-height: 1;
}

.mazen-currency {
    color: #07133d !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.mazen-from {
    color: #64748b;
    font-size: 11px;
    margin-right: 3px;
}

.mazen-order-btn {
    width: 100%;
    height: 52px;
    border: 0 !important;
    border-radius: 8px !important;
    background: #3182f6 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 5px 14px rgba(49, 130, 246, .18);
    margin-bottom: 24px;
}

.mazen-order-btn:hover {
    background: #176fe8 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.mazen-features {
    border-top: 1px solid #e7ebf2;
    padding-top: 18px;
}

.mazen-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 13px;
    color: #536684;
    font-size: 13px;
    line-height: 1.5;
}

.mazen-feature i {
    width: 18px;
    min-width: 18px;
    color: #3182f6;
    font-size: 14px;
    text-align: center;
    margin-top: 2px;
}

.mazen-feature span {
    flex: 1;
}

.mazen-included-title {
    border-top: 1px solid #e7ebf2;
    margin-top: 7px;
    padding-top: 18px;
    margin-bottom: 17px;
    color: #637594;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.mazen-included .mazen-feature {
    margin-bottom: 14px;
}

.mazen-common {
    color: #536684;
}

.mazen-common i {
    font-size: 16px;
}

@media (max-width: 1199px) {

    .mazen-hosting-card {
        min-height: 600px;
    }

    .mazen-card-inner {
        padding: 25px 21px;
    }

    .mazen-popular-badge {
        margin: -25px -21px 23px;
    }

}

@media (max-width: 991px) {

    .cros-pricing-container > [class*="col-"] {
        margin-bottom: 18px;
    }

    .mazen-hosting-card {
        min-height: auto;
    }

}

@media (max-width: 575px) {

    .mazen-plan-header {
        gap: 13px;
    }

    .mazen-plan-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 21px;
    }

    .mazen-plan-title h3 {
        font-size: 20px !important;
    }

    .mazen-price-main {
        font-size: 26px !important;
    }

}

/* =========================================================
   END MAZEN FINAL HOSTING PRICING CARDS
   ========================================================= */



/* =========================================================
   MAZEN HOSTING SHOW MORE
   ========================================================= */

.mazen-extra-features {
    display: none;
    margin-top: 3px;
}

.mazen-hosting-card.mazen-expanded .mazen-extra-features {
    display: block;
}

.mazen-show-more {
    width: 100%;
    height: 42px;
    margin-top: 8px;
    border: 1px solid #d5dfed !important;
    border-radius: 7px !important;
    background: #f8fafc !important;
    color: #2879ed !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .2s ease;
}

.mazen-show-more:hover {
    background: #eef5ff !important;
    border-color: #3182f6 !important;
}

.mazen-show-more i {
    font-size: 10px;
    transition: transform .2s ease;
}

.mazen-hosting-card.mazen-expanded .mazen-show-more i {
    transform: rotate(180deg);
}

.mazen-hosting-card.mazen-expanded .mazen-show-more {
    background: #f4f8ff !important;
}

@media (max-width: 991px) {
    .mazen-show-more {
        margin-bottom: 3px;
    }
}

/* =========================================================
   END MAZEN HOSTING SHOW MORE
   ========================================================= */


/* =========================================================
   MAZEN HOSTING PRICING - CLEAN SHOW MORE
   ========================================================= */

.cros-pricing-container .cros-pricing-table {
    position: relative;
}

.cros-pricing-container .plan-features {
    position: relative;
}

.cros-pricing-container .plan-features.mz-collapsed li:nth-child(n+7) {
    display: none !important;
}

.mz-show-more-btn {
    width: 100%;
    height: 38px;
    margin-top: 18px;
    border: 1px solid #d7e1ee;
    border-radius: 6px;
    background: #f8fbff;
    color: #1677ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.mz-show-more-btn:hover {
    background: #eef6ff;
    border-color: #1677ff;
}

.mz-show-more-btn i {
    margin-left: 7px;
    transition: transform .2s ease;
}

.mz-show-more-btn.mz-open i {
    transform: rotate(180deg);
}

@media (max-width: 767px) {
    .mz-show-more-btn {
        height: 42px;
    }
}


/* MAZEN FINAL SHOW MORE */

.cros-pricing-table .mazen-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 100%;
    margin-top: 14px;
    padding: 8px 12px;

    border: 1px solid #d8e0eb;
    border-radius: 5px;

    background: #f8fafc;
    color: #246fe5;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
    transition: all .2s ease;
}

.cros-pricing-table .mazen-show-more:hover {
    background: #eef5ff;
    border-color: #bcd2f5;
}

.cros-pricing-table .mazen-show-more i {
    font-size: 9px;
}

.cros-pricing-table .plan-features > li {
    transition: opacity .15s ease;
}

/* Never show an empty button */
.cros-pricing-table .mazen-show-more[aria-expanded="true"] {
    margin-top: 14px;
}

/* Keep cards visually clean */
.cros-pricing-table .plan-features {
    margin-bottom: 0;
}


/* MAZEN SHOW MORE CSS START */

.cros-pricing-table .plan-features {
    margin-bottom: 0;
}

.cros-pricing-table .plan-features li {
    transition: opacity .18s ease;
}

.cros-pricing-table .mazen-show-more,
.cros-pricing-table .show-more-btn {
    cursor: pointer;
    user-select: none;
}

/* MAZEN SHOW MORE CSS END */


/* MAZEN SHOW MORE FINAL START */

/* Feature area */
.cros-pricing-table .plan-features {
    margin-top: 18px !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Hidden features */
.cros-pricing-table .plan-features li.maz-hidden-feature {
    display: none !important;
}

/* Show More button */
.maz-show-more-btn {
    width: 100%;
    height: 38px;
    margin-top: 18px;
    border: 1px solid #d7e1ef;
    border-radius: 6px;
    background: #f8fbff;
    color: #2476e8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
    text-align: center;
}

.maz-show-more-btn:hover {
    background: #eef6ff;
    border-color: #2476e8;
    color: #1767d5;
}

.maz-show-more-btn .maz-arrow {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    transition: transform .2s ease;
}

.maz-show-more-btn.is-open .maz-arrow {
    transform: rotate(180deg);
}

/* Keep cards visually clean */
.cros-pricing-table .plan-features li {
    margin-bottom: 9px;
}

/* Popular card */
.cros-pricing-table.maz-popular-card {
    border: 1px solid #2f80ed !important;
}

/* Popular badge */
.maz-popular-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2f80ed;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    z-index: 5;
}

.maz-popular-card {
    position: relative !important;
}

/* Give Professional card enough top space for badge */
.maz-popular-card .maz-card-inner {
    padding-top: 48px !important;
}

/* Mobile */
@media (max-width: 767px) {
    .maz-show-more-btn {
        height: 40px;
    }
}

/* MAZEN SHOW MORE FINAL END */



/* MAZEN SHOW MORE WORKING START */

.mazen-hosting-card .mazen-feature-hidden {
    display: none !important;
}

.mazen-show-more-btn {
    width: 100%;
    height: 42px;
    margin-top: auto;
    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: #f8fafc !important;
    border: 1px solid #d7e0ec !important;
    border-radius: 7px !important;

    color: #2878ed !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    cursor: pointer;

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

.mazen-show-more-btn:hover {
    background: #f0f6ff !important;
    border-color: #2878ed !important;
    box-shadow: 0 3px 10px rgba(40, 120, 237, .10);
}

.mazen-show-more-btn i {
    font-size: 10px;
    transition: transform .2s ease;
}

.mazen-show-more-btn.is-expanded {
    background: #f5f9ff !important;
}

.mazen-show-more-btn.is-expanded i {
    transform: translateY(-1px);
}

/* Keep the button at the bottom of every card */
.mazen-hosting-card .mazen-card-inner {
    min-height: 100%;
}

/* MAZEN SHOW MORE WORKING END */


/* =========================================================
   MAZEN SHOW MORE START
   ========================================================= */

.mazen-feature-hidden {
    display: none !important;
}

.mazen-show-more-btn {
    width: 100%;
    height: 38px;
    margin-top: 8px;
    padding: 0 14px;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid #d5dfed !important;
    border-radius: 7px !important;

    background: #f8fafc !important;
    color: #2878ed !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    cursor: pointer;
    outline: none !important;

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

.mazen-show-more-btn:hover {
    background: #eef5ff !important;
    border-color: #3182f6 !important;
    color: #176fe8 !important;
}

.mazen-show-more-btn:focus,
.mazen-show-more-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.mazen-show-more-btn i {
    font-size: 9px;
    transition: transform .2s ease;
}

.mazen-show-more-btn[aria-expanded="true"] {
    background: #f1f6fd !important;
}

.mazen-show-more-btn[aria-expanded="true"] i {
    transform: translateY(-1px);
}

/*
 * Keep the included section visually connected
 */
.mazen-included {
    margin-bottom: 2px;
}

/* =========================================================
   MAZEN SHOW MORE END
   ========================================================= */



/* MAZEN FINAL HOSTING PRICING */

.mazen-hosting-products {
    width: 100%;
    margin-top: 18px;
}

.mazen-pricing-grid {
    display: flex;
    align-items: stretch;
    margin-left: -8px;
    margin-right: -8px;
}

.mazen-plan-column {
    display: flex;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 18px;
}

.mazen-pricing-card {
    position: relative;
    width: 100%;
    min-height: 650px;
    background: #ffffff;
    border: 1px solid #e1e8f2;
    border-radius: 14px;
    padding: 30px 28px 28px;
    box-shadow: 0 8px 28px rgba(20, 45, 80, .07);
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    overflow: hidden;
}

.mazen-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(20, 45, 80, .12);
}

.mazen-pricing-card.mazen-popular {
    border: 2px solid #2f80ed;
    padding-top: 68px;
    box-shadow: 0 14px 38px rgba(47, 128, 237, .15);
}

.mazen-popular-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    background: #2f80ed;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.mazen-card-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-height: 92px;
}

.mazen-plan-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.mazen-plan-icon.icon-blue {
    background: #eef6ff;
    color: #287ce9;
}

.mazen-plan-icon.icon-purple {
    background: #f3efff;
    color: #7b61e8;
}

.mazen-plan-icon.icon-green {
    background: #edfaf3;
    color: #1b9a5a;
}

.mazen-plan-icon.icon-orange {
    background: #fff5e9;
    color: #f39a38;
}

.mazen-plan-info h3 {
    margin: 5px 0 7px;
    color: #07183e;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
}

.mazen-plan-info p {
    margin: 0;
    color: #667894;
    font-size: 13px;
    line-height: 1.55;
}

.mazen-price {
    margin-top: 30px;
    margin-bottom: 24px;
    color: #07183e;
    font-size: 31px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.mazen-price-cycle {
    color: #536987;
    font-size: 14px;
    font-weight: 700;
    margin-left: 4px;
}

.mazen-order-button {
    width: 100%;
    min-height: 52px;
    border-radius: 9px;
    background: #2f80ed;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 7px 16px rgba(47, 128, 237, .22);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.mazen-order-button:hover {
    background: #176fe0;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(47, 128, 237, .28);
}

.mazen-order-button i {
    font-size: 14px;
}

.mazen-feature-section {
    margin-top: 22px;
    padding-top: 19px;
    border-top: 1px solid #e5ebf3;
}

.mazen-feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mazen-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 15px !important;
    padding: 0 !important;
    color: #506583;
    font-size: 13px;
    line-height: 1.45;
}

.mazen-feature-list li i {
    width: 17px;
    min-width: 17px;
    margin-top: 2px;
    color: #2f80ed;
    text-align: center;
    font-size: 14px;
}

.mazen-always-included {
    margin-top: 2px;
    padding-top: 20px;
    border-top: 1px solid #e5ebf3;
}

.mazen-included-title {
    margin-bottom: 17px;
    color: #607493;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.mazen-common-features li {
    margin-bottom: 15px !important;
}

.mazen-common-features li:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 1199px) {

    .mazen-pricing-card {
        min-height: 620px;
        padding-left: 22px;
        padding-right: 22px;
    }

    .mazen-plan-info h3 {
        font-size: 20px;
    }

    .mazen-price {
        font-size: 28px;
    }

}

@media (max-width: 991px) {

    .mazen-pricing-grid {
        margin-left: -7px;
        margin-right: -7px;
    }

    .mazen-plan-column {
        padding-left: 7px;
        padding-right: 7px;
    }

    .mazen-pricing-card {
        min-height: auto;
    }

}

@media (max-width: 575px) {

    .mazen-plan-column {
        width: 100%;
    }

    .mazen-pricing-card {
        min-height: auto;
    }

}

/* END MAZEN FINAL HOSTING PRICING */



/* MAZEN SHOW MORE FINAL */

.cros-pricing-table .plan-features {
    margin-bottom: 0 !important;
}

.cros-pricing-table .plan-features > li.mazen-feature-hidden {
    display: none !important;
}

.cros-pricing-table .mazen-show-more {
    width: 100%;
    height: 42px;
    margin-top: 18px;
    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: #f8fbff;
    border: 1px solid #cbdcf3;
    border-radius: 7px;

    color: #1769e0;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
    transition: all .2s ease;
}

.cros-pricing-table .mazen-show-more:hover {
    background: #eef6ff;
    border-color: #2f80ed;
    color: #1261d6;
}

.cros-pricing-table .mazen-show-more i {
    font-size: 10px;
    transition: transform .2s ease;
}

.cros-pricing-table.mazen-expanded .mazen-show-more {
    margin-top: 18px;
}

@media (max-width: 767px) {
    .cros-pricing-table .mazen-show-more {
        height: 40px;
        font-size: 12px;
    }
}



/* ===== MAZEN SHOW MORE FINAL ===== */

/* Card must allow badge positioning */
.cros-pricing-table {
    position: relative;
}

/* ---------------------------------------------------------
   SHOW MORE
--------------------------------------------------------- */

.mazen-show-more {
    width: 100%;
    min-height: 34px;
    margin-top: 16px;
    border: 1px solid #d6e0ed;
    border-radius: 6px;
    background: #f8fbff;
    color: #1769e0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.mazen-show-more:hover {
    background: #eef6ff;
    border-color: #2f80ed;
}

.mazen-show-more-icon {
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    transition: transform .2s ease;
}

.mazen-show-more[aria-expanded="true"] .mazen-show-more-icon {
    transform: rotate(180deg);
}

.mazen-show-more[aria-expanded="true"] {
    background: #f1f7ff;
}

/* ---------------------------------------------------------
   EXTRA FEATURES
--------------------------------------------------------- */

.mazen-extra-feature {
    display: none !important;
}

.cros-pricing-table.mazen-expanded .mazen-extra-feature {
    display: flex !important;
}

/* ---------------------------------------------------------
   MOST POPULAR BADGE
--------------------------------------------------------- */

.mazen-popular-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    background: linear-gradient(90deg, #287bea, #3989f5);
    color: #fff;

    border-radius: 7px 7px 0 0;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;

    z-index: 5;
}

.mazen-popular-badge i {
    font-size: 11px;
}

/* Give Professional header breathing room */
.cros-pricing-table.mazen-professional .mazen-card-header {
    padding-top: 45px;
}

/* Professional recommended card */
.cros-pricing-table.mazen-professional {
    border: 1.5px solid #2f80ed;
    box-shadow:
        0 10px 30px rgba(47,128,237,.12),
        0 0 0 1px rgba(47,128,237,.04);
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {

    .mazen-show-more {
        min-height: 38px;
        font-size: 13px;
    }

    .mazen-popular-badge {
        height: 32px;
        font-size: 11px;
    }
}



/* MAZEN FINAL SHOW MORE CSS START */

.cros-pricing-table .mazen-feature-hidden {
    display: none !important;
}

.cros-pricing-table .mazen-show-more {
    width: 100%;
    min-height: 38px;
    margin-top: 18px;
    padding: 8px 14px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: #f8fbff;
    border: 1px solid #d6e1ef;
    border-radius: 6px;

    color: #2475e8;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
    transition: all .2s ease;
}

.cros-pricing-table .mazen-show-more:hover {
    background: #eef6ff;
    border-color: #2475e8;
    color: #1767d5;
}

.cros-pricing-table .mazen-show-more i {
    font-size: 10px;
    transition: transform .2s ease;
}

.cros-pricing-table .mazen-show-more[aria-expanded="true"] {
    background: #f3f8ff;
}

/* Keep feature spacing clean */
.cros-pricing-table .plan-features {
    margin-bottom: 0;
}

.cros-pricing-table .plan-features > * {
    transition: opacity .2s ease;
}

/* Professional / recommended card */
.cros-pricing-table.mazen-recommended,
.cros-pricing-table:has(.sticker) {
    border-color: #2f80ed;
}

/* MAZEN FINAL SHOW MORE CSS END */


/* MAZEN SHOW MORE FIX START */

#products .cros-pricing-table {
    position: relative;
}

/* Hidden features */
#products .mazen-hidden-feature {
    display: none !important;
}

/* Show More button */
#products .mazen-show-more {
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    padding: 9px 14px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid #d8e1ee !important;
    border-radius: 7px !important;

    background: #f8fafc !important;
    color: #2878ee !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    cursor: pointer;
    transition: all .2s ease;
}

#products .mazen-show-more:hover {
    background: #eef5ff !important;
    border-color: #2878ee !important;
    color: #1769d5 !important;
}

#products .mazen-show-more i {
    font-size: 10px;
    transition: transform .2s ease;
}

#products .mazen-expanded .mazen-show-more {
    background: #f8fafc !important;
}

/* Professional = Recommended */
#products .cros-pricing-table.mazen-recommended {
    border: 2px solid #3182f6 !important;
    box-shadow: 0 10px 30px rgba(49,130,246,.14) !important;
}

#products .mazen-popular-badge {
    width: calc(100% + 0px);
    min-height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    margin: -1px -1px 18px;

    background: #3182f6;
    color: #fff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;

    border-radius: 5px 5px 0 0;
}

#products .mazen-popular-badge i {
    font-size: 10px;
}

/* Keep cards aligned */
#products .cros-pricing-container {
    align-items: stretch;
}

#products .cros-pricing-container > [class*="col-"] {
    display: flex;
}

#products .cros-pricing-table {
    width: 100%;
}

/* MAZEN SHOW MORE FIX END */







/* =========================================================
   MAZEN HOSTING SHOW MORE
   ========================================================= */

.mazen-hosting-card {
    position: relative;
}

/* Button */
.mazen-hosting-card .mazen-show-more-btn {
    width: 100%;
    height: 38px;
    margin-top: 12px;
    margin-bottom: 4px;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid #d5dfed !important;
    border-radius: 6px !important;

    background: #f8fafc !important;
    color: #2878ed !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    cursor: pointer;
    transition: all .2s ease;
}

.mazen-hosting-card .mazen-show-more-btn:hover {
    background: #eef5ff !important;
    border-color: #2878ed !important;
}

.mazen-hosting-card .mazen-show-more-btn i {
    font-size: 9px;
    transition: transform .2s ease;
}

.mazen-hosting-card .mazen-show-more-btn.is-open i {
    transform: rotate(180deg);
}

/* =========================================================
   SHOW ONLY FIRST 6 FEATURES
   ========================================================= */

.mazen-hosting-card .plan-features > li:nth-child(n+7),
.mazen-hosting-card .mazen-included > li:nth-child(n+7) {
    display: none;
}

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

.mazen-hosting-card.mazen-showing-extra .plan-features > li:nth-child(n+7),
.mazen-hosting-card.mazen-showing-extra .mazen-included > li:nth-child(n+7) {
    display: flex;
}

/* If features are inside nested lists */
.mazen-hosting-card.mazen-showing-extra .mazen-included li {
    display: flex;
}

/* =========================================================
   ALWAYS INCLUDED
   ========================================================= */

.mazen-hosting-card .mazen-included-title {
    margin-top: 18px;
}

/* =========================================================
   END
   ========================================================= */



/* MAZEN FINAL HOSTING FEATURES */

.mazen-plan-features {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e6ebf2;
}

.mazen-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    color: #53657f;
    font-size: 13px;
    line-height: 1.55;
}

.mazen-feature-icon {
    width: 18px;
    min-width: 18px;
    color: #287cf0;
    text-align: center;
    margin-top: 1px;
}

.mazen-feature-icon i {
    font-size: 13px;
}

.mazen-more-features {
    margin-top: 2px;
}

.mazen-show-more {
    width: 100%;
    margin-top: 16px;
    min-height: 38px;
    border: 1px solid #d7e1ef;
    border-radius: 7px;
    background: #f8fbff;
    color: #287cf0;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s ease;
}

.mazen-show-more:hover {
    background: #eef6ff;
    border-color: #287cf0;
}

.mazen-show-more i {
    margin-left: 7px;
    transition: transform .2s ease;
}

.mazen-show-more.is-open i {
    transform: rotate(180deg);
}

.mazen-popular-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px 8px 0 0;
    background: #287cf0;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    z-index: 5;
}

.cros-pricing-table:has(.mazen-popular-badge) {
    border: 1.5px solid #287cf0;
}

.cros-pricing-table:has(.mazen-popular-badge) > h4,
.cros-pricing-table:has(.mazen-popular-badge) > .desc,
.cros-pricing-table:has(.mazen-popular-badge) > div {
    /* keep content safely below the badge */
}

@media (max-width: 767px) {
    .mazen-feature {
        font-size: 12px;
    }

    .mazen-popular-badge {
        font-size: 9px;
    }
}


/* MAZEN SHOW MORE START */

.mazen-extra-features {
    display: none;
    margin-top: 2px;
}

.mazen-hosting-card.mazen-expanded .mazen-extra-features {
    display: block;
}

.mazen-show-more {
    width: 100%;
    height: 38px;
    margin-top: 5px;
    margin-bottom: 20px;
    padding: 0 14px;
    border: 1px solid #d7e0ec !important;
    border-radius: 7px !important;
    background: #f8fafc !important;
    color: #2477ed !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all .2s ease;
}

.mazen-show-more:hover {
    background: #edf5ff !important;
    border-color: #3182f6 !important;
}

.mazen-show-more i {
    font-size: 9px;
    transition: transform .2s ease;
}

.mazen-hosting-card.mazen-expanded .mazen-show-more i {
    transform: rotate(180deg);
}

.mazen-hosting-card.mazen-expanded .mazen-show-more {
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .mazen-show-more {
        height: 40px;
    }
}

/* MAZEN SHOW MORE END */



/* =========================================================
   MAZEN SHOW MORE FINAL
   ========================================================= */

/* Hidden until the card's Show More button is clicked */
.mazen-hosting-card .mazen-included {
    display: none;
}

.mazen-hosting-card.mazen-expanded .mazen-included {
    display: block;
}

/* Show More button */
.mazen-show-more-btn {
    width: 100%;
    height: 42px;
    margin-top: 8px;
    margin-bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    background: #fff !important;
    border: 1px solid #d5deec !important;
    border-radius: 7px !important;

    color: #2677e8 !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    cursor: pointer;
    transition: all .2s ease;
}

.mazen-show-more-btn:hover {
    background: #f5f9ff !important;
    border-color: #3182f6 !important;
}

.mazen-show-more-btn i {
    font-size: 10px;
    transition: transform .2s ease;
}

.mazen-hosting-card.mazen-expanded .mazen-show-more-btn i {
    transform: rotate(180deg);
}

/* Keep card layout clean */
.mazen-hosting-card .mazen-card-inner {
    display: flex;
    flex-direction: column;
}

/* Button always stays after the feature sections */
.mazen-show-more-wrap {
    margin-top: auto;
    padding-top: 4px;
}

@media (max-width: 991px) {
    .mazen-show-more-btn {
        height: 44px;
    }
}

/* =========================================================
   END MAZEN SHOW MORE FINAL
   ========================================================= */


/* FIX CART CHECKOUT POSITION */
#order-standard_cart > .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

#order-standard_cart {
    
}

/* FIX: Do not apply Mazen Hosting Store layout to normal WHMCS cart/checkout */
#order-standard_cart:not(:has(.mazen-hosting-pricing)) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 40px 0 !important;
}

#order-standard_cart:not(:has(.mazen-hosting-pricing)) > .row {
    width: auto !important;
    max-width: none !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    flex-wrap: wrap !important;
}

#order-standard_cart:not(:has(.mazen-hosting-pricing)) > .row > .main-content {
    width: auto !important;
    max-width: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/* =========================================================
   MODERN CLIENT DASHBOARD
   ========================================================= */

/* Dashboard background */
body:has(.client-home-panels) {
    background: #f5f7fb !important;
}

/* Main dashboard container */
.client-home-panels {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 25px auto 50px !important;
}

/* Dashboard tiles / statistics */
.client-home-panels .tile {
    background: #ffffff !important;
    border: 1px solid #e4e8ef !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(20, 35, 60, .06) !important;
    transition: all .2s ease !important;
}

.client-home-panels .tile:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 22px rgba(20, 35, 60, .10) !important;
}

/* Tile links */
.client-home-panels .tile a {
    text-decoration: none !important;
}

/* WHMCS panels */
.client-home-panels .panel {
    background: #ffffff !important;
    border: 1px solid #e3e7ee !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 14px rgba(20, 35, 60, .06) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

/* Panel headers */
.client-home-panels .panel-heading {
    background: #ffffff !important;
    border-bottom: 1px solid #e8ebf0 !important;
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 15px 18px !important;
}

/* Panel body */
.client-home-panels .panel-body {
    padding: 18px !important;
}

/* Active Products */
.client-home-panels .panel-services .panel-heading {
    background: #111827 !important;
    color: #ffffff !important;
}

/* Domain register */
.client-home-panels .panel-domain-register .panel-heading {
    background: #111827 !important;
    color: #ffffff !important;
}

/* Buttons */
.client-home-panels .btn {
    border-radius: 7px !important;
    font-weight: 600 !important;
    transition: all .2s ease !important;
}

.client-home-panels .btn-primary {
    background: #2563eb !important;
    border-color: #2563eb !important;
}

.client-home-panels .btn-primary:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* Search box */
.client-home-panels input[type="text"],
.client-home-panels input[type="search"] {
    height: 44px !important;
    border: 1px solid #dce2ea !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
}

.client-home-panels input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10) !important;
}

/* Domain search */
.client-home-panels .panel-domain-register input {
    border-radius: 7px !important;
}

/* Tables */
.client-home-panels .table {
    margin-bottom: 0 !important;
}

.client-home-panels .table > thead > tr > th {
    background: #f8fafc !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #374151 !important;
    font-weight: 700 !important;
}

.client-home-panels .table > tbody > tr > td {
    vertical-align: middle !important;
    border-color: #eef1f5 !important;
}

/* Empty states */
.client-home-panels .panel-body p {
    color: #6b7280 !important;
}

/* Dashboard responsive */
@media (max-width: 991px) {
    .client-home-panels {
        margin: 20px 10px 40px !important;
        width: auto !important;
    }
}

@media (max-width: 767px) {
    .client-home-panels .panel {
        border-radius: 10px !important;
    }

    .client-home-panels .panel-heading {
        padding: 13px 15px !important;
    }

    .client-home-panels .panel-body {
        padding: 15px !important;
    }
}

/* =========================================================
   END MODERN CLIENT DASHBOARD
   ========================================================= */


/* =========================================================
   CROSTER CLIENT AREA - MODERN FULL LAYOUT
   Applies to Client Area / Store pages
   Excludes WHMCS checkout/cart
   ========================================================= */

/* Main client area background */
body:has(.client-home-panels),
body:has(.panel-services),
body:has(.panel-domain-register) {
    background: #f5f7fb !important;
}

/* Main content area */
body:not(:has(#order-standard_cart)) .main-content {
    min-width: 0 !important;
}

/* Client area sidebar */
body:not(:has(#order-standard_cart)) .sidebar {
    background: transparent !important;
}

/* Sidebar cards */
body:not(:has(#order-standard_cart)) .sidebar .panel,
body:not(:has(#order-standard_cart)) .sidebar .card,
body:not(:has(#order-standard_cart)) .sidebar .panel-default {
    background: #ffffff !important;
    border: 1px solid #e1e6ee !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
}

/* Sidebar headings */
body:not(:has(#order-standard_cart)) .sidebar .panel-heading,
body:not(:has(#order-standard_cart)) .sidebar .card-header {
    background: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #e5e9ef !important;
    font-weight: 700 !important;
    padding: 13px 15px !important;
}

/* Sidebar body */
body:not(:has(#order-standard_cart)) .sidebar .panel-body,
body:not(:has(#order-standard_cart)) .sidebar .card-body {
    padding: 13px 15px !important;
}

/* Sidebar links */
body:not(:has(#order-standard_cart)) .sidebar a {
    color: #334155 !important;
    text-decoration: none !important;
}

body:not(:has(#order-standard_cart)) .sidebar a:hover {
    color: #2563eb !important;
}

/* Main content cards */
body:not(:has(#order-standard_cart)) .main-content > .panel,
body:not(:has(#order-standard_cart)) .main-content > .card {
    background: #ffffff !important;
    border: 1px solid #e1e6ee !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 14px rgba(15, 23, 42, .06) !important;
}

/* Page headings */
body:not(:has(#order-standard_cart)) .header-lined {
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #e1e6ee !important;
}

body:not(:has(#order-standard_cart)) .header-lined h1 {
    color: #111827 !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

/* Dashboard panels */
.client-home-panels {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 20px auto 50px !important;
}

/* Dashboard panels */
.client-home-panels .panel {
    background: #ffffff !important;
    border: 1px solid #e1e6ee !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 14px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
    margin-bottom: 18px !important;
}

/* Panel headers */
.client-home-panels .panel-heading {
    background: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #e5e9ef !important;
    font-weight: 700 !important;
    padding: 14px 17px !important;
}

/* Active products header */
.client-home-panels .panel-services .panel-heading {
    background: #111827 !important;
    color: #ffffff !important;
}

/* Domain register header */
.client-home-panels .panel-domain-register .panel-heading {
    background: #111827 !important;
    color: #ffffff !important;
}

/* Panel body */
.client-home-panels .panel-body {
    padding: 17px !important;
}

/* Dashboard statistic tiles */
.client-home-panels .tile {
    background: #ffffff !important;
    border: 1px solid #e1e6ee !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .05) !important;
}

/* Forms */
body:not(:has(#order-standard_cart)) .form-control {
    border: 1px solid #d9e0e8 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

body:not(:has(#order-standard_cart)) .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .10) !important;
}

/* Buttons */
body:not(:has(#order-standard_cart)) .btn {
    border-radius: 7px !important;
    font-weight: 600 !important;
}

body:not(:has(#order-standard_cart)) .btn-primary {
    background: #2f7df4 !important;
    border-color: #2f7df4 !important;
}

body:not(:has(#order-standard_cart)) .btn-primary:hover {
    background: #2169d5 !important;
    border-color: #2169d5 !important;
}

/* Tables */
body:not(:has(#order-standard_cart)) .table {
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

body:not(:has(#order-standard_cart)) .table > thead > tr > th {
    background: #f8fafc !important;
    color: #374151 !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-weight: 700 !important;
}

body:not(:has(#order-standard_cart)) .table > tbody > tr > td {
    border-color: #edf0f4 !important;
    vertical-align: middle !important;
}

/* Store pricing cards */
body:not(:has(#order-standard_cart)) .mazen-hosting-pricing {
    gap: 0 !important;
}

body:not(:has(#order-standard_cart)) .mazen-pricing-card {
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .07) !important;
}

/* Search inputs */
body:not(:has(#order-standard_cart)) input[type="text"],
body:not(:has(#order-standard_cart)) input[type="search"],
body:not(:has(#order-standard_cart)) input[type="email"],
body:not(:has(#order-standard_cart)) input[type="password"],
body:not(:has(#order-standard_cart)) select,
body:not(:has(#order-standard_cart)) textarea {
    border-radius: 7px !important;
}

/* Mobile */
@media (max-width: 991px) {

    body:not(:has(#order-standard_cart)) .sidebar {
        margin-bottom: 20px !important;
    }

    .client-home-panels {
        width: auto !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

}

@media (max-width: 767px) {

    body:not(:has(#order-standard_cart)) .header-lined h1 {
        font-size: 24px !important;
    }

    body:not(:has(#order-standard_cart)) .sidebar .panel,
    body:not(:has(#order-standard_cart)) .main-content > .panel {
        border-radius: 8px !important;
    }

}

/* =========================================================
   END CROSTER CLIENT AREA
   ========================================================= */


/* =========================================================
   MAZEN - CLIENT AREA FINAL LAYOUT
   ========================================================= */

/* Client area only - exclude cart/checkout */
body:not(:has(#order-standard_cart)) {

    /* Overall background */
    background: #f5f7fb !important;
}

/* Main client area container */
body:not(:has(#order-standard_cart)) .client-home-panels,
body:not(:has(#order-standard_cart)) .clientarea-content {
    max-width: 1400px !important;
}

/* Sidebar */
body:not(:has(#order-standard_cart)) .panel-sidebar,
body:not(:has(#order-standard_cart)) .card-sidebar {

    background: #ffffff !important;
    border: 1px solid #e1e6ee !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 14px rgba(15,23,42,.06) !important;
    overflow: hidden !important;
}

/* Sidebar header */
body:not(:has(#order-standard_cart)) .panel-sidebar .panel-heading,
body:not(:has(#order-standard_cart)) .card-sidebar .card-header {

    background: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #e7ebf0 !important;
    font-weight: 700 !important;
}

/* Sidebar body */
body:not(:has(#order-standard_cart)) .panel-sidebar .panel-body,
body:not(:has(#order-standard_cart)) .card-sidebar .card-body {
    padding: 16px !important;
}

/* Sidebar list */
body:not(:has(#order-standard_cart)) .panel-sidebar .list-group-item,
body:not(:has(#order-standard_cart)) .card-sidebar .list-group-item {

    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f2f5 !important;
    padding: 11px 14px !important;
    color: #374151 !important;
}

/* Sidebar active item */
body:not(:has(#order-standard_cart)) .panel-sidebar .list-group-item.active,
body:not(:has(#order-standard_cart)) .card-sidebar .list-group-item.active {

    background: #eef5ff !important;
    color: #2563eb !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
}

/* Main panels */
body:not(:has(#order-standard_cart)) .panel:not(.panel-sidebar),
body:not(:has(#order-standard_cart)) .card:not(.card-sidebar) {

    border: 1px solid #e1e6ee !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 14px rgba(15,23,42,.06) !important;
}

/* Main panel header */
body:not(:has(#order-standard_cart)) .panel:not(.panel-sidebar) .panel-heading {

    background: #ffffff !important;
    border-bottom: 1px solid #e7ebf0 !important;
    color: #111827 !important;
    padding: 15px 18px !important;
}

/* Main panel body */
body:not(:has(#order-standard_cart)) .panel:not(.panel-sidebar) .panel-body {
    background: #ffffff !important;
    padding: 18px !important;
}

/* Dashboard statistic cards */
body:not(:has(#order-standard_cart)) #tiles {
    margin-bottom: 25px !important;
}

body:not(:has(#order-standard_cart)) #tiles .tile {

    background: #ffffff !important;
    border: 1px solid #e1e6ee !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 14px rgba(15,23,42,.06) !important;
    overflow: hidden !important;
}

/* Search */
body:not(:has(#order-standard_cart)) .home-kb-search {
    margin-bottom: 25px !important;
}

body:not(:has(#order-standard_cart)) .home-kb-search input {
    height: 46px !important;
    border: 1px solid #dce2e9 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* Page title */
body:not(:has(#order-standard_cart)) .page-header,
body:not(:has(#order-standard_cart)) .header-lined {
    border-bottom: 1px solid #e1e6ee !important;
}

body:not(:has(#order-standard_cart)) .header-lined h1 {
    color: #111827 !important;
    font-weight: 800 !important;
}

/* Tables */
body:not(:has(#order-standard_cart)) .table > thead > tr > th {
    background: #f8fafc !important;
    color: #374151 !important;
    border-bottom: 1px solid #e1e6ee !important;
    font-weight: 700 !important;
}

body:not(:has(#order-standard_cart)) .table > tbody > tr > td {
    border-color: #edf0f4 !important;
    vertical-align: middle !important;
}

/* Buttons */
body:not(:has(#order-standard_cart)) .btn {
    border-radius: 7px !important;
    font-weight: 600 !important;
}

/* Forms */
body:not(:has(#order-standard_cart)) .form-control,
body:not(:has(#order-standard_cart)) select,
body:not(:has(#order-standard_cart)) textarea {
    border-radius: 7px !important;
    border-color: #dce2e9 !important;
    box-shadow: none !important;
}

/* Mobile */
@media (max-width: 767px) {

    body:not(:has(#order-standard_cart)) .panel-sidebar,
    body:not(:has(#order-standard_cart)) .card-sidebar {
        margin-bottom: 15px !important;
    }

    body:not(:has(#order-standard_cart)) .panel:not(.panel-sidebar),
    body:not(:has(#order-standard_cart)) .card:not(.card-sidebar) {
        border-radius: 8px !important;
    }
}

/* =========================================================
   END MAZEN CLIENT AREA FINAL
   ========================================================= */


/* =========================================================
   CLIENT AREA - SIDEBAR + CONTENT SAME TOP
   ========================================================= */

@media (min-width: 992px) {

    /* Keep sidebar and main content in the same row */
    body:not(:has(#order-standard_cart)) .elmrooj-service-sidebar {
        float: left !important;
        width: 25% !important;
        margin-top: 0 !important;
    }

    /* Main client content */
    body:not(:has(#order-standard_cart)) .elmrooj-service-sidebar + [class*="col-lg-"],
    body:not(:has(#order-standard_cart)) .elmrooj-service-sidebar ~ [class*="col-lg-"] {
        float: right !important;
        width: 75% !important;
        margin-top: 0 !important;
    }

    /* Dashboard title starts at the top */
    body:not(:has(#order-standard_cart)) .elmrooj-service-sidebar ~ [class*="col-lg-"] .header-lined {
        margin-top: 0 !important;
    }

    /* Prevent the sidebar height from pushing content down */
    body:not(:has(#order-standard_cart)) .elmrooj-service-sidebar {
        align-self: flex-start !important;
    }

}

/* =========================================================
   END CLIENT AREA LAYOUT
   ========================================================= */


/* =========================================================
   MAZEN STORE - SIDEBAR BESIDE PRODUCTS
   ========================================================= */

@media (min-width: 992px) {

    /* Order/Store main layout */
    body:has(.products-slide) .ajaxcart_cont > .row,
    body:has(.products-slide) .order-page > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    /* Main products area */
    body:has(.products-slide) .ajaxcart_cont .col-lg-8,
    body:has(.products-slide) .order-page .col-lg-8 {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Store sidebar */
    body:has(.products-slide) .ajaxcart_cont .col-lg-4.col-xl-3,
    body:has(.products-slide) .order-page .col-lg-4.col-xl-3 {
        flex: 0 0 280px !important;
        width: 280px !important;
        max-width: 280px !important;
    }

    /* Sidebar itself */
    body:has(.products-slide) #sidebar {
        width: 100% !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    /* Products grid */
    body:has(.products-slide) .products-row,
    body:has(.products-slide) .products {
        width: 100% !important;
    }

}

@media (max-width: 991px) {

    body:has(.products-slide) .ajaxcart_cont > .row {
        display: block !important;
    }

    body:has(.products-slide) .ajaxcart_cont .col-lg-4.col-xl-3 {
        width: 100% !important;
        max-width: 100% !important;
    }

}

/* =========================================================
   END MAZEN STORE SIDEBAR
   ========================================================= */


/* =========================================================
   MAZEN PRODUCT STORE - FIX SIDEBAR BESIDE PRODUCTS
   ========================================================= */

@media (min-width: 992px) {

    /* Product page only */
    #order-standard_cart > .row:has(> .sidebar) {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* LEFT SIDEBAR */
    #order-standard_cart > .row > .sidebar {
        display: block !important;
        flex: 0 0 250px !important;
        width: 250px !important;
        max-width: 250px !important;
        float: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
    }

    /* MAIN PRODUCTS */
    #order-standard_cart > .row > .main-content {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
        padding-left: 20px !important;
    }

    /* Pricing grid */
    #order-standard_cart > .row > .main-content .mazen-pricing-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

}

@media (max-width: 991px) {

    #order-standard_cart > .row:has(> .sidebar) {
        display: block !important;
    }

    #order-standard_cart > .row > .sidebar,
    #order-standard_cart > .row > .main-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

}

/* =========================================================
   END PRODUCT STORE LAYOUT FIX
   ========================================================= */


/* =========================================================
   FIX STORE PRIMARY CONTENT WIDTH
   ========================================================= */

@media (min-width: 992px) {

    /* The main client/store column must use the full container width */
    body:has(#order-standard_cart) .col-12.primary-content.elmrooj-service-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        min-width: 0 !important;
        float: none !important;
    }

    /* Store layout inside the primary column */
    body:has(#order-standard_cart) #order-standard_cart > .row {
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    /* Sidebar */
    body:has(#order-standard_cart) #order-standard_cart > .row > .sidebar {
        flex: 0 0 250px !important;
        width: 250px !important;
        max-width: 250px !important;
    }

    /* Products */
    body:has(#order-standard_cart) #order-standard_cart > .row > .main-content {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

}


/* CHECKOUT ONLY - FIX OUTER TWO COLUMNS */
@media (min-width: 992px) {

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

}

/* CHECKOUT ONLY - EXPAND INNER CART ROW */
@media (min-width: 992px) {

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-4:first-child {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-4:last-child {
        flex: 0 0 300px !important;
        width: 300px !important;
        max-width: 300px !important;
        min-width: 300px !important;
    }

}

/* CHECKOUT ONLY - FINAL INNER COLUMN RATIO */
@media (min-width: 992px) {

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-8 {
        flex: 0 0 75% !important;
        width: 75% !important;
        max-width: 75% !important;
        min-width: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-4 {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
        min-width: 0 !important;
    }

}

/* CHECKOUT ONLY - EXPAND CART CONTENT */
@media (min-width: 992px) {

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-8 {
        flex: 0 0 70% !important;
        width: 70% !important;
        max-width: 70% !important;
        min-width: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-4 {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
        min-width: 0 !important;
    }

}

/* CHECKOUT ONLY - FINAL OUTER WIDTH */
@media (min-width: 992px) {

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
        min-width: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) {
        flex: 0 0 65% !important;
        width: 65% !important;
        max-width: 65% !important;
        min-width: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-8 {
        flex: 0 0 70% !important;
        width: 70% !important;
        max-width: 70% !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-4 {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
    }

}

/* CHECKOUT ONLY - WIDTH BALANCE */
@media (min-width: 992px) {

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
        min-width: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) {
        flex: 0 0 75% !important;
        width: 75% !important;
        max-width: 75% !important;
        min-width: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-8 {
        flex: 0 0 65% !important;
        width: 65% !important;
        max-width: 65% !important;
        min-width: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-4 {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
        min-width: 0 !important;
    }

}

/* CHECKOUT ONLY - FINAL POLISH */
@media (min-width: 992px) {

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
        min-width: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) {
        flex: 0 0 70% !important;
        width: 70% !important;
        max-width: 70% !important;
        min-width: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child h1 {
        white-space: nowrap !important;
        font-size: 32px !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-8 {
        flex: 0 0 70% !important;
        width: 70% !important;
        max-width: 70% !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-4 {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
    }

}

/* CHECKOUT ONLY - FIX TITLE OVERLAP */
@media (min-width: 992px) {

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
        min-width: 340px !important;
        padding-right: 25px !important;
        box-sizing: border-box !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child h1 {
        white-space: nowrap !important;
        font-size: 30px !important;
        width: max-content !important;
        max-width: none !important;
        margin-right: 20px !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

}

/* =========================================================
   FINAL CHECKOUT LAYOUT - NORMAL CART ONLY
   ========================================================= */
@media (min-width: 992px) {

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Checkout title column */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
        min-width: 0 !important;
        padding-right: 25px !important;
        box-sizing: border-box !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child h1 {
        white-space: nowrap !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Main checkout area */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) {
        flex: 0 0 75% !important;
        width: 75% !important;
        max-width: 75% !important;
        min-width: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Cart + Order Summary row */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Cart */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-8 {
        flex: 0 0 70% !important;
        width: 70% !important;
        max-width: 70% !important;
        min-width: 0 !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* Order Summary */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-4 {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Prevent old fixed/affix widths */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart .ajax-cart,
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart .order-summary {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
    }
}

/* FINAL CHECKOUT - PREVENT TITLE/CART OVERLAP */
@media (min-width: 992px) {

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
        min-width: 0 !important;
        padding-right: 30px !important;
        box-sizing: border-box !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child h1 {
        white-space: nowrap !important;
        width: auto !important;
        max-width: none !important;
        font-size: 30px !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) {
        flex: 0 0 70% !important;
        width: 70% !important;
        max-width: 70% !important;
        min-width: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-8 {
        flex: 0 0 70% !important;
        width: 70% !important;
        max-width: 70% !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-4 {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
        box-sizing: border-box !important;
    }
}

/* FINAL - CHECKOUT TITLE ONLY */
@media (min-width: 992px) {
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        padding-right: 35px !important;
        overflow: visible !important;
    }
}

/* FINAL - SEPARATE CHECKOUT TITLE FROM CART */
@media (min-width: 992px) {
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        display: block !important;
        width: max-content !important;
        max-width: none !important;
        transform: translateX(-5px) !important;
    }
}

/* =========================================================
   CHECKOUT ONLY - FIX REVIEW & CHECKOUT TITLE
   Do NOT affect product/store pricing pages
   ========================================================= */
@media (min-width: 992px) {

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        overflow: visible !important;
        position: relative !important;
        z-index: 5 !important;
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child .header-lined {
        overflow: visible !important;
        width: 100% !important;
        max-width: none !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child h1 {
        display: block !important;
        white-space: nowrap !important;
        overflow: visible !important;
        width: max-content !important;
        max-width: none !important;
        font-size: 30px !important;
        position: relative !important;
        z-index: 10 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) {
        flex: 0 0 70% !important;
        width: 70% !important;
        max-width: 70% !important;
        min-width: 0 !important;
    }
}

/* CHECKOUT - prevent title from overlapping cart */
@media (min-width: 992px) {
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child h1 {
        font-size: 26px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        width: auto !important;
        max-width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
    }
}

/* CHECKOUT - reserve space for Review & Checkout title only */
@media (min-width: 992px) {
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        flex: 0 0 320px !important;
        width: 320px !important;
        max-width: 320px !important;
        min-width: 320px !important;
        padding-right: 25px !important;
        box-sizing: border-box !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child h1 {
        width: 100% !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        font-size: 26px !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* CHECKOUT - restore balanced desktop dimensions */
@media (min-width: 992px) {

    /* Title column */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
        min-width: 0 !important;
        padding-right: 30px !important;
        box-sizing: border-box !important;
    }

    /* Checkout content column */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) {
        flex: 1 1 70% !important;
        width: 70% !important;
        max-width: 70% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Cart + Order Summary */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        align-items: flex-start !important;
    }

    /* Cart */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-8 {
        flex: 0 0 68% !important;
        width: 68% !important;
        max-width: 68% !important;
        padding-left: 10px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* Summary */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) > .row > .col-lg-4 {
        flex: 0 0 32% !important;
        width: 32% !important;
        max-width: 32% !important;
        padding-left: 15px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* Keep title clean */
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child h1 {
        font-size: 30px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* CHECKOUT - final column spacing */
@media (min-width: 992px) {
    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child {
        flex: 0 0 350px !important;
        width: 350px !important;
        max-width: 350px !important;
        min-width: 350px !important;
        padding-right: 35px !important;
        box-sizing: border-box !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:first-child h1 {
        font-size: 30px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        width: max-content !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body:has(#order-standard_cart):not(:has(.mazen-hosting-pricing))
    #order-standard_cart > .row > .col-md-12:nth-child(2) {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* STORE PAGES - restore full content width */
@media (min-width: 992px) {

    /* Store outer layout */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    .main-container > .row {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body:has(#order-standard_cart .mazen-hosting-pricing)
    .main-container > .row > .col-12.primary-content.elmrooj-service-content {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Store cart container */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    #order-standard_cart {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Store internal layout */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    #order-standard_cart > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        align-items: flex-start !important;
    }

    /* Left sidebar */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    #order-standard_cart > .row > .sidebar {
        flex: 0 0 250px !important;
        width: 250px !important;
        max-width: 250px !important;
        min-width: 250px !important;
    }

    /* Product area */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    #order-standard_cart > .row > .main-content {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 25px !important;
    }

    /* Pricing grid */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    .mazen-hosting-pricing {
        width: 100% !important;
        max-width: 100% !important;
    }

    body:has(#order-standard_cart .mazen-hosting-pricing)
    .mazen-hosting-pricing .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    body:has(#order-standard_cart .mazen-hosting-pricing)
    .mazen-hosting-pricing [class*="col-"] {
        min-width: 0 !important;
    }
}

/* STORE PAGES - restore full content width */
@media (min-width: 992px) {

    /* Store outer layout */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    .main-container > .row {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body:has(#order-standard_cart .mazen-hosting-pricing)
    .main-container > .row > .col-12.primary-content.elmrooj-service-content {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Store cart container */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    #order-standard_cart {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Store internal layout */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    #order-standard_cart > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        align-items: flex-start !important;
    }

    /* Left sidebar */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    #order-standard_cart > .row > .sidebar {
        flex: 0 0 250px !important;
        width: 250px !important;
        max-width: 250px !important;
        min-width: 250px !important;
    }

    /* Product area */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    #order-standard_cart > .row > .main-content {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 25px !important;
    }

    /* Pricing grid */
    body:has(#order-standard_cart .mazen-hosting-pricing)
    .mazen-hosting-pricing {
        width: 100% !important;
        max-width: 100% !important;
    }

    body:has(#order-standard_cart .mazen-hosting-pricing)
    .mazen-hosting-pricing .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    body:has(#order-standard_cart .mazen-hosting-pricing)
    .mazen-hosting-pricing [class*="col-"] {
        min-width: 0 !important;
    }
}

/* STORE ONLY - expand the actual main row */
@media (min-width: 992px) {
    body:has(#order-standard_cart .sidebar)
    .main-container > .row {
        flex: 1 1 100% !important;
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body:has(#order-standard_cart .sidebar)
    .main-container {
        width: 100% !important;
        max-width: 1450px !important;
        flex: 1 1 auto !important;
    }
}

/* =========================================================
   STORE PRODUCT CARDS - FIX DIMENSIONS
   ========================================================= */

@media (min-width: 992px) {

    /* Main store content */
    body:has(#order-standard_cart .sidebar)
    #order-standard_cart .main-content {
        width: calc(100% - 270px) !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Pricing wrapper */
    body:has(#order-standard_cart .sidebar)
    .mazen-hosting-pricing {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
        gap: 20px !important;
        align-items: stretch !important;
    }

    /* Product/card */
    body:has(#order-standard_cart .sidebar)
    .mazen-hosting-pricing > div,
    body:has(#order-standard_cart .sidebar)
    .mazen-hosting-pricing .pricing-card,
    body:has(#order-standard_cart .sidebar)
    .mazen-hosting-pricing [class*="pricing-card"] {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Card inner content */
    body:has(#order-standard_cart .sidebar)
    .mazen-hosting-pricing .card,
    body:has(#order-standard_cart .sidebar)
    .mazen-hosting-pricing .product-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Price / order section */
    body:has(#order-standard_cart .sidebar)
    .mazen-hosting-pricing .price,
    body:has(#order-standard_cart .sidebar)
    .mazen-hosting-pricing .pricing,
    body:has(#order-standard_cart .sidebar)
    .mazen-hosting-pricing .card-footer {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* Prevent text clipping */
    body:has(#order-standard_cart .sidebar)
    .mazen-hosting-pricing * {
        box-sizing: border-box !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {

    .mazen-hosting-pricing {
        grid-template-columns: repeat(2, minmax(250px, 1fr)) !important;
        width: 100% !important;
        gap: 15px !important;
    }

}

/* Mobile */
@media (max-width: 767px) {

    .mazen-hosting-pricing {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

}

/* =========================================================
   MAZEN STORE - PRODUCT CARD WIDTH FIX
   ========================================================= */

@media (min-width: 992px) {

    /* Product card itself */
    #order-standard_cart .product-card,
    #order-standard_cart [class*="product-card"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Product description */
    #order-standard_cart .product-desc {
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Pricing section */
    #order-standard_cart .product-pricing {
        width: 220px !important;
        max-width: 220px !important;
        min-width: 220px !important;
        flex: 0 0 220px !important;
        box-sizing: border-box !important;
    }

    /* Pricing footer */
    #order-standard_cart .product-pricing footer,
    #order-standard_cart .product-pricing .product-footer,
    #order-standard_cart .product-footer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Order button */
    #order-standard_cart .product-pricing .btn,
    #order-standard_cart .product-footer .btn {
        max-width: 100% !important;
        white-space: nowrap !important;
    }

    /* Product card row */
    #order-standard_cart .product-card > *,
    #order-standard_cart [class*="product-card"] > * {
        box-sizing: border-box !important;
    }
}


/* =========================================================
   EMAIL PRODUCT CARD - MATCH WORDPRESS CARD
   ========================================================= */

@media (min-width: 992px) {

    /* Email product container */
    #order-standard_cart .product.clearFix {
        width: 345px !important;
        max-width: 345px !important;
        min-width: 345px !important;
        min-height: 480px !important;
        background: #fff !important;
        border: 2px solid #3182f6 !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        padding: 24px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 4px 14px rgba(0,0,0,.05) !important;
        overflow: hidden !important;
    }

    /* Header / title */
    #order-standard_cart .product.clearFix .product-header,
    #order-standard_cart .product.clearFix .product-title,
    #order-standard_cart .product.clearFix h3,
    #order-standard_cart .product.clearFix h4 {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #0b1f3a !important;
    }

    /* Product description */
    #order-standard_cart .product.clearFix .product-desc,
    #order-standard_cart .product.clearFix .product-description,
    #order-standard_cart .product.clearFix .product-desc p {
        color: #607087 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Price area */
    #order-standard_cart .product.clearFix .product-pricing,
    #order-standard_cart .product.clearFix .product-price,
    #order-standard_cart .product.clearFix .price {
        font-size: 30px !important;
        font-weight: 800 !important;
        color: #071d45 !important;
        margin-top: 25px !important;
        margin-bottom: 20px !important;
    }

    /* Dark old price box -> white card area */
    #order-standard_cart .product.clearFix .product-pricing {
        background: transparent !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    /* Order button */
    #order-standard_cart .product.clearFix .btn,
    #order-standard_cart .product.clearFix .btn-order,
    #order-standard_cart .product.clearFix a.btn {
        width: 100% !important;
        min-width: 100% !important;
        height: 50px !important;
        border-radius: 9px !important;
        background: #3182f6 !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 10px 0 20px !important;
        box-sizing: border-box !important;
    }

    #order-standard_cart .product.clearFix .btn:hover,
    #order-standard_cart .product.clearFix a.btn:hover {
        background: #2674e8 !important;
    }

    /* Remove old dark background */
    #order-standard_cart .product.clearFix > div,
    #order-standard_cart .product.clearFix .product-footer {
        box-sizing: border-box !important;
    }

    /* Features */
    #order-standard_cart .product.clearFix ul {
        width: 100% !important;
        margin: 15px 0 0 !important;
        padding: 15px 0 0 0 !important;
        border-top: 1px solid #e5eaf0 !important;
        list-style: none !important;
    }

    #order-standard_cart .product.clearFix li {
        font-size: 14px !important;
        line-height: 1.8 !important;
        color: #193b68 !important;
        margin: 3px 0 !important;
    }

}

/* Don't affect mobile */
@media (max-width: 991px) {
    #order-standard_cart .product.clearFix {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   BUY EMAIL - MATCH WORDPRESS PRODUCT CARD
   ========================================================= */

@media (min-width: 992px) {

    #order-standard_cart .products #product16 {
        width: 345px !important;
        max-width: 345px !important;
        min-width: 345px !important;
        min-height: 480px !important;

        background: #ffffff !important;
        border: 2px solid #3182f6 !important;
        border-radius: 12px !important;

        padding: 24px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;

        box-shadow: 0 4px 14px rgba(0,0,0,.05) !important;
        overflow: hidden !important;
    }

    /* Product title */
    #order-standard_cart .products #product16 > header {
        padding: 0 !important;
        margin: 0 0 15px !important;
        border: 0 !important;
        background: transparent !important;
    }

    #order-standard_cart .products #product16 > header span {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #071d45 !important;
    }

    /* Email icon */
    #order-standard_cart .products #product16 > header:before {
        content: "\f0e0" !important;
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 56px !important;
        height: 56px !important;

        margin-right: 14px !important;

        background: #eef6ff !important;
        color: #3182f6 !important;

        border-radius: 12px !important;
        font-size: 24px !important;

        vertical-align: middle !important;
    }

    /* Description area */
    #order-standard_cart .products #product16 .product-desc {
        flex: 0 0 auto !important;
        min-height: 55px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #607087 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Price section */
    #order-standard_cart .products #product16 .product-pricing {
        width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 80px !important;

        margin: 15px 0 10px !important;
        padding: 0 !important;

        background: transparent !important;
        color: #071d45 !important;

        text-align: left !important;
        box-sizing: border-box !important;
    }

    #order-standard_cart .products #product16 .product-pricing br {
        display: none !important;
    }

    #order-standard_cart .products #product16 .product-pricing .price {
        display: inline-block !important;

        font-size: 30px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;

        color: #071d45 !important;
    }

    /* "Starting from" */
    #order-standard_cart .products #product16 .product-pricing {
        font-size: 0 !important;
    }

    #order-standard_cart .products #product16 .product-pricing .price {
        font-size: 30px !important;
    }

    /* Order button */
    #order-standard_cart .products #product16 > footer {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    #order-standard_cart .products #product16 #product16-order-button {
        width: 100% !important;
        height: 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 0 20px !important;

        background: #3182f6 !important;
        border: 0 !important;
        border-radius: 9px !important;

        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 700 !important;

        box-sizing: border-box !important;
    }

    #order-standard_cart .products #product16 #product16-order-button:hover {
        background: #2674e8 !important;
    }

    /* Feature separator */
    #order-standard_cart .products #product16 .product-desc ul {
        display: block !important;

        min-height: 100px !important;

        margin: 0 !important;
        padding: 15px 0 0 !important;

        border-top: 1px solid #e5eaf0 !important;

        list-style: none !important;
    }

}

/* Mobile */
@media (max-width: 991px) {

    #order-standard_cart .products #product16 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

}


/* =========================================================
   PROFESSIONAL EMAIL CREDIT CARD
   Buy Email - Product #16
   ========================================================= */

@media (min-width: 992px) {

    #order-standard_cart .products #product16 {
        width: 345px !important;
        max-width: 345px !important;
        min-width: 345px !important;
        min-height: 480px !important;

        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;

        padding: 24px !important;
        margin: 0 !important;

        background: #ffffff !important;
        border: 2px solid #3182f6 !important;
        border-radius: 12px !important;

        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;

        overflow: hidden !important;
    }


    /* ---------- HEADER ---------- */

    #order-standard_cart .products #product16 > header {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 64px !important;

        padding: 0 0 18px !important;
        margin: 0 !important;

        border-bottom: 1px solid #e5eaf0 !important;
        background: transparent !important;
    }


    /* Email icon */

    #order-standard_cart .products #product16 > header:before {
        content: "✉" !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 56px !important;

        width: 56px !important;
        height: 56px !important;

        margin-right: 14px !important;

        background: #eef6ff !important;
        color: #3182f6 !important;

        border-radius: 12px !important;

        font-size: 25px !important;
        line-height: 1 !important;

        box-sizing: border-box !important;
    }


    #order-standard_cart .products #product16 > header span {
        display: block !important;

        color: #071d45 !important;

        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }


    /* ---------- DESCRIPTION ---------- */

    #order-standard_cart .products #product16 .product-desc {
        display: block !important;

        width: 100% !important;
        min-height: 115px !important;

        padding: 20px 0 0 !important;
        margin: 0 !important;

        color: #607087 !important;

        font-size: 14px !important;
        line-height: 1.6 !important;
    }


    #order-standard_cart .products #product16 .product-desc:before {
        content:
        "Create professional email accounts for your business.\\A"
        "Purchase email credits and use them to create mailboxes whenever you need." !important;

        white-space: pre-line !important;

        display: block !important;

        color: #607087 !important;

        font-size: 14px !important;
        line-height: 1.65 !important;
    }


    /* Hide empty original list */

    #order-standard_cart .products #product16 .product-desc ul {
        display: none !important;
    }


    /* ---------- PRICE ---------- */

    #order-standard_cart .products #product16 .product-pricing {
        display: block !important;

        width: 100% !important;

        min-height: 82px !important;

        padding: 0 !important;
        margin: 5px 0 10px !important;

        background: transparent !important;

        text-align: left !important;

        font-size: 0 !important;
        color: #071d45 !important;
    }


    #order-standard_cart .products #product16 .product-pricing:before {
        content: "Email Credit" !important;

        display: block !important;

        margin-bottom: 3px !important;

        color: #607087 !important;

        font-size: 13px !important;
        font-weight: 500 !important;
    }


    #order-standard_cart .products #product16 .product-pricing .price {
        display: inline-block !important;

        color: #071d45 !important;

        font-size: 30px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }


    #order-standard_cart .products #product16 .product-pricing:after {
        content: " / credit" !important;

        color: #607087 !important;

        font-size: 14px !important;
        font-weight: 500 !important;
    }


    #order-standard_cart .products #product16 .product-pricing br {
        display: none !important;
    }


    /* ---------- ORDER BUTTON ---------- */

    #order-standard_cart .products #product16 > footer {
        width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        background: transparent !important;
    }


    #order-standard_cart .products #product16 #product16-order-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 50px !important;

        margin: 0 !important;

        background: #3182f6 !important;
        border: 0 !important;
        border-radius: 9px !important;

        color: #ffffff !important;

        font-size: 16px !important;
        font-weight: 700 !important;

        box-shadow: 0 5px 12px rgba(49,130,246,.20) !important;

        transition: all .2s ease !important;
    }


    #order-standard_cart .products #product16 #product16-order-button:hover {
        background: #2674e8 !important;

        transform: translateY(-1px) !important;

        box-shadow: 0 7px 16px rgba(49,130,246,.25) !important;
    }


    /* ---------- FEATURES ---------- */

    #order-standard_cart .products #product16 > footer:after {
        content:
        "✓ Create business email accounts\\A"
        "✓ Professional mailbox for your domain\\A"
        "✓ Add more mailboxes whenever needed\\A"
        "✓ Flexible email credit system" !important;

        display: block !important;

        white-space: pre-line !important;

        padding-top: 18px !important;
        margin-top: 20px !important;

        border-top: 1px solid #e5eaf0 !important;

        color: #38516f !important;

        font-size: 13px !important;
        line-height: 2 !important;
    }

}


/* ---------- MOBILE ---------- */

@media (max-width: 991px) {

    #order-standard_cart .products #product16 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;
    }

    #order-standard_cart .products #product16 #product16-order-button {
        width: 100% !important;
    }

}


/* =========================================================
   STORE PRODUCT CARDS - PROFESSIONAL BASE DESIGN
   Business Hosting / Store Products
   ========================================================= */

@media (min-width: 992px) {

    /* Main product grid */
    #order-standard_cart .products {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
        align-items: stretch !important;
    }


    /* Every product card */
    #order-standard_cart .products .product.clearfix {
        position: relative !important;

        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;

        min-height: 535px !important;

        display: flex !important;
        flex-direction: column !important;

        padding: 22px !important;
        margin: 0 !important;

        box-sizing: border-box !important;

        background: #ffffff !important;

        border: 1px solid #dbe4f0 !important;
        border-radius: 16px !important;

        box-shadow:
            0 4px 14px rgba(15,23,42,.045) !important;

        overflow: hidden !important;

        transition:
            transform .2s ease,
            box-shadow .2s ease,
            border-color .2s ease !important;
    }


    /* Hover */
    #order-standard_cart .products .product.clearfix:hover {
        transform: translateY(-4px) !important;

        border-color: #9fc5ff !important;

        box-shadow:
            0 12px 28px rgba(15,23,42,.10) !important;
    }


    /* -----------------------------------------------------
       PRODUCT HEADER
       ----------------------------------------------------- */

    #order-standard_cart .products .product.clearfix > header {
        display: flex !important;
        align-items: center !important;

        min-height: 70px !important;

        padding: 0 0 18px !important;
        margin: 0 !important;

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

        background: transparent !important;
    }


    #order-standard_cart .products .product.clearfix > header span {
        color: #071d45 !important;

        font-size: 17px !important;
        font-weight: 750 !important;

        line-height: 1.25 !important;
    }


    /* Product icon */
    #order-standard_cart .products .product.clearfix > header:before {
        content: "◆" !important;

        width: 48px !important;
        height: 48px !important;

        flex: 0 0 48px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin-right: 13px !important;

        border-radius: 12px !important;

        background: #eef6ff !important;
        color: #3182f6 !important;

        font-size: 17px !important;
    }


    /* Different icon background per card */
    #order-standard_cart .products .product.clearfix:nth-child(2) > header:before {
        background: #f2edff !important;
        color: #7657e8 !important;
    }

    #order-standard_cart .products .product.clearfix:nth-child(3) > header:before {
        background: #eafaf3 !important;
        color: #22a06b !important;
    }

    #order-standard_cart .products .product.clearfix:nth-child(4) > header:before {
        background: #fff4e6 !important;
        color: #e8942e !important;
    }


    /* -----------------------------------------------------
       DESCRIPTION
       ----------------------------------------------------- */

    #order-standard_cart .products .product.clearfix .product-desc {
        min-height: 105px !important;

        padding: 18px 0 0 !important;
        margin: 0 !important;

        color: #64748b !important;

        font-size: 13px !important;
        line-height: 1.55 !important;
    }


    #order-standard_cart .products .product.clearfix .product-desc ul {
        margin: 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------------------
       PRICE
       ----------------------------------------------------- */

    #order-standard_cart .products .product.clearfix .product-pricing {
        display: block !important;

        width: 100% !important;

        min-height: 76px !important;

        padding: 0 !important;
        margin: 8px 0 12px !important;

        background: transparent !important;

        text-align: left !important;
    }


    #order-standard_cart .products .product.clearfix .product-pricing .price {
        color: #071d45 !important;

        font-size: 27px !important;
        font-weight: 800 !important;

        line-height: 1.2 !important;
    }


    /* /yr */
    #order-standard_cart .products .product.clearfix .product-pricing {
        color: #64748b !important;

        font-size: 13px !important;
    }


    /* -----------------------------------------------------
       ORDER BUTTON
       ----------------------------------------------------- */

    #order-standard_cart .products .product.clearfix > footer {
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
    }


    #order-standard_cart .products .product.clearfix .btn-order-now,
    #order-standard_cart .products .product.clearfix .btn-order,
    #order-standard_cart .products .product.clearfix [id$="-order-button"] {
        width: 100% !important;
        height: 48px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        border: 0 !important;
        border-radius: 9px !important;

        background: #3182f6 !important;
        color: #ffffff !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        box-shadow:
            0 5px 12px rgba(49,130,246,.18) !important;

        transition: all .2s ease !important;
    }


    #order-standard_cart .products .product.clearfix .btn-order-now:hover,
    #order-standard_cart .products .product.clearfix .btn-order:hover,
    #order-standard_cart .products .product.clearfix [id$="-order-button"]:hover {
        background: #2674e8 !important;

        transform: translateY(-1px) !important;

        box-shadow:
            0 8px 18px rgba(49,130,246,.25) !important;
    }


    /* -----------------------------------------------------
       FEATURES
       ----------------------------------------------------- */

    #order-standard_cart .products .product.clearfix .product-desc + footer:before {
        content: "" !important;

        display: block !important;

        height: 1px !important;

        margin: 0 0 14px !important;

        background: #edf1f6 !important;
    }


    /* Keep feature area aligned */
    #order-standard_cart .products .product.clearfix {
        justify-content: flex-start !important;
    }


    /* -----------------------------------------------------
       PROFESSIONAL = RECOMMENDED
       Card #3 in Business Hosting
       ----------------------------------------------------- */

    #order-standard_cart .products .product.clearfix:nth-child(3) {
        border: 2px solid #3182f6 !important;

        box-shadow:
            0 10px 28px rgba(49,130,246,.13) !important;

        transform: translateY(-5px) !important;

        z-index: 3 !important;
    }


    #order-standard_cart .products .product.clearfix:nth-child(3):hover {
        transform: translateY(-8px) !important;

        box-shadow:
            0 16px 34px rgba(49,130,246,.18) !important;
    }


    /* Recommended ribbon */
    #order-standard_cart .products .product.clearfix:nth-child(3):before {
        content: "MOST POPULAR • RECOMMENDED" !important;

        position: absolute !important;

        top: 14px !important;
        right: -48px !important;

        width: 175px !important;

        padding: 7px 0 !important;

        background: #3182f6 !important;
        color: #ffffff !important;

        text-align: center !important;

        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: .35px !important;

        transform: rotate(45deg) !important;

        z-index: 10 !important;
    }


    /* Professional icon */
    #order-standard_cart .products .product.clearfix:nth-child(3) > header:before {
        background: #eafaf3 !important;
        color: #20a46b !important;
    }


    /* Professional button */
    #order-standard_cart .products .product.clearfix:nth-child(3) [id$="-order-button"],
    #order-standard_cart .products .product.clearfix:nth-child(3) .btn-order,
    #order-standard_cart .products .product.clearfix:nth-child(3) .btn-order-now {
        background: #3182f6 !important;
    }

}


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

@media (max-width: 991px) {

    #order-standard_cart .products {
        display: block !important;
    }

    #order-standard_cart .products .product.clearfix {
        width: 100% !important;
        min-width: 0 !important;

        margin-bottom: 18px !important;

        min-height: 0 !important;
    }

    #order-standard_cart .products .product.clearfix:nth-child(3) {
        transform: none !important;
    }

}


/* =========================================================
   PROFESSIONAL - PREMIUM RECOMMENDED BADGE
   ========================================================= */

@media (min-width: 992px) {

    /* Professional card */
    #order-standard_cart .products .product.clearfix:nth-child(3) {
        position: relative !important;
        overflow: visible !important;

        border: 2px solid #3182f6 !important;

        box-shadow:
            0 12px 30px rgba(49,130,246,.14) !important;

        transform: translateY(-6px) !important;
        z-index: 5 !important;
    }


    /* Remove old diagonal ribbon */
    #order-standard_cart .products .product.clearfix:nth-child(3):before {
        content: "★  MOST POPULAR" !important;

        position: absolute !important;

        top: -14px !important;
        left: 50% !important;

        width: 150px !important;
        height: 28px !important;

        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        transform: translateX(-50%) !important;

        background: #3182f6 !important;

        color: #ffffff !important;

        border-radius: 20px !important;

        font-size: 10px !important;
        font-weight: 800 !important;

        letter-spacing: .4px !important;

        box-shadow:
            0 5px 12px rgba(49,130,246,.25) !important;

        z-index: 20 !important;
    }


    /* Professional title */
    #order-standard_cart .products .product.clearfix:nth-child(3) > header span {
        color: #071d45 !important;
        font-weight: 800 !important;
    }


    /* Professional price */
    #order-standard_cart .products .product.clearfix:nth-child(3)
    .product-pricing .price {
        color: #071d45 !important;
    }


    /* Professional button */
    #order-standard_cart .products .product.clearfix:nth-child(3)
    [id$="-order-button"],
    #order-standard_cart .products .product.clearfix:nth-child(3)
    .btn-order,
    #order-standard_cart .products .product.clearfix:nth-child(3)
    .btn-order-now {
        background: #3182f6 !important;
        box-shadow:
            0 6px 15px rgba(49,130,246,.22) !important;
    }


    /* Recommended small label under title */
    #order-standard_cart .products .product.clearfix:nth-child(3)
    > header:after {
        content: "Recommended" !important;

        position: absolute !important;

        top: 58px !important;
        right: 22px !important;

        color: #3182f6 !important;

        font-size: 10px !important;
        font-weight: 700 !important;

        letter-spacing: .2px !important;
    }

}


/* =========================================================
   PROFESSIONAL - MOST POPULAR / RECOMMENDED
   Detect card by product name, not nth-child
   ========================================================= */

@media (min-width: 992px) {

    /* Professional card */
    #order-standard_cart .products .product.clearfix:has(
        header span
    ):has(header span:is(:where(*))) {
        position: relative !important;
    }


    /* Find Professional through its visible title */
    #order-standard_cart .products .product.clearfix:has(
        header span
    ) {
        overflow: visible !important;
    }


    /* Professional title/card */
    #order-standard_cart .products .product.clearfix:has(
        header span
    ):has(header span) {
        /* keep normal card styling */
    }


    /* -----------------------------------------------------
       PROFESSIONAL BADGE
       The Professional card is the one containing
       the exact title "Professional"
       ----------------------------------------------------- */

    #order-standard_cart .products .product.clearfix:has(
        header span
    ) {
        /* intentionally neutral */
    }

}


/* =========================================================
   PROFESSIONAL CARD - JS CLASS TARGET
   ========================================================= */

@media (min-width: 992px) {

    #order-standard_cart .products .product.clearfix.is-professional {
        position: relative !important;

        overflow: visible !important;

        border: 2px solid #3182f6 !important;

        transform: translateY(-6px) !important;

        box-shadow:
            0 14px 32px rgba(49,130,246,.16) !important;

        z-index: 10 !important;
    }


    #order-standard_cart .products .product.clearfix.is-professional:before {
        content: "★  MOST POPULAR" !important;

        position: absolute !important;

        top: -15px !important;
        left: 50% !important;

        transform: translateX(-50%) !important;

        width: 155px !important;
        height: 29px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #3182f6 !important;

        color: #ffffff !important;

        border-radius: 20px !important;

        font-size: 10px !important;
        font-weight: 800 !important;

        letter-spacing: .4px !important;

        box-shadow:
            0 5px 12px rgba(49,130,246,.25) !important;

        z-index: 20 !important;
    }


    #order-standard_cart .products .product.clearfix.is-professional
    > header span {
        font-weight: 800 !important;
        color: #071d45 !important;
    }


    #order-standard_cart .products .product.clearfix.is-professional
    .product-pricing .price {
        color: #071d45 !important;
    }


    #order-standard_cart .products .product.clearfix.is-professional
    [id$="-order-button"],
    #order-standard_cart .products .product.clearfix.is-professional
    .btn-order,
    #order-standard_cart .products .product.clearfix.is-professional
    .btn-order-now {
        background: #3182f6 !important;

        box-shadow:
            0 7px 17px rgba(49,130,246,.24) !important;
    }

}


/* =========================================================
   AUTOMATICALLY MARK PROFESSIONAL CARD
   ========================================================= */

<script-placeholder>


@media (min-width: 992px) {

    #order-standard_cart .products .product.clearfix.is-professional {
        position: relative !important;
        overflow: visible !important;

        border: 2px solid #3182f6 !important;
        transform: translateY(-6px) !important;

        box-shadow:
            0 14px 32px rgba(49,130,246,.16) !important;

        z-index: 10 !important;
    }

    #order-standard_cart .products .product.clearfix.is-professional:before {
        content: "★  MOST POPULAR" !important;

        position: absolute !important;
        top: -15px !important;
        left: 50% !important;

        transform: translateX(-50%) !important;

        width: 155px !important;
        height: 29px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #3182f6 !important;
        color: #fff !important;

        border-radius: 20px !important;

        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: .4px !important;

        box-shadow: 0 5px 12px rgba(49,130,246,.25) !important;

        z-index: 20 !important;
    }

    #order-standard_cart .products .product.clearfix.is-professional
    > header span {
        font-weight: 800 !important;
        color: #071d45 !important;
    }

}


/* =========================================================
   PROFESSIONAL - RECOMMENDED / MOST POPULAR
   ========================================================= */

@media (min-width: 992px) {

    #order-standard_cart .products .product.clearfix.is-professional {
        position: relative !important;
        overflow: visible !important;

        border: 2px solid #3182f6 !important;

        transform: translateY(-8px) !important;

        box-shadow:
            0 18px 38px rgba(49,130,246,.20) !important;

        z-index: 10 !important;
    }

    #order-standard_cart .products .product.clearfix.is-professional::before {
        content: "★  MOST POPULAR" !important;

        position: absolute !important;

        top: -16px !important;
        left: 50% !important;

        transform: translateX(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 155px !important;
        height: 30px !important;

        background: linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        ) !important;

        color: #ffffff !important;

        border-radius: 18px !important;

        font-size: 10px !important;
        font-weight: 800 !important;

        letter-spacing: .5px !important;

        box-shadow:
            0 6px 16px rgba(37,99,235,.30) !important;

        z-index: 100 !important;
    }

    #order-standard_cart
    .products
    .product.clearfix.is-professional
    header span {
        font-weight: 800 !important;
    }

    #order-standard_cart
    .products
    .product.clearfix.is-professional
    .product-pricing .price {
        color: #071d45 !important;
    }

    #order-standard_cart
    .products
    .product.clearfix.is-professional
    .btn-order {
        box-shadow:
            0 8px 18px rgba(49,130,246,.25) !important;
    }

}


/* PROFESSIONAL - MOST POPULAR */

#order-standard_cart .products .product.clearfix.is-professional {
    position: relative !important;
    overflow: visible !important;
    border: 2px solid #2563eb !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 35px rgba(37, 99, 235, 0.20) !important;
    z-index: 20 !important;
}

#order-standard_cart .products .product.clearfix.is-professional::before {
    content: "★ MOST POPULAR" !important;

    position: absolute !important;
    top: -17px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 155px !important;
    height: 32px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;

    color: #fff !important;

    border-radius: 18px !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;

    box-shadow: 0 7px 18px rgba(37, 99, 235, .30) !important;

    z-index: 999 !important;
}

#order-standard_cart .products .product.clearfix.is-professional header span {
    font-weight: 800 !important;
}


/* =====================================================
   BUSINESS HOSTING - PROFESSIONAL RECOMMENDED
   ===================================================== */

@media (min-width: 992px) {

    #order-standard_cart .products > .row > .product.clearfix:nth-child(3) {
        position: relative !important;
        overflow: visible !important;
        z-index: 20 !important;

        border: 2px solid #2563eb !important;
        transform: translateY(-8px) !important;

        box-shadow:
            0 18px 40px rgba(37,99,235,.22) !important;
    }

    #order-standard_cart .products > .row > .product.clearfix:nth-child(3)::before {
        content: "★  MOST POPULAR" !important;

        position: absolute !important;
        top: -17px !important;
        left: 50% !important;

        transform: translateX(-50%) !important;

        width: 160px !important;
        height: 32px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        ) !important;

        color: #fff !important;

        border-radius: 20px !important;

        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: .5px !important;

        box-shadow:
            0 7px 18px rgba(37,99,235,.30) !important;

        z-index: 999 !important;
    }

    #order-standard_cart .products > .row > .product.clearfix:nth-child(3)
    .btn-order {
        box-shadow:
            0 8px 20px rgba(37,99,235,.28) !important;
    }

}


/* PROFESSIONAL - MOST POPULAR BADGE */

@media (min-width: 992px) {

    #order-standard_cart .products > .row > .col-md-6:nth-child(3) > .product {
        position: relative !important;
        overflow: visible !important;
        z-index: 50 !important;

        border: 2px solid #2563eb !important;
        transform: translateY(-8px) !important;

        box-shadow: 0 18px 40px rgba(37,99,235,.22) !important;
    }

    #order-standard_cart .products > .row > .col-md-6:nth-child(3) > .product::before {
        content: "★  MOST POPULAR" !important;

        position: absolute !important;
        top: -18px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: 160px !important;
        height: 32px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: linear-gradient(135deg,#2563eb,#3b82f6) !important;
        color: #fff !important;

        border-radius: 18px !important;

        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: .5px !important;

        box-shadow: 0 7px 18px rgba(37,99,235,.30) !important;

        z-index: 9999 !important;
    }

    #order-standard_cart .products > .row > .col-md-6:nth-child(3) > .product .btn-order {
        box-shadow: 0 8px 20px rgba(37,99,235,.28) !important;
    }

}


/* =========================================================
   BUSINESS HOSTING - PROFESSIONAL / MOST POPULAR
   ========================================================= */

@media (min-width: 992px) {

    #order-standard_cart .products > :nth-child(3) {
        position: relative !important;
        z-index: 50 !important;
        overflow: visible !important;

        transform: translateY(-10px) !important;
    }

    #order-standard_cart .products > :nth-child(3)::before {
        content: "★ MOST POPULAR" !important;

        position: absolute !important;
        top: -18px !important;
        left: 50% !important;

        transform: translateX(-50%) !important;

        width: 155px !important;
        height: 32px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: linear-gradient(135deg, #2563eb, #3b82f6) !important;

        color: #ffffff !important;

        border-radius: 20px !important;

        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: .5px !important;

        box-shadow: 0 8px 20px rgba(37,99,235,.30) !important;

        z-index: 9999 !important;
    }

    #order-standard_cart .products > :nth-child(3) > .product {
        border-color: #2563eb !important;
        box-shadow: 0 18px 40px rgba(37,99,235,.18) !important;
    }

}


/* Hide Buy WordPress page description */
body:has(#order-standard_cart) .header-lined h1 + p,
body:has(#order-standard_cart) .header-lined h1 ~ p {
    display: none !important;
}



/* ELMROOJ NAVY BLUE HOMEPAGE DESIGN START */
.domains-section{background:linear-gradient(135deg,#0b1730 0%,#123966 55%,#0879d5 100%)!important;color:#fff;padding:clamp(38px,6vw,78px) 0;position:relative;overflow:hidden}
.domains-section .domain-hero .h1{color:#fff!important;font-size:clamp(28px,4vw,46px);font-weight:800;line-height:1.25;margin:0 auto 28px;max-width:850px;letter-spacing:-.5px}
.domains-section .serach-form{max-width:850px;margin:0 auto;padding:8px;background:#fff;border:1px solid rgba(255,255,255,.35);border-radius:15px;box-shadow:0 18px 45px rgba(0,0,0,.2)}
.domains-section .serach-form .form-control{min-height:50px;color:#14243b;background:#fff;border:0;box-shadow:none;font-size:16px}
.domains-section .serach-form .input-group-icon{color:#64748b;align-self:center;padding:0 12px}
.domains-section .serach-form .btn{min-height:48px;border-radius:10px;font-weight:750;padding:10px 22px}
.domains-section .domain-hero form>.btn-link{color:#fff!important;margin-top:12px;text-decoration:underline}
#main-body{background:#f5f8fd;color:#26364d}
#main-body .h2{color:#102748;font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.3;margin-bottom:12px}
#main-body .action-icon-btns{row-gap:18px}
#main-body .action-icon-btns .card{height:100%;min-height:145px;display:flex;align-items:center;justify-content:center;gap:12px;padding:22px 14px;border:1px solid #e1eaf6;border-radius:16px;background:#fff;color:#173354;text-align:center;text-decoration:none;box-shadow:0 6px 20px rgba(17,49,86,.055);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
#main-body .action-icon-btns .card:hover{transform:translateY(-4px);border-color:#83baff;box-shadow:0 14px 30px rgba(17,49,86,.12)}
#main-body .action-icon-btns .ico-container{margin:0;color:#0879d5;font-size:32px}
#main-body .action-icon-btns .card span{font-weight:700;line-height:1.5}
#main-body .sec.light{background:#f5f8fd}
#main-body .sec.light .row-cols-md-3.my-5{row-gap:22px}
#main-body .sec.light .row-cols-md-3.my-5>.col>.card{height:100%;overflow:hidden;border:1px solid #e0e9f5;border-radius:17px;background:#fff;box-shadow:0 8px 24px rgba(18,43,75,.065);transition:transform .2s ease,box-shadow .2s ease}
#main-body .sec.light .row-cols-md-3.my-5>.col>.card:hover{transform:translateY(-4px);box-shadow:0 15px 34px rgba(18,43,75,.12)}
#main-body .sec.light .row-cols-md-3.my-5 .card .card-body{padding:25px;min-height:130px}
#main-body .sec.light .row-cols-md-3.my-5 .card h4{color:#102748;font-size:20px;font-weight:800;line-height:1.4;margin-bottom:12px}
#main-body .sec.light .row-cols-md-3.my-5 .card .card-body p{color:#64748b;line-height:1.75}
#main-body .sec.light .row-cols-md-3.my-5 .card .includes-features{margin-top:12px}
#main-body .sec.light .row-cols-md-3.my-5 .card .list-features li{padding:5px 0;color:#40516a;line-height:1.55}
#main-body .sec.light .row-cols-md-3.my-5 .card .list-features i{color:#0879d5!important}
#main-body .sec.light .row-cols-md-3.my-5 .card .card-footer{padding:14px 20px;border-top:1px solid #e8eef6;background:#fff}
#main-body .sec.light .row-cols-md-3.my-5 .card .card-footer .btn{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;border:1px solid #0879d5;border-radius:10px;background:#0879d5;color:#fff;font-weight:750;transition:background .2s ease,transform .2s ease}
#main-body .sec.light .row-cols-md-3.my-5 .card .card-footer .btn:hover{background:#075fa8;border-color:#075fa8;color:#fff}
@media(max-width:767.98px){.domains-section{padding:34px 0}.domains-section .domain-hero .h1{margin-bottom:20px} .domains-section .serach-form{padding:6px;border-radius:12px}#main-body .py-5{padding-top:2rem!important;padding-bottom:2rem!important}#main-body .action-icon-btns{margin-top:24px!important;margin-bottom:24px!important}#main-body .action-icon-btns .card{min-height:120px;padding:16px 10px}#main-body .action-icon-btns .ico-container{font-size:27px}#main-body .sec.light .row-cols-md-3.my-5 .card .card-body{padding:19px;min-height:0}}
/* ELMROOJ NAVY BLUE HOMEPAGE DESIGN END */

/* ELMROOJ SERVICE IMAGE CARDS V1 - CLEAN */
#main-body .elm-service-card{height:100%;overflow:hidden;border:1px solid #e1eaf5;border-radius:18px;background:#fff;box-shadow:0 8px 25px rgba(22,45,80,.08);transition:transform .2s ease,box-shadow .2s ease}
#main-body .elm-service-card:hover{transform:translateY(-4px);box-shadow:0 15px 34px rgba(22,45,80,.13)}
#main-body .elm-service-image{height:220px;overflow:hidden;background:#eaf1ff}
#main-body .elm-service-image img{display:block;width:100%;height:100%;object-fit:cover}
#main-body .elm-service-card .card-body{padding:22px 24px;min-height:150px}
#main-body .elm-service-card h4{margin:0 0 12px;color:#102748;font-size:21px;font-weight:800;line-height:1.45}
#main-body .elm-service-card p{margin-bottom:10px;color:#68778c;font-size:14px;line-height:1.8}
#main-body .elm-service-card .includes-features{margin-top:14px}
#main-body .elm-service-card .list-features li{padding:5px 0;color:#40516a;font-size:13px;line-height:1.65}
#main-body .elm-service-card .list-features i{color:#0879d5}
#main-body .elm-service-card .card-footer{padding:14px 20px;background:#fff;border-top:1px solid #edf1f7}
#main-body .elm-service-card .card-footer .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;border-radius:10px;background:#0879d5;border-color:#0879d5;color:#fff;font-weight:750}
#main-body .elm-service-card .card-footer .btn:hover{background:#075fa8;border-color:#075fa8}
@media(max-width:767.98px){#main-body .elm-service-image{height:190px}#main-body .elm-service-card .card-body{padding:19px}}

 
/* ELMROOJ CARD POLISH V3 */
#main-body .elm-service-card .card-body{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:150px;padding:22px 24px}
#main-body .elm-service-card .card-body h4{width:100%;text-align:center;margin:0 0 12px}
#main-body .elm-service-card .elm-service-description{display:block;width:100%;max-width:390px;margin:0 auto 14px;text-align:center;color:#687386;font-size:14px;line-height:1.85}
#main-body .elm-service-card .card-body .includes-features{width:100%;text-align:left}
#main-body .elm-service-card .card-footer .btn{width:100%;justify-content:center;text-align:center;font-size:15px}
#main-body .elm-service-image{aspect-ratio:480/270;height:auto}
#main-body .elm-service-image svg{display:block;width:100%;height:100%}
@media(max-width:767.98px){#main-body .elm-service-card .card-body{min-height:0;padding:18px}}


/* ELMROOJ EXTRA HOMEPAGE SECTIONS V1 */
#main-body .elm-extra-section{padding:64px 0;background:#fff;color:#20243a}
#main-body .elm-section-heading{max-width:760px;margin:0 auto 34px;text-align:center}
#main-body .elm-section-kicker{display:inline-block;margin-bottom:10px;color:#6c4ce8;font-size:12px;font-weight:800;letter-spacing:1.4px}
#main-body .elm-section-heading h2,#main-body .elm-security-copy h2,#main-body .elm-final-cta h2{margin:0 0 14px;font-size:clamp(25px,3vw,36px);font-weight:750;line-height:1.35;color:#20243a}
#main-body .elm-section-heading p,#main-body .elm-benefit-card p,#main-body .elm-security-copy p,#main-body .elm-final-cta p{margin:0;color:#687086;line-height:1.9}
#main-body .elm-benefit-card{height:100%;padding:28px 24px;border:1px solid #ece8fb;border-radius:18px;background:#fff;text-align:center;box-shadow:0 8px 28px rgba(38,24,90,.045)}
#main-body .elm-benefit-icon{display:inline-flex;width:54px;height:54px;align-items:center;justify-content:center;margin-bottom:18px;border-radius:16px;background:#f0ebff;color:#6c4ce8;font-size:25px}
#main-body .elm-benefit-card h3{margin:0 0 10px;font-size:19px;font-weight:700;color:#26213f}
#main-body .elm-security-section{padding-top:20px}
#main-body .elm-security-panel{display:flex;align-items:center;gap:26px;padding:36px;border:1px solid #e9e3ff;border-radius:22px;background:linear-gradient(120deg,#faf8ff 0%,#f1edff 100%)}
#main-body .elm-security-symbol{display:flex;flex:0 0 72px;width:72px;height:72px;align-items:center;justify-content:center;border-radius:20px;background:#fff;color:#6c4ce8;font-size:27px;box-shadow:0 6px 22px rgba(62,42,130,.08)}
#main-body .elm-security-copy{flex:1}
#main-body .elm-security-copy h2{font-size:clamp(23px,2.5vw,30px)}
#main-body .elm-section-button{flex-shrink:0;padding:12px 22px;border-radius:10px;background:#6941e8;border-color:#6941e8}
#main-body .elm-faq-list{max-width:850px;margin:0 auto}
#main-body .elm-faq-item{margin-bottom:12px;padding:0 20px;border:1px solid #eae7f4;border-radius:13px;background:#fff}
#main-body .elm-faq-item summary{position:relative;padding:19px 28px 19px 0;cursor:pointer;font-weight:700;color:#27233c;line-height:1.7;list-style:none}
#main-body .elm-faq-item summary::-webkit-details-marker{display:none}
#main-body .elm-faq-item summary:after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:#6941e8;font-size:23px;font-weight:500}
#main-body .elm-faq-item[open] summary:after{content:"−"}
#main-body .elm-faq-item p{margin:0;padding:0 0 19px;color:#687086;line-height:1.9}
#main-body .elm-final-cta{padding-top:20px}
#main-body .elm-final-cta-panel{padding:48px 24px;border-radius:24px;background:linear-gradient(120deg,#382078 0%,#6941e8 65%,#8064ed 100%);text-align:center}
#main-body .elm-final-cta-panel .elm-section-kicker{color:#e3dcff}
#main-body .elm-final-cta h2{color:#fff}
#main-body .elm-final-cta p{margin-bottom:24px;color:#eee9ff}
#main-body .elm-final-cta-button{padding:12px 28px;border:0;border-radius:10px;color:#4d2ab8;font-weight:750}
@media(max-width:767.98px){
  #main-body .elm-extra-section{padding:42px 0}
  #main-body .elm-security-panel{flex-direction:column;align-items:flex-start;padding:25px}
  #main-body .elm-section-button{width:100%}
  #main-body .elm-final-cta-panel{padding:36px 20px}
}



/* ELMROOJ HOMEPAGE REDESIGN V2 */
#main-body .elm-about-company,
#main-body .elm-extra-section{box-sizing:border-box}
#main-body .elm-about-company{position:relative;overflow:hidden;padding:82px 0;background:linear-gradient(125deg,#102b4c 0%,#164d83 65%,#2469ad 100%);color:#fff}
#main-body .elm-about-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:center;gap:56px}
#main-body .elm-redesign-kicker{display:inline-block;margin-bottom:16px;color:#b9d5ff;font-size:14px;font-weight:800;letter-spacing:1.4px}
#main-body .elm-about-copy h2{max-width:700px;margin:0 0 22px;color:#fff;font-size:clamp(32px,4vw,48px);font-weight:800;line-height:1.45}
#main-body .elm-about-copy p{max-width:680px;margin:0 0 14px;color:#e2ecf8;font-size:18px;line-height:2}
#main-body .elm-about-button{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;padding:14px 28px;border:1px solid #fff;border-radius:9px;background:#fff;color:#173e70!important;font-size:17px;font-weight:800;text-decoration:none}
#main-body .elm-about-button:hover{background:#eaf2ff;color:#102b4c!important}
#main-body .elm-about-visual{position:relative;display:flex;min-height:320px;align-items:center;justify-content:center}
#main-body .elm-about-orbit{position:absolute;width:270px;height:270px;border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 0 0 30px rgba(255,255,255,.035),0 0 0 60px rgba(255,255,255,.025)}
#main-body .elm-about-main-icon{z-index:1;display:flex;width:142px;height:142px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.55);border-radius:36px;background:linear-gradient(145deg,#fff,#dceaff);box-shadow:0 25px 70px rgba(0,0,0,.2);transform:rotate(-7deg)}
#main-body .elm-about-main-icon span{color:#1b5794;font-size:82px;font-weight:900;transform:rotate(7deg)}
#main-body .elm-about-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:13px 17px;border:1px solid rgba(255,255,255,.65);border-radius:13px;background:#fff;color:#17385d;font-size:15px;font-weight:750;box-shadow:0 12px 35px rgba(0,0,0,.15)}
#main-body .elm-about-chip span:first-child{color:#347ff0;font-size:22px}
#main-body .elm-chip-one{top:22px;left:0}
#main-body .elm-chip-two{right:0;bottom:42px}
#main-body .elm-chip-three{bottom:5px;left:20px}
#main-body .elm-extra-section{padding:76px 0;background:#f3f7fc}
#main-body .elm-extra-section .elm-section-heading{max-width:800px;margin:0 auto 42px;text-align:center}
#main-body .elm-extra-section .elm-section-kicker{margin-bottom:12px;color:#2877d2;font-size:14px;letter-spacing:1.2px}
#main-body .elm-extra-section .elm-section-heading h2,
#main-body .elm-extra-section .elm-security-copy h2,
#main-body .elm-extra-section .elm-final-cta h2{font-size:clamp(29px,3.2vw,40px);font-weight:800;line-height:1.5}
#main-body .elm-extra-section .elm-section-heading p,
#main-body .elm-extra-section .elm-benefit-card p,
#main-body .elm-extra-section .elm-security-copy p,
#main-body .elm-extra-section .elm-final-cta p{font-size:17px;line-height:2}
#main-body .elm-extra-section .elm-benefit-card{padding:34px 28px;border:1px solid #dce7f5;border-radius:18px;box-shadow:0 12px 32px rgba(23,56,93,.06);transition:transform .2s ease,box-shadow .2s ease}
#main-body .elm-extra-section .elm-benefit-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(23,56,93,.11)}
#main-body .elm-extra-section .elm-benefit-card h3{font-size:22px;line-height:1.5}
#main-body .elm-extra-section .elm-benefit-icon{width:62px;height:62px;border-radius:18px;background:#e8f1ff;color:#2877d2;font-size:29px}
#main-body .elm-extra-section .elm-security-panel{padding:38px;border:1px solid #d7e6f8;border-radius:22px;background:linear-gradient(120deg,#fff 0%,#eaf3ff 100%)}
#main-body .elm-extra-section .elm-security-symbol{color:#2877d2}
#main-body .elm-extra-section .elm-section-button{padding:14px 24px;border:1px solid #2877d2;border-radius:9px;background:#2877d2;color:#fff!important;font-size:16px;font-weight:750}
#main-body .elm-extra-section .elm-faq-list{max-width:900px}
#main-body .elm-extra-section .elm-faq-item{margin-bottom:14px;padding:0 24px;border:1px solid #dce7f5;border-radius:13px;box-shadow:0 5px 18px rgba(23,56,93,.035)}
#main-body .elm-extra-section .elm-faq-item summary{padding:22px 35px 22px 0;color:#17385d;font-size:18px;line-height:1.8}
#main-body .elm-extra-section .elm-faq-item summary:after{color:#2877d2;font-size:27px}
#main-body .elm-extra-section .elm-faq-item p{font-size:17px;line-height:2}
#main-body .elm-extra-section.elm-final-cta{padding-top:22px;padding-bottom:82px;background:#f3f7fc}
#main-body .elm-extra-section .elm-final-cta-panel{padding:58px 28px;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:linear-gradient(120deg,#102b4c 0%,#17518a 72%,#2877d2 100%);box-shadow:0 20px 50px rgba(16,43,76,.16)}
#main-body .elm-extra-section .elm-final-cta-panel .elm-section-kicker{color:#c8e0ff}
#main-body .elm-extra-section .elm-final-cta h2{color:#fff}
#main-body .elm-extra-section .elm-final-cta p{color:#e4efff}
#main-body .elm-extra-section .elm-final-cta-button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 30px;border:0;border-radius:9px;background:#fff;color:#173e70!important;font-size:17px;font-weight:800;opacity:1;text-decoration:none}
#main-body .elm-extra-section .elm-final-cta-button:hover{background:#eaf2ff;color:#102b4c!important}
#main-body .elm-service-card .card-body{padding:28px 24px}
#main-body .elm-service-card .card-body h4{font-size:22px;line-height:1.5}
#main-body .elm-service-card .elm-service-description{font-size:16px;line-height:1.9}
#main-body .elm-service-card .card-footer .btn{min-height:48px;font-size:16px}
@media(max-width:767.98px){
 #main-body .elm-about-company{padding:54px 0}
 #main-body .elm-about-layout{grid-template-columns:1fr;gap:28px}
 #main-body .elm-about-copy h2{font-size:32px}
 #main-body .elm-about-copy p{font-size:17px}
 #main-body .elm-about-visual{min-height:280px}
 #main-body .elm-about-orbit{width:210px;height:210px}
 #main-body .elm-about-chip{font-size:13px;padding:10px 12px}
 #main-body .elm-chip-one{left:0}
 #main-body .elm-chip-two{right:0;bottom:25px}
 #main-body .elm-chip-three{bottom:0;left:0}
 #main-body .elm-extra-section{padding:48px 0}
 #main-body .elm-extra-section .elm-security-panel{align-items:flex-start;padding:24px}
 #main-body .elm-extra-section .elm-section-button{width:100%}
 #main-body .elm-extra-section .elm-final-cta-panel{padding:38px 20px}
 #main-body .elm-extra-section .elm-faq-item summary{font-size:17px}
}



/* ELMROOJ ABOUT ALIGNMENT V3 */
#main-body .elm-about-layout{direction:ltr;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:64px}
#main-body .elm-about-visual{grid-column:1;grid-row:1}
#main-body .elm-about-copy{grid-column:2;grid-row:1;direction:rtl;text-align:right}
#main-body .elm-about-copy h2{color:#fff!important;text-align:right;font-size:clamp(34px,4vw,50px);line-height:1.55}
#main-body .elm-about-copy p{color:#f4f8ff!important;text-align:right;font-size:19px;line-height:2}
#main-body .elm-about-copy .elm-redesign-kicker{color:#c8e0ff!important;text-align:right}
#main-body .elm-about-copy .elm-about-button{color:#173e70!important}
#main-body .elm-about-chip{direction:rtl}
#main-body .elm-extra-section .elm-section-heading h2,
#main-body .elm-extra-section .elm-security-copy h2{color:#17385d!important}
#main-body .elm-extra-section .elm-final-cta h2{color:#fff!important}
#main-body .elm-extra-section .elm-section-heading p,
#main-body .elm-extra-section .elm-security-copy p,
#main-body .elm-extra-section .elm-faq-item p{color:#465a73!important}
#main-body .elm-extra-section .elm-faq-item summary{color:#17385d!important}
#main-body .elm-extra-section .elm-final-cta p{color:#fff!important}
@media(max-width:767.98px){
 #main-body .elm-about-layout{grid-template-columns:1fr;gap:28px}
 #main-body .elm-about-copy{grid-column:1;grid-row:1}
 #main-body .elm-about-visual{grid-column:1;grid-row:2}
 #main-body .elm-about-copy h2{font-size:32px}
 #main-body .elm-about-copy p{font-size:18px}
}



/* ELMROOJ CARD FIX V7 */
#main-body .elm-service-card .card-footer .btn,
#main-body .elm-service-card .btn-primary {
  background: #1d5f9d !important;
  border-color: #1d5f9d !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 750;
}
#main-body .elm-service-card .card-footer .btn:hover,
#main-body .elm-service-card .btn-primary:hover {
  background: #102b4c !important;
  border-color: #102b4c !important;
  color: #fff !important;
}


/* ELMROOJ WHY + TRUST REDESIGN V1 */
#main-body .elm-why-section{position:relative;overflow:hidden;padding:80px 0;background:radial-gradient(ellipse at 12% 15%,rgba(104,82,238,.16),transparent 38%),linear-gradient(135deg,#f7f8ff,#edf3ff 55%,#f8faff)}
#main-body .elm-why-section .elm-section-heading{max-width:760px;margin:0 auto 44px;text-align:center}
#main-body .elm-why-section .elm-section-heading h2{color:#142447;font-size:clamp(30px,3.2vw,46px);font-weight:850;line-height:1.4}
#main-body .elm-why-section .elm-section-heading p{color:#66748e;font-size:17px;line-height:1.9}
#main-body .elm-benefit-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:235px;padding:32px 24px;border:1px solid #dce5fb;border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 14px 40px rgba(31,57,112,.08);text-align:center;transition:transform .3s ease,box-shadow .3s ease;animation:elmBenefitEnter .7s both}
#main-body .elm-benefit-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(49,75,145,.15)}
#main-body .elm-benefit-icon{display:flex;width:70px;height:70px;align-items:center;justify-content:center;margin-bottom:20px;border-radius:22px;background:linear-gradient(145deg,#edf2ff,#e7eaff);color:#4c66e8;font-size:32px;transition:transform .3s ease}
#main-body .elm-benefit-card:hover .elm-benefit-icon{transform:translateY(-4px) rotate(-5deg)}
#main-body .elm-benefit-card h3{color:#17284a;font-size:21px;font-weight:800}
#main-body .elm-benefit-card p{color:#68758e;font-size:15px;line-height:1.9}
#main-body .elm-security-panel{padding:36px;border:1px solid #dce5ff;border-radius:26px;background:radial-gradient(ellipse at 95% 10%,rgba(126,100,245,.15),transparent 42%),linear-gradient(120deg,#fff,#f1f5ff);box-shadow:0 18px 48px rgba(39,62,122,.09);transition:transform .3s ease}
#main-body .elm-security-panel:hover{transform:translateY(-4px)}
#main-body .elm-security-copy h2{color:#17284a;font-size:clamp(23px,2.3vw,31px);font-weight:850}
#main-body .elm-security-copy p{color:#68758e;line-height:1.9}
#main-body .elm-security-section .elm-section-button{border:0;border-radius:12px;background:linear-gradient(110deg,#326ff0,#6854e8);box-shadow:0 9px 22px rgba(72,94,221,.23);font-weight:750}
@keyframes elmBenefitEnter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){#main-body .elm-why-section{padding:52px 0}#main-body .elm-benefit-card{min-height:205px;padding:25px 20px}#main-body .elm-security-panel{padding:24px 18px}}
@media(prefers-reduced-motion:reduce){#main-body .elm-benefit-card{animation:none!important;transition:none!important}#main-body .elm-security-panel{transition:none!important}}
/* ELMROOJ VISUAL REDESIGN V2 */
#main-body .elm-why-section{padding:90px 0;background:linear-gradient(135deg,#111b46,#30246f 55%,#4b35a0)}
#main-body .elm-why-section .elm-section-heading{max-width:850px;margin:0 auto 55px}
#main-body .elm-why-section .elm-section-kicker{color:#a9c6ff;font-size:14px}
#main-body .elm-why-section .elm-section-heading h2{color:#fff;font-size:clamp(34px,4vw,54px);font-weight:850;line-height:1.4}
#main-body .elm-why-section .elm-section-heading p{color:#d3d9f6;font-size:18px}
#main-body .elm-benefit-card{width:100%;min-height:270px;padding:38px 28px;border:1px solid rgba(255,255,255,.22);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.06));box-shadow:0 20px 50px rgba(5,10,35,.18)}
#main-body .elm-benefit-card:before{background:linear-gradient(90deg,#71d9ff,#a99aff)}
#main-body .elm-benefit-icon{width:78px;height:78px;background:linear-gradient(145deg,#e9f0ff,#dcdcff);color:#4a47bf;font-size:35px}
#main-body .elm-benefit-card h3{color:#fff;font-size:23px}
#main-body .elm-benefit-card p{color:#d7def9;font-size:16px}
#main-body .elm-benefit-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(5,10,35,.3)}
#main-body .elm-security-section{padding:60px 0 85px;background:#f4f6ff}
#main-body .elm-security-panel{padding:40px;border:1px solid #dbe3ff;border-radius:28px;background:linear-gradient(120deg,#fff,#eaf0ff);box-shadow:0 22px 55px rgba(29,43,100,.1)}
@media(max-width:767px){#main-body .elm-why-section{padding:60px 0}#main-body .elm-benefit-card{min-height:225px;padding:28px 22px}#main-body .elm-security-panel{padding:24px 18px}}
/* END ELMROOJ VISUAL REDESIGN V2 */


/* ELMROOJ VISUAL REDESIGN V3 */
#main-body .elm-why-section {
  background: #f3f7fc !important;
  padding: 85px 0 75px !important;
}
#main-body .elm-why-section .elm-section-heading {
  margin: 0 auto 48px !important;
  max-width: 850px !important;
}
#main-body .elm-why-section .elm-section-kicker {
  color: #1d5f9d !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
#main-body .elm-why-section .elm-section-heading h2 {
  color: #102b4c !important;
  font-size: clamp(34px,3.5vw,46px) !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
  margin-bottom: 18px !important;
}
#main-body .elm-why-section .elm-section-heading p {
  color: #344b67 !important;
  font-size: 18px !important;
  line-height: 1.9 !important;
}
#main-body .elm-benefit-card {
  min-height: 265px !important;
  padding: 34px 26px !important;
  border: 1px solid #d5e1ef !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(16,43,76,.08) !important;
  backdrop-filter: none !important;
}
#main-body .elm-benefit-card h3 {
  color: #102b4c !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  margin: 0 0 14px !important;
}
#main-body .elm-benefit-card p {
  color: #344b67 !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
}
#main-body .elm-benefit-icon {
  width: 76px !important;
  height: 76px !important;
  margin-bottom: 22px !important;
  border: 1px solid #d8e6f8 !important;
  border-radius: 20px !important;
  background: #eaf3ff !important;
  color: #1d5f9d !important;
  font-size: 36px !important;
  box-shadow: 0 8px 20px rgba(29,95,157,.10) !important;
}
#main-body .elm-benefit-card:hover {
  transform: translateY(-6px) !important;
  border-color: #9ebfe0 !important;
  box-shadow: 0 20px 42px rgba(16,43,76,.13) !important;
}
#main-body .elm-benefit-card:before {
  background: #1d5f9d !important;
}
#main-body .elm-security-section {
  background: #f3f7fc !important;
  padding: 45px 0 80px !important;
}
#main-body .elm-security-panel {
  border-color: #d5e1ef !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(16,43,76,.08) !important;
}
#main-body .elm-security-copy h2 {
  color: #102b4c !important;
  font-size: clamp(25px,2.5vw,32px) !important;
  font-weight: 850 !important;
}
#main-body .elm-security-copy p {
  color: #344b67 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}
#main-body .elm-security-section .elm-section-kicker {
  color: #1d5f9d !important;
}
@media(max-width:767px) {
  #main-body .elm-why-section { padding: 55px 0 !important; }
  #main-body .elm-benefit-card { min-height: 220px !important; }
  #main-body .elm-benefit-card h3 { font-size: 22px !important; }
  #main-body .elm-benefit-card p { font-size: 16px !important; }
}
/* END ELMROOJ VISUAL REDESIGN V3 */


/* ELMROOJ WHY BLUE HEADER MATCH V1 */
#main-body .elm-why-section {
  background: #1d5f9d !important;
  padding: 85px 0 80px !important;
}
#main-body .elm-why-section .elm-section-kicker {
  color: #d7eaff !important;
}
#main-body .elm-why-section .elm-section-heading h2 {
  color: #ffffff !important;
}
#main-body .elm-why-section .elm-section-heading p {
  color: #e4efff !important;
}
#main-body .elm-why-section .elm-benefit-card {
  background: #ffffff !important;
  border: 1px solid #d5e5f5 !important;
  box-shadow: 0 14px 35px rgba(9,35,68,.18) !important;
}
#main-body .elm-why-section .elm-benefit-card h3 {
  color: #102b4c !important;
}
#main-body .elm-why-section .elm-benefit-card p {
  color: #344b67 !important;
}
#main-body .elm-why-section .elm-benefit-card:before {
  background: #1d5f9d !important;
}
/* END ELMROOJ WHY BLUE HEADER MATCH V1 */


/* ELMROOJ WHY HEADER GRADIENT V1 */
#main-body .elm-why-section {
  background: linear-gradient(110deg, #123052 0%, #194d7d 52%, #2869a8 100%) !important;
}
#main-body .elm-why-section .elm-section-kicker {
  color: #d9eaff !important;
}
#main-body .elm-why-section .elm-section-heading h2 {
  color: #ffffff !important;
}
#main-body .elm-why-section .elm-section-heading p {
  color: #e5efff !important;
}
/* END ELMROOJ WHY HEADER GRADIENT V1 */



/* ELMROOJ FAQ SPLIT SLIDER V1 */
#main-body .elm-faq-section {
  padding: 86px 0 !important;
  background: #f3f7fc !important;
}
#main-body .elm-faq-section > .container { max-width: 1240px; }
#main-body .elm-faq-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 58px;
  align-items: center;
}
#main-body .elm-faq-copy { grid-column: 2; grid-row: 1; min-width: 0; }
#main-body .elm-faq-slider { grid-column: 1; grid-row: 1; min-width: 0; direction: ltr; }
#main-body .elm-faq-section .elm-section-heading {
  text-align: right !important;
  margin: 0 0 28px !important;
  max-width: none !important;
}
#main-body .elm-faq-section .elm-section-kicker {
  color: #1d5f9d !important;
  font-size: 14px !important;
}
#main-body .elm-faq-section .elm-section-heading h2 {
  color: #102b4c !important;
  font-size: clamp(30px,3vw,42px) !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
}
#main-body .elm-faq-section .elm-section-heading p {
  color: #526782 !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
}
#main-body .elm-faq-list { display: grid; gap: 12px; }
#main-body .elm-faq-item {
  overflow: hidden;
  border: 1px solid #d9e5f3 !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(16,43,76,.045);
  transition: border-color .25s ease, box-shadow .25s ease;
}
#main-body .elm-faq-item[open] {
  border-color: #9bbfe2 !important;
  box-shadow: 0 12px 26px rgba(16,43,76,.09);
}
#main-body .elm-faq-item summary {
  position: relative;
  padding: 21px 52px 21px 22px !important;
  color: #102b4c !important;
  font-size: 17px !important;
  font-weight: 750 !important;
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
}
#main-body .elm-faq-item summary::-webkit-details-marker { display: none; }
#main-body .elm-faq-item summary:after {
  content: "+";
  position: absolute;
  right: 21px;
  top: 50%;
  transform: translateY(-50%);
  color: #1d5f9d;
  font-size: 25px;
  font-weight: 400;
}
#main-body .elm-faq-item[open] summary:after { content: "−"; }
#main-body .elm-faq-item p {
  margin: 0 !important;
  padding: 0 22px 22px !important;
  color: #405875 !important;
  font-size: 16px !important;
  line-height: 1.95 !important;
  animation: elmFaqAnswerIn .28s ease both;
}
@keyframes elmFaqAnswerIn {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}
#main-body .elm-faq-slider {
  position: relative;
  padding: 18px;
  border: 1px solid #dce8f6;
  border-radius: 28px;
  background: linear-gradient(145deg,#fff,#eaf3ff);
  box-shadow: 0 22px 55px rgba(16,43,76,.11);
}
#main-body .elm-faq-slides { position: relative; min-height: 480px; }
#main-body .elm-faq-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
#main-body .elm-faq-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
#main-body .elm-slide-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 315px;
  overflow: hidden;
  border-radius: 21px;
  background: radial-gradient(circle at 50% 42%,#fff 0,#e4efff 58%,#d3e5fa 100%);
}
#main-body .elm-art-orbit {
  position: absolute;
  width: 245px; height: 245px;
  border: 1px solid rgba(29,95,157,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(29,95,157,.045),0 0 0 38px rgba(29,95,157,.035);
}
#main-body .elm-server {
  z-index: 1; display: grid; gap: 10px;
  width: 175px; padding: 18px;
  border: 1px solid #c9dcf1; border-radius: 17px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 22px 40px rgba(16,43,76,.17);
  transform: rotate(-5deg);
}
#main-body .elm-server > div {
  display: flex; align-items: center; gap: 7px;
  padding: 12px; border-radius: 8px;
  background: linear-gradient(100deg,#153b61,#2869a8);
}
#main-body .elm-server i { width: 6px;height: 6px;border-radius:50%;background:#85e0ce; }
#main-body .elm-server b { margin-left:auto;width:38px;height:4px;border-radius:5px;background:#c4ddff; }
#main-body .elm-art-tag {
  position: absolute; z-index: 2;
  padding: 11px 14px; border: 1px solid #d5e4f5;
  border-radius: 10px; background: #fff;
  color: #173e66; font-size: 12px; font-weight: 750;
  box-shadow: 0 8px 22px rgba(16,43,76,.1);
}
#main-body .elm-tag-top { top: 42px; right: 22px; }
#main-body .elm-tag-bottom { bottom: 38px; left: 22px; }
#main-body .elm-domain-globe {
  z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 170px;height:170px;border-radius:50%;
  background: linear-gradient(145deg,#fff,#dcecff);
  border: 1px solid #c8dcf3;
  color: #174b7c; font-size: 34px;font-weight:850;
  box-shadow: 0 20px 45px rgba(16,43,76,.14);
}
#main-body .elm-domain-globe span { color: #3689e8; }
#main-body .elm-domain-ring {
  position:absolute;width:225px;height:225px;border-radius:50%;
  border:2px dashed rgba(29,95,157,.3);
  animation: elmDomainSpin 24s linear infinite;
}
@keyframes elmDomainSpin { to { transform:rotate(360deg); } }
#main-body .elm-mail-card {
  z-index:1;width:220px;padding:15px;border-radius:16px;
  background:#fff;border:1px solid #d5e4f5;
  box-shadow:0 20px 45px rgba(16,43,76,.15);
  transform:rotate(4deg);
}
#main-body .elm-mail-top { display:flex;gap:5px;margin-bottom:18px; }
#main-body .elm-mail-top span { width:7px;height:7px;border-radius:50%;background:#91b7df; }
#main-body .elm-envelope {
  height:100px;position:relative;overflow:hidden;border-radius:10px;
  background:linear-gradient(135deg,#1d5f9d,#4e9ae5);
}
#main-body .elm-envelope:before,#main-body .elm-envelope:after {
  content:"";position:absolute;top:18px;width:115px;height:115px;
  border:2px solid rgba(255,255,255,.8);transform:rotate(45deg);
}
#main-body .elm-envelope:before { left:-57px; }
#main-body .elm-envelope:after { right:-57px; }
#main-body .elm-mail-line { height:7px;width:80%;margin-top:13px;border-radius:6px;background:#d9e7f7; }
#main-body .elm-mail-line.short { width:52%;margin-top:8px; }
#main-body .elm-slide-kicker {
  margin:22px 8px 8px;color:#1d5f9d;
  font-size:12px;font-weight:850;letter-spacing:1.4px;
}
#main-body .elm-faq-slide h3 {
  margin:0 8px 10px;color:#102b4c;
  font-size:25px;font-weight:850;line-height:1.4;
}
#main-body .elm-faq-slide p {
  margin:0 8px 20px;color:#526782;font-size:16px;line-height:1.8;
}
#main-body .elm-slider-controls {
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:17px 5px 2px;direction:ltr;
}
#main-body .elm-slider-arrow {
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid #d4e3f3;border-radius:50%;
  background:#fff;color:#1d5f9d;font-size:22px;cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
#main-body .elm-slider-arrow:hover {
  background:#1d5f9d;color:#fff;transform:translateY(-2px);
}
#main-body .elm-slider-dots { display:flex;gap:8px;align-items:center; }
#main-body .elm-slider-dots button {
  width:8px;height:8px;padding:0;border:0;border-radius:10px;
  background:#bdcfe4;cursor:pointer;transition:width .25s ease,background .25s ease;
}
#main-body .elm-slider-dots button.is-active { width:25px;background:#1d5f9d; }
@media(max-width:900px) {
  #main-body .elm-faq-layout { grid-template-columns:minmax(0,1fr);gap:32px; }
  #main-body .elm-faq-copy,#main-body .elm-faq-slider { grid-column:1; }
  #main-body .elm-faq-copy { grid-row:1; }
  #main-body .elm-faq-slider { grid-row:2; }
  #main-body .elm-faq-slides { min-height:455px; }
}
@media(max-width:560px) {
  #main-body .elm-faq-section { padding:52px 0 !important; }
  #main-body .elm-faq-slider { padding:12px;border-radius:20px; }
  #main-body .elm-slide-art { min-height:260px; }
  #main-body .elm-faq-slides { min-height:425px; }
  #main-body .elm-faq-slide h3 { font-size:22px; }
  #main-body .elm-faq-item summary { font-size:16px !important;padding:17px 45px 17px 16px !important; }
  #main-body .elm-faq-item p { padding:0 16px 18px !important; }
}
@media(prefers-reduced-motion:reduce) {
  #main-body .elm-faq-slide,#main-body .elm-faq-item,#main-body .elm-slider-arrow { transition:none !important; }
  #main-body .elm-domain-ring { animation:none !important; }
  #main-body .elm-faq-item p { animation:none !important; }
}
/* END ELMROOJ FAQ SPLIT SLIDER V1 */


/* ELMROOJ FAQ POLISH V2 */
#main-body .elm-faq-copy,
#main-body .elm-faq-section .elm-section-heading {
  direction: rtl !important;
  text-align: right !important;
}
#main-body .elm-faq-section .elm-section-heading h2,
#main-body .elm-faq-section .elm-section-heading p {
  text-align: right !important;
}
#main-body .elm-faq-item summary {
  direction: rtl !important;
  text-align: right !important;
  padding: 23px 58px 23px 24px !important;
  font-size: 18px !important;
  min-height: 76px;
  display: flex;
  align-items: center;
}
#main-body .elm-faq-item summary:after {
  right: 24px !important;
}
#main-body .elm-faq-item p {
  direction: rtl !important;
  text-align: right !important;
  font-size: 17px !important;
  line-height: 2 !important;
  padding: 0 24px 25px !important;
}
#main-body .elm-faq-list {
  gap: 16px !important;
}
#main-body .elm-faq-slider {
  min-height: 520px;
}
#main-body .elm-faq-slides {
  min-height: 470px !important;
}
#main-body .elm-faq-slide {
  text-align: right !important;
  align-items: stretch;
}
#main-body .elm-faq-slide .elm-slide-kicker,
#main-body .elm-faq-slide h3,
#main-body .elm-faq-slide p {
  direction: rtl !important;
  text-align: right !important;
}
#main-body .elm-faq-slide h3 {
  font-size: 27px !important;
  line-height: 1.6 !important;
}
#main-body .elm-faq-slide p {
  font-size: 17px !important;
  line-height: 1.9 !important;
}
@media(max-width:900px) {
  #main-body .elm-faq-slider { min-height: 0; }
}
@media(max-width:560px) {
  #main-body .elm-faq-item summary {
    min-height: 68px;
    padding: 18px 48px 18px 16px !important;
    font-size: 16px !important;
  }
  #main-body .elm-faq-item p {
    padding: 0 16px 20px !important;
    font-size: 16px !important;
  }
  #main-body .elm-faq-slide h3 { font-size: 23px !important; }
}
/* END ELMROOJ FAQ POLISH V2 */



/* ELMROOJ FAQ ALIGNMENT V3 */

/* Center slider text */
#main-body .elm-faq-slide {
  text-align: center !important;
  align-items: center !important;
}
#main-body .elm-faq-slide .elm-slide-kicker,
#main-body .elm-faq-slide h3,
#main-body .elm-faq-slide p {
  width: 100%;
  text-align: center !important;
  direction: ltr !important;
}

/* Larger FAQ title, questions and answers */
#main-body .elm-faq-section .elm-section-heading h2 {
  font-size: clamp(36px, 3.2vw, 46px) !important;
}
#main-body .elm-faq-section .elm-section-heading p {
  font-size: 18px !important;
}
#main-body .elm-faq-item summary {
  font-size: 20px !important;
  padding: 25px 24px 25px 62px !important;
  text-align: right !important;
  direction: rtl !important;
  line-height: 1.8 !important;
}
#main-body .elm-faq-item summary:after {
  right: auto !important;
  left: 24px !important;
}
#main-body .elm-faq-item p {
  font-size: 18px !important;
  line-height: 2 !important;
  text-align: right !important;
  direction: rtl !important;
}
@media(max-width:560px) {
  #main-body .elm-faq-item summary {
    font-size: 17px !important;
    padding: 20px 18px 20px 48px !important;
  }
  #main-body .elm-faq-item summary:after {
    left: 17px !important;
  }
  #main-body .elm-faq-item p {
    font-size: 16px !important;
  }
}

/* END ELMROOJ FAQ ALIGNMENT V3 */


/* ELMROOJ RESTORE SLIDER ART SIZE V1 */
#main-body .elm-faq-slider .elm-slide-art {
  width: 100% !important;
  min-height: 315px !important;
  height: 315px !important;
  flex: 0 0 315px !important;
}
#main-body .elm-faq-slider .elm-faq-slides {
  min-height: 470px !important;
}
#main-body .elm-faq-slider .elm-faq-slide {
  width: 100% !important;
}
#main-body .elm-faq-slider .elm-slide-art .elm-server {
  transform: scale(1.12) rotate(-5deg);
}
#main-body .elm-faq-slider .elm-domain-globe {
  width: 170px !important;
  height: 170px !important;
}
#main-body .elm-faq-slider .elm-mail-card {
  width: 220px !important;
}
#main-body .elm-faq-slider .elm-faq-slide .elm-slide-kicker,
#main-body .elm-faq-slider .elm-faq-slide h3,
#main-body .elm-faq-slider .elm-faq-slide p {
  text-align: center !important;
}
@media(max-width:560px) {
  #main-body .elm-faq-slider .elm-slide-art {
    min-height: 280px !important;
    height: 280px !important;
    flex-basis: 280px !important;
  }
}
/* END ELMROOJ RESTORE SLIDER ART SIZE V1 */


/* ELMROOJ FAQ COMPACT V4 */

/* Slightly reduce FAQ card size */
#main-body .elm-faq-list {
  gap: 12px !important;
}
#main-body .elm-faq-item summary {
  min-height: 68px !important;
  padding-top: 19px !important;
  padding-bottom: 19px !important;
  font-size: 19px !important;
}
#main-body .elm-faq-item p {
  font-size: 17px !important;
  line-height: 1.85 !important;
}

/* Keep the slider art large */
#main-body .elm-faq-slider .elm-slide-art {
  min-height: 315px !important;
  height: 315px !important;
}

/* END ELMROOJ FAQ COMPACT V4 */


/* ELMROOJ FULL WIDTH FOOTER V1 */
html body footer,
html body .footer,
html body .footer-widgets {
  box-sizing: border-box;
}

html body footer,
html body .footer {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: linear-gradient(115deg,#102f50 0%,#174f82 55%,#246fba 100%) !important;
  color: #f4f8ff !important;
  border-top: 1px solid rgba(255,255,255,.16);
}

html body .footer-widgets {
  width: 100% !important;
  max-width: none !important;
  padding: 58px 0 34px !important;
  background: transparent !important;
  color: #f4f8ff !important;
}

html body footer .container,
html body .footer .container,
html body .footer-widgets > .container {
  width: 100% !important;
  max-width: 1240px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

html body footer h4,
html body .footer h4,
html body .footer-widgets h4 {
  margin-bottom: 20px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

html body footer p,
html body .footer p,
html body .footer-widgets p {
  color: #dbeaff !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}

html body footer a,
html body .footer a,
html body .footer-widgets a {
  color: #e0edff !important;
  text-decoration: none !important;
  transition: color .2s ease, transform .2s ease;
}

html body footer a:hover,
html body .footer a:hover,
html body .footer-widgets a:hover {
  color: #ffffff !important;
  transform: translateX(-3px);
}

html body .footer-widgets li {
  margin-bottom: 12px;
}

html body .footer-last {
  width: 100% !important;
  max-width: none !important;
  padding: 20px 24px !important;
  background: rgba(5,22,43,.32) !important;
  color: #dbeaff !important;
  border-top: 1px solid rgba(255,255,255,.14);
}

html body .footer-last a,
html body .footer-copyright,
html body .footer-copyright p {
  color: #dbeaff !important;
}

html body .footer .social-icons a,
html body .footer-widgets .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  margin: 3px;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
}

@media(max-width:767px) {
  html body .footer-widgets {
    padding: 38px 0 24px !important;
  }
  html body footer h4,
  html body .footer h4,
  html body .footer-widgets h4 {
    font-size: 17px !important;
  }
  html body .footer-last {
    text-align: center;
  }
}
/* END ELMROOJ FULL WIDTH FOOTER V1 */


/* ELMROOJ CUSTOM FOOTER V1 */
html body .elm-main-footer {
  width:100%; box-sizing:border-box; color:#f4f8ff;
  background:linear-gradient(112deg,#123153 0%,#174d7d 54%,#246bb0 100%);
  border-top:1px solid rgba(255,255,255,.16);
}
html body .elm-main-footer .elm-footer-inner {
  width:100%; max-width:1240px; margin:0 auto;
  padding:58px 24px 46px; display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px;
}
html body .elm-main-footer .elm-footer-brand {text-align:right}
html body .elm-main-footer .elm-footer-logo {
  display:inline-block; margin-bottom:16px; color:#fff!important;
  font-size:29px; font-weight:850; text-decoration:none;
}
html body .elm-main-footer .elm-footer-logo span {
  color:#a9d7ff; font-size:15px; letter-spacing:1px;
}
html body .elm-main-footer .elm-footer-brand p {
  max-width:340px; margin:0 0 22px; color:#e0edfa!important;
  font-size:16px; line-height:2;
}
html body .elm-main-footer .elm-footer-cta {
  display:inline-block; padding:12px 18px; border-radius:10px;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.09);
  color:#fff!important; text-decoration:none; font-weight:750;
}
html body .elm-main-footer .elm-footer-column {
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:right; gap:14px;
}
html body .elm-main-footer .elm-footer-column h3 {
  margin:5px 0 10px; color:#fff!important; font-size:18px; font-weight:800;
}
html body .elm-main-footer .elm-footer-column a {
  color:#e0edfa!important; font-size:15px; line-height:1.7;
  text-decoration:none; transition:color .2s ease,transform .2s ease;
}
html body .elm-main-footer .elm-footer-column a:hover {
  color:#fff!important; transform:translateX(-3px);
}
html body .elm-main-footer .elm-footer-bottom {
  border-top:1px solid rgba(255,255,255,.17);
  background:rgba(5,22,43,.22);
}
html body .elm-main-footer .elm-footer-bottom-inner {
  min-height:66px; display:flex; align-items:center;
  justify-content:space-between; gap:18px; padding-top:14px; padding-bottom:14px;
  color:#e0edfa; font-size:14px;
}
html body .elm-main-footer .elm-footer-bottom a {color:#fff!important;text-decoration:none}
@media(max-width:900px) {
  html body .elm-main-footer .elm-footer-inner {
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px;
  }
}
@media(max-width:560px) {
  html body .elm-main-footer .elm-footer-inner {
    grid-template-columns:1fr; gap:28px; padding:40px 22px 32px;
  }
  html body .elm-main-footer .elm-footer-brand p {max-width:none}
  html body .elm-main-footer .elm-footer-bottom-inner {
    align-items:flex-start; flex-direction:column; justify-content:center;
    padding:18px 22px;
  }
}
/* END ELMROOJ CUSTOM FOOTER V1 */


/* ELMROOJ WHY CHOOSE V1 */
html body .elm-why-choose {
  padding: 76px 0;
  background: #f4f8fd;
  direction: ltr;
}
html body .elm-why-choose .elm-why-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 38px;
}
html body .elm-why-choose .elm-why-heading > span {
  color: #2675bb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}
html body .elm-why-choose .elm-why-heading h2 {
  margin: 12px 0;
  color: #123153;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
}
html body .elm-why-choose .elm-why-heading p {
  color: #607187;
  font-size: 16px;
  line-height: 1.8;
}
html body .elm-why-choose .elm-why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
html body .elm-why-choose .elm-why-card {
  padding: 28px 22px;
  min-height: 225px;
  background: #fff;
  border: 1px solid #e3ebf5;
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(23, 62, 105, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
html body .elm-why-choose .elm-why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(23, 62, 105, .12);
}
html body .elm-why-choose .elm-why-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: #e8f3ff;
  color: #1769aa;
  font-size: 28px;
}
html body .elm-why-choose .elm-why-card h3 {
  margin: 0 0 12px;
  color: #153657;
  font-size: 18px;
  font-weight: 800;
}
html body .elm-why-choose .elm-why-card p {
  margin: 0;
  color: #64758a;
  font-size: 14px;
  line-height: 1.85;
}
html body .elm-why-choose .elm-why-action {
  text-align: center;
  margin-top: 32px;
}
html body .elm-why-choose .elm-why-action a {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding: 13px 22px;
  border-radius: 10px;
  background: #1769aa;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}
html body .elm-why-choose .elm-why-action a:hover {
  background: #123153;
}
@media(max-width: 900px) {
  html body .elm-why-choose .elm-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media(max-width: 520px) {
  html body .elm-why-choose {
    padding: 48px 0;
  }
  html body .elm-why-choose .elm-why-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  html body .elm-why-choose .elm-why-card {
    min-height: 0;
    padding: 23px;
  }
}
/* END ELMROOJ WHY CHOOSE V1 */


/* ELMROOJ JOURNEY V1 */
html body .elm-journey{overflow:hidden;padding:70px 0 45px;color:#fff;background:linear-gradient(125deg,#07172d,#102f55 55%,#164d7d)}
html body .elm-journey-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:42px;padding:15px 0 55px}
html body .elm-journey-kicker{color:#8fdcff;font-size:11px;font-weight:800;letter-spacing:2px}
html body .elm-journey-copy h2{margin:18px 0;color:#fff;font-size:clamp(34px,4.4vw,54px);line-height:1.12;font-weight:850}
html body .elm-journey-copy h2 em{color:#8fdcff;font-style:normal}
html body .elm-journey-copy>p{max-width:490px;color:#c2d2e5;font-size:16px;line-height:1.9}
html body .elm-journey-button{display:inline-flex;gap:18px;margin-top:15px;padding:14px 22px;border-radius:9px;color:#09213c!important;background:#91e2ff;text-decoration:none;font-weight:800}
html body .elm-journey-trust{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px;color:#c2d2e5;font-size:12px}
html body .elm-journey-visual{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center}
html body .elm-journey-browser{width:100%;max-width:440px;overflow:hidden;border:1px solid #ffffff55;border-radius:14px;background:#fff;box-shadow:0 28px 75px #0005;transform:rotate(-2deg)}
html body .elm-journey-browserbar{display:flex;align-items:center;gap:6px;padding:13px;background:#edf3fa}
html body .elm-journey-browserbar i{width:7px;height:7px;border-radius:50%;background:#8ba2bb}
html body .elm-journey-browserbar span{margin:auto;padding:5px 25px;border-radius:5px;background:#fff;color:#687d93;font-size:10px}
html body .elm-journey-site{padding:18px;color:#173655}
html body .elm-journey-nav{display:flex;justify-content:space-between;font-size:9px}
html body .elm-journey-nav b{color:#1769aa;font-size:12px}
html body .elm-journey-hero{display:flex;flex-direction:column;align-items:flex-start;margin-top:20px;padding:24px;border-radius:8px;background:linear-gradient(135deg,#eaf5ff,#d7e9ff)}
html body .elm-journey-hero small{color:#3277b2;font-size:8px;font-weight:800;letter-spacing:1px}
html body .elm-journey-hero strong{margin:10px 0;color:#123153;font-size:clamp(23px,3vw,36px);line-height:1.1}
html body .elm-journey-fakebutton{padding:8px 12px;border-radius:5px;color:#fff;background:#1769aa;font-size:9px}
html body .elm-journey-minirow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:13px}
html body .elm-journey-minirow i{height:30px;border-radius:5px;background:#edf3fa}
html body .elm-journey-float{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid #ffffff55;border-radius:11px;background:#fff;color:#153657;box-shadow:0 12px 30px #0003}
html body .elm-journey-float>b{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#1769aa;background:#e3f4ff}
html body .elm-journey-float span{display:flex;flex-direction:column;gap:3px}
html body .elm-journey-float strong{font-size:11px}
html body .elm-journey-float small{color:#708197;font-size:9px}
html body .elm-journey-domain{top:20px;left:-5px}
html body .elm-journey-launch{right:-5px;bottom:15px}
html body .elm-journey-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:25px;border-top:1px solid #ffffff2b}
html body .elm-journey-steps>div{display:flex;gap:14px}
html body .elm-journey-steps>div>span{color:#8fdcff;font-size:13px;font-weight:800}
html body .elm-journey-steps h3{margin:0 0 7px;color:#fff;font-size:15px}
html body .elm-journey-steps p{margin:0;color:#c2d2e5;font-size:12px;line-height:1.7}
@media(max-width:767px){html body .elm-journey{padding:45px 0 32px}html body .elm-journey-layout{grid-template-columns:1fr;gap:20px;padding-bottom:35px}html body .elm-journey-visual{min-height:290px;margin:0 5px}html body .elm-journey-steps{grid-template-columns:1fr;gap:18px}}
/* END ELMROOJ JOURNEY V1 */

/* ELMROOJ DOMAIN BACKGROUND SHAPES */
html body .sec.products.domains-section {
  background: linear-gradient(115deg, #102b4c 0%, #164b7b 55%, #0878c9 100%) !important;
}
html body .sec.products.domains-section .cros-bg-shapes-left,
html body .sec.products.domains-section .cros-bg-shapes-right {
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}
/* END ELMROOJ DOMAIN BACKGROUND SHAPES */

/* ELMROOJ JOURNEY WHITE BACKGROUND + HEADER GAP FIX */
html body .elm-journey {
  background: #ffffff !important;
  color: #102b4c !important;
}
html body .elm-journey .elm-journey-copy h2 {
  color: #102b4c !important;
}
html body .elm-journey .elm-journey-copy h2 em {
  color: #0878c9 !important;
}
html body .elm-journey .elm-journey-copy > p,
html body .elm-journey .elm-journey-trust,
html body .elm-journey .elm-journey-steps p {
  color: #536b83 !important;
}
html body .elm-journey .elm-journey-steps {
  border-top-color: #dce6f0 !important;
}
html body .elm-journey .elm-journey-steps h3 {
  color: #102b4c !important;
}
html body .elm-journey .elm-journey-steps > div > span,
html body .elm-journey .elm-journey-kicker {
  color: #0878c9 !important;
}
html body .elm-journey .elm-journey-float {
  border-color: #e3ebf5 !important;
}
html body .elm-journey:before {
  display: none !important;
}

/* Remove blank strip between navigation and page content */
html body #header,
html body header.header,
html body .header-lined {
  margin-bottom: 0 !important;
}
html body #main-body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body .sec.products.domains-section {
  margin-top: 0 !important;
}
/* END ELMROOJ JOURNEY WHITE BACKGROUND + HEADER GAP FIX */

/* FINAL: Journey blue background, domain section white */
html body .elm-journey {
  background: linear-gradient(115deg, #102b4c 0%, #164b7b 55%, #0878c9 100%) !important;
  color: #fff !important;
}
html body .elm-journey .elm-journey-copy h2,
html body .elm-journey .elm-journey-steps h3 {
  color: #fff !important;
}
html body .elm-journey .elm-journey-copy h2 em,
html body .elm-journey .elm-journey-kicker,
html body .elm-journey .elm-journey-steps > div > span {
  color: #8fdcff !important;
}
html body .elm-journey .elm-journey-copy > p,
html body .elm-journey .elm-journey-trust,
html body .elm-journey .elm-journey-steps p {
  color: #c2d2e5 !important;
}
html body .elm-journey .elm-journey-steps {
  border-top-color: rgba(255,255,255,.17) !important;
}
html body .sec.products.domains-section {
  background: #fff !important;
  margin-top: 0 !important;
}
html body .sec.products.domains-section .h1,
html body .sec.products.domains-section label,
html body .sec.products.domains-section .btn-link {
  color: #123153 !important;
}
html body .sec.products.domains-section .cros-bg-shapes-left,
html body .sec.products.domains-section .cros-bg-shapes-right {
  display: none !important;
}
/* END FINAL COLOR SWAP */

/* FIX JOURNEY SECTION TEXT AND WHITE BOXES */
html body .elm-journey .elm-journey-copy h2,
html body .elm-journey .elm-journey-copy h2:not(em) {
  color: #ffffff !important;
}
html body .elm-journey .elm-journey-copy h2 em {
  color: #8fdcff !important;
}
html body .elm-journey .elm-journey-steps section,
html body .elm-journey .elm-journey-steps h3,
html body .elm-journey .elm-journey-steps p {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .elm-journey .elm-journey-steps p {
  color: #d9e8f7 !important;
}
html body .elm-journey .elm-journey-steps > div > span {
  color: #8fdcff !important;
}
html body .elm-journey .elm-journey-steps {
  background: transparent !important;
}
html body .elm-journey .elm-journey-copy > p,
html body .elm-journey .elm-journey-trust {
  color: #e2edf8 !important;
}
/* END JOURNEY FIX */

/* ELMROOJ JOURNEY GEOMETRIC BACKGROUND */
html body .elm-journey {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: linear-gradient(115deg, #102b4c 0%, #164b7b 55%, #0878c9 100%) !important;
}
html body .elm-journey:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 12%, rgba(255,255,255,.09) 12.1% 23%, transparent 23.1%) left top / 42% 100% no-repeat,
    linear-gradient(240deg, transparent 0 14%, rgba(91,183,255,.22) 14.1% 29%, transparent 29.1%) right top / 42% 100% no-repeat;
}
html body .elm-journey:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 250px;
  top: -105px;
  right: -90px;
  transform: rotate(-18deg);
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  pointer-events: none;
}
html body .elm-journey .elm-journey-layout,
html body .elm-journey .elm-journey-steps {
  position: relative;
  z-index: 1;
}
/* END ELMROOJ JOURNEY GEOMETRIC BACKGROUND */

/* ELMROOJ JOURNEY EXTRA GEOMETRIC SHAPES */
html body .elm-journey {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
}
html body .elm-journey:before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 25%, rgba(255,255,255,.10) 25.2% 48%, transparent 48.2%) left top / 31% 58% no-repeat,
    linear-gradient(165deg, rgba(255,255,255,.12) 0 35%, transparent 35.5%) left 35px top 25px / 210px 130px no-repeat,
    linear-gradient(245deg, transparent 0 28%, rgba(94,183,255,.22) 28.2% 63%, transparent 63.2%) right top / 34% 100% no-repeat;
}
html body .elm-journey:after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 230px;
  height: 150px;
  right: -65px;
  bottom: -55px;
  transform: rotate(-18deg);
  border-radius: 8px;
  background: rgba(255,255,255,.09);
}
html body .elm-journey .container {
  position: relative;
  z-index: 1;
}
/* END ELMROOJ JOURNEY EXTRA GEOMETRIC SHAPES */

/* ELMROOJ JOURNEY GEOMETRIC BACKGROUND */
html body .elm-journey {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: linear-gradient(115deg, #102b4c 0%, #164b7b 55%, #0878c9 100%) !important;
}
html body .elm-journey:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 12%, rgba(255,255,255,.09) 12.1% 23%, transparent 23.1%) left top / 42% 100% no-repeat,
    linear-gradient(240deg, transparent 0 14%, rgba(91,183,255,.22) 14.1% 29%, transparent 29.1%) right top / 42% 100% no-repeat;
}
html body .elm-journey:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 250px;
  top: -105px;
  right: -90px;
  transform: rotate(-18deg);
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  pointer-events: none;
}
html body .elm-journey .elm-journey-layout,
html body .elm-journey .elm-journey-steps {
  position: relative;
  z-index: 1;
}
/* END ELMROOJ JOURNEY GEOMETRIC BACKGROUND */

/* Hide View all pricing link in domain section only */
html body .sec.products a[href*="pricing"],
html body .sec.products .view-pricing {
  display: none !important;
}


/* Croster - Domain Selection Page */
.domain-selection-options {
    max-width: 900px;
    margin: 24px auto;
}

.domain-selection-options > .option {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.domain-selection-options > .option.option-selected {
    border-color: #3b82f6;
    background: #f8fbff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .07);
}

.domain-selection-options > .option > label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: #1e293b;
    font-weight: 600;
    cursor: pointer;
}

.domain-selection-options .domain-input-group {
    padding: 18px 0 2px;
}

.domain-selection-options .domains-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.domain-selection-options .domains-row input.form-control,
.domain-selection-options .domains-row select.form-control {
    min-height: 44px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: none;
}

.domain-selection-options .domains-row input.form-control:focus,
.domain-selection-options .domains-row select.form-control:focus {
    border-color: #3b82f6;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.domain-selection-options button[type="submit"] {
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .domain-selection-options {
        margin: 16px auto;
    }

    .domain-selection-options > .option {
        padding: 12px;
    }

    .domain-selection-options .domains-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .domain-selection-options .domains-row > div {
        width: 100%;
        max-width: 100%;
    }

    .domain-selection-options button[type="submit"] {
        width: 100%;
        margin-top: 10px;
    }
}

/* DOMAIN PAGE CENTERED WIDE DESIGN */
html body:has(#order-standard_cart.cros-domain-page) #main-body,
html body:has(#order-standard_cart.cros-domain-page) #main-body > .container,
html body:has(#order-standard_cart.cros-domain-page) #main-body .main-container,
html body:has(#order-standard_cart.cros-domain-page) #main-body .main-container > .row,
html body:has(#order-standard_cart.cros-domain-page) #main-body .primary-content,
html body:has(#order-standard_cart.cros-domain-page) #main-body .elmrooj-service-content {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

html body:has(#order-standard_cart.cros-domain-page) #main-body > .container {
    padding: 28px 24px 55px !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart.cros-domain-page {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 18px 45px !important;
    box-sizing: border-box !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart h1,
html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .header-lined h1 {
    color: #123153 !important;
    text-align: center !important;
    font-size: clamp(30px, 3vw, 44px) !important;
    font-weight: 800 !important;
    margin: 0 auto 30px !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-selection-options,
html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-input-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-input-group > .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-pricing,
html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart table {
    width: 100% !important;
    max-width: 100% !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .btn-primary {
    background: #1769aa !important;
    border-color: #1769aa !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .btn-primary:hover {
    background: #104b7c !important;
    border-color: #104b7c !important;
}

@media (max-width: 767px) {
    html body:has(#order-standard_cart.cros-domain-page) #main-body > .container {
        padding: 18px 10px 35px !important;
    }

    html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart.cros-domain-page {
        padding: 0 4px 25px !important;
    }
}
/* END DOMAIN PAGE CENTERED WIDE DESIGN */

/* MODERN DOMAIN SEARCH BOX */
html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-selection-options,
html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-input-group {
    background: linear-gradient(135deg, #102b46 0%, #174b70 55%, #1769aa 100%) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 18px !important;
    padding: 38px 28px !important;
    margin: 0 auto 0 !important;
    box-shadow: 0 14px 35px rgba(16,43,70,.18) !important;
    box-sizing: border-box !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-input-group input,
html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-selection-options input {
    min-height: 54px !important;
    border: 1px solid #d6e2ef !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    font-size: 17px !important;
    box-shadow: inset 0 1px 2px rgba(16,43,70,.04) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-input-group input:focus,
html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-selection-options input:focus {
    border-color: #48a5ff !important;
    box-shadow: 0 0 0 4px rgba(72,165,255,.2) !important;
    outline: none !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-input-group .btn,
html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-selection-options .btn {
    min-height: 54px !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #3b82f6, #1769aa) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.15) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-input-group .btn:hover,
html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-selection-options .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.22) !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-pricing,
html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart table {
    border-radius: 0 0 12px 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 22px rgba(16,43,70,.08) !important;
}

@media (max-width: 767px) {
    html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-selection-options,
    html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart .domain-input-group {
        padding: 22px 14px !important;
        border-radius: 14px !important;
    }
}
/* END MODERN DOMAIN SEARCH BOX */





/* FINAL DOMAIN PAGE GAP FIX */
html body:has(#order-standard_cart.cros-domain-page) #main-body,
html body:has(#order-standard_cart.cros-domain-page) #main-body > .container,
html body:has(#order-standard_cart.cros-domain-page) #main-body .main-container {
    min-height: 0 !important;
    height: auto !important;
}

html body:has(#order-standard_cart.cros-domain-page) #order-standard_cart.cros-domain-page {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

html body:has(#order-standard_cart.cros-domain-page)
#order-standard_cart .domain-pricing {
    margin-bottom: 0 !important;
}

html body:has(#order-standard_cart.cros-domain-page)
#order-standard_cart .dataTables_wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

html body:has(#order-standard_cart.cros-domain-page)
#order-standard_cart .dataTables_info,
html body:has(#order-standard_cart.cros-domain-page)
#order-standard_cart .dataTables_paginate {
    margin-bottom: 0 !important;
}
/* END FINAL DOMAIN PAGE GAP FIX */