/* Numberland feature UI overrides.
 * The site-wide breadcrumb in base.html is the single navigation header.
 */

/* Four platform previews sit side by side with a fixed 4px gap. */
.ir-home-page .mt-2.flex.items-center.gap-2 > .flex.gap-1 {
  gap: 0.25rem;
}

body.ir-page-social-media main > div > div:first-child,
body.ir-page-virtual-number-shop main > div > div:first-child,
body.ir-page-virtual-number-checkout main > div > div:first-child,
body.ir-page-virtual-number-orders main > div > div:first-child,
body.ir-page-virtual-number-order-detail main > div > [data-vn-order] > div:first-child {
  display: none !important;
}

body.ir-page-social-media main > div > div:first-child + section,
body.ir-page-virtual-number-shop main > div > div:first-child + section,
body.ir-page-virtual-number-checkout main > div > div:first-child + section,
body.ir-page-virtual-number-orders main > div > div:first-child + section,
body.ir-page-virtual-number-order-detail main > div > [data-vn-order] > div:first-child + section {
  margin-top: 0 !important;
}

/* Inline selectors are part of the page flow. Do not trap wheel/touch scroll
 * inside a nested list; the complete mobile shell must remain scrollable. */
body.ir-page-virtual-number-shop [data-vn-scroll-list] {
  max-height: none !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
  scrollbar-gutter: auto !important;
  touch-action: pan-y;
  -webkit-overflow-scrolling: auto;
}

/* Interactive controls must clearly communicate that they can be clicked. */
body.ir-page-virtual-number-shop [data-vn-shop] button:not(:disabled),
body.ir-page-virtual-number-shop [data-vn-shop] a[href],
body.ir-page-virtual-number-shop [data-vn-shop] input[type="range"] {
  cursor: pointer;
}

body.ir-page-virtual-number-shop [data-vn-shop] button:disabled {
  cursor: not-allowed;
}

body.ir-page-virtual-number-shop [data-vn-shop] input[type="search"] {
  cursor: text;
}

body.ir-page-virtual-number-shop [data-vn-shop] input[type="range"]:active {
  cursor: grabbing;
}

/* Persian price filtering: minimum is on the right, maximum on the left.
 * The orange track grows from right to left as the allowed price increases. */
body.ir-page-virtual-number-shop [data-vn-price-range] {
  direction: rtl !important;
  unicode-bidi: isolate;
  background: linear-gradient(
    to left,
    #f59e0b var(--vn-progress, 100%),
    #e5e7eb var(--vn-progress, 100%)
  ) !important;
}

.dark body.ir-page-virtual-number-shop [data-vn-price-range],
body.dark.ir-page-virtual-number-shop [data-vn-price-range] {
  background: linear-gradient(
    to left,
    #f59e0b var(--vn-progress, 100%),
    #374151 var(--vn-progress, 100%)
  ) !important;
}

body.ir-page-virtual-number-shop [data-vn-price-min] {
  order: 2;
}

body.ir-page-virtual-number-shop [data-vn-price-max] {
  order: 1;
}

/* Use the site's Persian-digit Vazirmatn font and preserve natural RTL text. */
body.ir-page-virtual-number-shop [data-vn-price-label],
body.ir-page-virtual-number-shop [data-vn-price-min],
body.ir-page-virtual-number-shop [data-vn-price-max] {
  direction: rtl !important;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-family: Vazirmatn, sans-serif !important;
}

/* Move the active value away from the thumb at the left end of the range. */
body.ir-page-virtual-number-shop [data-vn-price-label] {
  display: inline-block;
  margin-left: 1.5rem;
  text-align: right;
}

/* Keep the endpoint captions clear of the range thumb. */
body.ir-page-virtual-number-shop [data-vn-price-range] + div {
  min-height: 1.25rem;
  margin-top: 1.125rem !important;
  padding-inline: 2rem;
  line-height: 1.25rem;
}

/* Keep calling codes such as +1 in their natural LTR order while the
 * surrounding label and price remain aligned with the RTL interface. */
body.ir-page-virtual-number-shop [data-vn-country-subtitle],
body.ir-page-virtual-number-shop [data-vn-summary-price] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* Closed app/country selectors need stronger hierarchy on mobile. */
body.ir-page-virtual-number-shop [data-vn-app-title],
body.ir-page-virtual-number-shop [data-vn-country-title] {
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

body.ir-page-virtual-number-shop [data-vn-app-subtitle],
body.ir-page-virtual-number-shop [data-vn-country-subtitle] {
  font-size: 0.75rem;
  line-height: 1.25rem;
}

/* Give the price-filter card proper breathing room on narrow mobile shells. */
body.ir-page-virtual-number-shop [data-vn-country-panel]
  > div:first-child
  > div:has(> [data-vn-price-range]) {
  padding: 1rem 1.125rem 1.125rem !important;
}

body.ir-page-virtual-number-shop [data-vn-price-range] {
  display: block;
  width: calc(100% - 1.5rem);
  margin: 1.5rem 0.75rem 0 !important;
}

/* Final selection card: compact order summary followed by a clear primary CTA. */
body.ir-page-virtual-number-shop [data-vn-summary] {
  padding: 1rem !important;
  border-color: #e5e7eb !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

body.ir-page-virtual-number-shop [data-vn-summary] > div:first-child {
  display: grid !important;
  grid-template-columns: 3rem minmax(0, 1fr) 2rem;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.875rem;
  border: 1px solid #fde68a;
  border-radius: 0.875rem;
  background: #fffbeb;
}

body.ir-page-virtual-number-shop [data-vn-summary-flag] {
  width: 3rem !important;
  height: 3rem !important;
  border: 1px solid #f3f4f6;
  border-radius: 0.875rem !important;
  background: #fff !important;
  font-size: 1rem !important;
  font-weight: 800;
}

body.ir-page-virtual-number-shop [data-vn-summary] > div:first-child > span:nth-child(2) {
  padding-block: 0 !important;
}

body.ir-page-virtual-number-shop [data-vn-summary-title] {
  margin-top: 0.0625rem;
  font-size: 1rem !important;
  line-height: 1.625rem !important;
}

body.ir-page-virtual-number-shop [data-vn-summary-price] {
  display: inline-flex !important;
  width: max-content;
  max-width: 100%;
  margin-top: 0.375rem !important;
  padding: 0.25rem 0.5rem;
  border: 1px solid #fde68a;
  border-radius: 0.625rem;
  background: #fff;
  color: #4b5563 !important;
  font-size: 0.75rem !important;
  line-height: 1.25rem !important;
}

body.ir-page-virtual-number-shop [data-vn-summary] > div:first-child > span:last-child {
  border: 1px solid #a7f3d0;
  background: #ecfdf5 !important;
  color: #047857 !important;
}

body.ir-page-virtual-number-shop [data-vn-summary] [data-vn-checkout-link] {
  width: 100%;
  min-height: 3.25rem;
  margin: 0.875rem 0 0;
  padding: 0.875rem 1.25rem;
  border-radius: 1rem;
  background: #fbbf24 !important;
  box-shadow: 0 1px 2px rgb(146 64 14 / 0.12);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-weight: 900;
}

body.ir-page-virtual-number-shop [data-vn-summary] [data-vn-checkout-link]:hover {
  background: #f59e0b !important;
}

html.dark body.ir-page-virtual-number-shop [data-vn-summary],
body.dark.ir-page-virtual-number-shop [data-vn-summary] {
  border-color: #4b5563 !important;
  background: #1f2937 !important;
}

html.dark body.ir-page-virtual-number-shop [data-vn-summary] > div:first-child,
body.dark.ir-page-virtual-number-shop [data-vn-summary] > div:first-child {
  border-color: rgb(245 158 11 / 0.35);
  background: rgb(120 53 15 / 0.18);
}

html.dark body.ir-page-virtual-number-shop [data-vn-summary-flag],
html.dark body.ir-page-virtual-number-shop [data-vn-summary-price],
body.dark.ir-page-virtual-number-shop [data-vn-summary-flag],
body.dark.ir-page-virtual-number-shop [data-vn-summary-price] {
  border-color: #4b5563;
  background: #111827 !important;
  color: #d1d5db !important;
}