/* Black SMM Raja · /order · v1.0.0
   Every rule requires the route class added by page.js. Native controls stay intact. */
body.bsr-order {
  --bsr-order-bg: #252427;
  --bsr-order-card: #2f2e31;
  --bsr-order-input: #252427;
  --bsr-order-border: #4b4a50;
  --bsr-order-text: #f5f7fb;
  --bsr-order-muted: #b9b7c1;
  --bsr-order-blue: #002bff;
  --bsr-order-light: #9aaaff;
  background: var(--bsr-order-bg);
  color: var(--bsr-order-text);
  font-family: "Asap", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Shell and introduction */
body.bsr-order .component-navbar__wrapper { border-bottom: 1px solid rgb(117 138 255 / 22%); }
body.bsr-order .wrapper-content__footer .el-links--link { color: var(--bsr-order-light); }
body.bsr-order :is(.component-navbar__wrapper, .wrapper-content__footer) a:focus-visible { outline: 3px solid #a3b0ff; outline-offset: 4px; }
body.bsr-order .bsr-order-block:has(#public-order-form) {
  padding: 48px 0 64px;
  background: var(--bsr-order-bg);
}
body.bsr-order .bsr-order-block:has(#public-order-form) > .block-bg {
  background: transparent;
}
body.bsr-order .bsr-order-block:has(#public-order-form) > .container {
  width: 100%;
  max-width: 1200px;
  padding-inline: 24px;
}
body.bsr-order .bsr-order-hero { margin-bottom: 32px; }
body.bsr-order .bsr-order-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  color: var(--bsr-order-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
}
body.bsr-order .bsr-order-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bsr-order-blue);
  box-shadow: 0 0 0 4px rgb(0 43 255 / 12%);
}
body.bsr-order .bsr-order-title {
  font-family: inherit;
  margin: 0 0 12px;
  color: var(--bsr-order-text);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.3px;
}
body.bsr-order .bsr-order-intro {
  margin: 0;
  color: var(--bsr-order-muted);
  font-size: 16px;
  line-height: 1.6;
}
body.bsr-order .bsr-order-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
body.bsr-order .bsr-order-step {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #dedde4;
  font-size: 13px;
}
body.bsr-order .bsr-order-step__number {
  color: var(--bsr-order-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* Native layout: selection, order details, then payment. */
body.bsr-order #public-order-form .bsr-order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin: 0;
}
body.bsr-order #public-order-form :is(.bsr-order-catalog, .bsr-order-payment) {
  display: block;
  grid-column: auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 28px;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 20px;
  background: var(--bsr-order-card);
  box-shadow: 0 16px 36px rgb(0 0 0 / 13%);
  color: var(--bsr-order-text);
}
body.bsr-order #public-order-form .bsr-order-payment {
  border-top-color: #566fe8;
  background: linear-gradient(145deg, rgb(0 43 255 / 5%), transparent 45%), var(--bsr-order-card);
}
body.bsr-order #public-order-form :is(.col-ed-elements, .col-ed-elements--element, .w-100) { min-width: 0; }
body.bsr-order #public-order-form .bsr-order-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}
body.bsr-order #public-order-form [data-order-fields] { margin-top: 0; }
body.bsr-order #public-order-form .bsr-order-heading__number {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  border: 1px solid rgb(154 170 255 / 28%);
  border-radius: 10px;
  color: #b5c0ff;
  background: rgb(0 43 255 / 12%);
  font-size: 12px;
  font-weight: 700;
}
body.bsr-order #public-order-form .bsr-order-heading__title {
  font-family: inherit;
  margin: 0 0 4px;
  color: var(--bsr-order-text);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.4px;
}
body.bsr-order #public-order-form .bsr-order-heading__description {
  margin: 0;
  color: var(--bsr-order-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Native platform buttons, icons and active state */
body.bsr-order #public-order-form .platforms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 24px;
}
body.bsr-order #public-order-form .platforms-item { width: auto; margin: 0; padding: 0; min-width: 0; }
body.bsr-order #public-order-form [data-public-platform] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 72px;
  padding: 10px 4px;
  border: 1px solid var(--bsr-order-border);
  border-radius: 12px;
  background: var(--bsr-order-input);
  color: #dedde4;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
body.bsr-order #public-order-form .platforms-item__icon { width: 25px; height: 25px; margin: 0; color: inherit; }
body.bsr-order #public-order-form [data-public-platform="tiktok"] .platforms-item__icon { background: #efedf4; border-radius: 5px; }
body.bsr-order #public-order-form .platforms-item__title { display: block; font-size: 12px; line-height: 1.25; font-weight: 600; }
body.bsr-order #public-order-form [data-public-platform].active {
  color: #fff;
  border-color: #6a7dff;
  background: #002bff;
  box-shadow: 0 4px 14px rgb(0 43 255 / 22%);
}

/* Inputs and Select2: do not expose .hidden fields or hidden native selects. */
body.bsr-order #public-order-form .form-group { margin-bottom: 20px; }
body.bsr-order #public-order-form .control-label {
  margin-bottom: 8px;
  color: #efedf4;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
body.bsr-order #public-order-form :is(.form-control, .select2-selection--single) {
  min-height: 50px;
  height: auto;
  padding: 13px 14px;
  border: 1px solid var(--bsr-order-border);
  border-radius: 11px;
  color: var(--bsr-order-text);
  background-color: var(--bsr-order-input);
  box-shadow: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.bsr-order #public-order-form textarea.form-control { min-height: 128px; resize: vertical; }
body.bsr-order #public-order-form .form-control::placeholder { color: #a8a5b0; opacity: 1; }
body.bsr-order #public-order-form .form-control:disabled { opacity: .65; cursor: not-allowed; }
body.bsr-order #public-order-form .form-control[readonly] { color: var(--bsr-order-muted); }
body.bsr-order #public-order-form :is(.form-control:focus, .select2-container--focus .select2-selection, .select2-container--open .select2-selection) {
  outline: none;
  border-color: #8a9eff;
  box-shadow: 0 0 0 3px rgb(138 158 255 / 17%);
}
body.bsr-order #public-order-form :is(button, a, input[type="checkbox"]):focus-visible {
  outline: 3px solid #a3b0ff;
  outline-offset: 3px;
}
/* Select2 writes a pixel width inline; keep the original widget fluid. */
body.bsr-order #public-order-form select[data-select] + .select2-container { width: 100% !important; max-width: 100%; }
body.bsr-order #public-order-form .select2-selection--single { padding-right: 34px; }
body.bsr-order #public-order-form .select2-selection__rendered {
  padding: 0;
  color: var(--bsr-order-text);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
body.bsr-order #public-order-form .select2-selection__arrow { top: 12px; right: 10px; }
body.bsr-order #public-order-form .select2-dropdown {
  overflow: hidden;
  border: 1px solid #7387f3;
  border-radius: 12px;
  background: #29282d;
  color: var(--bsr-order-text);
  box-shadow: 0 14px 36px rgb(0 0 0 / 35%);
}
body.bsr-order #public-order-form .select2-search { padding: 10px; }
body.bsr-order #public-order-form .select2-search__field {
  min-height: 44px;
  border: 1px solid var(--bsr-order-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bsr-order-input);
  color: var(--bsr-order-text);
  font-size: 16px;
}
body.bsr-order #public-order-form .select2-results__option {
  color: var(--bsr-order-text);
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body.bsr-order #public-order-form .select2-results__options { background: #29282d; color: var(--bsr-order-text); }
body.bsr-order #public-order-form :is(.select2-results__option--highlighted, .select2-results__option[aria-selected="true"]) {
  background: #1639c7;
  color: #fff;
}
body.bsr-order #public-order-form .search-dropdown .form-control { padding-left: 44px; }
body.bsr-order #public-order-form .search-dropdown .input-wrapper__prepend {
  min-width: 44px;
  height: 50px;
  color: var(--bsr-order-muted);
}
body.bsr-order #public-order-form .help-block { display: block; margin-top: 8px; color: var(--bsr-order-muted); font-size: 12px; }

/* Service description remains visible, including warnings and service conditions. */
body.bsr-order #public-order-form #public-order-service-description {
  padding: 18px;
  margin: 4px 0 28px;
  border: 1px solid rgb(154 170 255 / 17%);
  border-left: 3px solid #758aff;
  border-radius: 12px;
  background: #29282d;
  overflow-wrap: anywhere;
}
body.bsr-order #public-order-form #public-order-service-description .description {
  color: #cfccd7;
  font-size: 14px;
  line-height: 1.65;
}
body.bsr-order #public-order-form #public-order-service-description :is(img, video, iframe) { max-width: 100%; }

/* Only the inspected supplementary description, inside its native container.
   CSS also matches replacement nodes. Never target payment fields or modal instructions.
   Fail open if a future template puts actionable content inside this block. */
body.bsr-order #public-order-form [data-payment-instruction] > #instruction_instruction:not(:has(input, select, textarea, button, a, img, svg, canvas, iframe, [role="alert"], [role="button"])) {
  display: none;
}

/* The native summary remains the sole source of prices and minimum payment. */
body.bsr-order #public-order-form .bsr-order-summary {
  width: 100%;
  margin: 6px 0 24px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 12px;
  background: #252427;
  color: #c7c4cf;
  font-size: 13px;
}
body.bsr-order #public-order-form .bsr-order-summary td { padding: 9px 14px; vertical-align: top; }
body.bsr-order #public-order-form .bsr-order-summary td.text-right { white-space: nowrap; color: #efedf5; font-variant-numeric: tabular-nums; }
body.bsr-order #public-order-form .bsr-order-total td { padding-block: 16px; border-top: 1px solid var(--bsr-order-border); color: #f5f7fb; font-weight: 600; }
body.bsr-order #public-order-form .bsr-order-total .total-price { font-size: 25px; line-height: 1.15; font-weight: 700; letter-spacing: -.6px; }
body.bsr-order #public-order-form .form-group__label-title { color: #c7c4cf; font-size: 13px; line-height: 1.6; }
body.bsr-order #public-order-form a { color: #a7b5ff; text-underline-offset: 3px; }
body.bsr-order #public-order-form .select2-results__option a { background: transparent; color: inherit; padding: 0; }
body.bsr-order #public-order-form .form-group__checkbox { gap: 10px; align-items: flex-start; }
body.bsr-order #public-order-form .form-group__checkbox-label { flex-shrink: 0; }
body.bsr-order #public-order-form .form-group__checkbox-label .checkmark { border: 1px solid #8a8794; border-radius: 5px; }
body.bsr-order #public-order-form .form-group__checkbox-label input:focus-visible + .checkmark { outline: 3px solid #a3b0ff; outline-offset: 3px; }
body.bsr-order #public-order-form .component_pay_button button[type="submit"] {
  min-height: 54px;
  width: 100%;
  padding: 14px 20px;
  border: 1px solid #5873ff;
  border-radius: 12px;
  background: var(--bsr-order-blue);
  box-shadow: 0 8px 22px rgb(0 43 255 / 20%);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.bsr-order #public-order-form .component_pay_button button:disabled {
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}
body.bsr-order #public-order-form .component_pay_button button:has(.spinner) { cursor: progress; }
body.bsr-order #public-order-form .component_pay_button .spinner { display: inline-block; }

/* Native errors and validation states */
body.bsr-order #public-order-form [data-order-alerts] { scroll-margin-top: 24px; }
body.bsr-order #public-order-form .alert {
  padding: 16px 42px 16px 18px;
  border-radius: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
body.bsr-order #public-order-form .alert-danger { --alert_danger_text_color: #ffd5d8; border: 1px solid #bb666e; color: #ffd5d8; background: #472d34; }
body.bsr-order #public-order-form :is(.has-error .form-control, .form-control[aria-invalid="true"], .form-control:user-invalid) { border-color: #fa9aa6; }
body.bsr-order #public-order-form :is(.has-error .help-block, .invalid-feedback) { color: #ffc0c8; }
body.bsr-order #public-order-form .alert .close { color: inherit; opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  body.bsr-order #public-order-form [data-public-platform]:not(.active):hover { background: #35343b; border-color: #7f8fd6; transform: translateY(-1px); }
  body.bsr-order #public-order-form .component_pay_button button:not(:disabled):hover { background: #2148ff; box-shadow: 0 10px 28px rgb(0 43 255 / 30%); transform: translateY(-1px); }
  body.bsr-order #public-order-form a:hover { color: #c7d0ff; text-decoration: underline; }
}
@media (max-width: 991px) {
  body.bsr-order #public-order-form .bsr-order-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
  body.bsr-order #public-order-form :is(.bsr-order-catalog, .bsr-order-payment) { padding: 22px; }
  body.bsr-order #public-order-form .platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body.bsr-order .bsr-order-block:has(#public-order-form) { padding: 30px 0 40px; }
  body.bsr-order .bsr-order-block:has(#public-order-form) > .container { padding-inline: 16px; }
  body.bsr-order .bsr-order-hero { margin-bottom: 24px; }
  body.bsr-order .bsr-order-title { letter-spacing: -.8px; }
  body.bsr-order .bsr-order-intro { font-size: 15px; }
  body.bsr-order .bsr-order-steps { gap: 10px 18px; margin-top: 20px; }
  body.bsr-order .bsr-order-step { font-size: 12px; }
  body.bsr-order #public-order-form .bsr-order-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.bsr-order #public-order-form :is(.bsr-order-catalog, .bsr-order-payment) { padding: 20px; border-radius: 16px; }
  body.bsr-order #public-order-form .platforms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  body.bsr-order #public-order-form [data-public-platform] { min-height: 68px; }
  body.bsr-order #public-order-form .platforms-item__title { font-size: 11px; }
  body.bsr-order #public-order-form .bsr-order-heading__title { font-size: 20px; }
  body.bsr-order #public-order-form .bsr-order-summary td { padding-inline: 12px; }
}
@media (max-width: 359px) {
  body.bsr-order #public-order-form :is(.bsr-order-catalog, .bsr-order-payment) { padding: 16px; }
  body.bsr-order #public-order-form .platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.bsr-order #public-order-form .bsr-order-total .total-price { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  body.bsr-order #public-order-form *, body.bsr-order #public-order-form *::before, body.bsr-order #public-order-form *::after { transition: none; animation: none; }
}