/* =========================================================
   CreateWeb-style theme override for SureBillingNetwork portal
   Paste as "Custom CSS" / "Theme CSS"
   ========================================================= */

/* 1) Fonts (pick one) */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap");
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"); */

/* 2) Design tokens */
:root{
  /* typography */
  --cw-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* base */
  --cw-bg: #070A12;
  --cw-surface: rgba(255,255,255,.06);
  --cw-surface-2: rgba(255,255,255,.09);
  --cw-border: rgba(255,255,255,.14);
  --cw-text: rgba(255,255,255,.90);
  --cw-text-2: rgba(255,255,255,.70);
  --cw-muted: rgba(255,255,255,.55);

  /* brand (CreateWeb-like: blue → teal) */
  --cw-blue: #3A5BFF;
  --cw-indigo: #5B39FF;
  --cw-teal: #24D3C5;
  --cw-cyan: #34E3FF;

  /* gradients */
  --cw-grad: linear-gradient(135deg, var(--cw-indigo) 0%, var(--cw-blue) 35%, var(--cw-teal) 100%);
  --cw-grad-soft: radial-gradient(800px 500px at 20% 15%, rgba(91,57,255,.35) 0%, rgba(58,91,255,.22) 35%, rgba(36,211,197,.18) 70%, rgba(7,10,18,0) 100%);

  /* effects */
  --cw-radius: 18px;
  --cw-radius-sm: 12px;
  --cw-shadow: 0 14px 50px rgba(0,0,0,.45);
  --cw-shadow-soft: 0 10px 30px rgba(0,0,0,.30);
  --cw-ring: 0 0 0 3px rgba(58,91,255,.28);
}

/* 3) Page baseline */
html, body{
  font-family: var(--cw-font) !important;
  background: var(--cw-bg) !important;
  color: var(--cw-text) !important;
}

body{
  background-image: var(--cw-grad-soft) !important;
  background-attachment: fixed !important;
}

/* Many billing portals wrap content in containers/sections */
main, .content, .page-content, .container, .container-fluid, .wrapper, .app, .app-content{
  color: var(--cw-text) !important;
}

/* Links */
a, a:visited{
  color: rgba(255,255,255,.86) !important;
  text-decoration-color: rgba(36,211,197,.55) !important;
}
a:hover{
  color: #ffffff !important;
  text-decoration-color: rgba(36,211,197,.95) !important;
}

/* Headings */
h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6{
  font-family: var(--cw-font) !important;
  color: #fff !important;
  letter-spacing: -0.02em !important;
}

/* 4) Top nav / header (generic selectors) */
header, .navbar, .topbar, .app-header{
  background: rgba(7,10,18,.72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--cw-border) !important;
}

.navbar a, header a, .topbar a, .app-header a{
  color: rgba(255,255,255,.88) !important;
}

/* 5) Cards / panels */
.card, .panel, .box, .widget, .tile, .content-box, .portlet, .well{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: var(--cw-radius) !important;
  box-shadow: var(--cw-shadow-soft) !important;
  color: var(--cw-text) !important;
}

.card-header, .panel-heading, .box-header, .widget-header{
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  border-top-left-radius: var(--cw-radius) !important;
  border-top-right-radius: var(--cw-radius) !important;
}

/* 6) Buttons (Bootstrap-like + generic) */
button, .btn, input[type="button"], input[type="submit"], .button{
  font-family: var(--cw-font) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}

.btn-primary, .button-primary, button.primary, .btn.btn-primary{
  background: var(--cw-grad) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(58,91,255,.22) !important;
}
.btn-primary:hover, .button-primary:hover, button.primary:hover, .btn.btn-primary:hover{
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 38px rgba(58,91,255,.28) !important;
}

.btn-secondary, .btn-default, .button-secondary, .btn.btn-outline, .btn-outline-primary{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.88) !important;
}
.btn-secondary:hover, .btn-default:hover, .button-secondary:hover, .btn-outline-primary:hover{
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px) !important;
}

/* Danger / success / warning */
.btn-danger, .btn.btn-danger{
  background: linear-gradient(135deg, #ff3b6b 0%, #ff3b3b 100%) !important;
  border: 0 !important;
}
.btn-success, .btn.btn-success{
  background: linear-gradient(135deg, #16c784 0%, #24D3C5 100%) !important;
  border: 0 !important;
}
.btn-warning, .btn.btn-warning{
  background: linear-gradient(135deg, #ffb020 0%, #ffd36a 100%) !important;
  border: 0 !important;
  color: #10121a !important;
}

/* 7) Forms */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"],
select, textarea, .form-control{
  font-family: var(--cw-font) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: var(--cw-radius-sm) !important;
  outline: none !important;
  box-shadow: none !important;
}

input::placeholder, textarea::placeholder{
  color: rgba(255,255,255,.45) !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus{
  border-color: rgba(58,91,255,.55) !important;
  box-shadow: var(--cw-ring) !important;
  background: rgba(255,255,255,.08) !important;
}

label, .form-label{
  color: rgba(255,255,255,.78) !important;
  font-weight: 600 !important;
}

/* Checkboxes / radios (best-effort) */
input[type="checkbox"], input[type="radio"]{
  accent-color: var(--cw-teal) !important;
}

/* 8) Tables */
table, .table{
  color: rgba(255,255,255,.86) !important;
}

.table thead th, table thead th{
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}

.table td, .table th, table td, table th{
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

.table-striped tbody tr:nth-of-type(odd){
  background: rgba(255,255,255,.035) !important;
}

.table-hover tbody tr:hover{
  background: rgba(36,211,197,.08) !important;
}

/* 9) Badges / alerts / pills */
.badge, .label{
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: .35em .65em !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.88) !important;
}

.alert, .notice, .message{
  border-radius: var(--cw-radius) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.88) !important;
}

.alert-success{
  border-color: rgba(36,211,197,.32) !important;
  background: rgba(36,211,197,.10) !important;
}
.alert-danger, .alert-error{
  border-color: rgba(255,59,107,.35) !important;
  background: rgba(255,59,107,.10) !important;
}
.alert-warning{
  border-color: rgba(255,176,32,.35) !important;
  background: rgba(255,176,32,.10) !important;
}

/* 10) Modals / dropdowns */
.modal-content, .dropdown-menu, .popover{
  background: rgba(10,13,24,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: var(--cw-radius) !important;
  box-shadow: var(--cw-shadow) !important;
  color: rgba(255,255,255,.90) !important;
  backdrop-filter: blur(14px) !important;
}

/* 11) Sidebars (if present) */
.sidebar, .sidenav, .left-menu, .app-sidebar{
  background: rgba(7,10,18,.78) !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(14px) !important;
}

.sidebar a, .sidenav a, .left-menu a, .app-sidebar a{
  color: rgba(255,255,255,.80) !important;
}
.sidebar a:hover, .sidenav a:hover, .left-menu a:hover, .app-sidebar a:hover{
  color: #fff !important;
}

/* Active menu item (best effort) */
.active > a, a.active, .nav-link.active{
  background: rgba(58,91,255,.14) !important;
  border-radius: 12px !important;
  color: #fff !important;
}

/* 12) Price cards / plan boxes (common in billing portals) */
.plan, .pricing, .pricing-card, .product, .product-card, .package, .package-box{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 22px !important;
  box-shadow: var(--cw-shadow-soft) !important;
}

.plan .price, .pricing .price, .pricing-card .price{
  background: var(--cw-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* 13) Small polish */
hr{
  border-color: rgba(255,255,255,.12) !important;
}
small, .text-muted{
  color: rgba(255,255,255,.55) !important;
}

.bg-light {
    background-color: #FFFFFF00 !important;
}

/* =========================================================
   ORDER PAGE – Select2 (Period) + Total price
   Target: /order
   ========================================================= */

/* scope only order page */
body[class*="order"], body:has(#hosting-order-period) {

  /* ---------- Select2 container ---------- */
  .select2-container--bootstrap .select2-selection--single {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 14px !important;
    height: 52px !important;
    padding: 10px 48px 10px 16px !important;
    color: rgba(255,255,255,.92) !important;
    font-family: var(--cw-font) !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
    backdrop-filter: blur(10px) !important;
  }

  /* rendered text */
  .select2-container--bootstrap
  .select2-selection__rendered {
    color: rgba(255,255,255,.92) !important;
    line-height: 32px !important;
    padding: 0 !important;
  }

  /* arrow */
  .select2-selection__arrow {
    height: 52px !important;
    right: 14px !important;
  }

  .select2-selection__arrow b {
    border-color: rgba(255,255,255,.7) transparent transparent transparent !important;
  }

  /* focus */
  .select2-container--open .select2-selection--single,
  .select2-container--focus .select2-selection--single {
    border-color: rgba(58,91,255,.6) !important;
    box-shadow: 0 0 0 3px rgba(58,91,255,.25) !important;
  }

  /* ---------- Dropdown ---------- */
  .select2-dropdown {
    background: rgba(10,13,24,.95) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0,0,0,.6) !important;
    backdrop-filter: blur(14px) !important;
    overflow: hidden !important;
  }

  /* options */
  .select2-results__option {
    padding: 14px 18px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.85) !important;
    background: transparent !important;
  }

  /* hover */
  .select2-results__option--highlighted {
    background: linear-gradient(
      135deg,
      rgba(91,57,255,.35),
      rgba(36,211,197,.35)
    ) !important;
    color: #fff !important;
  }

  /* selected */
  .select2-results__option[aria-selected="true"] {
    background: linear-gradient(
      135deg,
      rgba(91,57,255,.55),
      rgba(36,211,197,.55)
    ) !important;
    color: #fff !important;
  }

  /* ---------- Period label ---------- */
  label[for="hosting-order-period"],
  .period-label {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: rgba(255,255,255,.85) !important;
  }

  /* ---------- TOTAL price ---------- */
  .order-total,
  .total,
  .price-total {
    margin-top: 20px !important;
    padding: 18px 22px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.45) !important;
  }

  /* EUR / BGN values */
  .order-total .eur,
  .order-total .bgn,
  .total span {
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(
      135deg,
      #5b39ff,
      #3a5bff,
      #24d3c5
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    display: block !important;
  }

}

/* =========================================================
   CERTIFICATES PAGE – CreateWeb styling
   Target: /certificates
   ========================================================= */

body[class*="certificates"],
body:has(h3:contains("CSR")) {

  /* ---------- Select2 (country / city / region) ---------- */
  .select2-container--bootstrap .select2-selection--single {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 14px !important;
    height: 52px !important;
    padding: 10px 48px 10px 16px !important;
    color: rgba(255,255,255,.92) !important;
    font-family: var(--cw-font) !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
    backdrop-filter: blur(10px) !important;
  }

  .select2-selection__rendered {
    color: rgba(255,255,255,.92) !important;
    padding: 0 !important;
    line-height: 32px !important;
  }

  .select2-selection__arrow {
    height: 52px !important;
    right: 14px !important;
  }

  .select2-selection__arrow b {
    border-color: rgba(255,255,255,.7) transparent transparent transparent !important;
  }

  /* focus */
  .select2-container--open .select2-selection--single,
  .select2-container--focus .select2-selection--single {
    border-color: rgba(58,91,255,.6) !important;
    box-shadow: 0 0 0 3px rgba(58,91,255,.25) !important;
  }

  /* dropdown */
  .select2-dropdown {
    background: rgba(10,13,24,.96) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0,0,0,.6) !important;
    backdrop-filter: blur(14px) !important;
    overflow: hidden !important;
  }

  .select2-results__option {
    padding: 14px 18px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.85) !important;
    background: transparent !important;
  }

  .select2-results__option--highlighted {
    background: linear-gradient(
      135deg,
      rgba(91,57,255,.35),
      rgba(36,211,197,.35)
    ) !important;
    color: #fff !important;
  }

  .select2-results__option[aria-selected="true"] {
    background: linear-gradient(
      135deg,
      rgba(91,57,255,.55),
      rgba(36,211,197,.55)
    ) !important;
    color: #fff !important;
  }

  /* ---------- Inputs (CSR data, address, domain etc.) ---------- */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  .form-control {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 14px !important;
    height: 52px !important;
    padding: 12px 16px !important;
    color: rgba(255,255,255,.92) !important;
    font-family: var(--cw-font) !important;
    font-weight: 500 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02) !important;
  }

  textarea {
    height: auto !important;
    min-height: 120px !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: rgba(255,255,255,.45) !important;
  }

  input:focus,
  textarea:focus {
    outline: none !important;
    border-color: rgba(58,91,255,.6) !important;
    box-shadow: 0 0 0 3px rgba(58,91,255,.25) !important;
    background: rgba(255,255,255,.08) !important;
  }

  /* ---------- Labels ---------- */
  label {
    color: rgba(255,255,255,.82) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }

  label span[style*="color"] {
    color: #ff4d8d !important;
  }

  /* ---------- Radio buttons (Hosting account) ---------- */
  input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.35) !important;
    background: transparent !important;
    margin-right: 10px !important;
    position: relative !important;
    cursor: pointer !important;
  }

  input[type="radio"]:checked {
    border-color: #24d3c5 !important;
  }

  input[type="radio"]:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg,#5b39ff,#24d3c5);
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
  }

  /* ---------- Section titles ---------- */
  h3 {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
  }

  /* ---------- TOTAL price ---------- */
  .order-total,
  .total {
    margin-top: 24px !important;
    padding: 18px 22px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.45) !important;
  }

  .order-total span,
  .total span {
    display: block !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(
      135deg,
      #5b39ff,
      #3a5bff,
      #24d3c5
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
  }

}


/* =========================================================
   FIX Select2 dropdown background & text (CreateWeb style)
   Applies to /order + /certificates
   ========================================================= */

/* dropdown container */
.select2-dropdown {
  background: rgba(10,13,24,.96) !important;
  color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.65) !important;
}

/* search input inside dropdown */
.select2-search__field {
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

.select2-search__field::placeholder {
  color: rgba(255,255,255,.45) !important;
}

/* options list */
.select2-results__option {
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
  font-weight: 600 !important;
}

/* hover */
.select2-results__option--highlighted {
  background: linear-gradient(
    135deg,
    rgba(91,57,255,.35),
    rgba(36,211,197,.35)
  ) !important;
  color: #fff !important;
}

/* selected */
.select2-results__option[aria-selected="true"] {
  background: linear-gradient(
    135deg,
    rgba(91,57,255,.55),
    rgba(36,211,197,.55)
  ) !important;
  color: #fff !important;
}

/* scrollbar (WebKit) */
.select2-results__options::-webkit-scrollbar {
  width: 8px;
}

.select2-results__options::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
}

.select2-results__options::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#5b39ff,#24d3c5);
  border-radius: 8px;
}


/* =========================================================
   FIX Select2 CLOSED field (background + text)
   Applies to all Select2 single fields
   ========================================================= */

/* closed select field */
.select2-container--bootstrap
.select2-selection--single {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 14px !important;
  height: 52px !important;
  padding: 10px 48px 10px 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02),
              0 10px 30px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px) !important;
}

/* text inside closed select */
.select2-container--bootstrap
.select2-selection--single
.select2-selection__rendered {
  color: rgba(255,255,255,.92) !important;
  font-family: var(--cw-font) !important;
  font-weight: 600 !important;
  line-height: 32px !important;
  padding: 0 !important;
}

/* placeholder / empty value */
.select2-container--bootstrap
.select2-selection--single
.select2-selection__rendered[title=""],
.select2-container--bootstrap
.select2-selection--single
.select2-selection__rendered:empty {
  color: rgba(255,255,255,.45) !important;
}

/* arrow */
.select2-selection__arrow {
  height: 52px !important;
  right: 14px !important;
}

.select2-selection__arrow b {
  border-color: rgba(255,255,255,.7) transparent transparent transparent !important;
}

/* focus (when clicked but closed) */
.select2-container--focus
.select2-selection--single {
  border-color: rgba(58,91,255,.6) !important;
  box-shadow: 0 0 0 3px rgba(58,91,255,.25) !important;
}

/* keep open state consistent */
.select2-container--open
.select2-selection--single {
  background: rgba(255,255,255,.08) !important;
}