/*
 * Native-language landing pages (templates/default/lang_landing.php).
 * Loaded in <head> by index::langLanding() after destination_v2.css; every
 * rule is scoped to .lang-v2. Same look as /esim-by-city: white cards,
 * neutral grey fills, navy accents, brand pink on the main buttons only.
 * Written with logical properties (margin-inline, padding-inline,
 * text-align: start) so the Arabic and Urdu pages (dir="rtl" on the
 * page wrapper only, never on <html>) mirror without extra rules; arrows and chevrons carry
 * .lv2-mirror and flip in RTL.
 */

.lang-v2 {
   --lv2-navy: #14183A;
   --lv2-soft: #F4F5F7;
   --lv2-border: #E6E8EC;
   --lv2-text2: #5B6178;
   --lv2-text3: #8A8FA3;
   --lv2-shadow: 0 8px 24px rgba(20, 24, 58, 0.06);
   text-align: start;
}

.lang-v2 a:focus-visible,
.lang-v2 button:focus-visible {
   outline: 2px solid var(--lv2-navy);
   outline-offset: 2px;
}

.lang-v2[dir="rtl"] .lv2-mirror {
   transform: scaleX(-1);
}

.lang-v2 .lv2-icon {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--lv2-soft);
   font-size: 14px;
   color: var(--lv2-navy);
}

.lang-v2 .lv2-icon-lg {
   width: 48px;
   height: 48px;
   font-size: 20px;
}

.lang-v2 .lv2-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 18px;
}

@media (max-width: 479px) {
   .lang-v2 .lv2-actions .dv2-btn {
      width: 100%;
   }
}

/* ---------------------------------------------------------------- */
/* Hero                                                             */
/* ---------------------------------------------------------------- */
.lang-v2 .lv2-hero {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 20px;
   margin-top: 16px;
}

@media (min-width: 960px) {
   .lang-v2 .lv2-hero {
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 40px;
      align-items: center;
   }
}

.lang-v2 .lv2-hero-copy {
   min-width: 0;
   max-width: 720px;
}

.lang-v2 .dv2-hero-sub {
   max-width: 680px;
}

.lang-v2 .dv2-facts {
   margin-top: 16px;
}

.lang-v2 .lv2-alt-lang {
   margin: 16px 0 0;
}

.lang-v2 .lv2-alt-lang a {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding-block: 8px;
   padding-inline: 14px 16px;
   border: 1.5px solid var(--lv2-border);
   border-radius: 999px;
   background: #fff;
   font-weight: 600;
   color: var(--lv2-navy);
   text-decoration: none;
}

.lang-v2 .lv2-alt-lang a:hover {
   border-color: var(--lv2-navy);
   color: var(--lv2-navy);
   text-decoration: none;
}

.lang-v2 .lv2-alt-lang i {
   color: var(--lv2-text2);
}

.lang-v2 .lv2-aside {
   box-sizing: border-box;
   padding: 20px;
   border: 1px solid var(--lv2-border);
   border-radius: 20px;
   background: #fff;
   box-shadow: var(--lv2-shadow);
}

.lang-v2 .lv2-aside h2 {
   margin: 0;
   font-size: 17px;
   font-weight: 700;
   line-height: 1.3;
}

.lang-v2 .lv2-aside ul {
   margin: 14px 0 0;
   padding: 0;
   list-style: none;
}

.lang-v2 .lv2-aside li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin: 0;
   padding: 10px 0;
   border-top: 1px solid var(--lv2-border);
   font-size: 13.5px;
   line-height: 1.5;
}

.lang-v2 .lv2-aside li:first-child {
   border-top: 0;
   padding-top: 0;
}

.lang-v2 .lv2-aside strong {
   color: var(--lv2-navy);
}

/* ---------------------------------------------------------------- */
/* Featured destination cards                                       */
/* ---------------------------------------------------------------- */
.lang-v2 .lv2-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   margin: 18px 0 0;
   padding: 0;
   list-style: none;
}

@media (min-width: 640px) {
   .lang-v2 .lv2-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 960px) {
   .lang-v2 .lv2-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
   }
}

.lang-v2 .lv2-grid > li {
   display: flex;
   margin: 0;
}

.lang-v2 .lv2-card {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   box-sizing: border-box;
   min-width: 0;
   padding: 16px 18px;
   border: 1px solid var(--lv2-border);
   border-radius: 20px;
   background: #fff;
   box-shadow: var(--lv2-shadow);
   color: inherit;
   text-decoration: none;
   transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.lang-v2 .lv2-card:hover {
   border-color: #C9CDD6;
   box-shadow: 0 12px 28px rgba(20, 24, 58, 0.10);
   color: inherit;
   text-decoration: none;
   transform: translateY(-1px);
}

.lang-v2 .lv2-card-head {
   display: flex;
   align-items: center;
   gap: 12px;
}

.lang-v2 .lv2-flag {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   object-fit: cover;
   background: var(--lv2-soft);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.lang-v2 .lv2-card h3 {
   margin: 0;
   font-size: 16.5px;
   font-weight: 700;
   line-height: 1.3;
}

.lang-v2 .lv2-card-blurb {
   flex: 1 1 auto;
   margin: 12px 0 0;
   font-size: 13.5px;
   line-height: 1.55;
   color: var(--dv2-body);
}

.lang-v2 .lv2-card-foot {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 6px 12px;
   margin-top: 14px;
   padding-top: 12px;
   border-top: 1px solid var(--lv2-border);
}

.lang-v2 .lv2-card-price {
   font-size: 15px;
   font-weight: 700;
   color: var(--lv2-navy);
   white-space: nowrap;
}

.lang-v2 .lv2-card-price small {
   font-size: 12px;
   font-weight: 500;
   color: var(--lv2-text2);
}

.lang-v2 .lv2-card-cta {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-inline-start: auto;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--lv2-navy);
}

.lang-v2 .lv2-card-cta i {
   font-size: 12px;
}

.lang-v2 .lv2-card:hover .lv2-card-cta {
   text-decoration: underline;
   text-underline-offset: 2px;
}

.lang-v2 .lv2-note {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   max-width: 860px;
   margin: 16px 0 0;
   font-size: 13.5px;
   line-height: 1.6;
   color: var(--lv2-text2);
}

.lang-v2 .lv2-note i {
   margin-top: 4px;
   color: var(--lv2-navy);
}

.lang-v2 .lv2-note-strong {
   padding: 12px 16px;
   border: 1px solid var(--lv2-border);
   border-radius: 14px;
   background: var(--lv2-soft);
   font-size: 14.5px;
   font-weight: 500;
   color: var(--lv2-navy);
}

/* ---------------------------------------------------------------- */
/* Compact localised plan cards (Urdu page)                         */
/* ---------------------------------------------------------------- */
.lang-v2 .lv2-plans {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   margin: 18px 0 0;
   padding: 0;
   list-style: none;
}

@media (min-width: 640px) {
   .lang-v2 .lv2-plans {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 1100px) {
   .lang-v2 .lv2-plans {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
   }
}

.lang-v2 .lv2-plan {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   margin: 0;
   padding: 16px 18px;
   border: 1px solid var(--lv2-border);
   border-radius: 20px;
   background: #fff;
   box-shadow: var(--lv2-shadow);
}

.lang-v2 .lv2-plan-top {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px;
}

.lang-v2 .lv2-plan-data {
   font-size: 22px;
   font-weight: 700;
   color: var(--lv2-navy);
}

.lang-v2 .lv2-plan-days {
   font-size: 14px;
   font-weight: 600;
   color: var(--lv2-text2);
}

.lang-v2 .lv2-plan-price {
   display: flex;
   align-items: baseline;
   gap: 8px;
   margin-top: 6px;
}

.lang-v2 .lv2-plan-price strong {
   font-size: 20px;
   font-weight: 700;
   color: var(--lv2-navy);
}

.lang-v2 .lv2-plan-price s {
   font-size: 14px;
   color: var(--lv2-text3);
}

.lang-v2 .lv2-plan-info {
   flex: 1 1 auto;
   margin: 12px 0 0;
   padding: 12px 0 0;
   border-top: 1px solid var(--lv2-border);
   list-style: none;
   font-size: 13.5px;
}

.lang-v2 .lv2-plan-info li {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 4px 0 0;
}

.lang-v2 .lv2-plan-info i {
   width: 16px;
   color: var(--lv2-text2);
   text-align: center;
}

.lang-v2 .lv2-plan-info a {
   text-decoration: underline;
   text-underline-offset: 2px;
}

.lang-v2 .lv2-plan-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   margin-top: 14px;
}

.lang-v2 .lv2-plan-actions .dv2-btn {
   padding-inline: 10px;
}

/* ---------------------------------------------------------------- */
/* Why SimplySIM                                                    */
/* ---------------------------------------------------------------- */
.lang-v2 .lv2-why {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   margin: 18px 0 0;
   padding: 0;
   list-style: none;
}

@media (min-width: 640px) {
   .lang-v2 .lv2-why {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 960px) {
   .lang-v2 .lv2-why {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
   }
}

.lang-v2 .lv2-why > li {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   margin: 0;
   padding: 18px;
   border: 1px solid var(--lv2-border);
   border-radius: 20px;
   background: #fff;
   box-shadow: var(--lv2-shadow);
}

.lang-v2 .lv2-why > li > div {
   min-width: 0;
}

.lang-v2 .lv2-why h3 {
   margin: 2px 0 0;
   font-size: 16px;
   font-weight: 700;
   line-height: 1.3;
}

.lang-v2 .lv2-why p {
   margin: 6px 0 0;
   font-size: 13.5px;
   line-height: 1.6;
}

.lang-v2 .lv2-more {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 8px;
   font-size: 13.5px;
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.lang-v2 .lv2-more i {
   font-size: 11px;
}

/* ---------------------------------------------------------------- */
/* Panels (diaspora sections, regional pointer, device check)       */
/* ---------------------------------------------------------------- */
.lang-v2 .lv2-panel {
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding: 22px 20px;
   border: 1px solid var(--lv2-border);
   border-radius: 24px;
   background: #fff;
   box-shadow: var(--lv2-shadow);
}

@media (min-width: 768px) {
   .lang-v2 .lv2-panel {
      flex-direction: row;
      align-items: flex-start;
      gap: 20px;
      padding: 28px 32px;
   }
}

.lang-v2 .lv2-panel-soft {
   background: var(--lv2-soft);
   box-shadow: none;
}

.lang-v2 .lv2-panel-soft .lv2-icon {
   background: #fff;
}

.lang-v2 .lv2-panel-copy {
   min-width: 0;
}

.lang-v2 .lv2-panel h2 {
   margin: 0;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.3;
}

.lang-v2 .lv2-panel p {
   max-width: 760px;
   margin: 8px 0 0;
   font-size: 14.5px;
   line-height: 1.6;
}

.lang-v2 .lv2-ticks {
   margin: 12px 0 0;
   padding: 0;
   list-style: none;
}

.lang-v2 .lv2-ticks li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin: 6px 0 0;
   font-size: 14.5px;
   line-height: 1.55;
}

.lang-v2 .lv2-ticks i {
   margin-top: 4px;
   font-size: 12px;
   color: var(--lv2-navy);
}

/* Roman Urdu block */
.lang-v2 .lv2-qa {
   margin: 14px 0 0;
}

.lang-v2 .lv2-qa dt {
   margin: 14px 0 0;
   font-weight: 700;
   color: var(--lv2-navy);
}

.lang-v2 .lv2-qa dd {
   max-width: 760px;
   margin: 4px 0 0;
   margin-inline-start: 0;
   font-size: 14.5px;
   line-height: 1.6;
}

/* ---------------------------------------------------------------- */
/* How it works                                                     */
/* ---------------------------------------------------------------- */
.lang-v2 .lv2-steps {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   margin: 18px 0 0;
   padding: 0;
   list-style: none;
}

@media (min-width: 768px) {
   .lang-v2 .lv2-steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
   }
}

.lang-v2 .lv2-steps > li {
   margin: 0;
   padding: 20px;
   border: 1px solid var(--lv2-border);
   border-radius: 20px;
   background: #fff;
   box-shadow: var(--lv2-shadow);
}

.lang-v2 .lv2-step-num {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--lv2-navy);
   font-weight: 700;
   color: #fff;
}

.lang-v2 .lv2-steps h3 {
   margin: 12px 0 0;
   font-size: 16.5px;
   font-weight: 700;
   line-height: 1.3;
}

.lang-v2 .lv2-steps p {
   margin: 6px 0 0;
   font-size: 14px;
   line-height: 1.6;
}

/* ---------------------------------------------------------------- */
/* FAQ, CTA and language links                                      */
/* ---------------------------------------------------------------- */
.lang-v2 .dv2-faq .uk-accordion {
   max-width: 860px;
}

.lang-v2 .dv2-faq .uk-accordion > li {
   border-color: var(--lv2-border);
   box-shadow: none;
}

.lang-v2 .dv2-faq .uk-accordion-content a {
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.lang-v2 .dv2-faq .lv2-faq-link {
   margin-top: 8px;
}

/* UIkit floats the accordion +/- icon to the right; put it at the end. */
.lang-v2[dir="rtl"] .uk-accordion-title::before {
   float: left;
   margin-left: 0;
   margin-right: 10px;
}

.lang-v2 .lv2-cta {
   padding: 28px 20px;
   border: 1px solid var(--lv2-border);
   border-radius: 24px;
   background: #fff;
   box-shadow: var(--lv2-shadow);
   text-align: center;
}

.lang-v2 .lv2-cta h2 {
   margin: 0;
   font-size: 22px;
   font-weight: 700;
}

.lang-v2 .lv2-cta p {
   max-width: 600px;
   margin: 8px auto 0;
   font-size: 14.5px;
   line-height: 1.6;
}

.lang-v2 .lv2-cta .lv2-actions {
   justify-content: center;
}

@media (min-width: 960px) {
   .lang-v2 .lv2-cta {
      padding: 40px 32px;
   }

   .lang-v2 .lv2-cta h2 {
      font-size: 28px;
   }
}

.lang-v2 .lv2-langs h2 {
   margin: 0;
   font-size: 13px;
   font-weight: 600;
   color: var(--lv2-text2);
}

.lang-v2 .lv2-langs ul {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 10px 0 0;
   padding: 0;
   list-style: none;
}

.lang-v2 .lv2-langs li {
   margin: 0;
}

.lang-v2 .lv2-langs a {
   display: inline-flex;
   align-items: center;
   height: 34px;
   padding-inline: 14px;
   border: 1px solid var(--lv2-border);
   border-radius: 999px;
   background: var(--lv2-soft);
   font-size: 13px;
   font-weight: 500;
   color: var(--lv2-navy);
   text-decoration: none;
}

.lang-v2 .lv2-langs a:hover {
   border-color: var(--lv2-navy);
   background: #fff;
   text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* Arabic and Urdu typography                                       */
/* ---------------------------------------------------------------- */
/* Poppins first: Latin words (eSIM, WhatsApp, prices) stay on brand and
   the Arabic-script glyphs fall through to the Noto face. */
.dest-v2.lang-v2[lang="ar"],
.dest-v2.lang-v2[lang="ar"] h1,
.dest-v2.lang-v2[lang="ar"] h2,
.dest-v2.lang-v2[lang="ar"] h3,
.dest-v2.lang-v2[lang="ar"] .uk-accordion-title {
   font-family: 'Poppins', 'Noto Naskh Arabic', 'Geeza Pro', Tahoma, sans-serif;
   letter-spacing: 0;
}

.dest-v2.lang-v2[lang="ar"] p,
.dest-v2.lang-v2[lang="ar"] li,
.dest-v2.lang-v2[lang="ar"] dd {
   line-height: 1.8;
}

.dest-v2.lang-v2[lang="ar"] h1,
.dest-v2.lang-v2[lang="ar"] h2,
.dest-v2.lang-v2[lang="ar"] h3 {
   line-height: 1.5;
}

/* Nastaliq is tall: generous line height everywhere. */
.dest-v2.lang-v2[lang="ur"],
.dest-v2.lang-v2[lang="ur"] h1,
.dest-v2.lang-v2[lang="ur"] h2,
.dest-v2.lang-v2[lang="ur"] h3,
.dest-v2.lang-v2[lang="ur"] .uk-accordion-title {
   font-family: 'Poppins', 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
   letter-spacing: 0;
}

.dest-v2.lang-v2[lang="ur"] p,
.dest-v2.lang-v2[lang="ur"] li,
.dest-v2.lang-v2[lang="ur"] dd,
.dest-v2.lang-v2[lang="ur"] .dv2-hero-sub,
.dest-v2.lang-v2[lang="ur"] .uk-accordion-title {
   line-height: 2.2;
}

.dest-v2.lang-v2[lang="ur"] h1,
.dest-v2.lang-v2[lang="ur"] h2,
.dest-v2.lang-v2[lang="ur"] h3 {
   line-height: 2;
}

.dest-v2.lang-v2[lang="ur"] .dv2-btn,
.dest-v2.lang-v2[lang="ur"] .dv2-facts li,
.dest-v2.lang-v2[lang="ur"] .lv2-langs a {
   height: auto;
   min-height: 44px;
   padding-block: 4px;
   line-height: 1.9;
}

.dest-v2.lang-v2[lang="ur"] .dv2-facts li {
   min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
   .lang-v2 .lv2-card {
      transition: none;
   }
}