/* Public + panel pages: services, orders, refill, api — red/black unified */

body.body-public,
body.body-internal {
  --pp-max: 1180px;
  --pp-gutter: clamp(16px, 3vw, 36px);
}

/* Public pages layout (no sidebar) */
body.body-public .public-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 !important;
}

body.body-public .pro-page {
  width: 100%;
  max-width: var(--pp-max);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) var(--pp-gutter) clamp(28px, 4vw, 48px);
  box-sizing: border-box;
}

body.body-public .public-navbar .public-navbar-inner {
  max-width: var(--pp-max);
  margin-inline: auto;
  padding-inline: var(--pp-gutter) !important;
}

body.body-public .pro-footer-inner {
  max-width: var(--pp-max);
  margin-inline: auto;
  padding-inline: var(--pp-gutter);
}

/* Logged-in panel pages (sidebar layout) */
body.body-internal .content .pro-page {
  width: 100%;
  max-width: var(--pp-max);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 20px) 0 clamp(24px, 3vw, 40px);
  box-sizing: border-box;
}

.pro-page .pro-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ff6b7a;
}

.pro-page .pro-card {
  border-radius: 12px;
  border: 1px solid rgba(239, 35, 60, .16);
  background: rgba(11, 13, 16, .72);
}

.pro-page .form-control,
.pro-page .form-select {
  min-height: 44px;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .28);
  color: var(--rb-text, #fff7f7);
}

.pro-page .form-control:focus,
.pro-page .form-select:focus {
  border-color: rgba(239, 35, 60, .45);
  box-shadow: 0 0 0 3px rgba(239, 35, 60, .12);
  background: rgba(0, 0, 0, .35);
  color: #fff;
}

.pro-page .input-group .btn {
  min-height: 44px;
  border-radius: 0 10px 10px 0 !important;
}

html[dir="rtl"] .pro-page .input-group .btn {
  border-radius: 10px 0 0 10px !important;
}

.pro-page .alert-info {
  border-color: rgba(239, 35, 60, .22);
  background: rgba(239, 35, 60, .08);
  color: var(--rb-text, #fff7f7);
}

.pro-page .text-muted {
  color: var(--rb-muted, #a8b0bd) !important;
}

.pro-page .text-info {
  color: #7dd3fc !important;
}

.pro-page .service-name {
  font-weight: 700;
  line-height: 1.45;
}

/* Public language dropdown */
body.body-public .public-lang-dropdown {
  position: relative;
}

body.body-public .public-navbar-dropdown-toggle {
  cursor: pointer;
  min-height: 38px;
  border-radius: 10px !important;
  font-weight: 700;
}

body.body-public .public-lang-dropdown.is-open .dropdown-menu {
  display: block !important;
}

body.body-public .public-lang-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 160px;
  padding: 8px 0;
  border-radius: 10px;
  border: 1px solid rgba(239, 35, 60, .22);
  background: rgba(11, 13, 16, .98);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  z-index: 1060;
}

body.body-public .public-lang-dropdown .dropdown-item {
  padding: 8px 16px;
  color: var(--rb-text, #fff7f7);
  font-weight: 700;
}

body.body-public .public-lang-dropdown .dropdown-item:hover {
  background: rgba(239, 35, 60, .12);
  color: #fff;
}

/* Hero block (all pro-pages) */
.pro-page .pro-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.pro-page .pro-title {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}

.pro-page .pro-subtitle {
  margin: 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--rb-muted, #a8b0bd);
}

/* Platform / status filters */
.pro-page .pro-platforms {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pro-page .pro-platforms::-webkit-scrollbar {
  height: 4px;
}

.pro-page .platform-filter-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: var(--rb-muted, #a8b0bd) !important;
}

.pro-page .platform-filter-btn.active,
.pro-page .platform-filter-btn:hover {
  border-color: rgba(239, 35, 60, .45) !important;
  background: rgba(239, 35, 60, .15) !important;
  color: #fff !important;
}

/* Toolbar */
.pro-page .pro-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 12px;
}

/* Tables */
.pro-page .table-container {
  border-radius: 12px;
  border: 1px solid rgba(239, 35, 60, .18);
  background: rgba(11, 13, 16, .75);
  overflow: hidden;
}

.pro-page .table {
  margin-bottom: 0;
  color: var(--rb-text, #fff7f7);
}

.pro-page .table thead th {
  background: rgba(239, 35, 60, .08);
  border-color: rgba(255, 255, 255, .06) !important;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pro-page .table td,
.pro-page .table th {
  border-color: rgba(255, 255, 255, .06) !important;
  vertical-align: middle;
}

.pro-page .table tbody tr:hover td {
  background: rgba(239, 35, 60, .04);
}

.pro-page .category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(239, 35, 60, .1) !important;
  border-bottom: 1px solid rgba(239, 35, 60, .2);
  color: #fff;
  font-weight: 800;
}

.pro-page .pro-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #ff8a8a;
  background: rgba(239, 35, 60, .12);
  border: 1px solid rgba(239, 35, 60, .22);
}

.pro-page .table-link-truncate {
  display: block;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-page .order-service-name {
  font-weight: 700;
  line-height: 1.45;
  max-width: 320px;
}

/* Status colors */
.pro-page .status-pill,
.pro-page .status-pending,
.pro-page .status-inprogress,
.pro-page .status-processing,
.pro-page .status-completed,
.pro-page .status-partial,
.pro-page .status-canceled,
.pro-page .status-refilling,
.pro-page .status-rejected,
.pro-page .status-error {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.pro-page .status-completed,
.pro-page .status-pill.status-completed {
  color: #86efac;
  background: rgba(34, 197, 94, .12);
}

.pro-page .status-pending,
.pro-page .status-processing,
.pro-page .status-inprogress,
.pro-page .status-refilling {
  color: #fcd34d;
  background: rgba(234, 179, 8, .12);
}

.pro-page .status-canceled,
.pro-page .status-rejected,
.pro-page .status-error {
  color: #fca5a5;
  background: rgba(239, 68, 68, .12);
}

.pro-page .status-partial {
  color: #93c5fd;
  background: rgba(59, 130, 246, .12);
}

/* Pagination */
.pro-page .custom-pagination .page-link {
  border-radius: 8px !important;
  margin: 0 3px;
  border-color: rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: var(--rb-text, #fff7f7) !important;
  font-weight: 700;
}

.pro-page .custom-pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--rb-red, #ef233c), var(--rb-red-2, #b91c1c)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* API page */
.api-page .api-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.api-page .api-card .pro-card-header h2 {
  margin: 0;
  font-size: 20px;
  color: #fff;
}

.api-page .api-card .pro-card-header p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--rb-muted, #a8b0bd);
}

.api-page .api-table th {
  width: 38%;
  color: #ff8a8a;
  font-weight: 800;
  background: transparent !important;
}

.api-page .api-table td {
  color: var(--rb-text, #fff7f7);
}

.api-page .api-code-inline {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .35);
  color: #86efac;
  font-size: 13px;
}

.api-page .api-block-title {
  margin: 18px 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.api-page .api-code-block {
  margin: 0;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid rgba(239, 35, 60, .2);
  background: rgba(0, 0, 0, .45);
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
}

.api-page code {
  color: #fca5a5;
}

/* Services modal */
.services-page .modal-content {
  border: 1px solid rgba(239, 35, 60, .28) !important;
  background: rgba(11, 13, 16, .98) !important;
  color: var(--rb-text, #fff7f7);
  border-radius: 14px;
}

.services-page .modal-header,
.services-page .modal-footer {
  border-color: rgba(255, 255, 255, .08) !important;
}

/* Responsive tables — mobile cards */
@media (max-width: 768px) {
  .api-page .api-table thead {
    display: none;
  }

  .api-page .api-table tr {
    display: block;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(17, 20, 26, .55);
  }

  .api-page .api-table th,
  .api-page .api-table td {
    display: block;
    width: 100% !important;
    padding: 4px 0 !important;
    border: 0 !important;
  }

  .api-page .api-table th {
    color: #ff8a8a;
    font-size: 12px;
    margin-bottom: 2px;
  }

  .pro-page .pro-toolbar {
    grid-template-columns: 1fr;
  }

  .pro-page .pro-hero {
    flex-direction: column;
  }

  .pro-page .pro-hero .btn {
    width: 100%;
  }

  .pro-page .table-responsive {
    border: 0;
  }

  .pro-page .responsive-table thead,
  .pro-page .orders-table thead {
    display: none;
  }

  .pro-page .responsive-table tbody tr,
  .pro-page .orders-table tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(17, 20, 26, .65);
  }

  .pro-page .responsive-table tbody tr.services-list-category-title {
    padding: 0;
    border: 0;
    background: transparent;
    margin-bottom: 8px;
  }

  .pro-page .responsive-table tbody tr.services-list-category-title td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
  }

  .pro-page .responsive-table td,
  .pro-page .orders-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0 !important;
    border: 0 !important;
    text-align: end;
  }

  .pro-page .responsive-table td::before,
  .pro-page .orders-table td::before {
    content: attr(data-label);
    font-weight: 800;
    color: var(--rb-muted, #a8b0bd);
    text-align: start;
    flex: 0 0 42%;
  }

  .pro-page .responsive-table tr.services-list-category-title td::before,
  .pro-page .orders-table td[colspan]::before {
    display: none;
  }

  .pro-page .table-link-truncate {
    max-width: 100%;
    white-space: normal;
    word-break: break-all;
  }

  .pro-page .order-service-name {
    max-width: none;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .pro-page .pro-toolbar {
    grid-template-columns: 1fr;
  }

  .pro-page .table-link-truncate {
    max-width: 180px;
  }
}