/* Copy Animation */
::selection{
  background-color: #3390FF;
  color: #fff;
}

.base-color{
  color: hsl(var(--main)) !important;
}

.copyInput {
	display: inline-block;
	line-height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
  }
  
  .copied::after {
	position: absolute;
	top: 8px;
	right: 12%;
	width: 100px;
	display: block;
	content: "COPIED";
	font-size: 1em;
	padding: 5px 5px;
	color: #fff;
	background-color: #FF7000;
	border-radius: 3px;
	opacity: 0;
	will-change: opacity, transform;
	animation: showcopied 1.5s ease;
  }
  
  @keyframes showcopied {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	50% {
		opacity: 0.7;
		transform: translateX(40%);
	}
	70% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
	}
  }




  .cookies-card {
	width: 520px;
	padding: 30px;
	color: #1E2337;
	position:  fixed;
	bottom: 15px;  
	left: 15px;
	z-index: 999999;
	transition: all .5s;
	background: #d1d1d1;
    border-radius: 5px;
  }
  
  .cookies-card.hide{
	bottom: -500px !important;
  }
  .radius--10px {
	border-radius: 10px;
  }
  
  .cookies-card__icon {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background-color: #6e6f70;
    color: #fff;
	font-size: 32px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
  }
  
  .cookies-card__content {
	margin-bottom: 0;
  }
  
  .cookies-btn {
	color: #363636;
	text-decoration: none;
	padding: 10px 35px;
	margin: 3px 5px;
	display: inline-block;
	border-radius:  999px;
  }
  
  .cookies-btn:hover {
	color: #363636;
  }

  
  @media (max-width: 767px) {
	  .cookies-card {
		  width:  100%;
		  left: 0;
		  bottom:  0;
		  font-size:  14px;
		  padding:  15px;
	  }
  }




.hover-input-popup {
        position: relative;
    }
    .input-popup {
        display: none;
    }
    .hover-input-popup .input-popup {
        display: block;
        position: absolute;
        bottom: 130%;
        left: 50%;
        width: 280px;
        background-color: #1a1a1a;
        color: #fff;
        padding: 20px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    .input-popup::after {
        position: absolute;
        content: '';
        bottom: -19px;
        left: 50%;
        margin-left: -5px;
        border-width: 10px 10px 10px 10px;
        border-style: solid;
        border-color: transparent transparent #1a1a1a transparent;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .input-popup p {
        padding-left: 20px;
        position: relative;
    }
    .input-popup p::before {
        position: absolute;
        content: '';
        font-family: 'Line Awesome Free';
        font-weight: 900;
        left: 0;
        top: 4px;
        line-height: 1;
        font-size: 18px;
    }
    .input-popup p.error {
        text-decoration: line-through;
    }
    .input-popup p.error::before {
        content: "\f057";
        color: #ea5455;
    }
    .input-popup p.success::before {
        content: "\f058";
        color: #28c76f;
    }



 .show-filter{
  display: none;
}
@media(max-width:767px){
  .responsive-filter-card{
      display: none;
      transition: none;
  }
  .show-filter{
      display: block;
  }
}
/* ═══════════════════════════════════════════════════════
   GEN Z DARK THEME  — Global Store & Dashboard Styles
   ═══════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.service-category.bg--light,
.service-category.bg--light.section-full {
    background: linear-gradient(135deg, #0f0c29 0%, #1a0533 50%, #0d1b2a 100%) !important;
    min-height: 80vh;
}

/* ── Dark glass mixin ── */
.genz-glass {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ══════════════════════
   STORE SIDEBAR
══════════════════════ */
.collapable-sidebar .collapable-sidebar__inner {
    position: sticky;
    top: 20px;
}
.collapable-sidebar .collapable-sidebar__close {
    background: rgba(236,72,153,.15);
    border: 1px solid rgba(236,72,153,.3);
    color: #ec4899;
    border-radius: 10px;
    padding: .4rem .8rem;
    margin-bottom: .75rem;
}

/* Sidebar nav panels */
.sidebar-panel {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    overflow: hidden;
    margin-bottom: 1rem;
}
.sidebar-panel-header {
    background: linear-gradient(135deg, rgba(126,34,206,.4), rgba(236,72,153,.3));
    padding: .65rem 1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-panel .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.65);
    font-size: .875rem;
    padding: .65rem 1rem;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sidebar-panel .list-group-item:hover,
.sidebar-panel .list-group-item.genz-active {
    background: linear-gradient(90deg, rgba(126,34,206,.25), rgba(236,72,153,.15)) !important;
    color: #fff !important;
    padding-left: 1.25rem;
}
.sidebar-panel .list-group-item.genz-active {
    border-left: 3px solid #ec4899 !important;
}
.sidebar-panel .list-group-item:last-child { border-bottom: none !important; }
/* hide old bg--base active from JS */
.sidebar-panel .list-group-item.bg--base {
    background: linear-gradient(90deg, rgba(126,34,206,.35), rgba(236,72,153,.2)) !important;
    color: #fff !important;
    border-left: 3px solid #ec4899 !important;
    padding-left: 1.25rem;
}

/* ══════════════════════
   USER INFO CARD (dashboard sidebar)
══════════════════════ */
.user-info-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    overflow: hidden;
    margin-bottom: 1rem;
}
.user-info-card .uic-header {
    background: linear-gradient(135deg, #7e22ce, #ec4899);
    padding: 1.1rem 1rem .9rem;
    text-align: center;
}
.user-info-card .uic-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff;
    margin: 0 auto .5rem;
    border: 2px solid rgba(255,255,255,.4);
}
.user-info-card .uic-name {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.user-info-card .uic-body {
    padding: .9rem 1rem;
    color: rgba(255,255,255,.55);
    font-size: .8rem;
    line-height: 1.7;
}
.user-info-card .uic-footer {
    padding: .6rem 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
}
.user-info-card .uic-footer a.btn {
    background: rgba(126,34,206,.2);
    border: 1px solid rgba(126,34,206,.4);
    color: #c084fc;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 600;
    transition: all .25s;
    width: 100%;
    display: block;
    text-align: center;
    padding: .45rem;
}
.user-info-card .uic-footer a.btn:hover {
    background: rgba(126,34,206,.4);
    color: #fff;
}

/* ── Sidebar action button (New Ticket etc) ── */
.sidebar-action-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .65rem 1rem;
    border-radius: 12px;
    background: rgba(126,34,206,.15);
    border: 1px solid rgba(126,34,206,.3);
    color: #c084fc;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .25s;
}
.sidebar-action-btn:hover {
    background: rgba(126,34,206,.3);
    border-color: rgba(126,34,206,.6);
    color: #fff;
}

/* ══════════════════════
   DASHBOARD STAT CARDS
══════════════════════ */
.genz-stat-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    padding: 1.25rem 1.1rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    text-decoration: none;
    display: block;
}
.genz-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
}
.genz-stat-card.c1::before { background: linear-gradient(90deg,#7e22ce,#ec4899); }
.genz-stat-card.c2::before { background: linear-gradient(90deg,#2563eb,#7e22ce); }
.genz-stat-card.c3::before { background: linear-gradient(90deg,#059669,#2563eb); }
.genz-stat-card.c4::before { background: linear-gradient(90deg,#ec4899,#f97316); }
.genz-stat-card.c5::before { background: linear-gradient(90deg,#f97316,#eab308); }
.genz-stat-card.c6::before { background: linear-gradient(90deg,#06b6d4,#059669); }
.genz-stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(126,34,206,.4);
    box-shadow: 0 12px 30px rgba(126,34,206,.2);
}
.genz-stat-card .stat-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}
.genz-stat-card.c1 .stat-icon { background: linear-gradient(135deg,#7e22ce,#ec4899); }
.genz-stat-card.c2 .stat-icon { background: linear-gradient(135deg,#2563eb,#7e22ce); }
.genz-stat-card.c3 .stat-icon { background: linear-gradient(135deg,#059669,#2563eb); }
.genz-stat-card.c4 .stat-icon { background: linear-gradient(135deg,#ec4899,#f97316); }
.genz-stat-card.c5 .stat-icon { background: linear-gradient(135deg,#f97316,#eab308); }
.genz-stat-card.c6 .stat-icon { background: linear-gradient(135deg,#06b6d4,#059669); }
.genz-stat-card .stat-label {
    font-size: .78rem;
    color: rgba(255,255,255,.5);
    font-weight: 500;
    margin: 0 0 .2rem;
}
.genz-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

/* ══════════════════════
   DASHBOARD INFO BOXES
══════════════════════ */
.genz-info-box {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    padding: 1.25rem;
    height: 100%;
}
.genz-info-box .gib-title {
    font-size: .85rem;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.genz-info-box .gib-title i { color: #c084fc; }
.genz-info-box .gib-body {
    font-size: .875rem;
    color: rgba(255,255,255,.55);
    line-height: 1.65;
}
.genz-info-box .gib-body a { color: #c084fc; text-decoration: none; }
.genz-info-box .gib-body a:hover { color: #ec4899; }
.genz-info-box .gib-action {
    float: right;
    padding: .25rem .75rem;
    border-radius: 50px;
    background: rgba(126,34,206,.2);
    border: 1px solid rgba(126,34,206,.35);
    color: #c084fc;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}
.genz-info-box .gib-action:hover { background: rgba(126,34,206,.4); color: #fff; }

/* Domain search in dashboard */
.genz-domain-search {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50px;
    overflow: hidden;
    margin-top: .75rem;
}
.genz-domain-search .ds-icon {
    padding: 0 .75rem;
    color: rgba(255,255,255,.35);
    font-size: .9rem;
}
.genz-domain-search input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: .875rem;
    padding: .65rem 0;
    outline: none;
    box-shadow: none !important;
}
.genz-domain-search input::placeholder { color: rgba(255,255,255,.3); }
.genz-domain-search button {
    background: linear-gradient(135deg,#7e22ce,#ec4899);
    border: none;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    padding: .65rem 1.1rem;
    border-radius: 0 50px 50px 0;
    transition: opacity .2s;
}
.genz-domain-search button:hover { opacity: .85; }

/* KYC alert banner */
.genz-kyc-banner {
    background: linear-gradient(135deg, rgba(234,179,8,.12), rgba(249,115,22,.1));
    border: 1px solid rgba(234,179,8,.3);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    color: rgba(255,255,255,.75);
    font-size: .875rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.genz-kyc-banner .kyc-icon { color: #eab308; font-size: 1.1rem; margin-top: .1rem; }
.genz-kyc-banner a { color: #fbbf24; font-weight: 600; }

/* ══════════════════════
   CART PAGE
══════════════════════ */
.genz-cart-item {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-bottom: .65rem;
    transition: border-color .2s;
}
.genz-cart-item:hover { border-color: rgba(126,34,206,.35); }
.genz-cart-item .ci-name {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.genz-cart-item .ci-meta {
    font-size: .78rem;
    color: rgba(255,255,255,.45);
    margin-top: .15rem;
}
.genz-cart-item .ci-price {
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(135deg,#c084fc,#ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.genz-cart-item .ci-cycle { font-size: .75rem; color: rgba(255,255,255,.4); }
.genz-cart-item .ci-setup { font-size: .75rem; color: rgba(255,255,255,.35); }
.genz-cart-item .ci-total { font-size: .8rem; color: rgba(255,255,255,.6); font-style: italic; }
.genz-cart-item .ci-edit {
    font-size: .75rem; color: #c084fc; text-decoration: none; margin-left: .4rem;
}
.genz-cart-item .ci-remove {
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    color: #f87171;
    border-radius: 8px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: all .2s;
    flex-shrink: 0;
}
.genz-cart-item .ci-remove:hover { background: rgba(239,68,68,.25); color: #fff; }

.genz-cart-empty {
    background: rgba(255,255,255,.04);
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 3rem;
    text-align: center;
    color: rgba(255,255,255,.35);
}
.genz-cart-empty i { font-size: 2.5rem; margin-bottom: .75rem; display: block; color: rgba(126,34,206,.5); }

/* Cart empty-cart button */
.genz-cart-clear {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .9rem;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    color: #f87171;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}
.genz-cart-clear:hover { background: rgba(239,68,68,.25); color: #fff; }

/* Coupon box */
.genz-coupon-box {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-top: .75rem;
}
.genz-coupon-box input.form-control {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: .875rem;
}
.genz-coupon-box input.form-control::placeholder { color: rgba(255,255,255,.3); }
.genz-coupon-box .coupon-active {
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.3);
    border-radius: 10px;
    padding: .6rem 1rem;
    color: #86efac;
    font-size: .875rem;
    text-align: center;
    margin-bottom: .5rem;
}
.genz-coupon-box .btn-coupon-remove {
    background: rgba(234,179,8,.12);
    border: 1px solid rgba(234,179,8,.3);
    color: #fbbf24;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 600;
    width: 100%;
    padding: .55rem;
}
.genz-coupon-box .btn-coupon-apply {
    background: linear-gradient(135deg,#7e22ce,#ec4899);
    border: none;
    color: #fff;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 700;
    width: 100%;
    padding: .55rem;
}

/* Order summary panel */
.genz-order-summary {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    overflow: hidden;
    position: sticky;
    top: 20px;
}
.genz-order-summary .os-header {
    background: linear-gradient(135deg, rgba(126,34,206,.5), rgba(236,72,153,.4));
    padding: .7rem 1.1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; gap: .5rem;
}
.genz-order-summary .os-body { padding: 1rem 1.1rem; }
.genz-order-summary .os-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .875rem;
    color: rgba(255,255,255,.6);
    padding: .4rem 0;
}
.genz-order-summary .os-row.os-total {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: .5rem;
    padding-top: .75rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
.genz-order-summary .os-total-amount {
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg,#c084fc,#ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.genz-order-summary .os-footer { padding: .75rem 1.1rem 1.1rem; }
.btn-checkout {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%;
    padding: .85rem;
    background: linear-gradient(135deg,#7e22ce,#ec4899);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    transition: all .3s;
    text-decoration: none;
}
.btn-checkout:hover { opacity: .9; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(126,34,206,.45); color: #fff; }

/* Breadcrumb dark override */
.breadcrumb-section,
.breadcrumb--area { background: rgba(15,12,41,.9) !important; }

/* Scrollbar for sidebar lists */
.sidebar-panel .position-sticky { max-height: 320px; overflow-y: auto; }
.sidebar-panel .position-sticky::-webkit-scrollbar { width: 4px; }
.sidebar-panel .position-sticky::-webkit-scrollbar-track { background: transparent; }
.sidebar-panel .position-sticky::-webkit-scrollbar-thumb { background: rgba(126,34,206,.4); border-radius: 4px; }

@media (max-width: 991px) {
    .genz-stat-card { margin-bottom: .75rem; }
}

/* ═══════════════════════════════════════════════════════
   GEN Z HEADER  — Full Override
   ═══════════════════════════════════════════════════════ */

.header,
.header.bg--dark,
div.header.bg--dark {
    background: rgba(10, 7, 30, 0.92) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,.35) !important;
}

.header.sticky {
    background: rgba(8, 5, 24, 0.97) !important;
    box-shadow: 0 4px 30px rgba(126,34,206,.15) !important;
}

/* Logo */
.header .logo img { max-height: 38px; }

/* Nav links */
.menu li a {
    color: rgba(255,255,255,.7) !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    letter-spacing: .01em;
    transition: color .2s ease !important;
    padding: 5px 12px !important;
}
.menu li a:hover,
.menu li a.active {
    color: #c084fc !important;
}

/* Active underline for top-level links */
@media (min-width: 1200px) {
    .menu > li > a {
        position: relative;
    }
    .menu > li > a::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 12px;
        right: 12px;
        height: 2px;
        background: linear-gradient(90deg, #7e22ce, #ec4899);
        border-radius: 2px;
        transform: scaleX(0);
        transition: transform .25s ease;
    }
    .menu > li > a:hover::before,
    .menu > li > a.active::before {
        transform: scaleX(1);
    }
    /* remove the caret pseudo conflicts */
    .menu li.has-sub-menu > a::after {
        font-family: 'Line Awesome Free', 'Font Awesome 5 Free';
        content: "\f107" !important;
        color: rgba(255,255,255,.4);
        font-size: 12px;
        transform: translate(6px, -50%);
    }
}

/* Dropdown sub-menu */
@media (min-width: 1200px) {
    .sub-menu {
        background: rgba(15, 10, 40, 0.97) !important;
        border: 1px solid rgba(126,34,206,.25) !important;
        border-radius: 14px !important;
        padding: 8px !important;
        box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(126,34,206,.1) !important;
        backdrop-filter: blur(20px);
        min-width: 210px !important;
    }
    .sub-menu li a {
        border-radius: 9px !important;
        color: rgba(255,255,255,.65) !important;
        font-size: .85rem !important;
        padding: 7px 12px !important;
        transition: all .2s ease !important;
    }
    .sub-menu li a:hover {
        background: linear-gradient(90deg, rgba(126,34,206,.3), rgba(236,72,153,.15)) !important;
        color: #fff !important;
        padding-left: 16px !important;
    }
}

/* Auth header buttons */
.header .btn--base,
.header a.btn--base {
    background: linear-gradient(135deg, #7e22ce, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    padding: .45rem 1.1rem !important;
    transition: opacity .2s, transform .2s !important;
}
.header .btn--base:hover { opacity: .88; transform: translateY(-1px); }

.header .btn--base-outline,
.header a.btn--base-outline {
    background: transparent !important;
    border: 1px solid rgba(126,34,206,.5) !important;
    border-radius: 50px !important;
    color: #c084fc !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    padding: .45rem 1.1rem !important;
    transition: all .2s !important;
}
.header a.btn--base-outline:hover {
    background: rgba(126,34,206,.2) !important;
    border-color: #7e22ce !important;
    color: #fff !important;
}

/* Login / Dashboard inline links */
.header .text--white {
    color: rgba(255,255,255,.75) !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    transition: color .2s;
}
.header .text--white:hover { color: #c084fc !important; }

/* Cart widget */
.add-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(126,34,206,.15);
    border: 1px solid rgba(126,34,206,.3);
    color: #c084fc !important;
    font-size: .95rem;
    transition: all .25s;
    text-decoration: none;
}
.add-cart:hover {
    background: rgba(126,34,206,.3);
    border-color: #7e22ce;
    color: #fff !important;
}
.add-cart i { font-size: .9rem; }
.add-cart i span {
    position: absolute;
    top: -6px; right: -6px;
    background: linear-gradient(135deg, #7e22ce, #ec4899);
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 50px;
    min-width: 16px;
    text-align: center;
}

/* Hamburger trigger */
.header-trigger__icon {
    color: #c084fc !important;
    font-size: 28px !important;
}

/* Mobile menu open */
@media (max-width: 1199px) {
    .menu {
        background: rgba(10, 7, 30, 0.98) !important;
        border: 1px solid rgba(126,34,206,.2) !important;
        border-radius: 14px !important;
        box-shadow: 0 20px 50px rgba(0,0,0,.6) !important;
        padding: 16px !important;
    }
    .menu li {
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
    }
    .menu li a { color: rgba(255,255,255,.75) !important; }
    .sub-menu { background: rgba(255,255,255,.04) !important; border-radius: 10px !important; }
}

/* ── Gradient "pill" badge on nav CTA ── */
.header .menu-btn a {
    padding: .42rem 1rem !important;
    border-radius: 50px !important;
}

/* ═══════════════════════════════════════════════════════
   GEN Z FOOTER
   ═══════════════════════════════════════════════════════ */

footer.genz-footer {
    background: linear-gradient(180deg, #0a071e 0%, #0d0b20 100%);
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 3.5rem 0 0;
    position: relative;
    overflow: hidden;
}
footer.genz-footer::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(126,34,206,.12) 0%, transparent 65%);
    top: -200px; left: -100px;
    pointer-events: none;
}
footer.genz-footer::after {
    content: '';
    position: absolute;
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(236,72,153,.09) 0%, transparent 65%);
    bottom: -100px; right: -50px;
    pointer-events: none;
}

.genz-footer .footer-brand { margin-bottom: 1.1rem; }
.genz-footer .footer-brand img { max-height: 36px; }
.genz-footer .footer-tagline {
    font-size: .875rem;
    color: rgba(255,255,255,.45);
    line-height: 1.65;
    max-width: 260px;
    margin: .5rem 0 1.25rem;
}

/* Column headings */
.genz-footer .footer-col-title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    margin-bottom: .9rem;
}

/* Links */
.genz-footer .footer-links {
    list-style: none;
    padding: 0; margin: 0;
}
.genz-footer .footer-links li { margin-bottom: .45rem; }
.genz-footer .footer-links a {
    font-size: .875rem;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    transition: color .2s;
    display: flex; align-items: center; gap: .4rem;
}
.genz-footer .footer-links a:hover { color: #c084fc; }
.genz-footer .footer-links a .link-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(126,34,206,.5);
    flex-shrink: 0;
    transition: background .2s;
}
.genz-footer .footer-links a:hover .link-dot { background: #c084fc; }

/* Social icons */
.genz-footer .footer-social { display: flex; gap: .6rem; margin-top: .25rem; }
.genz-footer .footer-social a {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.55);
    font-size: .85rem;
    text-decoration: none;
    transition: all .25s;
}
.genz-footer .footer-social a:hover {
    background: linear-gradient(135deg, rgba(126,34,206,.4), rgba(236,72,153,.3));
    border-color: rgba(126,34,206,.5);
    color: #fff;
    transform: translateY(-2px);
}

/* Bottom bar */
.genz-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 2.5rem;
    padding: 1.1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.genz-footer .footer-bottom .copy {
    font-size: .8rem;
    color: rgba(255,255,255,.3);
}
.genz-footer .footer-bottom .copy span {
    background: linear-gradient(90deg, #c084fc, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}
.genz-footer .footer-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .72rem;
    color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50px;
    padding: .25rem .75rem;
}
.genz-footer .footer-badge i { color: #a3e635; font-size: .7rem; }

/* ═══════════════════════════════════════════════════════
   GEN Z BREADCRUMB
   ═══════════════════════════════════════════════════════ */

/* Override old background */
.breadcrumb-bg { display: none !important; }

.genz-breadcrumb {
    background: linear-gradient(90deg, rgba(15,10,40,0.98) 0%, rgba(20,8,46,0.98) 100%);
    border-bottom: 1px solid rgba(126,34,206,.18);
    padding: .6rem 0;
    position: relative;
    overflow: hidden;
}

/* subtle left glow line */
.genz-breadcrumb::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #7e22ce, #ec4899);
}

/* very faint radial behind text */
.genz-breadcrumb::after {
    content: '';
    position: absolute;
    width: 300px; height: 80px;
    background: radial-gradient(ellipse, rgba(126,34,206,.12) 0%, transparent 70%);
    left: 0; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.genz-breadcrumb__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

/* Crumb trail */
.genz-crumb-trail {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.crumb-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: rgba(255,255,255,.45);
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s;
}
.crumb-link i { font-size: .85rem; color: #c084fc; }
.crumb-link:hover { color: #c084fc; }

.crumb-sep {
    color: rgba(255,255,255,.2);
    font-size: .65rem;
    display: flex;
    align-items: center;
}

.crumb-current {
    font-size: .8rem;
    font-weight: 700;
    background: linear-gradient(90deg, #c084fc, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Right badge */
.crumb-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .85rem;
    background: rgba(126,34,206,.12);
    border: 1px solid rgba(126,34,206,.25);
    border-radius: 50px;
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
}
.crumb-badge i { color: #c084fc; font-size: .8rem; }

@media (max-width: 575px) {
    .crumb-badge { display: none; }
    .genz-breadcrumb { padding: .5rem 0; }
}

/* ═══════════════════════════════════════════════════════
   GLOBAL bg--light DARK OVERRIDE (checkout / invoice pages)
   ═══════════════════════════════════════════════════════ */
.bg--light,
.bg--light.section-full,
.pt-60.pb-60.bg--light,
.pt-60.pb-60.bg--light.section-full {
    background: linear-gradient(135deg, #0f0c29 0%, #1a0533 50%, #0d1b2a 100%) !important;
    min-height: 60vh;
}

/* ── Shared form card used on invoice / deposit pages ── */
.genz-form-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    overflow: hidden;
}
.genz-form-card .gfc-header {
    background: linear-gradient(135deg, rgba(126,34,206,.45), rgba(236,72,153,.3));
    padding: .85rem 1.25rem;
    display: flex; align-items: center; gap: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.genz-form-card .gfc-header h5,
.genz-form-card .gfc-header h6 {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
}
.genz-form-card .gfc-header i { color: #c084fc; font-size: 1.1rem; }
.genz-form-card .gfc-body { padding: 1.5rem 1.25rem; }

/* Form controls inside dark cards */
.genz-form-card .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    margin-bottom: .4rem;
}
.genz-form-card .form-control,
.genz-form-card .form--control,
.genz-form-card select.form-control,
.genz-form-card select.form-select {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: .875rem !important;
    height: auto !important;
    padding: .6rem .9rem !important;
}
.genz-form-card .form-control::placeholder { color: rgba(255,255,255,.3) !important; }
.genz-form-card .form-control:focus,
.genz-form-card select.form-control:focus {
    border-color: rgba(126,34,206,.6) !important;
    box-shadow: 0 0 0 3px rgba(126,34,206,.15) !important;
    background: rgba(255,255,255,.1) !important;
}
.genz-form-card select option { background: #1a0533; color: #fff; }
.genz-form-card .input-group-text {
    background: rgba(126,34,206,.2) !important;
    border: 1px solid rgba(126,34,206,.3) !important;
    border-radius: 12px 0 0 12px !important;
    color: #c084fc !important;
    font-size: .85rem;
}
.genz-form-card .input-group .form-control { border-radius: 0 12px 12px 0 !important; }
.genz-form-card .btn.btn--base,
.genz-form-card button.btn--base,
.genz-form-card button[type=submit].btn--base,
.genz-form-card .btn--base {
    background: linear-gradient(135deg, #7e22ce, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    padding: .7rem 1.5rem !important;
    transition: opacity .2s, transform .2s !important;
    width: 100%;
}
.genz-form-card .btn--base:hover { opacity: .88 !important; transform: translateY(-1px) !important; }
.genz-form-card .btn--base:disabled { opacity: .4 !important; cursor: not-allowed; }

/* Preview details list (deposit page) */
.genz-preview-details {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
    margin: .5rem 0;
}
.genz-preview-details .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.6);
    font-size: .85rem;
    padding: .6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.genz-preview-details .list-group-item:last-child { border-bottom: none !important; }
.genz-preview-details .list-group-item .fw-bold { color: #c084fc; }

/* ── Invoice list table ── */
.genz-table-wrap {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    overflow: hidden;
}
.genz-table-wrap table.table {
    margin: 0;
    color: rgba(255,255,255,.75);
}
.genz-table-wrap table thead tr {
    background: linear-gradient(90deg, rgba(126,34,206,.3), rgba(236,72,153,.15)) !important;
    border: none;
}
.genz-table-wrap table thead th {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6) !important;
    border: none !important;
    padding: .85rem 1rem;
    background: transparent !important;
}
.genz-table-wrap table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    transition: background .2s;
}
.genz-table-wrap table tbody tr:last-child { border-bottom: none !important; }
.genz-table-wrap table tbody tr:hover {
    background: rgba(126,34,206,.07) !important;
}
.genz-table-wrap table tbody td {
    border: none !important;
    padding: .75rem 1rem;
    font-size: .875rem;
    color: rgba(255,255,255,.65);
    vertical-align: middle;
}
.genz-table-wrap table tbody td a {
    color: #c084fc;
    text-decoration: none;
    font-weight: 600;
}
.genz-table-wrap table tbody td a:hover { color: #ec4899; }
.genz-table-wrap .badge--fill-base {
    background: linear-gradient(135deg, rgba(126,34,206,.3), rgba(236,72,153,.2));
    border: 1px solid rgba(126,34,206,.4);
    color: #c084fc;
    border-radius: 8px;
    padding: .35rem .6rem;
    transition: all .2s;
}
.genz-table-wrap .badge--fill-base:hover {
    background: linear-gradient(135deg, #7e22ce, #ec4899);
    color: #fff;
}

/* ── Invoice view page ── */
.genz-invoice-wrap {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
/* payment method selector row */
.genz-pay-row {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    padding: 1.1rem;
    margin-bottom: 1rem;
}
.genz-pay-row select.form-control,
.genz-pay-row select.form-select {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: .875rem !important;
    padding: .6rem .9rem !important;
    height: auto !important;
}
.genz-pay-row select option { background: #1a0533; }
.genz-pay-row .btn--base {
    background: linear-gradient(135deg, #7e22ce, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: .65rem 1rem !important;
    transition: opacity .2s !important;
}
.genz-pay-row .btn--base:hover { opacity: .88 !important; }
.genz-pay-row .btn--base:disabled { opacity: .4 !important; cursor: not-allowed; }

/* Download / Preview buttons */
.genz-invoice-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.genz-invoice-actions a {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .7rem 1rem;
    border-radius: 50px;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .25s;
    min-width: 140px;
}
.genz-invoice-actions .btn-dl {
    background: linear-gradient(135deg, #7e22ce, #ec4899);
    color: #fff;
    border: none;
}
.genz-invoice-actions .btn-dl:hover { opacity: .88; transform: translateY(-1px); color: #fff; }
.genz-invoice-actions .btn-preview {
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.65);
}
.genz-invoice-actions .btn-preview:hover {
    border-color: rgba(126,34,206,.5);
    color: #c084fc;
    background: rgba(126,34,206,.1);
}

/* Force invoice print area to stay white */
@media print {
    .genz-footer, .header, .genz-breadcrumb, .genz-pay-row,
    .genz-invoice-actions, .bg--light { background: #fff !important; }
}

/* ═══════════════════════════════════════════════════════
   PRODUCT CONFIGURE PAGE — Dark glassmorphism overrides
   ═══════════════════════════════════════════════════════ */

/* All .card elements on dark-background pages */
.bg--light .card,
.section-full .card {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 16px !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.35) !important;
}
.bg--light .card-header,
.section-full .card-header {
    background: linear-gradient(90deg,rgba(126,34,206,.45),rgba(236,72,153,.35)) !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    color: #fff !important;
    border-radius: 15px 15px 0 0 !important;
    padding: .85rem 1.25rem !important;
}
.bg--light .card-body,
.section-full .card-body {
    background: transparent !important;
    color: #e2e8f0 !important;
}
.bg--light .card label,
.section-full .card label {
    color: #c4b5fd !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    letter-spacing: .04em !important;
}
/* inputs inside configure cards */
.bg--light .card .form-control,
.bg--light .card .form--control,
.bg--light .card select.form-select,
.section-full .card .form-control,
.section-full .card .form--control,
.section-full .card select.form-select {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(126,34,206,.4) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
}
.bg--light .card .form-control::placeholder,
.section-full .card .form-control::placeholder { color: rgba(255,255,255,.3) !important; }
.bg--light .card .form-control:focus,
.section-full .card .form-control:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168,85,247,.2) !important;
    background: rgba(126,34,206,.15) !important;
}
.bg--light .card .input-group-text,
.section-full .card .input-group-text {
    background: rgba(126,34,206,.3) !important;
    border: 1px solid rgba(126,34,206,.4) !important;
    color: #c084fc !important;
    border-radius: 10px 0 0 10px !important;
}
.bg--light .card select option,
.section-full .card select option { background: #1a0533; color: #fff; }

/* Billing type pill tabs — dark theme */
.billing-type-tabs {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(126,34,206,.3) !important;
    gap: .3rem !important;
}
.billing-type-tabs .nav-link {
    color: rgba(255,255,255,.65) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: transparent !important;
    transition: all .2s !important;
    font-size: .8rem !important;
    padding: .35rem .9rem !important;
}
.billing-type-tabs .nav-link:hover {
    background: rgba(126,34,206,.3) !important;
    color: #c084fc !important;
    border-color: rgba(168,85,247,.5) !important;
}
.billing-type-tabs .nav-link.active,
.billing-type-tabs .nav-link.bg-primary {
    background: linear-gradient(135deg,#7e22ce,#ec4899) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 12px rgba(126,34,206,.5) !important;
}
/* Remove old pink inactive-pill style */
.billing-type-tabs .nav-link.inactive-pill {
    background: transparent !important;
    color: rgba(255,255,255,.5) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
}
.billing-type-tabs .nav-link.inactive-pill:hover {
    background: rgba(126,34,206,.25) !important;
    color: #c084fc !important;
}

/* Order summary card — right column */
.col-lg-4 > .card .card-header,
.col-lg-4 > .card > span.card-header {
    background: linear-gradient(90deg,#7e22ce,#ec4899) !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    font-size: .95rem !important;
    padding: .75rem 1rem !important;
    border-radius: 15px 15px 0 0 !important;
    display: block !important;
}
.col-lg-4 > .card .card-body .border-top {
    border-color: rgba(255,255,255,.12) !important;
}
.col-lg-4 > .card .card-body span {
    color: #cbd5e1 !important;
}
.col-lg-4 > .card .card-body b,
.col-lg-4 > .card .card-body h5 {
    color: #f1f5f9 !important;
}
.col-lg-4 > .card .card-body .fst-italic {
    color: #a78bfa !important;
}
/* Highlighted price total */
.col-lg-4 > .card .finalAmount {
    background: linear-gradient(90deg,#a855f7,#ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
}

/* Configure → Continue button */
.col-lg-4 > .card .btn.bg--base,
.col-lg-4 > .card .btn.btn--base {
    background: linear-gradient(135deg,#7e22ce,#ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    padding: .75rem !important;
    box-shadow: 0 4px 20px rgba(126,34,206,.4) !important;
    transition: all .25s !important;
    color: #fff !important;
}
.col-lg-4 > .card .btn.bg--base:hover,
.col-lg-4 > .card .btn.btn--base:hover {
    opacity: .88 !important;
    transform: translateY(-2px) !important;
}

/* Configure Server section heading */
.bg--light .card h5.text-center,
.section-full .card h5.text-center {
    color: #c084fc !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}

/* Domain availability rows */
.domain-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .65rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #e2e8f0;
    border-radius: 8px;
    margin-bottom: .25rem;
    background: rgba(255,255,255,.04);
}
.domain-row.domain-match {
    background: rgba(126,34,206,.18) !important;
    border-color: rgba(168,85,247,.35) !important;
}
.domain-row .btn--sm.btn--base {
    background: linear-gradient(135deg,#7e22ce,#ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-size: .8rem !important;
    padding: .3rem .85rem !important;
}
.domain-row .btn--sm.btn--base-outline {
    background: transparent !important;
    border: 1px solid rgba(168,85,247,.5) !important;
    border-radius: 50px !important;
    color: #c084fc !important;
    font-size: .8rem !important;
    padding: .3rem .85rem !important;
}
/* Page heading text */
.bg--light .col-lg-8 h3,
.section-full .col-lg-8 h3 {
    background: linear-gradient(90deg,#a855f7,#ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800 !important;
}
.bg--light .col-lg-8 h5,
.section-full .col-lg-8 h5 {
    color: #e2e8f0 !important;
}
.bg--light .col-lg-8 p,
.section-full .col-lg-8 p {
    color: rgba(255,255,255,.55) !important;
    font-size: .9rem !important;
}
/* Product description text */
.bg--light .fs-12,
.section-full .fs-12 {
    color: rgba(255,255,255,.6) !important;
    line-height: 1.6 !important;
}
/* "Choose a Domain" heading */
.domainArea h3 {
    background: linear-gradient(90deg,#a855f7,#ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}
/* Availability messages */
.availability h3 { color: #e2e8f0; }
.availability .text--base { color: #a855f7 !important; }
.availability .text--danger { color: #f87171 !important; }
/* Stock out alert */
.alert.alert-warning { background: rgba(245,158,11,.15) !important; border: 1px solid rgba(245,158,11,.35) !important; color: #fcd34d !important; }

/* ═══════════════════════════════════════════════════════
   PRODUCT CONFIGURE — Cart-style dark glassmorphism cards
   ═══════════════════════════════════════════════════════ */
.gcc-page-title {
    color: #fff;
    font-weight: 800;
    margin-bottom: .5rem;
}
.gcc-page-title i { color: #c084fc; }
.gcc-page-sub { color: rgba(255,255,255,.5); font-size: .9rem; }

.genz-config-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .2s;
}
.genz-config-card:hover { border-color: rgba(126,34,206,.3); }

.gcc-header {
    background: linear-gradient(90deg, rgba(126,34,206,.45), rgba(236,72,153,.3));
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: .85rem 1.25rem;
    color: #f1f5f9;
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
}
.gcc-header i { color: #c084fc; margin-right: .5rem; }
.gcc-header label { color: #f1f5f9; font-weight: 600; margin-bottom: 0; cursor: pointer; }
.gcc-header input[type=radio] { accent-color: #a855f7; width: 16px; height: 16px; flex-shrink: 0; }

.gcc-body {
    padding: 1.25rem;
}

.gcc-label {
    display: block;
    color: #c4b5fd;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}

.gcc-desc {
    color: rgba(255,255,255,.55);
    font-size: .85rem;
    line-height: 1.6;
}

/* Form controls inside .genz-config-card */
.genz-config-card .form-control,
.genz-config-card .form--control,
.genz-config-card select.form-select {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(126,34,206,.35) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
}
.genz-config-card .form-control::placeholder { color: rgba(255,255,255,.3) !important; }
.genz-config-card .form-control:focus,
.genz-config-card select.form-select:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168,85,247,.18) !important;
    background: rgba(126,34,206,.12) !important;
}
.genz-config-card select option { background: #1a0533; color: #fff; }
.genz-config-card .input-group-text {
    background: rgba(126,34,206,.3) !important;
    border: 1px solid rgba(126,34,206,.35) !important;
    color: #c084fc !important;
}
/* Check / Use button inside domain forms */
.genz-config-card .btn.btn--base {
    background: linear-gradient(135deg,#7e22ce,#ec4899) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

/* Billing type pill tabs inside config card */
.billing-type-tabs {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(126,34,206,.25) !important;
    flex-wrap: wrap;
    gap: .3rem !important;
}
.billing-type-tabs .nav-link {
    color: rgba(255,255,255,.6) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    background: transparent !important;
    border-radius: 50px !important;
    font-size: .78rem !important;
    padding: .35rem .9rem !important;
    transition: all .2s !important;
}
.billing-type-tabs .nav-link:hover {
    background: rgba(126,34,206,.25) !important;
    color: #c084fc !important;
    border-color: rgba(168,85,247,.4) !important;
}
.billing-type-tabs .nav-link.active,
.billing-type-tabs .nav-link.bg-primary {
    background: linear-gradient(135deg,#7e22ce,#ec4899) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 12px rgba(126,34,206,.4) !important;
}
.billing-type-tabs .nav-link.inactive-pill {
    background: transparent !important;
    color: rgba(255,255,255,.5) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
}
.billing-type-tabs .nav-link.inactive-pill:hover {
    background: rgba(126,34,206,.2) !important;
    color: #c084fc !important;
}

/* Configurable options info (shown inside order summary) */
.configurablePrice .d-flex {
    color: rgba(255,255,255,.65) !important;
    font-size: .8rem !important;
    padding: .25rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Domain availability rows */
.domain-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #e2e8f0;
    border-radius: 8px;
    margin-bottom: .2rem;
    background: rgba(255,255,255,.04);
}
.domain-row.domain-match { background: rgba(126,34,206,.18) !important; border-color: rgba(168,85,247,.3) !important; }
.domain-row .btn--sm.btn--base {
    background: linear-gradient(135deg,#7e22ce,#ec4899) !important;
    border: none !important; border-radius: 50px !important;
    color: #fff !important; font-size: .78rem !important; padding: .3rem .85rem !important;
}
.domain-row .btn--sm.btn--base-outline {
    background: transparent !important;
    border: 1px solid rgba(168,85,247,.45) !important; border-radius: 50px !important;
    color: #c084fc !important; font-size: .78rem !important; padding: .3rem .85rem !important;
}
/* Domain availability heading */
.availability h3 { color: #e2e8f0; }
.availability .text--base { color: #a855f7 !important; }
.availability .text--danger { color: #f87171 !important; }

/* Empty notice (out of stock) */
.genz-empty-notice {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 2.5rem 1rem;
    text-align: center;
    color: rgba(255,255,255,.5);
}
.genz-empty-notice i { font-size: 2.5rem; color: rgba(126,34,206,.5); display: block; margin-bottom: .75rem; }

/* ═══════════════════════════════════════════════════════
   BLOG / ANNOUNCEMENT DETAIL PAGE — readable on dark bg
   ═══════════════════════════════════════════════════════ */
.contact-section .card.custom--card {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 18px !important;
    color: #e2e8f0 !important;
}
/* Title */
.contact-section .card.custom--card h3 {
    color: #f1f5f9 !important;
    font-weight: 800 !important;
}
/* Meta (date / time) */
.contact-section .card.custom--card .list-inline .text-muted,
.contact-section .card.custom--card .list-inline i {
    color: #a78bfa !important;
}
/* Description area — force ALL text content visible */
.contact-section .card.custom--card .mt-4.mb-4,
.contact-section .card.custom--card .mt-4.mb-4 * {
    color: #e2e8f0 !important;
}
/* Headings inside editor content */
.contact-section .card.custom--card .mt-4.mb-4 h1,
.contact-section .card.custom--card .mt-4.mb-4 h2,
.contact-section .card.custom--card .mt-4.mb-4 h3,
.contact-section .card.custom--card .mt-4.mb-4 h4,
.contact-section .card.custom--card .mt-4.mb-4 h5,
.contact-section .card.custom--card .mt-4.mb-4 h6 {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
}
/* Inline styles with hardcoded dark colors — override */
.contact-section .card.custom--card .mt-4.mb-4 [style*="color:#000"],
.contact-section .card.custom--card .mt-4.mb-4 [style*="color: #000"],
.contact-section .card.custom--card .mt-4.mb-4 [style*="color:black"],
.contact-section .card.custom--card .mt-4.mb-4 [style*="color:#333"],
.contact-section .card.custom--card .mt-4.mb-4 [style*="color:#111"],
.contact-section .card.custom--card .mt-4.mb-4 [style*="color:#222"],
.contact-section .card.custom--card .mt-4.mb-4 [style*="color:rgb(0"],
.contact-section .card.custom--card .mt-4.mb-4 [style*="color: rgb(0"] {
    color: #e2e8f0 !important;
}
/* White text that would be invisible on white bg → make it visible */
.contact-section .card.custom--card .mt-4.mb-4 [style*="color:#fff"],
.contact-section .card.custom--card .mt-4.mb-4 [style*="color: #fff"],
.contact-section .card.custom--card .mt-4.mb-4 [style*="color:white"],
.contact-section .card.custom--card .mt-4.mb-4 [style*="color:#ffffff"] {
    color: #f1f5f9 !important;
}
/* Links inside content */
.contact-section .card.custom--card .mt-4.mb-4 a {
    color: #c084fc !important;
}
.contact-section .card.custom--card .mt-4.mb-4 a:hover { color: #ec4899 !important; }
/* Strong/bold */
.contact-section .card.custom--card .mt-4.mb-4 strong,
.contact-section .card.custom--card .mt-4.mb-4 b { color: #fff !important; }
/* Back button */
.contact-section .card.custom--card .btn.btn--base {
    background: linear-gradient(135deg,#7e22ce,#ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════
   ANNOUNCEMENTS LISTING PAGE
   ═══════════════════════════════════════════════════════ */
.announcements-section {
    background: linear-gradient(135deg, #0f0c29 0%, #1a0533 50%, #0d1b2a 100%);
    min-height: 60vh;
}
.genz-announce-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}
.genz-announce-card:hover {
    border-color: rgba(168,85,247,.4);
    transform: translateY(-2px);
}
.gac-body {
    padding: 1.5rem 1.75rem;
}
.gac-title {
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: .5rem;
    line-height: 1.4;
}
.gac-title a {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none !important;
    transition: opacity .2s;
}
.gac-title a:hover { opacity: .8; }
.gac-meta {
    font-size: .8rem;
    color: #a78bfa;
    margin-bottom: .85rem;
}
.gac-excerpt {
    color: rgba(255,255,255,.7);
    font-size: .9rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.gac-read-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, #7e22ce, #ec4899);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 50px;
    padding: .4rem 1.1rem;
    font-size: .82rem;
    font-weight: 700;
    transition: opacity .2s, transform .2s;
}
.gac-read-more:hover { opacity: .88; transform: translateY(-1px); }

/* ── Blog detail page (single announcement) ── */
.contact-section .card.custom--card {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 16px !important;
}
.contact-section .card.custom--card .card-body { background: transparent !important; }
.contact-section .card.custom--card h3 { color: #f1f5f9 !important; font-weight: 800 !important; }
.contact-section .card.custom--card .list-inline .text-muted,
.contact-section .card.custom--card .list-inline i { color: #a78bfa !important; }
/* All description content forced readable */
.contact-section .card.custom--card .mt-4.mb-4 { color: #e2e8f0 !important; }
.contact-section .card.custom--card .mt-4.mb-4 * { color: #e2e8f0 !important; }
.contact-section .card.custom--card .mt-4.mb-4 h1,
.contact-section .card.custom--card .mt-4.mb-4 h2,
.contact-section .card.custom--card .mt-4.mb-4 h3,
.contact-section .card.custom--card .mt-4.mb-4 h4,
.contact-section .card.custom--card .mt-4.mb-4 h5,
.contact-section .card.custom--card .mt-4.mb-4 h6 { color: #f1f5f9 !important; font-weight: 700 !important; }
.contact-section .card.custom--card .mt-4.mb-4 a { color: #c084fc !important; }
.contact-section .card.custom--card .btn.btn--base {
    background: linear-gradient(135deg,#7e22ce,#ec4899) !important;
    border: none !important; border-radius: 50px !important; color: #fff !important; font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════
   POLICY PAGES (Privacy Policy, Terms of Service, etc.)
   ═══════════════════════════════════════════════════════ */
.policy-section {
    background: linear-gradient(135deg, #0f0c29 0%, #1a0533 50%, #0d1b2a 100%);
    min-height: 60vh;
}
.policy-content {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    padding: 2.5rem 2.75rem;
    color: #e2e8f0;
    line-height: 1.8;
    font-size: .95rem;
}
/* All text nodes */
.policy-content,
.policy-content * { color: #e2e8f0 !important; }
/* Headings */
.policy-content h1,
.policy-content h2,
.policy-content h3,
.policy-content h4,
.policy-content h5,
.policy-content h6 {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    margin-top: 1.75rem !important;
    margin-bottom: .6rem !important;
}
.policy-content h1 { font-size: 1.8rem !important; }
.policy-content h2 {
    background: linear-gradient(90deg,#a855f7,#ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.35rem !important;
}
.policy-content h3 { color: #c084fc !important; font-size: 1.1rem !important; }
/* Paragraphs */
.policy-content p { color: rgba(255,255,255,.75) !important; margin-bottom: .9rem !important; }
/* Links */
.policy-content a { color: #a855f7 !important; text-decoration: underline; }
.policy-content a:hover { color: #ec4899 !important; }
/* Lists */
.policy-content ul,
.policy-content ol { padding-left: 1.5rem; }
.policy-content li { color: rgba(255,255,255,.75) !important; margin-bottom: .35rem; }
/* Strong / bold */
.policy-content strong,
.policy-content b { color: #f1f5f9 !important; }
/* Horizontal rules */
.policy-content hr { border-color: rgba(255,255,255,.1) !important; margin: 1.5rem 0; }
/* Block quotes */
.policy-content blockquote {
    border-left: 3px solid #7e22ce !important;
    padding-left: 1rem;
    color: rgba(255,255,255,.6) !important;
    font-style: italic;
}
/* Tables inside policy */
.policy-content table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.policy-content table th {
    background: rgba(126,34,206,.4) !important;
    color: #fff !important;
    padding: .6rem .9rem;
    border: 1px solid rgba(255,255,255,.1);
}
.policy-content table td {
    color: #e2e8f0 !important;
    padding: .5rem .9rem;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}
/* Override any hardcoded dark inline colours from the editor */
.policy-content [style*="color:#000"],
.policy-content [style*="color: #000"],
.policy-content [style*="color:black"],
.policy-content [style*="color:#333"],
.policy-content [style*="color:#111"],
.policy-content [style*="color:#222"],
.policy-content [style*="color:rgb(0"],
.policy-content [style*="color: rgb(0"] { color: #e2e8f0 !important; }
.policy-content [style*="color:#fff"],
.policy-content [style*="color: #fff"],
.policy-content [style*="color:white"],
.policy-content [style*="color:#ffffff"] { color: #f1f5f9 !important; }
/* Override hardcoded light backgrounds from editor */
.policy-content [style*="background:#fff"],
.policy-content [style*="background: #fff"],
.policy-content [style*="background:white"],
.policy-content [style*="background-color:#fff"],
.policy-content [style*="background-color: #fff"],
.policy-content [style*="background-color:white"] { background: transparent !important; }

/* ═══════════════════════════════════════════════════════
   GLOBAL DARK-THEME FIX — All user dashboard & public
   pages: text visibility, tables, cards, forms, modals,
   tickets, pagination, badges, profile, VPS panel, etc.
   ═══════════════════════════════════════════════════════ */

/* ── GLOBAL TEXT on dark backgrounds ── */
.bg--light,
.bg--light *:not(.badge):not([class*="btn"]):not(option):not(i):not(.text--success):not(.text--danger):not(.text--warning):not(.text--info):not(.text--base) {
    color: #e2e8f0;
}
.bg--light h1, .bg--light h2, .bg--light h3,
.bg--light h4, .bg--light h5, .bg--light h6 {
    color: #f1f5f9 !important;
}
.bg--light .text-muted { color: rgba(255,255,255,.45) !important; }
.bg--light .text-dark { color: #e2e8f0 !important; }
.bg--light .text-black { color: #e2e8f0 !important; }
.bg--light p { color: rgba(255,255,255,.7); }
.bg--light label, .bg--light .form-label { color: #c4b5fd !important; font-weight: 600 !important; }
.bg--light small:not(.text--success):not(.text--danger) { color: rgba(255,255,255,.45) !important; }
.bg--light .lead { color: rgba(255,255,255,.55) !important; }

/* ── TABLES — universal dark style ── */
.bg--light table.table,
.bg--light .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,.03);
    --bs-table-hover-bg: rgba(126,34,206,.12);
    color: #e2e8f0;
    border-color: rgba(255,255,255,.08);
}
.bg--light table.table thead tr {
    background: linear-gradient(90deg, rgba(126,34,206,.5), rgba(236,72,153,.35)) !important;
}
.bg--light table.table thead th {
    background: transparent !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: .85rem !important;
    letter-spacing: .03em !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    padding: .85rem 1rem !important;
    white-space: nowrap;
}
.bg--light table.table tbody td {
    background: transparent !important;
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    padding: .75rem 1rem !important;
    vertical-align: middle;
}
.bg--light table.table tbody tr:hover td {
    background: rgba(126,34,206,.08) !important;
}
/* Table links */
.bg--light table.table a { color: #c084fc !important; }
.bg--light table.table a:hover { color: #ec4899 !important; }
/* Table fw-bold inside dark bg */
.bg--light table.table .fw-bold,
.bg--light table.table strong { color: #f1f5f9 !important; }
/* Empty message row */
.bg--light table.table .empty-message td { color: rgba(255,255,255,.4) !important; text-align: center !important; }

/* ── CARDS (.custom--card and generic .card) on dark bg ── */
.bg--light .card.custom--card,
.bg--light .card.custom--card.style-two {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 16px !important;
    overflow: hidden;
}
.bg--light .card.custom--card > .card-header,
.bg--light .card.custom--card.style-two > .card-header {
    background: linear-gradient(90deg, rgba(126,34,206,.45), rgba(236,72,153,.3)) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    color: #fff !important;
}
.bg--light .card.custom--card .card-header .card-title,
.bg--light .card.custom--card .card-header h5,
.bg--light .card.custom--card .card-header h6 {
    color: #fff !important;
}
.bg--light .card.custom--card > .card-body {
    background: transparent !important;
    color: #e2e8f0 !important;
}

/* ── FORM CONTROLS (universal) ── */
.bg--light .form-control,
.bg--light .form--control,
.bg--light select.form-select,
.bg--light textarea.form-control {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(126,34,206,.35) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
}
.bg--light .form-control::placeholder,
.bg--light .form--control::placeholder,
.bg--light textarea.form-control::placeholder { color: rgba(255,255,255,.3) !important; }
.bg--light .form-control:focus,
.bg--light .form--control:focus,
.bg--light select.form-select:focus,
.bg--light textarea.form-control:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168,85,247,.18) !important;
    background: rgba(126,34,206,.12) !important;
}
.bg--light select.form-select option,
.bg--light select.form-control option { background: #1a0533; color: #fff; }
.bg--light .input-group-text {
    background: rgba(126,34,206,.3) !important;
    border: 1px solid rgba(126,34,206,.35) !important;
    color: #c084fc !important;
}
/* Disabled / readonly inputs */
.bg--light .form-control:disabled,
.bg--light .form-control[readonly] {
    background: rgba(255,255,255,.04) !important;
    color: rgba(255,255,255,.5) !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* ── BUTTONS — gradient style ── */
.bg--light .btn.btn--base,
.bg--light .btn.bg--base,
.bg--light button.btn--base {
    background: linear-gradient(135deg, #7e22ce, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: 700 !important;
    transition: all .25s !important;
}
.bg--light .btn.btn--base:hover { opacity: .88 !important; transform: translateY(-1px) !important; }
.bg--light .btn.btn--dark {
    background: rgba(255,255,255,.1) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    color: #e2e8f0 !important;
    border-radius: 50px !important;
}

/* ── BADGES ── */
.bg--light .badge--icon.badge--fill-base {
    background: linear-gradient(135deg, #7e22ce, #ec4899) !important;
    color: #fff !important;
    border: none !important;
}
.bg--light .badge--icon.badge--fill-success {
    background: linear-gradient(135deg, #059669, #2563eb) !important;
    color: #fff !important;
    border: none !important;
}
.bg--light .badge--dark { background: rgba(255,255,255,.1) !important; color: #e2e8f0 !important; }
.bg--light .badge--warning { background: rgba(245,158,11,.25) !important; color: #fcd34d !important; }
.bg--light .badge--danger { background: rgba(239,68,68,.2) !important; color: #fca5a5 !important; }
.bg--light .badge--success { background: rgba(34,197,94,.2) !important; color: #86efac !important; }
.bg--light .badge--info { background: rgba(14,165,233,.2) !important; color: #7dd3fc !important; }
.bg--light .badge--primary, .bg--light .badge--base { background: rgba(126,34,206,.3) !important; color: #c084fc !important; }

/* ── PAGINATION ── */
.bg--light .pagination .page-item .page-link {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #c084fc !important;
    border-radius: 8px !important;
    margin: 0 2px;
}
.bg--light .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #7e22ce, #ec4899) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.bg--light .pagination .page-item.disabled .page-link {
    background: rgba(255,255,255,.03) !important;
    color: rgba(255,255,255,.25) !important;
}
.bg--light .pagination .page-item .page-link:hover {
    background: rgba(126,34,206,.25) !important;
    color: #fff !important;
}

/* ── MODALS (detail/deposit/ticket) ── */
.modal-content {
    background: linear-gradient(135deg, #1a0533, #0d1b2a) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 16px !important;
    color: #e2e8f0 !important;
}
.modal-header {
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    background: linear-gradient(90deg, rgba(126,34,206,.4), rgba(236,72,153,.25)) !important;
    border-radius: 16px 16px 0 0 !important;
}
.modal-header .modal-title { color: #fff !important; }
.modal-header .close,
.modal-header .btn-close { color: #fff !important; filter: invert(1); }
.modal-body { color: #e2e8f0 !important; }
.modal-body .list-group-item {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #e2e8f0 !important;
}
.modal-footer {
    border-top: 1px solid rgba(255,255,255,.1) !important;
    background: transparent !important;
}

/* ── SUPPORT TICKETS ── */
/* Ticket message rows */
.bg--light .row.border {
    border-color: rgba(255,255,255,.1) !important;
    background: rgba(255,255,255,.03) !important;
    border-radius: 12px !important;
}
/* Staff message (override inline background) */
.bg--light .row.border-warning[style*="background"] {
    background: rgba(126,34,206,.12) !important;
    border-color: rgba(168,85,247,.35) !important;
}
.bg--light .border-end { border-color: rgba(255,255,255,.1) !important; }
.bg--light .border-bottom { border-color: rgba(255,255,255,.08) !important; }
.bg--light .border-top { border-color: rgba(255,255,255,.08) !important; }
.bg--light .border { border-color: rgba(255,255,255,.1) !important; }

/* File upload inside tickets */
.bg--light .ticket-attachments-message { color: rgba(255,255,255,.4) !important; }
.bg--light .file-upload .text--danger { color: #fca5a5 !important; }

/* ── SEARCH FORM row ── */
.bg--light .d-flex.flex-wrap.gap-4 label,
.bg--light .d-flex.flex-wrap.gap-4 .label { color: #c4b5fd !important; }

/* ── SERVICE DETAILS page ── */
.bg--light .list-group-item {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #e2e8f0 !important;
}
.bg--light .list-group-item .fw-bold,
.bg--light .list-group-item strong { color: #f1f5f9 !important; }

/* ── FAQ SECTION ── */
.faq-section {
    background: linear-gradient(135deg, #0f0c29 0%, #1a0533 50%, #0d1b2a 100%) !important;
}
.faq-section .accordion-item {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 12px !important;
    margin-bottom: .5rem;
}
.faq-section .accordion-button {
    background: transparent !important;
    color: #f1f5f9 !important;
    font-weight: 700;
    box-shadow: none !important;
}
.faq-section .accordion-button::after { filter: invert(1) brightness(2); }
.faq-section .accordion-button:not(.collapsed) {
    color: #c084fc !important;
    background: rgba(126,34,206,.15) !important;
}
.faq-section .accordion-body { color: rgba(255,255,255,.7) !important; background: transparent !important; }

/* ── CONTACT PAGE ── */
.contact-section .custom--card label { color: #c4b5fd !important; }
.contact-section .custom--card .form-control { color: #f1f5f9 !important; }

/* ── KYC pages ── */
.bg--light .form-group label { color: #c4b5fd !important; }

/* ── 2FA / Auth verification pages ── */
.bg--light .verification-code-wrapper input { background: rgba(255,255,255,.07) !important; color: #f1f5f9 !important; border: 1px solid rgba(126,34,206,.35) !important; }

/* ── VPS Panel (tab-heavy) ── */
.bg--light .nav-tabs { border-bottom-color: rgba(255,255,255,.1) !important; }
.bg--light .nav-tabs .nav-link {
    color: rgba(255,255,255,.55) !important;
    border: 1px solid transparent !important;
}
.bg--light .nav-tabs .nav-link:hover { color: #c084fc !important; border-color: rgba(168,85,247,.3) !important; }
.bg--light .nav-tabs .nav-link.active {
    background: rgba(126,34,206,.2) !important;
    color: #c084fc !important;
    border-color: rgba(168,85,247,.5) rgba(168,85,247,.5) transparent !important;
}
.bg--light .tab-content { color: #e2e8f0 !important; }

/* ── DOMAIN CONFIG page ── */
.bg--light .domain-row span { color: #e2e8f0; }

/* ── PAYMENT GATEWAY pages (Stripe, Paystack etc) ── */
.bg--light .card .card-body label { color: #c4b5fd !important; }
.bg--light .card .card-body .text-muted { color: rgba(255,255,255,.4) !important; }

/* ── ALERT overrides ── */
.bg--light .alert {
    border-radius: 12px !important;
}
.bg--light .alert-success { background: rgba(34,197,94,.12) !important; border-color: rgba(34,197,94,.3) !important; color: #86efac !important; }
.bg--light .alert-danger { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.3) !important; color: #fca5a5 !important; }
.bg--light .alert-warning { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.3) !important; color: #fcd34d !important; }
.bg--light .alert-info { background: rgba(14,165,233,.12) !important; border-color: rgba(14,165,233,.3) !important; color: #7dd3fc !important; }

/* ── REDUCE excess padding on dashboard/user pages ── */
.pt-60.pb-60 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* ── Confirmation modal ── */
.bg--light + .modal .modal-content,
.confirmation-modal .modal-content { background: linear-gradient(135deg, #1a0533, #0d1b2a) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #e2e8f0 !important; }

/* ── Extra padding removal (cards that are too narrow) ── */
.bg--light .extra-padding { padding: 1.5rem !important; }
.bg--light .card-body { padding: 1.25rem !important; }

/* ── RESPONSIVE — smaller padding on mobile ── */
@media (max-width: 767px) {
    .bg--light .card-body { padding: 1rem !important; }
    .bg--light .container { padding-left: 12px !important; padding-right: 12px !important; }
    .pt-60.pb-60 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
}

/* ── Contact page cards ── */
.contact-section .contact-card {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    text-align: center;
}
.contact-section .contact-card__icon { color: #c084fc !important; }
.contact-section .contact-card__icon i { font-size: 2rem; }
.contact-section .contact-card__title { color: #f1f5f9 !important; font-weight: 700 !important; }
.contact-section .contact-card__desc { color: rgba(255,255,255,.6) !important; font-size: .9rem; }
.contact-section .contact-form.card { border: none !important; }
.contact-section .title { color: #f1f5f9 !important; }

/* ── Service details .new-card ── */
.bg--light .new-card {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 14px !important;
    padding: 1.5rem !important;
    text-align: center;
    color: #e2e8f0 !important;
}
.bg--light .new-card h3,
.bg--light .new-card h4 { color: #f1f5f9 !important; }
.bg--light .new-card .fa-stack .fa-circle { color: rgba(126,34,206,.5) !important; }
.bg--light .new-card .fa-stack .fa-inverse { color: #fff !important; }
.bg--light .new-card a { color: #c084fc !important; }
.bg--light .new-card a:hover { color: #ec4899 !important; }
/* Pending/Suspended status cards */
.bg--light .new-card.bg--warning {
    background: rgba(245,158,11,.15) !important;
    border-color: rgba(245,158,11,.35) !important;
    color: #fcd34d !important;
}
.bg--light .new-card.bg--warning h3 { color: #fcd34d !important; }

/* ── Progress bar (disk usage) ── */
.bg--light .progress.custom--progress {
    background: rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    height: 1.5rem;
}
.bg--light .progress-bar {
    background: linear-gradient(90deg, #7e22ce, #ec4899) !important;
}

/* ── Auth (login/register) section ── */
.account-section {
    background: linear-gradient(135deg, #0f0c29 0%, #1a0533 50%, #0d1b2a 100%) !important;
    min-height: 100vh;
    padding: 2rem 0;
}
.account-section .account-form,
.account-section .card,
.account-section form {
    color: #e2e8f0;
}
.account-section label { color: #c4b5fd !important; font-weight: 600 !important; }
.account-section .form-control,
.account-section .form--control {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(126,34,206,.35) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
}
.account-section .form-control::placeholder { color: rgba(255,255,255,.3) !important; }
.account-section .form-control:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168,85,247,.18) !important;
}
.account-section select option { background: #1a0533; color: #fff; }
.account-section h2, .account-section h3, .account-section h4,
.account-section h5, .account-section h6 { color: #f1f5f9 !important; }
.account-section p { color: rgba(255,255,255,.6); }
.account-section a { color: #c084fc; }
.account-section a:hover { color: #ec4899; }
.account-section .btn.btn--base,
.account-section button.btn--base {
    background: linear-gradient(135deg, #7e22ce, #ec4899) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.account-section .text-muted { color: rgba(255,255,255,.45) !important; }
/* Phone code select */
.account-section .input-group-text {
    background: rgba(126,34,206,.3) !important;
    border: 1px solid rgba(126,34,206,.35) !important;
    color: #c084fc !important;
}
/* Password strength popup */
.account-section .input-popup {
    background: rgba(15,12,41,.95) !important;
    border: 1px solid rgba(126,34,206,.35) !important;
    border-radius: 10px !important;
    color: #e2e8f0 !important;
}
.account-section .input-popup .error { color: #fca5a5 !important; }
.account-section .input-popup .success { color: #86efac !important; }

/* ── Domain details links ── */
.bg--light .card-header a,
.bg--light .card-body a:not(.btn):not(.badge) { color: #c084fc !important; }
.bg--light .card-header a:hover,
.bg--light .card-body a:not(.btn):not(.badge):hover { color: #ec4899 !important; }

/* ── VPS Panel extra styles ── */
.bg--light .btn.btn--success { background: linear-gradient(135deg, #059669, #2563eb) !important; border: none !important; color: #fff !important; border-radius: 50px !important; }
.bg--light .btn.btn--danger,
.bg--light .btn.btn--warning { border-radius: 50px !important; }
.bg--light .btn.btn--primary { background: linear-gradient(135deg, #2563eb, #7e22ce) !important; border: none !important; color: #fff !important; border-radius: 50px !important; }
.bg--light .btn.btn--xs { font-size: .78rem !important; padding: .3rem .8rem !important; }
.bg--light .copy-btn { background: rgba(255,255,255,.1) !important; border: 1px solid rgba(255,255,255,.15) !important; color: #c084fc !important; }

/* ── Crypto payment page ── */
.bg--light .deposit-card,
.bg--light .gateway-card {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 16px !important;
    color: #e2e8f0 !important;
}

/* ── User data extra form page ── */
.bg--light .form-group .text--danger { color: #ec4899 !important; }
.bg--light .form-check-label { color: #e2e8f0 !important; }
.bg--light .form-check-input { background-color: rgba(255,255,255,.1) !important; border-color: rgba(126,34,206,.4) !important; }
.bg--light .form-check-input:checked { background-color: #7e22ce !important; border-color: #7e22ce !important; }

/* ── Domain search register page ── */
.bg--light .domain-search-form input { background: rgba(255,255,255,.07) !important; color: #f1f5f9 !important; border: 1px solid rgba(126,34,206,.35) !important; }