/* NAV CONTAINER */
.custom-nav {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ALL LINKS */
.custom-nav li a {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
    transition: color 0.25s ease;
}

/* HOVER */
.custom-nav li a:hover {
    color: #03234D;
}
header.header .navbar-nav a{
    font-size: 13px;
}
/* OPTIONAL UNDERLINE EFFECT */
.custom-nav li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: #03234D;
    transition: width 0.3s ease;
}

.custom-nav li a:hover::after {
    width: 100%;
}

/* ===== Hello Button ===== */
.navbar-nav .dropdown > .dropdown-toggle {
    background: linear-gradient(135deg, #03234D, #03234D);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.navbar-brand {
    background: #03234D;
    padding: 4px 10px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
}

/* Logo size */
.logo-img {
    height: 30px;
    width: auto;
}

/* Optional: make logo white if it's dark */
.navbar-brand .logo-img {
    filter: brightness(0) invert(1);
}
.navbar-nav .dropdown > .dropdown-toggle:hover {
    color: #fff !important;
    text-decoration: none;
}

/* ===== Dropdown Box ===== */
.navbar-nav .dropdown-menu {
    border-radius: 12px;
    border: none;
    padding: 10px 0;
    min-width: 170px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* ===== Dropdown Items ===== */
.navbar-nav .dropdown-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 15px;
	font-size: 14px;
	color: #333;
	transition: 0.2s;
}

/* ===== Icons ===== */
.navbar-nav .dropdown-menu .dropdown-item i {
    font-size: 14px;
    color: #03234D;
}

/* ===== Hover ===== */
.navbar-nav .dropdown-menu .dropdown-item:hover {
    background: #f5f7fb;
    color: #000;
}

/* ===== Divider ===== */
.navbar-nav .dropdown-divider {
    margin: 8px 0;
}

/* ===== Logout (last item) ===== */
.navbar-nav .dropdown-menu li:last-child .dropdown-item {
    color: #ef4444 !important;
}

.navbar-nav .dropdown-menu li:last-child .dropdown-item i {
    color: #ef4444 !important;
}
#nav a{
    padding-left:13px !important;
}
#nav a:hover{
color:#03234D !important;
font-weight:700 !important;
}
.badge-info {
	color: #fff;
	background-color: #03234D;
	font-size: 8px !important;
	border-radius: 11px !important;
	padding: 2px 3px 3px 3px !important;
}
.btn .badge {
	position: relative;
	top: -10px !important;
}
.welcome-title {
    font-size: 26px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
}

.welcome-subtitle {
    color: #6b7280 !important;
    font-size: 14px !important;
}

/* Card */
.page-login .card {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}

/* Inputs */
.page-login #inputEmail {
	height: 48px !important;
	border-radius: 0px 10px 10px 0px !important;
	border: 1px solid #e5e7eb !important;
	font-size: 14px !important;
	padding-left: 12px !important;
}
.page-login #inputPassword{
  	height: 48px !important;
	border: 1px solid #e5e7eb !important;
	font-size: 14px !important;
	padding-left: 12px !important;  
    
}
.page-login .form-control:focus {
    border-color: #03234D !important;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.1) !important;
}

/* Input icons */
.page-login .input-group-text {
    background: #EDF1FD !important;
    border: 1px solid #e5e7eb !important;
    border-right: none !important;
}
.page-login .input-group-text {
	border-radius: 10px 0px 0px 10px !important;
}
.btn.btn-default.btn-reveal-pw {
	border-radius: 0px 10px 10px 0px !important;
}

/* Password eye */
.page-login .btn-reveal-pw {
    border: 1px solid #e5e7eb !important;
    border-left: none !important;
    background: #EDF1FD !important;
}

/* Login button */
.btn-primary {
    background: linear-gradient(135deg, #03234D, #03234D) !important;
    border: none !important;
    height: 48px !important;
    border-radius: 10px !important;
    width: 100% !important;
    font-weight: 500 !important;
}

.page-login .btn-primary:hover {
    opacity: 0.9 !important;
}

/* Divider */
.divider {
    display: flex !important;
    align-items: center !important;
    margin: 20px 0 !important;
}

.divider::before,
.divider::after {
    content: '' !important;
    flex: 1 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.page-login .divider span {
    padding: 0 10px !important;
    font-size: 13px !important;
    color: #9ca3af !important;
}

.social-buttons .btn,
.providerLinkingButtons .btn {
    width: 100% !important;
    height: 45px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
}

/* Icons inside WHMCS buttons */
.page-login .providerLinkingButtons .btn i {
    font-size: 16px !important;
}



/* Hover effect */

/* Footer */
.page-login .card-footer {
    background: transparent !important;
    border: none !important;
    text-align: center !important;
}

/* Links */
.page-login a {
    text-decoration: none !important;
}

.page-login a:hover {
    color: #03234D !important;
}
#gsi_285304_144651-overlay:hover {
    background: #f9fafb !important;
}

/* Mobile */
@media (max-width: 480px) {
    .social-buttons {
        flex-direction: column !important;
    }
}
.page-login .form-group {
	margin-bottom: 30px !important;
}

.page-login .master-breadcrumb {
	display: none !important;
}
.page-homepage {
    background: #f5f7fb !important;
}

/* Container Card */
.page-homepage .container .p-5 {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05) !important;
    padding: 40px !important;
}

.page-homepage h2 {
    font-size: 33px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* Input Wrapper */
.page-homepage .input-group-wrapper {
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #f9fafb !important;
    padding: 10px !important;
}

/* Textarea */
.page-homepage textarea#message {
    width: 100% !important;
    border: none !important;
    resize: none !important;
    background: transparent !important;
    font-size: 15px !important;
    padding: 12px !important;
    outline: none !important;
    color: #374151 !important;
}

/* Multiselect */
.page-homepage .multiselect.dropdown-toggle {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    color: #374151 !important;
    margin-right: 8px !important;
}

/* Checkbox */
.page-homepage label {
    font-size: 14px !important;
    color: #4b5563 !important;
    margin-left: 10px !important;
}

/* Buttons wrapper */
.page-homepage .input-group-append {
    display: flex !important;
    gap: 10px !important;
}

/* Search Button */
.page-homepage #btnDomainSearch,
.page-homepage #btnDomainSearch2 {
    background: #03234D !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-weight: 500 !important;
    color: #fff !important;
    transition: 0.3s !important;
}

.page-homepage #btnDomainSearch:hover {
    background: #03234D!important;
}

/* Transfer Button */
.page-homepage #btnTransfer, .page-homepage #btnTransfer2 {
	background: #ffffff !important;
	border: 1px solid #d1d5db !important;
	color: #374151 !important;
	border-radius: 8px !important;
	padding: -17px 18px !important;
	font-weight: 500 !important;
	transition: 0.3s !important;
	width: 155px !important;
}
.page-homepage #btnTransfer:hover {
    background: #f3f4f6 !important;
}

/* Mobile buttons */
.page-homepage .row.d-sm-none .btn {
    border-radius: 8px !important;
}

/* Pricing link */
.page-homepage a.btn-link {
    font-size: 13px !important;
    color: #03234D !important;
}

/* Dropdown */
.page-homepage .multiselect-container {
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
}

/* Layout fix */
.page-homepage .advanced-input {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.home-domain-search.bg-white {
	padding: 50px !important;
}

.card-ui {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 22px 15px;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s ease;
    height: 100%;
}

.card-ui:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
    border-color: #dbeafe;
}

.icon-ui {
    font-size: 28px;
    color: #03234D;
    margin-bottom: 10px;
}

.card-ui h6 {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 5px 0;
}

.card-ui p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}
/* Section Headings */
.page-homepage h2 {
    font-size: 26px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* Card Grid Spacing */
.page-homepage .action-icon-btns {
    justify-content: center !important;
}

/* Card Style */
.page-homepage .action-icon-btns a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;

    padding: 25px 27px 37px 27px !important;
    height: 120px !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    color: #374151 !important;

    text-decoration: none !important;

    transition: all 0.3s ease !important;
}

/* Hover Effect */
.page-homepage .action-icon-btns a:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    border-color: #d1d5db !important;
}

/* Icon Container */
.page-homepage .ico-container {
    margin-bottom: 10px !important;
}

/* Icons */

.page-homepage .ico-container i {
	font-size: 45px !important;
	color: #03234D !important;
}

/* Remove old accent colors */
.page-homepage .card-accent-teal,
.page-homepage .card-accent-pomegranate,
.page-homepage .card-accent-sun-flower,
.page-homepage .card-accent-asbestos,
.page-homepage .card-accent-green,
.page-homepage .card-accent-midnight-blue {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

/* Optional: subtle icon color variation (like image) */
.page-homepage .card-accent-teal i { color: #03234D !important; }
.page-homepage .card-accent-pomegranate i { color: #03234D !important; }
.page-homepage .card-accent-sun-flower i { color: #03234D !important; }
.page-homepage .card-accent-asbestos i { color: #03234D !important; }
.page-homepage .card-accent-green i { color: #03234D !important; }
.page-homepage .card-accent-midnight-blue i { color: #03234D !important; }

/* Responsive Fix */
@media (max-width: 768px) {
   .page-homepage .action-icon-btns a {
	height: 125px !important;
	font-size: 14px !important;
}
.home-domain-search.bg-white {
	padding: 15px !important;
}
    .page-homepage .ico-container i {
        font-size: 24px !important;
    }
}
.breadcrumb-item.active {
	color: #03234D !important;
	font-weight: 600 !important;
}
/* =========================
   PAGE BACKGROUND
========================= */
.page-products {
    background: #f5f7fb !important;
}

/* =========================
   HEADER
========================= */
.page-products .header-lined {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.page-products .header-lined h1 {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.page-products .header-lined p {
    color: #6b7280 !important;
}

/* =========================
   GRID LAYOUT FIX
========================= */
.page-products .products .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Desktop: 3 cards */
@media (min-width: 992px) {
    .page-products .col-md-6 {
        width: 33.333% !important;
    }
}

/* Tablet: 2 cards */
@media (max-width: 991px) {
    .page-products .col-md-6 {
        width: 50% !important;
    }
}

/* Mobile: 1 card */
@media (max-width: 576px) {
    .page-products .col-md-6 {
        width: 100% !important;
    }
}

/* spacing */
.page-products .col-md-6 {
    margin-bottom: 25px !important;
}

/* =========================
   PRODUCT CARD
========================= */
.page-products .product {
    width: 100% !important;
    max-width: 100% !important;

    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    border: none !important;

    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;

    transition: all 0.3s ease !important;
}

/* Hover effect */
.page-products .product:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;
}

/* =========================
   HEADER (PLAN NAME)
========================= */
.page-products .product header {
    background: #f9fafb !important;
    padding: 18px !important;
    text-align: center !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

/* =========================
   DESCRIPTION
========================= */
.page-products .product-desc {
    text-align: center !important;
    padding: 15px 20px !important;
}

.page-products .product-desc p {
    color: #6b7280 !important;
    font-size: 14px !important;
}

/* =========================
   FEATURES LIST
========================= */
.page-products .product-desc ul {
    list-style: none !important;
    padding: 0 !important;
    margin-top: 10px !important;
}

.page-products .product-desc li {
    font-size: 14px !important;
    color: #374151 !important;
    padding: 6px 0 !important;
}

/* =========================
   PRICING
========================= */
.page-products .product-pricing {
    text-align: center !important;
    padding: 20px 15px 10px !important;
}

/* Big price */
.page-products .product-pricing .price {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

/* Billing text */
.page-products .product-pricing small,
.page-products .product-pricing br + * {
    font-size: 14px !important;
    color: #6b7280 !important;
}

/* =========================
   FOOTER
========================= */
.page-products .product footer {
    text-align: center !important;
    padding: 15px 20px 25px !important;
}

/* =========================
   BUTTON
========================= */
.page-products .btn-order-now {
    background: #16a34a !important;
    border: none !important;
    border-radius: 8px !important;

    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    color: #ffffff !important;

    display: inline-block !important;
    transition: 0.3s !important;
}

.page-products .btn-order-now:hover {
    background: #15803d !important;
}

/* =========================
   ALERTS
========================= */
.page-products .alert {
    border-radius: 10px !important;
}

/* =========================
   FIX WHMCS ROW HEIGHT ISSUE
========================= */
.page-products .row-eq-height {
    display: flex !important;
    flex-wrap: wrap !important;
}
#order-standard_cart .products .product footer {
	float: right;
	margin: 20px 0;
	width: 100% !important;
	font-size: .8em;
	text-align: center;
}

.forgot-link {
    color: #03234D!important;
}
/* Wrapper */
.remember-wrap {
    display: flex;
    align-items: center;
    gap: 8px; /* spacing between checkbox and text */
    cursor: pointer;
}

/* Checkbox base */
.remember-wrap input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #2F5BDB; /* 🔥 BLUE COLOR */
    cursor: pointer;
}
#registration {
	margin: 0;
	padding: 30px 27px 30px 27px !important;
	background: white !important;
	border-radius: 14px !important;
	border: 1px solid #eaeaea !important;
	box-shadow: 0 8px 25px rgba(0,0,0,0.05) !important;
}
#registration .card {
	box-shadow: none !important;
	border:none !important;
}

/* ===============================
   REGISTER HEADER
=================================*/
.page-clientregister .register-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-clientregister .register-header h2 {
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.3px;

    background: black ;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.blue-icon {
    color: #03234D; /* your blue theme */
    margin-left: 6px;
    font-size: 20px;
    vertical-align: middle;
}
/* SUBTITLE */
.page-clientregister .register-header p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* OPTIONAL: ADD LITTLE SPACING ABOVE CARDS */
.page-clientregister .register-header + .card {
    margin-top: 10px !important;
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
    .page-clientregister .register-header h2 {
        font-size: 24px;
    }

    .page-clientregister .register-header p {
        font-size: 13px;
    }
}
/* ===============================
   SECTION TITLES (H3)
=================================*/
.page-clientregister .card-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 20px !important;
}
.vnet-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vnet-blue-icon {
    color: #03234D;
    font-size: 16px;
}
/* ICON FIX */
.register-title .vnet-blue-icon {
    color: #03234D !important;
    margin-left: 6px;
    font-size: 20px;
    vertical-align: middle;
}
.vnet-subtext {
    display: block;
    font-size: 13px;
    color: #6b7280;
    font-weight: 400;
    margin-top: 2px;
}

/* CARD */
.vnet-mail-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    margin-top: 20px;
}

/* LEFT CONTENT */
.vnet-mail-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* ICON */
.vnet-mail-icon {
    width: 38px;
    height: 38px;
    background: #eff6ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #03234D;
    font-size: 18px;
}

/* TITLE */
.vnet-mail-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #111827;
}

/* DESCRIPTION */
.vnet-mail-desc {
    font-size: 10px;
    color: #6b7280;
    margin: 3px 0 0;
}

/* TOGGLE SWITCH */
.vnet-mail-toggle input {
    display: none;
}

.vnet-mail-toggle label {
    width: 42px;
    height: 22px;
    background: #d1d5db;
    display: block;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
}

.vnet-mail-toggle label:after {
    content: '';
    width: 18px;
    height: 18px;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    transition: 0.3s;
}

/* ACTIVE */
.vnet-mail-toggle input:checked + label {
    background: #03234D;
}

.vnet-mail-toggle input:checked + label:after {
    left: 22px;
}
/* ===============================
   FORM GROUP
=================================*/
.page-clientregister .form-group {
    position: relative !important;
    margin-bottom: 18px !important;
}

/* ===============================
   INPUT FIELDS
=================================*/
.page-clientregister input.field,
.page-clientregister .form-control,
.page-clientregister select {
    width: 100% !important;
    height: 50px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    font-size: 14px !important;
    color: #111827 !important;
    transition: all 0.25s ease !important;
}

/* PLACEHOLDER */
.page-clientregister input::placeholder {
    color: #9ca3af !important;
}

/* INPUT FOCUS */
.page-clientregister input:focus,
.page-clientregister select:focus {
    border-color: #326BF1 !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important;
    outline: none !important;
}

/* ===============================
   ICON STYLING
=================================*/
.page-clientregister .prepend-icon {
    position: relative !important;
}

.page-clientregister .prepend-icon .field-icon {
	position: absolute !important;
	left: 4px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 14px !important;
	color: #4677fb !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

/* FIX DOUBLE ICON ISSUE (STATE FIELD) */
.page-clientregister #inputStateIcon + #inputStateIcon {
    display: none !important;
}
/* Sidebar container */
.sidebar {
    width: 100% !important;
}

/* Card style */
.card-sidebar {
    border: none !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    overflow: hidden !important;
}

/* Card header */
.card-sidebar .card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #eaeef3 !important;
    padding: 12px 16px !important;
}

.card-sidebar .card-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
}

/* Collapse icon */
.sidebar .card-minimise {
    color: #6c757d !important;
    cursor: pointer !important;
}

/* Body */
.collapsable-card-body {
    padding: 0 !important;
}

/* List group */
.sidebar .list-group-item {
    border: none !important;
    border-bottom: 1px solid #f1f3f5 !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #495057 !important;
    background: #fff !important;
}

/* First text block */
.sidebar .list-group-item:first-child {
    font-size: 13px !important;
    color: #6c757d !important;
    background: #fff !important;
}

/* Menu item layout */
.sidebar-menu-item-wrapper {
    display: flex !important;
    align-items: center !important;
}

/* Icon */
.sidebar-menu-item-icon-wrapper {
    width: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Default icon color */
.sidebar-menu-item-icon {
    color: #03234D !important;
}

/* Icon wrapper (optional safety) */
.sidebar-menu-item-icon-wrapper i {
    color: #03234D !important;
}

/* Keep blue on hover */
.list-group-item-action:hover .sidebar-menu-item-icon {
    color: #03234D !important;
}

/* Active state */
.list-group-item.active .sidebar-menu-item-icon {
    color: #03234D !important;
}

/* Label */
.sidebar-menu-item-label {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Hover effect */
.list-group-item-action:hover {
    background: #f1f5f9 !important;
    color: #03234D !important;
    transition: 0.2s !important;
}

.list-group-item-action:hover .sidebar-menu-item-icon {
    color: #03234D !important;
}

/* Active item */
.list-group-item.active {
    background: #e7f1ff !important;
    color: #03234D !important;
    font-weight: 600 !important;
}
.fas.fa-chevron-up.card-minimise.float-right {
	margin-top: 5px !important;
}
.sidebar .card-title.m-0 {
	margin-bottom: 8px !important;
}
.sidebar .fas.fa-user {
	color: #4375fa !important;
}
body.page-clientregister {
    background-image: url('/whmcs/templates/vnet-template/images/login-bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
body.page-login{
    background-image: url('/whmcs/templates/vnet-template/images/login2.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/* PAGE BACKGROUND */
.page-supportticketsubmit-steptwo {
     background-image: url('/whmcs/templates/vnet-template/images/login-bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
}



/* HEADINGS */
.page-supportticketsubmit-steptwo h1,
.page-supportticketsubmit-steptwo h2 {
    text-align: center !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.page-supportticketsubmit-steptwo p.text-muted {
    text-align: center !important;
    margin-bottom: 30px !important;
}

/* FORM GROUP */
.page-supportticketsubmit-steptwo .form-group {
    margin-bottom: 20px !important;
}

/* LABEL */
.page-supportticketsubmit-steptwo label {
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: #2c3e50 !important;
}

/* INPUTS + TEXTAREA + SELECT */
.page-supportticketsubmit-steptwo .form-control,
.page-supportticketsubmit-steptwo select,
.page-supportticketsubmit-steptwo textarea {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 14px !important;
    background: #f9fbfd !important;
    transition: 0.2s ease !important;
height: 40px !important;
}

/* INPUT FOCUS */
.page-supportticketsubmit-steptwo .form-control:focus {
    border-color: #03234D !important;
    box-shadow: 0 0 0 2px rgba(13,110,253,0.1) !important;
    background: #fff !important;
}

/* TEXTAREA HEIGHT */
.page-supportticketsubmit-steptwo textarea {
    min-height: 160px !important;
}

/* FILE UPLOAD */
.page-supportticketsubmit-steptwo .custom-file-label {
    padding: 10px !important;
    background: #f9fbfd !important;
    border: 1px solid #e2e8f0 !important;
}

/* ATTACH BUTTON */
.page-supportticketsubmit-steptwo .btn-default {
    border-radius: 10px !important;
    background: #eef2f7 !important;
    border: none !important;
}

/* PRIMARY BUTTON (LIKE IMAGE) */
.page-supportticketsubmit-steptwo .btn-primary {
    width: 100% !important;
    border-radius: 10px !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: linear-gradient(90deg, #03234D, #03234D) !important;
    border: none !important;
    transition: 0.3s ease !important;
}

/* BUTTON HOVER */
.page-supportticketsubmit-steptwo .btn-primary:hover {
    opacity: 0.9 !important;
}

/* CANCEL BUTTON */
.page-supportticketsubmit-steptwo .btn-default {
    margin-top: 10px !important;
}

/* CENTER BUTTON AREA */
.page-supportticketsubmit-steptwo p.text-center {
    margin-top: 25px !important;
}

/* SMALL TEXT */
.page-supportticketsubmit-steptwo .text-muted {
    font-size: 13px !important;
}

/* CAPTCHA CENTER */
.page-supportticketsubmit-steptwo .captcha-container {
    text-align: center !important;
}



#btnTicketAttachmentsAdd {
	margin-top: 0px !important;
	border-radius: 0px 10px 10px 0px !important;
}

.vnet-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.vnet-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    margin: 0;
    flex: 0 0 42px;
}

.vnet-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.vnet-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: 0.3s;
}

.vnet-slider:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

.vnet-toggle input:checked + .vnet-slider {
    background: #03234D;
}

.vnet-toggle input:checked + .vnet-slider:before {
    transform: translateX(20px);
}

.vnet-remember-text {
    font-size: 11px;
    color: #03234D;
    line-height: 22px;
    margin: 0;
}
.vnet-login-features {
    width: 100%;
    max-width: 720px;
    margin: 55px auto 0;
    padding: 22px 35px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.vnet-feature {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.vnet-feature i {
    font-size: 24px;
    color: #03234D;
    min-width: 28px;
}

.vnet-feature h5 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 3px;
    color: #111827;
}

.vnet-feature p {
    font-size: 13px;
    margin: 0;
    color: #6b7280;
    white-space: nowrap;
}

.vnet-divider {
    width: 1px;
    height: 38px;
    background: #dbe3ef;
    flex: 0 0 1px;
}
@media (max-width: 768px) {
    .vnet-login-features {
        max-width: 100%;
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .vnet-divider {
        display: none;
    }
}
.page-login .input-group-text i {
    color: #03234D !important; /* your theme blue */
}
.page-login .btn-reveal-pw i {
    color: #03234D !important;
}
.vnet-register-layout {
    max-width: 1180px;
    margin: 0 auto;
}

.vnet-register-sidebar {
    position: sticky;
    top: 90px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #e5edff;
    border-radius: 22px;
    padding: 28px 22px;
    box-shadow: 0 20px 55px rgba(37,99,235,0.10);
    backdrop-filter: blur(14px);
}

.vnet-sidebar-hero {
    text-align: center;
}

.vnet-sidebar-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eaf2ff, #dbeafe);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #03234D;
    font-size: 44px;
}

.vnet-sidebar-hero h3 {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
}

.vnet-sidebar-hero p,
.vnet-sidebar-box p,
.vnet-sidebar-security p {
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0;
}

.vnet-sidebar-btn,
.vnet-sidebar-link-btn {
    margin-top: 20px;
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #03234D;
    color: #03234D;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    text-decoration: none;
}

.vnet-sidebar-btn:hover,
.vnet-sidebar-link-btn:hover {
    background: #03234D;
    color: #fff;
    text-decoration: none;
}

.vnet-sidebar-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0;
    color: #9ca3af;
}

.vnet-sidebar-divider:before,
.vnet-sidebar-divider:after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dbe3ef;
}

.vnet-sidebar-box,
.vnet-sidebar-security {
    display: flex;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
    margin-top: 20px;
}

.vnet-sidebar-small-icon,
.vnet-security-icon {
    min-width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #fff;
    color: #03234D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.vnet-sidebar-box h4,
.vnet-sidebar-security h4 {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px;
}

@media (max-width: 991px) {
    span.input-group-append.desktop-only {
    display: none !important;
}
    .vnet-register-sidebar {
        position: relative;
        top: auto;
        margin-bottom: 25px;
    }
}
.page-homepage #btnTransfer, .page-homepage #btnTransfer2 {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    border-radius: 8px !important;
    padding: 17px 18px !important;
    font-weight: 500 !important;
    transition: 0.3s !important;
    width: auto !important;
}
.vnet-captcha-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    margin: 22px 0;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
}

.vnet-captcha-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.vnet-captcha-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #eff6ff;
    color: #03234D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.vnet-captcha-left h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.vnet-captcha-left p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.vnet-captcha-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vnet-captcha-img-wrap {
    height: 42px;
    min-width: 110px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #cfe0ff;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vnet-captcha-img-wrap img {
    max-height: 42px;
}

.vnet-captcha-refresh {
    width: 40px;
    height: 40px;
    border: 0;
    background: #fff;
    color: #03234D;
    border-radius: 10px;
    font-size: 16px;
}

.vnet-captcha-input {
    height: 42px !important;
    width: 170px !important;
    border-radius: 10px !important;
    border: 1px solid #dbe3ef !important;
    font-size: 14px !important;
}

@media (max-width: 768px) {
    .vnet-captcha-card,
    .vnet-captcha-right {
        flex-direction: column;
        align-items: stretch;
    }

    .vnet-captcha-input {
        width: 100% !important;
    }
}
.vnet-password-meter {
    margin-top: 4px;
}

.vnet-password-meter-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
    color: #6b7280;
}

.vnet-password-status {
    font-size: 12px;
    color: #6b7280;
}

.vnet-password-progress {
    height: 8px !important;
    background: #e5e7eb !important;
    border-radius: 999px !important;
    overflow: hidden;
    box-shadow: none !important;
}

.vnet-password-progress .progress-bar {
    border-radius: 999px !important;
    transition: width 0.3s ease;
}
.vnet-ticket-card {
    border: 1px solid #e5edff;
    border-radius: 18px;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 22px 60px rgba(37, 99, 235, 0.10);
    overflow: hidden;
}

.vnet-ticket-body {
    padding: 38px 42px;
}

.vnet-ticket-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid #dbe7ff;
}

.vnet-ticket-header-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eaf2ff, #dbeafe);
    color: #03234D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.vnet-ticket-header h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #111827;
}

.vnet-ticket-header h3 i {
    color: #03234D;
    font-size: 16px;
    margin-left: 6px;
}

.vnet-ticket-header p {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.vnet-ticket-card label {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.vnet-ticket-card .form-control,
.vnet-ticket-card select.form-control {
    height: 46px;
    border-radius: 10px !important;
    border: 1px solid #dbe3ef !important;
    background: #f8fbff !important;
    font-size: 14px;
    color: #111827;
    box-shadow: none !important;
}

.vnet-ticket-card .form-control:focus {
    border-color: #03234D !important;
    box-shadow: 0 0 0 3px rgba(48,106,241,0.12) !important;
}

.vnet-input-wrap {
    position: relative;
}

.vnet-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
    z-index: 2;
}

.vnet-input-wrap .form-control {
    padding-left: 40px !important;
}

.vnet-message-box {
    min-height: 160px !important;
    height: auto !important;
    background: #fff !important;
    border-radius: 12px !important;
}

.vnet-ticket-card .md-editor {
    border-radius: 12px !important;
    overflow: hidden;
    border-color: #dbe3ef !important;
}

.vnet-ticket-card .md-header {
    background: #f8fbff !important;
    border-bottom: 1px solid #e5edff !important;
}

.vnet-ticket-card .md-preview,
.vnet-ticket-card .md-input {
    border-radius: 0 0 12px 12px !important;
}


.vnet-attachments-group label {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.vnet-attachment-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border: 1px dashed #b9cdfc;
    border-radius: 8px;
    padding: 14px 18px;
    background: #fff;
}

/* LEFT TEXT AREA */
.vnet-upload-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex: 1; /* IMPORTANT */
    font-size: 13px;
    color: #64748b;
    white-space: nowrap; /* STOP BREAKING */
}

/* ICON */
.vnet-upload-center i {
    font-size: 24px;
    color: #03234D;
}

/* RIGHT BUTTON AREA */
.vnet-upload-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Browse button */
.vnet-custom-file .custom-file-label {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 40px;
    min-width: 120px;

    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #f9fafb;

    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Add more button */
.vnet-add-more-btn {
    height: 40px;
    padding: 0 16px;

    border-radius: 8px;
    border: 1px solid #dbe3ef;
    background: #fff;

    font-size: 13px;
    font-weight: 600;
}

.vnet-file-note {
    margin-top: 7px;
    color: #64748b;
    font-size: 11px;
}


.vnet-ticket-actions {
    margin-top: 24px;
}

.vnet-submit-ticket {
    width: 100%;
    height: 48px;
    border-radius: 10px !important;
    border: none !important;
    background: linear-gradient(135deg, #03234D, #03234D) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 12px 25px rgba(37,99,235,0.22);
}

.vnet-submit-ticket:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(37,99,235,0.28);
}

.vnet-cancel-ticket {
    width: 100%;
    margin-top: 10px;
    height: 42px;
    border-radius: 10px !important;
    border: 1px solid #dbe3ef !important;
    background: #fff !important;
    color: #374151 !important;
    font-weight: 600;
}

.vnet-ticket-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 24px;
    
    
    overflow: hidden;
  
}

.vnet-ticket-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-right: 1px solid #e5edff;
}

.vnet-ticket-trust-item:last-child {
    border-right: 0;
}

.vnet-ticket-trust-item i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eff6ff;
    color: #03234D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.vnet-ticket-trust-item:nth-child(2) i {
    background: #ecfdf5;
    color: #16a34a;
}

.vnet-ticket-trust-item:nth-child(3) i {
    background: #fff7ed;
    color: #f97316;
}

.vnet-ticket-trust-item h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.vnet-ticket-trust-item p {
    margin: 3px 0 0;
    font-size: 12px;
    color: #6b7280;
}

@media (max-width: 768px) {
    .vnet-ticket-body {
        padding: 24px 18px;
    }

    .vnet-ticket-header {
        align-items: flex-start;
    }

    .vnet-ticket-header h3 {
        font-size: 22px;
    }

    .vnet-attachment-box {
        flex-direction: column;
        align-items: stretch;
    }

    .vnet-upload-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vnet-ticket-trust {
        grid-template-columns: 1fr;
    }

    .vnet-ticket-trust-item {
        border-right: 0;
        border-bottom: 1px solid #e5edff;
    }

    .vnet-ticket-trust-item:last-child {
        border-bottom: 0;
    }
}
/* =========================
   VNET CLIENT DASHBOARD FINAL
========================= */



/* Main wrapper */
.vnet-main,
.vnet-content,
.vnet-dashboard {
    width: 100%;
}

.vnet-dashboard {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0px 15px 50px;
    font-family: 'Manrope', sans-serif;
}

/* HIDE HERO IMAGE ON TABLET + MOBILE */
@media (max-width: 992px) {
    .vnet-hero-art {
        display: none !important;
    }
}

.vnet-dashboard-hero h1 {
    font-size: 34px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
}

.vnet-dashboard-hero p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.vnet-dashboard-hero a {
    color: #03234D;
    font-weight: 700;
}

/* HERO LAYOUT */
.vnet-dashboard-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

/* IMAGE CONTAINER */
.vnet-hero-art {
    flex: 0 0 auto !important;
    display: flex ;
    justify-content: flex-end !important;
}

/* IMAGE */
.vnet-hero-art img {
    width: 320px !important;
    max-width: 100% !important;
    height: auto !important;

    object-fit: contain !important;

    /* NICE EFFECT */
    filter: drop-shadow(0 10px 25px rgba(37,99,235,0.15)) !important;

    /* OPTIONAL ANIMATION */
    transition: 0.3s !important;
}

.vnet-hero-art img:hover {
    transform: translateY(-5px) !important;
}

/* MOBILE */
@media (max-width: 768px) {
    .vnet-dashboard-hero {
        flex-direction: column !important;
        text-align: center !important;
    }

    .vnet-hero-art img {
        width: 220px !important;
    }
}

/* COMMON CARD */
.vnet-profile-card,
.vnet-stat-card,
.vnet-panel-card,
.vnet-search-box {
    background: #fff !important;
    border: 1px solid #e8eef8 !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 35px rgba(37, 99, 235, 0.08) !important;
}

/* PROFILE */
.vnet-profile-card {
    padding: 0;
    margin-bottom: 26px;
    overflow: hidden;
}

.vnet-card-head,
.vnet-panel-head {
    padding: 18px 22px;
    border-bottom: 1px solid #edf2fb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vnet-card-head > div,
.vnet-panel-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vnet-head-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eff6ff;
    color: #03234D;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.vnet-profile-body {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 30px;
    padding: 24px;
}

.vnet-profile-left h3 {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
}

.vnet-profile-left p,
.vnet-profile-right p {
    margin: 4px 0;
    color: #4b5563;
    font-size: 14px;
}

.vnet-profile-right {
    border-left: 1px solid #e5e7eb;
    padding-left: 30px;
}

.vnet-profile-right i {
    color: #03234D;
    margin-right: 8px;
}

.vnet-update-btn {
    margin-top: 18px;
    height: 46px;
    border-radius: 10px;
    background: #22c55e;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-decoration: none !important;
}

/* STATS */
.vnet-stats-row {
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: 8px;
}

.vnet-stats-row > div {
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 24px;
}

.vnet-stat-card {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 130px;
    padding: 22px;
    color: #111827 !important;
    text-decoration: none !important;
    transition: 0.25s ease;
}

.vnet-stat-card:hover {
    transform: translateY(-4px);
}

.vnet-stat-icon {
    min-width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.vnet-stat-icon.blue { background: #eff6ff; color: #03234D; }
.vnet-stat-icon.green { background: #ecfdf5; color: #16a34a; }
.vnet-stat-icon.red { background: #fef2f2; color: #ef4444; }
.vnet-stat-icon.yellow { background: #fff7ed; color: #f59e0b; }

.vnet-stat-card h3 {
    font-size: 30px;
    font-weight: 800;
    margin: 0;
}

.vnet-stat-card p {
    margin: 0 0 8px;
    color: #6b7280;
    font-size: 14px;
}

.vnet-stat-card small {
    color: #03234D;
    font-weight: 800;
}

/* SEARCH */
.vnet-search-box {
    display: flex;
    overflow: hidden;
    margin-bottom: 26px;
}

.vnet-search-box input {
    flex: 1;
    height: 58px;
    border: 0;
    outline: none;
    padding: 0 22px;
    font-size: 14px;
    color: #111827;
}

.vnet-search-box button {
    width: 62px;
    border: 0;
    background: #03234D;
    color: #fff;
    font-size: 18px;
}

/* PANEL GRID */
.vnet-dashboard > .row {
    margin-left: -12px;
    margin-right: -12px;
}

.vnet-dashboard > .row > .col-md-6 {
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 24px;
}

/* PANEL CARD */
.vnet-panel-card {
    height: 100%;
    min-height: 170px;
    overflow: hidden;
}

.vnet-panel-head {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.vnet-panel-head strong {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.vnet-panel-head a {
    background: #f8fafc;
    border: 1px solid #edf2fb;
    color: #111827 !important;
    padding: 8px 13px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none !important;
}

.vnet-panel-head a:hover {
    background: #03234D;
    color: #fff !important;
}

.vnet-panel-body {
    padding: 18px 22px;
    font-size: 14px;
    color: #4b5563;
}

/* WHMCS GENERATED TABLE/LISTS INSIDE PANELS */
.vnet-panel-card table {
    width: 100% !important;
    margin: 0 !important;
}

.vnet-panel-card table td,
.vnet-panel-card table th {
    padding: 13px 10px !important;
    border-bottom: 1px solid #edf2fb !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

.vnet-panel-card table tr:last-child td {
    border-bottom: 0 !important;
}

.vnet-panel-card .list-group {
    margin: 0 !important;
    padding: 0 !important;
}

.vnet-panel-card .list-group-item {
    border: 0 !important;
    border-bottom: 1px solid #edf2fb !important;
    padding: 14px 22px !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 14px !important;
}

.vnet-panel-card .list-group-item:hover {
    background: #f8fbff !important;
    color: #03234D !important;
}

/* Your custom list item */
.vnet-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid #edf2fb;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 14px;
}

.vnet-list-item:hover {
    background: #f8fbff;
    color: #03234D !important;
}

.vnet-list-item i {
    color: #03234D;
    margin-right: 8px;
}

/* Badges / status */
.vnet-badge,
.vnet-panel-card .badge,
.vnet-panel-card .label {
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

/* Buttons inside WHMCS panels */
.vnet-panel-card .btn,
.vnet-panel-card .btn-default {
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background: #f8fafc !important;
    color: #111827 !important;
    font-size: 10px !important;
    font-weight:600 !important;
    padding: 6px 10px !important;
}

.vnet-panel-card .btn:hover {
    background: #03234D !important;
    color: #fff !important;
}

/* Active services panel should not overflow */
.vnet-panel-card .truncate,
.vnet-panel-card td {
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer inside panel */
.vnet-panel-card .card-footer,
.vnet-panel-footer {
    background: #fbfdff !important;
    border-top: 1px solid #edf2fb !important;
    padding: 14px 22px !important;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .vnet-dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .vnet-profile-body {
        grid-template-columns: 1fr;
    }

    .vnet-profile-right {
        border-left: 0;
        padding-left: 0;
    }

    .vnet-panel-card {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .vnet-dashboard {
        padding: 20px 12px 40px;
    }

    .vnet-dashboard-hero h1 {
        font-size: 26px;
    }

    .vnet-stat-card {
        flex-direction: column;
        align-items: flex-start;
        min-height: 150px;
    }

    .vnet-panel-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
/* PANEL COLUMN SPACING */
.vnet-panel-col {
    margin-bottom: 25px;
}

/* PANEL CARD (extra safety) */
.vnet-panel-card {
    margin-bottom: 0; /* keep clean, spacing handled by column */
}

/* ROW FIX (prevents collapse) */
.vnet-client-home-panels .row {
    margin-bottom: -25px;
}
/* FORCE REMOVE WHMCS SIDEBAR ONLY ON DASHBOARD */
body.clientareahome #sidebar,
body.clientareahome .sidebar {
    display: none !important;
}

/* EXPAND MAIN CONTENT */
body.clientareahome #contentarea,
body.clientareahome .main-content {
    width: 100% !important;
}
.vnet-captcha-img-wrap{
min-width: 140px;
}
.primary-bg-color.page-clientareahome .col-lg-4.col-xl-3 {
	display: none !important;
}
.primary-bg-color.page-clientareahome .col-xl-9 {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}
.vnet-product-details-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 0 50px;
    font-family: 'Manrope', sans-serif;
}

.vnet-product-side-card,
.vnet-product-main-card,
.vnet-product-info-card,
.vnet-domain-card {
    background: #fff;
    border: 1px solid #e8eef8;
    border-radius: 16px;
    box-shadow: 0 14px 35px rgba(37,99,235,0.06);
    margin-bottom: 24px;
}

.vnet-product-side-card {
    overflow: hidden;
}

.vnet-side-title {
    padding: 18px 20px;
    font-weight: 800;
    color: #111827;
    border-bottom: 1px solid #edf2fb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vnet-side-title i:first-child {
    color: #03234D;
    margin-right: 8px;
}

.vnet-side-link {
    display: block;
    padding: 16px 22px;
    color: #03234D;
    background: #eff6ff;
    font-weight: 700;
    text-decoration: none;
}

.vnet-side-link.danger {
    background: #fff;
    color: #ef4444;
}

.vnet-product-main-card {
    text-align: center;
    padding: 55px 32px 34px;
}

.vnet-product-icon {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin: 0 auto 24px;
    background: #eff6ff;
    color: #03234D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
}

.vnet-product-main-card h2 {
    font-size: 30px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
}

.vnet-product-main-card p {
    color: #6b7280;
    font-size: 18px;
    margin-bottom: 28px;
}

.vnet-status-box {
    height: 52px;
    border-radius: 10px;
    border: 1px solid #86efac;
    background: #f0fdf4;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.vnet-cancel-box {
    height: 52px;
    border-radius: 10px;
    border: 1px solid #fda4af;
    background: #fff1f2;
    color: #e11d48;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800;
    text-decoration: none;
}

.vnet-product-info-card {
    padding: 22px 26px;
}

.vnet-info-item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #edf2fb;
}

.vnet-info-item:last-child {
    border-bottom: 0;
}

.vnet-info-item i {
    color: #03234D;
    font-size: 20px;
    width: 24px;
    margin-top: 3px;
}

.vnet-info-item h4 {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
}

.vnet-info-item p {
    color: #6b7280;
    margin: 0;
}

.vnet-domain-card {
    padding: 28px 32px;
}

.vnet-domain-title {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #edf2fb;
    padding-bottom: 18px;
    margin-bottom: 22px;
}

.vnet-domain-title i {
    color: #03234D;
    font-size: 22px;
}

.vnet-domain-title h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
}

.vnet-domain-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    margin-bottom: 12px;
    color: #4b5563;
}

.vnet-domain-row strong {
    color: #111827;
}

.vnet-ssl-danger {
    color: #ef4444;
}

.vnet-ssl-success {
    color: #16a34a;
}

.vnet-ssl-danger i,
.vnet-ssl-success i {
    font-size: 9px;
    margin-right: 8px;
}

.vnet-domain-actions {
    display: flex;
    gap: 20px;
    margin-top: 28px;
}

.vnet-domain-actions a {
    min-width: 220px;
    height: 50px;
    border: 1px solid #03234D;
    border-radius: 10px;
    color: #03234D;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800;
    text-decoration: none;
}

.vnet-domain-actions a:hover {
    background: #03234D;
    color: #fff;
}

@media (max-width: 768px) {
    .vnet-product-main-card {
        padding: 35px 20px;
    }

    .vnet-domain-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .vnet-domain-actions {
        flex-direction: column;
    }

    .vnet-domain-actions a {
        width: 100%;
    }
}
/* HEADER CONTAINER */
.service-header {
    position: relative !important;
}

/* TITLE */
.service-title {
    font-size: 26px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* BUTTON */
.btn-order-service {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    background: #03234D !important;
    color: #fff !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

/* HOVER */
.btn-order-service:hover {
    background: #0b5ed7 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(13,110,253,0.25) !important;
}
.fas.fa-sparkles.vnet-blue-icon {
	margin-left: 6px !important;
	margin-top: -4px !important;
}
/* TABLE RESET */
#tableServicesList {
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
    background: transparent !important;
}

/* HEADER */
#tableServicesList thead th {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #03234D !important;
	border: none !important;
	padding: 6px 9px !important;
	background: transparent !important;
text-align: center;
}

/* ROW = CARD STYLE */
#tableServicesList tbody tr {
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}

/* HOVER EFFECT */
#tableServicesList tbody tr:hover {
    background: #f8f9fc !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08) !important;
}

/* CELLS */
#tableServicesList tbody td {
    border: none !important;
    padding: 14px 15px !important;
    vertical-align: middle !important;
    background: transparent !important;
}

/* ROUND CARD */
#tableServicesList tbody tr td:first-child {
    border-radius: 10px 0 0 10px !important;
}

#tableServicesList tbody tr td:last-child {
    border-radius: 0 10px 10px 0 !important;
}

/* PRODUCT TEXT */
#tableServicesList tbody td strong {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #212529 !important;
}

/* DOMAIN TEXT */
#tableServicesList tbody td a {
    font-size: 12px !important;
    color: #6c757d !important;
    text-decoration: none !important;
}

#tableServicesList tbody td a:hover {
    color: #03234D !important;
}

/* PRICE */
#tableServicesList tbody td.text-center {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* BILLING */
#tableServicesList small.text-muted {
    font-size: 11px !important;
    display: block !important;
    margin-top: 2px !important;
}

/* STATUS BADGE */
#tableServicesList .status {
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    display: inline-block !important;
}

/* STATUS COLORS */
#tableServicesList .status-active {
    background: #e6f7ee !important;
    color: #28a745 !important;
}

#tableServicesList .status-pending {
    background: #fff4e5 !important;
    color: #f0ad4e !important;
}

#tableServicesList .status-cancelled {
    background: #fdecea !important;
    color: #dc3545 !important;
}

/* ICON */
#tableServicesList td img {
    opacity: 0.9 !important;
}

/* LOADING */
#tableLoading {
    padding: 20px 0 !important;
}
/* CARD */
.vnet-table-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}

/* TABLE */
.vnet-services-table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

/* HEADER */
.vnet-services-table thead th {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
    border: none;
}

/* ROW */
.vnet-services-table tbody tr {
    background: #f8fafc;
    border-radius: 10px;
    transition: 0.2s;
}

.vnet-services-table tbody tr:hover {
    background: #eef2ff;
}

/* CELL */
.vnet-services-table td {
    vertical-align: middle;
    border: none;
    padding: 15px;
}

/* FIRST CELL ICON */
.vnet-services-table td:first-child {
	width: 12px !important;
}

.vnet-services-table td:first-child img {
    background: #e0edff;
 
    border-radius: 10px;
}

/* PRODUCT NAME */
.vnet-services-table td strong {
    font-weight: 600;
    color: #1e293b;
}

.vnet-services-table td a {
    font-size: 12px;
    color: #03234D;
}

/* PRICING */
.vnet-services-table td small {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

/* STATUS BADGE */
.status {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* ACTIVE */
.status-active {
    background: #dcfce7;
    color: #16a34a;
}

/* PENDING */
.status-pending {
    background: #fef3c7;
    color: #d97706;
}

/* CANCELLED */
.status-cancelled {
    background: #fee2e2;
    color: #dc2626;
}

/* ALIGN CENTER COLUMNS */
.vnet-services-table td:nth-child(3),
.vnet-services-table td:nth-child(4),
.vnet-services-table td:nth-child(5) {
    text-align: center;
}
/* HEADER LAYOUT */
.vnet-service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* TITLE */
.service-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

/* BUTTON */
.vnet-btn-primary {
    background: #03234D;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vnet-btn-primary:hover {
    background: #1e40af;
    color: #fff;
    text-decoration:none;
}

/* MOBILE FIX */
@media (max-width: 768px) {
    .vnet-service-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
/* ===============================
   CARD SAME AS SERVICES
=============================== */
.vnet-table-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

/* ===============================
   TOP FILTER
=============================== */
.vnet-table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    gap: 10px;
}

.vnet-table-top input {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.vnet-table-top select {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* ===============================
   TABLE STYLE SAME AS SERVICES
=============================== */
.vnet-domains-table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.vnet-domains-table thead th {
    font-size: 12px;
    color: #03234D;
    border: none;
       text-align: center !important;
}

/* ROW CARD STYLE */
.vnet-domains-table tbody tr {
    background: #f8fafc;
    border-radius: 12px;
    transition: 0.2s;
}

.vnet-domains-table tbody tr:hover {
    background: #eef2ff;
}

/* CELL */
.vnet-domains-table td {
    padding: 16px;
    border: none;
}

/* ===============================
   DOMAIN CELL (MATCH SERVICES)
=============================== */
.vnet-domain-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vnet-domain-icon {
    width: 38px;
    height: 38px;
    background: #e0edff;
    color: #03234D;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.vnet-domain-info strong {
    display: block;
    font-weight: 600;
}

.vnet-domain-meta {
    font-size: 12px;
    color: #64748b;
}

/* ===============================
   AUTO RENEW
=============================== */
.vnet-auto-renew.on {
    color: #16a34a;
}

.vnet-auto-renew.off {
    color: #dc2626;
}

/* ===============================
   STATUS BADGE SAME AS SERVICES
=============================== */
.status {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.status-active {
    background: #dcfce7;
    color: #16a34a;
}

.status-expired,
.status-cancelled {
    background: #fee2e2;
    color: #dc2626;
}

/* ALIGN CENTER */
.vnet-domains-table td:nth-child(4),
.vnet-domains-table td:nth-child(5),
.vnet-domains-table td:nth-child(6) {
    text-align: center;
}
/* LAYOUT */
.vnet-product-layout {
    display: flex;
    gap: 20px;
}

/* SIDEBAR */
.vnet-product-sidebar {
    width: 240px;
}

.vnet-side-card {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.vnet-side-title {
    font-weight: 600;
    margin-bottom: 10px;
}

.vnet-side-item {
    padding: 8px;
    background: #eef2ff;
    border-radius: 6px;
}

.vnet-side-link {
    display: block;
    padding: 8px;
    color: #03234D;
}

/* CENTER */
.vnet-product-main {
    flex: 1;
}

.vnet-product-card {
    background: #fff;
    padding: 30px;
    border-radius: 14px;
    text-align: center;
}

.vnet-product-icon {
    font-size: 40px;
    color: #03234D;
    margin-bottom: 10px;
}

/* STATUS */
.vnet-status.active {
    background: #dcfce7;
    color: #16a34a;
    padding: 10px;
    border-radius: 8px;
}

/* ===============================
   RIGHT INFO CARD (MATCH IMAGE)
=============================== */

.vnet-info-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}

/* EACH ROW */
.vnet-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 30px;
    border-bottom: 1px solid #eef2f7;
}

/* REMOVE LAST BORDER */
.vnet-info-row:last-child {
    border-bottom: none;
}

/* ICON */
.vnet-info-row i {
    font-size: 16px;
    color: #03234D;
    margin-top: 2px;
    min-width: 18px;
}

/* TEXT BLOCK */
.vnet-info-row div {
    display: flex;
    flex-direction: column;
}

/* LABEL */
.vnet-info-row span {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 2px;
}

/* VALUE */
.vnet-info-row strong {
    font-size: 12px;
    font-weight: 400;
    color: #1e293b;
}

/* BUTTON */
.vnet-btn-danger {
    margin-top: 10px;
    display: inline-block;
    background: #fee2e2;
    color: #dc2626;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none !important;
}
/* ===============================
   TAB CARD (PREMIUM LOOK)
=============================== */
.vnet-tab-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
    transition: 0.2s;
}

.vnet-tab-card:hover {
    transform: translateY(-2px);
}

/* ===============================
   MODERN ROWS (UPGRADED)
=============================== */
.vnet-tab-card .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #eef2f7;
    transition: 0.2s;
}

.vnet-tab-card .row:last-child {
    border-bottom: none;
}

/* subtle hover */
.vnet-tab-card .row:hover {
    background: #f8fafc;
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
}

/* ===============================
   LABEL (LEFT)
=============================== */
.vnet-tab-card .col-sm-5 {
    text-align: left !important;
    color: #64748b;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* optional icon effect */
.vnet-tab-card .col-sm-5::before {
    content: "•";
    color: #03234D;
    font-size: 14px;
}

/* ===============================
   VALUE (RIGHT)
=============================== */
.vnet-tab-card .col-sm-7 {
    text-align: right !important;
    font-weight: 600;
    color: #0f172a;
    font-size: 14px;
}

/* ===============================
   SSL STATUS
=============================== */
.ssl-inactive {
    color: #dc2626;
    font-weight: 600;
}

/* ===============================
   STATUS LABEL
=============================== */
#statusDisplayLabel {
    margin-left: 6px;
    font-weight: 600;
    color: #16a34a;
}

/* ===============================
   BUTTON STYLE (UPGRADED)
=============================== */
.vnet-tab-card .btn-default {
    border: 1px solid #03234D;
    color: #03234D;
    border-radius: 10px;
    padding: 9px 16px;
    background: #fff;
    font-size: 13px;
    transition: 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* hover */
.vnet-tab-card .btn-default:hover {
    background: #03234D;
    color: #fff;
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.25);
}

/* spacing between buttons */
.vnet-tab-card p a {
    margin-right: 10px;
}

/* ===============================
   MOBILE FIX
=============================== */
@media (max-width: 768px) {
    .vnet-tab-card .row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .vnet-tab-card .col-sm-7 {
        text-align: left !important;
    }
}/* ===============================
   VNET NAV TABS (FOR YOUR HTML)
=============================== */


/* NAV ITEM RESET */
.nav-tabs.responsive-tabs-sm .nav-item {
    margin: 0;
}

/* TAB BUTTON */
.nav-tabs.responsive-tabs-sm .nav-link {
    border: none !important;
    background: #f1f5f9;
    color: #475569;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
    margin-bottom:10px;
}

/* ICON */
.nav-tabs.responsive-tabs-sm .nav-link i {
    font-size: 13px;
    opacity: 0.7;
}

/* HOVER */
.nav-tabs.responsive-tabs-sm .nav-link:hover {
    background: #e0edff;
    color: #03234D;
}

/* ACTIVE */
.nav-tabs.responsive-tabs-sm .nav-link.active {
    background: linear-gradient(135deg, #03234D, #1d4ed8);
    color: #fff;
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.25);
}

/* ACTIVE ICON */
.nav-tabs.responsive-tabs-sm .nav-link.active i {
    opacity: 1;
}

/* REMOVE BOOTSTRAP UNDERLINE */
.nav-tabs.responsive-tabs-sm .nav-link::after {
    display: none !important;
}



/* ===============================
   MOBILE
=============================== */
@media (max-width: 768px) {
    .nav-tabs.responsive-tabs-sm {
        gap: 6px;
    }

    .nav-tabs.responsive-tabs-sm .nav-link {
        padding: 6px 12px;
        font-size: 12px;
    }
}
/* ===============================
   DATATABLE INFO (FINAL VNET STYLE)
=============================== */

div.dataTables_wrapper div.dataTables_info {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: #f1f5f9;
    color: #1e293b;

    padding: 8px 16px;
    border-radius: 999px;

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

    border: 1px solid #e2e8f0;

    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: all 0.25s ease;
}

/* ICON (CHART STYLE LIKE IMAGE) */
div.dataTables_wrapper div.dataTables_info::before {
    content: "";
    width: 14px;
    height: 14px;

    background: linear-gradient(
        to top,
        #03234D 0%,
        #03234D 60%,
        transparent 60%
    ),
    linear-gradient(
        to top,
        #22c55e 0%,
        #22c55e 80%,
        transparent 80%
    ),
    linear-gradient(
        to top,
        #f59e0b 0%,
        #f59e0b 40%,
        transparent 40%
    );

    background-size: 3px 100%, 3px 100%, 3px 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 5px 0, 10px 0;

    border-radius: 2px;
}

/* HOVER EFFECT */
div.dataTables_wrapper div.dataTables_info:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #03234D;
    transform: translateY(-1px);
}

/* ALIGN WITH TABLE */
.dataTables_wrapper .dataTables_info {
    margin-bottom: 10px;
}
/* ===============================
   DATATABLE LENGTH (SHOW ENTRIES)
=============================== */

div.dataTables_wrapper div.dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 999px;

    font-size: 13px;
    color: #1e293b;
    font-weight: 500;

    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* SELECT BOX */
div.dataTables_wrapper div.dataTables_length select {
    border: none;
    background: #fff;

    padding: 4px 8px;
    border-radius: 999px;

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

    color: #03234D;
    cursor: pointer;

    outline: none;
}

/* HOVER EFFECT */
div.dataTables_wrapper div.dataTables_length label:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    transition: 0.2s;
}

/* SELECT HOVER */
div.dataTables_wrapper div.dataTables_length select:hover {
    background: #e0edff;
}
/* ===============================
   DATATABLE PAGINATION (VNET STYLE)
=============================== */

div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 10px;
}

/* UL WRAPPER */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: #f1f5f9;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* REMOVE DEFAULT STYLES */
div.dataTables_wrapper div.dataTables_paginate ul.pagination li {
    margin: 0;
}

/* BUTTON BASE */
div.dataTables_wrapper div.dataTables_paginate ul.pagination li a {
    border: none !important;
    background: transparent;
    color: #475569;

    padding: 6px 12px;
    border-radius: 999px;

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

    transition: all 0.25s ease;
}

/* HOVER */
div.dataTables_wrapper div.dataTables_paginate ul.pagination li a:hover {
    background: #e0edff;
    color: #03234D;
}

/* ACTIVE PAGE */
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.active a {
    background: linear-gradient(135deg, #03234D, #1d4ed8);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* DISABLED */
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.disabled a {
    opacity: 0.5;
    cursor: not-allowed;
}

/* PREV / NEXT STYLE */
div.dataTables_wrapper div.dataTables_paginate ul.pagination li:first-child a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li:last-child a {
    font-weight: 600;
}

/* MOBILE */
@media (max-width: 768px) {
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        gap: 4px;
        padding: 4px;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination li a {
        padding: 5px 10px;
        font-size: 12px;
    }
}
/* ===============================
   OVERVIEW CARD
=============================== */
.vnet-overview-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

/* TITLE */
.vnet-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align:center;
}

/* GRID */
.vnet-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* ITEM */
.vnet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    padding: 14px;
    border-radius: 12px;
    transition: 0.2s;
}

.vnet-item:hover {
    background: #eef2ff;
}

/* ICON */
.vnet-icon {
    width: 40px;
    height: 40px;
    background: #e0edff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #03234D;
    font-size: 16px;
}

/* TEXT */
.vnet-item span {
    font-size: 12px;
    color: #64748b;
}

.vnet-item strong {
    display: block;
    font-size: 14px;
    color: #1e293b;
}

/* STATUS COLORS */
.vnet-status-active {
    color: #16a34a;
}

.vnet-status-danger {
    color: #dc2626;
}

/* MOBILE */
@media (max-width: 768px) {
    .vnet-grid {
        grid-template-columns: 1fr;
    }
}/* ===============================
   ACTION WRAPPER
=============================== */
.vnet-actions-wrapper {
    margin-top: 20px;
}

/* TITLE */
.vnet-card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* ===============================
   GRID
=============================== */
.vnet-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* ===============================
   CARD (FIXED + CENTERED)
=============================== */
.vnet-action-card {
    display: flex;
    flex-direction: column;          /* stack vertically */
    align-items: center;             /* center horizontally */
    justify-content: center;         /* center vertically */
    text-align: center;

    padding: 18px;
    border-radius: 14px;
    text-decoration: none;

    background: #f8fafc;
    border: 1px solid #eef2f7;

    transition: all 0.25s ease;

    min-height: 120px;
}

/* ===============================
   ICON
=============================== */
.vnet-action-card i {
    font-size: 22px;
    margin-bottom: 6px;
}

/* ===============================
   TEXT
=============================== */
.vnet-action-card strong {
    font-size: 14px;
    color: #1e293b;
}

.vnet-action-card span {
    font-size: 12px;
    color: #64748b;
}

/* ===============================
   HOVER EFFECT
=============================== */
.vnet-action-card:hover {
    transform: translateY(-4px);
    background: #eef2ff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
    text-decoration:none;
}

/* ===============================
   COLOR VARIANTS (SOFT CARDS)
=============================== */
.vnet-action-card.blue {
    background: #e0edff;
    color: #03234D;
}

.vnet-action-card.green {
    background: #dcfce7;
    color: #16a34a;
}

.vnet-action-card.purple {
    background: #ede9fe;
    color: #7c3aed;
}

.vnet-action-card.orange {
    background: #fff7ed;
    color: #ea580c;
}

/* ICON COLOR MATCH */
.vnet-action-card.blue i { color: #03234D; }
.vnet-action-card.green i { color: #16a34a; }
.vnet-action-card.purple i { color: #7c3aed; }
.vnet-action-card.orange i { color: #ea580c; }

/* ===============================
   MOBILE
=============================== */
@media (max-width: 768px) {
    .vnet-actions-grid {
        grid-template-columns: 1fr;
    }
}
/* ===============================
   TABLE → CARD STYLE
=============================== */
.vnet-table-card {
    background: transparent;
    box-shadow: none;
}

/* REMOVE DEFAULT TABLE LOOK */
.vnet-card-table {
    border-collapse: separate !important;
    border-spacing: 0 14px !important;
}

/* HIDE HEADER (OPTIONAL CLEAN LOOK) */
.vnet-card-table thead {
    display: none;
}

/* EACH ROW = CARD */
.vnet-card-table tbody tr {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: 0.25s;
    cursor: pointer;
}

/* HOVER */
.vnet-card-table tbody tr:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

/* CELLS */
.vnet-card-table td {
    border: none !important;
    padding: 18px 16px !important;
    vertical-align: middle;
}

/* FIRST CELL ROUND */
.vnet-card-table tbody tr td:first-child {
    border-radius: 16px 0 0 16px;
}

/* LAST CELL ROUND */
.vnet-card-table tbody tr td:last-child {
    border-radius: 0 16px 16px 0;
}

/* ===============================
   ICON
=============================== */
.ticket-icon-box {
    width: 44px;
    height: 44px;
    background: #e0edff;
    color: #03234D;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* ===============================
   SUBJECT
=============================== */
.ticket-info strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

.ticket-meta {
    font-size: 12px;
    color: #64748b;
}

/* ===============================
   DEPARTMENT + DATE
=============================== */
.ticket-dept,
.ticket-date {
    font-size: 13px;
    color: #64748b;
}

/* ===============================
   STATUS BADGE
=============================== */
.status-badge {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* COLORS */
.status-active,
.status-open {
    background: #dcfce7;
    color: #16a34a;
}

.status-answered {
    background: #dbeafe;
    color: #03234D;
}

.status-customer-reply {
    background: #fff7ed;
    color: #ea580c;
}

.status-closed {
    background: #f1f5f9;
    color: #64748b;
}

/* ===============================
   HEADER
=============================== */
.vnet-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.vnet-list-header h2 {
    font-size: 22px;
    font-weight: 700;
}

/* BUTTON */
.vnet-order-btn {
    background: linear-gradient(135deg,#03234D,#03234D);
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s;
}

.vnet-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37,99,235,0.3);
}

/* ===============================
   MOBILE
=============================== */
@media (max-width: 768px) {

    .vnet-card-table tbody tr {
        display: block;
        padding: 10px;
    }

    .vnet-card-table td {
        display: block;
        padding: 8px 12px !important;
    }

}



.vnet-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.vnet-list-header h2 {
    font-size: 30px;
    font-weight: 800;
    color: #111827;
    margin: 0;
}

.vnet-list-header h2 i {
    color: #03234D;
    font-size: 16px;
    margin-left: 8px;
}

.vnet-order-btn {
    background: #03234D;
    color: #fff !important;
    padding: 13px 22px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none !important;
}

.vnet-table-card {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 14px 35px rgba(37,99,235,0.08);
}


/* Table */
.vnet-card-table {
    border-collapse: separate !important;
    border-spacing: 0 14px !important;
    width: 100% !important;
}

.vnet-card-table thead th {
	border: none !important;
	color: #0057ff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	padding: 14px 18px !important;
	background: transparent !important;
}

.vnet-card-table tbody tr {
    background: #fff;
    box-shadow: 0 8px 22px rgba(15,23,42,0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: 0.25s ease;
}

.vnet-card-table tbody tr:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(37,99,235,0.12);
}

.vnet-card-table tbody td {
    border: none !important;
    padding: 18px !important;
    vertical-align: middle !important;
    background: #fff;
}

.vnet-card-table tbody td:first-child {
    border-radius: 14px 0 0 14px;
}

.vnet-card-table tbody td:last-child {
    border-radius: 0 14px 14px 0;
}

/* Ticket icon */
.ticket-icon {
    width: 80px;
    text-align: center;
}

.ticket-icon-box {
    width: 42px;
    height: 42px;
    margin: auto;
    border-radius: 50%;
    background: #eff6ff;
    color: #03234D;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticket-info {
    text-align: center !important;
}

.ticket-info strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    text-align: center !important;
}

.ticket-meta {
    display: block;
    font-size: 13px;
    color: #64748b;
   
}

.ticket-dept,
.ticket-date {
    font-size: 14px;
    color: #111827;
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.status-open {
    background: #dcfce7;
    color: #16a34a;
}

.status-answered,
.status-customer-reply {
    background: #fff7ed;
    color: #f97316;
}

.status-closed {
    background: #f1f5f9;
    color: #64748b;
}

.status-in-progress {
    background: #eff6ff;
    color: #03234D;
}



/* Mobile */
@media (max-width: 768px) {
    .vnet-list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .vnet-table-card {
        padding: 16px;
        overflow-x: auto;
    }

    .vnet-table-card .dataTables_filter,
    .vnet-table-card .dataTables_length {
        float: none;
        width: 100%;
    }

    .vnet-table-card .dataTables_filter input {
        width: 100%;
    }

    .vnet-card-table {
        min-width: 760px;
    }
}
/* =========================
   MAIN CARD
========================= */
.view-ticket {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
}

/* =========================
   CHAT ROW
========================= */
.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
}

/* ADMIN RIGHT SIDE */
.chat-admin {
    flex-direction: row-reverse;
}

/* =========================
   AVATAR
========================= */
.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:#e0edff;
    color:#03234D;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

/* ADMIN AVATAR */
.chat-admin .chat-avatar {
    background:#03234D;
    color:#fff;
}

/* =========================
   CONTENT
========================= */
.chat-content {
    max-width: 70%;
}

/* =========================
   HEADER
========================= */
.posted-by {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    margin-bottom: 6px;
}

.posted-by-name {
    font-weight: 600;
    color: #1e293b;
}

.posted-on {
    color: #94a3b8;
}

/* BADGE */
.requestor-badge {
    margin-left: auto;
    background: #dcfce7;
    color: #16a34a;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
}

/* =========================
   MESSAGE BUBBLE
========================= */
.message {
    background: #ffffff;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
}

/* ADMIN MESSAGE */
.chat-admin .message {
    background: linear-gradient(135deg,#03234D,#03234D);
    color:#fff;
    border:none;
}

/* =========================
   ATTACHMENTS
========================= */
.attachment-list {
    padding:0;
}

.attachment-list li {
    list-style:none;
    margin-top:6px;
}

.attachment-list a {
    background:#eef2ff;
    padding:6px 10px;
    border-radius:8px;
    font-size:12px;
    color:#03234D;
}

/* =========================
   REPLY BOX FIX
========================= */
#ticketReplyContainer .card-body {
    border-radius: 16px;
    background: #fff;
    padding:20px;
    box-shadow:0 8px 25px rgba(0,0,0,0.05);
}

/* INPUT */
#ticketReplyContainer input,
#ticketReplyContainer textarea {
    border-radius:10px;
}

/* BUTTON */
#ticketReplyContainer .btn-primary {
    background:linear-gradient(135deg,#03234D,#03234D);
    border:none;
    border-radius:10px;
}
/* =========================
   ONLY REPLY BUTTON
========================= */
#ticketReply {
    background: #03234D;
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

#ticketReply:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
}

#ticketReply:active {
    transform: scale(0.97);
}
.sorting {
	width: 15% !important;
}
.sorting_desc {
	width: 25% !important;
}
#ticketReply {
	padding: 10px 30px !important;
	border-radius: 10px !important;
	border: 2px solid #386ef4 !important;
}
.form-group.text-center .btn.btn-default {
	margin-top: 20px !important;
	width: 100% !important;
	border: 2px solid #e3e3e3 !important;
	padding: 11px !important;
	border-radius: 10px !important;
}
.primary-bg-color.page-viewticket div.sidebar:nth-child(1) > div:nth-child(1) {
	display: none !important;
}
.primary-bg-color.page-viewticket #sidebarTicketCc {
	display: none !important;
}
#ticketReplyContainer {
	border-radius: 10px !important;
	padding: 11px !important;
	border: none !important;
}
.primary-bg-color.page-clientareadetails .col-lg-8.col-xl-9.primary-content {
	background: white !important;
	padding: 10px !important;
	 box-shadow: 0 14px 35px rgba(37,99,235,0.06);
	border-radius: 10px !important;
}

.primary-bg-color.page-clientareadetails .card {
	border: none !important;
	margin-bottom: 0px !important;
}
.page-clientareadetails input.field,
.page-clientareadetails .form-control,
.page-clientareadetails select {
    width: 100% !important;
    height: 50px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    font-size: 14px !important;
    color: #111827 !important;
    transition: all 0.25s ease !important;
}

/* PLACEHOLDER */
.page-clientareadetails input::placeholder {
    color: #9ca3af !important;
}

/* INPUT FOCUS */
.page-clientareadetails input:focus,
.page-clientareadetails select:focus {
    border-color: #326BF1 !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important;
    outline: none !important;
}
.page-clientareadetails .card-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 20px !important;
}
.page-account-user-management .col-lg-8.col-xl-9.primary-content {
	background: white !important;
	padding: 10px !important;
	 box-shadow: 0 14px 35px rgba(37,99,235,0.06);
	border-radius: 10px !important;
}
.page-account-user-management .card {
	border: none !important;
	margin-bottom: 0px !important;
}
.page-account-user-management .card-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 20px !important;
}
.page-account-contacts-new .col-lg-8.col-xl-9.primary-content {
	background: white !important;
	padding: 10px !important;
	 box-shadow: 0 14px 35px rgba(37,99,235,0.06);
	border-radius: 10px !important;
}
.page-account-contacts-new .card {
	border: none !important;
	margin-bottom: 0px !important;
}
.page-account-contacts-new .card-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 20px !important;
}
.primary-bg-color.page-account-contacts-new input:focus,
.primary-bg-color.page-account-contacts-new select:focus {
    border-color: #326BF1 !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important;
    outline: none !important;
}
.page-account-contacts-new input.field,
.page-account-contacts-new .form-control,
.page-account-contacts-new select {
    width: 100% !important;
    height: 50px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    font-size: 14px !important;
    color: #111827 !important;
    transition: all 0.25s ease !important;
}
.page-clientareaemails .btn.btn-info.btn-sm.text-nowrap {
	background: #4375f9 !important;
	border-radius: 10px !important;
	padding: 10px 15px !important;
	border: 1px solid #4576fa;
}
.page-clientareaemails .sorting {
	width: 35% !important;
}
.dataTables_wrapper table.table-list thead th.sorting_asc, .dataTables_wrapper table.table-list thead th.sorting_desc {
	background-color: #fff !important;
	border: none !important;
}
.table td, .table th {
	border-top: none !important;
}
.dataTables_wrapper table.table-list thead th {
	border-bottom: none !important;
font-size: 13px !important;
  font-weight: 600 !important;
  color: #03234D !important;
  border: none !important;
  padding: 6px 9px !important;
  background: transparent !important;
  text-align: center;
}
tbody tr {
	background: #ffffff !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}
 .vnet-panel-card .form-control {
	margin: 0px 11px 0px 0px;
	border-radius: 10px !important;
}
 .vnet-panel-card .btn.btn-success {
	margin-right: 5px !important;
}
.page-products .cart-sidebar.sidebar {
	display: none !important;
}
body.primary-bg-color.page-clientregister .sidebar {
    display: none !important;
}
body.primary-bg-color.page-clientregister .col-xl-9 {
    flex: 0 0 100%;
    max-width: 100%;
}
/* =============================
   GLOBAL WRAPPER
============================= */
.page-viewcart .modern-cart-wrapper {
    background: #f5f7fb !important;
    padding: 30px 0 !important;
    font-family: 'Inter', sans-serif !important;
}

/* =============================
   HEADER
============================= */
.page-viewcart .modern-header h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 25px !important;
}

/* =============================
   LAYOUT
============================= */
.page-viewcart .cart-page-layout {
	display: flex !important;
	gap: 25px !important;
	align-items: flex-start !important;
	width: 100% !important;
}

.page-viewcart .cart-main-content {
    flex: 1 !important;
}

.page-viewcart .secondary-cart-sidebar {
    width: 360px !important;
}

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


/* =============================
   CART ITEM
============================= */
.page-viewcart .item {
    background: #fff !important;
    border-radius: 10px !important;
    padding: 18px !important;
    margin-bottom: 15px !important;
    border: 1px solid #eef1f6 !important;
    transition: 0.3s !important;
}

.page-viewcart .item:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.05) !important;
}

/* =============================
   ITEM HEADER
============================= */
.page-viewcart .item-header {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
}

/* ICON */
.page-viewcart .item-icon {
    width: 45px !important;
    height: 45px !important;
    background: #eef2ff !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #03234D !important;
    font-size: 18px !important;
}

/* TEXT */
.page-viewcart .item-title {
    font-weight: 600 !important;
    color: #111827 !important;
    font-size: 13px !important;
}

.page-viewcart .item-group {
    display:none!important;
    font-size: 11px !important;
    color: #6b7280 !important;
}

.page-viewcart .item-domain {
    
    font-size: 14px !important;
    color: #03234D !important;
    font-weight: 600;
}

/* =============================
   PRICE
============================= */
.page-viewcart .item-price {
    text-align: right !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.page-viewcart .item-price .cycle {
    display: block !important;
    font-size: 12px !important;
    color: #6b7280 !important;
}

/* =============================
   BUTTONS
============================= */
.page-viewcart .edit-btn {
    font-size: 12px !important;
    color: #03234D !important;
    margin-left: 10px !important;
    text-decoration: none !important;
}

.page-viewcart .btn-remove-from-cart {
    color: #ef4444 !important;
    font-size: 12px !important;
}

/* =============================
   CONFIGURATION
============================= */
.page-viewcart .config-toggle-btn {
    background: #f9fafb !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    margin-top: 10px !important;
}

.page-viewcart .config-grid {
    margin-top: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.page-viewcart .config-badge {
    background: #ffffff !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
}

/* =============================
   SIDEBAR SUMMARY
============================= */
.page-viewcart .summary-header {
	margin-bottom: 20px !important;
	color: white !important;
}
.page-viewcart .summary-header h2{
	color: white !important;
}
.page-viewcart .summary-header p{
	color: white !important;
}
.page-viewcart .summary-header span{
	color: white !important;
}
.page-viewcart .selected-label {
    font-size: 11px !important;
    color: #6b7280 !important;
}

.page-viewcart .plan-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.page-viewcart .plan-subtitle {
    font-size: 12px !important;
    color: #6b7280 !important;
}

/* =============================
   SUMMARY LIST
============================= */
.page-viewcart .breakdown-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-viewcart .product-title-row{
     display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    font-size: 12px !important;
}

.page-viewcart .row-item {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    font-size: 12px !important;
}

.page-viewcart .product-name {
    font-weight: 600 !important;
}

.page-viewcart .product-price {
    font-weight: 600 !important;
}

/* =============================
   TOTAL SECTION
============================= */
.page-viewcart .summary-total {
    border-top: 1px solid #eee !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
}

.page-viewcart .total-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: 10px !important;
}

.page-viewcart .total-price {
    color: #03234D !important;
}

/* =============================
   BUTTONS
============================= */
.page-viewcart .btn-checkout {
    display: block !important;
    width: 100% !important;
    background: #03234D;
    color: #fff !important;
    padding: 12px !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    margin-top: 15px !important;
    text-decoration: none !important;
}

.page-viewcart .btn-checkout:hover {
    background: #03234D !important;
}

.page-viewcart .continue-shopping {
    display: block !important;
    text-align: center !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    color: #6b7280 !important;
}

/* =============================
   ALERTS
============================= */
.page-viewcart .alert {
    border-radius: 8px !important;
    font-size: 14px !important;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 991px) {
    .page-viewcart .cart-page-layout {
        flex-direction: column !important;
    }

    .page-viewcart .secondary-cart-sidebar {
        width: 100% !important;
    }
}
.page-viewcart #order-standard_cart .secondary-cart-body {
	float: left;
	width: 100% !important;
	
}
.page-viewcart #order-standard_cart .cart-body {
	float: right;
	width: 100% !important;
	position: relative;

}
/* =========================
   WRAPPER
========================= */
.vnet-announcement-wrapper {
    padding: 10px;
}

/* HEADER */
.vnet-page-header h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}

.vnet-blue-icon {
    color: #03234D;
    margin-left: 6px;
}

/* =========================
   GRID
========================= */
.vnet-announcement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* =========================
   CARD
========================= */
.vnet-announcement-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    border: 1px solid #eef2f7;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: 0.25s;
    position: relative;
}

.vnet-announcement-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* =========================
   HEADER
========================= */
.vnet-announcement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vnet-announcement-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.vnet-announcement-header a {
    color: #1e293b;
    text-decoration: none;
}

.vnet-announcement-header a:hover {
    color: #03234D;
}

/* EDIT BUTTON */
.vnet-edit-btn {
    font-size: 13px;
    color: #64748b;
}

/* =========================
   META
========================= */
.vnet-announcement-meta {
    font-size: 12px;
    color: #64748b;
    margin-top: 8px;
}

/* =========================
   CONTENT
========================= */
.vnet-announcement-content {
    margin-top: 12px;
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

/* =========================
   FOOTER
========================= */
.vnet-announcement-footer {
    margin-top: 14px;
}

/* BUTTON */
.vnet-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #03234D;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    transition: 0.25s;
}

.vnet-read-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37,99,235,0.3);
    color:#fff;
    text-decoration:none;
}

/* =========================
   EMPTY
========================= */
.vnet-empty-state {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    color: #64748b;
}
/* =========================
   WRAPPER
========================= */
.vnet-announcement-view {
    max-width: 900px;
    margin: auto;
}

/* =========================
   CARD
========================= */
.vnet-announce-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px;
    border: 1px solid #eef2f7;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
}

/* =========================
   HEADER
========================= */
.vnet-announce-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 15px;
}

/* TITLE */
.vnet-announce-title h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* META */
.vnet-meta {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #64748b;
}

.vnet-meta i {
    margin-right: 4px;
}

/* =========================
   CONTENT
========================= */
.vnet-announce-content {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.8;
    color: #334155;
}

/* =========================
   SOCIAL
========================= */
.vnet-social-box {
    margin-top: 20px;
}

/* =========================
   COMMENTS
========================= */
.vnet-announce-comments {
    margin-top: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #eef2f7;
}

/* =========================
   BUTTONS
========================= */
.vnet-announce-actions {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

/* BUTTON STYLE */
.vnet-btn-outline {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #03234D;
    color: #03234D;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s;
}

.vnet-btn-outline:hover {
    background: linear-gradient(135deg,#03234D,#03234D);
    color: #fff;
    box-shadow: 0 10px 25px rgba(37,99,235,0.3);
    text-decoration:none;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {
    .vnet-announce-header {
        flex-direction: column;
    }

    .vnet-announce-actions {
        flex-direction: column;
        gap: 10px;
    }
}
/* =========================
   SEARCH
========================= */
.vnet-kb-search-wrapper {
    margin-bottom: 25px;
}

.vnet-kb-search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 14px;
    padding: 10px 14px;
    border: 1px solid #eef2f7;
    box-shadow: 0 8px 25px rgba(0,0,0,0.04);
}

.vnet-kb-search i {
    color: #94a3b8;
    margin-right: 10px;
}

.vnet-kb-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
}

.vnet-kb-search button {
    background: linear-gradient(135deg,#03234D,#03234D);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.25s;
}

.vnet-kb-search button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37,99,235,0.3);
}

/* =========================
   CATEGORY GRID
========================= */
.vnet-kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* CARD */
.vnet-kb-card {
    background: #fff;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid #eef2f7;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: 0.25s;
    position: relative;
     text-decoration:none;
}


/* TOP */
.vnet-kb-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ICON */
.vnet-kb-icon {
    width: 42px;
    height: 42px;
    background: #e0edff;
    color: #03234D;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* COUNT BADGE */
.vnet-kb-count {
    background: #03234D;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
}

/* TITLE */
.vnet-kb-card h3 {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

/* DESC */
.vnet-kb-card p {
    font-size: 13px;
    color: #64748b;
}

/* EDIT */
.vnet-edit-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #94a3b8;
}

/* =========================
   POPULAR SECTION
========================= */
.vnet-kb-popular {
    margin-top: 30px;
}

.vnet-kb-popular h3 {
    font-size: 18px;
    margin-bottom: 15px;
}

/* LIST */
.vnet-kb-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ITEM */
.vnet-kb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #eef2f7;
    text-decoration: none;
    transition: 0.25s;
}

.vnet-kb-item:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-decoration:none;
}

/* ICON */
.vnet-kb-item-icon {
    width: 38px;
    height: 38px;
    background: #eef2ff;
    color: #03234D;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CONTENT */
.vnet-kb-item-content strong {
    display: block;
    font-size: 14px;
    color: #1e293b;
}

.vnet-kb-item-content span {
    font-size: 12px;
    color: #64748b;
}

/* ARROW */
.vnet-arrow {
    margin-left: auto;
    color: #cbd5f5;
}

/* =========================
   EMPTY
========================= */
.vnet-empty {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    color: #64748b;
}
/* =========================
   WRAPPER
========================= */
.vnet-kb-article {
    max-width: 900px;
    margin: auto;
}

/* =========================
   CARD
========================= */
.vnet-kb-article-card {
    background: #fff;
    border-radius: 18px;
    padding: 25px;
    border: 1px solid #eef2f7;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

/* =========================
   HEADER
========================= */
.vnet-kb-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

/* TITLE */
.vnet-kb-header h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* META */
.vnet-kb-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #64748b;
}

/* TAG */
.vnet-tag {
    background: #eef2ff;
    color: #03234D;
    padding: 3px 10px;
    border-radius: 999px;
}

/* =========================
   CONTENT
========================= */
.vnet-kb-content {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.8;
    color: #334155;
}

/* =========================
   VOTE
========================= */
.vnet-kb-vote {
    margin-top: 25px;
    border-top: 1px solid #eef2f7;
    padding-top: 20px;
}

/* BUTTON GROUP */
.vnet-vote-buttons {
    display: flex;
    gap: 10px;
}

/* SUCCESS */
.vnet-btn-success {
    background: #dcfce7;
    color: #16a34a;
    border-radius: 10px;
    padding: 8px 16px;
    border: none;
    font-weight: 600;
}

/* DANGER */
.vnet-btn-danger {
    background: #fee2e2;
    color: #dc2626;
    border-radius: 10px;
    padding: 8px 16px;
    border: none;
    font-weight: 600;
}

/* =========================
   RELATED
========================= */
.vnet-kb-related {
    margin-top: 30px;
}

.vnet-kb-related h3 {
    margin-bottom: 15px;
}

/* LIST */
.vnet-kb-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ITEM */
.vnet-kb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #eef2f7;
    text-decoration: none;
    transition: 0.25s;
}

.vnet-kb-item:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* ICON */
.vnet-kb-item-icon {
    width: 38px;
    height: 38px;
    background: #eef2ff;
    color: #03234D;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CONTENT */
.vnet-kb-item-content strong {
    display: block;
    font-size: 14px;
    color: #1e293b;
}

.vnet-kb-item-content span {
    font-size: 12px;
    color: #64748b;
}

/* ARROW */
.vnet-arrow {
    margin-left: auto;
    color: #cbd5f5;
}

/* =========================
   BUTTONS
========================= */
.vnet-kb-actions {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.vnet-btn-outline {
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #03234D;
    color: #03234D;
    text-decoration: none;
    font-weight: 600;
}

.vnet-btn-outline:hover {
    background: #03234D;
    color: #fff;
}

/* =========================
   ALERT
========================= */
.vnet-alert-success {
    background: #dcfce7;
    color: #16a34a;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: center;
}
/* =========================
   ARTICLES SECTION
========================= */
.vnet-kb-articles {
    margin-top: 30px;
}

.vnet-kb-articles h3 {
    margin-bottom: 15px;
    font-size: 18px;
}

/* =========================
   LIST ITEMS
========================= */
.vnet-kb-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vnet-kb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #eef2f7;
    text-decoration: none;
    transition: 0.25s;
}

.vnet-kb-item:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* ICON */
.vnet-kb-item-icon {
    width: 38px;
    height: 38px;
    background: #eef2ff;
    color: #03234D;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CONTENT */
.vnet-kb-item-content strong {
    display: block;
    font-size: 14px;
    color: #1e293b;
}

.vnet-kb-item-content span {
    font-size: 12px;
    color: #64748b;
}

/* ARROW */
.vnet-arrow {
    margin-left: auto;
    color: #cbd5f5;
}

/* =========================
   ACTION BUTTONS
========================= */
.vnet-kb-actions {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}

/* =========================
   EMPTY
========================= */
.vnet-empty {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    color: #64748b;
}
/* ===============================
   PAGE WRAPPER
=============================== */
#order-standard_cart {
   
    padding: 30px 15px !important;
}
#order-standard_cart .cart-sidebar {
    display:none;
}
#order-standard_cart .cart-body {
    width:100%!important;
}
/* ===============================
   TITLE
=============================== */
.header-lined {
   
    margin-bottom: 25px !important;
}

.header-lined h1 {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* ===============================
   DOMAIN SEARCH BOX (MAIN HERO)
=============================== */
.domain-checker-bg {
	background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
	border-radius: 10px !important;
	padding: 40px 30px !important;
	box-shadow: 0 15px 40px rgba(0,0,0,0.06) !important;
	position: relative !important;
	overflow: hidden !important;
}
.page-domainregister .col-md-8 {
	flex: 0 0 99.667% !important;
	max-width: 99.667% !important;
}
.domain-checker-container.domain-checker-advanced #btnCheckAvailability {
	position: absolute;
	right: 21px !important;
	top: 62px !important;
}
.page-domainregister #btnCheckAvailability {
	width: fit-content !important;
}
.page-domainregister .price-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
}
.page-domainregister .price-grid div {
	margin-right: 38px !important;
}
.page-domainregister .row.promo-modern-wrapper {
	width: 100% !important;
	padding: 0px 0px 0px 18px !important;
}
.page-domainregister .fas.fa-server.promo-icon {
	margin-top: -17px !important;
}
.domain-promo-box p {
	margin: 0 0 10px 0;
	font-size: 14px !important;
	font-weight: 500 !important;
}
.page-domainregister #order-standard_cart .modern-card, .page-domainregister #order-standard_cart .view-cart-items {
	background: white !important;
	padding: 18px !important;
	border-radius: 10px !important;
	border: none !important;
}
.page-domainregister .btn.modern-btn.btn-primary {
	width: fit-content !important;
	padding: 12px !important;
	padding-bottom: 12px !important;
	height: auto !important;
}
.page-domainregister .promo-note {
	margin-top: 10px !important;
	color: red !important;
}
.btn.modern-btn.btn-warning {
	background: #e3ebfa !important;
	color: #325ae9 !important;
}
.page-domainregister .offset-md-2 {
	margin-left: 0px !important;
}
/* REMOVE YELLOW IMAGE EFFECT */
.domain-checker-bg::after {
    content: "" !important;
    position: absolute !important;
    right: -80px !important;
    bottom: -80px !important;
    width: 260px !important;
    height: 260px !important;
    background: radial-gradient(circle, rgba(37,99,235,0.12), transparent) !important;
    border-radius: 50% !important;
}

/* CENTER SEARCH */
#frmDomainChecker {
    max-width: 700px !important;
    margin: auto !important;
}

/* INPUT */
.input-group-box input,
.input-group-box textarea {
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 14px !important;
    font-size: 15px !important;
    transition: 0.2s !important;
}

.input-group-box input:focus,
.input-group-box textarea:focus {
    border-color: #03234D !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
}

/* BUTTON */
.domain-check-availability {
    margin-top: 10px !important;
    width: 100% !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg,#03234D,#03234D) !important;
    border: none !important;
    padding: 14px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: 0.3s !important;
}

.domain-check-availability:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px rgba(37,99,235,0.3) !important;
}

/* ===============================
   FILTER OPTIONS
=============================== */
.domain-checker-bg label {
    font-size: 13px !important;
    color: #64748b !important;
}

/* ===============================
   TLD SECTION TITLE
=============================== */
.tld-filters {
    text-align: center !important;
    margin: 20px 0 !important;
}

.tld-filters a {
    border-radius: 999px !important;
    padding: 6px 14px !important;
    background: #eef2ff !important;
    color: #03234D !important;
    font-weight: 500 !important;
    margin: 4px !important;
}

.tld-filters a:hover,
.tld-filters a.active {
    background: #03234D !important;
    color: #fff !important;
}

/* ===============================
   TLD CARDS
=============================== */
.tld-card {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    margin-bottom: 14px !important;

    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    box-shadow: 0 8px 25px rgba(0,0,0,0.05) !important;
    transition: 0.25s !important;
}

.tld-card:hover {
    transform: translateY(-3px) !important;
}

/* LEFT SIDE */
.tld-left {
    display: flex !important;
    flex-direction: column !important;
}

.tld-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* RIGHT SIDE GRID */
.price-box {
    display: flex !important;
    gap: 30px !important;
}

.price-item {
    text-align: center !important;
}

/* PRICE */
.price {
    font-weight: 700 !important;
    color: #1e293b !important;
}

.duration {
    font-size: 12px !important;
    color: #64748b !important;
}

/* ===============================
   HEADER ROW FIX
=============================== */
.tld-header {
    display: flex !important;
    justify-content: space-between !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

/* ===============================
   PROMO CARDS
=============================== */
.modern-card {
    background: #fff !important;
    border-radius: 18px !important;
    padding: 22px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    transition: 0.25s !important;
}

.modern-card:hover {
    transform: translateY(-4px) !important;
}

/* HEADER */
.promo-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.promo-icon {
    font-size: 22px !important;
    color: #03234D !important;
}

/* TITLE */
.promo-title {
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* BUTTON */
.modern-btn {
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    margin-top: 10px !important;
}

/* HOSTING BUTTON */
.btn-warning {
    background: linear-gradient(135deg,#f59e0b,#f97316) !important;
    border: none !important;
    color: #fff !important;
}

/* TRANSFER BUTTON */
.btn-primary {
    background: linear-gradient(135deg,#03234D,#03234D) !important;
    border: none !important;
}
#order-standard_cart .default-captcha-register-margin {
    margin: 18px auto -25px auto;
    margin-bottom: 4px !important;
}
.page-domainregister .fas.fa-globe.promo-icon {
	margin-top: -17px !important;
}
/* ===============================
   MOBILE FIX
=============================== */
@media (max-width: 768px) {
.page-domainregister .price-grid div {
    margin-right: 3px !important;
    margin-left: 5px !important;
}
.page-homepage .primary-content .col-6 {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}
.page-domainregister .sidebar-collapsed {
	display: none !important;
}
.price-box {
    display: flex !important;
    gap: 30px !important;
    flex-direction: column !important;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
#order-standard_cart .domain-checker-advanced textarea {
	width: 100%;
	height: 350px !important;
	resize: none;
}
.domain-checker-container.domain-checker-advanced #btnCheckAvailability {
	position: absolute;
	right: 21px !important;
	top: 290px !important;
}
    .tld-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .price-box {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .domain-checker-bg {
        padding: 25px !important;
    }
}
/* MAIN CARD */
.vnet-transfer-card {
    max-width: 650px;
    margin: auto !important;
    background: linear-gradient(145deg,#ffffff,#f8fafc) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06) !important;
}

/* HEADER */
.vnet-transfer-header {
    text-align: center !important;
    margin-bottom: 25px !important;
}

.vnet-transfer-header h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.vnet-transfer-header p {
    font-size: 13px !important;
    color: #64748b !important;
}

/* INPUT GROUP */
.vnet-input-group {
    margin-bottom: 18px !important;
}

.vnet-input-group label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    display: block !important;
    margin-bottom: 6px !important;
}

/* INPUT WITH ICON */
.vnet-input-icon {
    position: relative !important;
}

.vnet-input-icon i {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
}

.vnet-input-icon input {
    width: 100% !important;
    padding: 12px 14px 12px 42px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    transition: 0.2s !important;
}

.vnet-input-icon input:focus {
    border-color: #03234D !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
}

/* ALERT */
.vnet-alert {
    background: #fff7ed !important;
    color: #ea580c !important;
    padding: 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

/* FOOTER */
.vnet-transfer-footer {
    margin-top: 20px !important;
    text-align: center !important;
}

/* BUTTON */
.vnet-transfer-btn {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 12px !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;

    background: linear-gradient(135deg,#03234D,#03234D) !important;
    color: #fff !important;

    transition: 0.3s !important;
}

.vnet-transfer-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px rgba(37,99,235,0.3) !important;
}

/* HELP ICON */
.vnet-help {
    float: right !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
}

/* MOBILE */
@media (max-width: 768px) {
    .vnet-transfer-card {
        padding: 20px !important;
    }
}
/* ==========================================
   PAGE TITLE (Review & Checkout)
========================================== */
/* ==========================================
   GRADIENT HEADING TEXT
========================================== */
#order-standard_cart h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 18px;

    background:#03234D;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.modern-header {
    margin-bottom: 20px;
}

.modern-header h1 {
    margin-left: 20px;
    color: #2D6EEF !important;
    font-size: 30px; /* slightly refined */
}
.view-cart-items.modern-card .row > div:first-child {
    color:  linear-gradient(135deg, #02162F 0%, #03234D 50%, #0A4B9C 100%) !important;
}

/* ==========================================
   HEADER ROW (Product + Price)
========================================== */
.view-cart-items.modern-card .row > div {
    font-weight: 600;
    color:#03234D;
    letter-spacing: 0.3px;
}
.view-cart-items .item:first-child {
    border-radius: 12px 12px 0 0;
}
/* RIGHT SIDE ALIGNMENT (Price/Cycle) */
.view-cart-items.modern-card .row > div.text-right {
    text-align: right;
}
/* ==========================================
   SECTION HEADER (Product/Options)
========================================== */
.view-cart-items.modern-card {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================
   PRODUCT TITLE
========================================== */
.item-title {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    max-width:100%;
}

/* PRODUCT SUBTITLE (group) */
.item-group {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}

/* DOMAIN TEXT */
.item-domain {
    font-size: 13px;
    color: #03234D;
    font-weight: 500;
}

/* ==========================================
   CONFIG TOGGLE TEXT
========================================== */
.config-toggle-btn {
    font-size: 13px;
    font-weight: 500;
    color: #03234D;
   
}

.config-toggle-btn:hover {
    color: #1d4ed8;
}

/* ==========================================
   ITEM SPACING IMPROVEMENT
========================================== */
.view-cart-items .item {
    padding: 18px 16px;
}

/* ==========================================
   CARD HOVER (SUBTLE PREMIUM FEEL)
========================================== */
.view-cart-items .item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(54,122,243,0.12);
    transition: all 0.25s ease;
}

/* ==========================================
   EDIT BUTTON IMPROVEMENT
========================================== */
.edit-btn {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-decoration: none !important;
}

/* ==========================================
   EMPTY CART BUTTON POLISH
========================================== */
#order-standard_cart .empty-cart .btn {
    font-weight: 500;
    letter-spacing: 0.2px;
}
/* ==========================================
   EMPTY CART BUTTON - PREMIUM STYLE
========================================== */
#order-standard_cart .empty-cart .btn {
    margin: 0 !important;
    padding: 8px 16px !important;

    background:#03234D  !important;
    color: #fff !important;

    border: none !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    box-shadow: 0 6px 18px rgba(54,122,243,0.25) !important;
    margin-top:10px !important;
    margin-bottom:10px !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

/* HOVER */
#order-standard_cart .empty-cart .btn:hover {
    background: linear-gradient(135deg, #2f6ee0, #4c7cff) !important;

    transform: translateY(-2px) scale(1.02) !important;

    box-shadow: 0 10px 25px rgba(54,122,243,0.35) !important;
}

/* ACTIVE (CLICK) */
#order-standard_cart .empty-cart .btn:active {
    transform: scale(0.98) !important;
    box-shadow: 0 4px 10px rgba(54,122,243,0.2) !important;
}
/* ==========================================
   GENERAL TEXT SMOOTHING
========================================== */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* ==========================================
   FIX: CONFIG GRID FULL WIDTH + RESET
========================================== */
.config-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px!important;
}
/* SINGLE CARD WRAPPER */
.config-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;

    overflow: hidden; /* 🔥 important for clean edges */
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
/* CONFIG ROW - CLEAN LIST INSIDE CARD */
.config-badge {
    width: 100%;
    box-sizing: border-box;

    background: transparent;   /* 🔥 no inner card */
    border: none;              /* 🔥 remove border */
    border-radius: 0;

    padding: 10px 14px;

    display: flex;
    align-items: center;

    gap: 12px;

    transition: background 0.2s ease;
}

/* HOVER (soft only) */
.config-badge:hover {
    background: #f8fafc;
}

/* ICON */
.config-badge::before {
    content: "";
    width: 32px;
    height: 32px;
    border-radius: 8px;

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(54,122,243,0.08);
    color: #03234D;

    flex-shrink: 0;
}

/* ==========================================
   FIX: REMOVE OLD FLEX CONFLICTS
========================================== */
.config-name {
    display: block !important; /* remove flex issues */
}

.config-value {
    white-space: nowrap; /* prevent breaking */
}




/* ==========================================
   FIX: PRICE ALIGNMENT
========================================== */
.item-price {
    min-width: 160px;
    text-align: right;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* MAIN PRICE */
.item-price span:first-child {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

/* CYCLE */
.item-price .cycle {
    margin-top: 2px;
    font-size: 12px;
    color: #94a3b8;
}

/* ==========================================
   FIX: TITLE ALIGNMENT
========================================== */
.item-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================
   FIX: TEXT OVERFLOW (VERY IMPORTANT)
========================================== */
.config-value {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================
   OPTIONAL: BETTER VISUAL BALANCE
========================================== */
.secondary-cart-body.modern-left {
    padding-bottom: 20px;
}

/* ==========================================
   FORCE FULL WIDTH CONFIG LIST
========================================== */

/* ==========================================
   CONFIG LIST - FINAL POLISHED UI
========================================== */

/* CONTAINER */
.config-grid {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    gap: 0px !important; 
}

/* ROW */
.config-badge {
    display: flex;
    align-items: center;

    padding: 10px 14px; /* 🔥 reduced height */

    border-bottom: 1px solid #eef2f7;
    background: transparent;

    gap: 14px; /* space between icon + text */

    transition: background 0.2s ease;
}

/* HOVER */
.config-badge:hover {
    background: #f8fafc;
}

/* REMOVE LAST BORDER */
.config-badge:last-child {
    border-bottom: none;
}

/* ==========================================
   ICON (FIX SPACING + SIZE)
========================================== */
.config-badge::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;

    width: 30px;
    height: 30px;

    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(54,122,243,0.08);
    color: #03234D;

    margin-right: 12px; /* 🔥 extra gap from text */

    flex-shrink: 0;
}

/* ==========================================
   NAME
========================================== */
.config-name {
    min-width: 160px;

    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

/* ==========================================
   VALUE
========================================== */
.config-value {
    flex: 1;

    font-size: 13px;
    font-weight: 500;
    color: #0f172a;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================
   FORCE FULL WIDTH
========================================== */
.view-cart-items .item .row > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
/* REGION */
.config-badge.region::before{
    content:"\f0ac" !important; /* globe */
}

/* DDOS */
.config-badge.ddos::before{
    content:"\f3ed" !important; /* shield-alt */
}

/* BACKUP */
.config-badge.backup::before{
    content:"\f1c0" !important; /* database */
}

/* CODEGUARD */
.config-badge.codeguard::before{
    content:"\f023" !important; /* lock */
}
/* SUBTOTAL ROW */
.page-viewcart .subtotal-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

  

    font-size:15px !important;
    font-weight:600 !important;

    color:#475569 !important;

    gap:16px !important;
}

/* LABEL */
.page-viewcart .subtotal-row span:first-child{
    color:#64748B !important;
    font-weight:600 !important;
}

/* PRICE */
.page-viewcart .subtotal-row span:last-child{
    color:#0F172A !important;
    font-size:13px !important;
    font-weight:700 !important;

    letter-spacing:-0.02em !important;
}
/* TAX ROW */
.page-viewcart .tax-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

   

    font-size:15px !important;
    font-weight:600 !important;

    color:#03234D !important;

    gap:16px !important;
}

/* LABEL */
.page-viewcart .tax-row span:first-child{
    color:#64748B !important;
    font-weight:700 !important;
}

/* PRICE */
.page-viewcart .tax-row span:last-child{
    color:#212529  !important;

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

    letter-spacing:-0.02em !important;
}
/* COMMON ICON STYLE */
.config-badge::before{
    font-family:"Font Awesome 5 Free" !important;
    font-weight:900 !important;

    display:none !important;
    align-items:center !important;
    justify-content:center !important;

    width:34px !important;
    height:34px !important;

    border-radius:12px !important;

    background:#EEF4FF !important;
    color:#2563ff !important;

    font-size:13px !important;

    margin-right:14px !important;

    flex-shrink:0 !important;
}
/* ==========================================
   ICONS (KEEP SAME)
========================================== */
.config-badge:nth-child(1)::before { content: "\f0ac"; }
.config-badge:nth-child(2)::before { content: "\f108"; }
.config-badge:nth-child(3)::before { content: "\f023"; }
.config-badge:nth-child(4)::before { content: "\f00a"; }
.config-badge:nth-child(5)::before { content: "\f6ff"; }
.config-badge:nth-child(6)::before { content: "\f0c2"; }
.config-badge:nth-child(7)::before { content: "\f085"; }
.config-badge:nth-child(8)::before { content: "\f0c7"; }

/* ==========================================
   CONFIG TOGGLE BUTTON
========================================== */
.config-toggle {
    margin-top: 10px;
}

/* ==========================================
   CONFIG TOGGLE BUTTON (MODERN PILL)
========================================== */
.config-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;

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

    color: #03234D;

    /* FIXED BORDER + BG */
    border: 1px solid rgba(54,122,243,0.25) !important;
    background: rgba(54,122,243,0.08);

    border-radius: 999px;

    /* SPACING FIX */
    padding: 6px 12px;

    cursor: pointer;

    transition: all 0.2s ease;
}
.config-toggle-btn.active {
    background: #03234D;
    color: #03234D;
    border-color: #03234D !important;
}

/* ICON */
.config-toggle-btn i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

/* ACTIVE STATE */
.config-toggle-btn.active i {
    transform: rotate(45deg); /* + → × */
}

/* ==========================================
   COLLAPSE CONFIG
========================================== */
/* COLLAPSED STATE */
.config-collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

/* EXPANDED STATE WITH SCROLL */
.config-collapsed.active {
    max-height: 300px; /* 🔥 controls height */
    overflow-y: auto;  /* 🔥 scroll works here */
    opacity: 1;
    margin-top: 10px;
}
/* ==========================================
   CUSTOM SCROLLBAR (MODERN)
========================================== */

/* WIDTH */
.config-collapsed.active::-webkit-scrollbar {
    width: 6px;
}

/* TRACK (BACKGROUND) */
.config-collapsed.active::-webkit-scrollbar-track {
    background: transparent;
}

/* THUMB (SCROLL HANDLE) */
.config-collapsed.active::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #03234D, #5a8cff);
    border-radius: 10px;
}

/* HOVER EFFECT */
.config-collapsed.active::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2f6ee0, #4c7cff);
}
/* ==========================================
   PROMO CARD (PREMIUM SaaS STYLE)
========================================== */
.view-cart-tabs {
    margin-top: 30px;
    background: #ffffff;
    border-radius: 16px;
    padding: 26px;
    border: 1px solid #e6ebf1;

    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: 0.2s ease;
}

/* REMOVE OLD TAB LOOK */
.view-cart-tabs .nav-tabs {
    border: none;
    margin-bottom: 16px;
}

.view-cart-tabs .nav-link {
	background: none !important;
	border-radius: 10px;
	/* padding: 8px 14px; */
	font-size: 14px;
	font-weight: 700;
	color: #03234D !important;
	border: none !important;
	/* margin-bottom: 14px; */
	margin-left: -24px !important;
}
#order-standard_cart .field, #order-standard_cart .form-control {

	border: 1px solid #ddd !important;
	border-radius: 10px !important;
	height: 040px !important;
}
/* REMOVE modern-card EFFECT FROM CART */
#order-standard_cart .modern-card, #order-standard_cart .view-cart-items {

	padding: 20px !important;
	border-radius: 10px !important;
	border: none !important;
}
.view-cart-tabs .nav-link.active {
    background: #ffffff;
    border: 1px solid #e6ebf1;
    color: #0f172a;
}

/* ==========================================
   INPUT FIELD (PREMIUM)
========================================== */
.view-cart-tabs .form-control {
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #d0d5dd;
    font-size: 14px;

    transition: all 0.2s ease;
}

/* PLACEHOLDER */
.view-cart-tabs .form-control::placeholder {
    color: #94a3b8;
}
.page-viewcart .view-cart-items .item .col-sm-4 {
	flex: 0 0 87.333% !important;
	max-width: 87.333% !important;
}
/* FOCUS STATE */
.view-cart-tabs .form-control:focus {
    border-color: #03234D;
    box-shadow: 0 0 0 3px rgba(54,122,243,0.15);
    outline: none;
}

/* ==========================================
   INLINE PROMO INPUT + BUTTON
========================================== */

/* container layout */
.view-cart-tabs .tab-content form {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* input takes remaining space */
.view-cart-tabs .form-control {
    flex: 1;
    margin: 0;
}

/* button 30% width */
.view-cart-tabs .btn-default {
    width: 30%;
    min-width: 140px;
    background:#03234D;
    margin-top: 0; /* remove top spacing */
    padding: 8px 16px;
    color:#fff;
    border-radius: 10px;
}

/* HOVER */
.view-cart-tabs .btn-default:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(54,122,243,0.25);
}

/* CLICK */
.view-cart-tabs .btn-default:active {
    transform: scale(0.98);
}

/* ==========================================
   INPUT ICON (LEFT)
========================================== */
.prepend-icon .field-icon {
    color: #03234D;
    opacity: 0.7;
}

/* ==========================================
   INNER BOX (SOFT BACKGROUND LIKE REF)
========================================== */
.view-cart-tabs .tab-content {
    background: #f8fafc;
    padding: 18px;
    border-radius: 12px;
}
/* ==========================================
   EDIT BUTTON (PREMIUM STYLE)
========================================== */
.edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 4px 8px;

    font-size: 12px;
    font-weight: 500;

    color: #3479F3;
    background: rgba(52,121,243,0.08);

    border: 1px solid rgba(52,121,243,0.25);
    border-radius: 20px;

    text-decoration: none;
    transition: all 0.25s ease;
}

/* ICON */
.edit-btn i {
    font-size: 11px;
}

/* HOVER */
.edit-btn:hover {
    background: rgba(52,121,243,0.15);
    border-color: rgba(52,121,243,0.4);
    color: #1d4ed8;

    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52,121,243,0.2);
}

/* ACTIVE */
.edit-btn:active {
    transform: scale(0.96);
}
/* ==========================================
   REMOVE BUTTON (PREMIUM + RESPONSIVE)
========================================== */
#order-standard_cart .btn-remove-from-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 8px;
    font-size: 12px;

    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);

    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 20px;

    cursor: pointer;
    transition: all 0.25s ease;
}

/* ICON */
#order-standard_cart .btn-remove-from-cart i {
    font-size: 12px;
}

/* HOVER */
#order-standard_cart .btn-remove-from-cart:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #dc2626;

    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

/* ACTIVE */
#order-standard_cart .btn-remove-from-cart:active {
    transform: scale(0.95);
}
/* ==========================================
   CONTAINER
========================================== */
.checkout-container {
    max-width: 900px;
    margin: auto;
    padding: 0 15px;
}

.checkout-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
}/* ==========================================
   RIGHT SIDEBAR - ULTRA COMPACT BLUE THEME
   ========================================== */

.secondary-cart-sidebar {
    width: 290px; /* Reduced from 300px */
    flex-shrink: 0;
    position: sticky;
    
    top: 20px;
    z-index: 100;
    align-self: flex-start;
}

.modern-order-summary {
    background: #ffffff;
    border-radius: 12px; /* Reduced from 16px */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.summary-header {
    position: relative;
    

    background:linear-gradient(135deg, #02162F 0%, #03234D 50%, #0A4B9C 100%) !important;
    padding: 18px 20px;
    color: #fff;

    border-radius: 16px 16px 0 0;
}

.summary-header::before {
    content: "";
    position: absolute;

    top: -60px;
    right: -60px;

    width: 170px;
    height: 146px;

    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    /* THIS MAKES IT LOOK LIKE YOUR IMAGE */
    box-shadow: 
        inset 0 0 60px rgba(255,255,255,0.08),
        0 0 60px rgba(255,255,255,0.05);
}
.summary-header::after {
    content: "";
    position: absolute;

        top: 32px;
    right: 244px;
    width: 136px;
    height: 127px;


    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px; /* Reduced from 6px */
    position: relative;
    z-index: 1;
}

.selected-label {
    font-size: 1.25rem; /* Reduced from 0.7rem */
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
}

.btn-change-plan {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 3px 8px; /* Reduced from 5px 10px */
    border-radius: 14px;
    font-size: 0.75rem; /* Reduced from 0.75rem */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.btn-change-plan:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
}

.plan-title {
    font-size: 1.5rem; /* Reduced from 1.4rem */
    font-weight: 700;
    margin: 0 0 2px 0;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.plan-subtitle {
    font-size: 1rem; /* Reduced from 0.95rem */
    opacity: 0.95;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Plan Specs Badges */
.plan-specs {
    display: flex;
    gap: 4px; /* Reduced from 6px */
    flex-wrap: wrap;
    margin-top: 8px; /* Reduced from 10px */
    position: relative;
    z-index: 1;
}

.spec-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 3px 8px; /* Reduced from 5px 10px */
    border-radius: 4px;
    font-size: 0.65rem; /* Reduced from 0.75rem */
    font-weight: 600;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 4px;
}

.spec-badge i {
    font-size: 0.6rem;
}

/* Body Section - Much More Compact */
.summary-body {
    padding: 12px 14px; /* Reduced from 16px */
}

.breakdown-title {
    font-size: 1rem; /* Reduced from 0.7rem */
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px; /* Reduced from 8px */
}

.breakdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0; /* Reduced from 6px */
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.8rem; /* Reduced from 0.95rem */
}

.breakdown-item:last-child {
    border-bottom: none;
}

.main-item {
    font-weight: 700;
    color: #1f2937;
    font-size: 1.25rem; /* Reduced from 1.5rem */
}

.sub-item {
    color: #6b7280;
    padding-left: 8px; /* Reduced from 12px */
    position: relative;
    font-size: 1rem; /* Reduced from 0.9rem */
}

.sub-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 3px;
    background: #d1d5db;
    border-radius: 50%;
}

.item-name {
    color: #52525b;
    flex: 1;
    font-weight: 500;
    font-size:1.25rem;
}

.item-price {
    color: #03234D;
    font-weight: 700;
    white-space: nowrap;
    font-size: 1.25rem; /* Reduced from 1.5rem */
}

.main-item .item-price {
    color: #1f2937;
    font-size: 1.25rem; /* Reduced from 1.5rem */
}

/* WRAPPER */
.config-options-wrapper {
    margin: 10px 0;
}

/* SINGLE CARD */
.config-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;

    padding: 10px 14px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* ROW ITEMS */
.row-item {
    display: flex;
    justify-content: space-between;

    font-size: 14px;
    color: #52525b;

    padding: 8px 0;

    border-bottom: 1px solid #f1f5f9;
}

/* LAST ROW */
.row-item:last-child {
    border-bottom: none;
}
.divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #e5e7eb, transparent);
    margin: 8px 0; /* Reduced from 12px */
}

.base-row {
    margin-top: 8px; /* Reduced from 12px */
    padding-top: 8px;
    border-top: 2px solid #f3f4f6;
    font-weight: 700;
    font-size: 0.8rem; /* Reduced from 1rem */
}

/* Total Section - More Compact */
.summary-total {
    background: #f9fafb;
    margin: 10px -14px -14px -14px; /* Reduced */
    padding: 12px 14px; /* Reduced from 16px 20px */
   border-top: 2px solid transparent !important;
    border-image: linear-gradient(135deg, #03234D, #ffffff) 1 !important;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.total-label {
    font-weight: 700;
    font-size: 1.5rem; /* Reduced from 1.5rem */
    color: #1f2937;
}

.total-price {
    font-weight: 800;
    font-size: 1.5rem; /* Reduced from 1.75rem */
    color: #1f2937;
}

.billing-cycle-text {
    font-size: 0.65rem; /* Reduced from 1.5rem */
    color: #9ca3af;
    margin: 0;
    text-align: right;
}

/* Footer Section - More Compact */
.summary-footer {
    padding: 12px 14px; /* Reduced from 16px 20px */
}

.btn-proceed {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #03234D 0%, #03234D 100%);
    color: white;
    padding: 10px 16px; /* Reduced from 13px 20px */
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5rem; /* Reduced from 1.5rem */
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    border: none;
    width: 100%;
}

.btn-proceed:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    color: white;
}

.btn-proceed:active {
    transform: translateY(0);
}

.btn-proceed i {
    font-size: 1rem; /* Reduced from 1rem */
}

.guarantee-text {
    text-align: center;
    font-size: 0.65rem; /* Reduced from 0.75rem */
    color: #10b981;
    margin-top: 6px; /* Reduced from 10px */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.guarantee-text i {
    font-size: 1rem; /* Reduced from 0.85rem */
}

.continue-shopping-wrapper {
    text-align: center;
    margin-top: 6px; /* Reduced from 10px */
}

.btn-continue {
    font-size: 1rem; /* Reduced from 1.5rem */
    color: #6b7280;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
    font-weight: 600;
    font-size:1.15rem;
}

.btn-continue:hover {
    color: #03234D;
}

/* Discount Item */
.discount-item .item-name {
    color: #10b981;
    font-weight: 600;
}

.discount-item .item-price {
    color: #10b981;
}
/* TITLE ROW */
.product-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

   
    border-bottom: 1px solid #e6ebf1;
}

/* LEFT */
.product-left {
    font-weight: 600;
    color: #0f172a;
}

/* RIGHT */
.product-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* PRODUCT BREAKDOWN SCROLL */
.product-breakdown {
    max-height: 250px !important;   /* adjust height as needed */
    overflow-y: auto !important;

    padding-right: 6px; /* space for scrollbar */
    
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #03234D #f1f1f1;
}
.product-breakdown:empty {
    display: none !important;
}
/* CHROME / EDGE */
.product-breakdown::-webkit-scrollbar {
    width: 6px;
}

.product-breakdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.product-breakdown::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #03234D, #5a8cff);
    border-radius: 10px;
}

.product-breakdown::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #2f6fe0, #4a7cff);
}
/* BREAKDOWN */
.product-breakdown {
    padding: 8px 0 12px 14px;
    margin-left: 6px;
    border-left: 2px solid #03234D;
    height:200px;
}


/* COLLAPSE */
.product-breakdown.hidden {
    display: none;
}

/* ROW */
.row-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    font-size: 13px;
    color: #64748b;
}
/* Responsive */
@media (max-width: 991px) {
    .cart-page-layout {
        flex-direction: column;
    }
    
    .secondary-cart-sidebar {
        width: 100%;
        position: relative;
        top: 0;
        order: -1;
    }
    
    .modern-order-summary {
        max-width: 100%;
    }
}
/* MOBILE NAV FIX */
@media (max-width: 1199px) {
    #order-standard_cart .cart-sidebar {
    display:none;
}
    .page-products .cart-sidebar.sidebar {
	display: none !important;
}
body.primary-bg-color.page-clientregister .sidebar {
    display: none !important;
}
    .primary-bg-color.page-viewticket div.sidebar:nth-child(1) > div:nth-child(1) {
	display: none !important;
}
.primary-bg-color.page-clientareahome .col-lg-4.col-xl-3 {
    display: none !important;
}
    /* Navbar container */
    #mainNavbar {
        background: #ffffff !important;
        padding: 15px !important;
    }

    /* Target your DIV inside UL */
    #nav > div {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    /* Menu links */
    #nav > div a {
        display: block !important;
        width: 100% !important;
        padding: 12px 15px !important;
        border-radius: 8px !important;
        background: #f9fafb !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #333 !important;
        text-decoration: none !important;
        transition: all 0.3s ease;
    }

    /* Hover effect */
    #nav > div a:hover {
        background: #e5e7eb !important;
        color: #000 !important;
    }

    /* Fix collapse spacing */
    .navbar-collapse {
        margin-top: 10px !important;
    }

    /* Cart button full width */
    .cart-btn {
        width: 100% !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    /* Right menu spacing */
    .navbar-nav.align-items-center {
        width: 100% !important;
        margin-top: 10px !important;
    }
     .navbar-light .navbar-toggler {
	color: rgb(0, 0, 0) !important;
	border: none !important;
}
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 576px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: flex;
    }
}

.home-domain-search.bg-white {
    background: url('../images/bg-index.png') no-repeat center center;
    background-size: cover;
    animation: bgFadeZoom 1.8s ease forwards;
    background-attachment: fixed;
}

/* KEYFRAMES */
@keyframes bgFadeZoom {
    0% {
        opacity: 0;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
#order-standard_cart .cart-heading {
    font-size: 18px;          /* increase size */
    font-weight: 500;         /* bold */
    color: #03234D;           /* nice blue like your theme *  
    margin-bottom: 25px;      /* spacing */
    letter-spacing: 0.5px;    /* cleaner look */
}