/* =========================================================================
   SENDPK.COM — Services page styles (services.php only)
   -------------------------------------------------------------------------
   Page-specific styling only. Colours, radii, shadows and fonts are read
   from the shared design tokens in theme.css (:root) — nothing here
   redefines the global stylesheet. Everything is scoped under #servicesPage
   so it can never leak onto other pages.

   This page ALSO loads assets/css/price-styles.css (see services.php's
   theme_head() call): the pricing-table / requirement-pill / delivery-note
   / verify-popup classes there (.price-table, .price-card, .price-note-list,
   .price-verify-*, .price-alert-banner, .price-subhead …) are generic,
   NOT scoped under #pricePage, and are reused verbatim here rather than
   re-authored — only the page SHELL (sidebar/panel-swap/mobile-toggle,
   which price-styles.css ties to #pricePage's own CSS vars) gets its own
   #servicesPage-scoped rules below, mirroring that file's structure.
   ========================================================================= */

#servicesPage {
  --svc-header-offset: 96px; /* topbar + sticky navbar, see price-styles.css */
  font-size: 15.5px;
  line-height: 1.7;
  background: var(--section-glow), var(--wa-surface);
}

/* =========================================================================
   LAYOUT — sticky sidebar + swappable content column
   ========================================================================= */
.svc-shell { display: flex; align-items: flex-start; max-width: 1320px; margin: 0 auto; }
.svc-sidebar {
  width: 300px; flex-shrink: 0;
  position: sticky; top: var(--svc-header-offset); align-self: flex-start;
  max-height: calc(100vh - var(--svc-header-offset) - 20px);
  overflow-y: auto;
  padding: 1.5rem 1rem 3rem 0;
}
.svc-main { flex: 1; min-width: 0; padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem) 5rem; }

.svc-sidebar-head { padding: 0 .6rem 1rem; }
.svc-sidebar-head h2 { font-size: 1.15rem; font-weight: 800; margin: .4rem 0 0; }

.svc-nav { list-style: none; padding: 0; margin: 0; }
.svc-nav li a {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .7rem; border-radius: 10px; font-size: .92rem; color: var(--wa-body); font-weight: 600;
  border-left: 2.5px solid transparent; margin-bottom: .25rem;
}
.svc-nav li a:hover { background: var(--wa-page); color: var(--wa-ink); }
.svc-nav li a.active { background: rgba(34, 197, 94, .12); color: var(--wa-teal-dark); border-left-color: var(--wa-green); font-weight: 700; }
.svc-nav li a i { width: 18px; text-align: center; font-size: .95rem; color: #1da851; flex-shrink: 0; }

.svc-sidebar-cta {
  margin-top: 1.2rem; padding: 1.1rem; text-align: center;
  background: var(--wa-page); border: 1px solid var(--wa-line); border-radius: var(--radius-card);
}
.svc-sidebar-cta p { font-size: .85rem; color: var(--wa-muted); margin: 0 0 .7rem; font-weight: 600; }

/* =========================================================================
   PANELS — only one visible at a time, toggled by services-page.js
   ========================================================================= */
.svc-panel { display: none; }
.svc-panel.active { display: block; animation: svcFadeIn .25s ease; }
@keyframes svcFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.svc-panel h2 { font-size: 1.9rem; margin: .5rem 0 0; }
.svc-panel .price-lead { max-width: 760px; }

/* Divides a rich panel (Branded SMS) into labelled sub-sections without a
   full page-level <section>/eyebrow treatment — just a heading + rule. */
.svc-subsection { margin: 2.75rem 0 0; }
.svc-subsection:first-of-type { margin-top: 2.25rem; }
.svc-subsection h3 { font-size: 1.35rem; margin: 0 0 .35rem; }
.svc-subsection .svc-subsection-note { color: var(--wa-muted); font-size: .95rem; margin: 0 0 1.3rem; }

.svc-panel .btn { white-space: nowrap; }

.svc-support {
  background: linear-gradient(135deg, var(--wa-teal-dark), var(--wa-teal)); color: #fff;
  border-radius: var(--radius-card); padding: 1.75rem 2rem; margin-top: .5rem;
}
.svc-support p { color: rgba(255, 255, 255, .88); margin: 0; }
.svc-support h3 { color: #fff; margin: 0 0 .4rem; }

/* "Content coming soon" panel state, used while real per-service content is pending. */
.svc-placeholder {
  background: var(--wa-page); border: 1px dashed var(--wa-line); border-radius: var(--radius-card);
  padding: 3rem 2rem; text-align: center; margin-top: 1.5rem;
}
.svc-placeholder i { font-size: 1.8rem; color: var(--wa-muted); margin-bottom: .8rem; display: block; }
.svc-placeholder p { color: var(--wa-muted); font-size: 1rem; margin: 0; }

/* Mobile floating sidebar toggle — mirrors .price-mobile-toggle/.api-mobile-toggle. */
.svc-mobile-toggle {
  display: none; position: fixed; top: calc(var(--svc-header-offset) + 10px); left: 14px; z-index: 1000;
  width: 44px; height: 44px; border-radius: 50%; background: var(--wa-green); color: #fff; border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2); align-items: center; justify-content: center; font-size: 1.1rem;
}
.svc-backdrop {
  display: none; position: fixed; top: var(--svc-header-offset); left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .4); z-index: 990;
}
.svc-backdrop.show { display: block; }

/* =========================================================================
   RESPONSIVE — shell
   ========================================================================= */
@media (max-width: 991.98px) {
  .svc-sidebar {
    position: fixed; top: var(--svc-header-offset); left: 0;
    height: calc(100vh - var(--svc-header-offset)); max-height: calc(100vh - var(--svc-header-offset));
    width: 300px; background: #fff; z-index: 1000;
    transform: translateX(-100%); transition: transform .25s ease; padding: 1.5rem 1rem 3rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
  }
  .svc-sidebar.show { transform: translateX(0); box-shadow: 0 0 30px rgba(0, 0, 0, .25); }
  .svc-mobile-toggle { display: flex; }
  .svc-main { padding: 4.5rem 1.1rem 4rem; }
  .price-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  #servicesPage { font-size: 14.5px; }
  .svc-panel h1 { font-size: 1.5rem; }
  .svc-support { padding: 1.4rem; text-align: center; }
}

/* =========================================================================
   BRANDED SMS PANEL — bilingual (EN/UR) masking content, carried over from
   the former standalone sms-masking.php. Classes kept as .mask-* (already
   unique, non-colliding) — only the language-toggle root id changed, from
   the old page-level #maskPage to #maskLangRoot (a wrapper div nested
   inside this panel, since a panel isn't a whole page anymore).
   ========================================================================= */
#maskLangRoot .l-ur { display: none; }
#maskLangRoot.show-ur .l-ur { display: block; }
#maskLangRoot.show-ur .l-en { display: none; }

.mask-lang-tabs {
  display: flex;
  gap: .35rem;
  width: max-content;
  margin: 1.5rem 0 1.75rem;
  padding: .3rem;
  background: var(--wa-surface);
  border: 1px solid var(--wa-line);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-sm);
}
.mask-lang-tab {
  border: 0;
  background: transparent;
  border-radius: var(--radius-btn);
  padding: .5rem 1.5rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--wa-body);
  cursor: pointer;
  transition: color .18s var(--wa-ease), background .18s var(--wa-ease);
}
.mask-lang-tab:hover { color: var(--wa-teal-dark); background: rgba(34, 197, 94, .08); }
.mask-lang-tab.is-active { background: var(--wa-grad); color: #fff; box-shadow: var(--shadow-cta); }
.mask-lang-tab.is-active:hover { color: #fff; }
.mask-lang-tab[lang="ur"] { font-size: 1.05rem; line-height: 1.4; }

/* Font-family now comes from the sitewide .urdu class (theme.css) — every
   .mask-urdu element in the markup also carries .urdu. This block only adds
   layout refinements on top (heading size, paragraph spacing, RTL list
   padding) that are specific to this panel's Urdu content, not generic. */
.mask-urdu h3 {
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-rendering: optimizeLegibility;
}
.mask-urdu p,
.mask-urdu li { font-size: 1.1rem; line-height: 2.35; color: var(--wa-body); }
.mask-urdu ol,
.mask-urdu ul { padding-right: 1.4rem; padding-left: 0; }
.mask-urdu li { margin-bottom: .35rem; }
.mask-copy { max-width: 860px; }
.mask-note {
  background: rgba(34, 197, 94, .09);
  border: 1px solid rgba(34, 197, 94, .35);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  color: var(--wa-teal-dark);
  font-weight: 600;
}

.mask-inbox {
  background: var(--wa-surface);
  border: 1px solid var(--wa-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mask-inbox-head {
  background: var(--wa-teal-dark);
  color: #fff;
  padding: .85rem 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .95rem;
}
.mask-inbox-row {
  display: flex;
  gap: .9rem;
  padding: 1.05rem 1.2rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--wa-line);
}
.mask-inbox-row:last-child { border-bottom: 0; }
.mask-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #98A2AC;
}
.mask-avatar.brand { background: var(--wa-grad); }
.mask-inbox-row .sender {
  font-weight: 700;
  color: var(--wa-ink);
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin: 0 0 .15rem;
}
.mask-inbox-row .sender .bi-patch-check-fill { color: var(--wa-action); }
.mask-inbox-row .preview { color: var(--wa-muted); font-size: .88rem; margin: 0; }
.mask-tag {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: var(--radius-btn);
  padding: .18rem .6rem;
}
.mask-tag.on  { background: rgba(34, 197, 94, .13); color: var(--wa-teal-dark); }
.mask-tag.off { background: rgba(17, 27, 33, .07); color: var(--wa-muted); }

.mask-video {
  aspect-ratio: 16 / 9;
  max-width: 760px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--wa-line);
  box-shadow: var(--shadow-md);
  background: var(--wa-ink);
}
.mask-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.mask-req-card {
  background: var(--wa-surface);
  border: 1px solid var(--wa-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 1.7rem 1.6rem;
  height: 100%;
}
.mask-req-card h3 {
  font-size: 1.12rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.1rem;
}
.mask-req-card h3 .bi { color: var(--wa-action); }
.mask-req-card.deny h3 .bi { color: #D14343; }
.mask-req-list { list-style: none; margin: 0; padding: 0; }
.mask-req-list li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  margin-bottom: .8rem;
  color: var(--wa-body);
  font-size: .95rem;
}
.mask-req-list li:last-child { margin-bottom: 0; }
.mask-req-list li .bi { color: var(--wa-action); margin-top: .15rem; flex-shrink: 0; }
.mask-req-card.deny .mask-req-list li .bi { color: #D14343; }

.mask-download {
  background: var(--wa-surface);
  border: 1px solid rgba(34, 197, 94, .35);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 1.8rem clamp(1.2rem, 3vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.mask-download .dl-copy { max-width: 560px; }
.mask-download h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.mask-download p { color: var(--wa-muted); font-size: .93rem; margin: 0; }
.mask-download p code {
  background: var(--wa-page);
  border: 1px solid var(--wa-line);
  border-radius: 6px;
  padding: .1rem .45rem;
  color: var(--wa-teal-dark);
  font-size: .88em;
}
.mask-timeline {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: rgba(34, 197, 94, .09);
  border: 1px solid rgba(34, 197, 94, .35);
  border-radius: var(--radius-card);
  padding: 1.4rem 1.6rem;
  margin-top: 1.6rem;
}
.mask-timeline-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wa-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.mask-timeline-body h3 { font-size: 1.1rem; margin: 0 0 .4rem; color: var(--wa-teal-dark); }
.mask-timeline-body p { margin: 0; color: var(--wa-body); font-size: .95rem; }
.mask-timeline-body p + p { margin-top: .6rem; }
.mask-urdu .mask-timeline-body p { font-size: 1.05rem; line-height: 1.9; }

.mask-fee-card {
  background: var(--wa-surface);
  border: 1px solid var(--wa-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  max-width: 640px;
  overflow: hidden;
}
.mask-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--wa-line);
}
.mask-fee-row:last-of-type { border-bottom: 0; }
.mask-fee-row .lbl { color: var(--wa-body); font-weight: 600; margin: 0; }
.mask-fee-row .lbl small { display: block; color: var(--wa-muted); font-weight: 400; font-size: .84rem; }
.mask-fee-row .amt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--wa-teal-dark);
  white-space: nowrap;
  margin: 0;
}
.mask-fee-foot {
  background: var(--wa-page);
  padding: 1rem 1.5rem;
  font-size: .9rem;
  color: var(--wa-muted);
  margin: 0;
}

.mask-faqs { max-width: 820px; }
.mask-faq {
  border: 1px solid var(--wa-line);
  border-radius: 12px;
  margin-bottom: .7rem;
  overflow: hidden;
  background: var(--wa-surface);
}
.mask-faq-q {
  width: 100%;
  border: 0;
  text-align: left;
  padding: 1rem 1.2rem;
  font-weight: 600;
  font-family: inherit;
  font-size: .98rem;
  color: var(--wa-ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--wa-surface);
}
.mask-faq-q:hover { background: var(--wa-page); }
.mask-faq-q .bi { transition: transform .2s; color: var(--wa-teal); flex-shrink: 0; }
.mask-faq.open .mask-faq-q .bi { transform: rotate(180deg); }
.mask-faq-a { display: none; padding: 0 1.2rem 1.1rem; color: var(--wa-body); font-size: .93rem; }
.mask-faq.open .mask-faq-a { display: block; }

@media (max-width: 767.98px) {
  .mask-download { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   TRANSACTIONAL SMS — hero phone mockup
   ========================================================================= */
.txn-mockup { display: flex; justify-content: center; }
.txn-mockup img {
  width: 100%; max-width: 300px; height: auto; display: block;
  filter: drop-shadow(var(--shadow-lg));
}

/* =========================================================================
   TRANSACTIONAL SMS — use-case pills/chips
   ========================================================================= */
.usecase-pills { display: flex; flex-wrap: wrap; gap: .7rem; }
.usecase-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--wa-surface); border: 1px solid var(--wa-line);
  border-radius: var(--radius-btn); padding: .55rem 1.15rem .55rem .55rem;
  font-size: .9rem; font-weight: 600; color: var(--wa-ink);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--wa-ease), box-shadow .22s var(--wa-ease), border-color .22s var(--wa-ease), background .22s var(--wa-ease);
}
.usecase-pill:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .06);
}
.usecase-pill i {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--wa-grad); color: #fff; font-size: .8rem;
}