/*
 * Public pages (templates/layout/public.html.twig) and the home page (templates/landing/).
 * On top of AdminLTE 4 / Bootstrap 5.3 and css/app.css (Cairo font). Mobile first; colors come
 * from Bootstrap's variables so light and dark modes both work; logical properties (inline/block)
 * so RTL and LTR share every rule. Code is always left-to-right.
 */

.public-page {
  --lp-syriatel: #dc2028;
  --lp-shamcash: #0f9d7a;
  --lp-accent: var(--bs-primary);
  --lp-radius: 1rem;
  --lp-section-y: 3.5rem;
  --lp-header-h: 4rem;
  --lp-card-bg: var(--bs-body-bg);
  --lp-card-border: var(--bs-border-color-translucent);
  --lp-shadow: 0 0.25rem 1.25rem rgb(15 23 42 / 6%);
  --lp-shadow-hover: 0 0.75rem 2rem rgb(15 23 42 / 12%);
  --lp-code-bg: #0f172a;
  --lp-code-fg: #e2e8f0;
  --lp-code-muted: #94a3b8;
  background: var(--bs-body-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

[data-bs-theme="dark"] .public-page {
  --lp-card-bg: var(--bs-tertiary-bg);
  --lp-shadow: 0 0.25rem 1.25rem rgb(0 0 0 / 30%);
  --lp-shadow-hover: 0 0.75rem 2rem rgb(0 0 0 / 45%);
  --lp-code-bg: #0b1120;
}

@media (min-width: 992px) {
  .public-page {
    --lp-section-y: 5.5rem;
  }
}

.public-page main {
  flex: 1 0 auto;
}

.public-page main:focus {
  outline: none;
}

html:has(.public-page) {
  scroll-padding-top: calc(var(--lp-header-h, 4rem) + 0.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.public-page) {
    scroll-behavior: smooth;
  }
}

.public-skip:focus {
  position: fixed;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 1100;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: var(--bs-primary);
  color: #fff;
}

/* ------------------------------------------------------------------ header */

.public-header {
  background: var(--bs-body-bg);
  background: color-mix(in srgb, var(--bs-body-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: 1px solid var(--bs-border-color-translucent);
}

.public-header .navbar {
  min-height: var(--lp-header-h);
  padding-block: 0.5rem;
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bs-emphasis-color);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
}

.public-brand:hover,
.public-brand:focus-visible {
  color: var(--bs-emphasis-color);
}

.public-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  border-radius: 0.7rem;
  color: #fff;
  font-size: 1.15rem;
  background: linear-gradient(135deg, var(--lp-syriatel), var(--bs-primary) 60%, var(--lp-shamcash));
  box-shadow: 0 0.35rem 0.9rem rgb(13 110 253 / 25%);
}

/* Small phones: the brand name gives way to the language/theme tools and the menu button. */
@media (max-width: 339.98px) {
  .public-header .public-brand-name {
    display: none;
  }
}

.public-tools .navbar-nav {
  gap: 0.15rem;
}

/* The tools stay outside the collapsing menu: their dropdowns float even on a phone. */
.public-tools .dropdown-menu {
  position: absolute;
}

.public-header .navbar-toggler {
  border: 0;
  padding: 0.35rem 0.55rem;
  font-size: 1.5rem;
  line-height: 1;
}

.public-header .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgb(13 110 253 / 25%);
}

.public-nav-links .nav-link {
  font-weight: 600;
  color: var(--bs-secondary-color);
  padding-inline: 0.75rem;
  white-space: nowrap;
}

.public-actions .btn {
  white-space: nowrap;
}

.public-nav-links .nav-link:hover,
.public-nav-links .nav-link:focus-visible {
  color: var(--bs-primary);
}

@media (max-width: 1199.98px) {
  .public-header .navbar-collapse {
    padding-block: 0.75rem 1rem;
  }

  .public-nav-links .nav-link {
    padding-inline: 0;
    padding-block: 0.6rem;
    border-block-end: 1px solid var(--bs-border-color-translucent);
  }

  .public-actions {
    padding-block-start: 1rem;
  }

  .public-actions .btn {
    flex: 1 1 auto;
  }
}

/* ------------------------------------------------------------------ shared section pieces */

.lp-section {
  padding-block: var(--lp-section-y);
  scroll-margin-top: var(--lp-header-h);
}

.lp-section-alt {
  background: var(--bs-tertiary-bg);
  border-block: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .lp-section-alt {
  background: color-mix(in srgb, var(--bs-tertiary-bg) 55%, var(--bs-body-bg));
}

.lp-section-head {
  max-width: 46rem;
  margin-inline: auto;
  margin-block-end: 2.5rem;
  text-align: center;
}

.lp-eyebrow {
  display: inline-block;
  margin-block-end: 0.75rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lp-section-title {
  font-weight: 700;
  font-size: clamp(1.6rem, 2.5vw + 1rem, 2.4rem);
  line-height: 1.3;
  margin-block-end: 0.75rem;
  color: var(--bs-emphasis-color);
}

.lp-section-lead {
  font-size: 1.075rem;
  color: var(--bs-secondary-color);
  margin-block-end: 0;
}

.lp-narrow {
  max-width: 52rem;
}

.lp-footnote {
  margin-block: 1rem 0;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.lp-card {
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--lp-card-border);
  border-radius: var(--lp-radius);
  background: var(--lp-card-bg);
  box-shadow: var(--lp-shadow);
}

@media (prefers-reduced-motion: no-preference) {
  .lp-card,
  .lp-plan {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .lp-card:hover,
  .lp-plan:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-shadow-hover);
  }
}

.lp-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-block: 1rem 0.5rem;
  color: var(--bs-emphasis-color);
}

.lp-card-text {
  margin: 0;
  color: var(--bs-secondary-color);
  line-height: 1.75;
}

.lp-icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-size: 1.35rem;
}

.lp-icon-success {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

/* ------------------------------------------------------------------ hero */

.lp-hero {
  position: relative;
  overflow: hidden;
  padding-block: 3rem 3.5rem;
  background:
    radial-gradient(48rem 26rem at 100% -10%, rgb(13 110 253 / 16%), transparent 65%),
    radial-gradient(36rem 22rem at 0% 110%, rgb(220 32 40 / 9%), transparent 65%),
    radial-gradient(30rem 20rem at 55% 120%, rgb(15 157 122 / 9%), transparent 65%),
    var(--bs-body-bg);
}

[data-bs-theme="dark"] .lp-hero {
  background:
    radial-gradient(48rem 26rem at 100% -10%, rgb(13 110 253 / 28%), transparent 65%),
    radial-gradient(36rem 22rem at 0% 110%, rgb(220 32 40 / 16%), transparent 65%),
    radial-gradient(30rem 20rem at 55% 120%, rgb(15 157 122 / 16%), transparent 65%),
    var(--bs-body-bg);
}

@media (min-width: 992px) {
  .lp-hero {
    padding-block: 5rem 5.5rem;
  }
}

.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--bs-success-border-subtle);
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
  font-size: 0.875rem;
  font-weight: 700;
}

.lp-hero-title {
  margin-block: 1.25rem 1rem;
  font-weight: 700;
  font-size: clamp(2rem, 2.2vw + 1.3rem, 3.25rem);
  line-height: 1.25;
  color: var(--bs-emphasis-color);
  text-wrap: balance;
}

.lp-gradient-text {
  color: var(--bs-primary);
  /* From the first wallet named (ShamCash, green) to the second (Syriatel Cash, red), in reading order. */
  background: linear-gradient(90deg, var(--lp-shamcash), var(--bs-primary) 55%, var(--lp-syriatel));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[dir="rtl"] .lp-gradient-text {
  background-image: linear-gradient(270deg, var(--lp-shamcash), var(--bs-primary) 55%, var(--lp-syriatel));
}

/* Arabic script needs room for its descenders inside the clipped gradient. */
.lp-hero-title .lp-gradient-text {
  display: inline-block;
  padding-block-end: 0.15em;
}

.lp-hero-lead {
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--bs-secondary-color);
  max-width: 38rem;
}

.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1.75rem 1rem;
}

@media (max-width: 575.98px) {
  .lp-hero-actions .btn {
    width: 100%;
  }
}

.lp-hero-actions .btn-primary {
  box-shadow: 0 0.5rem 1.25rem rgb(13 110 253 / 28%);
}

.lp-link-arrow {
  text-decoration: none;
  font-weight: 600;
}

[dir="rtl"] .lp-arrow {
  display: inline-block;
  transform: scaleX(-1);
}

.lp-hero-note {
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
  margin-block-end: 1.5rem;
}

.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lp-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid var(--bs-border-color-translucent);
  background: var(--lp-card-bg);
  font-size: 0.85rem;
  font-weight: 600;
}

.lp-chips .bi {
  color: var(--bs-primary);
}

/* The terminal window of the hero: always dark, always left-to-right. */
.lp-window {
  margin: 0;
  border-radius: var(--lp-radius);
  background: var(--lp-code-bg);
  color: var(--lp-code-fg);
  box-shadow: 0 1.5rem 3.5rem rgb(15 23 42 / 25%), 0 0 0 1px rgb(148 163 184 / 15%);
  overflow: hidden;
}

.lp-window-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  background: rgb(148 163 184 / 10%);
  border-block-end: 1px solid rgb(148 163 184 / 15%);
}

.lp-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #ef4444;
}

.lp-dot:nth-child(2) {
  background: #f59e0b;
}

.lp-dot:nth-child(3) {
  background: #22c55e;
}

.lp-window-title {
  margin-inline-start: 0.6rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.78rem;
  color: var(--lp-code-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A showcase, not a code sample to scroll: long lines (the URL) wrap. */
.lp-window-body {
  margin: 0;
  padding: 1.25rem;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--lp-code-fg);
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (min-width: 576px) {
  .lp-window-body {
    font-size: 0.875rem;
  }
}

.lp-window-caption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  font-size: 0.8rem;
  color: var(--lp-code-muted);
  border-block-start: 1px solid rgb(148 163 184 / 15%);
}

.lp-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0.2rem rgb(34 197 94 / 25%);
}

.lp-t-key { color: #7dd3fc; }
.lp-t-str { color: #fcd34d; }
.lp-t-num { color: #f9a8d4; }
.lp-t-bool { color: #86efac; }
.lp-t-muted { color: var(--lp-code-muted); }

/* ------------------------------------------------------------------ who it is for */

.lp-uses {
  padding-block: 1.75rem;
  border-block: 1px solid var(--bs-border-color-translucent);
  background: var(--bs-body-bg);
}

.lp-uses-title {
  margin-block-end: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  color: var(--bs-secondary-color);
}

.lp-uses-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lp-uses-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
}

.lp-uses-list .bi {
  font-size: 1.25rem;
  color: var(--bs-primary);
}

/* ------------------------------------------------------------------ about (the full explanation) */

.lp-section-head-wide {
  max-width: 56rem;
}

.lp-section-head-wide .lp-section-lead {
  line-height: 1.9;
}

.lp-subtitle {
  margin-block: 2.5rem 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bs-emphasis-color);
}

.lp-cases {
  display: grid;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .lp-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .lp-cases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lp-case {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--lp-card-border);
  border-radius: var(--lp-radius);
  background: var(--lp-card-bg);
}

.lp-case-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-size: 1.15rem;
}

.lp-case-title {
  margin-block: 0.15rem 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--bs-emphasis-color);
}

.lp-case .lp-card-text {
  font-size: 0.94rem;
}

/* ------------------------------------------------------------------ the wallet sections */

.lp-wallet-shamcash {
  --lp-wallet: var(--lp-shamcash);
}

.lp-wallet-syriatel {
  --lp-wallet: var(--lp-syriatel);
}

.lp-wallet {
  /* The wallet's color, lightened in dark mode so text in it stays readable. */
  --lp-wallet-text: color-mix(in srgb, var(--lp-wallet) 85%, #000);
}

[data-bs-theme="dark"] .lp-wallet {
  --lp-wallet-text: color-mix(in srgb, var(--lp-wallet) 60%, #fff);
}

.lp-wallet .lp-section-title {
  font-size: clamp(1.45rem, 2vw + 1rem, 2.1rem);
}

.lp-wallet-eyebrow {
  background: color-mix(in srgb, var(--lp-wallet) 13%, transparent);
  color: var(--lp-wallet-text);
}

.lp-wallet-lead {
  font-size: 1.075rem;
  line-height: 1.9;
  color: var(--bs-secondary-color);
}

.lp-wallet .lp-subtitle {
  margin-block: 1.75rem 0.75rem;
  font-size: 1.1rem;
}

.lp-wallet-steps {
  display: grid;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: lp-wallet-step;
}

.lp-wallet-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.75;
  counter-increment: lp-wallet-step;
}

.lp-wallet-steps li::before {
  content: counter(lp-wallet-step);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-block-start: 0.1rem;
  border-radius: 50%;
  background: var(--lp-wallet);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.lp-wallet-code {
  margin-block-start: 1rem;
}

.lp-wallet-code .lp-code {
  white-space: pre;
}

.lp-wallet-card {
  border-block-start: 4px solid var(--lp-wallet);
}

@media (min-width: 992px) {
  .lp-wallet-card {
    position: sticky;
    inset-block-start: calc(var(--lp-header-h) + 1rem);
    height: auto;
  }
}

.lp-wallet-icon {
  background: color-mix(in srgb, var(--lp-wallet) 13%, transparent);
  color: var(--lp-wallet-text);
}

.lp-wallet-card .lp-plan-features {
  margin-block-end: 1rem;
}

/* ------------------------------------------------------------------ the comparison table */

.lp-wallet-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-inline-end: 0.45rem;
  border-radius: 50%;
  vertical-align: 0.05em;
}

.lp-wallet-dot-shamcash { background: var(--lp-shamcash); }
.lp-wallet-dot-syriatel { background: var(--lp-syriatel); }

.lp-compare-table thead th {
  font-size: 0.9rem;
  color: var(--bs-emphasis-color);
}

.lp-compare-table tbody th {
  font-weight: 700;
  color: var(--bs-emphasis-color);
}

.lp-compare-table td {
  color: var(--bs-secondary-color);
}

/* Phones: the three columns share the width and wrap, rather than scrolling sideways (doubled
   class: these rules sit above the endpoint table's, which they override). */
.lp-compare-table.lp-endpoint-table th,
.lp-compare-table.lp-endpoint-table td {
  white-space: normal;
}

@media (max-width: 575.98px) {
  .lp-compare-table.lp-endpoint-table th,
  .lp-compare-table.lp-endpoint-table td {
    padding: 0.65rem 0.5rem;
    font-size: 0.85rem;
  }
}

@media (min-width: 576px) {
  .lp-compare-table tbody th {
    min-width: 9rem;
  }

  .lp-compare-table td {
    min-width: 10rem;
  }
}

.lp-compare-ok {
  color: var(--bs-success);
}

/* ------------------------------------------------------------------ steps */

.lp-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .lp-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .lp-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lp-step {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--lp-radius);
  border: 1px solid var(--lp-card-border);
  background: var(--lp-card-bg);
  box-shadow: var(--lp-shadow);
}

.lp-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp-step-number {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 0 0 0.35rem var(--bs-primary-bg-subtle);
}

.lp-step-icon {
  font-size: 1.6rem;
  color: var(--bs-secondary-color);
  opacity: 0.6;
}

/* ------------------------------------------------------------------ pricing */

.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.5rem 1.5rem;
  border: 1px solid var(--lp-card-border);
  border-radius: calc(var(--lp-radius) + 0.25rem);
  background: var(--lp-card-bg);
  box-shadow: var(--lp-shadow);
}

.lp-plan-featured {
  border: 2px solid var(--bs-primary);
  box-shadow: 0 1rem 2.5rem rgb(13 110 253 / 15%);
}

.lp-plan-ribbon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--bs-success);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

[dir="rtl"] .lp-plan-ribbon {
  transform: translate(50%, -50%);
}

.lp-plan-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-block-end: 0.35rem;
  color: var(--bs-emphasis-color);
}

.lp-plan-desc {
  color: var(--bs-secondary-color);
  margin-block-end: 0.5rem;
  white-space: pre-line;
}

.lp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin-block: 0.75rem 1.25rem;
}

.lp-price-currency {
  font-size: 1.5rem;
  font-weight: 700;
  vertical-align: top;
  color: var(--bs-emphasis-color);
}

.lp-price-amount {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bs-emphasis-color);
  font-variant-numeric: tabular-nums;
}

.lp-price-period {
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.lp-plan-features {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  margin: 0 0 1.75rem;
  list-style: none;
  flex: 1 0 auto;
}

.lp-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.lp-plan-features .bi {
  flex: 0 0 auto;
  margin-block-start: 0.2rem;
  color: var(--bs-success);
}

.lp-plan-features small {
  color: var(--bs-secondary-color);
}

.lp-plan-features .lp-feature-off {
  color: var(--bs-secondary-color);
}

.lp-plan-features .lp-feature-off .bi {
  color: var(--bs-secondary-color);
}

.lp-empty {
  max-width: 40rem;
  margin-inline: auto;
  padding: 1.5rem;
  border-radius: var(--lp-radius);
  border: 1px dashed var(--bs-border-color);
  text-align: center;
  color: var(--bs-secondary-color);
}

.lp-trial {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 2.5rem;
  padding: 1.5rem;
  border-radius: var(--lp-radius);
  border: 1px solid var(--bs-success-border-subtle);
  background: var(--bs-success-bg-subtle);
}

.lp-trial .lp-card-title {
  margin-block-start: 0;
}

.lp-trial-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--bs-success);
  color: #fff;
  font-size: 1.35rem;
}

@media (min-width: 768px) {
  .lp-trial {
    flex-direction: row;
    align-items: flex-start;
    padding: 1.75rem 2rem;
  }
}

.lp-methods {
  margin-block-start: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--lp-radius);
  border: 1px solid var(--lp-card-border);
  background: var(--lp-card-bg);
}

.lp-methods .lp-card-title {
  margin-block-start: 0;
}

.lp-method-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .lp-method-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lp-method {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color-translucent);
  background: var(--bs-body-bg);
}

.lp-method-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  color: #fff;
  font-size: 1.2rem;
  background: var(--bs-secondary);
}

.lp-method-paypal .lp-method-icon { background: #003087; }
.lp-method-shamcash .lp-method-icon { background: var(--lp-shamcash); }
.lp-method-syriatel .lp-method-icon { background: var(--lp-syriatel); }

/* ------------------------------------------------------------------ developers */

.lp-base-url {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  max-width: 46rem;
  margin: 0 auto 2rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color-translucent);
  background: var(--lp-card-bg);
}

.lp-base-url-label {
  font-weight: 700;
  color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
  .lp-base-url-label {
    flex-basis: 100%;
  }
}

.lp-base-url-value {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  text-align: left;
}

.lp-code-card {
  position: relative;
  border-radius: var(--lp-radius);
  background: var(--lp-code-bg);
  color: var(--lp-code-fg);
  box-shadow: var(--lp-shadow);
  overflow: hidden;
}

/* Left-to-right like the code; the right end is kept for the copy button. */
.lp-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding: 0.6rem 3.5rem 0 0.75rem;
  overflow-x: auto;
  border-block-end: 1px solid rgb(148 163 184 / 15%);
  direction: ltr;
}

.lp-tabs .nav-link {
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  color: var(--lp-code-muted);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  background: transparent;
}

.lp-tabs .nav-link:hover,
.lp-tabs .nav-link:focus-visible {
  color: #fff;
}

.lp-tabs .nav-link.active {
  color: #fff;
  background: rgb(148 163 184 / 14%);
  box-shadow: inset 0 -2px 0 var(--bs-primary);
}

@media (min-width: 576px) {
  .lp-tabs {
    padding-right: 6rem;
  }
}

/* Each pane's copy button sits in the tab bar (positioned against the card, not the pane). */
.lp-copy {
  position: absolute;
  inset-block-start: 0.5rem;
  right: 0.6rem;
  z-index: 1;
  color: var(--lp-code-fg);
  background: rgb(148 163 184 / 14%);
  border: 1px solid rgb(148 163 184 / 25%);
}

.lp-copy:hover,
.lp-copy:focus-visible {
  color: #fff;
  background: rgb(148 163 184 / 26%);
}

.lp-code {
  margin: 0;
  padding: 1.25rem;
  max-height: 26rem;
  overflow: auto;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--lp-code-fg);
  text-align: left;
  tab-size: 4;
}

@media (min-width: 576px) {
  .lp-code {
    font-size: 0.85rem;
  }
}

.lp-code-card .lp-code {
  padding-block-start: 1rem;
}

.lp-code code {
  color: inherit;
  font-size: inherit;
}

.lp-response-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.8rem;
  color: var(--lp-code-muted);
  border-block-end: 1px solid rgb(148 163 184 / 15%);
}

.lp-http-ok {
  color: #86efac;
  font-weight: 700;
}

.lp-facts {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
}

.lp-facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--bs-secondary-color);
}

.lp-facts .bi {
  flex: 0 0 auto;
  margin-block-start: 0.15rem;
  color: var(--bs-primary);
}

.lp-endpoints {
  margin-block-start: 3rem;
  scroll-margin-top: var(--lp-header-h);
}

.lp-table-wrap {
  border-radius: var(--lp-radius);
  border: 1px solid var(--lp-card-border);
  background: var(--lp-card-bg);
}

.lp-endpoint-table {
  --bs-table-bg: transparent;
}

.lp-endpoint-table th {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.lp-endpoint-table th,
.lp-endpoint-table td {
  padding: 0.8rem 1rem;
}

.lp-endpoint-table tbody tr:last-child td {
  border-block-end: 0;
}

.lp-endpoint-table code {
  font-size: 0.82rem;
}

.lp-endpoint-off td:not(:last-child) {
  opacity: 0.55;
}

.lp-verb {
  display: inline-block;
  min-width: 3.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.lp-verb-get {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.lp-verb-post {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

/* ------------------------------------------------------------------ FAQ */

.lp-faq {
  --bs-accordion-border-radius: var(--lp-radius);
  --bs-accordion-inner-border-radius: calc(var(--lp-radius) - 1px);
  --bs-accordion-bg: var(--lp-card-bg);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgb(13 110 253 / 25%);
}

.lp-faq .accordion-button {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6;
}

.lp-faq .accordion-body {
  color: var(--bs-secondary-color);
  line-height: 1.85;
}

/* ------------------------------------------------------------------ call to action */

.lp-cta-wrap {
  padding-block: var(--lp-section-y);
}

.lp-cta {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  border-radius: calc(var(--lp-radius) + 0.5rem);
  color: #fff;
  background:
    radial-gradient(30rem 16rem at 100% 0%, rgb(255 255 255 / 18%), transparent 60%),
    linear-gradient(135deg, #0b5ed7, #3d2bd1 55%, #0f7d63);
  box-shadow: 0 1.5rem 3rem rgb(13 110 253 / 25%);
}

@media (min-width: 992px) {
  .lp-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3rem;
  }
}

.lp-cta-title {
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem);
  margin-block-end: 0.5rem;
}

.lp-cta-text {
  margin: 0;
  font-size: 1.075rem;
  opacity: 0.9;
}

.lp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  flex: 0 0 auto;
}

@media (max-width: 575.98px) {
  .lp-cta-actions .btn {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ footer */

.public-footer {
  padding-block: 3rem 1.5rem;
  border-block-start: 1px solid var(--bs-border-color-translucent);
  background: var(--bs-tertiary-bg);
  font-size: 0.925rem;
}

.public-footer-about {
  max-width: 26rem;
  line-height: 1.8;
}

.public-footer-title {
  margin-block-end: 0.85rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bs-emphasis-color);
}

.public-footer-links li + li {
  margin-block-start: 0.5rem;
}

.public-footer-links a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.public-footer-links a:hover,
.public-footer-links a:focus-visible {
  color: var(--bs-primary);
}

.public-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--bs-border-color-translucent);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------ print */

@media print {
  .public-header,
  .lp-cta-wrap,
  .lp-copy,
  .public-footer {
    display: none !important;
  }

  .lp-section,
  .lp-hero {
    padding-block: 1.5rem;
  }
}