/*
  Product specifications — self-contained styles for the Vue (script-mode) island.

  Extracted verbatim from wwwroot/css/style.css (the only declarations the spec
  table actually uses: the spec-table component rules PLUS the utility classes the
  markup carries — mb-*, container-11, font-*, flex, etc.). Vendor prefixes are
  preserved as-found.

  Every rule is scoped under `#vue-product-specs` (the island root) for two reasons:
    1. Independence — the island is fully styled by this file alone; it does not
       rely on style.css being present.
    2. No leakage — re-declaring global utility class names (.flex, .mb-60, …) only
       affects this island, never the rest of the page. The id raises specificity
       above the global rules, so where they overlap these win with identical values.

  Source of truth remains style.css. If a shared rule changes there, mirror it here.
*/

/* ── layout / utilities ─────────────────────────────────────────────────── */
#vue-product-specs .container-11 {
  max-width: 1520px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

#vue-product-specs .pointer {
  cursor: pointer;
}

#vue-product-specs .flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#vue-product-specs .flex-nowrap {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

#vue-product-specs .relative {
  position: relative;
}

#vue-product-specs .absolute {
  position: absolute;
}

#vue-product-specs .bg-3 {
  background-color: #0cf0af;
}

#vue-product-specs .radius-8 {
  border-radius: 8px 8px 0 0;
}

/* ── type ───────────────────────────────────────────────────────────────── */
#vue-product-specs .font-3 {
  font-family: Manrope;
  font-weight: 500;
}

#vue-product-specs .font-4 {
  font-family: Manrope;
  font-weight: 600;
}

#vue-product-specs .font-5 {
  font-family: Manrope;
  font-weight: 700;
}

#vue-product-specs .font-6 {
  font-family: Manrope;
  font-weight: 800;
}

#vue-product-specs .title-18 {
  font-size: 24px;
}

#vue-product-specs .text-1 {
  font-size: 16px;
}

#vue-product-specs .fs-text-14 {
  font-size: 14px;
}

#vue-product-specs .mb-32 {
  margin-bottom: 32px;
}

#vue-product-specs .mb-52 {
  margin-bottom: 52px;
}

#vue-product-specs .mb-60 {
  margin-bottom: 60px;
}

#vue-product-specs .text-line {
  left: -webkit-calc(100% + 8px);
  left: calc(100% + 8px);
  top: 52%;
  width: 72px;
  height: 1px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* ── tab labels (the scroll strip) ──────────────────────────────────────── */
#vue-product-specs .overflow-x-spec-inner .phone-text-wrap {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  line-height: 1.35;
  padding-bottom: 12px;
}

#vue-product-specs .overflow-x-spec-inner .phone-text-wrap:after {
  height: 4px;
  bottom: 0;
}

#vue-product-specs .overflow-x-spec-inner .phone-text-wrap:not(:last-child) {
  margin-right: 25px;
}

#vue-product-specs .phone-text-wrap:not(:last-child) {
  margin-right: 32px;
}

#vue-product-specs .phone-text-wrap:after {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  background-color: #0cf0af;
  bottom: -4px;
  left: 0;
  -webkit-transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
}

/* active tab (and hover) — the underline grows. This `.active` state is what
   the Vue composable drives via :class. */
#vue-product-specs .phone-text-wrap.active:after,
#vue-product-specs .phone-text-wrap:hover:after {
  width: 100%;
}

/* ── horizontal scroll wrapper for the tab strip ────────────────────────── */
#vue-product-specs .oveflow-x-spec-wrap {
  max-width: 1200px;
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #000 transparent;
}

#vue-product-specs .oveflow-x-spec-wrap::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 8px;
}

#vue-product-specs .oveflow-x-spec-wrap::-webkit-scrollbar {
  height: 4px;
}

/* ── panels (one per spec section) ──────────────────────────────────────── */
/* Panels stack absolutely; only `.active` is shown. Vue toggles `.active`. */
#vue-product-specs .table-outer-spec-wrap .table-specs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .3s, visibility .3s, position .3s;
  transition: opacity .3s, visibility .3s, position .3s;
}

#vue-product-specs .table-outer-spec-wrap .table-specs.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

#vue-product-specs .table-specs {
  padding: 30px 52px 48px;
}

#vue-product-specs .table-specs.no-padding {
  padding: 0;
}

#vue-product-specs .table-specs:last-child {
  margin-bottom: 0;
}

/* ── rows / cells ───────────────────────────────────────────────────────── */
#vue-product-specs .table-specs .table-inner .table-row:nth-child(odd) {
  background: #f1f4f6;
}

#vue-product-specs .table-specs .table-row {
  padding: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#vue-product-specs .table-specs .table-row .table-cell:first-child {
  width: 300px;
  padding-right: 30px;
  border-right: 1px solid #e5e5e5;
}

#vue-product-specs .table-specs .table-row .table-cell:last-child {
  width: -webkit-calc(100% - 342px);
  width: calc(100% - 342px);
  padding-left: 60px;
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media screen and (min-width: 393px) {
  #vue-product-specs .title-18 {
    font-size: -webkit-calc(24px + 16 * ((100vw - 393px)/1527));
    font-size: calc(24px + 16 * ((100vw - 393px) / 1527));
  }

  #vue-product-specs .text-1 {
    font-size: -webkit-calc(16px + 4 * ((100vw - 393px)/1527));
    font-size: calc(16px + 4 * ((100vw - 393px) / 1527));
  }
}

@media screen and (min-width: 1920px) {
  #vue-product-specs .title-18 {
    font-size: 40px;
  }

  #vue-product-specs .text-1 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1000px) {
  #vue-product-specs .table-specs .table-row .table-cell:first-child {
    width: 200px;
    padding-right: 30px;
  }

  #vue-product-specs .table-specs .table-row .table-cell:last-child {
    width: -webkit-calc(100% - 200px);
    width: calc(100% - 200px);
    padding-left: 30px;
  }
}

@media only screen and (max-width: 800px) {
  #vue-product-specs .table-outer-spec-wrap .table-specs .table-row {
    padding: 20px;
  }
}

@media only screen and (max-width: 600px) {
  #vue-product-specs .table-specs .table-row .table-cell:first-child {
    width: 100%;
    border-right: 0;
    padding-right: 0;
    margin-bottom: 5px;
  }

  #vue-product-specs .table-specs .table-row .table-cell:last-child {
    width: 100%;
    padding-left: 0;
  }

  #vue-product-specs .table-outer-spec-wrap .table-specs:not(:last-child) {
    margin-bottom: 0;
  }

  #vue-product-specs .oveflow-x-spec-wrap {
    scrollbar-color: transparent transparent;
  }

  #vue-product-specs .oveflow-x-spec-wrap::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0;
  }

  #vue-product-specs .oveflow-x-spec-wrap::-webkit-scrollbar {
    height: 0;
  }

  #vue-product-specs .specifications-top-text {
    margin-bottom: 32px;
  }
}

@media only screen and (max-width: 480px) and (max-width: 390px) {
  #vue-product-specs .specifications-section-title {
    font-size: 35px;
  }
}