/* ============================================================
   VPSURI ORDERFORM — DARK RED PREMIUM THEME
   Complete styling for all WHMCS cart/orderform pages
   ============================================================ */

/* ============================
   1. GLOBALS
   ============================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: #020202 !important;
  font-family: 'Inter', 'Open Sans', sans-serif !important;
  color: #ccc !important;
  padding-top: 0 !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: #fff !important; }
p { color: #888 !important; }
a { color: #e60000; transition: color 0.25s; }
a:hover { color: #ff3333; text-decoration: none; }
img { max-width: 100%; }
hr { border-color: rgba(255,255,255,0.06) !important; }

/* ============================
   2. ORDERFORM LAYOUT
   ============================ */
#order-standard_cart,
#order-vpsuri,
#order-domain-register,
#order-cart,
#order-complete,
#order-transfer,
#order-products,
#order-configure,
#order-configure-domain {
  max-width: 1260px;
  margin: 0 auto;
  padding: 60px 30px 120px;
}

/* Row override for cart layout */
#order-standard_cart > .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

/* Sidebar */
.cart-sidebar {
  width: 260px;
  flex-shrink: 0;
  padding: 0 15px;
}

/* Main body */
.cart-body {
  flex: 1;
  min-width: 0;
  padding: 0 15px;
}

/* No sidebar layout — full width */
.cart-body-full { max-width: 900px; margin: 0 auto; }

/* ============================
   3. PROGRESS STEPS
   ============================ */
.of-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 60px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.of-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 1;
  max-width: 160px;
}
.of-step::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.06);
  z-index: 0;
}
.of-step:last-child::after { display: none; }
.of-step-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: #444;
  position: relative; z-index: 1;
  transition: all 0.3s;
}
.of-step-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #444 !important;
}
.of-step.active .of-step-icon {
  background: rgba(230,0,0,0.15);
  border-color: rgba(230,0,0,0.5);
  color: #e60000;
  box-shadow: 0 0 20px rgba(230,0,0,0.2);
}
.of-step.active .of-step-label { color: #fff !important; }
.of-step.done .of-step-icon { background: #e60000; border-color: #e60000; color: #fff; }
.of-step.done .of-step-label { color: #888 !important; }

/* ============================
   4. PAGE HEADERS
   ============================ */
.of-page-header {
  text-align: center;
  margin-bottom: 50px;
}
.of-page-header .eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #e60000;
  margin-bottom: 14px;
  display: block;
}
.of-page-header h1,
.of-page-header h2 {
  font-size: 40px !important;
  font-weight: 950 !important;
  color: #fff !important;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 14px !important;
}
.of-page-header p {
  font-size: 17px;
  color: #555 !important;
  margin: 0;
}

/* Header lined (WHMCS default class) */
.header-lined {
  margin-bottom: 40px;
}
.header-lined h1 {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #fff !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  margin-bottom: 0 !important;
}

/* Sub-headings (checkout sections) */
#order-standard_cart .sub-heading,
.sub-heading,
.sub-heading.pb-1 {
  height: auto !important;
  border-top: none !important;
  border-bottom: none !important;
  text-align: left !important;
  margin: 40px 0 22px !important;
  padding: 0 !important;
}
#order-standard_cart .sub-heading span,
.sub-heading span,
.sub-heading .primary-bg-color {
  position: static !important;
  top: 0 !important;
  background: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding: 0 0 0 14px !important;
  border-left: 3px solid #e60000;
  display: block !important;
  line-height: 1.4 !important;
}
.sub-heading span small,
.sub-heading span i { text-transform: none !important; letter-spacing: 0 !important; color: #666 !important; font-weight: 600 !important; font-size: 12px !important; }

/* ============================
   5. SIDEBAR (cart categories)
   ============================ */
.cart-sidebar .sidebar {
  background: rgba(10,10,12,0.8);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(10px);
  position: sticky;
  top: 100px;
}
.cart-sidebar h3,
.cart-sidebar .sidebar-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #444 !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.cart-sidebar ul { list-style: none; padding: 0; margin: 0; }
.cart-sidebar ul li a {
  display: block;
  padding: 10px 14px;
  color: #777 !important;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s;
  text-decoration: none !important;
}
.cart-sidebar ul li a:hover,
.cart-sidebar ul li a.active,
.cart-sidebar ul li.active a {
  background: rgba(230,0,0,0.08);
  color: #fff !important;
  padding-left: 18px;
}
.cart-sidebar ul li a i {
  color: #e60000;
  margin-right: 8px;
  width: 16px;
}

/* ============================
   6. PRODUCT CARDS (products.tpl)
   ============================ */
.products { padding: 0; }
.products .row-eq-height {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.product {
  background: rgba(10,10,12,0.85) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product:hover {
  border-color: rgba(230,0,0,0.3) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
  transform: translateY(-6px);
}
.product header {
  background: rgba(230,0,0,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 24px 28px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #fff !important;
}
.product header .qty {
  float: right;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  background: rgba(255,255,255,0.04);
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 2px;
}
.product-desc {
  padding: 24px 28px;
  flex: 1;
}
.product-desc p {
  color: #666 !important;
  font-size: 14px !important;
  line-height: 1.6;
  margin-bottom: 16px !important;
}
.product-desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-desc ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 13px;
  color: #888 !important;
}
.product-desc ul li:last-child { border: none; }
.product-desc ul li .feature-value {
  color: #e60000;
  font-weight: 800;
  min-width: 60px;
}
.product footer {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding: 20px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.product-pricing .price {
  font-size: 28px !important;
  font-weight: 950 !important;
  color: #fff !important;
  letter-spacing: -1px;
  line-height: 1;
}
.product-pricing { line-height: 1.3; }
.btn-order-now {
  background: linear-gradient(90deg, #e60000, #cc0000) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: all 0.3s !important;
  box-shadow: 0 6px 20px rgba(230,0,0,0.3) !important;
  white-space: nowrap;
}
.btn-order-now:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(230,0,0,0.5) !important;
  background: linear-gradient(90deg, #ff1a1a, #e60000) !important;
}

/* ============================
   7. BUTTONS
   ============================ */
.btn-primary, .btn-success, .btn-info {
  background: linear-gradient(90deg, #e60000, #cc0000) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 12px 28px !important;
  height: auto !important;
  transition: all 0.3s !important;
  box-shadow: 0 6px 20px rgba(230,0,0,0.3) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover {
  background: linear-gradient(90deg, #ff1a1a, #e60000) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(230,0,0,0.5) !important;
  color: #fff !important;
}
.btn-default, .btn-warning {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  height: auto !important;
  transition: all 0.3s !important;
}
.btn-default:hover, .btn-warning:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
.btn-danger {
  background: rgba(230,0,0,0.15) !important;
  border: 1px solid rgba(230,0,0,0.35) !important;
  color: #e60000 !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  height: auto !important;
}
.btn-lg {
  padding: 16px 40px !important;
  font-size: 15px !important;
}
.btn-sm {
  padding: 8px 16px !important;
  font-size: 12px !important;
}

/* Order completion button */
#btnCompleteOrder {
  background: linear-gradient(90deg, #e60000, #cc0000) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  padding: 20px 60px !important;
  height: auto !important;
  transition: all 0.35s !important;
  box-shadow: 0 10px 35px rgba(230,0,0,0.4) !important;
  text-transform: uppercase !important;
}
#btnCompleteOrder:hover {
  box-shadow: 0 15px 50px rgba(230,0,0,0.6) !important;
  transform: translateY(-3px) !important;
}

/* ============================
   8. FORMS & INPUTS
   ============================ */
.form-group { margin-bottom: 20px !important; }
.form-group label {
  color: #888 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 8px !important;
}
.form-control,
.field,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select, textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  height: auto !important;
  font-size: 15px !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
  -webkit-appearance: none;
}
.form-control:focus,
.field:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(230,0,0,0.5) !important;
  box-shadow: 0 0 0 3px rgba(230,0,0,0.1) !important;
  background: rgba(255,255,255,0.06) !important;
  outline: none !important;
  color: #fff !important;
}
.form-control::placeholder,
.field::placeholder,
input::placeholder { color: rgba(255,255,255,0.2) !important; }

/* Prepend icons */
.prepend-icon { position: relative; }
.prepend-icon .field-icon {
  position: absolute;
  top: 50%; left: 14px;
  transform: translateY(-50%);
  color: #444 !important;
  font-size: 15px;
  pointer-events: none;
  margin: 0 !important;
}
.prepend-icon .form-control,
.prepend-icon .field {
  padding-left: 42px !important;
}

/* Input group */
.input-group-addon {
  background: rgba(230,0,0,0.08) !important;
  border: 1px solid rgba(230,0,0,0.2) !important;
  color: #e60000 !important;
  border-radius: 10px 0 0 10px !important;
}
.input-group-btn .btn,
.input-group-append .btn {
  border-radius: 0 10px 10px 0 !important;
}

/* Select arrow */
select.form-control,
select.field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
  -webkit-appearance: none !important;
}

/* Checkbox & radio */
.radio-inline,
.checkbox-inline { color: #888 !important; }
input[type="radio"],
input[type="checkbox"] { accent-color: #e60000; }

/* ============================
   9. PANELS / CARDS (WHMCS)
   ============================ */
.panel, .card {
  background: rgba(10,10,12,0.85) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.panel-heading, .card-header {
  background: rgba(230,0,0,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  color: #fff !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 16px 22px !important;
  font-weight: 700 !important;
}
.panel-body, .card-body {
  background: transparent !important;
  padding: 24px 22px !important;
  color: #888 !important;
}
.panel-footer, .card-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 0 0 16px 16px !important;
  padding: 16px 22px !important;
}

/* ============================
   10. FIELD CONTAINER
   ============================ */
.field-container {
  background: rgba(10,10,12,0.7);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
}

/* ============================
   11. DOMAIN VALIDATION STATES
   ============================ */
.domain-validation.ok,
.domain-checker-available { color: #00e676 !important; font-weight: 700 !important; }
.domain-checker-unavailable { color: #e60000 !important; font-weight: 700 !important; }

/* ============================
   12. ALERTS
   ============================ */
.alert {
  border-radius: 12px !important;
  border: none !important;
  padding: 16px 20px !important;
  font-weight: 600 !important;
}
.alert-success { background: rgba(0,200,83,0.12) !important; border-left: 3px solid #00c853 !important; color: #00e676 !important; }
.alert-danger, .alert-error { background: rgba(230,0,0,0.12) !important; border-left: 3px solid #e60000 !important; color: #ff6666 !important; }
.alert-warning { background: rgba(255,171,0,0.12) !important; border-left: 3px solid #ffab00 !important; color: #ffd740 !important; }
.alert-info { background: rgba(0,176,255,0.1) !important; border-left: 3px solid #00b0ff !important; color: #80d8ff !important; }
.alert p, .alert ul, .alert li { color: inherit !important; }

/* ============================
   13. TABS (nav-tabs)
   ============================ */
.nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  margin-bottom: 24px;
}
.nav-tabs > li > a {
  background: transparent !important;
  color: #666 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 12px 20px !important;
  transition: all 0.2s !important;
}
.nav-tabs > li > a:hover { color: #fff !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  background: transparent !important;
  color: #e60000 !important;
  border-bottom: 2px solid #e60000 !important;
}
.tab-content { background: transparent !important; padding-top: 16px; }

/* ============================
   14. LIST GROUPS (sidebar, suggestions)
   ============================ */
.list-group-item {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  color: #888 !important;
  transition: all 0.2s !important;
}
.list-group-item:hover,
.list-group-item:focus { background: rgba(230,0,0,0.06) !important; color: #fff !important; border-color: rgba(230,0,0,0.2) !important; }
.list-group-item .domain { color: #fff !important; font-weight: 700 !important; }
.list-group-item .extension { color: #e60000 !important; font-weight: 800 !important; }
.list-group-item .price { color: #00e676 !important; font-weight: 700 !important; }
.list-group-item .btn-add-to-cart { float: right; }

/* ============================
   15. PAYMENT GATEWAY SECTION
   ============================ */
#paymentGatewaysContainer label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  margin: 6px !important;
  color: #ccc !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
#paymentGatewaysContainer label:hover {
  border-color: rgba(230,0,0,0.4) !important;
  color: #fff !important;
}
#paymentGatewaysContainer input[type="radio"]:checked + label,
#paymentGatewaysContainer label:has(input:checked) {
  border-color: rgba(230,0,0,0.5) !important;
  background: rgba(230,0,0,0.08) !important;
  color: #fff !important;
}

/* Credit card input */
.existing-cc-grid { margin-bottom: 20px; }
.cc-input-container .form-group { margin-bottom: 16px; }

/* ============================
   16. ORDER CONFIRMATION
   ============================ */
.order-confirmation {
  background: rgba(0,200,83,0.08) !important;
  border: 1px solid rgba(0,200,83,0.25) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #00e676 !important;
}
.order-confirmation span { color: #fff !important; font-size: 28px !important; font-weight: 900 !important; display: block; }

/* ============================
   17. DOMAIN PRICING TABLE
   ============================ */
.domain-pricing { margin-top: 50px; }
.tld-pricing-header {
  background: rgba(255,255,255,0.02) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 14px 20px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #555 !important;
  border-radius: 12px 12px 0 0;
}
.tld-row {
  padding: 12px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  font-size: 14px;
  color: #888 !important;
  transition: background 0.2s;
}
.tld-row:hover { background: rgba(255,255,255,0.02) !important; }
.tld-row strong { color: #fff !important; font-weight: 800 !important; }
.bg-white { background: transparent !important; border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; overflow: hidden; }
.tld-filters { margin: 30px 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.tld-filters a.badge {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #888 !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}
.tld-filters a.badge:hover,
.tld-filters a.badge.active {
  background: rgba(230,0,0,0.12) !important;
  border-color: rgba(230,0,0,0.35) !important;
  color: #fff !important;
}

/* ============================
   18. FEATURED TLDS / SPOTLIGHT
   ============================ */
.featured-tlds-container { margin-bottom: 40px; }
.featured-tld {
  background: rgba(10,10,12,0.8);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  margin-bottom: 16px;
  transition: all 0.3s;
}
.featured-tld:hover { border-color: rgba(230,0,0,0.3); transform: translateY(-4px); }
.featured-tld .img-container { height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.featured-tld .img-container img { max-height: 36px; filter: brightness(0.9); }
.featured-tld .price { font-size: 16px; font-weight: 800; color: #e60000 !important; }

/* Spotlight TLDs */
.spotlight-tlds-container { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 30px 0; }
.spotlight-tld-container { width: 140px; }
.spotlight-tld {
  background: rgba(10,10,12,0.85);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 20px 12px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff !important;
  transition: all 0.3s;
}
.spotlight-tld:hover { border-color: rgba(230,0,0,0.3); transform: translateY(-4px); }
.spotlight-tld .domain-lookup-result { margin-top: 10px; }
.spotlight-tld .price { font-size: 14px; font-weight: 700; color: #00e676 !important; display: block; }
.spotlight-tld .btn { font-size: 11px !important; padding: 6px 12px !important; }

/* ============================
   19. ORDER SUMMARY SIDEBAR
   ============================ */
.total-due-today {
  background: rgba(230,0,0,0.06);
  border: 1px solid rgba(230,0,0,0.2);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  text-align: center;
}
.total-due-today .amt {
  font-size: 32px;
  font-weight: 950;
  color: #fff !important;
  display: block;
  letter-spacing: -1px;
}
.total-due-today span:last-child { font-size: 12px; color: #555 !important; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.summary-totals { padding-top: 16px; }
.summary-totals .clearfix { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.summary-totals span { font-size: 13px; color: #777 !important; }
.product-name { display: block; font-size: 16px; font-weight: 800; color: #fff !important; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.product-group { display: block; font-size: 12px; color: #555 !important; margin-bottom: 16px; }

/* ============================
   20. DOMAIN PROMO BOX
   ============================ */
.domain-promo-box {
  background: rgba(10,10,12,0.85);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 20px;
  padding: 36px 30px;
  margin-bottom: 20px;
  text-align: center;
  transition: border-color 0.3s;
}
.domain-promo-box:hover { border-color: rgba(230,0,0,0.2); }
.domain-promo-box .fas.fa-server,
.domain-promo-box .fas.fa-globe { color: #e60000 !important; margin-bottom: 16px; display: block; }
.domain-promo-box h3 { color: #fff !important; font-size: 20px !important; font-weight: 800 !important; margin-bottom: 8px !important; }
.domain-promo-box p { color: #666 !important; font-size: 14px !important; margin-bottom: 20px !important; }
.domain-promo-box .text-warning { color: #ffab00 !important; }
.domain-promo-box .text-primary { color: #e60000 !important; }

/* ============================
   21. CONFIGUREPRODUCT
   ============================ */
.product-info {
  background: linear-gradient(135deg, rgba(20,8,8,0.95), rgba(10,10,12,0.95)) !important;
  border: 1px solid rgba(230,0,0,0.18) !important;
  border-top: 1px solid rgba(230,0,0,0.18) !important;
  border-bottom: 1px solid rgba(230,0,0,0.18) !important;
  border-radius: 14px !important;
  padding: 22px 26px !important;
  margin: 0 0 28px 0 !important;
  font-size: 14px !important;
  white-space: pre-line;
}
.product-info .product-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 6px !important;
}
.product-info p { color: #666 !important; margin: 0 !important; font-size: 14px !important; }
.product-pricing-info {
  background: rgba(10,10,12,0.7);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 24px;
}
.product-pricing-info p { color: #888 !important; }
.product-pricing-info .price {
  font-size: 36px !important;
  font-weight: 950 !important;
  color: #fff !important;
  letter-spacing: -1.5px;
}

/* Configurable options */
.configoption {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.configoption:hover { border-color: rgba(230,0,0,0.2); }
.configoption-label {
  font-size: 13px;
  font-weight: 700;
  color: #888 !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px !important;
}

/* ============================
   22. MARKETING EMAIL OPT-IN
   ============================ */
.marketing-email-optin {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}
.marketing-email-optin h4 { color: #fff !important; font-size: 15px !important; margin-bottom: 8px !important; }
.marketing-email-optin p { color: #666 !important; font-size: 13px !important; }

/* ============================
   23. PROGRESS BAR (password)
   ============================ */
.progress { background: rgba(255,255,255,0.06) !important; border-radius: 6px !important; height: 6px !important; }
.progress-bar { background: linear-gradient(90deg, #e60000, #ff4444) !important; border-radius: 6px !important; }

/* ============================
   24. MODALS
   ============================ */
.modal-content {
  background: #111 !important;
  border: 1px solid rgba(230,0,0,0.25) !important;
  border-radius: 20px !important;
}
.modal-header { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.modal-header h4 { color: #fff !important; }
.modal-footer { border-top: 1px solid rgba(255,255,255,0.06) !important; }
.close { color: #fff !important; opacity: 0.5 !important; }
.close:hover { opacity: 1 !important; }

/* ============================
   25. TRUST SIGNALS
   ============================ */
.of-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 40px;
  flex-wrap: wrap;
}
.of-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #555 !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.of-trust-item i { color: #e60000; font-size: 16px; }

/* ============================
   26. BREADCRUMB CATEGORIES
   ============================ */
.sidebar-category-selector { margin-bottom: 20px; }
.sidebar-category-selector select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

/* ============================
   27. WELL
   ============================ */
.well {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  color: #888 !important;
}

/* ============================
   28. MISCELLANEOUS
   ============================ */
.w-hidden { display: none !important; }
.text-success { color: #00e676 !important; }
.text-danger { color: #e60000 !important; }
.text-warning { color: #ffab00 !important; }
.text-muted { color: #555 !important; }
.text-center { text-align: center; }
.font-size-36 { font-size: 36px !important; }
.font-size-24 { font-size: 24px !important; }
.font-size-22 { font-size: 22px !important; }
.font-size-18 { font-size: 18px !important; }
.font-weight-600 { font-weight: 600 !important; }
.large-text { font-size: 18px !important; }

/* ============================
   29. RESPONSIVE
   ============================ */
@media (max-width: 992px) {
  #order-standard_cart,
  #order-vpsuri,
  #order-domain-register,
  #order-cart,
  #order-complete,
  #order-transfer,
  #order-products,
  #order-configure,
  #order-configure-domain { padding: 40px 20px 80px; }

  #order-standard_cart > .row { flex-direction: column; }
  .cart-sidebar { width: 100%; margin-bottom: 30px; }
  .cart-sidebar .sidebar { position: static; }

  .of-progress { display: none; }
  .of-page-header h1, .of-page-header h2 { font-size: 30px !important; }
  #btnCompleteOrder { padding: 16px 30px !important; }
}

@media (max-width: 768px) {
  .products .row-eq-height { flex-direction: column; }
  .product footer { flex-direction: column; gap: 16px; }
  .btn-order-now { width: 100% !important; text-align: center !important; }
}

/* ============================================================
   16. FIX LAYOUT ORDER FORM (vpsuri) — sidebar + collapsed
   ============================================================ */

/* Dropdown-urile colapsate sunt DOAR pentru mobil; ascunse pe desktop */
.sidebar-collapsed { display: none; }

/* Sidebar list items — spatiere curata, fara suprapunere */
.cart-sidebar .list-group {
  border: none !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-sidebar .list-group-item {
  position: relative;
  display: block !important;
  padding: 11px 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.02) !important;
  color: #9a9a9f !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}
.cart-sidebar .list-group-item i { color: #e60000 !important; width: 16px; margin-right: 6px; }
.cart-sidebar .list-group-item:hover {
  background: rgba(230,0,0,0.08) !important;
  border-color: rgba(230,0,0,0.25) !important;
  color: #fff !important;
  transform: translateX(3px);
}
.cart-sidebar .list-group-item.active {
  background: linear-gradient(90deg, rgba(230,0,0,0.18), rgba(230,0,0,0.04)) !important;
  border-color: rgba(230,0,0,0.5) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 #e60000;
}

/* Panou sidebar (cardul din jurul categoriilor) — fara dublu-border */
.cart-sidebar .panel.card-sidebar {
  background: rgba(10,10,12,0.8) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 16px !important;
  overflow: hidden;
  margin-bottom: 18px !important;
}
.cart-sidebar .panel-heading.card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 14px 18px !important;
}
.cart-sidebar .panel-title { font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase; color:#666 !important; font-weight: 800 !important; margin:0; }
.cart-sidebar .panel-body.card-body { padding: 12px !important; }

/* Mobil: ascunde sidebar-ul lateral, arata dropdown-urile colapsate */
@media (max-width: 992px) {
  .cart-sidebar { display: none !important; }
  .sidebar-collapsed { display: block !important; margin-bottom: 24px; }
}

/* ============================================================
   17. ORDER SUMMARY box (Sumarul comenzii) — dark premium
   ============================================================ */
.order-summary {
  background: rgba(10,10,12,0.88) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  overflow: hidden;
  padding: 0 !important;
  position: sticky;
  top: 100px;
}
.order-summary h2 {
  background: linear-gradient(135deg, rgba(230,0,0,0.16), rgba(230,0,0,0.03)) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  margin: 0 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(230,0,0,0.2) !important;
  text-align: left;
}
.summary-container {
  background: transparent !important;
  color: #bbb !important;
  padding: 18px 20px !important;
  min-height: 70px;
  font-size: 13.5px !important;
}
.summary-container,
.summary-container * { border-color: rgba(255,255,255,0.06) !important; }
.summary-container .total,
.summary-container strong,
.summary-container b { color: #fff !important; font-weight: 800 !important; }
.summary-container a { color: #e60000 !important; }

/* ============================================================
   18. ANTI-WHITE — forteaza dark pe toate componentele Bootstrap
   cu fundal deschis (garanteaza zero cutii albe pe tot fluxul)
   ============================================================ */
.tab-content,
.input-group-box,
.mc-promo,
.product-recommendation,
.service-renewal,
.spotlight-tld,
.spotlight-tlds,
.view-cart-promotion-code,
.panel-default,
.panel-default > .panel-body,
.well,
.modal-content,
.dropdown-menu,
.popover {
  background: rgba(10,10,12,0.85) !important;
  background-color: rgba(10,10,12,0.85) !important;
  color: #ccc !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.tab-content { border-radius: 14px; }
.modal-header, .modal-footer { border-color: rgba(255,255,255,0.06) !important; background: transparent !important; }
.modal-title { color: #fff !important; }

/* Tabele in flux comanda (ex. sumar, facturare) */
.table,
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th {
  background: transparent !important;
  color: #ccc !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.table > thead > tr > th { color: #fff !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.02) !important; }

/* Promo code / inputuri grup */
.promotion-code, .view-cart-promotion-code { padding: 16px !important; border-radius: 12px !important; }

/* Recomandari produs (cardul de jos) */
.product-recommendation { border-radius: 14px !important; padding: 16px !important; }

/* Tab-uri (ex. metode plata, perioade) */
.nav-tabs { border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.nav-tabs > li > a { color: #888 !important; border: none !important; background: transparent !important; }
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover { color: #fff !important; background: rgba(230,0,0,0.08) !important; border-radius: 8px 8px 0 0 !important; }

/* ============================================================
   19. DOMAIN SELECTION FORM (configureproductdomain)
   ============================================================ */
.domain-options-list, #domainoptions { list-style: none; padding: 0; margin: 0; }
.domain-input-group { padding: 6px 0 18px; }

/* Optiunile (radio) — randuri premium dark */
.domain-selector .domain-option,
.order-options .radio,
label.domain-radio,
.domainoption-row { display:block; }
#order-standard_cart input[type="radio"],
#order-standard_cart input[type="checkbox"] { accent-color:#e60000; width:18px; height:18px; vertical-align:middle; margin-right:10px; }

/* Randul de input domeniu: www. | nume | .tld | Verifica — inline */
.domains-row { display:flex !important; flex-wrap:nowrap !important; align-items:stretch; gap:0; margin:0 !important; }
.domains-row > [class*="col-"] { padding:0 !important; }
.domains-row .col-xs-9, .domains-row .col-9 { flex:1 1 auto !important; min-width:0 !important; max-width:none !important; width:auto !important; }
.domains-row .col-xs-3, .domains-row .col-3 { flex:0 0 120px !important; max-width:120px !important; width:120px !important; }

.input-group { display:flex !important; flex-wrap:nowrap !important; width:100% !important; align-items:stretch; }
.input-group-addon, .input-group-prepend { display:flex !important; align-items:center; flex:0 0 auto; padding:0 !important; border-radius:10px 0 0 10px !important; overflow:hidden; }
.input-group-text {
  background:rgba(255,255,255,0.03) !important; border:1px solid rgba(255,255,255,0.08) !important; border-right:none !important;
  color:#777 !important; padding:0 14px !important; font-size:14px !important; white-space:nowrap; display:flex; align-items:center; height:100%;
  border-radius:10px 0 0 10px !important;
}
.input-group > .form-control,
.input-group #registersld, .input-group #transfersld, .input-group #incartsld {
  flex:1 1 auto !important; min-width:0 !important; border-radius:0 !important; border-left:none !important;
}
#registertld, #transfertld, .domains-row select.form-control {
  border-radius:0 10px 10px 0 !important; border-left:none !important; height:100%;
}

/* Butonul Verifica */
.domains-row + .col-sm-2 .btn, .domain-input-group .btn-primary, #btnCheckAvailability {
  background:linear-gradient(90deg,#e60000,#cc0000) !important; border:none !important; color:#fff !important;
  border-radius:10px !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.5px;
}

/* Sectiunile de domeniu (carduri) */
.domain-selector, .domainoptions-container { display:flex; flex-direction:column; gap:12px; }

/* ============================================================
   20. iCheck radios/checkboxes — recolorare albastru -> rosu
   ============================================================ */
.iradio_square-blue,
.icheckbox_square-blue {
  filter: hue-rotate(150deg) saturate(1.9) brightness(1.05) !important;
}

/* ============================================================
   21. DOMAIN OPTION BOXES (.option) — erau albe din Bootstrap
   ============================================================ */
.domain-selection-options { display: flex; flex-direction: column; gap: 14px; }
.domain-selection-options .option,
.option {
  background: rgba(10,10,12,0.85) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  margin: 0 !important;
  color: #ccc !important;
  transition: border-color 0.25s, background 0.25s;
}
.option:hover { border-color: rgba(230,0,0,0.2) !important; }
.option > label,
.option label:first-child {
  color: #fff !important; font-weight: 700 !important; font-size: 15px !important;
  display: flex; align-items: center; cursor: pointer; margin: 0;
}
/* Optiunea selectata (are inputul de domeniu vizibil) — accent rosu */
.option:has(.domain-input-group:not([style*="display: none"])),
.option.active {
  border-color: rgba(230,0,0,0.35) !important;
  background: rgba(14,4,4,0.9) !important;
}
.domain-input-group { background: transparent !important; }

/* Mobile: previne scroll orizontal pe paginile order form */
html, body { overflow-x: hidden !important; max-width: 100%; }
@media (max-width: 992px) { #order-standard_cart, #order-cart { overflow-x: hidden; } }

/* ============================================================
   19. PLATĂ CU CARDUL — dark-uire formular card (PayPal ppcpv/acdc)
   payment.min.css forțează #creditCardInputFields pe alb (#fff) cu
   specificitate mare (#frmCheckout.paypal_ppcpv-payment-form #...).
   Suprascriem ca să se integreze în tema dark.
   ============================================================ */
#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields,
#frmPayment.paypal_ppcpv-payment-form #creditCardInputFields,
.cc-input-container#creditCardInputFields,
.cc-input-container {
  background-color: rgba(10,10,12,0.65) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 18px !important;
  padding: 28px !important;
  margin-top: 8px;
}
/* bordurile interne gri-deschis (#d9d9d9) -> alb subtil */
#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields ul,
#frmPayment.paypal_ppcpv-payment-form #creditCardInputFields ul,
#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields .paymethod-info,
#frmPayment.paypal_ppcpv-payment-form .paymethod-info:not([data-paymethod-id]),
#frmPayment.paypal_ppcpv-payment-form .paymethod-info[data-paymethod-id] {
  border-color: rgba(255,255,255,0.12) !important;
  color: #cfcfcf !important;
  background: rgba(255,255,255,0.02) !important;
}
.paypal_ppcpv-payment-form .selected { background-color: rgba(230,0,0,0.14) !important; color: #fff !important; }
#frmCheckout.paypal_ppcpv-payment-form .payer-email { color: #888 !important; }
#creditCardInputFields p,
#creditCardInputFields label,
#creditCardInputFields .radio-inline,
#creditCardInputFields li { color: #e8e8e8 !important; }
/* inputurile native de card rămân dark */
#creditCardInputFields .field,
#creditCardInputFields .form-control,
#newCardInfo .field,
#newCardInfo .form-control {
  background: rgba(255,255,255,0.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
/* iframe-urile PayPal (hosted card fields) capătă fundal transparent pe containerul dark */
#creditCardInputFields iframe,
#paymentGatewayInput iframe { background: transparent !important; border-radius: 10px; }
/* butonul "?" CVV (btn-default alb) -> dark */
#creditCardInputFields .btn-default,
#order-standard_cart .btn-default {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #aaa !important;
}