/* PWR interface additions - 28 Aug 2026.
 *
 * 1) .pwr-svc-id : the red/white service-number badge. It started as an inline
 *    style inside services.html; once the order form needed it too it moved
 *    here so there is a single source.
 * 2) .pwr-sel*   : the custom dropdown that stands in for a native <select>.
 *    Reason: an <option> renders NOTHING but text, so neither the category icon
 *    nor the service badge can appear in a native dropdown. The theme's own
 *    plugin (the upstream panel's Vue bundle) never boots here (measured: zero custom
 *    wrappers, no select2).
 *
 * Colours are NOT hard-coded here: the theme has three modes
 * (sunny/cloudy/rainy). pwr-select.js reads the panel background/text colour
 * from the computed .form-control style when the dropdown opens.
 */

/* 30 Aug: the badge was scaled up against the reference panel, where the id is
   plain 14px/600 text - next to it an 11px badge looked thin. Same colours,
   only the metrics changed.
   It is now byte-for-byte the `.pwr-ord-id` badge from the Orders screen:
   Inter 10.5px / 800 / line 15px / letter-spacing .2px / padding 2px 8px /
   radius 7px / #e11733 on white. Orders was signed off first and the price
   list plus new order must match it. No Cairo needed - Orders paints Inter. */
.pwr-svc-id{display:inline-block;padding:2px 8px;border-radius:7px;
  background:#e11733;color:#fff;font-size:10.5px;font-weight:800;
  line-height:15px;letter-spacing:.2px;text-align:center;
  font-variant-numeric:tabular-nums}

/* The cell itself follows the reference metrics as well */
td[data-filter-table-service-id]{padding:8px 7px;text-align:left;
  vertical-align:middle}

.service-category-icon{margin-right:6px}

/* ------------------------------------------------------- custom dropdown */
.pwr-sel{position:relative}

/* The native <select> STAYS in the DOM (the form value is submitted from it);
   it is only made invisible. Clipping is used instead of display:none so that
   computed colours and form validation keep working. */
.pwr-sel-hidden{position:absolute!important;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pwr-sel-btn{display:flex;align-items:center;gap:8px;width:100%;
  text-align:left;cursor:pointer;overflow:hidden}
.pwr-sel-btn[disabled]{opacity:.6;cursor:not-allowed}
.pwr-sel-btn .pwr-sel-label{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pwr-sel-caret{margin-left:auto;flex:none;opacity:.5;font-size:11px}

.pwr-sel-panel{position:absolute;z-index:1050;left:0;right:0;top:100%;
  margin-top:4px;border:1px solid rgba(128,128,128,.35);border-radius:6px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);overflow:hidden;display:none}
.pwr-sel.open .pwr-sel-panel{display:block}

.pwr-sel-search{width:100%;border:0;
  border-bottom:1px solid rgba(128,128,128,.25);
  padding:9px 12px;font-size:13px;background:transparent;color:inherit;
  outline:none}

.pwr-sel-list{max-height:320px;overflow-y:auto;margin:0;padding:4px 0;
  list-style:none}
.pwr-sel-item{display:flex;align-items:flex-start;gap:8px;padding:7px 12px;
  cursor:pointer;font-size:13px;line-height:1.45}
/* The name WRAPS in the list (never clipped): a service label is long and the
   price at the end is exactly what the customer needs to read. */
.pwr-sel-item .pwr-sel-label{flex:1;min-width:0;white-space:normal;
  overflow-wrap:anywhere}
.pwr-sel-item .pwr-svc-id,.pwr-sel-item .pwr-sel-icon{flex:none;margin-top:1px}
.pwr-sel-item:hover,.pwr-sel-item.active{background:rgba(225,23,51,.10)}
.pwr-sel-item.selected{background:rgba(225,23,51,.16);font-weight:600}
.pwr-sel-empty{padding:14px 12px;text-align:center;opacity:.6;font-size:13px}

.pwr-sel-icon{width:16px;text-align:center;flex:none}


/* ---------------------------------------------------------------------------
   NEW ORDER PLATFORM CHIPS - reference layout (30 Aug, taken by measurement)
   chip 120x42 / radius 8px / padding 8px 16px / text 14px 600 / icon 24px
   wraps onto rows; the active chip is brand red with white text.

   `!important` IS REQUIRED: the theme's own rules live inside @media BLOCKS and
   override plain declarations (measured live: the chip stayed 60x60 with the
   label at display:none). The selector is more specific too:
   `.pwr-platforms .pwr-plat`.
   The idle background is NOT a fixed colour: the theme has three modes
   (sunny/cloudy/rainy), so a translucent neutral is used and stays correct in
   dark mode as well.
   --------------------------------------------------------------------------- */
.pwr-platforms{display:flex!important;flex-wrap:wrap!important;
  gap:8px!important;margin:0 0 16px!important;overflow:visible!important}
.pwr-platforms .pwr-plat{display:inline-flex!important;align-items:center;
  justify-content:flex-start!important;gap:8px!important;
  width:auto!important;min-width:120px!important;max-width:none!important;
  height:42px!important;padding:8px 16px!important;
  border:0!important;border-radius:8px!important;
  background:rgba(128,128,128,.14)!important;color:inherit!important;
  font-size:14px!important;font-weight:600!important;line-height:1!important;
  cursor:pointer;transition:background .15s ease}
.pwr-platforms .pwr-plat:hover{background:rgba(128,128,128,.24)!important}
.pwr-platforms .pwr-plat i{font-size:18px!important;width:24px!important;
  height:auto!important;line-height:1!important;text-align:center;flex:none;
  margin:0!important}
.pwr-platforms .pwr-plat .pwr-plat-name{display:inline-block!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:150px;font-size:14px!important;font-weight:600!important}
/* The reference layout has no counters on the chips */
.pwr-platforms .pwr-plat .pwr-plat-counts{display:none!important}
.pwr-platforms .pwr-plat.pwr-selected{background:#e11733!important;
  color:#fff!important}
.pwr-platforms .pwr-plat.pwr-selected i,
.pwr-platforms .pwr-plat.pwr-selected .pwr-plat-name{color:#fff!important}
@media(max-width:575px){
  .pwr-platforms .pwr-plat{min-width:0!important;
    flex:1 1 calc(50% - 8px)!important;padding:8px 10px!important}
  .pwr-platforms .pwr-plat .pwr-plat-name{max-width:none}
}


/* --------------------------------------------------------------------------
   SERVICE SEARCH BOX (30 Aug 2026) - above Category, as on the upstream panel.
   The magnifier button is absolutely positioned ON TOP of the input (that is
   how the template ships it); without the left padding the typed text would
   run under the icon.
   -------------------------------------------------------------------------- */
#new-order-search .form-control{padding-left:34px}

/* --------------------------------------------------------------------------
   .hidden - BOOTSTRAP 3 HELPER CLASS (2 Sep 2026)

   User report: "the search button on /services does not work".
   ROOT CAUSE: the theme bundle (wirahcp279um9xqa.js) implements both the
   service search and the category filter by adding the `hidden` CLASS to
   rows:
       $(sel + " [data-filter-table-category-id]").addClass("hidden")
   but none of the six CSS bundles defined that class (checked; only
   .overflow-hidden and .visually-hidden existed). So the class was added
   and nothing happened visually -> the search button, Enter and the
   category filter all looked dead. The JS was fine; the CSS was missing.

   !important only on the filter targets: the mobile card view
   (.pwr-table-cards>tbody>tr) gives tr a display and is more specific.
   -------------------------------------------------------------------------- */
.hidden{display:none}
#service-table tr.hidden,
[data-filter-table-category-id].hidden,
[data-filter-table-wrapper].hidden{display:none!important}


/* --- Table header: grey band ---------------------------------------------
 * Product decision: the /addfunds and /tickets screens follow the common
 * layout where the table HEADER row is shaded and the body stays white. Ours
 * had a white header too, so the columns looked like they were floating.
 * The shade comes from OPACITY, not a colour value, so it works in both light
 * and dark themes and never touches the brand red.
 * SCOPE IS NARROW: only tables carrying the `pwr-thead` class (addfunds,
 * tickets). Every other screen is unchanged.
 */
.pwr-thead > thead > tr > th {
  background: rgba(0, 0, 0, .035);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.pwr-thead > thead > tr > th:first-child { border-radius: 6px 0 0 6px; }
.pwr-thead > thead > tr > th:last-child  { border-radius: 0 6px 6px 0; }

/* ---------------------------------------------------------------------------
   AUTH FLOW CARDS
   /resetpassword - /setnewpassword - /2fa - /confirmemail

   CAUSE: these four templates use Tailwind classes
      (mx-auto  max-w-7xl  w-full  justify-center  p-4) but Tailwind is NOT
      loaded on this site -> every one of those classes is dead. The result:
      the card stretched to both edges of the page (1670px), the email field
      became 1648px, and because `w-full` did nothing the "Send" button ended
      up a 57px stub hanging off the card's left edge.
   NOTE: the templates were NOT touched - one fix here covers all four pages.
   `.sa_card` appears only in those four templates (verified), so nothing else
   is affected. Colours come from the theme's own variables.
   --------------------------------------------------------------------------- */
.sa_card {
  max-width: 440px;
  margin: 40px auto;
  padding: 26px 24px !important;
  background: var(--sa-card, #fff);
  border: 1px solid var(--sa-border, #e5e7eb);
  border-radius: 16px;
  box-shadow: var(--pwr-card-sh, 0 12px 30px rgba(20, 20, 40, .05));
}

/* sablonda satir ici `padding-bottom:25px` var, onu notrler */
.sa_card > h3 {
  margin: 0 0 20px;
  padding-bottom: 0 !important;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--pwr-ink, #14161d);
}

.sa_card .form-group { margin-bottom: 16px; }

.sa_card .control-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pwr-muted, #6f7587);
}

.sa_card .form-control { width: 100%; }

/* read-only username field (setnewpassword): render as non-editable */
.sa_card .form-control[readonly] {
  background: var(--pwr-line, #eef0f5);
  color: var(--pwr-muted, #6f7587);
  cursor: default;
}

/* `w-full` is dead (no Tailwind), so the width is set here */
.sa_card .btn-primary {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 13px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--pwr-red, #E11733);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  transition: background .18s ease, transform .18s ease;
}
.sa_card .btn-primary:hover,
.sa_card .btn-primary:focus {
  background: var(--sa-brand-dark, #c30f28);
  color: #fff;
  transform: translateY(-1px);
}
.sa_card .btn-primary:focus-visible {
  outline: 2px solid var(--pwr-ink, #14161d);
  outline-offset: 2px;
}

.sa_card .alert { border-radius: 11px; }

/* 2fa.html: kartin ust basligi ayri bir div, kart kenarina yaslanir */
.sa_card .sa_border {
  margin: -26px -24px 20px;
  padding: 16px 24px !important;
  border-bottom: 1px solid var(--sa-border, #e5e7eb);
  font-size: 16px;
  font-weight: 700;
  color: var(--pwr-ink, #14161d);
}

@media (max-width: 520px) {
  .sa_card {
    margin: 24px 16px;
    padding: 20px 18px !important;
  }
  .sa_card .sa_border { margin: -20px -18px 16px; padding: 14px 18px !important; }
}